@esri/calcite-components 3.0.0-next.99 → 3.0.1

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

@@ -6,11 +6,9 @@ import { c as d } from "../../chunks/observers.js";
 import { r as m } from "../../chunks/dom.js";
 import { u as h } from "../../chunks/useT9n.js";
 import { css as f } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
 const n = {
   scrim: "scrim",
   content: "content"

package/dist/components/calcite-segmented-control/customElement.d.ts

@@ -30,7 +30,10 @@ export declare class SegmentedControl extends LitElement {
      * Required to pass the component's `value` on form submission.
      */
     name: string;
-    /** When `true`, the component must have a value in order for the form to submit. */
+    /**
+     * When `true` and the component resides in a form,
+     * the component must have a value in order for the form to submit.
+     */
     required: boolean;
     /** Specifies the size of the component. */
     scale: Scale;

package/dist/components/calcite-segmented-control/customElement.js

@@ -5,20 +5,18 @@ import { g as w, s as y } from "../../chunks/dom.js";
 import { c as I, a as b, d as C, H as k } from "../../chunks/form.js";
 import { u as x, I as S } from "../../chunks/interactive.js";
 import { c as A, d as D } from "../../chunks/label.js";
-import { c as M, s as L, a as E } from "../../chunks/loadable.js";
-import { V as U } from "../../chunks/Validation.js";
-import { css as $ } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
-const z = {
+import { c as M } from "../../chunks/loadable.js";
+import { V as E } from "../../chunks/Validation.js";
+import { css as L } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
+const U = {
   itemWrapper: "item-wrapper"
 }, d = {
   validationMessage: "segmentedControlValidationMessage"
-}, F = $`: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:flex;flex-direction:column}.item-wrapper{display:flex;background-color:var(--calcite-color-foreground-1);inline-size:fit-content;outline:1px solid var(--calcite-color-border-input);outline-offset:-1px}:host([appearance=outline])>.item-wrapper{background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([layout=vertical])>.item-wrapper{flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full])>.item-wrapper{inline-size:100%;min-inline-size:fit-content}:host([width=full])>.item-wrapper ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical])>.item-wrapper ::slotted(calcite-segmented-control-item){justify-content:flex-start}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
-class H extends f {
+}, $ = L`: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:flex;flex-direction:column}.item-wrapper{display:flex;background-color:var(--calcite-color-foreground-1);inline-size:fit-content;outline:1px solid var(--calcite-segmented-control-border-color, var(--calcite-color-border-input));outline-offset:-1px}:host([appearance=outline])>.item-wrapper{background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([layout=vertical])>.item-wrapper{flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full])>.item-wrapper{inline-size:100%;min-inline-size:fit-content}:host([width=full])>.item-wrapper ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical])>.item-wrapper ::slotted(calcite-segmented-control-item){justify-content:flex-start}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+class z extends f {
   // #endregion
   // #region Lifecycle
   constructor() {
@@ -40,7 +38,7 @@ class H extends f {
     this.properties = { appearance: 3, disabled: 7, form: 3, layout: 3, name: 3, required: 7, scale: 3, selectedItem: 0, status: 3, validationIcon: [3, { converter: g }], validationMessage: 1, validity: 0, value: 1, width: 3 };
   }
   static {
-    this.styles = F;
+    this.styles = $;
   }
   // #endregion
   // #region Public Methods
@@ -52,7 +50,6 @@ class H extends f {
     super.connectedCallback(), A(this), I(this);
   }
   load() {
-    L(this);
   }
   willUpdate(e) {
     (e.has("appearance") && (this.hasUpdated || this.appearance !== "solid") || e.has("layout") && (this.hasUpdated || this.layout !== "horizontal") || e.has("scale") && (this.hasUpdated || this.scale !== "m")) && this.handleItemPropChange(), e.has("value") && (this.hasUpdated || this.value !== null) && this.valueHandler(this.value), e.has("selectedItem") && this.handleSelectedItemChange(this.selectedItem, e.get("selectedItem"));
@@ -61,7 +58,7 @@ class H extends f {
     x(this);
   }
   loaded() {
-    b(this, this.value), E(this);
+    b(this, this.value);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), D(this), C(this);
@@ -148,10 +145,10 @@ class H extends f {
   // #endregion
   // #region Rendering
   render() {
-    return this.el.role = "radiogroup", c`<div aria-errormessage=${d.validationMessage} .ariaInvalid=${this.status === "invalid"} class=${v(z.itemWrapper)}>${S({ disabled: this.disabled, children: c`<slot @slotchange=${this.handleDefaultSlotChange}></slot>${k({ component: this })}` })}</div>${this.validationMessage && this.status === "invalid" ? U({ icon: this.validationIcon, id: d.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}`;
+    return this.el.role = "radiogroup", c`<div aria-errormessage=${d.validationMessage} .ariaInvalid=${this.status === "invalid"} class=${v(U.itemWrapper)}>${S({ disabled: this.disabled, children: c`<slot @slotchange=${this.handleDefaultSlotChange}></slot>${k({ component: this })}` })}</div>${this.validationMessage && this.status === "invalid" ? E({ icon: this.validationIcon, id: d.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}`;
   }
 }
-p("calcite-segmented-control", H);
+p("calcite-segmented-control", z);
 export {
-  H as SegmentedControl
+  z as SegmentedControl
 };

package/dist/components/calcite-segmented-control-item/customElement.js

@@ -1,25 +1,23 @@
 import { c as s } from "../../chunks/runtime.js";
-import { html as n } from "lit";
-import { LitElement as d, createEvent as h, safeClassMap as r } from "@arcgis/lumina";
+import { html as l } from "lit";
+import { LitElement as d, createEvent as h, safeClassMap as i } from "@arcgis/lumina";
 import { r as m, t as g } from "../../chunks/dom.js";
 import { css as b } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
 const u = {
   input: "input"
-}, t = {
+}, o = {
   label: "label",
-  labelScale: (i) => `label--scale-${i}`,
+  labelScale: (c) => `label--scale-${c}`,
   labelHorizontal: "label--horizontal",
   labelOutline: "label--outline",
   labelOutlineFill: "label--outline-fill",
   icon: "icon",
   iconSolo: "icon--solo"
-}, f = b`:host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out,border-color var(--calcite-animation-timing) ease-in-out}:host label{pointer-events:none;margin:.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-color-text-3);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out,border-color var(--calcite-internal-animation-timing-fast) ease-in-out,color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}:host{outline-color:transparent}:host(:focus){outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:-1px}.label--scale-s{padding-inline:.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-block:.125rem}.label--scale-m{padding-inline:.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-block:.375rem}.label--scale-l{padding-inline:1rem;padding-block:.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:hover) label{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}:host(:active) label{background-color:var(--calcite-color-foreground-3)}:host([checked]) label{cursor:default;border-color:var(--calcite-color-brand);background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{border-color:var(--calcite-color-brand);background-color:var(--calcite-color-foreground-1);box-shadow:inset 0 0 0 1px var(--calcite-color-brand);color:var(--calcite-color-brand)}:host([checked]) .label--outline{background-color:transparent}::slotted(input){display:none}@media (forced-colors: active){:host([checked]) label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) label:not([class~=label--outline]) .icon{color:highlightText}}.icon{position:relative;margin:0;display:inline-flex;line-height:inherit;margin-inline-start:var(--calcite-internal-segmented-control-icon-margin-start);margin-inline-end:var(--calcite-internal-segmented-control-icon-margin-end)}:host([icon-start]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-end: .5rem}:host([icon-end]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-start: .5rem}:host([icon-start]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-end: .75rem}:host([icon-end]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-start: .75rem}:host([icon-start]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-end: 1rem}:host([icon-end]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-start: 1rem}.label .icon--solo{--calcite-internal-segmented-control-icon-margin-start: 0;--calcite-internal-segmented-control-icon-margin-end: 0}:host([hidden]){display:none}[hidden]{display:none}`;
-class p extends d {
+}, f = b`:host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);outline-color:transparent;transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out,border-color var(--calcite-animation-timing) ease-in-out}.label{pointer-events:none;margin:.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-segmented-control-color, var(--calcite-color-text-3));background-color:var(--calcite-segmented-control-background-color);box-shadow:var(--calcite-segmented-control-shadow);border-color:var(--calcite-segmented-control-border-color);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out,border-color var(--calcite-internal-animation-timing-fast) ease-in-out,color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}:host(:focus){outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));outline-offset:-1px}.label--scale-s{padding-inline:.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-block:.125rem}.label--scale-m{padding-inline:.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-block:.375rem}.label--scale-l{padding-inline:1rem;padding-block:.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:hover) .label{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-2));color:var(--calcite-segmented-control-color, var(--calcite-color-text-1))}:host(:active) .label{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-3))}:host([checked]) .label{cursor:default;background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-brand));border-color:var(--calcite-segmented-control-border-color, var(--calcite-color-brand));color:var(--calcite-segmented-control-color, var(--calcite-color-text-inverse))}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{background-color:var(--calcite-segmented-control-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-segmented-control-border-color, var(--calcite-color-brand));box-shadow:var(--calcite-segmented-control-shadow, inset 0 0 0 1px var(--calcite-color-brand));color:var(--calcite-segmented-control-color, var(--calcite-color-brand))}:host([checked]) .label--outline{background-color:var(--calcite-segmented-control-background-color, transparent)}::slotted(input){display:none}@media (forced-colors: active){:host([checked]) .label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) .label:not([class~=label--outline]) .icon{color:highlightText}}.icon{position:relative;margin:0;display:inline-flex;line-height:inherit;margin-inline-start:var(--calcite-internal-segmented-control-icon-margin-start);margin-inline-end:var(--calcite-internal-segmented-control-icon-margin-end);--calcite-icon-color: var(--calcite-segmented-control-icon-color)}:host([icon-start]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-end: .5rem}:host([icon-end]) .label--scale-s{--calcite-internal-segmented-control-icon-margin-start: .5rem}:host([icon-start]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-end: .75rem}:host([icon-end]) .label--scale-m{--calcite-internal-segmented-control-icon-margin-start: .75rem}:host([icon-start]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-end: 1rem}:host([icon-end]) .label--scale-l{--calcite-internal-segmented-control-icon-margin-start: 1rem}.label .icon--solo{--calcite-internal-segmented-control-icon-margin-start: 0;--calcite-internal-segmented-control-icon-margin-end: 0}:host([hidden]){display:none}[hidden]{display:none}`;
+class v extends d {
   constructor() {
     super(...arguments), this.hasSlottedContent = !1, this.appearance = "solid", this.checked = !1, this.iconFlipRtl = !1, this.layout = "horizontal", this.scale = "m", this.calciteInternalSegmentedControlItemChange = h({ cancelable: !1 });
   }
@@ -41,33 +39,33 @@ class p extends d {
   }
   // #endregion
   // #region Rendering
-  renderIcon(e, l = !1) {
-    return e ? n`<calcite-icon class=${r({
-      [t.icon]: !0,
-      [t.iconSolo]: l
+  renderIcon(e, t = !1) {
+    return e ? l`<calcite-icon class=${i({
+      [o.icon]: !0,
+      [o.iconSolo]: t
     })} .flipRtl=${this.iconFlipRtl} .icon=${e} scale=s></calcite-icon>` : null;
   }
   render() {
-    const { appearance: e, checked: l, layout: o, scale: a, value: c } = this;
-    return this.el.ariaChecked = g(l), this.el.ariaLabel = c, this.el.role = "radio", n`<label class=${r({
-      [t.label]: !0,
-      [t.labelScale(a)]: !0,
-      [t.labelHorizontal]: o === "horizontal",
-      [t.labelOutline]: e === "outline",
-      [t.labelOutlineFill]: e === "outline-fill"
+    const { appearance: e, checked: t, layout: n, scale: a, value: r } = this;
+    return this.el.ariaChecked = g(t), this.el.ariaLabel = r, this.el.role = "radio", l`<label class=${i({
+      [o.label]: !0,
+      [o.labelScale(a)]: !0,
+      [o.labelHorizontal]: n === "horizontal",
+      [o.labelOutline]: e === "outline",
+      [o.labelOutlineFill]: e === "outline-fill"
     })}>${this.renderContent()}</label>`;
   }
   renderContent() {
-    const { hasSlottedContent: e, iconEnd: l, iconStart: o } = this, a = o || l;
-    return !e && a ? [this.renderIcon(a, !0), n`<slot @slotchange=${this.handleSlotChange}></slot>`] : [
-      this.renderIcon(o),
-      n`<slot @slotchange=${this.handleSlotChange}></slot>`,
-      n`<slot name=${u.input}></slot>`,
-      this.renderIcon(l)
+    const { hasSlottedContent: e, iconEnd: t, iconStart: n } = this, a = n || t;
+    return !e && a ? [this.renderIcon(a, !0), l`<slot @slotchange=${this.handleSlotChange}></slot>`] : [
+      this.renderIcon(n),
+      l`<slot @slotchange=${this.handleSlotChange}></slot>`,
+      l`<slot name=${u.input}></slot>`,
+      this.renderIcon(t)
     ];
   }
 }
-s("calcite-segmented-control-item", p);
+s("calcite-segmented-control-item", v);
 export {
-  p as SegmentedControlItem
+  v as SegmentedControlItem
 };

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

@@ -32,7 +32,10 @@ export declare class Select extends LitElement {
      * Required to pass the component's `value` on form submission.
      */
     name: string;
-    /** When `true`, the component must have a value in order for the form to submit. */
+    /**
+     * When `true` and the component resides in a form,
+     * the component must have a value in order for the form to submit.
+     */
     required: boolean;
     /** Specifies the size of the component. */
     scale: Scale;

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

@@ -6,17 +6,15 @@ import { b as v } from "../../chunks/dom.js";
 import { c as f, a as g, d as b, H as E } from "../../chunks/form.js";
 import { u as w, I as x } from "../../chunks/interactive.js";
 import { c as C, d as I, g as y } from "../../chunks/label.js";
-import { c as N, s as z, a as S } from "../../chunks/loadable.js";
-import { c as O } from "../../chunks/observers.js";
-import { g as k } from "../../chunks/component.js";
-import { V as T } from "../../chunks/Validation.js";
-import { css as L } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.99
-*/
-const $ = L`:host{--calcite-icon-size: 1rem;--calcite-spacing-eighth: .125rem;--calcite-spacing-quarter: .25rem;--calcite-spacing-half: .5rem;--calcite-spacing-three-quarters: .75rem;--calcite-spacing: 1rem;--calcite-spacing-plus-quarter: 1.25rem;--calcite-spacing-plus-half: 1.5rem;--calcite-spacing-double: 2rem;--calcite-menu-min-width: 10rem;--calcite-header-min-height: 3rem;--calcite-footer-min-height: 3rem}: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:flex;flex-direction:column;font-size:var(--calcite-select-font-size);font-weight:var(--calcite-internal-select-font-weight, var(--calcite-font-weight-regular))}.wrapper{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width);block-size:var(--calcite-internal-select-block-size, 32px)}.wrapper:focus-within .icon,.wrapper:active .icon,.wrapper:hover .icon{color:var(--calcite-select-icon-color-hover, var(--calcite-color-text-1))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-select-font-size: var(--calcite-font-size--2);--calcite-select-spacing-inline: .5rem 2rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 24px}:host([scale=m]){--calcite-internal-select-font-size: var(--calcite-font-size--1);--calcite-select-spacing-inline: .75rem 2.5rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-select-font-size: var(--calcite-font-size-0);--calcite-select-spacing-inline: 1rem 3rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-lg);--calcite-internal-select-block-size: 44px}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0;box-sizing:border-box;inline-size:100%;cursor:pointer;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0;border-style:solid;background-color:var(--calcite-color-foreground-1);font-family:inherit;outline-color:transparent;font-weight:inherit;font-size:var(--calcite-select-font-size, var(--calcite-internal-select-font-size));color:var(--calcite-select-text-color, var(--calcite-color-text-2));border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-width:var(--calcite-select-internal-border-width, var(--calcite-border-width-sm));padding-inline:var(--calcite-select-spacing-inline);padding-block:var(--calcite-internal-select-spacing-block);border-inline-end-width:0px;line-height:var(--calcite-select-line-height, normal)}.select:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}select:disabled{border-color:var(--calcite-color-border-input);--tw-bg-opacity: 1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:transparent;color:var(--calcite-color-text-2);inset-inline-end:0px;border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-inline-width:0px var(--calcite-select-internal-icon-border-inline-end-width, 1px);padding-inline:var(--calcite-internal-select-icon-container-padding-inline)}.icon-container .icon{color:var(--calcite-select-icon-color, var(--calcite-color-text-3))}:host([status=invalid]) select,:host([status=invalid]) .icon-container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) select:focus,:host([status=invalid]) .icon-container:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.select:focus~.icon-container{border-color:transparent}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`, n = {
+import { c as N } from "../../chunks/loadable.js";
+import { c as z } from "../../chunks/observers.js";
+import { g as S } from "../../chunks/component.js";
+import { V as O } from "../../chunks/Validation.js";
+import { css as k } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.1 */
+const T = k`:host{--calcite-icon-size: 1rem;--calcite-spacing-eighth: .125rem;--calcite-spacing-quarter: .25rem;--calcite-spacing-half: .5rem;--calcite-spacing-three-quarters: .75rem;--calcite-spacing: 1rem;--calcite-spacing-plus-quarter: 1.25rem;--calcite-spacing-plus-half: 1.5rem;--calcite-spacing-double: 2rem;--calcite-menu-min-width: 10rem;--calcite-header-min-height: 3rem;--calcite-footer-min-height: 3rem}: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:flex;flex-direction:column;font-size:var(--calcite-select-font-size);font-weight:var(--calcite-internal-select-font-weight, var(--calcite-font-weight-regular))}.wrapper{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width);block-size:var(--calcite-internal-select-block-size, 32px)}.wrapper:focus-within .icon,.wrapper:active .icon,.wrapper:hover .icon{color:var(--calcite-select-icon-color-hover, var(--calcite-color-text-1))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-select-font-size: var(--calcite-font-size--2);--calcite-select-spacing-inline: .5rem 2rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 24px}:host([scale=m]){--calcite-internal-select-font-size: var(--calcite-font-size--1);--calcite-select-spacing-inline: .75rem 2.5rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-select-font-size: var(--calcite-font-size-0);--calcite-select-spacing-inline: 1rem 3rem;--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-lg);--calcite-internal-select-block-size: 44px}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0;box-sizing:border-box;inline-size:100%;cursor:pointer;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0;border-style:solid;background-color:var(--calcite-color-foreground-1);font-family:inherit;outline-color:transparent;font-weight:inherit;font-size:var(--calcite-select-font-size, var(--calcite-internal-select-font-size));color:var(--calcite-select-text-color, var(--calcite-color-text-2));border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-width:var(--calcite-select-internal-border-width, var(--calcite-border-width-sm));padding-inline:var(--calcite-select-spacing-inline);padding-block:var(--calcite-internal-select-spacing-block);border-inline-end-width:0;line-height:var(--calcite-internal-select-line-height, normal)}.select:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}select:disabled{border-color:var(--calcite-color-border-input);--tw-bg-opacity: 1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:transparent;color:var(--calcite-color-text-2);inset-inline-end:0px;border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-inline-width:0px var(--calcite-select-internal-icon-border-inline-end-width, 1px);padding-inline:var(--calcite-internal-select-icon-container-padding-inline)}.icon-container .icon{color:var(--calcite-select-icon-color, var(--calcite-color-text-3))}:host([status=invalid]) select,:host([status=invalid]) .icon-container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) select:focus,:host([status=invalid]) .icon-container:focus{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.select:focus~.icon-container{border-color:transparent}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`, n = {
   icon: "icon",
   iconContainer: "icon-container",
   select: "select",
@@ -27,14 +25,14 @@ const $ = L`:host{--calcite-icon-size: 1rem;--calcite-spacing-eighth: .125rem;--
 function s(l) {
   return l.tagName === "CALCITE-OPTION";
 }
-function A(l) {
+function $(l) {
   return l.tagName === "CALCITE-OPTION-GROUP";
 }
-class F extends p {
+class A extends p {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.componentToNativeEl = /* @__PURE__ */ new Map(), this.mutationObserver = O("mutation", () => this.populateInternalSelect()), this.disabled = !1, this.required = !1, this.scale = "m", this.status = "idle", this.validity = {
+    super(), this.componentToNativeEl = /* @__PURE__ */ new Map(), this.mutationObserver = z("mutation", () => this.populateInternalSelect()), this.disabled = !1, this.required = !1, this.scale = "m", this.status = "idle", this.validity = {
       valid: !1,
       badInput: !1,
       customError: !1,
@@ -52,7 +50,7 @@ class F extends p {
     this.properties = { disabled: 7, form: 3, label: 1, name: 3, required: 7, scale: 3, selectedOption: 0, status: 3, validationIcon: [3, { converter: u }], validationMessage: 1, validity: 0, value: 1, width: 3 };
   }
   static {
-    this.styles = $;
+    this.styles = T;
   }
   // #endregion
   // #region Public Methods
@@ -69,7 +67,6 @@ class F extends p {
     }), C(this), f(this);
   }
   load() {
-    z(this);
   }
   willUpdate(e) {
     e.has("value") && (this.hasUpdated || this.value !== null) && this.updateItemsFromValue(this.value), e.has("selectedOption") && (this.value = this.selectedOption?.value);
@@ -78,7 +75,7 @@ class F extends p {
     w(this);
   }
   loaded() {
-    S(this), typeof this.value == "string" && this.updateItemsFromValue(this.value), this.populateInternalSelect();
+    typeof this.value == "string" && this.updateItemsFromValue(this.value), this.populateInternalSelect();
     const e = this.selectEl.selectedOptions[0];
     this.selectFromNativeOption(e), g(this, this.selectedOption?.value ?? "");
   }
@@ -131,7 +128,7 @@ class F extends p {
       const t = document.createElement("option");
       return this.updateNativeElement(e, t), this.componentToNativeEl.set(e, t), t;
     }
-    if (A(e)) {
+    if ($(e)) {
       const t = document.createElement("optgroup");
       return this.updateNativeElement(e, t), Array.from(e.children).forEach((i) => {
         const a = this.toNativeElement(i);
@@ -151,14 +148,14 @@ class F extends p {
   // #endregion
   // #region Rendering
   renderChevron() {
-    return o`<div class=${c(n.iconContainer)}><calcite-icon class=${c(n.icon)} icon=chevron-down .scale=${k(this.scale)}></calcite-icon></div>`;
+    return o`<div class=${c(n.iconContainer)}><calcite-icon class=${c(n.icon)} icon=chevron-down .scale=${S(this.scale)}></calcite-icon></div>`;
   }
   render() {
     const { disabled: e } = this;
-    return x({ disabled: e, children: o`<div class=${c(n.wrapper)}><select aria-errormessage=${r.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${y(this)} class=${c(n.select)} .disabled=${e} @change=${this.handleInternalSelectChange} ${h(this.storeSelectRef)}><slot></slot></select>${this.renderChevron()}${E({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? T({ icon: this.validationIcon, id: r.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    return x({ disabled: e, children: o`<div class=${c(n.wrapper)}><select aria-errormessage=${r.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${y(this)} class=${c(n.select)} .disabled=${e} @change=${this.handleInternalSelectChange} ${h(this.storeSelectRef)}><slot></slot></select>${this.renderChevron()}${E({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? O({ icon: this.validationIcon, id: r.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
-d("calcite-select", F);
+d("calcite-select", A);
 export {
-  F as Select
+  A as Select
 };

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

@@ -1,12 +1,13 @@
 /// <reference types="../../index.d.ts" />
 import { PropertyValues } from 'lit';
 import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { FocusTrap, FocusTrapComponent } from '../../utils/focusTrapComponent';
 import { LoadableComponent } from '../../utils/loadable';
 import { OpenCloseComponent } from '../../utils/openCloseComponent';
 import { Height, LogicalFlowPosition, Scale, Width } from '../interfaces';
+import { FocusTrapOptions } from '../../controllers/useFocusTrap';
 import { DisplayMode, ResizeValues } from './interfaces';
 
+/** @slot - A slot for adding custom content. */
 export declare class Sheet extends LitElement {
     private messages: Partial<{
         resizeEnabled: string;
@@ -28,6 +29,15 @@ export declare class Sheet extends LitElement {
     escapeDisabled: boolean;
     /** When `true`, prevents focus trapping. */
     focusTrapDisabled: boolean;
+    /**
+     * Specifies custom focus trap configuration on the component, where
+     *
+     * `"allowOutsideClick`" allows outside clicks,
+     * `"initialFocus"` enables initial focus,
+     * `"returnFocusOnDeactivate"` returns focus when not active, and
+     * `"extraContainers"` specifies additional focusable elements external to the trap (e.g., 3rd-party components appending elements to the document body).
+     */
+    focusTrapOptions: Partial<FocusTrapOptions>;
     /**
      * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
      *
@@ -64,8 +74,12 @@ export declare class Sheet extends LitElement {
     width: Extract<Width, Scale>;
     /** Sets focus on the component's "close" button - the first focusable item. */
     setFocus(): Promise<void>;
-    /** Updates the element(s) that are used within the focus-trap of the component. */
-    updateFocusTrapElements(): Promise<void>;
+    /**
+     * Updates the element(s) that are included in the focus-trap of the component.
+     *
+     * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
+     */
+    updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
     /** Fires when the component is requested to be closed and before the closing transition begins. */
     readonly calciteSheetBeforeClose: TargetedEvent<this, undefined>;
     /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */