@crowdstrike/glide-core 0.26.1 → 0.28.0

package/dist/textarea.styles.js

@@ -1,7 +1,7 @@
 import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidden.js";const fieldSizingContent=unsafeCSS("\n  field-sizing: content;\n");export default[css`
     ${visuallyHidden(".character-count .hidden")}
   `,css`
-    glide-core-private-label::part(private-tooltips) {
+    glide-core-private-label[orientation='horizontal']::part(private-tooltips) {
       align-items: flex-start;
       margin-block-start: var(--glide-core-spacing-base-sm);
     }
@@ -36,11 +36,27 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
       font-weight: var(--glide-core-typography-weight-regular);
       max-block-size: 5lh;
       min-block-size: 3lh;
+      min-inline-size: 3.75rem;
       padding: var(--glide-core-spacing-base-xs)
         var(--glide-core-spacing-base-sm);
       resize: vertical;
       transition: border-color 200ms ease-in-out;
 
+      /*
+        Because 'field-sizing: content' is used, it allows the
+        element to grow to fill the content. This is problematic in
+        our case because it means our textarea could force its
+        container to scroll when a user enters long, unbroken text.
+        This issue was discussed at https://issues.chromium.org/issues/340291325,
+        but for the select element. Using 'max-width: 100%' won't
+        solve the issue, and we can't use a fixed max-width, as we
+        won't know the layouts our consumers will use our components
+        in. So setting this CSS property allows for the textarea to
+        naturally break the value up by words and prevent horizontal
+        scrolling.
+      */
+      word-break: break-word;
+
       ${fieldSizingContent};
 
       &:focus {
@@ -48,7 +64,6 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
       }
 
       &:focus-visible,
-      &:focus-visible[readonly],
       &:hover {
         border-color: var(--glide-core-color-interactive-stroke-primary--hover);
       }

package/dist/toast.d.ts

@@ -2,7 +2,7 @@ import './icon-button.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-toast': GlideCoreToast;
+        'glide-core-toast': Toast;
     }
 }
 /**
@@ -13,13 +13,13 @@ declare global {
  * @readonly
  * @attr {string} [version]
  *
- * @slot {GlideCoreLink | string} - A description
+ * @slot {Link | string} - A description
  *
  * @fires {Event} dismiss
  *
  * @method dismiss
  */
-export default class GlideCoreToast extends LitElement {
+export default class Toast extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     label?: string;
     privateDescription?: string;

package/dist/toast.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,a=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var p=e.length-1;p>=0;p--)(i=e[p])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import"./icon-button.js";import{LitElement,html}from"lit";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreToasts from"./toast.toasts.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import GlideCoreLink from"./link.js";import assertSlot from"./library/assert-slot.js";let GlideCoreToast=class GlideCoreToast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.privateDismissing=!1,this.privateDismissingViaButton=!1,this.privateId=nanoid(),this.privateShow=!1,this.variant="informational",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}dismiss(){this.dispatchEvent(new Event("dismiss",{bubbles:!0,composed:!0})),this.remove()}firstUpdated(){GlideCoreToasts.show(this)}render(){return html`<slot hidden ${assertSlot([GlideCoreLink,Text],!0)}></slot>`}};__decorate([property({reflect:!0}),required],GlideCoreToast.prototype,"label",void 0),__decorate([property()],GlideCoreToast.prototype,"privateDescription",void 0),__decorate([property({reflect:!0,type:Number,useDefault:!0})],GlideCoreToast.prototype,"duration",void 0),__decorate([property({type:Boolean})],GlideCoreToast.prototype,"privateDismissing",void 0),__decorate([property({type:Boolean})],GlideCoreToast.prototype,"privateDismissingViaButton",void 0),__decorate([property()],GlideCoreToast.prototype,"privateId",void 0),__decorate([property({type:Boolean})],GlideCoreToast.prototype,"privateShow",void 0),__decorate([property({attribute:!1})],GlideCoreToast.prototype,"privateTimeoutId",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreToast.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"version",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast"),final],GlideCoreToast);export default GlideCoreToast;
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,s=arguments.length,a=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var p=t.length-1;p>=0;p--)(i=t[p])&&(a=(s<3?i(a):s>3?i(e,o,a):i(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import"./icon-button.js";import{LitElement,html}from"lit";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import Toasts from"./toast.toasts.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import Link from"./link.js";import assertSlot from"./library/assert-slot.js";import uniqueId from"./library/unique-id.js";let Toast=class Toast extends LitElement{constructor(){super(...arguments),this.duration=5e3,this.privateDismissing=!1,this.privateDismissingViaButton=!1,this.privateId=uniqueId(),this.privateShow=!1,this.variant="informational",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}dismiss(){this.dispatchEvent(new Event("dismiss",{bubbles:!0,composed:!0})),this.remove()}firstUpdated(){(async()=>{await(this.querySelector("glide-core-link")?.updateComplete),Toasts.show(this)})()}render(){return html`<slot hidden ${assertSlot([Link,Text],!0)}></slot>`}};__decorate([property({reflect:!0}),required],Toast.prototype,"label",void 0),__decorate([property()],Toast.prototype,"privateDescription",void 0),__decorate([property({reflect:!0,type:Number,useDefault:!0})],Toast.prototype,"duration",void 0),__decorate([property({type:Boolean})],Toast.prototype,"privateDismissing",void 0),__decorate([property({type:Boolean})],Toast.prototype,"privateDismissingViaButton",void 0),__decorate([property()],Toast.prototype,"privateId",void 0),__decorate([property({type:Boolean})],Toast.prototype,"privateShow",void 0),__decorate([property({attribute:!1})],Toast.prototype,"privateTimeoutId",void 0),__decorate([property({reflect:!0,useDefault:!0})],Toast.prototype,"variant",void 0),__decorate([property({reflect:!0})],Toast.prototype,"version",void 0),Toast=__decorate([customElement("glide-core-toast"),final],Toast);export default Toast;

package/dist/toast.toasts.d.ts

@@ -1,31 +1,31 @@
 import './icon-button.js';
 import { LitElement } from 'lit';
-import GlideCoreToast from './toast.js';
+import Toast from './toast.js';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-private-toasts': GlideCoreToasts;
+        'glide-core-private-toasts': Toasts;
     }
 }
 /**
- * @attr {GlideCoreToast[]} [toasts=[]]
+ * @attr {Toast[]} [toasts=[]]
  *
  * @method dismiss
- * @param {GlideCoreToast} toast
+ * @param {Toast} toast
  *
  * @method show
- * @param {GlideCoreToast} toast
+ * @param {Toast} toast
  * @returns Promise<void>
  *
  * @method showPopover
  */
-export default class GlideCoreToasts extends LitElement {
+export default class Toasts extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    toasts: GlideCoreToast[];
-    dismiss(toast: GlideCoreToast): void;
+    toasts: Toast[];
+    dismiss(toast: Toast): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     showPopover(): void;
-    static show(toast: GlideCoreToast): Promise<void>;
+    static show(toast: Toast): Promise<void>;
 }

package/dist/toast.toasts.js

@@ -1,54 +1,54 @@
-var __decorate=this&&this.__decorate||function(e,t,i,s){var o,r=arguments.length,a=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,s);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(r<3?o(a):r>3?o(t,i,a):o(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import"./icon-button.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{classMap}from"lit/directives/class-map.js";import{styleMap}from"lit/directives/style-map.js";import{choose}from"lit/directives/choose.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import xIcon from"./icons/x.js";import{LocalizeController}from"./library/localize.js";import styles from"./toast.toasts.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import GlideCoreToast from"./toast.js";import GlideCoreLink from"./link.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{constructor(){super(...arguments),this.toasts=[],this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}dismiss(e){const t=this.toasts.indexOf(e);this.toasts=[...this.toasts.slice(0,t),...this.toasts.slice(t+1)],e.dismiss(),0===this.toasts.length&&this.remove()}firstUpdated(){this.#e.value&&(this.#e.value.popover="manual")}render(){return html`<div
-      aria-label=${this.#t.term("notifications")}
+var __decorate=this&&this.__decorate||function(t,e,i,s){var o,r=arguments.length,a=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,i,s);else for(var n=t.length-1;n>=0;n--)(o=t[n])&&(a=(r<3?o(a):r>3?o(e,i,a):o(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};import"./icon-button.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{classMap}from"lit/directives/class-map.js";import{styleMap}from"lit/directives/style-map.js";import{choose}from"lit/directives/choose.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import xIcon from"./icons/x.js";import{LocalizeController}from"./library/localize.js";import styles from"./toast.toasts.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import Toast from"./toast.js";import Link from"./link.js";let Toasts=class Toasts extends LitElement{constructor(){super(...arguments),this.toasts=[],this.#t=createRef(),this.#e=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}dismiss(t){const e=this.toasts.indexOf(t);this.toasts=[...this.toasts.slice(0,e),...this.toasts.slice(e+1)],t.dismiss(),0===this.toasts.length&&this.remove()}firstUpdated(){this.#t.value&&(this.#t.value.popover="manual")}render(){return html`<div
+      aria-label=${this.#e.term("notifications")}
       class="component"
       data-test="component"
       role="region"
       tabindex="-1"
-      ${ref(this.#e)}
+      ${ref(this.#t)}
     >
       <div class="toasts">
-        ${repeat(this.toasts,(e=>e.privateId),(e=>html`<div
+        ${repeat(this.toasts,(t=>t.privateId),(t=>html`<div
               aria-labelledby="prefix label description"
-              class=${classMap({toast:!0,error:"error"===e.variant,informational:"informational"===e.variant,success:"success"===e.variant,show:Boolean(e.privateShow),dismissing:Boolean(e.privateDismissing),"dismissing-via-button":Boolean(e.privateDismissingViaButton)})}
+              class=${classMap({toast:!0,error:"error"===t.variant,informational:"informational"===t.variant,success:"success"===t.variant,show:Boolean(t.privateShow),dismissing:Boolean(t.privateDismissing),"dismissing-via-button":Boolean(t.privateDismissingViaButton)})}
               data-test="toast"
               role="alert"
-              @mouseover=${this.#i.bind(this,e)}
-              @mouseout=${this.#s.bind(this,e)}
-              @transitionend=${this.#o.bind(this,e)}
+              @mouseover=${this.#i.bind(this,t)}
+              @mouseout=${this.#s.bind(this,t)}
+              @transitionend=${this.#o.bind(this,t)}
             >
               <span class="prefix" id="prefix">
-                ${this.#t.term(e.variant)}
+                ${this.#e.term(t.variant)}
               </span>
 
-              ${choose(e.variant,[["success",()=>icons.success],["error",()=>icons.error]],(()=>icons.warningInformational))}
+              ${choose(t.variant,[["success",()=>icons.success],["error",()=>icons.error]],(()=>icons.warningInformational))}
 
               <div class="label" data-test="label" id="label">
-                ${e.label}
+                ${t.label}
               </div>
 
               <glide-core-icon-button
                 class="dismiss-button"
                 data-test="dismiss-button"
-                label=${this.#t.term("dismiss")}
+                label=${this.#e.term("dismiss")}
                 variant="tertiary"
-                @click=${this.#r.bind(this,e)}
+                @click=${this.#r.bind(this,t)}
               >
                 ${xIcon}
               </glide-core-icon-button>
 
-              ${when(e.privateDescription,(()=>html`
+              ${when(t.privateDescription,(()=>html`
                   <div
                     class="description"
                     data-test="description"
                     id="description"
-                    @click=${this.#a.bind(this,e)}
+                    @click=${this.#a.bind(this,t)}
                   >
-                    ${unsafeHTML(e.privateDescription)}
+                    ${unsafeHTML(t.privateDescription)}
                   </div>
                 `))}
             </div>`))}
       </div>
-    </div>`}showPopover(){this.#e.value?.showPopover()}static async show(e){let t=document.querySelector("glide-core-private-toasts");if(t||(t=document.createElement("glide-core-private-toasts"),document.body.append(t)),e.childNodes.length>0){let t="";for(const i of e.childNodes)i instanceof Element?t+=i.outerHTML:i instanceof Text&&(t+=i.textContent);e.privateDescription=t.trim()}t.toasts=[e,...t.toasts],await t.updateComplete,t.showPopover(),e.privateShow=!0,setTimeout((()=>{t.requestUpdate()})),e.duration<Number.POSITIVE_INFINITY&&(e.privateTimeoutId=setTimeout((()=>{window.matchMedia("(prefers-reduced-motion: reduce)").matches?t?.dismiss(e):(e.privateDismissing=!0,t.requestUpdate())}),e.duration))}#e;#t;#a(e,t){t.target instanceof GlideCoreLink&&t.preventDefault();const i=[...e.querySelectorAll("*")].find((e=>{if(t.target instanceof GlideCoreLink)return e instanceof GlideCoreLink&&e.label===t.target.label&&e.href===t.target.href}));i instanceof GlideCoreLink&&i.click()}#r(e){window.matchMedia("(prefers-reduced-motion: reduce)").matches?this.dismiss(e):(e.privateDismissing=!0,e.privateDismissingViaButton=!0,this.requestUpdate())}#s(e){e.duration<Number.POSITIVE_INFINITY&&(e.privateTimeoutId=setTimeout((()=>{window.matchMedia("(prefers-reduced-motion: reduce)").matches?this.dismiss(e):(e.privateDismissing=!0,this.requestUpdate())}),e.duration))}#i(e){clearTimeout(e.privateTimeoutId)}#o(e){document.querySelector("glide-core-private-toasts")&&e.privateDismissing&&this.dismiss(e)}};__decorate([property({type:Array})],GlideCoreToasts.prototype,"toasts",void 0),GlideCoreToasts=__decorate([customElement("glide-core-private-toasts"),final],GlideCoreToasts);export default GlideCoreToasts;const icons={error:html`<svg
+    </div>`}showPopover(){this.#t.value?.showPopover()}static async show(t){let e=document.querySelector("glide-core-private-toasts");if(e||(e=document.createElement("glide-core-private-toasts"),document.body.append(e)),t.childNodes.length>0){let e="";for(const i of t.childNodes)i instanceof Element?e+=i.outerHTML:i instanceof Text&&(e+=i.textContent);t.privateDescription=e.trim()}e.toasts=[t,...e.toasts],await e.updateComplete,e.showPopover(),t.privateShow=!0,setTimeout((()=>{e.requestUpdate()})),t.duration<Number.POSITIVE_INFINITY&&(t.privateTimeoutId=setTimeout((()=>{window.matchMedia("(prefers-reduced-motion: reduce)").matches?e?.dismiss(t):(t.privateDismissing=!0,e.requestUpdate())}),t.duration))}#t;#e;#a(t,e){e.target instanceof Link&&e.preventDefault();const i=[...t.querySelectorAll("*")].find((t=>{if(e.target instanceof Link)return t instanceof Link&&t.label===e.target.label&&t.href===e.target.href}));i instanceof Link&&i.click()}#r(t){window.matchMedia("(prefers-reduced-motion: reduce)").matches?this.dismiss(t):(t.privateDismissing=!0,t.privateDismissingViaButton=!0,this.requestUpdate())}#s(t){t.duration<Number.POSITIVE_INFINITY&&(t.privateTimeoutId=setTimeout((()=>{window.matchMedia("(prefers-reduced-motion: reduce)").matches?this.dismiss(t):(t.privateDismissing=!0,this.requestUpdate())}),t.duration))}#i(t){clearTimeout(t.privateTimeoutId)}#o(t){document.querySelector("glide-core-private-toasts")&&t.privateDismissing&&this.dismiss(t)}};__decorate([property({type:Array})],Toasts.prototype,"toasts",void 0),Toasts=__decorate([customElement("glide-core-private-toasts"),final],Toasts);export default Toasts;const icons={error:html`<svg
     aria-hidden="true"
     class="icon error"
     fill="none"

package/dist/toggle.d.ts

@@ -2,7 +2,7 @@ import './label.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-toggle': GlideCoreToggle;
+        'glide-core-toggle': Toggle;
     }
 }
 /**
@@ -21,7 +21,7 @@ declare global {
  *
  * @fires {Event} change
  */
-export default class GlideCoreToggle extends LitElement {
+export default class Toggle extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];

package/dist/toggle.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<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--)(r=e[d])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import styles from"./toggle.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreToggle=class GlideCoreToggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.version=packageJson.version,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}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-private-label label="${ifDefined(this.label)}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" tooltip="${ifDefined(this.tooltip)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><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}" @input="${this.#t}" ${ref(this.#e)}></div>${when(this.summary,(()=>html`<div id="summary" slot="summary">${this.summary}</div>`))}<slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}};__decorate([property({reflect:!0}),required],GlideCoreToggle.prototype,"label",void 0),__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,useDefault:!0})],GlideCoreToggle.prototype,"orientation",void 0),__decorate([property()],GlideCoreToggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreToggle.prototype,"version",void 0),GlideCoreToggle=__decorate([customElement("glide-core-toggle"),final],GlideCoreToggle);export default GlideCoreToggle;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<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 n=e.length-1;n>=0;n--)(r=e[n])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import"./label.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import styles from"./toggle.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Toggle=class Toggle extends LitElement{constructor(){super(...arguments),this.checked=!1,this.disabled=!1,this.hideLabel=!1,this.orientation="horizontal",this.version=packageJson.version,this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}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-private-label label="${ifDefined(this.label)}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" tooltip="${ifDefined(this.tooltip)}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><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}" @input="${this.#t}" ${ref(this.#e)}></div>${when(this.summary,(()=>html`<div id="summary" slot="summary">${this.summary}</div>`))}<slot class="description" id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}#e;#t(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}};__decorate([property({reflect:!0}),required],Toggle.prototype,"label",void 0),__decorate([property({type:Boolean})],Toggle.prototype,"checked",void 0),__decorate([property({reflect:!0,type:Boolean})],Toggle.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],Toggle.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,useDefault:!0})],Toggle.prototype,"orientation",void 0),__decorate([property()],Toggle.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],Toggle.prototype,"summary",void 0),__decorate([property({reflect:!0})],Toggle.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],Toggle.prototype,"version",void 0),Toggle=__decorate([customElement("glide-core-toggle"),final],Toggle);export default Toggle;

package/dist/tooltip.container.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-private-tooltip-container': GlideCoreTooltipContainer;
+        'glide-core-private-tooltip-container': TooltipContainer;
     }
 }
 /**
@@ -11,7 +11,7 @@ declare global {
  * @attr {boolean} [screenreader-hidden=false]
  * @attr {string[]} [shortcut=[]]
  */
-export default class GlideCoreTooltipContainer extends LitElement {
+export default class TooltipContainer extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];

package/dist/tooltip.container.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,l=s<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--)(i=e[a])&&(l=(s<3?i(l):s>3?i(t,o,l):i(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import{classMap}from"lit/directives/class-map.js";import{map}from"lit/directives/map.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreTooltipContainer=class GlideCoreTooltipContainer extends LitElement{constructor(){super(...arguments),this.screenreaderHidden=!1,this.shortcut=[],this.#e=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e,this.role=e||this.screenreaderHidden?"none":"tooltip"}connectedCallback(){super.connectedCallback(),this.id=nanoid(),this.role=this.role=this.disabled||this.screenreaderHidden?"none":"tooltip",this.slot="private"}render(){return html`<div aria-hidden="${this.screenreaderHidden}" class="${classMap({component:!0,reversed:"left"===this.placement})}"><div class="label">${this.label}</div><kbd class="${classMap({shortcut:!0,reversed:"left"===this.placement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div>`}#e};__decorate([property({type:Boolean})],GlideCoreTooltipContainer.prototype,"disabled",null),__decorate([property()],GlideCoreTooltipContainer.prototype,"label",void 0),__decorate([property()],GlideCoreTooltipContainer.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",type:Boolean})],GlideCoreTooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],GlideCoreTooltipContainer.prototype,"shortcut",void 0),GlideCoreTooltipContainer=__decorate([customElement("glide-core-private-tooltip-container"),final],GlideCoreTooltipContainer);export default GlideCoreTooltipContainer;
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,s=arguments.length,a=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(a=(s<3?i(a):s>3?i(e,o,a):i(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import{map}from"lit/directives/map.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import uniqueId from"./library/unique-id.js";let TooltipContainer=class TooltipContainer extends LitElement{constructor(){super(...arguments),this.screenreaderHidden=!1,this.shortcut=[],this.#t=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.role=t||this.screenreaderHidden?"none":"tooltip"}connectedCallback(){super.connectedCallback(),this.id=uniqueId(),this.role=this.role=this.disabled||this.screenreaderHidden?"none":"tooltip",this.slot="private"}render(){return html`<div aria-hidden="${this.screenreaderHidden}" class="${classMap({component:!0,reversed:"left"===this.placement})}"><div class="label">${this.label}</div><kbd class="${classMap({shortcut:!0,reversed:"left"===this.placement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((t,e)=>html`<kbd>${t}</kbd> ${e===this.shortcut.length-1?"":" + "}`))}</kbd></div>`}#t};__decorate([property({type:Boolean})],TooltipContainer.prototype,"disabled",null),__decorate([property()],TooltipContainer.prototype,"label",void 0),__decorate([property()],TooltipContainer.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",type:Boolean})],TooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],TooltipContainer.prototype,"shortcut",void 0),TooltipContainer=__decorate([customElement("glide-core-private-tooltip-container"),final],TooltipContainer);export default TooltipContainer;

package/dist/tooltip.d.ts

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 import './tooltip.container.js';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-tooltip': GlideCoreTooltip;
+        'glide-core-tooltip': Tooltip;
     }
 }
 /**
@@ -17,12 +17,12 @@ declare global {
  * @readonly
  * @attr {string} [version]
  *
- * @slot {GlideCoreTooltipContainer} [private]
+ * @slot {TooltipContainer} [private]
  * @slot {Element} target - The element to which the tooltip will anchor. Can be any element with an implicit or explicit ARIA role.
  *
  * @fires {Event} toggle
  */
-export default class GlideCoreTooltip extends LitElement {
+export default class Tooltip extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];

package/dist/tooltip.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,s=l<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--)(r=e[a])&&(s=(l<3?r(s):l>3?r(t,o,s):r(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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 packageJson from"../package.json"with{type:"json"};import styles from"./tooltip.styles.js";import"./tooltip.container.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r=[],this.#l=createRef(),this.#s=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#a}set label(e){this.#a=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#n():this.#d();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#l.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#c=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#n(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&!this.disabled&&(this.#d(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get screenreaderHidden(){return this.#i}set screenreaderHidden(e){this.#i=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.screenreaderHidden=e);const o=this.#l.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get shortcut(){return this.#r}set shortcut(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.shortcut=e)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#h)}firstUpdated(){this.#s.value&&(this.#s.value.popover="manual"),this.open&&!this.disabled&&this.#n();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#m}" @mouseout="${this.#f}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" name="target" @focusin="${this.#u}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#l)}></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" ${ref(this.#s)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#y;#p;#t;#o;#i;#a;#c;#h;#r;#l;#s;#w(){clearTimeout(this.#p)}#d(){this.#s.value?.hidePopover(),this.#y?.()}#f(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#s.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#l.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#u(){this.open=!0}#v(){this.open=!1}#g(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#E(){this.#p=setTimeout((()=>{this.open=!1}),Number(this.#s.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#l.value&&this.#s.value&&(this.#y=autoUpdate(this.#l.value,this.#s.value,(()=>{(async()=>{if(this.#l.value&&this.#s.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#l.value,this.#s.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({crossAxis:!0,limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#s.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#s.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&("bottom"===o||"left"===o||"right"===o||"top"===o)&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0}),required],GlideCoreTooltip.prototype,"label",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"version",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip"),final],GlideCoreTooltip);export default GlideCoreTooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<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--)(r=e[a])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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 packageJson from"../package.json"with{type:"json"};import styles from"./tooltip.styles.js";import"./tooltip.container.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Tooltip=class Tooltip extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=!1,this.#o=!1,this.#i=!1,this.#r=[],this.#s=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#a}set label(e){this.#a=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#n():this.#c();const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.disabled=e);const o=this.#s.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get offset(){return this.#d??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#d=e}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e,e&&t&&!this.disabled?(this.#n(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&!this.disabled&&(this.#c(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get screenreaderHidden(){return this.#i}set screenreaderHidden(e){this.#i=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.screenreaderHidden=e);const o=this.#s.value?.assignedElements().at(0);t&&o&&!this.disabled&&!this.screenreaderHidden?o.setAttribute("aria-describedby",t.id):t&&o&&o.removeAttribute("aria-describedby")}get shortcut(){return this.#r}set shortcut(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.shortcut=e)}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#h)}firstUpdated(){this.#l.value&&(this.#l.value.popover="manual"),this.open&&!this.disabled&&this.#n();const e=document.createElement("glide-core-private-tooltip-container");e.label=this.label,e.screenreaderHidden=this.screenreaderHidden,e.shortcut=this.shortcut,this.append(e)}render(){return html`<div class="component" data-test="component" @mouseover="${this.#m}" @mouseout="${this.#f}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" name="target" @focusin="${this.#u}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#s)}></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" ${ref(this.#l)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" name="private"></slot></div></div></div>`}#e;#y;#p;#t;#o;#i;#a;#d;#h;#r;#s;#l;#w(){clearTimeout(this.#p)}#c(){this.#l.value?.hidePopover(),this.#y?.()}#f(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#l.value?.dataset.openDelay))}#b(){const e=this.querySelector("glide-core-private-tooltip-container"),t=this.#s.value?.assignedElements().at(0);e&&t&&!this.disabled&&!this.screenreaderHidden&&t.setAttribute("aria-describedby",e.id)}#u(){this.open=!0}#v(){this.open=!1}#g(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#E(){this.#p=setTimeout((()=>{this.open=!1}),Number(this.#l.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#s.value&&this.#l.value&&(this.#y=autoUpdate(this.#s.value,this.#l.value,(()=>{(async()=>{if(this.#s.value&&this.#l.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#s.value,this.#l.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({crossAxis:!0,limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#l.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#l.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&("bottom"===o||"left"===o||"right"===o||"top"===o)&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0}),required],Tooltip.prototype,"label",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],Tooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],Tooltip.prototype,"open",null),__decorate([property({reflect:!0})],Tooltip.prototype,"placement",void 0),__decorate([property({attribute:"screenreader-hidden",reflect:!0,type:Boolean})],Tooltip.prototype,"screenreaderHidden",null),__decorate([property({reflect:!0,type:Array})],Tooltip.prototype,"shortcut",null),__decorate([property({reflect:!0})],Tooltip.prototype,"version",void 0),__decorate([state()],Tooltip.prototype,"effectivePlacement",void 0),Tooltip=__decorate([customElement("glide-core-tooltip"),final],Tooltip);export default Tooltip;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`};

package/dist/translations/en.js

@@ -1 +1 @@
-const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",selectAll:"Select all",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noAvailableOptions:"No options available",noMatchingOptions:"No matching options",tooltip:"Tooltip:",severityInformational:"Severity: Informational",severityCritical:"Severity: Critical",severityMedium:"Severity: Medium",success:"Success:",error:"Error:",informational:"Informational:",loading:"Loading",announcedCharacterCount:(t,i)=>`Character count ${t} of ${i}`,displayedCharacterCount:(t,i)=>`${t}/${i}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,itemCount:t=>`${t} items`};export default translation;
+const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",selectAll:"Select all",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noAvailableOptions:"No options available",noMatchingOptions:"No matching options",tooltip:"Tooltip:",severityInformational:"Severity: Informational",severityCritical:"Severity: Critical",severityMedium:"Severity: Medium",success:"Success:",error:"Error:",informational:"Informational:",loading:"Loading",add:"Add",announcedCharacterCount:(i,t)=>`Character count ${i} of ${t}`,displayedCharacterCount:(i,t)=>`${i}/${t}`,clearEntry:i=>`Clear ${i} entry`,editOption:i=>`Edit option: ${i}`,editTag:i=>`Edit tag: ${i}`,removeTag:i=>`Remove tag: ${i}`,itemCount:i=>`${i} items`,maximum:i=>`Maximum ${i}`,setMaximum:i=>`Set maximum ${i}`,minimum:i=>`Minimum ${i}`,setMinimum:i=>`Set minimum ${i}`};export default translation;

package/dist/translations/fr.d.ts

@@ -1,5 +1,5 @@
 import type { Translation } from '../library/localize.js';
-export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions"];
+export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions", "maximum", "setMaximum", "minimum", "setMinimum", "add"];
 type PendingTranslation = (typeof PENDING_STRINGS)[number];
 declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/fr.js

@@ -1 +1 @@
-export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading","noAvailableOptions","noMatchingOptions"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"FERMER",dismiss:"Ignorer",selectAll:"Tout sélectionner",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",tooltip:"Info-bulle :",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} sur ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,editOption:e=>`Modifier l'option : ${e}`,editTag:e=>`Modifier la balise : ${e}`,removeTag:e=>`Enlever la balise : ${e}`,itemCount:e=>`${e} éléments`};export default translation;
+export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading","noAvailableOptions","noMatchingOptions","maximum","setMaximum","minimum","setMinimum","add"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"FERMER",dismiss:"Ignorer",selectAll:"Tout sélectionner",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",tooltip:"Info-bulle :",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} sur ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,editOption:e=>`Modifier l'option : ${e}`,editTag:e=>`Modifier la balise : ${e}`,removeTag:e=>`Enlever la balise : ${e}`,itemCount:e=>`${e} éléments`};export default translation;

package/dist/translations/ja.d.ts

@@ -1,5 +1,5 @@
 import type { Translation } from '../library/localize.js';
-export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions"];
+export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions", "maximum", "setMaximum", "minimum", "setMinimum", "add"];
 type PendingTranslation = (typeof PENDING_STRINGS)[number];
 declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/ja.js

@@ -1 +1 @@
-export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading","noAvailableOptions","noMatchingOptions"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"閉じる",selectAll:"すべて選択",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",tooltip:"ツールチップ：",announcedCharacterCount:(t,e)=>`文字数 ${t}/${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}入力をクリア`,editOption:t=>`編集オプション：${t}`,editTag:t=>`タグの編集：${t}`,removeTag:t=>`タグの削除：${t}`,itemCount:t=>`${t}件`};export default translation;
+export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading","noAvailableOptions","noMatchingOptions","maximum","setMaximum","minimum","setMinimum","add"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"閉じる",selectAll:"すべて選択",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",tooltip:"ツールチップ：",announcedCharacterCount:(t,e)=>`文字数 ${t}/${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}入力をクリア`,editOption:t=>`編集オプション：${t}`,editTag:t=>`タグの編集：${t}`,removeTag:t=>`タグの削除：${t}`,itemCount:t=>`${t}件`};export default translation;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.26.1",
+  "version": "0.28.0",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -52,8 +52,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.12",
-    "@shoelace-style/localize": "^3.2.1",
-    "nanoid": "^5.0.9"
+    "@shoelace-style/localize": "^3.2.1"
   },
   "peerDependencies": {
     "lit": "^3.2.1"
@@ -62,9 +61,10 @@
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.10",
     "@custom-elements-manifest/analyzer": "^0.10.4",
-    "@eslint/eslintrc": "^3.3.0",
-    "@eslint/js": "^9.22.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.28.0",
     "@figma/rest-api-spec": "^0.27.0",
+    "@html-eslint/eslint-plugin": "^0.41.0",
     "@open-wc/testing": "^4.0.0",
     "@playwright/test": "^1.52.0",
     "@rollup/plugin-commonjs": "^28.0.2",
@@ -82,12 +82,12 @@
     "@types/eslint": "^8.56.12",
     "@types/mocha": "^10.0.10",
     "@types/sinon": "^17.0.3",
-    "@typescript-eslint/rule-tester": "^8.29.0",
-    "@typescript-eslint/types": "^8.29.0",
-    "@typescript-eslint/utils": "^8.29.0",
+    "@typescript-eslint/rule-tester": "^8.33.0",
+    "@typescript-eslint/types": "^8.33.0",
+    "@typescript-eslint/utils": "^8.33.0",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/dev-server-rollup": "^0.6.4",
-    "@web/test-runner": "^0.19.0",
+    "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "chalk": "^5.3.0",
@@ -95,8 +95,8 @@
     "comment-parser": "^1.4.1",
     "custom-elements-manifest": "^2.1.0",
     "esbuild": "^0.25.0",
-    "eslint": "^9.22.0",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint": "^9.28.0",
+    "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
@@ -118,8 +118,8 @@
     "postcss": "^8.4.49",
     "postcss-lit": "^1.1.1",
     "prettier": "^3.5.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "rimraf": "^6.0.1",
     "sinon": "^19.0.2",
     "storybook": "^8.6.3",
@@ -133,8 +133,8 @@
     "ts-lit-plugin": "^2.0.2",
     "ts-morph": "^25.0.1",
     "tsx": "^4.19.2",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.29.0",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.33.0",
     "vite": "^6.3.2",
     "vitest": "^3.0.8",
     "yocto-spinner": "^0.2.0"
@@ -154,7 +154,8 @@
     "start:production": "rimraf ./dist && npm-run-all --aggregate-output --print-label --parallel start:production:typescript start:production:storybook start:production:esbuild",
     "start:production:esbuild": "node ./esbuild.js",
     "start:production:cem-analyze": "tsc --noCheck --outDir ./dist && NODE_OPTIONS=--no-warnings=ExperimentalWarning cem analyze --config ./custom-elements.config.js --quiet && git diff --quiet -- || { echo ERROR: Uncommitted elements manifest changes. Run this command locally and commit the changes.; exit 1; }",
-    "start:production:figma": "tsx ./src/figma/run.ts",
+    "start:production:figma:dev-resources": "tsx ./src/figma/dev-resources/run.ts",
+    "start:production:figma:variables": "tsx ./src/figma/variables/run.ts",
     "start:production:storybook": "storybook build --config-dir .storybook --disable-telemetry --output-dir ./dist/storybook",
     "start:production:ts-morph": "tsx ./src/ts-morph/run.ts && git diff --quiet -- || { echo ERROR: Uncommitted code modifications. Run this command locally and commit the changes.; exit 1; }",
     "start:production:typescript": "tsc --noCheck --outDir ./dist && node ./terser.js",
@@ -172,8 +173,8 @@
     "lint:production:stylelint": "tsc --noCheck --outDir ./dist && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --no-color",
     "test": "per-env",
     "test:development": "npm-run-all --parallel test:development:web-test-runner test:development:web-test-runner:serve-coverage",
-    "test:development:playwright": "playwright test --quiet --ui-port 6007 --update-snapshots",
-    "test:development:playwright:update": "rimraf ./src/aria-snapshots && playwright test --quiet --project aria --update-snapshots --workers 100%",
+    "test:development:playwright": "playwright test --quiet --ui-port 6007 --update-snapshots --update-source-method=overwrite",
+    "test:development:playwright:update": "rimraf ./src/aria-snapshots && playwright test --quiet --project aria --update-snapshots --update-source-method=overwrite --workers 100%",
     "test:development:vitest": "vitest --config ./vitest.config.js & chokidar './src/eslint/**' './src/stylelint/**' --ignore './src/eslint/rules/*.test.ts' './src/stylelint/*.test.ts' --initial --silent --command 'tsc --noCheck --outDir ./dist'",
     "test:development:vitest:comment": "Excluded from `test:development` because Vitest muddies the console when running alongside Web Test Runner.",
     "test:development:web-test-runner": "web-test-runner --watch",