@esri/calcite-components 2.11.0-next.21 → 2.11.0-next.23

package/dist/components/tab-title.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { proxyCustomElement, HTMLElement, createEvent, Build, h, Host } from '@stencil/core/internal/client/index.js';
 import { t as toAriaBoolean, a as getElementDir, z as nodeListToArray } from './dom.js';
@@ -16,18 +16,21 @@ import { d as defineCustomElement$1 } from './icon.js';
 const CSS = {
     closeButton: "close-button",
     container: "container",
+    containerBottom: "container--bottom",
     content: "content",
     contentHasText: "content--has-text",
     iconEnd: "icon-end",
     iconPresent: "icon-present",
     iconStart: "icon-start",
     titleIcon: "calcite-tab-title--icon",
+    scale: (scale) => `scale-${scale}`,
+    selectedIndicator: "selected-indicator",
 };
 const ICONS = {
     close: "x",
 };
 
-const tabTitleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{display:flex;align-items:center;justify-content:center}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:0.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host(:focus) .container{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-color-foreground-1);padding:0.25rem;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0 -2px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container{background-color:var(--calcite-color-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-color-border-1);border-inline-end-color:var(--calcite-color-border-1)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:0.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:0.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
+const tabTitleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}.content{position:relative;margin-block-end:0.125rem;box-sizing:border-box;display:flex;block-size:100%;align-items:center;justify-content:center}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-s .close-button{inline-size:1.25rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-m .close-button{inline-size:1.75rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.scale-l .close-button{inline-size:2rem}:host([closable]) .content{border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:0.25rem}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;justify-content:center;text-align:center}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{flex:1 1 auto;flex-grow:1}.container{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.selected-indicator{position:absolute;display:block;block-size:0.125rem;inline-size:100%;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%}.container--bottom .selected-indicator{inset-block-end:unset;inset-block-start:0}:host([bordered]) .selected-indicator{inset-block-start:0;inset-block-end:unset;inset-inline-start:-1px;inset-inline-end:0;inline-size:calc(100% + var(--calcite-spacing-base))}:host([bordered][selected]) .container::after{position:absolute;display:block;block-size:0.125rem;inline-size:100%;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%;background:var(--calcite-color-foreground-1);content:\"\"}:host([bordered][selected]) .container.container--bottom::after{inset-block-start:-1px}:host([bordered][selected]:hover) .container::after{background:var(--calcite-color-foreground-2)}:host([bordered][selected]:focus) .container::after{background:transparent}:host([bordered]) .container--bottom .selected-indicator{inset-block-start:unset;inset-block-end:0}:host([selected]) .selected-indicator,:host([selected]:hover) .selected-indicator{background-color:var(--calcite-color-brand)}:host(:hover) .selected-indicator{background-color:var(--calcite-color-border-3)}:host(:focus) .selected-indicator,:host(:active) .selected-indicator{background-color:var(--calcite-color-brand)}@media (forced-colors: active){.selected-indicator{background-color:highlight}}:host([closed]){display:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-color-text-1)}:host(:focus) .container{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-color-border-2);color:var(--calcite-color-text-1);text-decoration-line:none}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:var(--calcite-spacing-sm)}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:var(--calcite-spacing-sm)}.close-button{display:flex;block-size:100%;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-button-transparent-1);margin-inline-end:var(--calcite-spacing-px);box-shadow:var(--calcite-spacing-px) 0 0 0 transparent, 0 var(--calcite-spacing-xxs) 0 0 transparent;block-size:calc(100% - var(--calcite-spacing-xxs))}.close-button:hover{box-shadow:var(--calcite-spacing-px) 0 0 0 var(--calcite-color-foreground-3)}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand))}.close-button:focus,.close-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button:active{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:var(--calcite-spacing-sm)}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0 -1px var(--calcite-color-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 var(--calcite-spacing-base) 0 var(--calcite-color-foreground-1)}:host([bordered]:hover) .container{background-color:var(--calcite-color-foreground-2)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:var(--calcite-spacing-px) solid transparent;border-inline-end:var(--calcite-spacing-px) solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline-start:var(--calcite-spacing-sm)}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-color-border-1);border-inline-end-color:var(--calcite-color-border-1)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:0.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:0.5rem}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:1rem}:host([layout=inline][closable]) .scale-s .content,:host([layout=inline][closable]) .scale-m .content,:host([layout=inline][closable]) .scale-l .content{padding-inline-end:0}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered]) .container--bottom{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][selected]) .container--bottom{border-block-start-style:none}.close-button{z-index:var(--calcite-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteTabTitleStyle0 = tabTitleCss;
 
 const TabTitle = /*@__PURE__*/ proxyCustomElement(class TabTitle extends HTMLElement {
@@ -128,13 +131,14 @@ const TabTitle = /*@__PURE__*/ proxyCustomElement(class TabTitle extends HTMLEle
     render() {
         const { el, closed } = this;
         const id = el.id || this.guid;
-        const iconStartEl = (h("calcite-icon", { key: '37a9766daa93ec03e08b32a8ecd6bd688b14488d', class: { [CSS.titleIcon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const iconEndEl = (h("calcite-icon", { key: '7c291ddb6371c11de0700b641c14c692df410cf2', class: { [CSS.titleIcon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
-        return (h(Host, { key: '28845761bba17ef7881a4648e3ddd337a196dd43', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: '684b4b67e1e964eb2f1ff749e4830d84e923bb3d', disabled: this.disabled }, h("div", { key: 'a32e2de00c7038897f47c6a74b179fcd5009d3c9', class: {
-                container: true,
+        const iconStartEl = (h("calcite-icon", { key: '0a315a11b4e02ff44930fcfc12e626b10d0ae3be', class: { [CSS.titleIcon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const iconEndEl = (h("calcite-icon", { key: 'ff26afbee47f3d6cc8d2e89149cb8effe635e04b', class: { [CSS.titleIcon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        return (h(Host, { key: '35980e1a6e89e4dcbf2d4deefbaf364aa50fe6a1', "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected && !this.disabled ? 0 : -1 }, h(InteractiveContainer, { key: 'd067c111b05b0a59be00bd317c8768709a98faef', disabled: this.disabled }, h("div", { key: '2a1cef97120aff9f98cd2a7d1f3db3715b16fe3c', class: {
+                [CSS.container]: true,
+                [CSS.containerBottom]: this.position === "bottom",
                 [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
-                [`scale-${this.scale}`]: true,
-            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, h("div", { key: '55c1753e5dac17066529d5dc2544bf04fa0e12d6', class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", { key: '8d44e6db400cfd6aa6f3fd4575e1910d8998ab5c' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton()))));
+                [CSS.scale(this.scale)]: true,
+            }, hidden: closed, ref: (el) => this.resizeObserver?.observe(el) }, h("div", { key: 'ed8c5e8fd2249712df4a468c5685242d5642f00e', class: { [CSS.content]: true, [CSS.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", { key: '63a872b368e6684dafd5fcfb47becb404affcbca' }), this.iconEnd ? iconEndEl : null), this.renderCloseButton(), h("div", { key: '5e579bcfe3ade4f3ecf65219198df546fcfbacc7', class: CSS.selectedIndicator })))));
     }
     renderCloseButton() {
         const { closable, messages } = this;

package/dist/components/tab-title.js.map

@@ -1 +1 @@
-{"file":"tab-title.js","mappings":"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","names":[],"sources":["src/components/tab-title/resources.ts","src/components/tab-title/tab-title.scss?tag=calcite-tab-title&encapsulation=shadow","src/components/tab-title/tab-title.tsx"],"sourcesContent":["export const CSS = {\n  closeButton: \"close-button\",\n  container: \"container\",\n  content: \"content\",\n  contentHasText: \"content--has-text\",\n  iconEnd: \"icon-end\",\n  iconPresent: \"icon-present\",\n  iconStart: \"icon-start\",\n  titleIcon: \"calcite-tab-title--icon\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n} as const;\n",":host {\n  @apply block outline-none;\n  margin-inline-start: theme(\"margin.0\");\n}\n\n:host([layout=\"inline\"]) {\n  @apply flex-initial;\n}\n\n:host([layout=\"center\"]) {\n  @apply flex-auto;\n}\n\n.content {\n  @apply flex items-center justify-center;\n}\n\n.scale-s {\n  .content {\n    @apply text-n2h py-1;\n  }\n}\n\n.scale-m {\n  .content {\n    @apply text-n1h py-2;\n  }\n}\n\n.scale-l {\n  .content {\n    @apply text-0h py-2.5;\n  }\n}\n\n:host([closable]) .content {\n  @apply h-full box-border border-b-color-transparent;\n}\n\n:host([layout=\"inline\"]),\n:host([layout=\"center\"]) {\n  .content {\n    @apply px-1;\n  }\n}\n\n:host([layout=\"center\"]) .scale-s,\n:host([layout=\"center\"]) .scale-m,\n:host([layout=\"center\"]) .scale-l {\n  @apply justify-center my-0 text-center;\n\n  .content {\n    @apply flex-auto flex-grow;\n  }\n}\n\n.container {\n  @apply border-b-2\n  border-b-color-transparent\n  box-border\n  content-center\n  cursor-pointer\n  flex\n  focus-base\n  h-full\n  justify-between\n  px-0\n  text-color-3\n  text-n1h\n  transition-default\n  w-full;\n\n  border-block-end-style: solid;\n}\n\n:host([position=\"bottom\"]) .container {\n  @apply border-t-color-transparent\n    border-b-0\n    border-t-2;\n  border-block-start-style: solid;\n}\n\n:host([closed]) {\n  @apply hidden;\n}\n\n:host([selected]) .container {\n  @apply text-color-1 border-color-transparent;\n}\n\n:host(:focus) .container {\n  @apply focus-inset;\n\n  &:focus-within {\n    @apply focus-base;\n  }\n}\n\n:host(:active),\n:host(:focus),\n:host(:hover) {\n  a {\n    @apply text-color-1 border-color-2 no-underline;\n  }\n}\n\n@include disabled() {\n  .container {\n    @apply pointer-events-none opacity-50;\n  }\n}\n\n.calcite-tab-title--icon {\n  @apply relative\n    m-0\n    inline-flex\n    self-center;\n  & svg {\n    @apply transition-default;\n  }\n}\n\n.content--has-text {\n  @apply p-1;\n}\n\n.content--has-text .calcite-tab-title--icon.icon-start {\n  margin-inline-end: theme(\"margin.2\");\n}\n\n.content--has-text .calcite-tab-title--icon.icon-end {\n  margin-inline-start: theme(\"margin.2\");\n}\n\n.close-button {\n  @apply appearance-none\n  bg-foreground-1\n  border-none\n  content-center\n  cursor-pointer\n  flex\n  focus-base\n  items-center\n  justify-center\n  p-1\n  self-center\n  text-color-3\n  transition-default;\n\n  background-color: var(--calcite-button-transparent-1);\n  margin-inline-start: auto;\n\n  &:focus {\n    @apply focus-inset;\n\n    // ⚠️overriding outline-offset should be avoided as it won't honor --calcite-color-focus-offset-invert\n    outline-offset: -1px;\n  }\n\n  &:focus,\n  &:hover {\n    @apply text-color-1;\n    background-color: var(--calcite-color-foreground-2);\n  }\n\n  &:active {\n    @apply text-color-1;\n    background-color: var(--calcite-color-foreground-3);\n  }\n\n  & calcite-icon {\n    color: inherit;\n  }\n}\n\n// compensate for spacing when no hastext and two icons\n:host([icon-start][icon-end]) {\n  .calcite-tab-title--icon:first-child {\n    margin-inline-end: theme(\"margin.2\");\n  }\n}\n\n// bordered styles\n:host([bordered]) {\n  margin-inline-end: 0;\n}\n\n:host([bordered][selected]) {\n  box-shadow: inset 0 -2px var(--calcite-color-foreground-1);\n}\n\n:host([bordered][selected][position=\"bottom\"]) {\n  box-shadow: inset 0 2px 0 var(--calcite-color-foreground-1);\n}\n\n:host([bordered]:hover) {\n  .container {\n    background-color: var(--calcite-color-transparent-hover);\n  }\n}\n\n:host([closable]) .container,\n:host([bordered]) .container {\n  border-inline-start: 1px solid transparent;\n  border-inline-end: 1px solid transparent;\n  .close-button {\n    margin-inline: 0;\n  }\n}\n\n:host([closable][position=\"bottom\"]) .container,\n:host([bordered][position=\"bottom\"]) .container {\n  border-block-start-style: unset;\n}\n\n:host([selected][bordered]) .container {\n  border-inline-start-color: var(--calcite-color-border-1);\n  border-inline-end-color: var(--calcite-color-border-1);\n}\n\n:host([layout=\"inline\"][bordered]),\n:host([layout=\"center\"][bordered]) {\n  .scale-m {\n    .content {\n      @apply px-3;\n    }\n  }\n\n  .scale-s {\n    .content {\n      @apply px-2;\n    }\n  }\n\n  .scale-l {\n    .content {\n      @apply px-4;\n    }\n  }\n}\n\n:host([layout=\"inline\"][closable]) {\n  .scale-s,\n  .scale-m,\n  .scale-l {\n    .content {\n      padding-inline-end: 0;\n    }\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    outline-width: 0;\n    outline-offset: 0;\n  }\n\n  :host(:focus) .container {\n    outline-color: highlight;\n  }\n\n  :host([bordered]) .container {\n    border-block-end-style: solid;\n  }\n\n  :host([bordered][position=\"bottom\"]) .container {\n    border-block-start-style: solid;\n  }\n\n  :host([bordered][selected]) .container {\n    border-block-end-style: none;\n  }\n\n  :host([bordered][position=\"bottom\"][selected]) .container {\n    border-block-start-style: none;\n  }\n\n  .close-button {\n    /* in high contrast the tab title outline covers the close button outline without a z-index */\n    @apply z-default;\n  }\n}\n\n@include base-component();\n","import {\n  Build,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir, toAriaBoolean, nodeListToArray } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { createObserver } from \"../../utils/observers\";\nimport { FlipContext, Scale } from \"../interfaces\";\nimport { TabChangeEventDetail, TabCloseEventDetail } from \"../tab/interfaces\";\nimport { TabID, TabLayout, TabPosition } from \"../tabs/interfaces\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { getIconScale } from \"../../utils/component\";\nimport { IconName } from \"../icon/interfaces\";\nimport { TabTitleMessages } from \"./assets/tab-title/t9n\";\nimport { CSS, ICONS } from \"./resources\";\n\n/**\n * Tab-titles are optionally individually closable.\n */\n\n/**\n * @slot - A slot for adding text.\n */\n@Component({\n  tag: \"calcite-tab-title\",\n  styleUrl: \"tab-title.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TabTitle implements InteractiveComponent, LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component and its respective `calcite-tab` contents are selected.\n   *\n   * Only one tab can be selected within the `calcite-tabs` parent.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedHandler(): void {\n    if (this.selected) {\n      this.activateTab(false);\n    }\n  }\n\n  /** When `true`, a close button is added to the component. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** When `true`, does not display or position the component. */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity.  */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: IconName;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: IconName;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) layout: TabLayout;\n\n  /**\n   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.\n   *\n   *  @internal\n   */\n  @Prop() position: TabPosition = \"top\";\n\n  /**\n   * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) bordered = false;\n\n  /**\n   * Specifies a unique name for the component.\n   *\n   * When specified, use the same value on the `calcite-tab`.\n   */\n  @Prop({ reflect: true }) tab: string;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: TabTitleMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<TabTitleMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.setupTextContentObserver();\n    this.parentTabNavEl = this.el.closest(\"calcite-tab-nav\");\n    this.parentTabsEl = this.el.closest(\"calcite-tabs\");\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    // Dispatching to body in order to be listened by other elements that are still connected to the DOM.\n    document.body?.dispatchEvent(\n      new CustomEvent(\"calciteTabTitleUnregister\", {\n        detail: this.el,\n      }),\n    );\n    this.resizeObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    if (Build.isBrowser) {\n      this.updateHasText();\n    }\n    if (this.tab && this.selected) {\n      this.activateTab(false);\n    }\n  }\n\n  componentWillRender(): void {\n    if (this.parentTabsEl) {\n      this.layout = this.parentTabsEl.layout;\n      this.bordered = this.parentTabsEl.bordered;\n    }\n  }\n\n  render(): VNode {\n    const { el, closed } = this;\n    const id = el.id || this.guid;\n\n    const iconStartEl = (\n      <calcite-icon\n        class={{ [CSS.titleIcon]: true, [CSS.iconStart]: true }}\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const iconEndEl = (\n      <calcite-icon\n        class={{ [CSS.titleIcon]: true, [CSS.iconEnd]: true }}\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    return (\n      <Host\n        aria-controls={this.controls}\n        aria-selected={toAriaBoolean(this.selected)}\n        id={id}\n        role=\"tab\"\n        tabIndex={this.selected && !this.disabled ? 0 : -1}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            class={{\n              container: true,\n              [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,\n              [`scale-${this.scale}`]: true,\n            }}\n            hidden={closed}\n            ref={(el) => this.resizeObserver?.observe(el)}\n          >\n            <div class={{ [CSS.content]: true, [CSS.contentHasText]: this.hasText }}>\n              {this.iconStart ? iconStartEl : null}\n              <slot />\n              {this.iconEnd ? iconEndEl : null}\n            </div>\n            {this.renderCloseButton()}\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  renderCloseButton(): VNode {\n    const { closable, messages } = this;\n\n    return closable ? (\n      <button\n        aria-label={messages.close}\n        class={CSS.closeButton}\n        disabled={false}\n        key={CSS.closeButton}\n        onClick={this.closeClickHandler}\n        ref={(el) => (this.closeButtonEl = el)}\n        title={messages.close}\n        type=\"button\"\n      >\n        <calcite-icon icon={ICONS.close} scale={getIconScale(this.scale)} />\n      </button>\n    ) : null;\n  }\n\n  async componentDidLoad(): Promise<void> {\n    this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalTabChange\", { target: \"body\" })\n  internalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void {\n    const targetTabsEl = event\n      .composedPath()\n      .find((el: HTMLElement) => el.tagName === \"CALCITE-TABS\");\n\n    if (targetTabsEl !== this.parentTabsEl) {\n      return;\n    }\n\n    if (this.tab) {\n      this.selected = this.tab === event.detail.tab;\n    } else {\n      this.getTabIndex().then((index) => {\n        this.selected = index === event.detail.tab;\n      });\n    }\n\n    event.stopPropagation();\n  }\n\n  @Listen(\"click\")\n  onClick(): void {\n    this.activateTab();\n  }\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        if (!event.composedPath().includes(this.closeButtonEl)) {\n          this.activateTab();\n          event.preventDefault();\n        }\n        break;\n      case \"ArrowRight\":\n        event.preventDefault();\n        if (getElementDir(this.el) === \"ltr\") {\n          this.calciteInternalTabsFocusNext.emit();\n        } else {\n          this.calciteInternalTabsFocusPrevious.emit();\n        }\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        if (getElementDir(this.el) === \"ltr\") {\n          this.calciteInternalTabsFocusPrevious.emit();\n        } else {\n          this.calciteInternalTabsFocusNext.emit();\n        }\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this.calciteInternalTabsFocusFirst.emit();\n        break;\n      case \"End\":\n        event.preventDefault();\n        this.calciteInternalTabsFocusLast.emit();\n        break;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when a `calcite-tab` is selected.\n   */\n  @Event({ cancelable: false }) calciteTabsActivate: EventEmitter<void>;\n\n  /**\n   * Fires when a `calcite-tab` is selected (`event.details`).\n   *\n   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-design-system/blob/dev/src/components/tab/interfaces.ts#L1)\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabsActivate: EventEmitter<TabChangeEventDetail>;\n\n  /**\n   * Fires when a `calcite-tab` is closed.\n   */\n  @Event({ cancelable: false }) calciteTabsClose: EventEmitter<void>;\n\n  /**\n   * Fires when `calcite-tab` is closed (`event.details`).\n   *\n   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-design-system/blob/dev/src/components/tab/interfaces.ts)\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabsClose: EventEmitter<TabCloseEventDetail>;\n  /**\n   * @internal\n   */\n\n  @Event({ cancelable: false }) calciteInternalTabsFocusNext: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabsFocusPrevious: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabsFocusFirst: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabsFocusLast: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabTitleRegister: EventEmitter<TabID>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabIconChanged: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Returns the index of the title within the `calcite-tab-nav`.\n   */\n  @Method()\n  async getTabIndex(): Promise<number> {\n    return Array.prototype.indexOf.call(\n      nodeListToArray(this.el.parentElement.children).filter((el) =>\n        el.matches(\"calcite-tab-title\"),\n      ),\n      this.el,\n    );\n  }\n\n  /**\n   * @internal\n   */\n  @Method()\n  async getTabIdentifier(): Promise<TabID> {\n    return this.tab ? this.tab : this.getTabIndex();\n  }\n\n  /**\n   * @param tabIds\n   * @param titleIds\n   * @internal\n   */\n  @Method()\n  async updateAriaInfo(tabIds: string[] = [], titleIds: string[] = []): Promise<void> {\n    this.controls = tabIds[titleIds.indexOf(this.el.id)] || null;\n  }\n\n  /**\n   * This activates a tab in order for it and its associated tab-title be selected.\n   *\n   * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events\n   * @internal\n   */\n  @Method()\n  async activateTab(userTriggered = true): Promise<void> {\n    if (this.disabled || this.closed) {\n      return;\n    }\n    const payload = { tab: this.tab };\n    this.calciteInternalTabsActivate.emit(payload);\n\n    if (userTriggered) {\n      // emit in the next frame to let internal events sync up\n      requestAnimationFrame(() => this.calciteTabsActivate.emit());\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private closeClickHandler = (): void => {\n    this.closeTabTitleAndNotify();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTabTitleElement;\n\n  /** watches for changing text content */\n  mutationObserver: MutationObserver = createObserver(\"mutation\", () => this.updateHasText());\n\n  @State() controls: string;\n\n  @State() defaultMessages: TabTitleMessages;\n\n  @State() effectiveLocale: \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  /** determine if there is slotted text for styling purposes */\n  @State() hasText = false;\n\n  closeButtonEl: HTMLButtonElement;\n\n  containerEl: HTMLDivElement;\n\n  parentTabNavEl: HTMLCalciteTabNavElement;\n\n  parentTabsEl: HTMLCalciteTabsElement;\n\n  resizeObserver = createObserver(\"resize\", () => {\n    this.calciteInternalTabIconChanged.emit();\n  });\n\n  updateHasText(): void {\n    this.hasText = this.el.textContent.trim().length > 0;\n  }\n\n  setupTextContentObserver(): void {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  closeTabTitleAndNotify(): void {\n    this.closed = true;\n    this.calciteInternalTabsClose.emit({ tab: this.tab });\n    this.calciteTabsClose.emit();\n  }\n\n  guid = `calcite-tab-title-${guid()}`;\n}\n"],"version":3}
+{"file":"tab-title.js","mappings":"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","names":[],"sources":["src/components/tab-title/resources.ts","src/components/tab-title/tab-title.scss?tag=calcite-tab-title&encapsulation=shadow","src/components/tab-title/tab-title.tsx"],"sourcesContent":["import { Scale } from \"../interfaces\";\n\nexport const CSS = {\n  closeButton: \"close-button\",\n  container: \"container\",\n  containerBottom: \"container--bottom\",\n  content: \"content\",\n  contentHasText: \"content--has-text\",\n  iconEnd: \"icon-end\",\n  iconPresent: \"icon-present\",\n  iconStart: \"icon-start\",\n  titleIcon: \"calcite-tab-title--icon\",\n  scale: (scale: Scale) => `scale-${scale}` as const,\n  selectedIndicator: \"selected-indicator\",\n};\n\nexport const ICONS = {\n  close: \"x\",\n} as const;\n",":host {\n  @apply block outline-none;\n  margin-inline-start: theme(\"margin.0\");\n}\n\n:host([layout=\"inline\"]) {\n  @apply flex-initial;\n}\n\n:host([layout=\"center\"]) {\n  @apply flex-auto;\n}\n\n.content {\n  @apply flex items-center justify-center h-full mb-0.5 relative box-border;\n}\n\n.scale-s {\n  .content {\n    @apply text-n2h py-1;\n  }\n  .close-button {\n    @apply w-5;\n  }\n}\n\n.scale-m {\n  .content {\n    @apply text-n1h py-2;\n  }\n  .close-button {\n    @apply w-7;\n  }\n}\n\n.scale-l {\n  .content {\n    @apply text-0h py-2.5;\n  }\n  .close-button {\n    @apply w-8;\n  }\n}\n\n:host([closable]) .content {\n  @apply border-b-color-transparent;\n}\n\n:host([layout=\"inline\"]),\n:host([layout=\"center\"]) {\n  .content {\n    @apply px-1;\n  }\n}\n\n:host([layout=\"center\"]) .scale-s,\n:host([layout=\"center\"]) .scale-m,\n:host([layout=\"center\"]) .scale-l {\n  @apply justify-center my-0 text-center;\n\n  .content {\n    @apply flex-auto flex-grow;\n  }\n}\n\n.container {\n  @apply relative \n  box-border\n  content-center\n  cursor-pointer\n  flex\n  focus-base\n  h-full\n  justify-between\n  px-0\n  text-color-3\n  text-n1h\n  transition-default\n  w-full;\n}\n\n.selected-indicator {\n  @apply absolute\n    block\n    w-full\n    h-0.5\n    transition-default;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  inset-inline-end: 0;\n  inline-size: 100%;\n}\n\n.container--bottom .selected-indicator {\n  inset-block-end: unset;\n  inset-block-start: 0;\n}\n\n:host([bordered]) .selected-indicator {\n  inset-block-start: 0;\n  inset-block-end: unset;\n  inset-inline-start: -1px;\n  inset-inline-end: 0;\n  inline-size: calc(100% + var(--calcite-spacing-base));\n}\n\n:host([bordered][selected]) .container::after {\n  @apply absolute\n    block\n    w-full\n    h-0.5\n    transition-default;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  inset-inline-end: 0;\n  inline-size: 100%;\n  background: var(--calcite-color-foreground-1);\n  content: \"\";\n}\n\n:host([bordered][selected]) .container.container--bottom::after {\n  inset-block-start: -1px;\n}\n\n:host([bordered][selected]:hover) .container::after {\n  background: var(--calcite-color-foreground-2);\n}\n\n:host([bordered][selected]:focus) .container::after {\n  background: transparent;\n}\n\n:host([bordered]) .container--bottom .selected-indicator {\n  inset-block-start: unset;\n  inset-block-end: 0;\n}\n\n:host([selected]) .selected-indicator,\n:host([selected]:hover) .selected-indicator {\n  @apply bg-brand;\n}\n\n:host(:hover) .selected-indicator {\n  background-color: var(--calcite-color-border-3);\n}\n\n:host(:focus) .selected-indicator,\n:host(:active) .selected-indicator {\n  background-color: var(--calcite-color-brand);\n}\n\n@media (forced-colors: active) {\n  .selected-indicator {\n    background-color: highlight;\n  }\n}\n\n:host([closed]) {\n  @apply hidden;\n}\n\n:host([selected]) .container {\n  @apply text-color-1 border-color-transparent;\n}\n\n:host(:focus) .container {\n  @apply focus-inset;\n\n  &:focus-within {\n    @apply focus-base;\n  }\n}\n\n:host(:active),\n:host(:focus),\n:host(:hover) {\n  a {\n    @apply text-color-1 border-color-2 no-underline;\n  }\n}\n\n@include disabled() {\n  .container {\n    @apply pointer-events-none opacity-50;\n  }\n}\n\n.calcite-tab-title--icon {\n  @apply relative\n    m-0\n    inline-flex\n    self-center;\n  & svg {\n    @apply transition-default;\n  }\n}\n\n.content--has-text {\n  @apply p-1;\n}\n\n.content--has-text .calcite-tab-title--icon.icon-start {\n  margin-inline-end: var(--calcite-spacing-sm);\n}\n\n.content--has-text .calcite-tab-title--icon.icon-end {\n  margin-inline-start: var(--calcite-spacing-sm);\n}\n\n.close-button {\n  @apply appearance-none\n  bg-foreground-1\n  border-none\n  content-center\n  cursor-pointer\n  flex\n  focus-base\n  items-center\n  justify-center\n  h-full\n  self-center\n  text-color-3\n  transition-default;\n  background-color: var(--calcite-button-transparent-1);\n  // compensate for the added border on parent and ensure focus alignment\n  margin-inline-end: var(--calcite-spacing-px);\n  box-shadow:\n    var(--calcite-spacing-px) 0 0 0 transparent,\n    0 var(--calcite-spacing-xxs) 0 0 transparent;\n  block-size: calc(100% - var(--calcite-spacing-xxs));\n\n  &:hover {\n    box-shadow: var(--calcite-spacing-px) 0 0 0 var(--calcite-color-foreground-3);\n  }\n  &:focus {\n    @apply focus-normal;\n  }\n\n  &:focus,\n  &:hover {\n    @apply text-color-1;\n    background-color: var(--calcite-color-foreground-3);\n  }\n\n  &:active {\n    @apply text-color-1;\n    background-color: var(--calcite-color-foreground-3);\n  }\n\n  & calcite-icon {\n    color: inherit;\n  }\n}\n\n// compensate for spacing when no hastext and two icons\n:host([icon-start][icon-end]) {\n  .calcite-tab-title--icon:first-child {\n    margin-inline-end: var(--calcite-spacing-sm);\n  }\n}\n\n// bordered styles\n:host([bordered]) {\n  margin-inline-end: 0;\n}\n\n:host([bordered][selected]) {\n  box-shadow: inset 0 -1px var(--calcite-color-foreground-1);\n}\n\n:host([bordered][selected][position=\"bottom\"]) {\n  box-shadow: inset 0 var(--calcite-spacing-base) 0 var(--calcite-color-foreground-1);\n}\n\n:host([bordered]:hover) {\n  .container {\n    background-color: var(--calcite-color-foreground-2);\n  }\n}\n\n:host([closable]) .container,\n:host([bordered]) .container {\n  border-inline-start: var(--calcite-spacing-px) solid transparent;\n  border-inline-end: var(--calcite-spacing-px) solid transparent;\n  .close-button {\n    margin-inline-start: var(--calcite-spacing-sm);\n  }\n}\n\n:host([selected][bordered]) .container {\n  border-inline-start-color: var(--calcite-color-border-1);\n  border-inline-end-color: var(--calcite-color-border-1);\n}\n\n:host([layout=\"inline\"][bordered]),\n:host([layout=\"center\"][bordered]) {\n  .scale-m {\n    .content {\n      @apply px-3;\n    }\n  }\n\n  .scale-s {\n    .content {\n      @apply px-2;\n    }\n  }\n\n  .scale-l {\n    .content {\n      @apply px-4;\n    }\n  }\n}\n\n:host([layout=\"inline\"][closable]) {\n  .scale-s,\n  .scale-m,\n  .scale-l {\n    .content {\n      padding-inline-end: 0;\n    }\n  }\n}\n\n@media (forced-colors: active) {\n  :host {\n    outline-width: 0;\n    outline-offset: 0;\n  }\n\n  :host(:focus) .container {\n    outline-color: highlight;\n  }\n\n  :host([bordered]) .container {\n    border-block-end-style: solid;\n  }\n\n  :host([bordered]) .container--bottom {\n    border-block-start-style: solid;\n  }\n\n  :host([bordered][selected]) .container {\n    border-block-end-style: none;\n  }\n\n  :host([bordered][selected]) .container--bottom {\n    border-block-start-style: none;\n  }\n\n  .close-button {\n    /* in high contrast the tab title outline covers the close button outline without a z-index */\n    @apply z-default;\n  }\n}\n\n@include base-component();\n","import {\n  Build,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getElementDir, toAriaBoolean, nodeListToArray } from \"../../utils/dom\";\nimport { guid } from \"../../utils/guid\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { createObserver } from \"../../utils/observers\";\nimport { FlipContext, Scale } from \"../interfaces\";\nimport { TabChangeEventDetail, TabCloseEventDetail } from \"../tab/interfaces\";\nimport { TabID, TabLayout, TabPosition } from \"../tabs/interfaces\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { getIconScale } from \"../../utils/component\";\nimport { IconName } from \"../icon/interfaces\";\nimport { TabTitleMessages } from \"./assets/tab-title/t9n\";\nimport { CSS, ICONS } from \"./resources\";\n\n/**\n * Tab-titles are optionally individually closable.\n */\n\n/**\n * @slot - A slot for adding text.\n */\n@Component({\n  tag: \"calcite-tab-title\",\n  styleUrl: \"tab-title.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class TabTitle implements InteractiveComponent, LocalizedComponent, T9nComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, the component and its respective `calcite-tab` contents are selected.\n   *\n   * Only one tab can be selected within the `calcite-tabs` parent.\n   */\n  @Prop({ reflect: true, mutable: true }) selected = false;\n\n  @Watch(\"selected\")\n  selectedHandler(): void {\n    if (this.selected) {\n      this.activateTab(false);\n    }\n  }\n\n  /** When `true`, a close button is added to the component. */\n  @Prop({ reflect: true }) closable = false;\n\n  /** When `true`, does not display or position the component. */\n  @Prop({ reflect: true, mutable: true }) closed = false;\n\n  /** When `true`, interaction is prevented and the component is displayed with lower opacity.  */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: IconName;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: IconName;\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) layout: TabLayout;\n\n  /**\n   * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to, and is inherited from the parent `calcite-tabs`, defaults to `top`.\n   *\n   *  @internal\n   */\n  @Prop() position: TabPosition = \"top\";\n\n  /**\n   * Specifies the size of the component inherited from the parent `calcite-tabs`, defaults to `m`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale = \"m\";\n\n  /**\n   * @internal\n   */\n  @Prop({ reflect: true, mutable: true }) bordered = false;\n\n  /**\n   * Specifies a unique name for the component.\n   *\n   * When specified, use the same value on the `calcite-tab`.\n   */\n  @Prop({ reflect: true }) tab: string;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: TabTitleMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<TabTitleMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.setupTextContentObserver();\n    this.parentTabNavEl = this.el.closest(\"calcite-tab-nav\");\n    this.parentTabsEl = this.el.closest(\"calcite-tabs\");\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    // Dispatching to body in order to be listened by other elements that are still connected to the DOM.\n    document.body?.dispatchEvent(\n      new CustomEvent(\"calciteTabTitleUnregister\", {\n        detail: this.el,\n      }),\n    );\n    this.resizeObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    await setUpMessages(this);\n    if (Build.isBrowser) {\n      this.updateHasText();\n    }\n    if (this.tab && this.selected) {\n      this.activateTab(false);\n    }\n  }\n\n  componentWillRender(): void {\n    if (this.parentTabsEl) {\n      this.layout = this.parentTabsEl.layout;\n      this.bordered = this.parentTabsEl.bordered;\n    }\n  }\n\n  render(): VNode {\n    const { el, closed } = this;\n    const id = el.id || this.guid;\n\n    const iconStartEl = (\n      <calcite-icon\n        class={{ [CSS.titleIcon]: true, [CSS.iconStart]: true }}\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const iconEndEl = (\n      <calcite-icon\n        class={{ [CSS.titleIcon]: true, [CSS.iconEnd]: true }}\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    return (\n      <Host\n        aria-controls={this.controls}\n        aria-selected={toAriaBoolean(this.selected)}\n        id={id}\n        role=\"tab\"\n        tabIndex={this.selected && !this.disabled ? 0 : -1}\n      >\n        <InteractiveContainer disabled={this.disabled}>\n          <div\n            class={{\n              [CSS.container]: true,\n              [CSS.containerBottom]: this.position === \"bottom\",\n              [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,\n              [CSS.scale(this.scale)]: true,\n            }}\n            hidden={closed}\n            ref={(el) => this.resizeObserver?.observe(el)}\n          >\n            <div class={{ [CSS.content]: true, [CSS.contentHasText]: this.hasText }}>\n              {this.iconStart ? iconStartEl : null}\n              <slot />\n              {this.iconEnd ? iconEndEl : null}\n            </div>\n            {this.renderCloseButton()}\n            <div class={CSS.selectedIndicator} />\n          </div>\n        </InteractiveContainer>\n      </Host>\n    );\n  }\n\n  renderCloseButton(): VNode {\n    const { closable, messages } = this;\n\n    return closable ? (\n      <button\n        aria-label={messages.close}\n        class={CSS.closeButton}\n        disabled={false}\n        key={CSS.closeButton}\n        onClick={this.closeClickHandler}\n        ref={(el) => (this.closeButtonEl = el)}\n        title={messages.close}\n        type=\"button\"\n      >\n        <calcite-icon icon={ICONS.close} scale={getIconScale(this.scale)} />\n      </button>\n    ) : null;\n  }\n\n  async componentDidLoad(): Promise<void> {\n    this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalTabChange\", { target: \"body\" })\n  internalTabChangeHandler(event: CustomEvent<TabChangeEventDetail>): void {\n    const targetTabsEl = event\n      .composedPath()\n      .find((el: HTMLElement) => el.tagName === \"CALCITE-TABS\");\n\n    if (targetTabsEl !== this.parentTabsEl) {\n      return;\n    }\n\n    if (this.tab) {\n      this.selected = this.tab === event.detail.tab;\n    } else {\n      this.getTabIndex().then((index) => {\n        this.selected = index === event.detail.tab;\n      });\n    }\n\n    event.stopPropagation();\n  }\n\n  @Listen(\"click\")\n  onClick(): void {\n    this.activateTab();\n  }\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    switch (event.key) {\n      case \" \":\n      case \"Enter\":\n        if (!event.composedPath().includes(this.closeButtonEl)) {\n          this.activateTab();\n          event.preventDefault();\n        }\n        break;\n      case \"ArrowRight\":\n        event.preventDefault();\n        if (getElementDir(this.el) === \"ltr\") {\n          this.calciteInternalTabsFocusNext.emit();\n        } else {\n          this.calciteInternalTabsFocusPrevious.emit();\n        }\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        if (getElementDir(this.el) === \"ltr\") {\n          this.calciteInternalTabsFocusPrevious.emit();\n        } else {\n          this.calciteInternalTabsFocusNext.emit();\n        }\n        break;\n      case \"Home\":\n        event.preventDefault();\n        this.calciteInternalTabsFocusFirst.emit();\n        break;\n      case \"End\":\n        event.preventDefault();\n        this.calciteInternalTabsFocusLast.emit();\n        break;\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Fires when a `calcite-tab` is selected.\n   */\n  @Event({ cancelable: false }) calciteTabsActivate: EventEmitter<void>;\n\n  /**\n   * Fires when a `calcite-tab` is selected (`event.details`).\n   *\n   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-design-system/blob/dev/src/components/tab/interfaces.ts#L1)\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabsActivate: EventEmitter<TabChangeEventDetail>;\n\n  /**\n   * Fires when a `calcite-tab` is closed.\n   */\n  @Event({ cancelable: false }) calciteTabsClose: EventEmitter<void>;\n\n  /**\n   * Fires when `calcite-tab` is closed (`event.details`).\n   *\n   * @see [TabChangeEventDetail](https://github.com/Esri/calcite-design-system/blob/dev/src/components/tab/interfaces.ts)\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabsClose: EventEmitter<TabCloseEventDetail>;\n  /**\n   * @internal\n   */\n\n  @Event({ cancelable: false }) calciteInternalTabsFocusNext: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabsFocusPrevious: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabsFocusFirst: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabsFocusLast: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabTitleRegister: EventEmitter<TabID>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalTabIconChanged: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Returns the index of the title within the `calcite-tab-nav`.\n   */\n  @Method()\n  async getTabIndex(): Promise<number> {\n    return Array.prototype.indexOf.call(\n      nodeListToArray(this.el.parentElement.children).filter((el) =>\n        el.matches(\"calcite-tab-title\"),\n      ),\n      this.el,\n    );\n  }\n\n  /**\n   * @internal\n   */\n  @Method()\n  async getTabIdentifier(): Promise<TabID> {\n    return this.tab ? this.tab : this.getTabIndex();\n  }\n\n  /**\n   * @param tabIds\n   * @param titleIds\n   * @internal\n   */\n  @Method()\n  async updateAriaInfo(tabIds: string[] = [], titleIds: string[] = []): Promise<void> {\n    this.controls = tabIds[titleIds.indexOf(this.el.id)] || null;\n  }\n\n  /**\n   * This activates a tab in order for it and its associated tab-title be selected.\n   *\n   * @param userTriggered - when `true`, user-interaction events will be emitted in addition to internal events\n   * @internal\n   */\n  @Method()\n  async activateTab(userTriggered = true): Promise<void> {\n    if (this.disabled || this.closed) {\n      return;\n    }\n    const payload = { tab: this.tab };\n    this.calciteInternalTabsActivate.emit(payload);\n\n    if (userTriggered) {\n      // emit in the next frame to let internal events sync up\n      requestAnimationFrame(() => this.calciteTabsActivate.emit());\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private closeClickHandler = (): void => {\n    this.closeTabTitleAndNotify();\n  };\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteTabTitleElement;\n\n  /** watches for changing text content */\n  mutationObserver: MutationObserver = createObserver(\"mutation\", () => this.updateHasText());\n\n  @State() controls: string;\n\n  @State() defaultMessages: TabTitleMessages;\n\n  @State() effectiveLocale: \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  /** determine if there is slotted text for styling purposes */\n  @State() hasText = false;\n\n  closeButtonEl: HTMLButtonElement;\n\n  containerEl: HTMLDivElement;\n\n  parentTabNavEl: HTMLCalciteTabNavElement;\n\n  parentTabsEl: HTMLCalciteTabsElement;\n\n  resizeObserver = createObserver(\"resize\", () => {\n    this.calciteInternalTabIconChanged.emit();\n  });\n\n  updateHasText(): void {\n    this.hasText = this.el.textContent.trim().length > 0;\n  }\n\n  setupTextContentObserver(): void {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  closeTabTitleAndNotify(): void {\n    this.closed = true;\n    this.calciteInternalTabsClose.emit({ tab: this.tab });\n    this.calciteTabsClose.emit();\n  }\n\n  guid = `calcite-tab-title-${guid()}`;\n}\n"],"version":3}

package/dist/components/tab.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { z as nodeListToArray } from './dom.js';

package/dist/components/table-cell.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
@@ -128,7 +128,7 @@ const TableCell = /*@__PURE__*/ proxyCustomElement(class TableCell extends HTMLE
         const staticCell = this.disabled ||
             (this.interactionMode === "static" &&
                 (!this.selectionCell || (this.selectionCell && this.parentRowType === "foot")));
-        return (h(Host, { key: '7363726b085add05c0e1fc3cbdd101bb1547a1d3' }, h(InteractiveContainer, { key: 'c5b6481578fd0437e2e504156dcad7de5242ba8f', disabled: this.disabled }, h("td", { key: 'fa847d0f0ec5842cff33c2d03f0d6ddb01d79003', "aria-disabled": this.disabled, class: {
+        return (h(Host, { key: 'da32a7785cb08de9525df1b3d0b2a93a0ca4ee39' }, h(InteractiveContainer, { key: 'c0b81cf6819f29dbb9c55bc855156819f4c9008b', disabled: this.disabled }, h("td", { key: '716e9f997daa90e974f525d9713b2e689cbf31b3', "aria-disabled": this.disabled, class: {
                 [CSS.footerCell]: this.parentRowType === "foot",
                 [CSS.contentCell]: !this.numberCell && !this.selectionCell,
                 [CSS.numberCell]: this.numberCell,
@@ -138,7 +138,7 @@ const TableCell = /*@__PURE__*/ proxyCustomElement(class TableCell extends HTMLE
                 [CSS_UTILITY.rtl]: dir === "rtl",
                 [CSS.staticCell]: staticCell,
                 [this.parentRowAlignment]: this.parentRowAlignment === "start" || this.parentRowAlignment === "end",
-            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: (el) => (this.containerEl = el), role: this.interactionMode === "interactive" ? "gridcell" : "cell", rowSpan: this.rowSpan, tabIndex: staticCell ? -1 : 0 }, (this.selectionCell || this.readCellContentsToAT) && (h("span", { key: '7bd01d9eacb2cd6f6c8406eed2364119077fbcf7', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), h("slot", { key: 'f269dc44eb265820e6d5906ba2fdb0ea97bfded3', onSlotchange: this.updateScreenReaderContentsText })))));
+            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: (el) => (this.containerEl = el), role: this.interactionMode === "interactive" ? "gridcell" : "cell", rowSpan: this.rowSpan, tabIndex: staticCell ? -1 : 0 }, (this.selectionCell || this.readCellContentsToAT) && (h("span", { key: 'b2c7d83b7ab7a3058840b3c7cf3f1326085c5e62', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), h("slot", { key: '9e6fdb798a6fff5317206c06a13a652d7ab3c997', onSlotchange: this.updateScreenReaderContentsText })))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/table-header.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
@@ -143,7 +143,7 @@ const TableHeader = /*@__PURE__*/ proxyCustomElement(class TableHeader extends H
         const allSelected = this.selectedRowCount === this.bodyRowCount;
         const selectionIcon = allSelected ? "check-square-f" : "check-square";
         const staticCell = this.interactionMode === "static" && !this.selectionCell;
-        return (h(Host, { key: '853b0f5d9a1faa66677dba364ef7b200d9a3c6fe' }, h("th", { key: '1f08c21c7670c02fa6114352a0e33ce6aeda8130', "aria-colindex": this.parentRowType === "head" ? this.positionInRow : undefined, class: {
+        return (h(Host, { key: '9969cdd5fcc7f79dda40b75052a8880c7caa0f31' }, h("th", { key: '9dcfed2354e485a0b771ac20c249da7e6775403c', "aria-colindex": this.parentRowType === "head" ? this.positionInRow : undefined, class: {
                 [CSS.bodyRow]: this.parentRowType === "body",
                 [CSS.footerRow]: this.parentRowType === "foot",
                 [CSS.contentCell]: !this.numberCell && !this.selectionCell,
@@ -154,7 +154,7 @@ const TableHeader = /*@__PURE__*/ proxyCustomElement(class TableHeader extends H
                 [CSS.staticCell]: staticCell,
                 [CSS.lastCell]: this.lastCell && (!this.rowSpan || (this.colSpan && !!this.rowSpan)),
                 [this.parentRowAlignment]: this.parentRowAlignment === "center" || this.parentRowAlignment === "end",
-            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: (el) => (this.containerEl = el), role: this.parentRowType === "head" ? "columnheader" : "rowheader", rowSpan: this.rowSpan, scope: scope, tabIndex: this.selectionCell ? 0 : staticCell ? -1 : 0 }, this.heading && h("div", { key: 'd6f3d52053840f876887136209c1a572a940c70f', class: CSS.heading }, this.heading), this.description && h("div", { key: '8437393819fc714857b189c14d1d0f586a496a94', class: CSS.description }, this.description), this.selectionCell && this.selectionMode === "multiple" && (h("calcite-icon", { key: '15c82913de78250d829b1d9b943cb137be49b9e6', class: { [CSS.active]: allSelected }, icon: selectionIcon, scale: getIconScale(this.scale) })), (this.selectionCell || this.numberCell) && (h("span", { key: 'e646811746d303aa8ebbb5c6974bc2c32a0faf98', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS.assistiveText }, this.screenReaderText)))));
+            }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: (el) => (this.containerEl = el), role: this.parentRowType === "head" ? "columnheader" : "rowheader", rowSpan: this.rowSpan, scope: scope, tabIndex: this.selectionCell ? 0 : staticCell ? -1 : 0 }, this.heading && h("div", { key: '169771e9ab1c03e9744d3f3e739aefa18d95dc34', class: CSS.heading }, this.heading), this.description && h("div", { key: '7e836d6cfa33ea0d9deb046990df1b66fc632db6', class: CSS.description }, this.description), this.selectionCell && this.selectionMode === "multiple" && (h("calcite-icon", { key: 'ede40dd810069338601a101d21cb0151055d716e', class: { [CSS.active]: allSelected }, icon: selectionIcon, scale: getIconScale(this.scale) })), (this.selectionCell || this.numberCell) && (h("span", { key: '53bc80ccf2adcb0cc03a60da9789f42bb7d7ce3b', "aria-hidden": true, "aria-live": this.focused ? "polite" : "off", class: CSS.assistiveText }, this.screenReaderText)))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/tabs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { s as slotChangeGetAssignedElements, B as getSlotAssignedElements } from './dom.js';
@@ -128,7 +128,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     }
     disconnectedCallback() { }
     render() {
-        return (h(Fragment, { key: 'a712772a21d6264edd6346bc4a9a68074428aee3' }, h("slot", { key: '89e0518a234bd2aa3b5d985b5ed508c3af82e873', name: SLOTS.titleGroup }), h("section", { key: 'bf96baaebf2999581e259e51a3e5a48fb10d924e' }, h("slot", { key: '20cefef4f843e8bbc2f88f1b864a3cb703f7718d', onSlotchange: this.defaultSlotChangeHandler, ref: this.setDefaultSlotRef }))));
+        return (h(Fragment, { key: 'c8be9a0f6620441487586e0b7be0bfe27447ce83' }, h("slot", { key: '01cdac40840a465bb73e4763caa29db4c0973233', name: SLOTS.titleGroup }), h("section", { key: 'e5287ab0fb9f39ab8354311ecd06316e7a93c73b' }, h("slot", { key: '0d4974a5b802f27fc319c97c0e632110b84ce246', onSlotchange: this.defaultSlotChangeHandler, ref: this.setDefaultSlotRef }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/th.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/throttle.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { d as debounce, i as isObject } from './debounce.js';
 

package/dist/components/time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { n as numberKeys } from './key.js';
@@ -997,69 +997,69 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
         const secondIsNumber = isValidNumber(this.second);
         const fractionalSecondIsNumber = isValidNumber(this.fractionalSecond);
         const showMeridiem = this.hourCycle === "12";
-        return (h("div", { key: '2a7a9639646dd996bcbdbdef907951683ec90abe', class: {
+        return (h("div", { key: '7d53b327ba5ceab5b65b0af79dafeb723feea77a', class: {
                 [CSS.timePicker]: true,
                 [CSS.showMeridiem]: showMeridiem,
                 [CSS.showSecond]: this.showSecond,
                 [CSS[`scale-${this.scale}`]]: true,
-            }, dir: "ltr" }, h("div", { key: '8625dcea8981938ae3975d944e38d7767ec3d1cd', class: CSS.column, role: "group" }, h("span", { key: '87b5f5279a548c9460a7e796d7648d8890336ca7', "aria-label": this.messages.hourUp, class: {
+            }, dir: "ltr" }, h("div", { key: '23418a6bfc5fb4f0734620d17e7d28bfa7ed64fd', class: CSS.column, role: "group" }, h("span", { key: 'd0b4ee166edc1f0cc8c81abdb77db029bbbf91ff', "aria-label": this.messages.hourUp, class: {
                 [CSS.button]: true,
                 [CSS.buttonHourUp]: true,
                 [CSS.buttonTopLeft]: true,
-            }, onClick: this.hourUpClickHandler, role: "button" }, h("calcite-icon", { key: '35ca8d4dc7ba5a41dfaf925607d2a095c8a56617', icon: "chevron-up", scale: iconScale })), h("span", { key: '01b4275f37424dcd32c905d02aa885415a914a7b', "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
+            }, onClick: this.hourUpClickHandler, role: "button" }, h("calcite-icon", { key: '867c90135ec506d0bbc446436cdb01597de5a667', icon: "chevron-up", scale: iconScale })), h("span", { key: 'a39dd2e46a5612c8ae9ff5bde1451ae2a97908d7', "aria-label": this.messages.hour, "aria-valuemax": "23", "aria-valuemin": "1", "aria-valuenow": (hourIsNumber && parseInt(this.hour)) || "0", "aria-valuetext": this.hour, class: {
                 [CSS.input]: true,
                 [CSS.hour]: true,
                 [CSS.inputFocus]: this.activeEl && this.activeEl === this.hourEl,
-            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"), h("span", { key: '80b49b564a64fc1c390e6d4e29fe9e45eeeae21a', "aria-label": this.messages.hourDown, class: {
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, ref: this.setHourEl, role: "spinbutton", tabIndex: 0 }, this.localizedHour || "--"), h("span", { key: 'ca202a7f81a6f93a6eec7fdf7d189184f71f0cdd', "aria-label": this.messages.hourDown, class: {
                 [CSS.button]: true,
                 [CSS.buttonHourDown]: true,
                 [CSS.buttonBottomLeft]: true,
-            }, onClick: this.hourDownClickHandler, role: "button" }, h("calcite-icon", { key: '2abbfaea92776cadcd7dcf88de3942d7c62b674c', icon: "chevron-down", scale: iconScale }))), h("span", { key: 'e54fbaa0ee3869a4dc1a63e23a5c56131b1fb211', class: CSS.delimiter }, this.localizedHourSuffix), h("div", { key: '6f83126de88bd5e11eab96b2b513eca83371ef6f', class: CSS.column, role: "group" }, h("span", { key: '838bd16254c61ddd5185c56f039ce75e10cccb4f', "aria-label": this.messages.minuteUp, class: {
+            }, onClick: this.hourDownClickHandler, role: "button" }, h("calcite-icon", { key: 'b89cbd5ebe99f1ef5957b34bc969469a14c80d5f', icon: "chevron-down", scale: iconScale }))), h("span", { key: '3efdb3cf862792de1a5a4461b0eb9e0f28a19024', class: CSS.delimiter }, this.localizedHourSuffix), h("div", { key: '428c462e1d0440cc64c480f279bf1115aa3bd1f2', class: CSS.column, role: "group" }, h("span", { key: 'ad8ab308856a2ddc0d0a10eeccea75b7fb7a16bf', "aria-label": this.messages.minuteUp, class: {
                 [CSS.button]: true,
                 [CSS.buttonMinuteUp]: true,
-            }, onClick: this.minuteUpClickHandler, role: "button" }, h("calcite-icon", { key: 'feef0a3ac3b7e1d49b87fa3f1a1f78f2ef00739a', icon: "chevron-up", scale: iconScale })), h("span", { key: '573b0149051e6d1993d0fee60ab1e08a13166e52', "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
+            }, onClick: this.minuteUpClickHandler, role: "button" }, h("calcite-icon", { key: 'f6948699551b8697d99f3fe019701718d02f81d8', icon: "chevron-up", scale: iconScale })), h("span", { key: 'c724d94b7e7ed68cab5edbc5dfd9a298602bbe56', "aria-label": this.messages.minute, "aria-valuemax": "12", "aria-valuemin": "1", "aria-valuenow": (minuteIsNumber && parseInt(this.minute)) || "0", "aria-valuetext": this.minute, class: {
                 [CSS.input]: true,
                 [CSS.minute]: true,
                 [CSS.inputFocus]: this.activeEl && this.activeEl === this.minuteEl,
-            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"), h("span", { key: '18529dceca6fc17d858492aa9aa7d1c1e1edcd3b', "aria-label": this.messages.minuteDown, class: {
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, ref: this.setMinuteEl, role: "spinbutton", tabIndex: 0 }, this.localizedMinute || "--"), h("span", { key: '2f5c10233ba4da112514b022aefabca7d0e86a82', "aria-label": this.messages.minuteDown, class: {
                 [CSS.button]: true,
                 [CSS.buttonMinuteDown]: true,
-            }, onClick: this.minuteDownClickHandler, role: "button" }, h("calcite-icon", { key: '73850cc01cbc225c85a0beb961a7ae64f65969ee', icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { key: '69091597ba01773de4acb534a8b983fe2f5441c7', class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { key: '675ff7ca3414c2d543d9e5c538822381873cfd5b', class: CSS.column, role: "group" }, h("span", { key: '7aa2a23875bd526864094e586c6072403f40709e', "aria-label": this.messages.secondUp, class: {
+            }, onClick: this.minuteDownClickHandler, role: "button" }, h("calcite-icon", { key: 'a10f787bbe0a19ae41b239e423b71c66dfa215a9', icon: "chevron-down", scale: iconScale }))), this.showSecond && h("span", { key: '2dcd0e9ac7ba6e8c8c2f5d5e9f78746d3b168e4f', class: CSS.delimiter }, this.localizedMinuteSuffix), this.showSecond && (h("div", { key: '32729b9737253aba107e70ef861533bd77f2d082', class: CSS.column, role: "group" }, h("span", { key: 'c69cdd7017846fa6c325a52e92a808c0c3bdbea3', "aria-label": this.messages.secondUp, class: {
                 [CSS.button]: true,
                 [CSS.buttonSecondUp]: true,
-            }, onClick: this.secondUpClickHandler, role: "button" }, h("calcite-icon", { key: 'dc7ed98375223769e515c8e4595a597af0021f1f', icon: "chevron-up", scale: iconScale })), h("span", { key: '2dab0bf908e4484ae0014c31f6a5d3a281d2ed61', "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
+            }, onClick: this.secondUpClickHandler, role: "button" }, h("calcite-icon", { key: 'e1c1cb0385e621301103c50713bd257936aecc0b', icon: "chevron-up", scale: iconScale })), h("span", { key: '66f787da07b717b9b9c5c48a8b5a702a15273450', "aria-label": this.messages.second, "aria-valuemax": "59", "aria-valuemin": "0", "aria-valuenow": (secondIsNumber && parseInt(this.second)) || "0", "aria-valuetext": this.second, class: {
                 [CSS.input]: true,
                 [CSS.second]: true,
                 [CSS.inputFocus]: this.activeEl && this.activeEl === this.secondEl,
-            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"), h("span", { key: '80d12a163a20a96cae792297c928dddee72502d4', "aria-label": this.messages.secondDown, class: {
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, ref: this.setSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedSecond || "--"), h("span", { key: '51fc2323dfe2cfe1d775ea90d0ddad1fb78b93c0', "aria-label": this.messages.secondDown, class: {
                 [CSS.button]: true,
                 [CSS.buttonSecondDown]: true,
-            }, onClick: this.secondDownClickHandler, role: "button" }, h("calcite-icon", { key: 'c10a88c5abcdea3b3359b5317a0392555e056940', icon: "chevron-down", scale: iconScale })))), this.showFractionalSecond && (h("span", { key: 'bba24b663df59b7a52a6a64a830c7efa488961bc', class: CSS.delimiter }, this.localizedDecimalSeparator)), this.showFractionalSecond && (h("div", { key: 'c2c9f27e59d460c9a1df66128dfe9514e924145a', class: CSS.column, role: "group" }, h("span", { key: 'eb3c77eb617f3945f7d50f3ac131316a618b090c', "aria-label": this.messages.fractionalSecondUp, class: {
+            }, onClick: this.secondDownClickHandler, role: "button" }, h("calcite-icon", { key: '47787ce07e7cd73d3944050cc05cf8cd135d2a99', icon: "chevron-down", scale: iconScale })))), this.showFractionalSecond && (h("span", { key: '1323bc44dfb8a81284abb7b5040703f6ce05b085', class: CSS.delimiter }, this.localizedDecimalSeparator)), this.showFractionalSecond && (h("div", { key: 'd98f607ec2f0bc11c059a3681cda3fdcaec50f08', class: CSS.column, role: "group" }, h("span", { key: '7d3cc23cbf367a61c242a23eea8273a9ccd9077e', "aria-label": this.messages.fractionalSecondUp, class: {
                 [CSS.button]: true,
                 [CSS.buttonFractionalSecondUp]: true,
-            }, onClick: this.fractionalSecondUpClickHandler, role: "button" }, h("calcite-icon", { key: '170e114b6bf04ec12af9eb0a63e6a38b5f39b0d0', icon: "chevron-up", scale: iconScale })), h("span", { key: '3c0b9bc91faa99ccf643c93f26287b05b6f9cd65', "aria-label": this.messages.fractionalSecond, "aria-valuemax": "999", "aria-valuemin": "1", "aria-valuenow": (fractionalSecondIsNumber && parseInt(this.fractionalSecond)) || "0", "aria-valuetext": this.localizedFractionalSecond, class: {
+            }, onClick: this.fractionalSecondUpClickHandler, role: "button" }, h("calcite-icon", { key: '70b3d4a7f31b2c71091cccc5ddf67f646a758397', icon: "chevron-up", scale: iconScale })), h("span", { key: '93207272db103b01f89f40f056bae2b8a213c053', "aria-label": this.messages.fractionalSecond, "aria-valuemax": "999", "aria-valuemin": "1", "aria-valuenow": (fractionalSecondIsNumber && parseInt(this.fractionalSecond)) || "0", "aria-valuetext": this.localizedFractionalSecond, class: {
                 [CSS.input]: true,
                 [CSS.fractionalSecond]: true,
                 [CSS.inputFocus]: this.activeEl && this.activeEl === this.fractionalSecondEl,
-            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.fractionalSecondKeyDownHandler, ref: this.setFractionalSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedFractionalSecond || "--"), h("span", { key: '5b27c34b17d409ded023f57ee6ed205f2a415943', "aria-label": this.messages.fractionalSecondDown, class: {
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.fractionalSecondKeyDownHandler, ref: this.setFractionalSecondEl, role: "spinbutton", tabIndex: 0 }, this.localizedFractionalSecond || "--"), h("span", { key: '14dfb98f938884a53a21013d7e79bdb8a8e1e4f8', "aria-label": this.messages.fractionalSecondDown, class: {
                 [CSS.button]: true,
                 [CSS.buttonFractionalSecondDown]: true,
-            }, onClick: this.fractionalSecondDownClickHandler, role: "button" }, h("calcite-icon", { key: 'c8727b86e0f55c6e961414a26c6edcc4880af7fd', icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { key: 'f0a10fb966eea035966cd0ee4697ee028a0bcc4d', class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { key: '9d650bdc36d7f3edb5700e3b58185185efd47a3d', class: {
+            }, onClick: this.fractionalSecondDownClickHandler, role: "button" }, h("calcite-icon", { key: 'b4eb99e8022d80f9e0ad4d08ac3b21ea8c904e77', icon: "chevron-down", scale: iconScale })))), this.localizedSecondSuffix && (h("span", { key: 'a271d99ce60118607497b120f10880b5a9f4eb3e', class: CSS.delimiter }, this.localizedSecondSuffix)), showMeridiem && (h("div", { key: 'd8646498826b1bb1caddea9447e09f3ff6d5f944', class: {
                 [CSS.column]: true,
                 [CSS.meridiemStart]: this.meridiemOrder === 0,
-            }, role: "group" }, h("span", { key: '02d3f79b0ac1e637660ce991cd38f7a363adc505', "aria-label": this.messages.meridiemUp, class: {
+            }, role: "group" }, h("span", { key: '77ef9898880f440dd1ac86ef4ca55de861388e10', "aria-label": this.messages.meridiemUp, class: {
                 [CSS.button]: true,
                 [CSS.buttonMeridiemUp]: true,
                 [CSS.buttonTopRight]: true,
-            }, onClick: this.meridiemUpClickHandler, role: "button" }, h("calcite-icon", { key: '347f9d2395cdcb6366879db13b9d0b3bbc7c479c', icon: "chevron-up", scale: iconScale })), h("span", { key: '6ded84f763440546c431f04c2a698885e6868528', "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
+            }, onClick: this.meridiemUpClickHandler, role: "button" }, h("calcite-icon", { key: 'a2765a94f9a3d92946ae1a579d331bba2f86419f', icon: "chevron-up", scale: iconScale })), h("span", { key: '3d3e6c2294e78d7795f5289817433951a3343759', "aria-label": this.messages.meridiem, "aria-valuemax": "2", "aria-valuemin": "1", "aria-valuenow": (this.meridiem === "PM" && "2") || "1", "aria-valuetext": this.meridiem, class: {
                 [CSS.input]: true,
                 [CSS.meridiem]: true,
                 [CSS.inputFocus]: this.activeEl && this.activeEl === this.meridiemEl,
-            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"), h("span", { key: '67591448ca6d469a21ec89bb8d88403d4b3befa2', "aria-label": this.messages.meridiemDown, class: {
+            }, onClick: this.inputClickHandler, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, ref: this.setMeridiemEl, role: "spinbutton", tabIndex: 0 }, this.localizedMeridiem || "--"), h("span", { key: '8477e7701adc45273ce52d1ccdd5f4f3957008cd', "aria-label": this.messages.meridiemDown, class: {
                 [CSS.button]: true,
                 [CSS.buttonMeridiemDown]: true,
                 [CSS.buttonBottomRight]: true,
-            }, onClick: this.meridiemDownClickHandler, role: "button" }, h("calcite-icon", { key: 'b79d0fe3c2f93827672c74347d0e304653b5b06f', icon: "chevron-down", scale: iconScale }))))));
+            }, onClick: this.meridiemDownClickHandler, role: "button" }, h("calcite-icon", { key: '463f0882c8909ec6cb4739c7f4692eb889ea30e2', icon: "chevron-down", scale: iconScale }))))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }

package/dist/components/tr.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/uk.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/utils.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 var colorString$1 = {exports: {}};
 

package/dist/components/utils2.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { Build } from '@stencil/core/internal/client/index.js';
 import { z as nodeListToArray } from './dom.js';

package/dist/components/utils3.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { Build } from '@stencil/core/internal/client/index.js';
 

package/dist/components/vi.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/zh-cn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/zh-hk.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/zh-tw.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.0-next.21
+ * v2.11.0-next.23
  */
 import { d as dayjs } from './calcite-input-time-picker.js';