@crowdstrike/glide-core 0.5.2 → 0.6.1

package/dist/tab.styles.js

@@ -1,4 +1,14 @@
-import{css}from"lit";export default[css`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    :host {
+      outline: none;
+    }
+
+    /* Using nesting creates an issue on Safari with :host */
+    /* stylelint-disable-next-line csstools/use-nesting */
+    :host(:focus-visible) .component .container {
+      ${focusOutline};
+    }
+
     .component {
       align-items: center;
       cursor: pointer;
@@ -11,73 +21,88 @@ import{css}from"lit";export default[css`
       line-height: 1.1875rem;
       padding-block: var(--glide-core-spacing-xs);
       padding-inline: var(--glide-core-spacing-md);
-    }
 
-    /* Primary */
-
-    .primary {
-      border: 1px solid transparent;
-      border-block-end-width: 0;
-      border-end-end-radius: 0;
-      border-end-start-radius: 0;
-      border-start-end-radius: var(--glide-core-spacing-sm);
-      border-start-start-radius: var(--glide-core-spacing-sm);
-      font-weight: var(--glide-core-heading-xxs-font-weight);
-
-      &.active,
-      &.tab:hover:not(.disabled) {
-        background-color: var(--glide-core-surface-base);
-        border: 1px solid var(--glide-core-border-primary);
-
-        /* hide the outer tab-group bottom border */
-        border-block-end: 1px solid var(--glide-core-surface-base);
-        margin-block-end: -1px;
+      &:hover {
+        color: var(--glide-core-text-primary);
       }
-    }
 
-    .tab:hover {
-      color: var(--glide-core-text-primary);
-    }
+      &.disabled {
+        border: none;
+        color: var(--glide-core-text-tertiary-disabled);
+        pointer-events: none;
+      }
 
-    .disabled {
-      border: none;
-      color: var(--glide-core-text-tertiary-disabled);
-      pointer-events: none;
-    }
+      & .container {
+        border-radius: 0.0625rem;
+        display: flex;
+        gap: var(--glide-core-spacing-xs);
+      }
+
+      /* Primary */
+
+      &.primary {
+        border: 1px solid transparent;
+        border-block-end-width: 0;
+        border-end-end-radius: 0;
+        border-end-start-radius: 0;
+        border-start-end-radius: var(--glide-core-spacing-sm);
+        border-start-start-radius: var(--glide-core-spacing-sm);
+        font-weight: var(--glide-core-heading-xxs-font-weight);
 
-    /* Secondary */
+        &.active,
+        &:hover:not(.disabled) {
+          background-color: var(--glide-core-surface-base);
+          border: 1px solid var(--glide-core-border-primary);
 
-    .secondary {
-      border-color: transparent;
-      border-style: solid;
-      border-width: 1px;
-      font-weight: var(--glide-core-body-sm-font-weight);
+          /* hide the outer tab-group bottom border */
+          border-block-end: 1px solid var(--glide-core-surface-base);
+          margin-block-end: -1px;
+        }
 
-      &.active {
-        border-block-end: 2px solid var(--glide-core-border-focus);
+        & .active.default-slot {
+          background-color: red;
+        }
       }
-    }
 
-    /* Vertical */
+      /* Secondary */
 
-    .vertical {
-      flex-direction: column;
-      font-weight: var(--glide-core-body-sm-font-weight);
-      padding-inline: var(--glide-core-spacing-xxs);
+      &.secondary {
+        border-color: transparent;
+        border-style: solid;
+        border-width: 1px;
+        font-weight: var(--glide-core-body-sm-font-weight);
 
-      & .default-slot {
-        transform: rotate(180deg);
-        writing-mode: vertical-lr;
+        &.active {
+          border-block-end: 2px solid var(--glide-core-border-focus);
+        }
       }
 
-      &.active {
-        border-inline-start: 2px solid var(--glide-core-border-focus);
-      }
+      /* Vertical */
+
+      &.vertical {
+        flex-direction: column;
+        font-weight: var(--glide-core-body-sm-font-weight);
+        padding-inline: var(--glide-core-spacing-xxs);
+
+        & .default-slot {
+          transform: rotate(180deg);
+          writing-mode: vertical-lr;
+        }
+
+        &.active {
+          border-inline-start: 2px solid var(--glide-core-border-focus);
+        }
+
+        &.active,
+        &.disabled {
+          background-color: var(--glide-core-surface-base);
+        }
 
-      &.active,
-      &.disabled,
-      &.tab-wrapper:hover {
-        background-color: var(--glide-core-surface-base);
+        & .container {
+          display: flex;
+          flex-direction: column;
+          gap: var(--glide-core-spacing-xs);
+        }
       }
     }
   `];

package/dist/tag.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var r,i=arguments.length,s=i<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--)(r=e[a])&&(s=(i<3?r(s):i>3?r(t,o,s):r(t,o))||s);return i>3&&s&&Object.defineProperty(t,o,s),s};import{LitElement,html}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{owSlot}from"./library/ow.js";import{when}from"lit/directives/when.js";import styles from"./tag.styles.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.size="medium",this.removableLabel="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#r=200,this.#i=()=>{new Promise((()=>setTimeout((()=>{this.remove()}),this.#r))),this.#t.value?.classList.toggle("activate"),this.#t.value?.classList.toggle("deactivate"),this.dispatchEvent(new Event("remove"))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){owSlot(this.#o.value)}render(){return html`<div class="${classMap({component:!0,activate:!0,[this.size]:!0})}" ${ref(this.#t)}><slot name="prefix" ${ref(this.#l)}></slot><slot @slotchange="${this.#s}" ${ref(this.#o)}></slot>${when(this.removableLabel,(()=>html`<button type="button" class="${classMap({[this.size]:!0})}" aria-label="Remove ${this.removableLabel}" data-test="button" ${ref(this.#e)} @click="${this.#i}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div>`}#e;#t;#o;#l;#r;#i;#s(){owSlot(this.#o.value)}};__decorate([property({reflect:!0})],GlideCoreTag.prototype,"size",void 0),__decorate([property({attribute:"removable-label"})],GlideCoreTag.prototype,"removableLabel",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag")],GlideCoreTag);export default GlideCoreTag;
+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{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import{when}from"lit/directives/when.js";import styles from"./tag.styles.js";let GlideCoreTag=class GlideCoreTag extends LitElement{constructor(){super(...arguments),this.size="medium",this.removableLabel="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=new LocalizeController(this),this.#i=createRef(),this.#r=200,this.#s=()=>{new Promise((()=>setTimeout((()=>{this.remove()}),this.#r))),this.#t.value?.classList.toggle("activate"),this.#t.value?.classList.toggle("deactivate"),this.dispatchEvent(new Event("remove"))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}firstUpdated(){owSlot(this.#o.value)}render(){return html`<div class="${classMap({component:!0,activate:!0,[this.size]:!0})}" ${ref(this.#t)}><slot name="prefix" ${ref(this.#i)}></slot><slot @slotchange="${this.#a}" ${ref(this.#o)}></slot>${when(this.removableLabel,(()=>html`<button type="button" class="${classMap({[this.size]:!0})}" aria-label="${this.#l.term("removeTag",this.removableLabel)}" data-test="button" ${ref(this.#e)} @click="${this.#s}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`))}</div>`}#e;#t;#o;#l;#i;#r;#s;#a(){owSlot(this.#o.value)}};__decorate([property({reflect:!0})],GlideCoreTag.prototype,"size",void 0),__decorate([property({attribute:"removable-label"})],GlideCoreTag.prototype,"removableLabel",void 0),GlideCoreTag=__decorate([customElement("glide-core-tag")],GlideCoreTag);export default GlideCoreTag;

package/dist/tag.styles.js

@@ -96,6 +96,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       background-color: transparent;
       block-size: var(--glide-core-spacing-sm);
       border: none;
+      border-radius: 0.0625rem;
       color: var(--glide-core-icon-display);
       cursor: pointer;
       display: flex;

package/dist/tag.test.basics.js

@@ -36,7 +36,7 @@ it('renders an icon button with aria-label when "removable-label" attribute is s
     expect(element).to.have.attribute('removable-label', 'test-aria-label');
     const iconButton = element.shadowRoot?.querySelector('button');
     expect(iconButton).to.be.not.null;
-    expect(iconButton).to.have.attribute('aria-label', `Remove test-aria-label`);
+    expect(iconButton).to.have.attribute('aria-label', `Remove tag: test-aria-label`);
     expect(iconButton).to.have.attribute('type', 'button');
 });
 it('renders the "prefix" slot and its content', async () => {

package/dist/tag.test.translations.d.ts

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

package/dist/tag.test.translations.js

@@ -0,0 +1,25 @@
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import GlideCoreTag from './tag.js';
+GlideCoreTag.shadowRootOptions.mode = 'open';
+it('renders dynamic string in Japanese', async () => {
+    const element = await fixture(html `<glide-core-tag removable-label="test-aria-label"
+      ><span slot="prefix">Prefix</span
+      ><span data-content>Tag</span></glide-core-tag
+    >`);
+    document.documentElement.setAttribute('lang', 'ja');
+    await elementUpdated(element);
+    const iconButton = element.shadowRoot?.querySelector('button');
+    expect(iconButton).to.have.attribute('aria-label', `タグを削除: test-aria-label`);
+    expect(iconButton).to.have.attribute('type', 'button');
+});
+it('renders dynamic string in French', async () => {
+    const element = await fixture(html `<glide-core-tag removable-label="test-aria-label"
+      ><span slot="prefix">Prefix</span
+      ><span data-content>Tag</span></glide-core-tag
+    >`);
+    document.documentElement.setAttribute('lang', 'fr');
+    await elementUpdated(element);
+    const iconButton = element.shadowRoot?.querySelector('button');
+    expect(iconButton).to.have.attribute('aria-label', `Supprimer la balise : test-aria-label`);
+    expect(iconButton).to.have.attribute('type', 'button');
+});

package/dist/textarea.styles.js

@@ -33,7 +33,8 @@ import{css}from"lit";export default css`
       outline: none;
     }
 
-    &:focus-visible {
+    &:focus-visible,
+    &:focus-visible[readonly] {
       border-color: var(--glide-core-border-focus);
     }
 

package/dist/toasts.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,s){var r,i=arguments.length,n=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};import"./toasts.toast.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import styles from"./toasts.styles.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}add(e){const{variant:t,label:o,description:s,duration:r}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:s,duration:r});return this.#e.value.append(i),i.addEventListener("close",(()=>{i.remove()}),{once:!0}),i}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="Notifications" ${ref(this.#e)}></div>`}#e=createRef()};GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;
+var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,l=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(l=(i<3?s(l):i>3?s(t,o,l):s(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import"./toasts.toast.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import styles from"./toasts.styles.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}add(e){const{variant:t,label:o,description:r,duration:s}=e,i=Object.assign(document.createElement("glide-core-toast"),{variant:t,label:o,description:r,duration:s});return this.#e.value.append(i),i.addEventListener("close",(()=>{i.remove()}),{once:!0}),i}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e=createRef();#t=new LocalizeController(this)};GlideCoreToasts=__decorate([customElement("glide-core-toasts")],GlideCoreToasts);export default GlideCoreToasts;

package/dist/toasts.toast.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,s){var i,r=arguments.length,a=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,s);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(a=(r<3?i(a):r>3?i(e,o,a):i(e,o))||a);return r>3&&a&&Object.defineProperty(e,o,a),a};import"./icon-button.js";import"./status-indicator.js";import"./tooltip.js";import{LitElement,html}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 styles from"./toasts.toast.styles.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){const t=this.#t?.value;t?.addEventListener("transitionend",(()=>{t?.classList?.remove("open"),t?.classList?.remove("closing"),t?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),t?.classList?.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const t=Math.max(this.duration??0,5e3);t<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),t),this.#t?.value?.classList?.add("open")}render(){return html`<div class="${classMap({component:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label description" ${ref(this.#t)}><glide-core-status-indicator style="--size: 1.25rem;" class="icon" variant="${this.#e}"></glide-core-status-indicator><div class="label" id="label">${this.label}</div><glide-core-icon-button label="Close" variant="tertiary" class="close-button" @click="${this.#o}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#t;#o(){this.close()}get#e(){return{informational:"warning-informational",success:"success"}[this.variant]}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast")],GlideCoreToast);export default GlideCoreToast;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var s,r=arguments.length,l=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(l=(r<3?s(l):r>3?s(t,o,l):s(t,o))||l);return r>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import"./status-indicator.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import styles from"./toasts.toast.styles.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}close(){const e=this.#e?.value;e?.addEventListener("transitionend",(()=>{e?.classList?.remove("open"),e?.classList?.remove("closing"),e?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),e?.classList?.add("closing")}firstUpdated(){requestAnimationFrame((()=>{this.open()}))}open(){const e=Math.max(this.duration??0,5e3);e<Number.POSITIVE_INFINITY&&setTimeout((()=>{this.close()}),e),this.#e?.value?.classList?.add("open")}render(){return html`<div class="${classMap({component:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label description" ${ref(this.#e)}><glide-core-status-indicator style="--size: 1.25rem;" class="icon" variant="${this.#o}"></glide-core-status-indicator><div class="label" id="label">${this.label}</div><glide-core-icon-button label="${this.#t.term("close")}" variant="tertiary" class="close-button" @click="${this.#i}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#i(){this.close()}get#o(){return{informational:"warning-informational",success:"success"}[this.variant]}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast")],GlideCoreToast);export default GlideCoreToast;

package/dist/toggle.js

@@ -1 +1 @@
-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 d=e.length-1;d>=0;d--)(l=e[d])&&(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"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-describedby="summary description" data-test="input" id="input" type="checkbox" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;
+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 d=e.length-1;d>=0;d--)(l=e[d])&&(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"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import styles from"./toggle.styles.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}render(){return html`<div data-test="component"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-checked="${this.checked}" aria-describedby="summary description" data-test="input" id="input" role="switch" type="checkbox" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.#t}" ${ref(this.#e)}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreToggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreToggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreToggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle")],GlideCoreToggle);export default GlideCoreToggle;

package/dist/toggle.test.basics.js

@@ -8,6 +8,8 @@ it('has defaults', async () => {
     const component = await fixture(html `<glide-core-toggle label="Label"></glide-core-toggle>`);
     expect(component.hasAttribute('checked')).to.be.false;
     expect(component.checked).to.be.false;
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('false');
     expect(component.hasAttribute('disabled')).to.be.false;
     expect(component.disabled).to.be.false;
     expect(component.hasAttribute('hide-label')).to.be.false;
@@ -56,6 +58,8 @@ it('can be checked', async () => {
     const component = await fixture(html `<glide-core-toggle checked></glide-core-toggle> `);
     expect(component.hasAttribute('checked')).to.be.true;
     expect(component.checked).to.equal(true);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('true');
 });
 it('can be disabled', async () => {
     const component = await fixture(html `<glide-core-toggle disabled></glide-core-toggle> `);

package/dist/toggle.test.states.js

@@ -7,6 +7,8 @@ it('is checked after being clicked', async () => {
     await elementUpdated(component);
     expect(component.checked).to.equal(true);
     expect(component.hasAttribute('checked')).to.be.false;
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('true');
 });
 it('is unchecked after being clicked', async () => {
     const component = await fixture(html `<glide-core-toggle label="Label" checked></glide-core-toggle>`);
@@ -14,6 +16,8 @@ it('is unchecked after being clicked', async () => {
     await elementUpdated(component);
     expect(component.checked).to.equal(false);
     expect(component.hasAttribute('checked')).to.be.true;
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('false');
 });
 it('is still checked after being clicked when checked but disabled', async () => {
     const component = await fixture(html `<glide-core-toggle
@@ -25,6 +29,8 @@ it('is still checked after being clicked when checked but disabled', async () =>
     await elementUpdated(component);
     expect(component.checked).to.equal(true);
     expect(component.hasAttribute('checked')).to.be.true;
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('true');
 });
 it('is still unchecked after being clicked when unchecked and disabled', async () => {
     const component = await fixture(html `<glide-core-toggle label="Label" disabled></glide-core-toggle>`);
@@ -32,4 +38,6 @@ it('is still unchecked after being clicked when unchecked and disabled', async (
     await elementUpdated(component);
     expect(component.hasAttribute('checked')).to.be.false;
     expect(component.checked).to.equal(false);
+    const input = component.shadowRoot?.querySelector('[data-test="input"]');
+    expect(input?.getAttribute('aria-checked')).to.equal('false');
 });

package/dist/tooltip.d.ts

@@ -13,9 +13,11 @@ export default class GlideCoreTooltip extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     placement?: 'bottom' | 'left' | 'right' | 'top';
+    containingBlock?: Element;
     firstUpdated(): void;
     private get isVisible();
     private set isVisible(value);
     render(): import("lit").TemplateResult<1>;
+    setContainingBlock(containingBlock: Element): void;
     private effectivePlacement?;
 }

package/dist/tooltip.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(a=(s<3?l(a):s>3?l(t,o,a):l(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,offset,shift}from"@floating-ui/dom";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{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlot(this.#t.value),this.#o()}get isVisible(){return this.#i}set isVisible(e){this.#i=e,this.isVisible?this.#o():this.#l?.()}render(){return html`<div class="component" @mouseover="${this.#s}" @mouseout="${this.#a}"><div aria-labelledby="tooltip" class="target" slot="target" @focusin="${this.#r}" @focusout="${this.#n}" @keydown="${this.#f}" ${ref(this.#c)}><slot @slotchange="${this.#p}" ${ref(this.#t)} name="target"></slot></div><div class="${classMap({tooltip:!0,visible:this.isVisible})}" id="tooltip" role="tooltip" ${ref(this.#m)}><span aria-label="Tooltip: "></span><slot @slotchange="${this.#h}" ${ref(this.#e)}></slot><div class="arrow" ${ref(this.#u)}></div></div></div>`}#u=createRef();#l;#d;#e=createRef();#i=!1;#c=createRef();#t=createRef();#m=createRef();#g(){clearTimeout(this.#d)}#h(){owSlot(this.#e.value)}#r(){this.isVisible=!0}#n(){this.isVisible=!1}#f(e){"Escape"===e.key&&(this.isVisible=!1)}#a(){this.#v()}#s(){this.#g(),this.isVisible=!0}#p(){owSlot(this.#t.value)}#v(){this.#d=setTimeout((()=>{this.isVisible=!1}),200)}#o(){this.#c.value&&this.#m.value&&(this.#l=autoUpdate(this.#c.value,this.#m.value,(()=>{(async()=>{if(this.#c.value&&this.#m.value){const e=this.#u.value,{placement:t,x:o,y:i,middlewareData:l}=await computePosition(this.#c.value,this.#m.value,{placement:this.placement,strategy:"fixed",middleware:[offset(10),flip({fallbackStrategy:"initialPlacement"}),shift(),arrow({element:e})]});Object.assign(this.#m.value.style,{left:`${o}px`,top:`${i}px`});const s=l.arrow?.x??null,a=l.arrow?.y??null,r={top:"bottom",right:"left",bottom:"top",left:"right"}[t.split("-")[0]];Object.assign(e.style,{left:null===s?"":`${s}px`,top:null===a?"":`${a}px`,right:"",bottom:"",[r]:"-3px"}),this.effectivePlacement=t}})()})))}};__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([state()],GlideCoreTooltip.prototype,"isVisible",null),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;
+var __decorate=this&&this.__decorate||function(t,e,o,i){var l,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var r=t.length-1;r>=0;r--)(l=t[r])&&(a=(s<3?l(a):s>3?l(e,o,a):l(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,offset,platform,shift}from"@floating-ui/dom";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{offsetParent}from"composed-offset-position";import{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value),this.#o()}get isVisible(){return this.#i}set isVisible(t){this.#i=t,this.isVisible?this.#o():this.#l?.()}render(){return html`<div class="component" @mouseover="${this.#s}" @mouseout="${this.#a}"><div aria-labelledby="tooltip" class="target" slot="target" @focusin="${this.#r}" @focusout="${this.#n}" @keydown="${this.#f}" ${ref(this.#c)}><slot @slotchange="${this.#p}" ${ref(this.#e)} name="target"></slot></div><div class="${classMap({tooltip:!0,visible:this.isVisible})}" id="tooltip" role="tooltip" ${ref(this.#m)}><span aria-label="Tooltip: "></span><slot @slotchange="${this.#h}" ${ref(this.#t)}></slot><div class="arrow" ${ref(this.#d)}></div></div></div>`}setContainingBlock(t){this.containingBlock=t}#d=createRef();#l;#u;#t=createRef();#i=!1;#c=createRef();#e=createRef();#m=createRef();#g(){clearTimeout(this.#u)}#h(){owSlot(this.#t.value)}#r(){this.isVisible=!0}#n(){this.isVisible=!1}#f(t){"Escape"===t.key&&(this.isVisible=!1)}#a(){this.#v()}#s(){this.#g(),this.isVisible=!0}#p(){owSlot(this.#e.value)}#v(){this.#u=setTimeout((()=>{this.isVisible=!1}),200)}#o(){this.#c.value&&this.#m.value&&(this.#l=autoUpdate(this.#c.value,this.#m.value,(()=>{(async()=>{if(this.#c.value&&this.#m.value){const t=this.#d.value,{placement:e,x:o,y:i,middlewareData:l}=await computePosition(this.#c.value,this.#m.value,{platform:{...platform,getOffsetParent:t=>this.containingBlock&&t!==this.#d.value?this.containingBlock:platform.getOffsetParent(t,offsetParent)},placement:this.placement,strategy:"fixed",middleware:[offset(6),flip({fallbackStrategy:"initialPlacement"}),shift(),arrow({element:t})]});Object.assign(this.#m.value.style,{left:`${o}px`,top:`${i}px`});const s=l.arrow?.x??null,a=l.arrow?.y??null,r={top:"bottom",right:"left",bottom:"top",left:"right"}[e.split("-")[0]];Object.assign(t.style,{left:null===s?"":`${s}px`,top:null===a?"":`${a}px`,right:"",bottom:"",[r]:"-3px"}),this.effectivePlacement=e}})()})))}};__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([state()],GlideCoreTooltip.prototype,"containingBlock",void 0),__decorate([state()],GlideCoreTooltip.prototype,"isVisible",null),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;

package/dist/tooltip.styles.js

@@ -39,6 +39,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       inset-block-start: 50%;
       inset-block-start: 0;
       inset-inline-start: 0;
+      max-inline-size: 11.25rem;
+      overflow-wrap: break-word;
       padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
       position: fixed;
       z-index: 1;

package/dist/translations/en.d.ts

@@ -0,0 +1,3 @@
+import type { Translation } from '../library/localize.js';
+declare const translation: Translation;
+export default translation;

package/dist/translations/en.js

@@ -0,0 +1 @@
+const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",open:"Open",selectAll:"Select all",clearEntry:"Clear entry",moreInformation:"More information",notifications:"Notifications",removeTag:e=>`Remove tag: ${e}`};export default translation;

package/dist/translations/fr.d.ts

@@ -0,0 +1,3 @@
+import type { Translation } from '../library/localize.js';
+declare const translation: Translation;
+export default translation;

package/dist/translations/fr.js

@@ -0,0 +1 @@
+const translation={$code:"fr",$name:"French",$dir:"ltr",close:"Fermer",dismiss:"Congédier",open:"Ouvrir",selectAll:"Tout sélectionner",clearEntry:"Effacer l’entrée",moreInformation:"Plus d’informations",notifications:"Notifications",removeTag:e=>`Supprimer la balise : ${e}`};export default translation;

package/dist/translations/ja.d.ts

@@ -0,0 +1,3 @@
+import type { Translation } from '../library/localize.js';
+declare const translation: Translation;
+export default translation;

package/dist/translations/ja.js

@@ -0,0 +1 @@
+const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"無視",open:"オープン",selectAll:"すべて選択",clearEntry:"入力のクリア",moreInformation:"詳細情報",notifications:"通知",removeTag:e=>`タグを削除: ${e}`};export default translation;

package/dist/tree.d.ts

@@ -22,5 +22,6 @@ export default class GlideCoreTree extends LitElement {
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     selectItem(item: GlideCoreTreeItem): void;
+    setContainingBlock(containingBlock: Element): void;
     constructor();
 }

package/dist/tree.item.d.ts

@@ -1,5 +1,6 @@
 import './tree.item.menu.js';
 import { LitElement } from 'lit';
+import GlideCoreMenu from './menu.js';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-tree-item': GlideCoreTreeItem;
@@ -21,7 +22,7 @@ export default class GlideCoreTreeItem extends LitElement {
     label: string;
     level: number;
     selected: boolean;
-    menuSlotAssignedElements: HTMLElement[];
+    menuSlotAssignedElements: GlideCoreMenu[];
     prefixSlotAssignedElements: HTMLElement[];
     slotElements: GlideCoreTreeItem[];
     suffixSlotAssignedElements: HTMLElement[];
@@ -35,6 +36,7 @@ export default class GlideCoreTreeItem extends LitElement {
      * Returns the selected item
      */
     selectItem(item: GlideCoreTreeItem): GlideCoreTreeItem | undefined;
+    setContainingBlock(containingBlock: Element): void;
     toggleExpand(): void;
     private childTreeItems;
     private hasMenuSlot;

package/dist/tree.item.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,s,i){var o,r=arguments.length,l=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,s,i);else for(var d=e.length-1;d>=0;d--)(o=e[d])&&(l=(r<3?o(l):r>3?o(t,s,l):o(t,s))||l);return r>3&&l&&Object.defineProperty(t,s,l),l};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.childTreeItems=[],this.hasMenuSlot=!1,this.hasPrefixSlot=!1,this.hasSuffixSlot=!1,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#t()}focus(){this.#e.value?.focus()}get hasChildTreeItems(){return this.childTreeItems.length>0}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#s)}" aria-expanded="${ifDefined(this.#i)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" ${ref(this.#e)}><div style="width:${this.#o};"></div><div class="expand-icon-container">${when(this.hasChildTreeItems,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div><slot name="prefix" @slotchange="${this.#r}"></slot><div class="label">${this.label}</div><slot name="menu" @slotchange="${this.#l}"></slot><slot name="suffix" @slotchange="${this.#d}"></slot></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const s of this.slotElements)if(e===s)s.setAttribute("selected","true"),t=s;else{s.removeAttribute("selected");const i=s.selectItem(e);i&&(t=i)}return t}toggleExpand(){this.expanded=!this.expanded}#e;get#i(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#s(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#o(){return 20*(this.level-1)+"px"}#l(){this.hasMenuSlot=this.menuSlotAssignedElements.length>0}#r(){this.hasPrefixSlot=this.prefixSlotAssignedElements.length>0}#d(){this.hasSuffixSlot=this.suffixSlotAssignedElements.length>0}#t(){const e=[];for(const t of this.slotElements)t.level=this.level+1,e.push(t);this.childTreeItems=e}};__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([queryAssignedElements({slot:"menu"})],GlideCoreTreeItem.prototype,"menuSlotAssignedElements",void 0),__decorate([queryAssignedElements({slot:"prefix"})],GlideCoreTreeItem.prototype,"prefixSlotAssignedElements",void 0),__decorate([queryAssignedElements()],GlideCoreTreeItem.prototype,"slotElements",void 0),__decorate([queryAssignedElements({slot:"suffix"})],GlideCoreTreeItem.prototype,"suffixSlotAssignedElements",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasMenuSlot",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasPrefixSlot",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasSuffixSlot",void 0),GlideCoreTreeItem=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;
+var __decorate=this&&this.__decorate||function(e,t,s,i){var o,r=arguments.length,l=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,s,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(l=(r<3?o(l):r>3?o(t,s,l):o(t,s))||l);return r>3&&l&&Object.defineProperty(t,s,l),l};import"./tree.item.menu.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedElements,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import GlideCoreMenu from"./menu.js";import{when}from"lit/directives/when.js";import styles from"./tree.item.styles.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.childTreeItems=[],this.hasMenuSlot=!1,this.hasPrefixSlot=!1,this.hasSuffixSlot=!1,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}firstUpdated(){this.#t()}focus(){this.#e.value?.focus()}get hasChildTreeItems(){return this.childTreeItems.length>0}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#s)}" aria-expanded="${ifDefined(this.#i)}"><div class="${classMap({"label-container":!0})}" tabindex="-1" ${ref(this.#e)}><div style="flex-shrink: 0; width:${this.#o};"></div><div class="expand-icon-container">${when(this.hasChildTreeItems,(()=>html`<div><svg aria-hidden="true" class="${classMap({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`))}</div><slot name="prefix" @slotchange="${this.#r}"></slot><div class="label">${this.label}</div><div class="icon-container"><slot name="menu" @slotchange="${this.#l}"></slot><slot name="suffix" @slotchange="${this.#n}"></slot></div></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(e){let t;for(const s of this.slotElements)if(e===s)s.setAttribute("selected","true"),t=s;else{s.removeAttribute("selected");const i=s.selectItem(e);i&&(t=i)}return t}setContainingBlock(e){for(const t of this.menuSlotAssignedElements)t.setContainingBlock(e)}toggleExpand(){this.expanded=!this.expanded}#e;get#i(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#s(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#o(){return 20*(this.level-1)+"px"}#l(){this.hasMenuSlot=this.menuSlotAssignedElements.length>0}#r(){this.hasPrefixSlot=this.prefixSlotAssignedElements.length>0}#n(){this.hasSuffixSlot=this.suffixSlotAssignedElements.length>0}#t(){const e=[];for(const t of this.slotElements)t.level=this.level+1,e.push(t);this.childTreeItems=e}};__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([queryAssignedElements({slot:"menu"})],GlideCoreTreeItem.prototype,"menuSlotAssignedElements",void 0),__decorate([queryAssignedElements({slot:"prefix"})],GlideCoreTreeItem.prototype,"prefixSlotAssignedElements",void 0),__decorate([queryAssignedElements()],GlideCoreTreeItem.prototype,"slotElements",void 0),__decorate([queryAssignedElements({slot:"suffix"})],GlideCoreTreeItem.prototype,"suffixSlotAssignedElements",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasMenuSlot",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasPrefixSlot",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasSuffixSlot",void 0),GlideCoreTreeItem=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;

package/dist/tree.item.menu.d.ts

@@ -1,5 +1,6 @@
 import './icon-button.js';
 import './menu.js';
+import './menu.options.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
@@ -18,4 +19,5 @@ export default class GlideCoreTreeItemMenu extends LitElement {
     static styles: import("lit").CSSResult[];
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
+    setContainingBlock(containingBlock: Element): void;
 }

package/dist/tree.item.menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var r,i=arguments.length,n=i<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(n=(i<3?r(n):i>3?r(t,o,n):r(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};import"./icon-button.js";import"./menu.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component"><slot @slotchange="${this.#t}" ${ref(this.#e)}></slot><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}#e=createRef();#t(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreMenu from"./menu.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" ${ref(this.#t)}><glide-core-menu-options><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg></glide-core-icon-button></glide-core-menu>`}setContainingBlock(e){this.#t.value.setContainingBlock(e)}#e=createRef();#t=createRef();#o(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;

package/dist/tree.item.menu.test.basics.js

@@ -22,13 +22,12 @@ it('throws if the default slot is the incorrect type', async () => {
     });
     // Menu is rendered asynchronously outside of Tree Menu Item's lifecycle
     // and asserts against its default slot. That assertion, which is expected
-    // to fail, results in an unhandled rejection that gets logged.
+    // to fail in this case, results in an unhandled rejection that gets logged.
+    // `console.error` is stubbed so the logs aren't muddied.
     const stub = sinon.stub(console, 'error');
-    // Menu asserts against its default slot once on `firstUpdated` and
-    // again on "slotchange". It also renders asynchronously. So we have
-    // to wait until the stub has been called before restoring it.
-    await waitUntil(() => stub.called);
+    // Menu asserts against its default slot once on `firstUpdated` and again
+    // on "slotchange". So we wait until the stub is called twice before restoring
+    // it.
+    await waitUntil(() => stub.calledTwice);
     stub.restore();
-    // eslint-disable-next-line unicorn/prefer-add-event-listener
-    window.onerror = onerror;
 });

package/dist/tree.item.styles.js

@@ -1,4 +1,4 @@
-import{css}from"lit";export default[css`
+import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
     :host {
       cursor: pointer;
       display: flex;
@@ -20,6 +20,7 @@ import{css}from"lit";export default[css`
     }
 
     .expand-icon-container {
+      flex-shrink: 0;
       min-inline-size: 1.5625rem;
     }
 
@@ -43,7 +44,7 @@ import{css}from"lit";export default[css`
 
     .label-container {
       align-items: center;
-      border-radius: 0.625rem;
+      border-radius: 0.5rem;
       color: var(--color);
       display: flex;
       font-size: var(--glide-core-body-sm-font-size);
@@ -63,10 +64,15 @@ import{css}from"lit";export default[css`
       }
 
       &:focus-visible {
-        outline: var(--glide-core-border-primary);
-        outline-offset: -1px;
-        outline-style: auto;
-        outline-width: 2px;
+        ${focusOutline};
+
+        /* The outline is inside the component since children have overflow hidden */
+        outline-offset: -2px;
+
+        .component.selected & {
+          outline: 1px solid var(--glide-core-icon-selected);
+          outline-offset: -3px;
+        }
       }
 
       .component.selected & {
@@ -112,7 +118,10 @@ import{css}from"lit";export default[css`
     }
 
     .label {
-      flex-grow: 1;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .child-items {
@@ -127,4 +136,10 @@ import{css}from"lit";export default[css`
         block-size: auto;
       }
     }
+
+    .icon-container {
+      display: flex;
+      flex: 1;
+      justify-content: flex-end;
+    }
   `];

package/dist/tree.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,s){var r,l=arguments.length,i=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(i=(l<3?r(i):l>3?r(t,o,i):r(t,o))||i);return l>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#s}" @keydown="${this.#r}"><slot @slotchange="${this.#l}" ${ref(this.#o)}></slot></div>`}selectItem(e){for(const t of this.slotElements)if(e===t)t.setAttribute("selected","true"),this.selectedItem=t;else{t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}this.dispatchEvent(new CustomEvent("item-selected",{bubbles:!0,detail:e}))}constructor(){super(),this.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;#i(e){e?.focus(),this.focusedItem=e}#n(){return[...this.querySelectorAll("glide-core-tree-item")]}#d(){const e=this.#n(),t=new Set;return e.filter((e=>{const o=e.parentElement?.closest("glide-core-tree-item");return!o||o.expanded&&!t.has(o)||t.add(e),!t.has(e)}))}#s(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const o=t.closest("glide-core-tree-item");o&&(o.hasChildTreeItems?o.toggleExpand():this.selectItem(o))}#e(e){let t;e.target===this?t=this.selectedItem??this.slotElements[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#i(t)}#t(e){const t=e.relatedTarget;t&&this.contains(t)||(this.privateTabIndex=0,this.focusedItem=void 0)}#r(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;const t=this.#d(),{focusedItem:o}=this,s=t.findIndex((e=>e.matches(":focus")));if("ArrowRight"===e.key&&o?.hasChildTreeItems&&(o.expanded?this.#i(o.slotElements[0]):o.toggleExpand()),"ArrowLeft"===e.key)if(o?.expanded)o.toggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#i(e)}"ArrowDown"===e.key&&-1!==s&&s<t.length-1&&this.#i(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#i(t[s-1]),"Home"===e.key&&this.#i(t[0]),"End"===e.key&&this.#i(t.at(-1)),"Enter"===e.key&&o&&(o.hasChildTreeItems?o.toggleExpand():this.selectItem(o))}#l(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}};__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),__decorate([queryAssignedElements()],GlideCoreTree.prototype,"slotElements",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree")],GlideCoreTree);export default GlideCoreTree;
+var __decorate=this&&this.__decorate||function(e,t,o,s){var r,l=arguments.length,i=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(i=(l<3?r(i):l>3?r(t,o,i):r(t,o))||i);return l>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,queryAssignedElements,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#s}" @keydown="${this.#r}"><slot @slotchange="${this.#l}" ${ref(this.#o)}></slot></div>`}selectItem(e){for(const t of this.slotElements)if(e===t)t.setAttribute("selected","true"),this.selectedItem=t;else{t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}this.dispatchEvent(new CustomEvent("item-selected",{bubbles:!0,detail:e}))}setContainingBlock(e){for(const t of this.#i())t.setContainingBlock(e)}constructor(){super(),this.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;#n(e){e?.focus(),this.focusedItem=e}#i(){return[...this.querySelectorAll("glide-core-tree-item")]}#d(){const e=this.#i(),t=new Set;return e.filter((e=>{const o=e.parentElement?.closest("glide-core-tree-item");return!o||o.expanded&&!t.has(o)||t.add(e),!t.has(e)}))}#s(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const o=t.closest("glide-core-tree-item");o&&(o.hasChildTreeItems?o.toggleExpand():this.selectItem(o))}#e(e){let t;e.target===this?t=this.selectedItem??this.slotElements[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#n(t)}#t(e){const t=e.relatedTarget;t&&this.contains(t)||(this.privateTabIndex=0,this.focusedItem=void 0)}#r(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;const t=this.#d(),{focusedItem:o}=this,s=t.findIndex((e=>e.matches(":focus")));if("ArrowRight"===e.key&&o?.hasChildTreeItems&&(o.expanded?this.#n(o.slotElements[0]):o.toggleExpand()),"ArrowLeft"===e.key)if(o?.expanded)o.toggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#n(e)}"ArrowDown"===e.key&&-1!==s&&s<t.length-1&&this.#n(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#n(t[s-1]),"Home"===e.key&&this.#n(t[0]),"End"===e.key&&this.#n(t.at(-1)),"Enter"===e.key&&o&&(o.hasChildTreeItems?o.toggleExpand():this.selectItem(o))}#l(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}};__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),__decorate([queryAssignedElements()],GlideCoreTree.prototype,"slotElements",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree")],GlideCoreTree);export default GlideCoreTree;

package/dist/tree.stories.d.ts

@@ -1,5 +1,6 @@
 import './icon-button.js';
 import './icons/storybook.js';
+import './menu.link.js';
 import './tree.item.icon-button.js';
 import './tree.item.js';
 import './tree.js';