@crowdstrike/glide-core 0.29.2 → 0.30.0

package/dist/input.styles.js

@@ -1,6 +1,10 @@
-import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
-    ${visuallyHidden(".character-count .hidden")}
-  `,css`
+import { css } from 'lit';
+import visuallyHidden from './styles/visually-hidden.js';
+export default [
+    css `
+    ${visuallyHidden('.character-count .hidden')}
+  `,
+    css `
     .meta {
       column-gap: var(--glide-core-spacing-base-xs);
       display: flex;
@@ -118,6 +122,22 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
           outline: 2px solid var(--glide-core-color-interactive-stroke-focus);
         }
       }
+
+      &[type='color']::-webkit-color-swatch {
+        border: none;
+        border-radius: var(--glide-core-rounding-base-radius-xxs);
+      }
+
+      /*
+        Unfortunately Firefox requires a different selector. It also
+        sets the element to 100% height of its container, so we set
+        a fixed block-size to match the other browsers.
+      */
+      &[type='color']::-moz-color-swatch {
+        block-size: 1.5rem;
+        border: none;
+        border-radius: var(--glide-core-rounding-base-radius-xxs);
+      }
     }
 
     .suffix-icon {
@@ -152,4 +172,5 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
     .empty .clear-icon-button {
       visibility: hidden;
     }
-  `];
+  `,
+];

package/dist/label.js

@@ -1 +1,303 @@
-var __decorate=this&&this.__decorate||function(t,e,o,i){var l,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(l=t[a])&&(s=(r<3?l(s):r>3?l(e,o,s):l(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s};import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import styles from"./label.styles.js";import{LocalizeController}from"./library/localize.js";import assertSlot from"./library/assert-slot.js";import onResize from"./library/on-resize.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let Label=class Label extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.isLabelTooltip=!1,this.#t=createRef(),this.#e=createRef(),this.#o=createRef(),this.#i=new LocalizeController(this),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split,vertical:"vertical"===this.orientation})}" part="private-tooltips">${when(this.tooltip,(()=>html`<glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:!!this.tooltip})}" label="${ifDefined(this.tooltip)}" placement="${"vertical"===this.orientation?"right":"bottom"}"><button aria-label="${this.#i.term("tooltip")}" class="optional-tooltip-target" slot="target" type="button">${icons.information}</button></glide-core-tooltip>`))}<glide-core-tooltip class="label-tooltip" data-test="label-tooltip" label="${this.label??""}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" @mouseover="${this.#r}" ${ref(this.#o)}><slot ${assertSlot()} ${ref(this.#t)}></slot></div></glide-core-tooltip>${this.required?html`<span aria-hidden="true" class="required-symbol" data-test="required-symbol">*</span>`:""}</div><div class="control-and-summary" part="private-control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" ${assertSlot()}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#s}" ${ref(this.#l)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:!!this.tooltip})}" id="description" name="description" ${onResize(this.#a.bind(this))} ${ref(this.#e)}></slot></div>`}#t;#e;#o;#i;#l;#a(){this.hasDescription=Boolean(this.#e.value&&this.#e.value.offsetHeight>0)}#r(){const t=this.#t.value?.assignedElements().at(0);t&&this.#o.value&&(this.isLabelTooltip=t.getBoundingClientRect().width>this.#o.value.getBoundingClientRect().width)}#s(){const t=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"hide",void 0),__decorate([property({reflect:!0,useDefault:!0})],Label.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"required",void 0),__decorate([property()],Label.prototype,"split",void 0),__decorate([property()],Label.prototype,"tooltip",void 0),__decorate([property()],Label.prototype,"label",void 0),__decorate([state()],Label.prototype,"hasDescription",void 0),__decorate([state()],Label.prototype,"hasSummarySlot",void 0),__decorate([state()],Label.prototype,"isLabelTooltip",void 0),Label=__decorate([customElement("glide-core-private-label"),final],Label);export default Label;const icons={information:html`<svg aria-hidden="true" style="${styleMap({height:"1rem",width:"1rem"})}" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import './tooltip.js';
+import { html, LitElement } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { when } from 'lit/directives/when.js';
+import styles from './label.styles.js';
+import { LocalizeController } from './library/localize.js';
+import assertSlot from './library/assert-slot.js';
+import onResize from './library/on-resize.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+/**
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [error=false]
+ * @attr {boolean} [hide=false]
+ * @attr {string} [label]
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {boolean} [required=false]
+ * @attr {'left'|'middle'|'right'} [split]
+ * @attr {string} [tooltip]
+ *
+ * @slot {HTMLLabelElement}
+ * @slot {Element} [control] - The element with which the label is associated
+ * @slot {Element | string} [description] - Additional information or context
+ * @slot {Element | string} [summary] - Additional information or context
+ */
+let Label = class Label extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.error = false;
+        this.hide = false;
+        this.orientation = 'horizontal';
+        this.required = false;
+        this.hasDescription = false;
+        this.hasSummarySlot = false;
+        this.isLabelTooltip = false;
+        this.#defaultSlotElementRef = createRef();
+        this.#descriptionSlotElementRef = createRef();
+        this.#labelElementRef = createRef();
+        this.#localize = new LocalizeController(this);
+        this.#summarySlotElementRef = createRef();
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    render() {
+        // `aria-hidden` is used on the tooltip so the contents of the label aren't
+        // read twice to screen readers. The label is truncated using CSS. So the full
+        // text of the label is always available to them.
+        // Lit-a11y doesn't know that we're only using a "mouseover" event to hide and
+        // show Tooltip, which is hidden from screenreaders because the truncated text
+        // is available to them without a tooltip.
+        //
+        /* eslint-disable lit-a11y/mouse-events-have-key-events */
+        return html `<div
+      class=${classMap({
+            component: true,
+            horizontal: this.orientation === 'horizontal',
+            vertical: this.orientation === 'vertical',
+            left: this.split === 'left',
+            middle: this.split === 'middle',
+            right: this.split === 'right',
+            'hidden-label': this.hide,
+        })}
+    >
+      <div
+        class=${classMap({
+            tooltips: true,
+            hidden: this.hide,
+            left: this.split === 'left',
+            middle: this.split === 'middle',
+            right: this.split === 'right',
+            vertical: this.orientation === 'vertical',
+        })}
+        part="private-tooltips"
+      >
+        ${when(this.tooltip, () => html `<glide-core-tooltip
+              class=${classMap({
+            'optional-tooltip': true,
+            vertical: this.orientation === 'vertical',
+            visible: this.tooltip ? true : false,
+        })}
+              label=${ifDefined(this.tooltip)}
+              placement=${this.orientation === 'vertical' ? 'right' : 'bottom'}
+            >
+              <button
+                aria-label=${this.#localize.term('tooltip')}
+                class="optional-tooltip-target"
+                slot="target"
+                type="button"
+              >
+                ${icons.information}
+              </button>
+            </glide-core-tooltip>`)}
+
+        <glide-core-tooltip
+          class="label-tooltip"
+          data-test="label-tooltip"
+          label=${this.label ?? ''}
+          placement="right"
+          ?disabled=${!this.isLabelTooltip}
+          screenreader-hidden
+        >
+          <div
+            class=${classMap({
+            label: true,
+            disabled: this.disabled,
+        })}
+            data-test="label"
+            slot="target"
+            @mouseover=${this.#onLabelMouseOver}
+            ${ref(this.#labelElementRef)}
+          >
+            <slot ${assertSlot()} ${ref(this.#defaultSlotElementRef)}>
+              <!-- @type {HTMLLabelElement} -->
+            </slot>
+          </div>
+        </glide-core-tooltip>
+
+        ${this.required
+            ? html `<span
+              aria-hidden="true"
+              class="required-symbol"
+              data-test="required-symbol"
+            >
+              *
+            </span>`
+            : ''}
+      </div>
+
+      <div class="control-and-summary" part="private-control-and-summary">
+        <slot
+          class=${classMap({
+            control: true,
+            error: this.error,
+            disabled: this.disabled,
+            vertical: this.orientation === 'vertical',
+            summaryless: !this.hasSummarySlot,
+            'hidden-label': this.hide,
+        })}
+          name="control"
+          ${assertSlot()}
+        >
+          <!--
+            The element with which the label is associated
+            @type {Element}
+          -->
+        </slot>
+
+        <slot
+          class=${classMap({
+            summary: true,
+            error: this.error,
+        })}
+          name="summary"
+          @slotchange=${this.#onSummarySlotChange}
+          ${ref(this.#summarySlotElementRef)}
+        >
+          <!--
+            Additional information or context
+            @type {Element | string}
+          -->
+        </slot>
+      </div>
+
+      <slot
+        class=${classMap({
+            description: true,
+            content: this.hasDescription,
+            error: this.error,
+            tooltip: this.tooltip ? true : false,
+        })}
+        id="description"
+        name="description"
+        ${onResize(this.#onDescriptionSlotResize.bind(this))}
+        ${ref(this.#descriptionSlotElementRef)}
+      >
+        <!--
+          Additional information or context
+          @type {Element | string}
+        -->
+      </slot>
+    </div>`;
+    }
+    #defaultSlotElementRef;
+    #descriptionSlotElementRef;
+    #labelElementRef;
+    #localize;
+    #summarySlotElementRef;
+    #onDescriptionSlotResize() {
+        // The "description" slot has a top margin that needs to be conditionally
+        // applied only if content is slotted so there's not stray whitespace
+        // when there's no description.
+        //
+        // Normally, we'd listen for "slotchange" and set `this.hasDescription`
+        // in the event handler. But form controls always slot content. We need
+        // to know if any text has been slotted instead.
+        //
+        // A Resize Observer is the best proxy for that. If the slot has a height,
+        // then we know it has text.
+        this.hasDescription = Boolean(this.#descriptionSlotElementRef.value &&
+            this.#descriptionSlotElementRef.value.offsetHeight > 0);
+    }
+    #onLabelMouseOver() {
+        const defaultSlotAssignedElement = this.#defaultSlotElementRef.value
+            ?.assignedElements()
+            .at(0);
+        if (defaultSlotAssignedElement && this.#labelElementRef.value) {
+            // `getBoundingClientRect()` is used so we're comparing apples to apples.
+            //
+            // `clientWidth` on `defaultSlotAssignedElement` is zero if the element is
+            // `display: inline`. The label, on the other hand, isn't inline.
+            //
+            // But `clientWidth` returns an integer and `getBoundingClientRect().width`
+            // return a float. So using `clientWidth` with `#labelElementRef.value` would
+            // mean the width of `defaultSlotAssignedElement` is always fractionally
+            // greater than that of `#labelElementRef.value`.
+            this.isLabelTooltip =
+                defaultSlotAssignedElement.getBoundingClientRect().width >
+                    this.#labelElementRef.value.getBoundingClientRect().width;
+        }
+    }
+    #onSummarySlotChange() {
+        const assignedNodes = this.#summarySlotElementRef.value?.assignedNodes({
+            flatten: true,
+        });
+        this.hasSummarySlot = Boolean(assignedNodes && assignedNodes.length > 0);
+    }
+};
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Label.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Label.prototype, "error", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Label.prototype, "hide", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Label.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Label.prototype, "required", void 0);
+__decorate([
+    property()
+], Label.prototype, "split", void 0);
+__decorate([
+    property()
+], Label.prototype, "tooltip", void 0);
+__decorate([
+    property()
+], Label.prototype, "label", void 0);
+__decorate([
+    state()
+], Label.prototype, "hasDescription", void 0);
+__decorate([
+    state()
+], Label.prototype, "hasSummarySlot", void 0);
+__decorate([
+    state()
+], Label.prototype, "isLabelTooltip", void 0);
+Label = __decorate([
+    customElement('glide-core-private-label'),
+    final
+], Label);
+export default Label;
+const icons = {
+    information: html `
+    <svg
+      aria-hidden="true"
+      style=${styleMap({
+        height: '1rem',
+        width: '1rem',
+    })}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
+
+      <path
+        d="M12 16L12 12"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+      />
+
+      <circle cx="12" cy="8" r="1" fill="currentColor" />
+    </svg>
+  `,
+};

package/dist/label.styles.js

@@ -1,7 +1,12 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
-    ${focusOutline(".optional-tooltip-target:focus-visible ")}
-    ${visuallyHidden(".tooltips.hidden")}
-  `,css`
+import { css } from 'lit';
+import focusOutline from './styles/focus-outline.js';
+import visuallyHidden from './styles/visually-hidden.js';
+export default [
+    css `
+    ${focusOutline('.optional-tooltip-target:focus-visible ')}
+    ${visuallyHidden('.tooltips.hidden')}
+  `,
+    css `
     .component {
       &.horizontal {
         --private-column-gap: var(--glide-core-spacing-base-sm);
@@ -184,4 +189,5 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         color: var(--glide-core-color-advisory-text-error);
       }
     }
-  `];
+  `,
+];

package/dist/library/assert-slot.js

@@ -1 +1,136 @@
-import{LitElement,noChange}from"lit";import{Directive,directive,PartType}from"lit/directive.js";const isThrow=["localhost","127.0.0.1"].some((e=>window.location.host.includes(e)));class AssertSlot extends Directive{render(e,t){return noChange}update(e,[t,n]){if(e.options?.host instanceof LitElement&&isThrow){const o=e.options.host;e.options?.host instanceof LitElement&&!e.options.host.hasUpdated&&isThrow&&(e.options.host.updateComplete.then((()=>{if(!n&&e.element instanceof HTMLSlotElement&&0===e.element.assignedNodes().length&&t?.length){const n=e.element.name?`Expected the "${e.element.name}" slot of ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}.`:`Expected ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}.`;throw new TypeError(n)}if(!n&&e.element instanceof HTMLSlotElement&&0===e.element.assignedNodes().length){const t=e.element.name?`Expected ${o.constructor.name} to have a "${e.element.name}" slot.`:`Expected ${o.constructor.name} to have a default slot.`;throw new TypeError(t)}})),e.options?.host instanceof LitElement&&!e.options.host.hasUpdated&&e.element?.addEventListener("slotchange",(()=>{if(!(n&&e.element instanceof HTMLSlotElement&&0===e.element.assignedNodes().length)){if(e.element instanceof HTMLSlotElement&&0===e.element.assignedNodes().length){if(t&&t.length>0){const n=e.element.name?`Expected the "${e.element.name}" slot of ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}.`:`Expected ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}.`;throw new TypeError(n)}const n=e.element.name?`Expected a "${e.element.name}" slot.`:"Expected a default slot.";throw new TypeError(n)}if(t?.length&&e.element instanceof HTMLSlotElement){const n=e.element.assignedNodes({flatten:!0}).filter((e=>!!(e instanceof Text&&t.includes(Text))||!(e instanceof Text)));if(0===n.length){const e=`Expected ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}.`;throw new TypeError(e)}for(const s of n){if(!t.some((e=>s instanceof e))){const n=e.element.name?`Expected the "${e.element.name}" slot of ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}. Extends ${s.constructor.name} instead.`:`Expected ${o.constructor.name} to have a slotted element that extends ${t.map((({name:e})=>e)).join(" or ")}. Extends ${s.constructor.name} instead.`;throw new TypeError(n)}}}}})))}return this.render()}constructor(e){if(super(e),e.type!==PartType.ELEMENT)throw new TypeError("Directive must be inside the element's opening tag.");if("element"in e){if(!(e.element instanceof HTMLSlotElement))throw new TypeError("Directive can only be used on slots.")}}}export default directive(AssertSlot);
+import { LitElement, noChange } from 'lit';
+import { Directive, directive, PartType, } from 'lit/directive.js';
+const isThrow = ['localhost', '127.0.0.1'].some((host) => {
+    return window.location.host.includes(host);
+});
+class AssertSlot extends Directive {
+    render(
+    // This method is required, both by `Directive` and so the directive's
+    // options are typed at `assertSlot()` callsite.
+    //
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    slotted, isOptional) {
+        return noChange;
+    }
+    update(part, [slotted, isOptional]) {
+        if (part.options?.host instanceof LitElement && isThrow) {
+            const host = part.options.host;
+            if (part.options?.host instanceof LitElement &&
+                !part.options.host.hasUpdated &&
+                isThrow) {
+                // Equivalent to `firstUpdated()`. We need this in addition to the "slotchange"
+                // handler because the handler won't be called if the slot is empty.
+                part.options.host.updateComplete.then(() => {
+                    if (!isOptional &&
+                        part.element instanceof HTMLSlotElement &&
+                        part.element.assignedNodes().length === 0 &&
+                        slotted?.length) {
+                        const message = part.element.name
+                            ? `Expected the "${part.element.name}" slot of ${host.constructor.name} to have a slotted element that extends ${slotted
+                                .map(({ name }) => name)
+                                .join(' or ')}.`
+                            : `Expected ${host.constructor.name} to have a slotted element that extends ${slotted
+                                .map(({ name }) => name)
+                                .join(' or ')}.`;
+                        throw new TypeError(message);
+                    }
+                    if (!isOptional &&
+                        part.element instanceof HTMLSlotElement &&
+                        part.element.assignedNodes().length === 0) {
+                        const message = part.element.name
+                            ? `Expected ${host.constructor.name} to have a "${part.element.name}" slot.`
+                            : `Expected ${host.constructor.name} to have a default slot.`;
+                        throw new TypeError(message);
+                    }
+                });
+                if (part.options?.host instanceof LitElement &&
+                    !part.options.host.hasUpdated) {
+                    part.element?.addEventListener('slotchange', () => {
+                        if (isOptional &&
+                            part.element instanceof HTMLSlotElement &&
+                            part.element.assignedNodes().length === 0) {
+                            return;
+                        }
+                        if (part.element instanceof HTMLSlotElement &&
+                            part.element.assignedNodes().length === 0) {
+                            if (slotted && slotted.length > 0) {
+                                const message = part.element.name
+                                    ? `Expected the "${part.element.name}" slot of ${host.constructor.name} to have a slotted element that extends ${slotted
+                                        .map(({ name }) => name)
+                                        .join(' or ')}.`
+                                    : `Expected ${host.constructor.name} to have a slotted element that extends ${slotted
+                                        .map(({ name }) => name)
+                                        .join(' or ')}.`;
+                                throw new TypeError(message);
+                            }
+                            const message = part.element.name
+                                ? `Expected a "${part.element.name}" slot.`
+                                : 'Expected a default slot.';
+                            throw new TypeError(message);
+                        }
+                        if (slotted?.length && part.element instanceof HTMLSlotElement) {
+                            const nodes = part.element
+                                .assignedNodes({ flatten: true })
+                                .filter((node) => {
+                                // If `assignedNodes()` includes a `Text` node but `Text` isn't included in
+                                // `slotted`, then it's filtered out so `isAllowed` doesn't result in a false
+                                // positive. This doesn't mean that a slot can't contain `Text` node. It just
+                                // means the presence of a `Text` node isn't enough to satisfy the requirements.
+                                return node instanceof Text && slotted.includes(Text)
+                                    ? true
+                                    : node instanceof Text
+                                        ? false
+                                        : true;
+                            });
+                            // If `nodes` is empty after filtering, then the slot only contains `Text`
+                            // nodes and `types` does not include `Text`. This is usually a case where
+                            // the slot only contains whitespace.
+                            if (nodes.length === 0) {
+                                // "node" is technically correct because a consumer could have slotted text,
+                                // and "node" covers both text and elements. But "element" probably gets
+                                // the point across better for most developers.
+                                const message = `Expected ${host.constructor.name} to have a slotted element that extends ${slotted
+                                    .map(({ name }) => name)
+                                    .join(' or ')}.`;
+                                throw new TypeError(message);
+                            }
+                            for (const node of nodes) {
+                                const isAllowed = slotted.some((Constructor) => node instanceof Constructor);
+                                if (!isAllowed) {
+                                    const message = part.element.name
+                                        ? `Expected the "${part.element.name}" slot of ${host.constructor.name} to have a slotted element that extends ${slotted
+                                            .map(({ name }) => name)
+                                            .join(' or ')}. Extends ${node.constructor.name} instead.`
+                                        : `Expected ${host.constructor.name} to have a slotted element that extends ${slotted
+                                            .map(({ name }) => name)
+                                            .join(' or ')}. Extends ${node.constructor.name} instead.`;
+                                    throw new TypeError(message);
+                                }
+                            }
+                        }
+                    });
+                }
+            }
+        }
+        // Purely for test coverage purposes. If `update()` doesn't call `render()`,
+        // nothing will because `update()` exists.
+        return this.render();
+    }
+    constructor(partInfo) {
+        super(partInfo);
+        if (partInfo.type !== PartType.ELEMENT) {
+            throw new TypeError("Directive must be inside the element's opening tag.");
+        }
+        if ('element' in partInfo) {
+            const isSlot = partInfo.element instanceof HTMLSlotElement;
+            if (!isSlot) {
+                throw new TypeError('Directive can only be used on slots.');
+            }
+        }
+    }
+}
+/**
+ * @param {(Element | Text)[] | null } nodes - An array of node constructors allowed in the slot or `null` is any constructor is allowed
+ * @param {boolean} [isOptional] - `false` by default. Set to `true` if the slot is optional
+ */
+export default directive(AssertSlot);

package/dist/library/expect-unhandled-rejection.js

@@ -1 +1,14 @@
-import{expect,waitUntil}from"@open-wc/testing";import sinon from"sinon";export default async function(e){const n=sinon.stub(console,"error"),t=sinon.spy();window.addEventListener("unhandledrejection",t,{once:!0}),await e.call(context),await waitUntil((()=>t.callCount)),expect(t.callCount).to.equal(1),expect(t.args.at(0)?.at(0)instanceof PromiseRejectionEvent).to.be.true,window.removeEventListener("unhandledrejection",t),n.restore()}
+import { expect, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+export default async function (callback) {
+    const stub = sinon.stub(console, 'error');
+    const spy = sinon.spy();
+    window.addEventListener('unhandledrejection', spy, { once: true });
+    await callback.call(context);
+    await waitUntil(() => spy.callCount);
+    expect(spy.callCount).to.equal(1);
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
+    window.removeEventListener('unhandledrejection', spy);
+    stub.restore();
+}

package/dist/library/expect-window-error.js

@@ -1 +1,26 @@
-import{expect,waitUntil}from"@open-wc/testing";import sinon from"sinon";export default async function(o){const t=sinon.stub(console,"error"),n=sinon.spy(),r=window.onerror;window.onerror=n,await o.call(context),await waitUntil((()=>n.callCount)),expect(n.callCount).to.be.greaterThan(0),expect(n.args.at(0)?.at(4)instanceof Error).to.be.true,window.onerror=r,t.restore()}
+import { expect, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+export default async function (callback) {
+    const stub = sinon.stub(console, 'error');
+    const spy = sinon.spy();
+    const onerror = window.onerror;
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    window.onerror = spy;
+    await callback.call(context);
+    await waitUntil(() => spy.callCount);
+    // Some components assert against a slot that is itself slotted content for
+    // a component. For example, Split Button Secondary Button and its default slot.
+    //
+    // Split Button Secondary Button passes its default slot into Menu's default slot,
+    // and Menu asserts against its default slot. So Split Button Secondary Button's
+    // default slot test produces two errors: one from itself and one from Menu.
+    //
+    // Rather than account for cases like that in each test, we simply use
+    // `to.be.greaterThan()` instead of `to.equal(1)`.
+    expect(spy.callCount).to.be.greaterThan(0);
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    expect(spy.args.at(0)?.at(4) instanceof Error).to.be.true;
+    // eslint-disable-next-line unicorn/prefer-add-event-listener
+    window.onerror = onerror;
+    stub.restore();
+}

package/dist/library/final.js

@@ -1 +1,18 @@
-export default function(e){class Final extends e{constructor(...n){if(new.target!==Final)throw new TypeError(`${e.name} doesn't allow extension. Please talk to us if a component doesn't meet your needs.`);super(...n)}}return Object.defineProperty(Final,"name",{value:e.name}),Final}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function (constructor) {
+    class Final extends constructor {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        constructor(...arguments_) {
+            if (new.target !== Final) {
+                throw new TypeError(`${constructor.name} doesn't allow extension. Please talk to us if a component doesn't meet your needs.`);
+            }
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            super(...arguments_);
+        }
+    }
+    // Particularly helpful when dealing with `event.target`. Consumers
+    // expect that property's name to be that of the original constructor
+    // and not "Final".
+    Object.defineProperty(Final, 'name', { value: constructor.name });
+    return Final;
+}

package/dist/library/form-control.js

@@ -1 +1 @@
-export{};
+export {};

package/dist/library/localize.js

@@ -1 +1,10 @@
-import{LocalizeController as DefaultLocalizationController,registerTranslation}from"@shoelace-style/localize";import en from"../translations/en.js";import fr from"../translations/fr.js";import ja from"../translations/ja.js";export class LocalizeController extends DefaultLocalizationController{static{registerTranslation(en,ja,fr)}}
+import { LocalizeController as DefaultLocalizationController, registerTranslation, } from '@shoelace-style/localize';
+import en from '../translations/en.js'; // Register English as the default/fallback language
+import fr from '../translations/fr.js';
+import ja from '../translations/ja.js';
+// Extend the controller and apply our own translation interface for better typings
+export class LocalizeController extends DefaultLocalizationController {
+    static {
+        registerTranslation(en, ja, fr);
+    }
+}

package/dist/library/mouse.js

@@ -1 +1,35 @@
-import{assert}from"@open-wc/testing";import{resetMouse,sendMouse}from"@web/test-runner-commands";export function click(t,e="center"){return mouse(t,e,"click")}export function hover(t,e="center"){return mouse(t,e,"move")}async function mouse(t,e="center",o){assert(t);const{height:i,width:r,x:c,y:n}=t.getBoundingClientRect();await sendMouse({type:o,position:"top"===e?[Math.ceil(c+r/2),Math.ceil(n)]:"right"===e?[Math.floor(c+r),Math.ceil(n+i/2)]:"bottom"===e?[Math.ceil(c+r/2),Math.floor(n+i)]:"left"===e?[Math.ceil(c),Math.ceil(n+i/2)]:"outside"===e?[Math.floor(c-1),Math.floor(n-1)]:[Math.ceil(c+r/2),Math.ceil(n+i/2)]}),afterEach((async()=>{await resetMouse()}))}
+import { assert } from '@open-wc/testing';
+import { resetMouse, sendMouse } from '@web/test-runner-commands';
+export function click(element, position = 'center') {
+    return mouse(element, position, 'click');
+}
+export function hover(element, position = 'center') {
+    return mouse(element, position, 'move');
+}
+async function mouse(element, position = 'center', type) {
+    assert(element);
+    const { height, width, x, y } = element.getBoundingClientRect();
+    await sendMouse({
+        type,
+        position: position === 'top'
+            ? [Math.ceil(x + width / 2), Math.ceil(y)]
+            : position === 'right'
+                ? [Math.floor(x + width), Math.ceil(y + height / 2)]
+                : position === 'bottom'
+                    ? [Math.ceil(x + width / 2), Math.floor(y + height)]
+                    : position === 'left'
+                        ? [Math.ceil(x), Math.ceil(y + height / 2)]
+                        : position === 'outside'
+                            ? [Math.floor(x - 1), Math.floor(y - 1)]
+                            : // Center
+                                [Math.ceil(x + width / 2), Math.ceil(y + height / 2)],
+    });
+    // You'd think you'd be able to call `resetMouse()` anywhere. But, for whatever
+    // reason, calling it outside `afterEach()` results in sporadic bouts of the
+    // following error via Playwright:
+    //
+    // "mouse.move: Target page, context or browser has been closed".
+    afterEach(async () => {
+        await resetMouse();
+    });
+}