@crowdstrike/glide-core 0.19.5 → 0.20.0

package/dist/label.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,r=arguments.length,s=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,o,s):i(t,o))||s);return r>3&&s&&Object.defineProperty(t,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 styles from"./label.styles.js";import{LocalizeController}from"./library/localize.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreLabel=class GlideCoreLabel 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.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=new LocalizeController(this),this.#i=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#t.value&&this.#t.value.offsetHeight>0)}));this.#t.value&&e.observe(this.#t.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="private-tooltips"><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.#l.term("tooltip")}" class="optional-tooltip-target" slot="target" type="button">${icons.information}</button></glide-core-tooltip><glide-core-tooltip class="label-tooltip" label="${ifDefined(this.label)}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#o)}><slot @slotchange="${this.#r}" ${assertSlot()} ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></glide-core-tooltip></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.#i)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:!!this.tooltip})}" id="description" name="description" ${ref(this.#t)}></slot></div>`}#e;#t;#o;#l;#i;#r(){const e=this.#e.value?.assignedElements().at(0),t=this.#o.value;e?.textContent&&(this.label=e.textContent);const o=new ResizeObserver((()=>{e&&t&&(this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width)}));t&&o.observe(t)}#s(){const e=this.#i.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([property()],GlideCoreLabel.prototype,"tooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;const icons={information:html`<svg 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(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,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 GlideCoreLabel=class GlideCoreLabel 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.#e=createRef(),this.#t=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,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" 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" label="${this.label??""}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#o)}><slot @slotchange="${this.#r}" ${assertSlot()} ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></glide-core-tooltip></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.#t)}></slot></div>`}#e;#t;#o;#i;#l;#r(){const e=this.#e.value?.assignedElements().at(0),t=new ResizeObserver((()=>{e&&this.#o.value&&(this.isLabelTooltip=e.getBoundingClientRect().width>this.#o.value.getBoundingClientRect().width)}));this.#o.value&&t.observe(this.#o.value)}#a(){this.hasDescription=Boolean(this.#t.value&&this.#t.value.offsetHeight>0)}#s(){const e=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([property()],GlideCoreLabel.prototype,"tooltip",void 0),__decorate([property()],GlideCoreLabel.prototype,"label",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label"),final],GlideCoreLabel);export default GlideCoreLabel;const icons={information:html`<svg 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

@@ -4,7 +4,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
   `,css`
     .component {
       &.horizontal {
-        --column-gap: var(--glide-core-spacing-sm);
+        --private-column-gap: var(--glide-core-spacing-sm);
 
         column-gap: var(--glide-core-spacing-sm);
         display: grid;
@@ -21,8 +21,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
 
       &.middle {
-        grid-template-columns: calc(50% - var(--column-gap) / 2) calc(
-            50% - var(--column-gap) / 2
+        grid-template-columns: calc(50% - var(--private-column-gap) / 2) calc(
+            50% - var(--private-column-gap) / 2
           );
       }
 
@@ -61,9 +61,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       &.visible {
         /*
-    The default is "display: content". But "order" does not work with
-    "display: content" and "order" is needed above.
-  */
+          The default is "display: content". But "order" does not work with
+          "display: content" and "order" is needed above.
+        */
         display: block;
       }
     }
@@ -75,11 +75,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       color: var(--glide-core-text-body-1);
 
       /*
-    Any "display" that's not inline-level will do. We don't want the button to
-    acquire a line box, which will make it taller than its content and thus
-    make it difficult to center vertically with the label.
-    */
-
+        Any "display" that's not inline-level will do. We don't want the button to
+        acquire a line box, which will make it taller than its content and thus
+        make it difficult to center vertically with the label.
+      */
       display: flex;
       padding: 0;
 
@@ -133,9 +132,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       align-items: center;
       display: flex;
       gap: var(--glide-core-spacing-sm);
-
-      /* https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child */
-      min-inline-size: 0;
     }
 
     .control {

package/dist/library/assert-slot.d.ts

@@ -1,7 +1,6 @@
 import { type ElementPart } from 'lit';
 import { Directive, type PartInfo } from 'lit/directive.js';
 declare class AssertSlot extends Directive {
-    #private;
     render(slotted?: (typeof Element | typeof Text)[] | null, isOptional?: boolean): symbol;
     update(part: ElementPart, [slotted, isOptional]: [
         (typeof Element | typeof Text)[] | undefined | null,
@@ -9,11 +8,11 @@ declare class AssertSlot extends Directive {
     ]): symbol;
     constructor(partInfo: PartInfo);
 }
-declare const assertSlot: (slotted?: ({
+declare const _default: (slotted?: ({
     new (): Element;
     prototype: Element;
 } | {
     new (data?: string): Text;
     prototype: Text;
 })[] | null | undefined, isOptional?: boolean | undefined) => import("lit/directive.js").DirectiveResult<typeof AssertSlot>;
-export default assertSlot;
+export default _default;

package/dist/library/assert-slot.js

@@ -1 +1 @@
-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;!this.#e&&e.element&&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)}})),this.#e||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)}}}}})),this.#e=!0)}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.")}}#e=!1}const assertSlot=directive(AssertSlot);export default assertSlot;
+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);

package/dist/library/assert-slot.test.js

@@ -16,9 +16,6 @@ let GlideCoreWithSlot = class GlideCoreWithSlot extends LitElement {
         this.optional = false;
         this.slotted = [];
     }
-    static { this.shadowRootOptions = {
-        ...LitElement.shadowRootOptions,
-    }; }
     render() {
         return html `<slot
       name=${ifDefined(this.name)}
@@ -39,9 +36,6 @@ GlideCoreWithSlot = __decorate([
     customElement('glide-core-with-slot')
 ], GlideCoreWithSlot);
 let GlideCoreWhenNotUsedOnSlot = class GlideCoreWhenNotUsedOnSlot extends LitElement {
-    static { this.shadowRootOptions = {
-        ...LitElement.shadowRootOptions,
-    }; }
     render() {
         return html `<div ${assertSlot()}></div>`;
     }
@@ -50,9 +44,6 @@ GlideCoreWhenNotUsedOnSlot = __decorate([
     customElement('glide-core-when-not-used-on-slot')
 ], GlideCoreWhenNotUsedOnSlot);
 let GlideCorewhenNotUsedInsideTag = class GlideCorewhenNotUsedInsideTag extends LitElement {
-    static { this.shadowRootOptions = {
-        ...LitElement.shadowRootOptions,
-    }; }
     render() {
         return html `<slot>${assertSlot()}</slot>`;
     }
@@ -72,7 +63,7 @@ it('throws when a required default slot is empty', async () => {
     stub.restore();
 });
 it('throws when a required default slot is emptied', async () => {
-    const component = await fixture(html `<glide-core-with-slot>
+    const host = await fixture(html `<glide-core-with-slot>
       <button>Button</button>
     </glide-core-with-slot>`);
     const stub = sinon.stub(console, 'error');
@@ -80,7 +71,7 @@ it('throws when a required default slot is emptied', async () => {
     const onerror = window.onerror;
     // eslint-disable-next-line unicorn/prefer-add-event-listener
     window.onerror = spy;
-    component.innerHTML = '';
+    host.innerHTML = '';
     await waitUntil(() => spy.callCount);
     expect(spy.callCount).to.equal(1);
     expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected a default slot.');
@@ -100,7 +91,7 @@ it('throws when a required named slot is empty', async () => {
     stub.restore();
 });
 it('throws when a required named slot is emptied', async () => {
-    const component = await fixture(html `<glide-core-with-slot name="test">
+    const host = await fixture(html `<glide-core-with-slot name="test">
       <button slot="test">Button</button>
     </glide-core-with-slot>`);
     const stub = sinon.stub(console, 'error');
@@ -108,7 +99,7 @@ it('throws when a required named slot is emptied', async () => {
     const onerror = window.onerror;
     // eslint-disable-next-line unicorn/prefer-add-event-listener
     window.onerror = spy;
-    component.innerHTML = '';
+    host.innerHTML = '';
     await waitUntil(() => spy.callCount);
     expect(spy.callCount).to.equal(1);
     expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected a "test" slot.');
@@ -130,7 +121,7 @@ it('throws when a typed and required default slot is empty', async () => {
     stub.restore();
 });
 it('throws when a typed and required default slot is emptied', async () => {
-    const component = await fixture(html `<glide-core-with-slot .slotted=${[HTMLButtonElement]}>
+    const host = await fixture(html `<glide-core-with-slot .slotted=${[HTMLButtonElement]}>
       <button>Button</button>
     </glide-core-with-slot>`);
     const stub = sinon.stub(console, 'error');
@@ -138,7 +129,7 @@ it('throws when a typed and required default slot is emptied', async () => {
     const onerror = window.onerror;
     // eslint-disable-next-line unicorn/prefer-add-event-listener
     window.onerror = spy;
-    component.innerHTML = '';
+    host.innerHTML = '';
     await waitUntil(() => spy.callCount);
     expect(spy.callCount).to.equal(1);
     expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
@@ -193,7 +184,7 @@ it('throws when a typed and required named slot is empty', async () => {
     stub.restore();
 });
 it('throws when a typed and required named slot is emptied', async () => {
-    const component = await fixture(html `<glide-core-with-slot name="test" .slotted=${[HTMLButtonElement]}>
+    const host = await fixture(html `<glide-core-with-slot name="test" .slotted=${[HTMLButtonElement]}>
       <button slot="test">Button</button>
     </glide-core-with-slot>`);
     const stub = sinon.stub(console, 'error');
@@ -201,7 +192,7 @@ it('throws when a typed and required named slot is emptied', async () => {
     const onerror = window.onerror;
     // eslint-disable-next-line unicorn/prefer-add-event-listener
     window.onerror = spy;
-    component.innerHTML = '';
+    host.innerHTML = '';
     await waitUntil(() => spy.callCount);
     expect(spy.callCount).to.equal(1);
     expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected the "test" slot of GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
@@ -231,17 +222,15 @@ it('does not throw when an optional slot is empty', async () => {
     const spy = sinon.spy();
     window.addEventListener('unhandledrejection', spy, { once: true });
     await fixture(html `<glide-core-with-slot optional></glide-core-with-slot>`);
-    // Wait for the event handler to be called.
-    await aTimeout(0);
     expect(spy.callCount).to.equal(0);
 });
 it('does not throw when an optional slot is emptied', async () => {
     const spy = sinon.spy();
     window.addEventListener('error', spy);
-    const component = await fixture(html `<glide-core-with-slot optional>
+    const host = await fixture(html `<glide-core-with-slot optional>
       <button>Button</button>
     </glide-core-with-slot>`);
-    component.innerHTML = '';
+    host.innerHTML = '';
     // Wait for the event handler to be called.
     await aTimeout(0);
     expect(spy.callCount).to.equal(0);

package/dist/library/expect-unhandled-rejection.d.ts

@@ -1 +1 @@
-export default function (callback: () => Promise<unknown>): Promise<void>;
+export default function (callback: () => unknown): Promise<void>;

package/dist/library/final.d.ts

@@ -0,0 +1,3 @@
+export default function <Type extends new (...arguments_: any[]) => object>(constructor: Type): {
+    new (...arguments_: any[]): {};
+} & Type;

package/dist/library/final.js

@@ -0,0 +1 @@
+export default function(e){return class Final extends e{constructor(...n){if(new.target!==Final)throw new TypeError(`${e.name} does not allow extension.`);super(...n)}}}

package/dist/library/final.test.d.ts

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

package/dist/library/final.test.js

@@ -0,0 +1,44 @@
+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 { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { expect } from '@open-wc/testing';
+import sinon from 'sinon';
+import final from './final.js';
+let GlideCoreFinal = class GlideCoreFinal extends LitElement {
+};
+GlideCoreFinal = __decorate([
+    customElement('glide-core-final'),
+    final
+], GlideCoreFinal);
+let GlideCoreSubclassed = class GlideCoreSubclassed extends GlideCoreFinal {
+};
+GlideCoreSubclassed = __decorate([
+    customElement('glide-core-subclassed')
+], GlideCoreSubclassed);
+it('throws when a class is extended', async () => {
+    const spy = sinon.spy();
+    try {
+        new GlideCoreSubclassed();
+    }
+    catch (error) {
+        spy(error);
+    }
+    expect(spy.callCount).to.equal(1);
+    expect(spy.args.at(0)?.at(0) instanceof TypeError).to.be.true;
+    expect(spy.args.at(0)?.at(0).message).to.equal('GlideCoreFinal does not allow extension.');
+});
+it('does not throw when a class is not extended', () => {
+    const spy = sinon.spy();
+    try {
+        new GlideCoreFinal();
+    }
+    catch (error) {
+        spy(error);
+    }
+    expect(spy.callCount).to.equal(0);
+});

package/dist/library/form-control.d.ts

@@ -11,12 +11,11 @@ export default interface FormControl {
     tooltip?: string;
     validity: ValidityState;
     value: string | string[];
-    willValidate: boolean;
-    checkValidity: () => boolean;
-    formAssociatedCallback: () => void;
-    formResetCallback: () => void;
-    reportValidity: () => boolean;
-    resetValidityFeedback: () => void;
-    setCustomValidity: (message: string) => void;
-    setValidity: (flags?: ValidityStateFlags, message?: string) => void;
+    checkValidity(): boolean;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    reportValidity(): boolean;
+    resetValidityFeedback(): void;
+    setCustomValidity(message: string): void;
+    setValidity(flags?: ValidityStateFlags, message?: string): void;
 }

package/dist/library/get-parent-class-name.d.ts

@@ -0,0 +1,3 @@
+import { type Node } from 'typescript';
+declare const _default: (node: Node) => string | undefined;
+export default _default;

package/dist/library/get-parent-class-name.js

@@ -0,0 +1 @@
+import{isClassDeclaration,isIdentifier}from"typescript";export default e=>{if(isClassDeclaration(e)&&e.name&&isIdentifier(e.name))return e.name.text;let t=e.parent;for(;t&&!isClassDeclaration(t);)t=t.parent;return t?.name&&isIdentifier(t.name)?t.name.text:void 0};

package/dist/library/localize.test.js

@@ -14,28 +14,25 @@ let GlideCoreMockComponent = class GlideCoreMockComponent extends LitElement {
         super(...arguments);
         this.localize = new LocalizeController(this);
     }
-    static { this.shadowRootOptions = {
-        ...LitElement.shadowRootOptions,
-    }; }
 };
 GlideCoreMockComponent = __decorate([
-    customElement('mock-component')
+    customElement('mock-host')
 ], GlideCoreMockComponent);
 it('can call any term from en translation if locale is Japanese', async () => {
-    const component = await fixture(html `<mock-component></mock-component>`);
-    component.lang = 'ja';
-    expect(component.localize.lang()).to.equal('ja');
+    const host = await fixture(html `<mock-host></mock-host>`);
+    host.lang = 'ja';
+    expect(host.localize.lang()).to.equal('ja');
     const keys = Object.keys(en);
     for (const key of keys) {
-        expect(component.localize.term(key)).to.be.ok;
+        expect(host.localize.term(key)).to.be.ok;
     }
 });
 it('can call any term from en translation if locale is French', async () => {
-    const component = await fixture(html `<mock-component></mock-component>`);
-    component.lang = 'fr';
-    expect(component.localize.lang()).to.equal('fr');
+    const host = await fixture(html `<mock-host></mock-host>`);
+    host.lang = 'fr';
+    expect(host.localize.lang()).to.equal('fr');
     const keys = Object.keys(en);
     for (const key of keys) {
-        expect(component.localize.term(key)).to.be.ok;
+        expect(host.localize.term(key)).to.be.ok;
     }
 });

package/dist/library/on-resize.d.ts

@@ -0,0 +1,12 @@
+import { type ElementPart } from 'lit';
+import { Directive } from 'lit/directive.js';
+declare class OnResize extends Directive {
+    #private;
+    render(callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => unknown, options?: ResizeObserverOptions): symbol;
+    update(part: ElementPart, [callback, options]: [
+        (entries: ResizeObserverEntry[], observer: ResizeObserver) => unknown,
+        ResizeObserverOptions
+    ]): symbol;
+}
+declare const _default: (callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => unknown, options?: ResizeObserverOptions | undefined) => import("lit/directive.js").DirectiveResult<typeof OnResize>;
+export default _default;

package/dist/library/on-resize.js

@@ -0,0 +1 @@
+import{LitElement,noChange}from"lit";import{Directive,directive}from"lit/directive.js";class OnResize extends Directive{render(e,t){return noChange}update(e,[t,r]){return e.options?.host instanceof LitElement&&!e.options.host.hasUpdated&&(this.#e=new ResizeObserver(t),this.#e.observe(e.element,r)),this.render(t,r)}#e}export default directive(OnResize);

package/dist/library/required.d.ts

@@ -0,0 +1,2 @@
+import { ReactiveElement } from 'lit';
+export default function (prototype: ReactiveElement, key: string): void;

package/dist/library/required.js

@@ -0,0 +1 @@
+import{ReactiveElement}from"lit";const isThrow=["localhost","127.0.0.1"].some((t=>window.location.host.includes(t)));class RequiredController{hostUpdate(){if((void 0===this.#t[this.#o]||null===this.#t[this.#o])&&isThrow)throw new TypeError(`Expected ${this.#e} to have a \`${this.#o}\` property.`)}constructor(t,o,e){t.addController(this),this.#t=t,this.#o=o,this.#e=e}#t;#o;#e}export default function(t,o){if(Object.prototype.isPrototypeOf.call(ReactiveElement,t.constructor)){t.constructor.addInitializer((e=>{new RequiredController(e,o,t.constructor.name)}))}}

package/dist/library/required.test.d.ts

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

package/dist/library/required.test.js

@@ -0,0 +1,47 @@
+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 { LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import sinon from 'sinon';
+import required from './required.js';
+import final from './final.js';
+// In non-test scenarios, both `@required` and `@final` are
+// used together. Using both decorators in tests allow us
+// to verifying the component name is included in the
+// message.
+let GlideCoreWithRequiredProperty = class GlideCoreWithRequiredProperty extends LitElement {
+};
+__decorate([
+    property(),
+    required
+], GlideCoreWithRequiredProperty.prototype, "label", void 0);
+GlideCoreWithRequiredProperty = __decorate([
+    customElement('glide-core-with-required-property'),
+    final
+], GlideCoreWithRequiredProperty);
+it('throws when a required attribute is missing', async () => {
+    const stub = sinon.stub(console, 'error');
+    const spy = sinon.spy();
+    window.addEventListener('unhandledrejection', spy, { once: true });
+    fixture(html `<glide-core-with-required-property></glide-core-with-required-property>`);
+    await waitUntil(() => spy.callCount);
+    expect(spy.callCount).to.equal(1);
+    expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
+    expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected GlideCoreWithRequiredProperty to have a `label` property.');
+    stub.restore();
+});
+it('does not throw when a required attribute is not missing', async () => {
+    const stub = sinon.stub(console, 'error');
+    const spy = sinon.spy();
+    window.addEventListener('unhandledrejection', spy, { once: true });
+    await fixture(html `<glide-core-with-required-property
+      label="Label"
+    ></glide-core-with-required-property>`);
+    expect(spy.callCount).to.equal(0);
+    stub.restore();
+});

package/dist/menu.button.d.ts

@@ -5,12 +5,21 @@ declare global {
     }
 }
 /**
- * @slot icon - An optional icon.
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ *
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {Element} [icon]
  */
 export default class GlideCoreMenuButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    /**
+     * @default false
+     */
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
     label?: string;

package/dist/menu.button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,n=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(s<3?r(n):s>3?r(t,o,n):r(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import styles from"./menu.button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreMenuButton=class GlideCoreMenuButton extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=nanoid(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<button class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" ?disabled="${this.disabled}" data-test="component" type="button" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</button>`}#e;#t;#o};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuButton.prototype,"disabled",null),__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreMenuButton.prototype,"privateActive",void 0),__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"version",void 0),GlideCoreMenuButton=__decorate([customElement("glide-core-menu-button")],GlideCoreMenuButton);export default GlideCoreMenuButton;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,n=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(s<3?r(n):s>3?r(t,o,n):r(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import styles from"./menu.button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreMenuButton=class GlideCoreMenuButton extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=nanoid(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<button class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" ?disabled="${this.disabled}" data-test="component" type="button" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</button>`}#e;#t;#o};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuButton.prototype,"disabled",null),__decorate([property({reflect:!0}),required],GlideCoreMenuButton.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreMenuButton.prototype,"privateActive",void 0),__decorate([property({reflect:!0})],GlideCoreMenuButton.prototype,"version",void 0),GlideCoreMenuButton=__decorate([customElement("glide-core-menu-button"),final],GlideCoreMenuButton);export default GlideCoreMenuButton;

package/dist/menu.button.styles.js

@@ -6,10 +6,10 @@ import{css}from"lit";export default[css`
       border-radius: var(--glide-core-spacing-sm);
       display: flex;
       font: inherit;
-      gap: var(--gap);
+      gap: var(--private-gap);
       inline-size: 100%;
-      padding-block: var(--padding-block);
-      padding-inline: var(--padding-inline);
+      padding-block: var(--private-padding-block);
+      padding-inline: var(--private-padding-inline);
       transition: background-color 100ms ease-in-out;
       user-select: none;
 

package/dist/menu.d.ts

@@ -1,27 +1,43 @@
 import { LitElement } from 'lit';
-import { type Placement } from '@floating-ui/dom';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-menu': GlideCoreMenu;
     }
 }
 /**
- * @event toggle
+ * @attr {number} [offset=4]
+ * @attr {boolean} [open=false]
+ * @attr {'bottom'|'left'|'right'|'top'|'bottom-start'|'bottom-end'|'left-start'|'left-end'|'right-start'|'right-end'|'top-start'|'top-end'} [placement='bottom-start']
+ * @attr {'large'|'small'} [size='large']
  *
- * @slot - One of `<glide-core-menu-options>`.
- * @slot target - The element to which the menu will anchor, which can be any focusable element.
+ * @readonly
+ * @attr {0.19.5} [version]
+ *
+ * @slot {GlideCoreMenuOptions}
+ * @slot {Element} [target] - The element to which the popover will anchor. Can be any focusable element.
+ *
+ * @fires {Event} toggle
  */
 export default class GlideCoreMenu extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    /**
+     * @default 4
+     */
     get offset(): number;
     set offset(offset: number);
+    /**
+     * @default false
+     */
     get open(): boolean;
     set open(isOpen: boolean);
-    placement: Placement;
-    get size(): "small" | "large";
-    set size(size: 'small' | 'large');
+    placement: 'bottom' | 'left' | 'right' | 'top' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'top-start' | 'top-end';
+    /**
+     * @default 'large'
+     */
+    get size(): 'large' | 'small';
+    set size(size: 'large' | 'small');
     readonly version: string;
     connectedCallback(): void;
     createRenderRoot(): ShadowRoot;

package/dist/menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import assertSlot from"./library/assert-slot.js";import styles from"./menu.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s=!1,this.#l=!1,this.#a="large",this.#r=createRef(),this.#d=e=>{e.target===this.#t.value&&e.preventDefault()},this.#c=e=>{if(e.target===this.#t.value&&(this.#o=!0),e.target instanceof Element){const t=e.target?.closest("glide-core-menu-link");t?.disabled&&(this.#n=!0)}},this.#h=()=>{this.#o?this.#o=!1:this.#n?this.#n=!1:this.#l?this.#l=!1:(this.open=!1,this.#p&&(this.#p.ariaActivedescendant=""))},this.#u=()=>{this.#l=!0}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get offset(){return this.#m??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#m=e}get open(){return this.#s}set open(e){const t=e!==this.#s;this.#s=e,e&&t&&!this.isTargetDisabled?(this.#f(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#E(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get size(){return this.#a}set size(e){this.#a=e,this.#p&&(this.#p.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#h,{capture:!0})}createRenderRoot(){return this.#v=super.createRenderRoot(),this.#v}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#h,{capture:!0})}firstUpdated(){this.#t.value&&(this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#f()),this.#r.value?.addEventListener("mouseup",this.#u),this.#t.value?.addEventListener("mousedown",this.#d),this.#t.value?.addEventListener("mouseup",this.#c)}get isTargetDisabled(){const e=this.#g&&"disabled"in this.#g&&this.#g.disabled,t=this.#g&&"true"===this.#g.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#S}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#C}" @keydown="${this.#k}" @slotchange="${this.#b}" ${assertSlot([Element])} ${ref(this.#r)}></slot><slot class="default-slot" @click="${this.#y}" @focusin="${this.#D}" @keydown="${this.#k}" @mouseover="${this.#R}" @private-disabled="${this.#w}" @private-slot-change="${this.#M}" @slotchange="${this.#O}" ${assertSlot([GlideCoreMenuOptions])} ${ref(this.#t)}></slot></div>`}#A;#e;#t;#i;#o;#n;#s;#l;#m;#v;#a;#r;get#L(){return this.#T?.find((({privateActive:e})=>e))}#d;#c;#h;#u;#G(e){this.#g&&"focus"in this.#g&&this.#g?.focus(e)}#E(){this.#A?.(),this.#p&&(this.#p.ariaActivedescendant=""),this.#g&&(this.#g.ariaExpanded="false"),this.#t.value?.hidePopover()}#S(e){const t=e.relatedTarget instanceof HTMLElement&&this.#v?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#O(){this.#p&&(this.#p.privateSize=this.size)}#y(e){e.target!==this.#t.value&&(this.open=!1)}#D(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#L&&this.#p&&!e.target.disabled&&(this.#L.privateActive=!1,e.target.privateActive=!0,this.#p.ariaActivedescendant=e.target.id)}#R(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#T)for(const t of this.#T)t.privateActive=t===e.target;this.#p&&(this.#p.ariaActivedescendant=e.target.id)}}#w(){if(this.#T&&this.#L){const e=this.#T.indexOf(this.#L);this.#L.privateActive=!1;const t=this.#T?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#T.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#M(){const e=this.#T?.find((e=>!e.disabled));!this.#L&&e&&(e.privateActive=!0)}#k(e){const t=this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#G(),this.#L?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return e.preventDefault(),this.open=!1,void this.#G();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#L&&this.#p)return e.preventDefault(),this.open=!0,void(this.#p.ariaActivedescendant=this.#L.id);if(this.open&&this.#L&&this.#T){const t=this.#T.indexOf(this.#L);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#T.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&this.#p&&(this.#L.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#T.find(((e,i)=>!e.disabled&&i>t));return void(i&&this.#p&&(this.#L.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#T].reverse().findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#L.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#T].findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#L.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}}}#b(){const e=new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#f():this.#E()}));this.#g&&this.#p&&(e.observe(this.#g,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#g.ariaHasPopup="true",this.#g.id=nanoid(),this.#g.setAttribute("aria-controls",this.#p.id),this.#p.ariaLabelledby=this.#g.id);(this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement)&&this.#g instanceof HTMLElement&&(this.#g.tabIndex=0),this.open&&!this.isTargetDisabled?this.#f():this.#E()}#C(){this.isTargetDisabled?this.#E():this.#i?this.#i=!1:this.#T&&this.#T.length>0&&(this.open=!this.open)}get#p(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}get#T(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#f(){this.#A?.(),this.#g&&this.#t.value&&(this.#A=autoUpdate(this.#g,this.#t.value,(()=>{(async()=>{if(this.#g&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#g,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#p&&this.#L?.id&&(this.#p.ariaActivedescendant=this.#L.id),this.#g&&(this.#g.ariaExpanded="true")})()})))}get#g(){return this.#r.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"version",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu")],GlideCoreMenu);export default GlideCoreMenu;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,l=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(l=(s<3?n(l):s>3?n(t,i,l):n(t,i))||l);return s>3&&l&&Object.defineProperty(t,i,l),l};import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuOptions from"./menu.options.js";import assertSlot from"./library/assert-slot.js";import styles from"./menu.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreMenu=class GlideCoreMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#n=!1,this.#s=!1,this.#l=!1,this.#a="large",this.#r=createRef(),this.#d=e=>{e.target===this.#t.value&&e.preventDefault()},this.#h=e=>{if(e.target===this.#t.value&&(this.#o=!0),e.target instanceof Element){const t=e.target?.closest("glide-core-menu-link");t?.disabled&&(this.#n=!0)}},this.#c=()=>{this.#o?this.#o=!1:this.#n?this.#n=!1:this.#l?this.#l=!1:(this.open=!1,this.#p&&(this.#p.ariaActivedescendant=""))},this.#u=()=>{this.#l=!0}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get offset(){return this.#m??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#m=e}get open(){return this.#s}set open(e){const t=e!==this.#s;this.#s=e,e&&t&&!this.isTargetDisabled?(this.#f(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#E(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get size(){return this.#a}set size(e){this.#a=e,this.#p&&(this.#p.privateSize=e)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#v=super.createRenderRoot(),this.#v}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){this.#t.value&&(this.#t.value.popover="manual",this.open&&!this.isTargetDisabled&&this.#f()),this.#r.value?.addEventListener("mouseup",this.#u),this.#t.value?.addEventListener("mousedown",this.#d),this.#t.value?.addEventListener("mouseup",this.#h)}get isTargetDisabled(){const e=this.#g&&"disabled"in this.#g&&this.#g.disabled,t=this.#g&&"true"===this.#g.ariaDisabled;return Boolean(e)||Boolean(t)}render(){return html`<div class="component" @focusout="${this.#S}" ${ref(this.#e)}><slot class="target-slot" name="target" @click="${this.#C}" @keydown="${this.#b}" @slotchange="${this.#k}" ${assertSlot([Element])} ${ref(this.#r)}></slot><slot class="default-slot" @click="${this.#y}" @focusin="${this.#D}" @keydown="${this.#b}" @mouseover="${this.#w}" @private-disabled="${this.#R}" @private-slot-change="${this.#M}" @slotchange="${this.#O}" ${assertSlot([GlideCoreMenuOptions])} ${ref(this.#t)}></slot></div>`}#A;#e;#t;#i;#o;#n;#s;#l;#m;#v;#a;#r;get#T(){return this.#L?.find((({privateActive:e})=>e))}#d;#h;#c;#u;#G(e){this.#g&&"focus"in this.#g&&this.#g?.focus(e)}#E(){this.#A?.(),this.#p&&(this.#p.ariaActivedescendant=""),this.#g&&(this.#g.ariaExpanded="false"),this.#t.value?.hidePopover()}#S(e){const t=e.relatedTarget instanceof HTMLElement&&this.#v?.contains(e.relatedTarget),i=e.relatedTarget instanceof GlideCoreMenuOptions,o=e.relatedTarget instanceof GlideCoreMenuButton||e.relatedTarget instanceof GlideCoreMenuLink;t||i||o||(this.open=!1)}#O(){this.#p&&(this.#p.privateSize=this.size)}#y(e){e.target!==this.#t.value&&(this.open=!1)}#D(e){(e.target instanceof GlideCoreMenuButton||e.target instanceof GlideCoreMenuLink)&&this.#T&&this.#p&&!e.target.disabled&&(this.#T.privateActive=!1,e.target.privateActive=!0,this.#p.ariaActivedescendant=e.target.id)}#w(e){if((e.target instanceof GlideCoreMenuLink||e.target instanceof GlideCoreMenuButton)&&!e.target.disabled){if(this.#L)for(const t of this.#L)t.privateActive=t===e.target;this.#p&&(this.#p.ariaActivedescendant=e.target.id)}}#R(){if(this.#L&&this.#T){const e=this.#L.indexOf(this.#T);this.#T.privateActive=!1;const t=this.#L?.find(((t,i)=>!t.disabled&&i>e));if(t)return void(t.privateActive=!0);const i=this.#L.findLast(((t,i)=>!t.disabled&&i<e));i&&(i.privateActive=!0)}}#M(){const e=this.#L?.find((e=>!e.disabled));!this.#T&&e&&(e.privateActive=!0)}#b(e){const t=this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement;if([" ","Enter"].includes(e.key)&&this.open)return" "===e.key&&t&&e.preventDefault(),this.open=!1,this.#G(),this.#T?.click(),void(this.#i=!0);if([" ","Enter"].includes(e.key)&&t)return e.preventDefault(),void(this.open=!0);if(["Escape"].includes(e.key)&&this.open)return e.preventDefault(),this.open=!1,void this.#G();if(["ArrowUp","ArrowDown"].includes(e.key)&&!this.open&&this.#T&&this.#p)return e.preventDefault(),this.open=!0,void(this.#p.ariaActivedescendant=this.#T.id);if(this.open&&this.#T&&this.#L){const t=this.#L.indexOf(this.#T);if("ArrowUp"===e.key&&!e.metaKey){e.preventDefault();const i=this.#L.findLast(((e,i)=>!e.disabled&&i<t));return void(i&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowDown"===e.key&&!e.metaKey){e.preventDefault();const i=this.#L.find(((e,i)=>!e.disabled&&i>t));return void(i&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=i.id,i.privateActive=!0))}if("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key){e.preventDefault();const t=[...this.#L].reverse().findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}if("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key){e.preventDefault();const t=[...this.#L].findLast((e=>!e.disabled));return void(t&&this.#p&&(this.#T.privateActive=!1,this.#p.ariaActivedescendant=t.id,t.privateActive=!0))}}}#k(){const e=new MutationObserver((()=>{this.open&&!this.isTargetDisabled?this.#f():this.#E()}));this.#g&&this.#p&&(e.observe(this.#g,{attributes:!0,attributeFilter:["aria-disabled","disabled"]}),this.#g.ariaHasPopup="true",this.#g.id=nanoid(),this.#g.setAttribute("aria-controls",this.#p.id),this.#p.ariaLabelledby=this.#g.id);(this.#g instanceof HTMLSpanElement||this.#g instanceof HTMLDivElement)&&this.#g instanceof HTMLElement&&(this.#g.tabIndex=0),this.open&&!this.isTargetDisabled?this.#f():this.#E()}#C(){this.isTargetDisabled?this.#E():this.#i?this.#i=!1:this.#L&&this.#L.length>0&&(this.open=!this.open)}get#p(){const e=this.#t.value?.assignedElements().at(0);return e instanceof GlideCoreMenuOptions?e:null}get#L(){let e=this.#t.value?.assignedElements()?.at(0)?.children;const t=e?.[0];if(t instanceof HTMLSlotElement&&(e=t.assignedElements()),e)return[...e].filter((e=>e instanceof GlideCoreMenuLink||e instanceof GlideCoreMenuButton))}#f(){this.#A?.(),this.#g&&this.#t.value&&(this.#A=autoUpdate(this.#g,this.#t.value,(()=>{(async()=>{if(this.#g&&this.#t.value){const{x:e,y:t,placement:i}=await computePosition(this.#g,this.#t.value,{placement:this.placement,middleware:[offset(this.offset),flip()]});this.#t.value.dataset.placement=i,Object.assign(this.#t.value.style,{left:`${e}px`,top:`${t}px`})}this.#t.value?.showPopover(),this.#p&&this.#T?.id&&(this.#p.ariaActivedescendant=this.#T.id),this.#g&&(this.#g.ariaExpanded="true")})()})))}get#g(){return this.#r.value?.assignedElements().at(0)}};__decorate([property({reflect:!0,type:Number})],GlideCoreMenu.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenu.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreMenu.prototype,"version",void 0),GlideCoreMenu=__decorate([customElement("glide-core-menu"),final],GlideCoreMenu);export default GlideCoreMenu;