diff --git a/src/components/panel/panel.stories.ts b/src/components/panel/panel.stories.ts
index a91cbfd8a1d..7e5108dcfad 100644
--- a/src/components/panel/panel.stories.ts
+++ b/src/components/panel/panel.stories.ts
@@ -1,16 +1,16 @@
import { boolean, select, text } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
+import { ATTRIBUTES } from "../../../.storybook/resources";
import {
+ Attribute,
Attributes,
createComponentHTML as create,
- Attribute,
filterComponentAttributes,
modesDarkDefault
} from "../../../.storybook/utils";
-import { ATTRIBUTES } from "../../../.storybook/resources";
+import { html } from "../../../support/formatting";
import readme from "./readme.md";
import { SLOTS } from "./resources";
-import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
export default {
title: "Components/Panel",
diff --git a/src/components/panel/panel.tsx b/src/components/panel/panel.tsx
index 2389cd87bd6..4a9d9d016d3 100644
--- a/src/components/panel/panel.tsx
+++ b/src/components/panel/panel.tsx
@@ -3,26 +3,26 @@ import {
Element,
Event,
EventEmitter,
+ Fragment,
+ h,
Method,
Prop,
- h,
- VNode,
- Fragment,
State,
+ VNode,
Watch
} from "@stencil/core";
-import { CSS, ICONS, SLOTS } from "./resources";
import { focusFirstTabbable, toAriaBoolean } from "../../utils/dom";
-import { HeadingLevel, Heading } from "../functional/Heading";
-import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { createObserver } from "../../utils/observers";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { createObserver } from "../../utils/observers";
+import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
+import { Heading, HeadingLevel } from "../functional/Heading";
+import { CSS, ICONS, SLOTS } from "./resources";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
import {
diff --git a/src/components/pick-list-group/pick-list-group.tsx b/src/components/pick-list-group/pick-list-group.tsx
index ccc4dfd29c7..bd90559ca34 100644
--- a/src/components/pick-list-group/pick-list-group.tsx
+++ b/src/components/pick-list-group/pick-list-group.tsx
@@ -1,12 +1,12 @@
-import { Component, Element, Prop, h, VNode, Fragment } from "@stencil/core";
-import { CSS, SLOTS } from "./resources";
-import { getSlotted } from "../../utils/dom";
-import { HeadingLevel, Heading, constrainHeadingLevel } from "../functional/Heading";
+import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted } from "../../utils/dom";
+import { constrainHeadingLevel, Heading, HeadingLevel } from "../functional/Heading";
+import { CSS, SLOTS } from "./resources";
/**
* @slot - A slot for adding `calcite-pick-list-item` elements.
diff --git a/src/components/pick-list-item/pick-list-item.tsx b/src/components/pick-list-item/pick-list-item.tsx
index 540583f588d..f1a9629942b 100644
--- a/src/components/pick-list-item/pick-list-item.tsx
+++ b/src/components/pick-list-item/pick-list-item.tsx
@@ -11,15 +11,19 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { CSS, ICONS, SLOTS } from "./resources";
-import { ICON_TYPES } from "../pick-list/resources";
-import { getSlotted, toAriaBoolean } from "../../utils/dom";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted, toAriaBoolean } from "../../utils/dom";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
import { connectLocalized, disconnectLocalized } from "../../utils/locale";
import {
connectMessages,
@@ -28,13 +32,9 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
+import { ICON_TYPES } from "../pick-list/resources";
import { PickListItemMessages } from "./assets/pick-list-item/t9n";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
+import { CSS, ICONS, SLOTS } from "./resources";
/**
* @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.
diff --git a/src/components/pick-list/pick-list.e2e.ts b/src/components/pick-list/pick-list.e2e.ts
index 629cb46cb57..e93cabdfac0 100644
--- a/src/components/pick-list/pick-list.e2e.ts
+++ b/src/components/pick-list/pick-list.e2e.ts
@@ -1,17 +1,17 @@
import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
+import { html } from "../../../support/formatting";
+import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+import { CSS as PICK_LIST_GROUP_CSS } from "../pick-list-group/resources";
import { ICON_TYPES } from "./resources";
-import { accessible, hidden, renders, defaults } from "../../tests/commonTests";
import {
- selectionAndDeselection,
+ disabling,
filterBehavior,
- loadingState,
- keyboardNavigation,
- itemRemoval,
focusing,
- disabling
+ itemRemoval,
+ keyboardNavigation,
+ loadingState,
+ selectionAndDeselection
} from "./shared-list-tests";
-import { html } from "../../../support/formatting";
-import { CSS as PICK_LIST_GROUP_CSS } from "../pick-list-group/resources";
describe("calcite-pick-list", () => {
it("has property defaults", async () =>
diff --git a/src/components/pick-list/pick-list.stories.ts b/src/components/pick-list/pick-list.stories.ts
index 196458429b7..19acf408937 100644
--- a/src/components/pick-list/pick-list.stories.ts
+++ b/src/components/pick-list/pick-list.stories.ts
@@ -1,16 +1,16 @@
import { boolean, text } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
import {
Attribute,
- filterComponentAttributes,
Attributes,
createComponentHTML as create,
+ filterComponentAttributes,
modesDarkDefault
} from "../../../.storybook/utils";
-import readme from "./readme.md";
-import itemReadme from "../pick-list-item/readme.md";
-import groupReadme from "../pick-list-group/readme.md";
import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
+import groupReadme from "../pick-list-group/readme.md";
+import itemReadme from "../pick-list-item/readme.md";
+import readme from "./readme.md";
export default {
title: "Components/Pick List",
diff --git a/src/components/pick-list/pick-list.tsx b/src/components/pick-list/pick-list.tsx
index 46439047ade..5aac45b23d5 100644
--- a/src/components/pick-list/pick-list.tsx
+++ b/src/components/pick-list/pick-list.tsx
@@ -3,46 +3,46 @@ import {
Element,
Event,
EventEmitter,
+ h,
Listen,
Method,
Prop,
State,
- h,
VNode
} from "@stencil/core";
+import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
+import { createObserver } from "../../utils/observers";
+import { HeadingLevel } from "../functional/Heading";
import { ICON_TYPES } from "./resources";
import {
- ListFocusId,
- calciteListItemChangeHandler,
calciteInternalListItemValueChangeHandler,
+ calciteListFocusOutHandler,
+ calciteListItemChangeHandler,
cleanUpObserver,
- deselectSiblingItems,
deselectRemovedItems,
+ deselectSiblingItems,
getItemData,
handleFilter,
handleFilterEvent,
handleInitialFilter,
- calciteListFocusOutHandler,
initialize,
initializeObserver,
+ ItemData,
+ keyDownHandler,
+ ListFocusId,
mutationObserverCallback,
+ removeItem,
selectSiblings,
- setUpItems,
- keyDownHandler,
setFocus,
- ItemData,
- removeItem
+ setUpItems
} from "./shared-list-logic";
import List from "./shared-list-render";
-import { HeadingLevel } from "../functional/Heading";
-import { createObserver } from "../../utils/observers";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
/**
* @slot - A slot for adding `calcite-pick-list-item` or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
diff --git a/src/components/pick-list/shared-list-logic.ts b/src/components/pick-list/shared-list-logic.ts
index 470f9d4fbd2..601822d6233 100644
--- a/src/components/pick-list/shared-list-logic.ts
+++ b/src/components/pick-list/shared-list-logic.ts
@@ -1,9 +1,9 @@
-import { PickList } from "./pick-list";
-import { ValueList } from "../value-list/value-list";
import { debounce } from "lodash-es";
-import { focusElement, getSlotted } from "../../utils/dom";
import { getRoundRobinIndex } from "../../utils/array";
+import { focusElement, getSlotted } from "../../utils/dom";
import { SLOTS } from "../pick-list-group/resources";
+import { ValueList } from "../value-list/value-list";
+import { PickList } from "./pick-list";
type Lists = PickList | ValueList;
type ListItemElement
= T extends PickList ? HTMLCalcitePickListItemElement : HTMLCalciteValueListItemElement;
diff --git a/src/components/pick-list/shared-list-tests.ts b/src/components/pick-list/shared-list-tests.ts
index 0204913b484..2d0608c7fe7 100644
--- a/src/components/pick-list/shared-list-tests.ts
+++ b/src/components/pick-list/shared-list-tests.ts
@@ -1,8 +1,8 @@
import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
-import { disabled, focusable } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
-import { CSS as PICK_LIST_ITEM_CSS } from "../pick-list-item/resources";
+import { disabled, focusable } from "../../tests/commonTests";
import { selectText } from "../../tests/utils";
+import { CSS as PICK_LIST_ITEM_CSS } from "../pick-list-item/resources";
type ListType = "pick" | "value";
type ListElement = HTMLCalcitePickListElement | HTMLCalciteValueListElement;
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 48f75483206..ed0bef27a05 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -4,49 +4,48 @@ import {
Event,
EventEmitter,
forceUpdate,
+ h,
Host,
Method,
Prop,
State,
- Watch,
- h,
- VNode
+ VNode,
+ Watch
} from "@stencil/core";
-import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, defaultPopoverPlacement } from "./resources";
import {
- FloatingCSS,
- OverlayPositioning,
- FloatingUIComponent,
connectFloatingUI,
+ defaultOffsetDistance,
disconnectFloatingUI,
- LogicalPlacement,
EffectivePlacement,
- defaultOffsetDistance,
filterComputedPlacements,
+ FloatingCSS,
+ FloatingUIComponent,
+ LogicalPlacement,
+ OverlayPositioning,
ReferenceElement,
reposition,
updateAfterClose
} from "../../utils/floating-ui";
import {
- FocusTrapComponent,
- FocusTrap,
- connectFocusTrap,
activateFocusTrap,
+ connectFocusTrap,
deactivateFocusTrap,
+ FocusTrap,
+ FocusTrapComponent,
updateFocusTrapElements
} from "../../utils/focusTrapComponent";
+import { ARIA_CONTROLS, ARIA_EXPANDED, CSS, defaultPopoverPlacement } from "./resources";
-import { guid } from "../../utils/guid";
import { focusFirstTabbable, queryElementRoots, toAriaBoolean } from "../../utils/dom";
+import { guid } from "../../utils/guid";
import {
- OpenCloseComponent,
connectOpenCloseComponent,
- disconnectOpenCloseComponent
+ disconnectOpenCloseComponent,
+ OpenCloseComponent
} from "../../utils/openCloseComponent";
-import { HeadingLevel, Heading } from "../functional/Heading";
+import { Heading, HeadingLevel } from "../functional/Heading";
import { Scale } from "../interfaces";
-import PopoverManager from "./PopoverManager";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
import {
connectMessages,
@@ -56,12 +55,13 @@ import {
updateMessages
} from "../../utils/t9n";
import { PopoverMessages } from "./assets/popover/t9n";
+import PopoverManager from "./PopoverManager";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
const manager = new PopoverManager();
diff --git a/src/components/progress/progress.e2e.ts b/src/components/progress/progress.e2e.ts
index ece0f0d3547..76dd99f784e 100644
--- a/src/components/progress/progress.e2e.ts
+++ b/src/components/progress/progress.e2e.ts
@@ -1,4 +1,4 @@
-import { accessible, renders, hidden } from "../../tests/commonTests";
+import { accessible, hidden, renders } from "../../tests/commonTests";
describe("calcite-progress", () => {
it("renders", () => renders("calcite-progress", { display: "block" }));
diff --git a/src/components/progress/progress.stories.ts b/src/components/progress/progress.stories.ts
index f26d0b2c934..822ef4d84e2 100644
--- a/src/components/progress/progress.stories.ts
+++ b/src/components/progress/progress.stories.ts
@@ -1,9 +1,9 @@
-import { select, number, text } from "@storybook/addon-knobs";
+import { number, select, text } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
import { modesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
+import readme from "./readme.md";
export default {
title: "Components/Progress",
diff --git a/src/components/radio-button-group/radio-button-group.tsx b/src/components/radio-button-group/radio-button-group.tsx
index 7cae75ccdca..0bac67fa7bd 100644
--- a/src/components/radio-button-group/radio-button-group.tsx
+++ b/src/components/radio-button-group/radio-button-group.tsx
@@ -1,14 +1,14 @@
import {
Component,
- Host,
- h,
Element,
- Prop,
- Watch,
- VNode,
Event,
EventEmitter,
- Listen
+ h,
+ Host,
+ Listen,
+ Prop,
+ VNode,
+ Watch
} from "@stencil/core";
import { createObserver } from "../../utils/observers";
import { Layout, Scale } from "../interfaces";
diff --git a/src/components/radio-button/radio-button.stories.ts b/src/components/radio-button/radio-button.stories.ts
index ca42d3a2f8a..cf8c578fb29 100644
--- a/src/components/radio-button/radio-button.stories.ts
+++ b/src/components/radio-button/radio-button.stories.ts
@@ -1,8 +1,8 @@
import { select, text } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
import { modesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
import { html } from "../../../support/formatting";
+import readme from "./readme.md";
export default {
title: "Components/Controls/Radio/Radio Button",
diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx
index 98df782329b..3a093d2764f 100644
--- a/src/components/radio-button/radio-button.tsx
+++ b/src/components/radio-button/radio-button.tsx
@@ -11,25 +11,25 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { guid } from "../../utils/guid";
+import { getRoundRobinIndex } from "../../utils/array";
import { focusElement, getElementDir, toAriaBoolean } from "../../utils/dom";
-import { Scale } from "../interfaces";
-import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
import {
- HiddenFormInputSlot,
+ CheckableFormComponent,
connectForm,
disconnectForm,
- CheckableFormComponent
+ HiddenFormInputSlot
} from "../../utils/form";
-import { CSS } from "./resources";
-import { getRoundRobinIndex } from "../../utils/array";
+import { guid } from "../../utils/guid";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { Scale } from "../interfaces";
+import { CSS } from "./resources";
@Component({
tag: "calcite-radio-button",
diff --git a/src/components/rating/function/star.tsx b/src/components/rating/function/star.tsx
index fac732c8a18..928aa56f8e8 100644
--- a/src/components/rating/function/star.tsx
+++ b/src/components/rating/function/star.tsx
@@ -1,4 +1,4 @@
-import { h, FunctionalComponent } from "@stencil/core";
+import { FunctionalComponent, h } from "@stencil/core";
import { StarIconProps } from "../interfaces";
diff --git a/src/components/rating/rating.e2e.ts b/src/components/rating/rating.e2e.ts
index 5245fadbc62..7cb81b2bd45 100644
--- a/src/components/rating/rating.e2e.ts
+++ b/src/components/rating/rating.e2e.ts
@@ -1,12 +1,12 @@
import { newE2EPage } from "@stencil/core/testing";
import {
- renders,
accessible,
+ disabled,
focusable,
- labelable,
formAssociated,
- disabled,
hidden,
+ labelable,
+ renders,
t9n
} from "../../tests/commonTests";
diff --git a/src/components/rating/rating.stories.ts b/src/components/rating/rating.stories.ts
index f206a9e5c9f..6bef58a3a54 100644
--- a/src/components/rating/rating.stories.ts
+++ b/src/components/rating/rating.stories.ts
@@ -1,8 +1,8 @@
-import { number, select, text } from "@storybook/addon-knobs";
+import { number, select } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
import { modesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
import { html } from "../../../support/formatting";
+import readme from "./readme.md";
export default {
title: "Components/Controls/Rating",
diff --git a/src/components/rating/rating.tsx b/src/components/rating/rating.tsx
index b7ccc0db19a..40a0d608e55 100644
--- a/src/components/rating/rating.tsx
+++ b/src/components/rating/rating.tsx
@@ -4,17 +4,22 @@ import {
Event,
EventEmitter,
h,
+ Host,
Method,
Prop,
State,
- Host,
Watch
} from "@stencil/core";
-import { guid } from "../../utils/guid";
-import { Scale } from "../interfaces";
-import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label";
import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form";
+import { guid } from "../../utils/guid";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
import {
connectMessages,
@@ -23,13 +28,8 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
+import { Scale } from "../interfaces";
import { RatingMessages } from "./assets/rating/t9n";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
import { StarIcon } from "./function/star";
import { Star } from "./interfaces";
diff --git a/src/components/scrim/scrim.stories.ts b/src/components/scrim/scrim.stories.ts
index 138c266fe73..e9a4ebd161a 100644
--- a/src/components/scrim/scrim.stories.ts
+++ b/src/components/scrim/scrim.stories.ts
@@ -1,7 +1,7 @@
import { boolean, storyFilters } from "../../../.storybook/helpers";
import { modesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
import { html } from "../../../support/formatting";
+import readme from "./readme.md";
export default {
title: "Components/Scrim",
diff --git a/src/components/scrim/scrim.tsx b/src/components/scrim/scrim.tsx
index b18efce8685..a560a145bc5 100644
--- a/src/components/scrim/scrim.tsx
+++ b/src/components/scrim/scrim.tsx
@@ -1,5 +1,4 @@
-import { Component, Element, Prop, h, VNode, Watch, State } from "@stencil/core";
-import { CSS } from "./resources";
+import { Component, Element, h, Prop, State, VNode, Watch } from "@stencil/core";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
import {
connectMessages,
@@ -9,6 +8,7 @@ import {
updateMessages
} from "../../utils/t9n";
import { ScrimMessages } from "./assets/scrim/t9n";
+import { CSS } from "./resources";
/**
* @slot - A slot for adding custom content, primarily loading information.
diff --git a/src/components/segmented-control-item/segmented-control-item.tsx b/src/components/segmented-control-item/segmented-control-item.tsx
index 50ed445ff21..e8d9eecbde3 100644
--- a/src/components/segmented-control-item/segmented-control-item.tsx
+++ b/src/components/segmented-control-item/segmented-control-item.tsx
@@ -1,17 +1,17 @@
import {
Component,
- h,
- Prop,
Element,
Event,
EventEmitter,
+ h,
Host,
- Watch,
- VNode
+ Prop,
+ VNode,
+ Watch
} from "@stencil/core";
import { getElementProp, toAriaBoolean } from "../../utils/dom";
import { Appearance, Layout, Scale } from "../interfaces";
-import { SLOTS, CSS } from "./resources";
+import { CSS, SLOTS } from "./resources";
@Component({
tag: "calcite-segmented-control-item",
diff --git a/src/components/segmented-control/segmented-control.e2e.ts b/src/components/segmented-control/segmented-control.e2e.ts
index ae89ebab15d..c7f5fd085bf 100644
--- a/src/components/segmented-control/segmented-control.e2e.ts
+++ b/src/components/segmented-control/segmented-control.e2e.ts
@@ -1,6 +1,6 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { disabled, focusable, formAssociated, labelable, renders, hidden } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
+import { disabled, focusable, formAssociated, hidden, labelable, renders } from "../../tests/commonTests";
describe("calcite-segmented-control", () => {
it("renders", () => renders("calcite-segmented-control", { display: "flex" }));
diff --git a/src/components/segmented-control/segmented-control.stories.ts b/src/components/segmented-control/segmented-control.stories.ts
index 0499cd3c4f3..357bd8211eb 100644
--- a/src/components/segmented-control/segmented-control.stories.ts
+++ b/src/components/segmented-control/segmented-control.stories.ts
@@ -1,9 +1,9 @@
import { select } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
import { themesDarkDefault } from "../../../.storybook/utils";
-import readme1 from "./readme.md";
-import readme2 from "../segmented-control-item/readme.md";
import { html } from "../../../support/formatting";
+import readme2 from "../segmented-control-item/readme.md";
+import readme1 from "./readme.md";
export default {
title: "Components/Controls/Radio/Segmented Control",
diff --git a/src/components/segmented-control/segmented-control.tsx b/src/components/segmented-control/segmented-control.tsx
index 0d0414c843d..d6b25c27eae 100644
--- a/src/components/segmented-control/segmented-control.tsx
+++ b/src/components/segmented-control/segmented-control.tsx
@@ -14,8 +14,6 @@ import {
} from "@stencil/core";
import { getElementDir } from "../../utils/dom";
-import { Appearance, Layout, Scale, Width } from "../interfaces";
-import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
import {
afterConnectDefaultValueSet,
connectForm,
@@ -24,12 +22,14 @@ import {
HiddenFormInputSlot
} from "../../utils/form";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { Appearance, Layout, Scale, Width } from "../interfaces";
/**
* @slot - A slot for adding `calcite-segmented-control-item`s.
diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx
index f3f51ddbf59..37682e378fa 100644
--- a/src/components/select/select.tsx
+++ b/src/components/select/select.tsx
@@ -12,8 +12,6 @@ import {
Watch
} from "@stencil/core";
import { focusElement } from "../../utils/dom";
-import { Scale, Width } from "../interfaces";
-import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label";
import {
afterConnectDefaultValueSet,
connectForm,
@@ -21,15 +19,17 @@ import {
FormComponent,
HiddenFormInputSlot
} from "../../utils/form";
-import { CSS } from "./resources";
-import { createObserver } from "../../utils/observers";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { createObserver } from "../../utils/observers";
+import { Scale, Width } from "../interfaces";
+import { CSS } from "./resources";
type OptionOrGroup = HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement;
type NativeOptionOrGroup = HTMLOptionElement | HTMLOptGroupElement;
diff --git a/src/components/shell-center-row/shell-center-row.e2e.ts b/src/components/shell-center-row/shell-center-row.e2e.ts
index ce6a16559a2..2d08914cee0 100644
--- a/src/components/shell-center-row/shell-center-row.e2e.ts
+++ b/src/components/shell-center-row/shell-center-row.e2e.ts
@@ -1,7 +1,7 @@
import { newE2EPage } from "@stencil/core/testing";
-import { CSS, SLOTS } from "./resources";
import { accessible, defaults, hidden, renders, slots } from "../../tests/commonTests";
+import { CSS, SLOTS } from "./resources";
describe("calcite-shell-center-row", () => {
it("renders", async () => renders("calcite-shell-center-row", { display: "flex" }));
diff --git a/src/components/shell-center-row/shell-center-row.tsx b/src/components/shell-center-row/shell-center-row.tsx
index 92637b98f29..e301eb3f9e5 100644
--- a/src/components/shell-center-row/shell-center-row.tsx
+++ b/src/components/shell-center-row/shell-center-row.tsx
@@ -1,12 +1,12 @@
-import { Component, Element, Prop, h, VNode, Fragment } from "@stencil/core";
-import { CSS, SLOTS } from "./resources";
-import { Position, Scale } from "../interfaces";
-import { getSlotted } from "../../utils/dom";
+import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted } from "../../utils/dom";
+import { Position, Scale } from "../interfaces";
+import { CSS, SLOTS } from "./resources";
/**
* @slot - A slot for adding content to the `calcite-shell-panel`.
diff --git a/src/components/shell-panel/shell-panel.e2e.ts b/src/components/shell-panel/shell-panel.e2e.ts
index 02ad64eba6c..d51eafa1ea2 100644
--- a/src/components/shell-panel/shell-panel.e2e.ts
+++ b/src/components/shell-panel/shell-panel.e2e.ts
@@ -1,8 +1,8 @@
import { E2EElement, newE2EPage } from "@stencil/core/testing";
-import { CSS, SLOTS } from "./resources";
import { accessible, defaults, hidden, renders, slots, t9n } from "../../tests/commonTests";
import { getElementXY } from "../../tests/utils";
+import { CSS, SLOTS } from "./resources";
describe("calcite-shell-panel", () => {
it("renders", async () => renders("calcite-shell-panel", { display: "flex" }));
diff --git a/src/components/shell-panel/shell-panel.tsx b/src/components/shell-panel/shell-panel.tsx
index 35ced02b56c..6534458c835 100755
--- a/src/components/shell-panel/shell-panel.tsx
+++ b/src/components/shell-panel/shell-panel.tsx
@@ -1,14 +1,12 @@
-import { Component, Element, Prop, h, VNode, State, forceUpdate, Watch } from "@stencil/core";
-import { CSS, SLOTS } from "./resources";
-import { Position, Scale } from "../interfaces";
-import { getSlotted, getElementDir, isPrimaryPointerButton } from "../../utils/dom";
-import { clamp } from "../../utils/math";
+import { Component, Element, forceUpdate, h, Prop, State, VNode, Watch } from "@stencil/core";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getElementDir, getSlotted, isPrimaryPointerButton } from "../../utils/dom";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
+import { clamp } from "../../utils/math";
import {
connectMessages,
disconnectMessages,
@@ -16,7 +14,9 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
+import { Position, Scale } from "../interfaces";
import { ShellPanelMessages } from "./assets/shell-panel/t9n";
+import { CSS, SLOTS } from "./resources";
/**
* @slot - A slot for adding custom content.
diff --git a/src/components/shell/shell.stories.ts b/src/components/shell/shell.stories.ts
index 4d34f47e0fc..c3126da3b40 100644
--- a/src/components/shell/shell.stories.ts
+++ b/src/components/shell/shell.stories.ts
@@ -1,17 +1,17 @@
import { boolean, select } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
+import { ATTRIBUTES } from "../../../.storybook/resources";
import {
- filterComponentAttributes,
Attributes,
createComponentHTML as create,
+ filterComponentAttributes,
modesDarkDefault
} from "../../../.storybook/utils";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
-import { ATTRIBUTES } from "../../../.storybook/resources";
-import readme from "./readme.md";
-import panelReadme from "../shell-panel/readme.md";
-import centerRowReadme from "../shell-center-row/readme.md";
import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
+import centerRowReadme from "../shell-center-row/readme.md";
+import panelReadme from "../shell-panel/readme.md";
+import readme from "./readme.md";
export default {
title: "Components/Shell",
diff --git a/src/components/shell/shell.tsx b/src/components/shell/shell.tsx
index be99adb5e09..71c0aebd4bd 100755
--- a/src/components/shell/shell.tsx
+++ b/src/components/shell/shell.tsx
@@ -1,11 +1,11 @@
-import { Component, Element, Prop, h, VNode, Fragment, State } from "@stencil/core";
-import { CSS, SLOTS } from "./resources";
-import { slotChangeGetAssignedElements, slotChangeHasAssignedElement } from "../../utils/dom";
+import { Component, Element, Fragment, h, Prop, State, VNode } from "@stencil/core";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { slotChangeGetAssignedElements, slotChangeHasAssignedElement } from "../../utils/dom";
+import { CSS, SLOTS } from "./resources";
/**
* @slot - A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map.
diff --git a/src/components/slider/slider.e2e.ts b/src/components/slider/slider.e2e.ts
index 8387482e1ba..64ac95a6b55 100644
--- a/src/components/slider/slider.e2e.ts
+++ b/src/components/slider/slider.e2e.ts
@@ -1,7 +1,7 @@
-import { E2EPage, newE2EPage, E2EElement } from "@stencil/core/testing";
-import { defaults, disabled, formAssociated, labelable, renders, hidden } from "../../tests/commonTests";
-import { getElementXY } from "../../tests/utils";
+import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
import { html } from "../../../support/formatting";
+import { defaults, disabled, formAssociated, hidden, labelable, renders } from "../../tests/commonTests";
+import { getElementXY } from "../../tests/utils";
import { CSS } from "./resources";
describe("calcite-slider", () => {
diff --git a/src/components/slider/slider.stories.ts b/src/components/slider/slider.stories.ts
index ac9fd9955c6..29d214f5a42 100644
--- a/src/components/slider/slider.stories.ts
+++ b/src/components/slider/slider.stories.ts
@@ -1,8 +1,8 @@
-import { text, number, array, boolean as booleanFn, select } from "@storybook/addon-knobs";
+import { array, boolean as booleanFn, number, select, text } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
import { modesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
import { html } from "../../../support/formatting";
+import readme from "./readme.md";
export default {
title: "Components/Controls/Slider",
diff --git a/src/components/slider/slider.tsx b/src/components/slider/slider.tsx
index e12b31312f6..1de7f60664e 100644
--- a/src/components/slider/slider.tsx
+++ b/src/components/slider/slider.tsx
@@ -14,11 +14,7 @@ import {
} from "@stencil/core";
import { guid } from "../../utils/guid";
-import { ColorStop, DataSeries } from "../graph/interfaces";
import { intersects, isPrimaryPointerButton } from "../../utils/dom";
-import { clamp, decimalPlaces } from "../../utils/math";
-import { Scale } from "../interfaces";
-import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label";
import {
afterConnectDefaultValueSet,
connectForm,
@@ -28,20 +24,24 @@ import {
} from "../../utils/form";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
import { isActivationKey } from "../../utils/key";
+import { connectLabel, disconnectLabel, LabelableComponent } from "../../utils/label";
+import {
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
import {
connectLocalized,
disconnectLocalized,
LocalizedComponent,
- numberStringFormatter,
- NumberingSystem
+ NumberingSystem,
+ numberStringFormatter
} from "../../utils/locale";
+import { clamp, decimalPlaces } from "../../utils/math";
+import { ColorStop, DataSeries } from "../graph/interfaces";
+import { Scale } from "../interfaces";
import { CSS } from "./resources";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
type ActiveSliderProperty = "minValue" | "maxValue" | "value" | "minMaxValue";
type SetValueProperty = Exclude;
diff --git a/src/components/sortable-list/sortable-list.tsx b/src/components/sortable-list/sortable-list.tsx
index 964828db29f..d9af04ff0d7 100644
--- a/src/components/sortable-list/sortable-list.tsx
+++ b/src/components/sortable-list/sortable-list.tsx
@@ -1,20 +1,20 @@
-import Sortable from "sortablejs";
import {
Component,
Element,
Event,
EventEmitter,
+ h,
Listen,
Prop,
State,
- h,
VNode
} from "@stencil/core";
+import Sortable from "sortablejs";
+import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
import { createObserver } from "../../utils/observers";
+import { HandleNudge } from "../handle/interfaces";
import { Layout } from "../interfaces";
import { CSS } from "./resources";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { HandleNudge } from "../handle/interfaces";
/**
* @slot - A slot for adding sortable items.
diff --git a/src/components/split-button/split-button.tsx b/src/components/split-button/split-button.tsx
index 27c7b2e7de4..449d424f97a 100644
--- a/src/components/split-button/split-button.tsx
+++ b/src/components/split-button/split-button.tsx
@@ -1,9 +1,9 @@
import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from "@stencil/core";
-import { CSS } from "./resources";
-import { DropdownIconType } from "../button/interfaces";
-import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
import { OverlayPositioning } from "../../utils/floating-ui";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { DropdownIconType } from "../button/interfaces";
+import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
+import { CSS } from "./resources";
/**
* @slot - A slot for adding `calcite-dropdown` content.
diff --git a/src/components/stepper/stepper.tsx b/src/components/stepper/stepper.tsx
index 07ffde6f514..81db674fe4d 100644
--- a/src/components/stepper/stepper.tsx
+++ b/src/components/stepper/stepper.tsx
@@ -10,10 +10,10 @@ import {
VNode
} from "@stencil/core";
+import { focusElementInGroup } from "../../utils/dom";
+import { NumberingSystem } from "../../utils/locale";
import { Layout, Scale } from "../interfaces";
import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
-import { NumberingSystem } from "../../utils/locale";
-import { focusElementInGroup } from "../../utils/dom";
/**
* @slot - A slot for adding `calcite-stepper-item` elements.
diff --git a/src/components/switch/switch.e2e.ts b/src/components/switch/switch.e2e.ts
index 2a6864020ef..924cec1cb94 100644
--- a/src/components/switch/switch.e2e.ts
+++ b/src/components/switch/switch.e2e.ts
@@ -1,5 +1,5 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, disabled, formAssociated, HYDRATED_ATTR, labelable, hidden } from "../../tests/commonTests";
+import { accessible, disabled, formAssociated, hidden, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
describe("calcite-switch", () => {
it("renders with correct default attributes", async () => {
diff --git a/src/components/switch/switch.stories.ts b/src/components/switch/switch.stories.ts
index 49facf69b86..b6b8ffd813f 100644
--- a/src/components/switch/switch.stories.ts
+++ b/src/components/switch/switch.stories.ts
@@ -1,8 +1,8 @@
import { select } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
-import readme from "./readme.md";
-import { html } from "../../../support/formatting";
import { modesDarkDefault } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
+import readme from "./readme.md";
export default {
title: "Components/Controls/Switch",
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
index 619dbca15ac..8b8ae6647af 100644
--- a/src/components/switch/switch.tsx
+++ b/src/components/switch/switch.tsx
@@ -10,22 +10,22 @@ import {
VNode
} from "@stencil/core";
import { focusElement, toAriaBoolean } from "../../utils/dom";
-import { Scale } from "../interfaces";
-import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
import {
+ CheckableFormComponent,
connectForm,
disconnectForm,
- CheckableFormComponent,
HiddenFormInputSlot
} from "../../utils/form";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
import { isActivationKey } from "../../utils/key";
+import { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from "../../utils/label";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { Scale } from "../interfaces";
@Component({
tag: "calcite-switch",
diff --git a/src/components/tab-nav/tab-nav.tsx b/src/components/tab-nav/tab-nav.tsx
index bd7d40048f2..ea968484428 100644
--- a/src/components/tab-nav/tab-nav.tsx
+++ b/src/components/tab-nav/tab-nav.tsx
@@ -11,17 +11,16 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { TabChangeEventDetail } from "../tab/interfaces";
import {
- getElementDir,
filterDirectChildren,
focusElementInGroup,
- FocusElementInGroupDestination
+ FocusElementInGroupDestination,
+ getElementDir
} from "../../utils/dom";
-import { TabID, TabLayout } from "../tabs/interfaces";
-import { TabPosition } from "../tabs/interfaces";
-import { Scale } from "../interfaces";
import { createObserver } from "../../utils/observers";
+import { Scale } from "../interfaces";
+import { TabChangeEventDetail } from "../tab/interfaces";
+import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
/**
* @slot - A slot for adding `calcite-tab-title`s.
diff --git a/src/components/tab-title/tab-title.tsx b/src/components/tab-title/tab-title.tsx
index f99b52bd962..5c7f9d028a1 100644
--- a/src/components/tab-title/tab-title.tsx
+++ b/src/components/tab-title/tab-title.tsx
@@ -13,13 +13,13 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { TabChangeEventDetail } from "../tab/interfaces";
-import { guid } from "../../utils/guid";
import { getElementDir, getElementProp, toAriaBoolean } from "../../utils/dom";
-import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
-import { FlipContext, Scale } from "../interfaces";
-import { createObserver } from "../../utils/observers";
+import { guid } from "../../utils/guid";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { createObserver } from "../../utils/observers";
+import { FlipContext, Scale } from "../interfaces";
+import { TabChangeEventDetail } from "../tab/interfaces";
+import { TabID, TabLayout, TabPosition } from "../tabs/interfaces";
/**
* @slot - A slot for adding text.
diff --git a/src/components/tab/tab.tsx b/src/components/tab/tab.tsx
index 246b4ffd735..9dc51a8966b 100644
--- a/src/components/tab/tab.tsx
+++ b/src/components/tab/tab.tsx
@@ -1,20 +1,20 @@
import {
Component,
- Prop,
Element,
- Listen,
- Method,
Event,
EventEmitter,
h,
- State,
Host,
+ Listen,
+ Method,
+ Prop,
+ State,
VNode
} from "@stencil/core";
-import { TabChangeEventDetail } from "./interfaces";
-import { guid } from "../../utils/guid";
import { nodeListToArray } from "../../utils/dom";
+import { guid } from "../../utils/guid";
import { Scale } from "../interfaces";
+import { TabChangeEventDetail } from "./interfaces";
/**
* @slot - A slot for adding custom content.
diff --git a/src/components/tabs/tabs.e2e.ts b/src/components/tabs/tabs.e2e.ts
index 761047c5858..ab69589b364 100644
--- a/src/components/tabs/tabs.e2e.ts
+++ b/src/components/tabs/tabs.e2e.ts
@@ -1,6 +1,6 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, defaults, hidden } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
+import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
describe("calcite-tabs", () => {
const tabsContent = `
diff --git a/src/components/tabs/tabs.stories.ts b/src/components/tabs/tabs.stories.ts
index 477c427e514..5f52d38c1bc 100644
--- a/src/components/tabs/tabs.stories.ts
+++ b/src/components/tabs/tabs.stories.ts
@@ -1,12 +1,12 @@
-import { select, optionsKnob } from "@storybook/addon-knobs";
+import { optionsKnob, select } from "@storybook/addon-knobs";
import { iconNames, storyFilters } from "../../../.storybook/helpers";
-import { modesDarkDefault } from "../../../.storybook/utils";
import { placeholderImage } from "../../../.storybook/placeholderImage";
-import readme1 from "./readme.md";
-import readme2 from "../tab/readme.md";
+import { modesDarkDefault } from "../../../.storybook/utils";
+import { html } from "../../../support/formatting";
import readme3 from "../tab-nav/readme.md";
import readme4 from "../tab-title/readme.md";
-import { html } from "../../../support/formatting";
+import readme2 from "../tab/readme.md";
+import readme1 from "./readme.md";
export default {
title: "Components/Tabs",
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index 650266eaebc..379cdb02bf1 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -1,6 +1,6 @@
-import { Component, Prop, h, Element, Listen, State, VNode, Fragment } from "@stencil/core";
-import { TabLayout, TabPosition } from "./interfaces";
+import { Component, Element, Fragment, h, Listen, Prop, State, VNode } from "@stencil/core";
import { Scale } from "../interfaces";
+import { TabLayout, TabPosition } from "./interfaces";
import { SLOTS } from "./resources";
/**
diff --git a/src/components/tile-select-group/tile-select-group.tsx b/src/components/tile-select-group/tile-select-group.tsx
index ceeca3128a4..23d21620f40 100644
--- a/src/components/tile-select-group/tile-select-group.tsx
+++ b/src/components/tile-select-group/tile-select-group.tsx
@@ -1,6 +1,6 @@
-import { Component, h, VNode, Prop, Element } from "@stencil/core";
-import { TileSelectGroupLayout } from "./interfaces";
+import { Component, Element, h, Prop, VNode } from "@stencil/core";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { TileSelectGroupLayout } from "./interfaces";
/**
* @slot - A slot for adding `calcite-tile-select` elements.
diff --git a/src/components/tile-select/tile-select.tsx b/src/components/tile-select/tile-select.tsx
index 783714d4eab..f140cc63a4b 100644
--- a/src/components/tile-select/tile-select.tsx
+++ b/src/components/tile-select/tile-select.tsx
@@ -4,24 +4,24 @@ import {
Event,
EventEmitter,
h,
- Prop,
Listen,
- VNode,
- Watch,
+ Method,
+ Prop,
State,
- Method
+ VNode,
+ Watch
} from "@stencil/core";
-import { Alignment, Width } from "../interfaces";
-import { TileSelectType } from "./interfaces";
import { guid } from "../../utils/guid";
-import { CSS } from "./resources";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { Alignment, Width } from "../interfaces";
+import { TileSelectType } from "./interfaces";
+import { CSS } from "./resources";
/**
* @slot - A slot for adding custom content.
diff --git a/src/components/tile/tile.tsx b/src/components/tile/tile.tsx
index 3cb8c6baa0e..a116b65240f 100644
--- a/src/components/tile/tile.tsx
+++ b/src/components/tile/tile.tsx
@@ -1,12 +1,12 @@
import { Component, Element, Fragment, h, Prop, VNode } from "@stencil/core";
-import { SLOTS } from "./resources";
-import { getSlotted } from "../../utils/dom";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted } from "../../utils/dom";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
+import { SLOTS } from "./resources";
/**
* @slot content-start - A slot for adding non-actionable elements before the component's content.
diff --git a/src/components/time-picker/time-picker.e2e.ts b/src/components/time-picker/time-picker.e2e.ts
index 725128258a9..aad3cee0a62 100644
--- a/src/components/time-picker/time-picker.e2e.ts
+++ b/src/components/time-picker/time-picker.e2e.ts
@@ -1,5 +1,5 @@
import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, renders, hidden, t9n } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, renders, t9n } from "../../tests/commonTests";
import { formatTimePart } from "../../utils/time";
import { CSS } from "./resources";
diff --git a/src/components/time-picker/time-picker.tsx b/src/components/time-picker/time-picker.tsx
index 534b589f238..aa25f3c0388 100644
--- a/src/components/time-picker/time-picker.tsx
+++ b/src/components/time-picker/time-picker.tsx
@@ -11,10 +11,23 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { Scale } from "../interfaces";
import { isActivationKey, numberKeys } from "../../utils/key";
import { isValidNumber } from "../../utils/number";
+import { Scale } from "../interfaces";
+import {
+ connectLocalized,
+ disconnectLocalized,
+ LocalizedComponent,
+ NumberingSystem
+} from "../../utils/locale";
+import {
+ connectMessages,
+ disconnectMessages,
+ setUpMessages,
+ T9nComponent,
+ updateMessages
+} from "../../utils/t9n";
import {
formatTimePart,
getLocaleHourCycle,
@@ -30,27 +43,14 @@ import {
parseTimeString,
TimePart
} from "../../utils/time";
-import { CSS } from "./resources";
-import {
- connectLocalized,
- disconnectLocalized,
- LocalizedComponent,
- NumberingSystem
-} from "../../utils/locale";
import { TimePickerMessages } from "./assets/time-picker/t9n";
-import {
- connectMessages,
- disconnectMessages,
- setUpMessages,
- T9nComponent,
- updateMessages
-} from "../../utils/t9n";
+import { CSS } from "./resources";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
function capitalize(str: string): string {
diff --git a/src/components/tip-group/tip-group.tsx b/src/components/tip-group/tip-group.tsx
index 6f3dc656b1a..4b390aeee7e 100644
--- a/src/components/tip-group/tip-group.tsx
+++ b/src/components/tip-group/tip-group.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, h, VNode } from "@stencil/core";
+import { Component, h, Prop, VNode } from "@stencil/core";
/**
* @slot - A slot for adding `calcite-tip`s.
diff --git a/src/components/tip-manager/tip-manager.e2e.ts b/src/components/tip-manager/tip-manager.e2e.ts
index c259747cccf..71c47f99c49 100644
--- a/src/components/tip-manager/tip-manager.e2e.ts
+++ b/src/components/tip-manager/tip-manager.e2e.ts
@@ -1,6 +1,6 @@
import { newE2EPage } from "@stencil/core/testing";
+import { accessible, defaults, hidden, renders, t9n } from "../../tests/commonTests";
import { CSS, TEXT } from "./resources";
-import { accessible, defaults, renders, hidden, t9n } from "../../tests/commonTests";
describe("calcite-tip-manager", () => {
it("renders", async () => renders("calcite-tip-manager", { display: "block" }));
diff --git a/src/components/tip-manager/tip-manager.stories.ts b/src/components/tip-manager/tip-manager.stories.ts
index a81b18c9625..6d378c28d2f 100644
--- a/src/components/tip-manager/tip-manager.stories.ts
+++ b/src/components/tip-manager/tip-manager.stories.ts
@@ -1,15 +1,15 @@
import { boolean } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
+import { placeholderImage } from "../../../.storybook/placeholderImage";
import {
Attribute,
- filterComponentAttributes,
Attributes,
createComponentHTML as create,
+ filterComponentAttributes,
modesDarkDefault
} from "../../../.storybook/utils";
-import readme from "./readme.md";
import { html } from "../../../support/formatting";
-import { placeholderImage } from "../../../.storybook/placeholderImage";
-import { storyFilters } from "../../../.storybook/helpers";
+import readme from "./readme.md";
export default {
title: "Components/Tips/Tip Manager",
diff --git a/src/components/tip-manager/tip-manager.tsx b/src/components/tip-manager/tip-manager.tsx
index cfbada1528d..4f7201821fd 100644
--- a/src/components/tip-manager/tip-manager.tsx
+++ b/src/components/tip-manager/tip-manager.tsx
@@ -3,25 +3,25 @@ import {
Element,
Event,
EventEmitter,
+ h,
Method,
Prop,
State,
- Watch,
- h,
- VNode
+ VNode,
+ Watch
} from "@stencil/core";
-import { CSS, ICONS } from "./resources";
import { getElementDir, toAriaBoolean } from "../../utils/dom";
-import { HeadingLevel, Heading } from "../functional/Heading";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
import { createObserver } from "../../utils/observers";
-import { TipManagerMessages } from "./assets/tip-manager/t9n";
import {
connectMessages,
disconnectMessages,
setUpMessages,
updateMessages
} from "../../utils/t9n";
-import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { Heading, HeadingLevel } from "../functional/Heading";
+import { TipManagerMessages } from "./assets/tip-manager/t9n";
+import { CSS, ICONS } from "./resources";
/**
* @slot - A slot for adding `calcite-tip`s.
diff --git a/src/components/tip/tip.tsx b/src/components/tip/tip.tsx
index 2266708607e..4d0f08a163a 100644
--- a/src/components/tip/tip.tsx
+++ b/src/components/tip/tip.tsx
@@ -3,21 +3,19 @@ import {
Element,
Event,
EventEmitter,
- Prop,
+ Fragment,
h,
+ Prop,
+ State,
VNode,
- Fragment,
- Watch,
- State
+ Watch
} from "@stencil/core";
-import { CSS, ICONS, SLOTS } from "./resources";
-import { getSlotted } from "../../utils/dom";
-import { HeadingLevel, Heading, constrainHeadingLevel } from "../functional/Heading";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted } from "../../utils/dom";
import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
import {
connectMessages,
@@ -26,7 +24,9 @@ import {
T9nComponent,
updateMessages
} from "../../utils/t9n";
+import { constrainHeadingLevel, Heading, HeadingLevel } from "../functional/Heading";
import { TipMessages } from "./assets/tip/t9n";
+import { CSS, ICONS, SLOTS } from "./resources";
/**
* @slot - A slot for adding text and a hyperlink.
diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx
index b1848267b86..d7217198200 100644
--- a/src/components/tooltip/tooltip.tsx
+++ b/src/components/tooltip/tooltip.tsx
@@ -1,36 +1,36 @@
import {
Component,
Element,
+ Event,
+ EventEmitter,
+ h,
Host,
Method,
Prop,
State,
- Watch,
- h,
VNode,
- Event,
- EventEmitter
+ Watch
} from "@stencil/core";
-import { CSS, ARIA_DESCRIBED_BY } from "./resources";
-import { guid } from "../../utils/guid";
+import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
import {
- OverlayPositioning,
- FloatingUIComponent,
connectFloatingUI,
+ defaultOffsetDistance,
disconnectFloatingUI,
+ FloatingCSS,
+ FloatingUIComponent,
LogicalPlacement,
- defaultOffsetDistance,
+ OverlayPositioning,
ReferenceElement,
reposition,
- FloatingCSS,
updateAfterClose
} from "../../utils/floating-ui";
-import { queryElementRoots, toAriaBoolean } from "../../utils/dom";
+import { guid } from "../../utils/guid";
import {
- OpenCloseComponent,
connectOpenCloseComponent,
- disconnectOpenCloseComponent
+ disconnectOpenCloseComponent,
+ OpenCloseComponent
} from "../../utils/openCloseComponent";
+import { ARIA_DESCRIBED_BY, CSS } from "./resources";
import TooltipManager from "./TooltipManager";
diff --git a/src/components/tree-item/tree-item.tsx b/src/components/tree-item/tree-item.tsx
index 3d0c6c7e058..682bbe186e2 100644
--- a/src/components/tree-item/tree-item.tsx
+++ b/src/components/tree-item/tree-item.tsx
@@ -1,33 +1,33 @@
import {
Component,
Element,
- Prop,
- Host,
Event,
EventEmitter,
- Listen,
- Watch,
h,
- VNode
+ Host,
+ Listen,
+ Prop,
+ VNode,
+ Watch
} from "@stencil/core";
-import { TreeItemSelectDetail } from "./interfaces";
-import {
- nodeListToArray,
- getElementDir,
- filterDirectChildren,
- getSlotted,
- toAriaBoolean
-} from "../../utils/dom";
-import { Scale, SelectionMode } from "../interfaces";
-import { CSS, SLOTS, ICONS } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import {
+ filterDirectChildren,
+ getElementDir,
+ getSlotted,
+ nodeListToArray,
+ toAriaBoolean
+} from "../../utils/dom";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
import { onToggleOpenCloseComponent, OpenCloseComponent } from "../../utils/openCloseComponent";
+import { CSS_UTILITY } from "../../utils/resources";
+import { Scale, SelectionMode } from "../interfaces";
+import { TreeItemSelectDetail } from "./interfaces";
+import { CSS, ICONS, SLOTS } from "./resources";
/**
* @slot - A slot for adding text.
diff --git a/src/components/tree/tree.e2e.ts b/src/components/tree/tree.e2e.ts
index 80f1e91583a..70bf978a3ce 100644
--- a/src/components/tree/tree.e2e.ts
+++ b/src/components/tree/tree.e2e.ts
@@ -1,6 +1,6 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
import { html } from "../../../support/formatting";
+import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
import { CSS } from "../tree-item/resources";
import SpyInstance = jest.SpyInstance;
diff --git a/src/components/tree/tree.stories.ts b/src/components/tree/tree.stories.ts
index 6c113162f35..da5e9e2e3df 100644
--- a/src/components/tree/tree.stories.ts
+++ b/src/components/tree/tree.stories.ts
@@ -1,9 +1,9 @@
import { select } from "@storybook/addon-knobs";
import { boolean, storyFilters } from "../../../.storybook/helpers";
import { modesDarkDefault } from "../../../.storybook/utils";
-import readme from "./readme.md";
-import treeItemReadme from "../tree-item/readme.md";
import { html } from "../../../support/formatting";
+import treeItemReadme from "../tree-item/readme.md";
+import readme from "./readme.md";
const treeItems = `
diff --git a/src/components/tree/tree.tsx b/src/components/tree/tree.tsx
index a54c69064b9..9a415e6779c 100644
--- a/src/components/tree/tree.tsx
+++ b/src/components/tree/tree.tsx
@@ -10,8 +10,8 @@ import {
VNode
} from "@stencil/core";
import { focusElement, getRootNode, nodeListToArray } from "../../utils/dom";
-import { TreeItemSelectDetail } from "../tree-item/interfaces";
import { Scale, SelectionMode } from "../interfaces";
+import { TreeItemSelectDetail } from "../tree-item/interfaces";
import { getEnabledSiblingItem } from "./utils";
/**
diff --git a/src/components/value-list-item/value-list-item.tsx b/src/components/value-list-item/value-list-item.tsx
index 9b0598d029b..18079b6891c 100644
--- a/src/components/value-list-item/value-list-item.tsx
+++ b/src/components/value-list-item/value-list-item.tsx
@@ -10,23 +10,23 @@ import {
Prop,
VNode
} from "@stencil/core";
-import { ICON_TYPES } from "../pick-list/resources";
-import { guid } from "../../utils/guid";
-import { CSS, SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
-import { ICONS, SLOTS } from "./resources";
-import { getSlotted } from "../../utils/dom";
import {
ConditionalSlotComponent,
connectConditionalSlotComponent,
disconnectConditionalSlotComponent
} from "../../utils/conditionalSlot";
+import { getSlotted } from "../../utils/dom";
+import { guid } from "../../utils/guid";
import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
import {
- setUpLoadableComponent,
- setComponentLoaded,
+ componentLoaded,
LoadableComponent,
- componentLoaded
+ setComponentLoaded,
+ setUpLoadableComponent
} from "../../utils/loadable";
+import { CSS, SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
+import { ICON_TYPES } from "../pick-list/resources";
+import { ICONS, SLOTS } from "./resources";
/**
* @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component.
diff --git a/src/components/value-list/value-list.e2e.ts b/src/components/value-list/value-list.e2e.ts
index edc8c43adac..e7f6e9606bc 100644
--- a/src/components/value-list/value-list.e2e.ts
+++ b/src/components/value-list/value-list.e2e.ts
@@ -1,17 +1,17 @@
import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { CSS, ICON_TYPES } from "./resources";
+import { html } from "../../../support/formatting";
import { accessible, hidden, renders, t9n } from "../../tests/commonTests";
+import { dragAndDrop } from "../../tests/utils";
import {
- selectionAndDeselection,
+ disabling,
filterBehavior,
- loadingState,
- keyboardNavigation,
- itemRemoval,
focusing,
- disabling
+ itemRemoval,
+ keyboardNavigation,
+ loadingState,
+ selectionAndDeselection
} from "../pick-list/shared-list-tests";
-import { dragAndDrop } from "../../tests/utils";
-import { html } from "../../../support/formatting";
+import { CSS, ICON_TYPES } from "./resources";
describe("calcite-value-list", () => {
it("renders", () => renders("calcite-value-list", { display: "flex" }));
diff --git a/src/components/value-list/value-list.stories.ts b/src/components/value-list/value-list.stories.ts
index 50bacf5b8dd..cadd039084f 100644
--- a/src/components/value-list/value-list.stories.ts
+++ b/src/components/value-list/value-list.stories.ts
@@ -1,15 +1,15 @@
import { boolean } from "@storybook/addon-knobs";
+import { storyFilters } from "../../../.storybook/helpers";
import {
Attribute,
- filterComponentAttributes,
Attributes,
createComponentHTML as create,
+ filterComponentAttributes,
modesDarkDefault
} from "../../../.storybook/utils";
-import readme from "./readme.md";
-import itemReadme from "../value-list-item/readme.md";
import { html } from "../../../support/formatting";
-import { storyFilters } from "../../../.storybook/helpers";
+import itemReadme from "../value-list-item/readme.md";
+import readme from "./readme.md";
export default {
title: "Components/Value List",
diff --git a/src/components/value-list/value-list.tsx b/src/components/value-list/value-list.tsx
index e8a2abf16bd..b8cda713b69 100644
--- a/src/components/value-list/value-list.tsx
+++ b/src/components/value-list/value-list.tsx
@@ -1,4 +1,3 @@
-import Sortable from "sortablejs";
import {
Component,
Element,
@@ -12,15 +11,30 @@ import {
VNode,
Watch
} from "@stencil/core";
-import { CSS, ICON_TYPES } from "./resources";
+import Sortable from "sortablejs";
+import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
import {
- ListFocusId,
+ componentLoaded,
+ LoadableComponent,
+ setComponentLoaded,
+ setUpLoadableComponent
+} from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
+import { createObserver } from "../../utils/observers";
+import {
+ connectMessages,
+ disconnectMessages,
+ setUpMessages,
+ T9nComponent,
+ updateMessages
+} from "../../utils/t9n";
+import {
+ calciteInternalListItemValueChangeHandler,
calciteListFocusOutHandler,
calciteListItemChangeHandler,
- calciteInternalListItemValueChangeHandler,
cleanUpObserver,
- deselectSiblingItems,
deselectRemovedItems,
+ deselectSiblingItems,
getItemData,
handleFilter,
handleFilterEvent,
@@ -29,32 +43,18 @@ import {
initializeObserver,
ItemData,
keyDownHandler,
+ ListFocusId,
+ moveItemIndex,
mutationObserverCallback,
removeItem,
selectSiblings,
setFocus,
- setUpItems,
- moveItemIndex
+ setUpItems
} from "../pick-list/shared-list-logic";
import List from "../pick-list/shared-list-render";
-import { createObserver } from "../../utils/observers";
-import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { getHandleAndItemElement, getScreenReaderText } from "./utils";
-import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import {
- connectMessages,
- disconnectMessages,
- setUpMessages,
- T9nComponent,
- updateMessages
-} from "../../utils/t9n";
import { ValueListMessages } from "./assets/value-list/t9n";
-import {
- setUpLoadableComponent,
- setComponentLoaded,
- LoadableComponent,
- componentLoaded
-} from "../../utils/loadable";
+import { CSS, ICON_TYPES } from "./resources";
+import { getHandleAndItemElement, getScreenReaderText } from "./utils";
/**
* @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.
diff --git a/src/demos/popover.html b/src/demos/popover.html
index ab307ba6e99..9279d3b8042 100644
--- a/src/demos/popover.html
+++ b/src/demos/popover.html
@@ -1,188 +1,216 @@
-
-
-
-
-
- Popover
-
-
-
-
-
-
- Popover
-
-
-
-
Clickable popover
-
-
-
- Clickable popover
+
+
+
+
+
Popover
+
+
+
+
+
+
+ Popover
+
+
+
+
Clickable popover
+
+
+
+ Clickable popover
+
-
-
-
With close button
+
+
+
With close button
-
-
- With close button
+
+
+ With close button
+
-
-
-
-
Title, content & CTA
+
+
+
Title, content & CTA
-
-
- Title, content & CTA
+
+
+ Title, content & CTA
+
-
-
-
-
Heading (in prop), content & CTA
+
+
+
Heading (in prop), content & CTA
-
-
- Heading (in prop), content & CTA
+
+
+ Heading (in prop), content & CTA
+
-
-
-
-
Tooltip and popover test
+
+
+
Tooltip and popover test
-
-
- Tooltip and popover test
-
-
-
- Lorem Ipsum is simply of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
- printer of type and scrambled it to make a type specimen book.
-
-
-
-
- Hello! I am some popover content!
-
-
-
-
-
-
-
-
-
-
- Das erste Attribut wird mit dem zweiten Attribut verglichen und als einfaches Verhältnis, als "A als
- Prozentsatz von B " oder als "A als Prozentsatz von A + B " dargestellt. Beispiele: Umsatz/Umsatzkosten,
- Maisanbaufläche/Gesamtanbaufläche oder Maisanbaufläche/(Mais- + Weizenanbaufläche).
-
-
- Das erste Attribut wird mit dem zweiten Attribut verglichen und als einfaches Verhältnis, als "A als
- Prozentsatz von B " oder als "A als Prozentsatz von A + B " dargestellt. Beispiele: Umsatz/Umsatzkosten,
- Maisanbaufläche/Gesamtanbaufläche oder Maisanbaufläche/(Mais- + Weizenanbaufläche).
-
Nested popover
+
+
+ Tooltip and popover test
-
-
-
-
-
-
I am a title!
-
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
- industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
- scrambled it to make a type specimen book.
-
-
I am an inline link
-
-
-
-
- 
-
-
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
- industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
- scrambled it to make a type specimen book.
-
-
I am an inline link
-
-
-
-
- Hello! I am some popover content!
-
-
-
- Wrapped in Tabs
-
-
-
- Tab 1 Title
- Tab 2 Title
-
-
-
- Clickable popover
-
-
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
- industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
- scrambled it to make a type specimen book.
-
-
- Hello! I am some popover content!
+
+ Lorem Ipsum is simply of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
+ printer of type and scrambled it to make a type specimen book.
+
+
+
+
+ Hello! I am some popover content!
+
+
+
+
+
+
+
+
+
+
+ Das erste Attribut wird mit dem zweiten Attribut verglichen und als einfaches Verhältnis, als "A als
+ Prozentsatz von B " oder als "A als Prozentsatz von A + B " dargestellt. Beispiele: Umsatz/Umsatzkosten,
+ Maisanbaufläche/Gesamtanbaufläche oder Maisanbaufläche/(Mais- + Weizenanbaufläche).
+
-
-
Tab 2 Content
-
+ Das erste Attribut wird mit dem zweiten Attribut verglichen und als einfaches Verhältnis, als "A als
+ Prozentsatz von B " oder als "A als Prozentsatz von A + B " dargestellt. Beispiele: Umsatz/Umsatzkosten,
+ Maisanbaufläche/Gesamtanbaufläche oder Maisanbaufläche/(Mais- + Weizenanbaufläche).
+
Nested popover
+
+
+
I am a title!
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+ industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+ scrambled it to make a type specimen book.
+
+
I am an inline link
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+ industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+ scrambled it to make a type specimen book.
+
+
I am an inline link
+
Hello! I am some popover content!
+
+
+
+ Wrapped in Tabs
+
+
+
+ Tab 1 Title
+ Tab 2 Title
+
+
+
+ Clickable popover
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+ industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+ scrambled it to make a type specimen book.
+
+
+ Hello! I am some popover content!
+
+
+ Tab 2 Content
+
+
-
-
-
-
\ No newline at end of file
+
+
+