@esri/calcite-components 5.2.0-next.1 → 5.2.0-next.100

package/dist/components/calcite-tab-title/customElement.js

@@ -11,7 +11,9 @@ import { g as guid } from "../../chunks/guid.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
+import { i as isTabs } from "../../chunks/resources28.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { i as isTag } from "../../chunks/resources3.js";
 const CSS = {
   close: "close",
   container: "container",
@@ -29,10 +31,12 @@ const idPrefix = "calcite-tab-title";
 const IDS = {
   host: (id) => `${idPrefix}-${id}`
 };
-const styles = css`: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:.125rem;box-sizing:border-box;display:flex;block-size:100%;align-items:center;justify-content:center}.scale-s{--calcite-internal-tab-title-close-padding: var(--calcite-spacing-none);--calcite-internal-tab-title-close-margin-start: var(--calcite-spacing-xxs)}.scale-s .content{padding-block:.25rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}.scale-m{--calcite-internal-tab-title-close-padding: var(--calcite-spacing-xxs);--calcite-internal-tab-title-close-margin-start: var(--calcite-spacing-xxs)}.scale-m .content{padding-block:.5rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}.scale-l{--calcite-internal-tab-title-close-padding: var(--calcite-spacing-xxs);--calcite-internal-tab-title-close-margin-start: var(--calcite-spacing-xs)}.scale-l .content{padding-block:var(--calcite-space-sm-plus);font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([closable]) .content{border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:.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-relative-base);line-height:var(--calcite-font-line-height-base);outline-color:transparent;transition-property: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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-tab-text-color, var(--calcite-color-text-3));background-color:var(--calcite-tab-background-color, transparent)}.selected-indicator{position:absolute;display:block;block-size:.125rem;transition-property: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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%}:host([bordered][selected]) .container:after{position:absolute;display:block;block-size:.125rem;transition-property: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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;inset-block-end:-1px;inset-inline-start:0;inset-inline-end:0;inline-size:100%;content:""}:host([bordered][selected]) .container.container--bottom:after{inset-block-start:-1px}:host([bordered][selected]:focus) .container:after{background:transparent}.container--bottom .selected-indicator{inset-block-end:unset;inset-block-start:0}:host([bordered]:not([selected]):hover:not(:focus)) .selected-indicator{background-color:var(--calcite-color-foreground-2)}:host([bordered]:not([selected]):hover:not(:focus)) .container:not(.container--bottom) .selected-indicator{box-shadow:inset 0 1px var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .container.container--bottom .selected-indicator{box-shadow:inset 0 -1px var(--calcite-color-border-1)}:host([selected]:focus) .selected-indicator{block-size:4px}.calcite-tab-title--icon{position:relative;margin:0;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition-property: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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container{color:var(--calcite-tab-text-color, var(--calcite-color-text-3))}.container .icon-start{color:var(--calcite-tab-icon-color-start, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container .icon-end{color:var(--calcite-tab-icon-color-end, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container:hover,.container:active,:host([selected]) .container{color:var(--calcite-tab-text-color-press, var(--calcite-color-text-1))}.container:hover .icon-start,.container:active .icon-start,:host([selected]) .container .icon-start{color:var(--calcite-tab-icon-color-start-press, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container:hover .icon-end,.container:active .icon-end,:host([selected]) .container .icon-end{color:var(--calcite-tab-icon-color-end-press, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.content--has-text{padding:.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)}:host([bordered]) .container{border-color:transparent;border-inline-width:var(--calcite-spacing-px);border-inline-style:solid}:host([bordered]) .container.container--bottom{border-block-start-style:solid;border-block-start-width:1px}:host([bordered]) .container.container--bottom .selected-indicator{inset-block-start:unset;inset-block-end:0}:host([bordered]) .container:not(.container--bottom){border-block-end-style:solid;border-block-end-width:1px}:host([bordered]) .container .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]) .container:host(:not([selected])) .container{box-shadow:0 2px 0 0 transparent}:host([bordered]) .container:host(:not([selected])):host(:hover) .container:not(.container--bottom){border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) .selected-indicator{box-shadow:inset 0 var(--calcite-internal-tab-shadow-length) var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) :not(.container--bottom){--calcite-internal-tab-shadow-length: 1px}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) .container--bottom{--calcite-internal-tab-shadow-length: -1px}:host([bordered]) .container:hover{background-color:var(--calcite-tab-background-color-hover, var(--calcite-color-foreground-2));border-block-end-color:var(--calcite-color-border-1)}:host(:hover) .selected-indicator{background-color:var(--calcite-color-border-3)}:host([selected]) .selected-indicator,:host([selected]:hover) .selected-indicator,:host(:focus) .selected-indicator,:host(:active) .selected-indicator{background-color:var(--calcite-tab-accent-color-press, var(--calcite-color-brand))}:host([closed]){display:none}:host([selected][bordered]) .container{border-inline-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([selected][bordered]) .container:after{background-color:var(--calcite-tab-background-color, var(--calcite-color-foreground-1))}:host([selected][bordered]) .container:hover,:host([selected][bordered]) .container:active{background:transparent}:host(:focus) .container{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus) .container:focus-within{outline-color:transparent}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:var(--calcite-spacing-sm)}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:.75rem}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:.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}.close{--calcite-internal-action-spacing: var(--calcite-internal-tab-title-close-padding);--calcite-internal-action-min-height: unset;--calcite-action-text-color: var(--calcite-tab-close-icon-color);--calcite-action-text-color-press: var(--calcite-tab-close-icon-color-press);--calcite-action-background-color: var(--calcite-tab-close-icon-background-color);--calcite-action-background-color-press: var(--calcite-tab-close-icon-background-color-press);--calcite-action-background-color-hover: var(--calcite-tab-close-icon-background-color-hover);margin:auto;margin-inline:var(--calcite-spacing-sm) var(--calcite-internal-tab-title-close-margin-start)}@media(forced-colors:active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][selected]) .container--bottom{border-block-start-style:none}.selected-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) .container{pointer-events:none;opacity:.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+const isTabTitle = isTag("calcite-tab-title");
+const styles = css`: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{outline:var(--calcite-border-width-md) solid transparent;outline-offset:var(--calcite-border-width-md);display:block;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;block-size:100%;margin-block-end:var(--calcite-space-base);position:relative;box-sizing:border-box}.scale-s{--calcite-internal-tab-title-close-padding: var(--calcite-theme-space-none, var(--calcite-spacing-none));--calcite-internal-tab-title-close-margin-start: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}.scale-s .content{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);padding-block:var(--calcite-space-2xs)}.scale-m{--calcite-internal-tab-title-close-padding: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));--calcite-internal-tab-title-close-margin-start: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}.scale-m .content{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);padding-block:var(--calcite-space-sm)}.scale-l{--calcite-internal-tab-title-close-padding: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs));--calcite-internal-tab-title-close-margin-start: var(--calcite-theme-space-xs, var(--calcite-spacing-xs))}.scale-l .content{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);padding-block:var(--calcite-space-sm-plus)}:host([closable]) .content{border-block-end-color:transparent}:host([layout=inline]) .content,:host([layout=center]) .content{padding-inline:var(--calcite-space-2xs)}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{justify-content:center;margin-block:0;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{transition-property: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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);position:relative;box-sizing:border-box;align-content:center;cursor:pointer;display:flex;outline-color:transparent;block-size:100%;justify-content:space-between;padding-inline:0;inline-size:100%;color:var(--calcite-tab-text-color, var(--calcite-color-text-3));background-color:var(--calcite-tab-background-color, transparent)}.selected-indicator{transition-property: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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:absolute;display:block;block-size:var(--calcite-space-base);inset-block-end:0;inset-inline-start:0;inset-inline-end:0;inline-size:100%}:host([bordered][selected]) .container:after{transition-property: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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;position:absolute;display:block;block-size:var(--calcite-space-base);inset-block-end:-1px;inset-inline-start:0;inset-inline-end:0;inline-size:100%;content:""}:host([bordered][selected]) .container.container--bottom:after{inset-block-start:-1px}:host([bordered][selected]:focus) .container:after{background:transparent}.container--bottom .selected-indicator{inset-block-end:unset;inset-block-start:0}:host([bordered]:not([selected]):hover:not(:focus)) .selected-indicator{background-color:var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2))}:host([bordered]:not([selected]):hover:not(:focus)) .container:not(.container--bottom) .selected-indicator{box-shadow:inset 0 1px var(--calcite-color-border-1)}:host([bordered]:not([selected]):hover:not(:focus)) .container.container--bottom .selected-indicator{box-shadow:inset 0 -1px var(--calcite-color-border-1)}:host([selected]:focus) .selected-indicator{block-size:4px}.calcite-tab-title--icon{position:relative;margin:0;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition-property: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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out}.container{color:var(--calcite-tab-text-color, var(--calcite-color-text-3))}.container .icon-start{color:var(--calcite-tab-icon-color-start, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container .icon-end{color:var(--calcite-tab-icon-color-end, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container:hover,.container:active,:host([selected]) .container{color:var(--calcite-tab-text-color-press, var(--calcite-color-text-1))}.container:hover .icon-start,.container:active .icon-start,:host([selected]) .container .icon-start{color:var(--calcite-tab-icon-color-start-press, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.container:hover .icon-end,.container:active .icon-end,:host([selected]) .container .icon-end{color:var(--calcite-tab-icon-color-end-press, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}.content--has-text{padding:var(--calcite-space-2xs)}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([bordered]) .container{border-color:transparent;border-inline-width:var(--calcite-theme-space-px, var(--calcite-spacing-px));border-inline-style:solid}:host([bordered]) .container.container--bottom{border-block-start-style:solid;border-block-start-width:1px}:host([bordered]) .container.container--bottom .selected-indicator{inset-block-start:unset;inset-block-end:0}:host([bordered]) .container:not(.container--bottom){border-block-end-style:solid;border-block-end-width:1px}:host([bordered]) .container .selected-indicator{inset-block-start:0;inset-block-end:unset;inset-inline-start:-1px;inset-inline-end:0;inline-size:calc(100% + var(--calcite-theme-space-base, var(--calcite-spacing-base)))}:host([bordered]) .container:host(:not([selected])) .container{box-shadow:0 2px 0 0 transparent}:host([bordered]) .container:host(:not([selected])):host(:hover) .container:not(.container--bottom){border-block-end-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) .selected-indicator{box-shadow:inset 0 var(--calcite-internal-tab-shadow-length) var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) :not(.container--bottom){--calcite-internal-tab-shadow-length: 1px}:host([bordered]) .container:host(:not([selected])):host(:hover):host(:not(:focus)) .container--bottom{--calcite-internal-tab-shadow-length: -1px}:host([bordered]) .container:hover{background-color:var(--calcite-tab-background-color-hover, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)));border-block-end-color:var(--calcite-color-border-1)}:host(:hover) .selected-indicator{background-color:var(--calcite-color-border-3)}:host([selected]) .selected-indicator,:host([selected]:hover) .selected-indicator,:host(:focus) .selected-indicator,:host(:active) .selected-indicator{background-color:var(--calcite-tab-accent-color-press, var(--calcite-color-brand))}:host([closed]){display:none}:host([selected][bordered]) .container{border-inline-color:var(--calcite-tab-border-color, var(--calcite-color-border-1))}:host([selected][bordered]) .container:after{background-color:var(--calcite-tab-background-color, var(--calcite-theme-color-surface-2, var(--calcite-color-foreground-1)))}:host([selected][bordered]) .container:hover,:host([selected][bordered]) .container:active{background:transparent}:host(:focus) .container{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-1 * var(--calcite-space-base) * (1 - 2 * clamp(0,var(--calcite-offset-invert-focus),1)))}:host(:focus) .container:focus-within{outline-color:transparent}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([layout=inline][bordered]) .scale-m .content,:host([layout=center][bordered]) .scale-m .content{padding-inline:var(--calcite-space-md)}:host([layout=inline][bordered]) .scale-s .content,:host([layout=center][bordered]) .scale-s .content{padding-inline:var(--calcite-space-sm)}:host([layout=inline][bordered]) .scale-l .content,:host([layout=center][bordered]) .scale-l .content{padding-inline:var(--calcite-space-lg)}: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}.close{--calcite-internal-action-spacing: var(--calcite-internal-tab-title-close-padding);--calcite-internal-action-min-height: unset;--calcite-action-text-color: var(--calcite-tab-close-icon-color);--calcite-action-text-color-press: var(--calcite-tab-close-icon-color-press);--calcite-action-background-color: var(--calcite-tab-close-icon-background-color);--calcite-action-background-color-press: var(--calcite-tab-close-icon-background-color-press);--calcite-action-background-color-hover: var(--calcite-tab-close-icon-background-color-hover);margin:auto;margin-inline:var(--calcite-theme-space-sm, var(--calcite-spacing-sm)) var(--calcite-internal-tab-title-close-margin-start)}@media(forced-colors:active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][selected]) .container--bottom{border-block-start-style:none}.selected-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) .container{pointer-events:none;opacity:.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class TabTitle extends LitElement {
   constructor() {
     super();
+    this._closed = false;
     this.closeButtonRef = createRef();
     this.direction = useDirection();
     this.guid = IDS.host(guid());
@@ -47,12 +51,12 @@ class TabTitle extends LitElement {
     this.hasText = false;
     this.bordered = false;
     this.closable = false;
-    this.closed = false;
     this.disabled = false;
     this.position = "top";
     this.scale = "m";
     this.selected = false;
     this.calciteInternalTabIconChanged = createEvent({ cancelable: false });
+    this.calciteInternalTabTitleCloseChange = createEvent({ cancelable: false });
     this.calciteInternalTabTitleRegister = createEvent({ cancelable: false });
     this.calciteInternalTabsActivate = createEvent({ cancelable: false });
     this.calciteInternalTabsClose = createEvent({ cancelable: false });
@@ -67,11 +71,19 @@ class TabTitle extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { controls: [16, {}, { state: true }], hasText: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], tab: [3, {}, { reflect: true }] };
+    this.properties = { controls: [16, {}, { state: true }], hasText: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], bordered: [7, {}, { reflect: true, type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: 1, scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], tab: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
+  get closed() {
+    return this._closed;
+  }
+  set closed(value) {
+    if (value !== this._closed || !value && this.closeRequest) {
+      this.setClosedState(value);
+    }
+  }
   async activateTab(userTriggered = true) {
     if (this.disabled || this.closed) {
       return;
@@ -86,7 +98,7 @@ class TabTitle extends LitElement {
     return this.tab ? this.tab : this.getTabIndex();
   }
   async getTabIndex() {
-    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab-title")), this.el);
+    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter(isTabTitle), this.el);
   }
   _updateAriaInfo(tabIds = [], titleIds = []) {
     this.controls = tabIds[titleIds.indexOf(this.el.id)] || null;
@@ -108,6 +120,9 @@ class TabTitle extends LitElement {
     if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) {
       this.selectedHandler();
     }
+    if (changes.has("closed") && this.hasUpdated) {
+      this.calciteInternalTabTitleCloseChange.emit();
+    }
     if (this.parentTabsEl) {
       this.layout = this.parentTabsEl.layout;
       this.bordered = this.parentTabsEl.bordered;
@@ -130,7 +145,7 @@ class TabTitle extends LitElement {
     }
   }
   internalTabChangeHandler(event) {
-    const targetTabsEl = event.composedPath().find((el) => el.tagName === "CALCITE-TABS");
+    const targetTabsEl = event.composedPath().find(isTabs);
     if (targetTabsEl !== this.parentTabsEl) {
       return;
     }
@@ -182,7 +197,7 @@ class TabTitle extends LitElement {
     }
   }
   closeClickHandler() {
-    this.closeTabTitleAndNotify();
+    this.setClosedState(true, true);
   }
   updateHasText() {
     this.hasText = this.el.textContent.trim().length > 0;
@@ -194,10 +209,45 @@ class TabTitle extends LitElement {
   setupTextContentObserver() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
-  closeTabTitleAndNotify() {
-    this.closed = true;
-    this.calciteInternalTabsClose.emit({ tab: this.tab });
-    requestAnimationFrame(() => this.calciteTabsClose.emit());
+  async setClosedState(value, notify = false) {
+    if (!value) {
+      this.closeRequest = void 0;
+      this.updateClosedState(false);
+      return;
+    }
+    if (this.closeRequest) {
+      return this.closeRequest;
+    }
+    const closeRequest = Promise.resolve().then(async () => {
+      if (this.beforeClose) {
+        try {
+          await this.beforeClose();
+        } catch {
+          return;
+        }
+      }
+      if (this.closeRequest !== closeRequest) {
+        return;
+      }
+      this.updateClosedState(true);
+      if (notify) {
+        this.calciteInternalTabsClose.emit({ tab: this.tab });
+        requestAnimationFrame(() => this.calciteTabsClose.emit());
+      }
+    });
+    this.closeRequest = closeRequest;
+    try {
+      await closeRequest;
+    } finally {
+      if (this.closeRequest === closeRequest) {
+        this.closeRequest = void 0;
+      }
+    }
+  }
+  updateClosedState(value) {
+    const oldValue = this._closed;
+    this._closed = value;
+    this.requestUpdate("closed", oldValue);
   }
   render() {
     const { el, closed } = this;

package/dist/components/calcite-table/customElement.d.ts

@@ -1,51 +1,96 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale, SelectionMode } from "../interfaces.js";
+import type { Scale, SelectionMode } from "../types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { TableRow } from "../calcite-table-row/customElement.js";
-import type { TableInteractionMode, TableLayout, TableSelectionDisplay } from "./interfaces.js";
+import type { TableInteractionMode, TableLayout, TableSelectionDisplay } from "./types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's border color. */
+  "--calcite-table-border-color": "*";
+  /** Specifies the component's border radius. */
+  "--calcite-table-corner-radius": "*";
+  /** Specifies the component's shadow. */
+  "--calcite-table-shadow": "*";
+  /** Specifies the background color of the component's `numbered` cell. */
+  "--calcite-table-number-cell-background-color": "*";
+  /** Specifies the text color of the component's `numbered` cell. */
+  "--calcite-table-number-cell-text-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the background color of cells containing selection icons. */
+  "--calcite-table-selection-cell-background-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the background color of cells containing selection icons on `selected` `calcite-table-row`s. */
+  "--calcite-table-selection-cell-background-color-selected": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the icon color of the component's selection icon on `calcite-table-row`s where `selected` is `false`. */
+  "--calcite-table-selection-cell-icon-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the icon color of the component's selection icon on `selected` `calcite-table-row`s. */
+  "--calcite-table-selection-cell-icon-color-selected": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the background color of the component's selection chip. */
+  "--calcite-table-selection-chip-background-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the border color of the component's selection chip. */
+  "--calcite-table-selection-chip-border-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the corner radius of the component's selection chip. */
+  "--calcite-table-selection-chip-corner-radius": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, specifies the shadow of the component's selection chip. */
+  "--calcite-table-selection-chip-shadow": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the text color of the component's selection chip. */
+  "--calcite-table-selection-chip-text-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection chip. */
+  "--calcite-table-selection-chip-background-color-selected": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection chip. */
+  "--calcite-table-selection-chip-border-color-selected": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection chip. */
+  "--calcite-table-selection-chip-text-color-selected": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the background color of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-background-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the border color of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-border-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the corner radius of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-corner-radius": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the icon color of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-icon-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the shadow of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-shadow": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the text color of the component's selection out of view chip. */
+  "--calcite-table-selection-out-of-view-chip-text-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when active. */
+  "--calcite-table-selection-dismiss-button-background-color-active": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when hovered. */
+  "--calcite-table-selection-dismiss-button-background-color-hover": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip. */
+  "--calcite-table-selection-dismiss-button-background-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when active. */
+  "--calcite-table-selection-dismiss-button-border-color-active": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when hovered. */
+  "--calcite-table-selection-dismiss-button-border-color-hover": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip. */
+  "--calcite-table-selection-dismiss-button-border-color": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the corner radius of the component's selection dismiss chip. */
+  "--calcite-table-selection-dismiss-button-corner-radius": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the shadow of the component's selection dismiss chip. */
+  "--calcite-table-selection-dismiss-button-shadow": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when active. */
+  "--calcite-table-selection-dismiss-button-text-color-active": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when hovered. */
+  "--calcite-table-selection-dismiss-button-text-color-hover": "*";
+  /** When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip. */
+  "--calcite-table-selection-dismiss-button-text-color": "*";
+  /** When `pageSize` is set, specifies the component's pagination item color. */
+  "--calcite-table-pagination-color": "*";
+  /** When `pageSize` is set, specifies the component's pagination item color when hovered or selected. */
+  "--calcite-table-pagination-color-hover": "*";
+  /** When `pageSize` is set, specifies the component's pagination item bottom border color when hovered. */
+  "--calcite-table-pagination-color-border-hover": "*";
+  /** When `pageSize` is set, specifies the component's pagination item bottom border color when selected. */
+  "--calcite-table-pagination-color-border-active": "*";
+  /** When `pageSize` is set, specifies the component's pagination item background color when active. */
+  "--calcite-table-pagination-background-color": "*";
+  /** When `pageSize` is set, specifies the component's pagination chevron item background color when hovered. */
+  "--calcite-table-pagination-icon-color-background-hover": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-table-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-table-corner-radius] - Specifies the component's border radius.
- * @cssproperty [--calcite-table-shadow] - Specifies the component's shadow.
- * @cssproperty [--calcite-table-number-cell-background-color] - Specifies the background color of the component's `numbered` cell.
- * @cssproperty [--calcite-table-number-cell-text-color] - Specifies the text color of the component's `numbered` cell.
- * @cssproperty [--calcite-table-selection-cell-background-color] - When `selectionMode` is `"multiple"` or `"single"`, specifies the background color of cells containing selection icons.
- * @cssproperty [--calcite-table-selection-cell-background-color-selected] - When `selectionMode` is `"multiple"` or `"single"`, specifies the background color of cells containing selection icons on `selected` `calcite-table-row`s.
- * @cssproperty [--calcite-table-selection-cell-icon-color] - When `selectionMode` is `"multiple"` or `"single"`, specifies the icon color of the component's selection icon on `calcite-table-row`s where `selected` is `false`.
- * @cssproperty [--calcite-table-selection-cell-icon-color-selected] - When `selectionMode` is `"multiple"` or `"single"`, specifies the icon color of the component's selection icon on `selected` `calcite-table-row`s.
- * @cssproperty [--calcite-table-selection-chip-background-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the background color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-border-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the border color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-corner-radius] - When `selectionMode` is `"multiple"` or `"single"`, specifies the corner radius of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-shadow] - When `selectionMode` is `"multiple"` or `"single"`, specifies the shadow of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-text-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the text color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-background-color-selected] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-border-color-selected] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-chip-text-color-selected] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-background-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the background color of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-border-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the border color of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-corner-radius] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the corner radius of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-icon-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the icon color of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-shadow] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the shadow of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-out-of-view-chip-text-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the text color of the component's selection out of view chip.
- * @cssproperty [--calcite-table-selection-dismiss-button-background-color-active] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when active.
- * @cssproperty [--calcite-table-selection-dismiss-button-background-color-hover] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when hovered.
- * @cssproperty [--calcite-table-selection-dismiss-button-background-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip.
- * @cssproperty [--calcite-table-selection-dismiss-button-border-color-active] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when active.
- * @cssproperty [--calcite-table-selection-dismiss-button-border-color-hover] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when hovered.
- * @cssproperty [--calcite-table-selection-dismiss-button-border-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip.
- * @cssproperty [--calcite-table-selection-dismiss-button-corner-radius] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the corner radius of the component's selection dismiss chip.
- * @cssproperty [--calcite-table-selection-dismiss-button-shadow] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the shadow of the component's selection dismiss chip.
- * @cssproperty [--calcite-table-selection-dismiss-button-text-color-active] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when active.
- * @cssproperty [--calcite-table-selection-dismiss-button-text-color-hover] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when hovered.
- * @cssproperty [--calcite-table-selection-dismiss-button-text-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip.
- * @cssproperty [--calcite-table-pagination-color] - When `pageSize` is set, specifies the component's pagination item color.
- * @cssproperty [--calcite-table-pagination-color-hover] - When `pageSize` is set, specifies the component's pagination item color when hovered or selected.
- * @cssproperty [--calcite-table-pagination-color-border-hover] - When `pageSize` is set, specifies the component's pagination item bottom border color when hovered.
- * @cssproperty [--calcite-table-pagination-color-border-active] - When `pageSize` is set, specifies the component's pagination item bottom border color when selected.
- * @cssproperty [--calcite-table-pagination-background-color] - When `pageSize` is set, specifies the component's pagination item background color when active.
- * @cssproperty [--calcite-table-pagination-icon-color-background-hover] - When `pageSize` is set, specifies the component's pagination chevron item background color when hovered.
  * @slot  - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
  * @slot [table-header] - A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements.
  * @slot [table-footer] - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
@@ -88,13 +133,17 @@ export abstract class Table extends LitElement {
    * @default "auto"
    */
   accessor layout: TableLayout;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      clear?: string;
-      hiddenSelected?: string;
-      page?: string;
-      row?: string;
-      selected?: string;
+      clear?: string | undefined;
+      hiddenSelected?: string | undefined;
+      page?: string | undefined;
+      row?: string | undefined;
+      selected?: string | undefined;
   };
   /**
    * When `true`, displays the position of the row in numeric form.
@@ -125,17 +174,21 @@ export abstract class Table extends LitElement {
    */
   accessor selectionDisplay: TableSelectionDisplay;
   /**
-   * Specifies the selection mode of the component, where:
-   *
-   * `"multiple"` allows any number of selections,
+   * Specifies the selection mode of the component.
    *
-   * `"single"` allows only one selection, and
-   *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "none"
    */
   accessor selectionMode: Extract<"none" | "multiple" | "single", SelectionMode>;
+  /**
+   * When `true`, displays the component's `table-header` slot as sticky while the component remains in view.
+   *
+   * @default false
+   */
+  accessor stickyHeader: boolean;
   /**
    * When `true`, displays striped styling on the component's `calcite-table-rows`.
    *

package/dist/components/calcite-table/customElement.js

@@ -1,11 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { isServer, css, nothing, html, render } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
+import { i as isTableRow } from "../../chunks/resources31.js";
 import { i as isHidden } from "../../chunks/component.js";
+import { c as createObserver } from "../../chunks/observers.js";
+import { s as styles$1 } from "../../chunks/screen-reader.js";
 function getUserAgentData() {
   return navigator.userAgentData;
 }
@@ -23,8 +26,8 @@ const CSS = {
   paginationArea: "pagination-area",
   container: "container",
   tableContainer: "table-container",
+  tableContainerOverflow: "table-container--overflow",
   tableFixed: "table--fixed",
-  assistiveText: "assistive-text",
   selectionActions: "selection-actions",
   dismissButton: "dismiss-button",
   selectionChipActive: "selection-chip--active",
@@ -40,7 +43,7 @@ const ICONS = {
   hideEmpty: "hide-empty",
   clear: "x"
 };
-const styles = css`@charset "UTF-8";:host([scale=s]){--calcite-internal-table-cell-padding: .25rem;--calcite-internal-table-cell-font-size: var(--calcite-font-size--2);--calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-table-cell-padding: .5rem;--calcite-internal-table-cell-font-size: var(--calcite-font-size--1);--calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--2)}:host(:is([scale=s],[scale=m])){--calcite-internal-table-selection-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-table-selection-action-spacing: var(--calcite-spacing-xs);--calcite-internal-table-cell-padding: 1rem;--calcite-internal-table-cell-font-size: var(--calcite-font-size-0);--calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--1)}:host{display:flex}.container{display:flex;flex-direction:column;inline-size:var(--calcite-container-size-content-fluid);block-size:var(--calcite-container-size-content-fluid)}.table-container{overflow:auto;white-space:nowrap;line-height:var(--calcite-font-line-height-relative-tight);border:var(--calcite-border-width-sm) solid var(--calcite-table-border-color, var(--calcite-color-border-2));border-radius:var(--calcite-table-corner-radius, var(--calcite-corner-radius-sharp));box-shadow:var(--calcite-table-shadow, var(--calcite-shadow-none))}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}table{border-collapse:collapse;overflow-x:scroll;inline-size:var(--calcite-container-size-content-fluid)}@-moz-document url-prefix(){table{border-collapse:separate;border-spacing:0}}.table--fixed{table-layout:fixed}.bordered ::slotted(calcite-table-row){--calcite-table-row-border-color: var(--calcite-table-border-color, var(--calcite-color-border-2))}.striped ::slotted(calcite-table-row:nth-child(2n+1)){--calcite-table-row-background-color: var( --calcite-table-row-background-color-striped, var(--calcite-color-foreground-2) )}.selection-actions{display:flex;flex-direction:row;gap:var(--calcite-internal-table-selection-action-spacing);margin-inline-start:auto}.selection-area{display:flex;flex-direction:row;align-items:center;padding-block:var(--calcite-internal-table-cell-padding)}.selection-area calcite-chip:last-of-type{margin-inline-end:.5rem}.selection-area calcite-chip:last-of-type:not(:first-of-type){margin-inline-start:.5rem}.selection-area calcite-button{margin-inline-end:1rem}.selection-chip{--calcite-chip-background-color: var(--calcite-table-selection-chip-background-color);--calcite-chip-border-color: var(--calcite-table-selection-chip-border-color);--calcite-chip-corner-radius: var(--calcite-table-selection-chip-corner-radius);--calcite-chip-shadow: var(--calcite-table-selection-chip-shadow);--calcite-chip-text-color: var(--calcite-table-selection-chip-text-color)}.selection-chip.selection-chip--active{--calcite-chip-background-color: var(--calcite-table-selection-chip-background-color-selected);--calcite-chip-border-color: var(--calcite-table-selection-chip-border-color-selected);--calcite-chip-text-color: var(--calcite-table-selection-chip-text-color-selected)}.selection-chip--out-of-view{--calcite-chip-background-color: var(--calcite-table-selection-out-of-view-chip-background-color);--calcite-chip-border-color: var(--calcite-table-selection-out-of-view-chip-border-color);--calcite-chip-corner-radius: var(--calcite-table-selection-out-of-view-chip-corner-radius);--calcite-chip-shadow: var(--calcite-table-selection-out-of-view-chip-shadow);--calcite-chip-text-color: var(--calcite-table-selection-out-of-view-chip-text-color);--calcite-chip-icon-color: var(--calcite-table-selection-out-of-view-chip-icon-color)}.pagination-area{display:flex;inline-size:100%;flex-direction:row;justify-content:center;padding-block:var(--calcite-internal-table-cell-padding)}calcite-pagination{flex:1;justify-content:center;--calcite-pagination-color: var(--calcite-table-pagination-color);--calcite-pagination-color-hover: var(--calcite-table-pagination-color-hover);--calcite-pagination-color-border-hover: var(--calcite-table-pagination-color-border-hover);--calcite-pagination-color-border-active: var(--calcite-table-pagination-color-border-active);--calcite-pagination-background-color: var(--calcite-table-pagination-background-color);--calcite-pagination-icon-color-background-hover: var(--calcite-table-pagination-icon-color-background-hover)}.dismiss-button{margin-inline-end:1rem;--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color);--calcite-button-corner-radius: var(--calcite-table-selection-dismiss-button-corner-radius);--calcite-button-shadow: var(--calcite-table-selection-dismiss-button-shadow);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color)}.dismiss-button:hover{--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color-hover);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color-hover);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color-hover)}.dismiss-button:active{--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color-active);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color-active);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color-active)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`@charset "UTF-8";:host{display:flex;--calcite-internal-table-border-collapse: collapse}:host([scale=s]){--calcite-internal-table-cell-padding: .25rem;--calcite-internal-table-cell-font-size: var(--calcite-font-size--2);--calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--3)}:host([scale=m]){--calcite-internal-table-cell-padding: .5rem;--calcite-internal-table-cell-font-size: var(--calcite-font-size--1);--calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--2)}:host(:is([scale=s],[scale=m])){--calcite-internal-table-selection-action-spacing: var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))}:host([scale=l]){--calcite-internal-table-selection-action-spacing: var(--calcite-theme-space-xs, var(--calcite-spacing-xs));--calcite-internal-table-cell-padding: 1rem;--calcite-internal-table-cell-font-size: var(--calcite-font-size-0);--calcite-internal-table-cell-font-size-secondary: var(--calcite-font-size--1)}:host([sticky-header]){--calcite-internal-table-border-collapse: separate;--calcite-internal-table-header-border-block-end-width: 0;--calcite-internal-table-sticky-header-border-shadow: inset 0 calc(-1 * var(--calcite-border-width-sm)) 0 0 var(--calcite-table-header-border-color, var(--calcite-table-border-color, var(--calcite-color-border-2)))}:host([sticky-header]) .table-container{position:relative}.container{display:flex;flex-direction:column;inline-size:var(--calcite-container-size-content-fluid);block-size:var(--calcite-container-size-content-fluid)}.table-container{white-space:nowrap;line-height:var(--calcite-font-line-height-relative-tight);border:var(--calcite-border-width-sm) solid var(--calcite-table-border-color, var(--calcite-color-border-2));border-radius:var(--calcite-table-corner-radius, var(--calcite-theme-corner-radius-none, var(--calcite-corner-radius-sharp)));box-shadow:var(--calcite-table-shadow, var(--calcite-shadow-none));overflow:auto}.table-container--overflow{overscroll-behavior-y:none}table{border-collapse:var(--calcite-internal-table-border-collapse);border-spacing:0;inline-size:var(--calcite-container-size-content-fluid)}@-moz-document url-prefix(){table{border-collapse:separate;border-spacing:0}}.table--fixed{table-layout:fixed}.bordered ::slotted(calcite-table-row){--calcite-table-row-border-color: var(--calcite-table-border-color, var(--calcite-color-border-2))}.striped ::slotted(calcite-table-row:nth-child(2n+1)){--calcite-table-row-background-color: var( --calcite-table-row-background-color-striped, var(--calcite-theme-color-surface-3, var(--calcite-color-foreground-2)) )}.selection-actions{display:flex;flex-direction:row;gap:var(--calcite-internal-table-selection-action-spacing);margin-inline-start:auto}.selection-area{display:flex;flex-direction:row;align-items:center;padding-block:var(--calcite-internal-table-cell-padding)}.selection-area calcite-chip:last-of-type{margin-inline-end:var(--calcite-space-sm)}.selection-area calcite-chip:last-of-type:not(:first-of-type){margin-inline-start:var(--calcite-space-sm)}.selection-area calcite-button{margin-inline-end:var(--calcite-space-lg)}.selection-chip{--calcite-chip-background-color: var(--calcite-table-selection-chip-background-color);--calcite-chip-border-color: var(--calcite-table-selection-chip-border-color);--calcite-chip-corner-radius: var(--calcite-table-selection-chip-corner-radius);--calcite-chip-shadow: var(--calcite-table-selection-chip-shadow);--calcite-chip-text-color: var(--calcite-table-selection-chip-text-color)}.selection-chip.selection-chip--active{--calcite-chip-background-color: var(--calcite-table-selection-chip-background-color-selected);--calcite-chip-border-color: var(--calcite-table-selection-chip-border-color-selected);--calcite-chip-text-color: var(--calcite-table-selection-chip-text-color-selected)}.selection-chip--out-of-view{--calcite-chip-background-color: var(--calcite-table-selection-out-of-view-chip-background-color);--calcite-chip-border-color: var(--calcite-table-selection-out-of-view-chip-border-color);--calcite-chip-corner-radius: var(--calcite-table-selection-out-of-view-chip-corner-radius);--calcite-chip-shadow: var(--calcite-table-selection-out-of-view-chip-shadow);--calcite-chip-text-color: var(--calcite-table-selection-out-of-view-chip-text-color);--calcite-chip-icon-color: var(--calcite-table-selection-out-of-view-chip-icon-color)}.pagination-area{display:flex;flex-direction:row;inline-size:100%;justify-content:center;padding-block:var(--calcite-internal-table-cell-padding)}calcite-pagination{flex:1;justify-content:center;--calcite-pagination-color: var(--calcite-table-pagination-color);--calcite-pagination-color-hover: var(--calcite-table-pagination-color-hover);--calcite-pagination-color-border-hover: var(--calcite-table-pagination-color-border-hover);--calcite-pagination-color-border-active: var(--calcite-table-pagination-color-border-active);--calcite-pagination-background-color: var(--calcite-table-pagination-background-color);--calcite-pagination-icon-color-background-hover: var(--calcite-table-pagination-icon-color-background-hover)}.dismiss-button{margin-inline-end:var(--calcite-space-lg);--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color);--calcite-button-corner-radius: var(--calcite-table-selection-dismiss-button-corner-radius);--calcite-button-shadow: var(--calcite-table-selection-dismiss-button-shadow);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color)}.dismiss-button:hover{--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color-hover);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color-hover);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color-hover)}.dismiss-button:active{--calcite-button-background-color: var(--calcite-table-selection-dismiss-button-background-color-active);--calcite-button-border-color: var(--calcite-table-selection-dismiss-button-border-color-active);--calcite-button-text-color: var(--calcite-table-selection-dismiss-button-text-color-active)}:host([hidden]){display:none}[hidden]{display:none}`;
 class Table extends LitElement {
   constructor() {
     super();
@@ -49,14 +52,19 @@ class Table extends LitElement {
     this.footRows = [];
     this.headRows = [];
     this.paginationRef = createRef();
+    this.tableContainerRef = createRef();
+    this.tableEl = null;
     this.tableBodySlotRef = createRef();
     this.tableFootSlotRef = createRef();
     this.tableHeadSlotRef = createRef();
+    this.tableContainerOverflowAnimationFrame = null;
+    this.tableContainerResizeObserver = createObserver("resize", () => this.scheduleTableContainerOverflowUpdate());
     this.messages = useT9n({ blocking: true });
     this.colCount = 0;
     this.pageStartRow = 1;
     this.readCellContentsToAT = false;
     this.selectedCount = 0;
+    this.tableContainerHasOverflow = false;
     this._selectedItems = [];
     this.bordered = false;
     this.currentPage = 0;
@@ -69,6 +77,7 @@ class Table extends LitElement {
     this.selectionDisplay = "top";
     this.selectionMode = "none";
     this.striped = false;
+    this.stickyHeader = false;
     this.calciteInternalTableRowFocusChange = createEvent({ cancelable: false });
     this.calciteTablePageChange = createEvent({ cancelable: false });
     this.calciteTableSelect = createEvent({ cancelable: false });
@@ -77,10 +86,10 @@ class Table extends LitElement {
     this.listen("calciteInternalTableRowFocusRequest", this.calciteInternalTableRowFocusEvent);
   }
   static {
-    this.properties = { colCount: [16, {}, { state: true }], pageStartRow: [16, {}, { state: true }], readCellContentsToAT: [16, {}, { state: true }], selectedCount: [16, {}, { state: true }], _selectedItems: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], caption: 1, currentPage: [11, {}, { reflect: true, type: Number }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], interactionMode: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], numbered: [7, {}, { reflect: true, type: Boolean }], numberingSystem: [3, {}, { reflect: true }], pageSize: [11, {}, { reflect: true, type: Number }], scale: [3, {}, { reflect: true }], selectedItems: [32, {}, { attribute: false, readOnly: true }], selectionDisplay: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], striped: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { colCount: [16, {}, { state: true }], pageStartRow: [16, {}, { state: true }], readCellContentsToAT: [16, {}, { state: true }], selectedCount: [16, {}, { state: true }], tableContainerHasOverflow: [16, {}, { state: true }], _selectedItems: [16, {}, { state: true }], bordered: [7, {}, { reflect: true, type: Boolean }], caption: 1, currentPage: [11, {}, { reflect: true, type: Number }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], interactionMode: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], numbered: [7, {}, { reflect: true, type: Boolean }], numberingSystem: [3, {}, { reflect: true }], pageSize: [11, {}, { reflect: true, type: Number }], scale: [3, {}, { reflect: true }], selectedItems: [32, {}, { attribute: false, readOnly: true }], selectionDisplay: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], striped: [7, {}, { reflect: true, type: Boolean }], stickyHeader: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
-    this.styles = styles;
+    this.styles = [styles, styles$1];
   }
   get selectedItems() {
     return this._selectedItems;
@@ -93,10 +102,38 @@ class Table extends LitElement {
     if (changes.has("groupSeparator") && (this.hasUpdated || this.groupSeparator !== false) || changes.has("interactionMode") && (this.hasUpdated || this.interactionMode !== "interactive") || changes.has("numbered") && (this.hasUpdated || this.numbered !== false) || changes.has("numberingSystem") || changes.has("pageSize") && (this.hasUpdated || this.pageSize !== 0) || changes.has("scale") && (this.hasUpdated || this.scale !== "m") || changes.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "none") || changes.has("currentPage") && (this.hasUpdated || this.currentPage > 1) && this.pageSize > 0) {
       this.updateRows();
     }
+    if (changes.has("stickyHeader") && (this.hasUpdated || this.stickyHeader !== false)) {
+      this.allRows?.forEach((row) => {
+        row.stickyHeaderEnabled = this.stickyHeader;
+      });
+      if (this.stickyHeader) {
+        this.applyHeaderRowPositionStyles();
+      } else {
+        this.resetStickyHeaderState();
+      }
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.tableContainerOverflowAnimationFrame !== null) {
+      cancelAnimationFrame(this.tableContainerOverflowAnimationFrame);
+      this.tableContainerOverflowAnimationFrame = null;
+    }
+    this.tableContainerResizeObserver?.disconnect();
   }
   handleSlotChange() {
     this.updateRows();
   }
+  clearStickyHeaderRowStyles() {
+    this.headRows?.forEach((row) => {
+      row.style.removeProperty("--calcite-internal-table-header-offset");
+      row.style.removeProperty("--calcite-internal-table-header-z-index");
+      row.style.removeProperty("--calcite-internal-table-header-row-position");
+    });
+  }
+  resetStickyHeaderState() {
+    this.clearStickyHeaderRowStyles();
+  }
   calciteTableRowSelectListener(event) {
     if (event.composedPath().includes(this.el)) {
       this.setSelectedItems(event.target);
@@ -155,7 +192,41 @@ class Table extends LitElement {
     if (!el) {
       return [];
     }
-    return el.assignedElements({ flatten: true }).filter((el2) => el2.matches("calcite-table-row"));
+    return el.assignedElements({ flatten: true }).filter(isTableRow);
+  }
+  observeTableContainer() {
+    this.tableContainerResizeObserver?.disconnect();
+    const tableContainer = this.tableContainerRef.value;
+    const table = this.tableEl;
+    if (tableContainer) {
+      this.tableContainerResizeObserver?.observe(tableContainer);
+    }
+    if (table) {
+      this.tableContainerResizeObserver?.observe(table);
+    }
+  }
+  scheduleTableContainerOverflowUpdate() {
+    if (this.tableContainerOverflowAnimationFrame !== null) {
+      cancelAnimationFrame(this.tableContainerOverflowAnimationFrame);
+    }
+    this.tableContainerOverflowAnimationFrame = requestAnimationFrame(() => {
+      this.tableContainerOverflowAnimationFrame = null;
+      this.updateTableContainerOverflow();
+    });
+  }
+  applyHeaderRowPositionStyles() {
+    this.clearStickyHeaderRowStyles();
+    const firstHeadRow = this.headRows?.[0];
+    if (!firstHeadRow) {
+      return;
+    }
+    firstHeadRow.style.setProperty("--calcite-internal-table-header-offset", "0");
+    firstHeadRow.style.setProperty("--calcite-internal-table-header-z-index", "2");
+    firstHeadRow.style.setProperty("--calcite-internal-table-header-row-position", this.stickyHeader ? "sticky" : "static");
+  }
+  updateTableContainerOverflow() {
+    const tableContainer = this.tableContainerRef.value;
+    this.tableContainerHasOverflow = !!tableContainer && (tableContainer.scrollHeight > tableContainer.clientHeight || tableContainer.scrollWidth > tableContainer.clientWidth);
   }
   updateRows() {
     const headRows = this.getSlottedRows(this.tableHeadSlotRef.value);
@@ -190,12 +261,15 @@ class Table extends LitElement {
       row.readCellContentsToAT = this.readCellContentsToAT;
       row.lastVisibleRow = allRows?.indexOf(row) === allRows.length - 1;
     });
-    const colCount = headRows[0]?.cellCount || headRows[0]?.querySelectorAll("calcite-table-header")?.length;
+    const colCount = headRows[0]?.cellCount || 0;
     this.colCount = colCount;
     this.headRows = headRows;
     this.bodyRows = bodyRows;
     this.footRows = footRows;
     this.allRows = allRows;
+    this.applyHeaderRowPositionStyles();
+    this.observeTableContainer();
+    this.scheduleTableContainerOverflowUpdate();
     this.handleCurrentPageRange();
     this.updateSelectedItems();
   }
@@ -288,13 +362,15 @@ class Table extends LitElement {
     return html`<div class=${safeClassMap(CSS.container)}>${this.selectionMode !== "none" && this.selectionDisplay !== "none" && this.renderSelectionArea() || ""}<div class=${safeClassMap({
       [CSS.bordered]: this.bordered,
       [CSS.striped]: this.striped,
-      [CSS.tableContainer]: true
-    })}><table .ariaColCount=${this.colCount} .ariaMultiSelectable=${/* workaround to ensure the attr gets removed; we should be able to avoid the ternary when fixed */
+      [CSS.tableContainer]: true,
+      [CSS.tableContainerOverflow]: this.tableContainerHasOverflow
+    })} ${ref(this.tableContainerRef)}><table .ariaColCount=${this.colCount} .ariaMultiSelectable=${/* workaround to ensure the attr gets removed; we should be able to avoid the ternary when fixed */
     this.selectionMode === "multiple" ? "true" : void 0} .ariaRowCount=${this.allRows?.length} class=${safeClassMap({ [CSS.tableFixed]: this.layout === "fixed" })} .role=${this.interactionMode === "interactive" ? "grid" : "table"} ${ref((el) => {
       if (!el) {
         return;
       }
-      render(html`<caption class=${safeClassMap(CSS.assistiveText)}>${this.caption}</caption>${this.renderTHead()}${this.renderTBody()}${this.renderTFoot()}`, el);
+      this.tableEl = el;
+      render(html`<caption class=${safeClassMap(CSS_UTILITY.screenReaderText)}>${this.caption}</caption>${this.renderTHead()}${this.renderTBody()}${this.renderTFoot()}`, el);
     })}></table></div>${this.pageSize > 0 && this.renderPaginationArea() || ""}</div>`;
   }
 }