@esri/calcite-components 5.0.0-next.26 → 5.0.0-next.28

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, isServer, html } from "lit";
@@ -10,10 +10,10 @@ import { n as nodeListToArray, g as getElementDir, t as toAriaBoolean } from "..
 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 { X as XButton } from "../../chunks/XButton.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
+  close: "close",
   container: "container",
   containerBottom: "container--bottom",
   content: "content",
@@ -29,7 +29,7 @@ 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 .content{padding-block:.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-s .x-button{inline-size:1.25rem}.scale-m .content{padding-block:.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-m .x-button{inline-size:1.75rem}.scale-l .content{padding-block:.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.scale-l .x-button{inline-size:2rem}: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--1);line-height:1rem;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(:not([bordered])) .container:hover,:host(:not([bordered])) .container:active{color:var(--calcite-color-text-1)}: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}.content--has-text .icon-start,.content--has-text .calcite-tab-title--icon.icon-start{color:var(--calcite-tab-icon-color-start, var(--calcite-icon-color))}.content--has-text .calcite-tab-title--icon.icon-start .icon-end,.content--has-text .calcite-tab-title--icon.icon-end{color:var(--calcite-tab-icon-color-end, var(--calcite-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)}.x-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:transparent;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;margin-inline-start:var(--calcite-spacing-sm);margin-inline-end:var(--calcite-spacing-px);block-size:calc(100% - var(--calcite-spacing-xxs));color:var(--calcite-tab-close-icon-color, var(--calcite-color-text-3));background-color:var(--calcite-tab-close-icon-background-color, var(--calcite-color-transparent))}.x-button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}.x-button:focus,.x-button:hover,.x-button:active{color:var(--calcite-tab-close-icon-color-press, var(--calcite-color-text-1));background-color:var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3))}:host([bordered]) .container{border-color:transparent;border-inline-width:var(--calcite-spacing-px);border-inline-style:solid}:host([bordered]) .container:hover,:host([bordered]) .container:active{color:var(--calcite-color-text-1)}:host([bordered]) .container .x-button calcite-icon{margin-block-start:var(--calcite-spacing-px)}:host([bordered]) .container .x-button:focus,:host([bordered]) .container .x-button:hover,:host([bordered]) .container .x-button:active{box-shadow:0 2px 0 0 var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3))}: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.container--bottom .x-button{box-shadow:0 -2px 0 0 var(--calcite-tab-close-icon-background-color, var(--calcite-color-transparent))}:host([bordered]) .container.container--bottom .x-button:focus,:host([bordered]) .container.container--bottom .x-button:hover,:host([bordered]) .container.container--bottom .x-button:active{box-shadow:0 -2px 0 0 var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3))}:host([bordered]) .container.container--bottom .x-button calcite-icon{margin-block-end:var(--calcite-spacing-px)}:host([bordered]) .container:not(.container--bottom){border-block-end-style:solid;border-block-end-width:1px}:host([bordered]) .container:not(.container--bottom) .x-button{block-size:calc(100% - var(--calcite-spacing-px));margin-block-start:-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 .x-button{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]) .container{border-color:transparent;color:var(--calcite-tab-text-color, var(--calcite-color-text-1))}: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}@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}.x-button{z-index:var(--calcite-z-index)}.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 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--2);line-height:1rem}.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--1);line-height:1rem}.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:.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}: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--1);line-height:1rem;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(:not([bordered])) .container:hover,:host(:not([bordered])) .container:active{color:var(--calcite-color-text-1)}: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}.content--has-text .icon-start,.content--has-text .calcite-tab-title--icon.icon-start{color:var(--calcite-tab-icon-color-start, var(--calcite-icon-color))}.content--has-text .calcite-tab-title--icon.icon-start .icon-end,.content--has-text .calcite-tab-title--icon.icon-end{color:var(--calcite-tab-icon-color-end, var(--calcite-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:hover,:host([bordered]) .container:active{color:var(--calcite-color-text-1)}:host([bordered]) .container .x-button calcite-icon{margin-block-start:var(--calcite-spacing-px)}:host([bordered]) .container .x-button:focus,:host([bordered]) .container .x-button:hover,:host([bordered]) .container .x-button:active{box-shadow:0 2px 0 0 var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3))}: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.container--bottom .x-button{box-shadow:0 -2px 0 0 var(--calcite-tab-close-icon-background-color, var(--calcite-color-transparent))}:host([bordered]) .container.container--bottom .x-button:focus,:host([bordered]) .container.container--bottom .x-button:hover,:host([bordered]) .container.container--bottom .x-button:active{box-shadow:0 -2px 0 0 var(--calcite-tab-close-icon-background-color-press, var(--calcite-color-foreground-3))}:host([bordered]) .container.container--bottom .x-button calcite-icon{margin-block-end:var(--calcite-spacing-px)}:host([bordered]) .container:not(.container--bottom){border-block-end-style:solid;border-block-end-width:1px}:host([bordered]) .container:not(.container--bottom) .x-button{block-size:calc(100% - var(--calcite-spacing-px));margin-block-start:-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 .x-button{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]) .container{border-color:transparent;color:var(--calcite-tab-text-color, var(--calcite-color-text-1))}: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-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);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}`;
 class TabTitle extends LitElement {
   constructor() {
     super();
@@ -215,7 +215,7 @@ class TabTitle extends LitElement {
   }
   renderCloseButton() {
     const { closable, messages } = this;
-    return closable ? keyed("close-button", XButton({ disabled: false, focusable: true, label: messages.close, onClick: this.closeClickHandler, ref: this.closeButtonRef, round: false, scale: this.scale, title: messages.close })) : null;
+    return closable ? keyed("close-button", html`<calcite-action class=${safeClassMap(CSS.close)} icon=x @click=${this.closeClickHandler} .scale=${this.scale} .text=${messages.close} ${ref(this.closeButtonRef)}></calcite-action>`) : null;
   }
 }
 customElement("calcite-tab-title", TabTitle);

package/dist/components/calcite-tab-title/index.d.ts

@@ -1,2 +1,3 @@
 import "../calcite-icon/index.js";
+import "../calcite-action/index.js";
 export * from "./customElement.js";

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

@@ -1,2 +1,3 @@
 import "../calcite-icon/index.js";
+import "../calcite-action/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-tab-title/resources.d.ts

@@ -1,5 +1,6 @@
 import { Scale } from '../interfaces';
 export declare const CSS: {
+    close: string;
     container: string;
     containerBottom: string;
     content: string;

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { isServer, css, nothing, html } from "lit";
 import { render } from "lit-html";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";

package/dist/components/calcite-text-area/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { css, html } from "lit";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { ref } from "lit/directives/ref.js";

package/dist/components/calcite-tile-group/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { css, html } from "lit";

package/dist/components/calcite-time-picker/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";

package/dist/components/calcite-tree-item/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.26 */
+v5.0.0-next.28 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";

package/dist/components/interfaces.d.ts

@@ -2,6 +2,7 @@ import { LuminaJsx } from '@arcgis/lumina';
 import { CamelCase, ReadonlyTuple } from 'type-fest';
 export type Alignment = "start" | "center" | "end";
 export type Appearance = "solid" | "outline" | "outline-fill" | "transparent";
+export type Axis = "inline" | "block";
 export interface Dimensions {
     width: number;
     height: number;

package/dist/controllers/useSizeOverride.d.ts

@@ -0,0 +1,44 @@
+interface AxisBounds {
+    min: number | null;
+    max: number | null;
+}
+interface SizeOverrideContext {
+    /**
+     * Returns both min and max allowed sizes (pixels) for the axis "inline" and "block". Use null for no bound.
+     */
+    readonly getBounds?: () => {
+        inline: AxisBounds;
+        block: AxisBounds;
+    };
+    /**
+     * Callback invoked after an override is applied or cleared so the host can sync internal state.
+     * The value will be a rounded pixel number or null if cleared.
+     */
+    readonly targetElement: {
+        value?: HTMLElement | null;
+    };
+}
+export interface UseSizeOverride {
+    /**
+     * Applies (or clears) an inline/block size override in one call.
+     * Pass `null` to clear size overrides.
+     *
+     * Use when the component needs to set inline styles
+     * to override sizing from user resizing via drag or keyboard.
+     *
+     * Min/max define the allowed range. Any requested size outside that range gets clamped.
+     *
+     */
+    resize: (sizes: {
+        inline?: number | null;
+        block?: number | null;
+    }) => {
+        inline?: number | null;
+        block?: number | null;
+    };
+}
+/**
+ * Creates a controller that manages size overrides on a host element.
+ */
+export declare const useSizeOverride: (context: SizeOverrideContext) => UseSizeOverride;
+export {};

package/dist/docs/api.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-11T22:08:27",
+  "timestamp": "2025-12-15T19:01:36",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
     "version": "5.0.0-next.76",
@@ -14100,6 +14100,103 @@
               "attribute": "placeholder-icon-flip-rtl",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "placement",
+              "description": "Determines where the component will be positioned relative to the `referenceElement`.",
+              "type": {
+                "text": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"leading\" | \"leading-end\" | \"leading-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | \"trailing\" | \"trailing-end\" | \"trailing-start\"",
+                "values": [
+                  {
+                    "value": "auto",
+                    "type": "string"
+                  },
+                  {
+                    "value": "auto-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "auto-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "bottom",
+                    "type": "string"
+                  },
+                  {
+                    "value": "bottom-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "bottom-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "leading",
+                    "type": "string"
+                  },
+                  {
+                    "value": "leading-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "leading-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "left",
+                    "type": "string"
+                  },
+                  {
+                    "value": "left-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "left-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "right",
+                    "type": "string"
+                  },
+                  {
+                    "value": "right-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "right-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "top",
+                    "type": "string"
+                  },
+                  {
+                    "value": "top-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "top-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "trailing",
+                    "type": "string"
+                  },
+                  {
+                    "value": "trailing-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "trailing-start",
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"bottom-start\"",
+              "attribute": "placement",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "readOnly",
@@ -14650,6 +14747,101 @@
               "default": "false",
               "fieldName": "placeholderIconFlipRtl"
             },
+            {
+              "name": "placement",
+              "description": "Determines where the component will be positioned relative to the `referenceElement`.",
+              "type": {
+                "text": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"leading\" | \"leading-end\" | \"leading-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\" | \"trailing\" | \"trailing-end\" | \"trailing-start\"",
+                "values": [
+                  {
+                    "value": "auto",
+                    "type": "string"
+                  },
+                  {
+                    "value": "auto-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "auto-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "bottom",
+                    "type": "string"
+                  },
+                  {
+                    "value": "bottom-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "bottom-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "leading",
+                    "type": "string"
+                  },
+                  {
+                    "value": "leading-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "leading-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "left",
+                    "type": "string"
+                  },
+                  {
+                    "value": "left-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "left-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "right",
+                    "type": "string"
+                  },
+                  {
+                    "value": "right-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "right-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "top",
+                    "type": "string"
+                  },
+                  {
+                    "value": "top-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "top-start",
+                    "type": "string"
+                  },
+                  {
+                    "value": "trailing",
+                    "type": "string"
+                  },
+                  {
+                    "value": "trailing-end",
+                    "type": "string"
+                  },
+                  {
+                    "value": "trailing-start",
+                    "type": "string"
+                  }
+                ]
+              },
+              "default": "\"bottom-start\"",
+              "fieldName": "placement"
+            },
             {
               "name": "read-only",
               "description": "When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.",
@@ -15203,7 +15395,7 @@
             {
               "kind": "field",
               "name": "value",
-              "description": "The component's value.",
+              "description": "The component's value. Falls back to `heading` if not provided.",
               "type": {
                 "text": "any",
                 "values": [
@@ -15212,7 +15404,8 @@
                   }
                 ]
               },
-              "attribute": "value"
+              "attribute": "value",
+              "reflects": true
             }
           ],
           "attributes": [
@@ -15369,7 +15562,7 @@
             },
             {
               "name": "value",
-              "description": "The component's value.",
+              "description": "The component's value. Falls back to `heading` if not provided.",
               "type": {
                 "text": "any",
                 "values": [
@@ -44175,6 +44368,33 @@
               "attribute": "resizable",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "updateSize",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "{\n    inline?: number;\n    block?: number;\n}"
+                  }
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": "Promise<void>",
+                  "references": [
+                    {
+                      "name": "Promise",
+                      "package": "typescript",
+                      "module": "lib/lib.es5.d.ts",
+                      "start": 0,
+                      "end": 7
+                    }
+                  ]
+                }
+              },
+              "signature": "(size: { inline?: number | null; block?: number | null; }): Promise<void>"
+            },
             {
               "kind": "field",
               "name": "width",