@crowdstrike/glide-core 0.19.5 → 0.20.1

package/dist/tag.styles.js

@@ -35,7 +35,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
 
       &.added {
         @media (prefers-reduced-motion: no-preference) {
-          animation: fade-in var(--animation-duration) ease-in-out;
+          animation: fade-in var(--private-animation-duration) ease-in-out;
         }
       }
 
@@ -45,7 +45,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
 
       &.removed {
         @media (prefers-reduced-motion: no-preference) {
-          animation-duration: var(--animation-duration);
+          animation-duration: var(--private-animation-duration);
           animation-fill-mode: forwards;
           animation-name: fade-out;
           animation-timing-function: ease-in-out;
@@ -162,13 +162,13 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &.medium {
-        --size: 0.75rem;
+        --private-size: 0.75rem;
 
         margin-inline-start: 0.375rem;
       }
 
       &.small {
-        --size: 0.625rem;
+        --private-size: 0.625rem;
 
         margin-inline-start: var(--glide-core-spacing-xxs);
       }

package/dist/textarea.d.ts

@@ -7,11 +7,53 @@ declare global {
     }
 }
 /**
- * @event change
- * @event input
- * @event invalid
+ * @attr {string} label
+ * @attr {'on'|'off'|'none'|'sentences'|'words'|'characters'} [autocapitalize='on']
+ * @attr {'on'|'off'} [autocomplete='on']
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {number} [maxlength]
+ * @attr {string} [name='']
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {string} [placeholder='']
+ * @attr {boolean} [readonly=false]
+ * @attr {boolean} [required=false]
+ * @attr {number} [rows=2]
+ * @attr {boolean} [spellcheck=false]
+ * @attr {string} [tooltip]
+ * @attr {string} [value='']
  *
- * @slot description - Additional information or context.
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} [description] - Additional information or context
+ *
+ * @fires {Event} change
+ * @fires {Event} invalid
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method resetValidityFeedback
+ *
+ * @method setCustomValidity
+ * @param {string} message
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ * @param {string} [message]
  */
 export default class GlideCoreTextarea extends LitElement implements FormControl {
     #private;
@@ -35,12 +77,10 @@ export default class GlideCoreTextarea extends LitElement implements FormControl
     privateSplit?: 'left' | 'middle';
     tooltip?: string;
     readonly version: string;
-    blur(): void;
     checkValidity(): boolean;
     disconnectedCallback(): void;
     get form(): HTMLFormElement | null;
     get validity(): ValidityState;
-    get willValidate(): boolean;
     formAssociatedCallback(): void;
     formResetCallback(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/textarea.js

@@ -1,4 +1,5 @@
-var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,s=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{html,LitElement,nothing}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./textarea.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreTextarea=class GlideCoreTextarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}blur(){this.#e.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#t.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get form(){return this.#t.form}get validity(){return!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}get willValidate(){return this.#t.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-private-label
+var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length,s=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(o<3?r(s):o>3?r(t,i,s):r(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{html,LitElement,nothing}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./textarea.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreTextarea=class GlideCoreTextarea extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}checkValidity(){this.isCheckingValidity=!0;const e=this.#e.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#t)}get form(){return this.#e.form}get validity(){return!this.required||this.value||this.disabled?this.required&&this.#e.validity.valueMissing&&this.value?(this.#e.setValidity({}),this.#e.validity):(this.required||!this.#e.validity.valueMissing||this.value||this.#e.setValidity({}),this.#e.validity):(this.#e.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#i.value),this.#e.validity)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#t)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`<glide-core-private-label
+      label=${ifDefined(this.label)}
       split=${ifDefined(this.privateSplit??void 0)}
       tooltip=${ifDefined(this.tooltip)}
       orientation=${this.orientation}
@@ -14,6 +15,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
           aria-describedby="meta"
           aria-invalid=${this.#a||this.#r}
           class=${classMap({error:this.#a||this.#r})}
+          data-test="textarea"
           id="textarea"
           name=${ifDefined(this.name)}
           placeholder=${ifDefined(this.placeholder)}
@@ -25,7 +27,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          ${ref(this.#e)}
+          ${ref(this.#i)}
           @blur=${this.#o}
           @change=${this.#s}
           @input=${this.#l}
@@ -38,7 +40,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
         <slot
           class=${classMap({description:!0,hidden:Boolean(this.#a&&this.validityMessage)})}
           name="description"
-        ></slot>
+        >
+          <!--
+            Additional information or context
+            @type {Element | string}
+          -->
+        </slot>
 
         ${when(this.#a&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
               >${unsafeHTML(this.validityMessage)}</span
@@ -50,9 +57,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,o=arguments.length
               <span aria-hidden="true" data-test="character-count-text">
                 ${this.#n.term("displayedCharacterCount",this.#h,this.maxlength)}
               </span>
+
               <span class="hidden" data-test="character-count-announcement"
                 >${this.#n.term("announcedCharacterCount",this.#h,this.maxlength)}</span
               >
             </div>`:nothing}
       </div></glide-core-private-label
-    >`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#t.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(e,t){this.validityMessage=t,this.#t.setValidity(e," ",this.#e.value)}constructor(){super(),this.value="",this.label="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.name="",this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#n=new LocalizeController(this),this.#e=createRef(),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#t;#n;#e;#i;get#a(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#h(){return this.value.length}get#r(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#h>this.maxlength)}#o(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#s(e){this.#e.value&&(this.value=this.#e.value.value),this.dispatchEvent(new Event(e.type,{bubbles:!0,composed:!0}))}#l(){this.#e.value&&(this.value=this.#e.value.value)}#d(e){"Enter"===e.key&&(e.metaKey||e.ctrlKey)&&this.form?.requestSubmit()}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocomplete",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"version",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"validityMessage",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea")],GlideCoreTextarea);export default GlideCoreTextarea;
+    >`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#e.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#e.setValidity({customError:!1},"",this.#i.value):this.#e.setValidity({customError:!0,valueMissing:this.#e.validity.valueMissing}," ",this.#i.value)}setValidity(e,t){this.validityMessage=t,this.#e.setValidity(e," ",this.#i.value)}constructor(){super(),this.value="",this.hideLabel=!1,this.orientation="horizontal",this.placeholder="",this.rows=2,this.required=!1,this.readonly=!1,this.disabled=!1,this.name="",this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#n=new LocalizeController(this),this.#i=createRef(),this.#t=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#n;#i;#t;get#a(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit}get#h(){return this.value.length}get#r(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#h>this.maxlength)}#o(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#s(){this.#i.value&&(this.value=this.#i.value.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#l(){this.#i.value&&(this.value=this.#i.value.value)}#d(e){"Enter"===e.key&&(e.metaKey||e.ctrlKey)&&this.form?.requestSubmit()}};__decorate([property()],GlideCoreTextarea.prototype,"value",void 0),__decorate([property({reflect:!0}),required],GlideCoreTextarea.prototype,"label",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"placeholder",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTextarea.prototype,"rows",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],GlideCoreTextarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTextarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"autocomplete",void 0),__decorate([property()],GlideCoreTextarea.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreTextarea.prototype,"version",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreTextarea.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreTextarea.prototype,"validityMessage",void 0),GlideCoreTextarea=__decorate([customElement("glide-core-textarea"),final],GlideCoreTextarea);export default GlideCoreTextarea;

package/dist/toasts.d.ts

@@ -1,31 +1,33 @@
-import './toasts.toast.js';
 import { LitElement } from 'lit';
+import GlideCoreToast from './toasts.toast.js';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-toasts': GlideCoreToasts;
     }
 }
-export interface Toast {
-    label: string;
-    description: string;
-    variant: 'error' | 'informational' | 'success';
-    duration?: number;
-}
+/**
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @method add
+ * @param {{
+ *     label: string;
+ *     description: string;
+ *     variant: 'error' | 'informational' | 'success';
+ *     duration?: number; // Defaults to 5000. Set to `Infinity` to make the toast persist until dismissed.
+ *   }} toast
+ * @returns GlideCoreToast
+ */
 export default class GlideCoreToasts extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     readonly version: string;
-    /**
-     * @param {number} [toast.duration=5000]
-     *  Optional: Number of milliseconds before the Toast auto-hides.
-     *  Minimum: `5000`. Default: `5000`. For a Toast that never auto-hides, set to `Infinity`
-     *  */
-    add(toast: Toast): import("./toasts.toast.js").default & {
-        variant: "error" | "informational" | "success";
+    add(toast: {
         label: string;
         description: string;
-        duration: number | undefined;
-    };
+        variant: 'error' | 'informational' | 'success';
+        duration?: number;
+    }): GlideCoreToast;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/toasts.js

@@ -1 +1 @@
-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 n=e.length-1;n>=0;n--)(s=e[n])&&(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{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./toasts.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}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&&(this.#e.value.popover="manual",this.#e.value.showPopover(),this.#e.value.append(i)),i.addEventListener("close",(()=>{i.remove(),0===this.#e.value?.querySelectorAll("glide-core-toast").length&&this.#e.value?.hidePopover()}),{once:!0}),i}render(){return html`<div class="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e;#t};__decorate([property({reflect:!0})],GlideCoreToasts.prototype,"version",void 0),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 n=e.length-1;n>=0;n--)(s=e[n])&&(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{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./toasts.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import GlideCoreToast from"./toasts.toast.js";let GlideCoreToasts=class GlideCoreToasts extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=createRef(),this.#t=new LocalizeController(this)}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}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&&(this.#e.value.popover="manual",this.#e.value.showPopover(),this.#e.value.append(i)),i.addEventListener("close",(()=>{i.remove(),0===this.#e.value?.querySelectorAll("glide-core-toast").length&&this.#e.value?.hidePopover()}),{once:!0}),i}render(){return html`<div class="component" data-test="component" role="region" tabindex="-1" aria-label="${this.#t.term("notifications")}" ${ref(this.#e)}></div>`}#e;#t};__decorate([property({reflect:!0})],GlideCoreToasts.prototype,"version",void 0),GlideCoreToasts=__decorate([customElement("glide-core-toasts"),final],GlideCoreToasts);export default GlideCoreToasts;

package/dist/toasts.toast.d.ts

@@ -1,23 +1,29 @@
 import './icon-button.js';
-import './tooltip.js';
 import { LitElement } from 'lit';
-import type { Toast } from './toasts.js';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-toast': GlideCoreToast;
     }
 }
 /**
- * @private
- * */
+ * @attr {string} [description]
+ * @attr {number} [duration=5000]
+ * @attr {string} [label]
+ * @attr {'error'|'informational'|'success'} [variant]
+ *
+ * @fires {Event} close
+ *
+ * @method close
+ * @method open
+ */
 export default class GlideCoreToast extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     label?: string;
     description?: string;
-    variant?: Toast['variant'];
     duration?: number | undefined;
+    variant?: 'error' | 'informational' | 'success';
     close(): void;
     firstUpdated(): void;
     open(): void;

package/dist/toasts.toast.js

@@ -1 +1 @@
-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"./icon-button.js";import"./tooltip.js";import{html,LitElement}from"lit";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}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LocalizeController}from"./library/localize.js";import styles from"./toasts.toast.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.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:shadowRootMode}}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,error:"error"===this.variant,informational:"informational"===this.variant,success:"success"===this.variant})}" role="alert" aria-labelledby="label description" ${ref(this.#e)}>${choose(this.variant,[["success",()=>icons.success],["error",()=>icons.error]],(()=>icons.warningInformational))}<div class="label" id="label">${this.label}</div><glide-core-icon-button label="${this.#t.term("close")}" variant="tertiary" class="close-button" @click="${this.#o}">${xIcon}</glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#o(){this.close()}};__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;const icons={error:html`<svg aria-hidden="true" class="icon error" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 0.833328C4.93737 0.833328 0.833313 4.93738 0.833313 9.99999C0.833313 15.0626 4.93737 19.1667 9.99998 19.1667C15.0626 19.1667 19.1666 15.0626 19.1666 9.99999C19.1666 4.93738 15.0626 0.833328 9.99998 0.833328ZM13.0892 6.91074C13.4147 7.23618 13.4147 7.76381 13.0892 8.08925L11.1785 9.99999L13.0892 11.9107C13.4147 12.2362 13.4147 12.7638 13.0892 13.0892C12.7638 13.4147 12.2362 13.4147 11.9107 13.0892L9.99998 11.1785L8.08923 13.0892C7.7638 13.4147 7.23616 13.4147 6.91072 13.0892C6.58529 12.7638 6.58529 12.2362 6.91072 11.9107L8.82147 9.99999L6.91072 8.08925C6.58529 7.76381 6.58529 7.23618 6.91072 6.91074C7.23616 6.5853 7.7638 6.5853 8.08923 6.91074L9.99998 8.82148L11.9107 6.91074C12.2362 6.5853 12.7638 6.5853 13.0892 6.91074Z" fill="currentColor"/></svg>`,success:html`<svg aria-hidden="true" class="icon success" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833336C4.93738 0.833336 0.833328 4.93739 0.833328 10C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 10C19.1667 4.93739 15.0626 0.833336 9.99999 0.833336ZM14.3392 8.08926C14.6647 7.76382 14.6647 7.23618 14.3392 6.91075C14.0138 6.58531 13.4862 6.58531 13.1607 6.91075L8.74999 11.3215L6.83925 9.41075C6.51381 9.08531 5.98618 9.08531 5.66074 9.41075C5.3353 9.73618 5.3353 10.2638 5.66074 10.5893L8.16074 13.0893C8.48618 13.4147 9.01381 13.4147 9.33925 13.0893L14.3392 8.08926Z" fill="currentColor"/></svg>`,warningInformational:html`<svg aria-hidden="true" class="icon warning-informational" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833328C4.93738 0.833328 0.833328 4.93738 0.833328 9.99999C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 9.99999C19.1667 4.93738 15.0626 0.833328 9.99999 0.833328ZM10.8333 6.66666C10.8333 6.20642 10.4602 5.83333 9.99999 5.83333C9.53976 5.83333 9.16666 6.20642 9.16666 6.66666V9.99999C9.16666 10.4602 9.53976 10.8333 9.99999 10.8333C10.4602 10.8333 10.8333 10.4602 10.8333 9.99999V6.66666ZM9.99999 12.5C9.53976 12.5 9.16666 12.8731 9.16666 13.3333C9.16666 13.7936 9.53976 14.1667 9.99999 14.1667H10.0083C10.4686 14.1667 10.8417 13.7936 10.8417 13.3333C10.8417 12.8731 10.4686 12.5 10.0083 12.5H9.99999Z" 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 n=e.length-1;n>=0;n--)(r=e[n])&&(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"./icon-button.js";import{html,LitElement}from"lit";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}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LocalizeController}from"./library/localize.js";import styles from"./toasts.toast.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.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:shadowRootMode}}static{this.styles=styles}close(){this.#e.value?.addEventListener("transitionend",(()=>{this.#e.value?.classList.remove("open","closing"),this.#e.value?.classList.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),this.#e.value?.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 aria-labelledby="label description" class="${classMap({component:!0,error:"error"===this.variant,informational:"informational"===this.variant,success:"success"===this.variant})}" data-test="component" role="alert" ${ref(this.#e)}>${choose(this.variant,[["success",()=>icons.success],["error",()=>icons.error]],(()=>icons.warningInformational))}<div class="label" id="label">${this.label}</div><glide-core-icon-button class="close-button" data-test="close-button" label="${this.#t.term("close")}" variant="tertiary" @click="${this.#o}">${xIcon}</glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}#e;#t;#o(){this.close()}};__decorate([property({reflect:!0})],GlideCoreToast.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreToast.prototype,"description",void 0),__decorate([property({type:Number})],GlideCoreToast.prototype,"duration",void 0),__decorate([property()],GlideCoreToast.prototype,"variant",void 0),GlideCoreToast=__decorate([customElement("glide-core-toast"),final],GlideCoreToast);export default GlideCoreToast;const icons={error:html`<svg aria-hidden="true" class="icon error" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99998 0.833328C4.93737 0.833328 0.833313 4.93738 0.833313 9.99999C0.833313 15.0626 4.93737 19.1667 9.99998 19.1667C15.0626 19.1667 19.1666 15.0626 19.1666 9.99999C19.1666 4.93738 15.0626 0.833328 9.99998 0.833328ZM13.0892 6.91074C13.4147 7.23618 13.4147 7.76381 13.0892 8.08925L11.1785 9.99999L13.0892 11.9107C13.4147 12.2362 13.4147 12.7638 13.0892 13.0892C12.7638 13.4147 12.2362 13.4147 11.9107 13.0892L9.99998 11.1785L8.08923 13.0892C7.7638 13.4147 7.23616 13.4147 6.91072 13.0892C6.58529 12.7638 6.58529 12.2362 6.91072 11.9107L8.82147 9.99999L6.91072 8.08925C6.58529 7.76381 6.58529 7.23618 6.91072 6.91074C7.23616 6.5853 7.7638 6.5853 8.08923 6.91074L9.99998 8.82148L11.9107 6.91074C12.2362 6.5853 12.7638 6.5853 13.0892 6.91074Z" fill="currentColor"/></svg>`,success:html`<svg aria-hidden="true" class="icon success" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833336C4.93738 0.833336 0.833328 4.93739 0.833328 10C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 10C19.1667 4.93739 15.0626 0.833336 9.99999 0.833336ZM14.3392 8.08926C14.6647 7.76382 14.6647 7.23618 14.3392 6.91075C14.0138 6.58531 13.4862 6.58531 13.1607 6.91075L8.74999 11.3215L6.83925 9.41075C6.51381 9.08531 5.98618 9.08531 5.66074 9.41075C5.3353 9.73618 5.3353 10.2638 5.66074 10.5893L8.16074 13.0893C8.48618 13.4147 9.01381 13.4147 9.33925 13.0893L14.3392 8.08926Z" fill="currentColor"/></svg>`,warningInformational:html`<svg aria-hidden="true" class="icon warning-informational" fill="none" viewBox="0 0 20 20" style="${styleMap({height:"1.25rem",width:"1.25rem"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 0.833328C4.93738 0.833328 0.833328 4.93738 0.833328 9.99999C0.833328 15.0626 4.93738 19.1667 9.99999 19.1667C15.0626 19.1667 19.1667 15.0626 19.1667 9.99999C19.1667 4.93738 15.0626 0.833328 9.99999 0.833328ZM10.8333 6.66666C10.8333 6.20642 10.4602 5.83333 9.99999 5.83333C9.53976 5.83333 9.16666 6.20642 9.16666 6.66666V9.99999C9.16666 10.4602 9.53976 10.8333 9.99999 10.8333C10.4602 10.8333 10.8333 10.4602 10.8333 9.99999V6.66666ZM9.99999 12.5C9.53976 12.5 9.16666 12.8731 9.16666 13.3333C9.16666 13.7936 9.53976 14.1667 9.99999 14.1667H10.0083C10.4686 14.1667 10.8417 13.7936 10.8417 13.3333C10.8417 12.8731 10.4686 12.5 10.0083 12.5H9.99999Z" fill="currentColor"/></svg>`};

package/dist/toasts.toast.styles.js

@@ -62,7 +62,7 @@ import{css}from"lit";export default[css`
     }
 
     .close-button {
-      --icon-color: var(--glide-core-icon-default2);
+      --private-icon-color: var(--glide-core-icon-default2);
 
       grid-column: 3;
     }

package/dist/toggle.d.ts

@@ -6,10 +6,20 @@ declare global {
     }
 }
 /**
- * @event change
- * @event input
+ * @attr {string} label
+ * @attr {boolean} [checked=false]
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {string} [summary]
+ * @attr {string} [tooltip]
  *
- * @slot description - Additional information or context.
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} [description] - Additional information or context
+ *
+ * @fires {Event} change
  */
 export default class GlideCoreToggle extends LitElement {
     #private;
@@ -20,7 +30,6 @@ export default class GlideCoreToggle extends LitElement {
     hideLabel: boolean;
     label?: string;
     orientation: 'horizontal' | 'vertical';
-    name?: string;
     privateSplit?: 'left' | 'middle';
     summary?: string;
     tooltip?: string;

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 packageJson from"../package.json"with{type:"json"};import styles from"./toggle.styles.js";import shadowRootMode from"./library/shadow-root-mode.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 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><div slot="summary" id="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(e.type,{bubbles:!0,composed:!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})],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()],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")],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 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({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}),required],GlideCoreToggle.prototype,"label",void 0),__decorate([property({reflect:!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;

package/dist/toggle.styles.js

@@ -8,7 +8,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     }
 
     .toggle-and-input {
-      --inline-size: 1.5rem;
+      --private-inline-size: 1.5rem;
 
       align-items: center;
       background-color: var(--glide-core-surface-selected-disabled);
@@ -17,7 +17,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       border-radius: var(--glide-core-spacing-sm);
       display: flex;
       flex-shrink: 0; /* Don't shrink when the summary wraps. */
-      inline-size: var(--inline-size);
+      inline-size: var(--private-inline-size);
       justify-content: center;
       position: relative;
 
@@ -58,7 +58,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         inline-size: 0.875rem;
         inset-inline-end: 0;
         position: absolute;
-        transform: translateX(calc(var(--inline-size) * -1 + 100%));
+        transform: translateX(calc(var(--private-inline-size) * -1 + 100%));
         transition: 150ms transform;
       }
     }

package/dist/tooltip.container.d.ts

@@ -1,18 +1,27 @@
 import { LitElement } from 'lit';
-import { type Placement } from '@floating-ui/dom';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-private-tooltip-container': GlideCoreTooltipContainer;
     }
 }
+/**
+ * @attr {boolean} [disabled=false]
+ * @attr {string} [label]
+ * @attr {'bottom'|'left'|'right'|'top'} [placement]
+ * @attr {boolean} [screenreader-hidden=false]
+ * @attr {string[]} [shortcut=[]]
+ */
 export default class GlideCoreTooltipContainer extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    /**
+     * @default false
+     */
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
     label?: string;
-    placement?: Placement;
+    placement?: 'bottom' | 'left' | 'right' | 'top';
     screenreaderHidden: boolean;
     shortcut: string[];
     connectedCallback(): void;

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 d=e.length-1;d>=0;d--)(i=e[d])&&(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{}from"@floating-ui/dom";import{map}from"lit/directives/map.js";import styles from"./tooltip.container.styles.js";import shadowRootMode from"./library/shadow-root-mode.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({type:Boolean})],GlideCoreTooltipContainer.prototype,"screenreaderHidden",void 0),__decorate([property({type:Array})],GlideCoreTooltipContainer.prototype,"shortcut",void 0),GlideCoreTooltipContainer=__decorate([customElement("glide-core-private-tooltip-container")],GlideCoreTooltipContainer);export default GlideCoreTooltipContainer;
+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;

package/dist/tooltip.d.ts

@@ -6,25 +6,62 @@ declare global {
     }
 }
 /**
- * @event toggle
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ * @attr {number} [offset=4]
+ * @attr {boolean} [open=false]
+ * @attr {'bottom'|'left'|'right'|'top'} [placement] - The placement of the tooltip relative to its target. Automatic placement will take over if the tooltip is cut off by the viewport.
+ * @attr {boolean} [screenreader-hidden=false]
+ * @attr {string[]} [shortcut=[]]
  *
- * @slot target - The element to which the tooltip will anchor.
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {GlideCoreTooltipContainer} [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 {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    /**
+     * @default false
+     */
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
-    get label(): string;
+    /**
+     * @default undefined
+     */
+    get label(): string | undefined;
     set label(label: string);
+    /**
+     * @default 4
+     */
     get offset(): number;
     set offset(offset: number);
+    /**
+     * @default false
+     */
     get open(): boolean;
+    /**
+     * @default false
+     */
     set open(isOpen: boolean);
+    /**
+     * The placement of the tooltip relative to its target. Automatic placement will
+     * take over if the tooltip is cut off by the viewport.
+     */
     placement?: 'bottom' | 'left' | 'right' | 'top';
+    /**
+     * @default false
+     */
     get screenreaderHidden(): boolean;
     set screenreaderHidden(isHidden: boolean);
+    /**
+     * @default []
+     */
     get shortcut(): string[];
     set shortcut(shortcut: string[]);
     readonly version: string;

package/dist/tooltip.js

@@ -1 +1 @@
-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";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.#s=[],this.#l=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}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 label(){return this.#r}set label(e){this.#r=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-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.#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.#s}set shortcut(e){this.#s=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.#a.value&&(this.#a.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.#u}"><div class="target-slot-container"><slot class="target-slot" data-test="target-slot" @focusin="${this.#f}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#b}" ${assertSlot()} ${ref(this.#l)} name="target"></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.#a)}><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;#r;#c;#h;#s;#l;#a;#w(){clearTimeout(this.#p)}#d(){this.#a.value?.hidePopover(),this.#y?.()}#u(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#a.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)}#f(){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.#a.value?.dataset.closeDelay))}#n(){this.disabled||(this.#y?.(),this.#l.value&&this.#a.value&&(this.#y=autoUpdate(this.#l.value,this.#a.value,(()=>{(async()=>{if(this.#l.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#l.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.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.#a.value.showPopover();const r=this.querySelector("glide-core-private-tooltip-container");r&&(r.placement=o)}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0})],GlideCoreTooltip.prototype,"label",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")],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,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 disabled(){return this.#t}set disabled(e){this.#t=e,this.open&&!e?this.#a():this.#n();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 label(){return this.#d}set label(e){this.#d=e;const t=this.querySelector("glide-core-private-tooltip-container");t&&(t.label=e)}get offset(){return this.#c??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-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.#a(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#n(),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.#a();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" @focusin="${this.#u}" @focusout="${this.#v}" @keydown="${this.#g}" @slotchange="${this.#y}" ${assertSlot()} ${ref(this.#l)} name="target"></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;#b;#p;#t;#o;#i;#d;#c;#h;#r;#l;#s;#w(){clearTimeout(this.#p)}#n(){this.#s.value?.hidePopover(),this.#b?.()}#f(){this.#E(),clearTimeout(this.#h)}#m(){this.#w(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#s.value?.dataset.openDelay))}#y(){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))}#a(){this.disabled||(this.#b?.(),this.#l.value&&this.#s.value&&(this.#b=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,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0}),required],GlideCoreTooltip.prototype,"label",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>`};

package/dist/tooltip.styles.js

@@ -3,7 +3,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     ${focusOutline(".target-slot:focus-visible")}
   `,css`
     :host {
-      // https://github.com/CrowdStrike/glide-core/pull/307/files#r1718545771
+      /* https://github.com/CrowdStrike/glide-core/pull/307/files#r1718545771 */
       display: inline-block;
     }
 
@@ -74,8 +74,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     }
 
     .arrow {
-      --arrow-height: 0.375rem;
-      --arrow-width: 0.625rem;
+      --private-arrow-height: 0.375rem;
+      --private-arrow-width: 0.625rem;
 
       color: var(--glide-core-surface-base-dark);
       display: flex;
@@ -83,14 +83,14 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
       &.top,
       &.bottom {
-        block-size: var(--arrow-height);
-        inline-size: var(--arrow-width);
+        block-size: var(--private-arrow-height);
+        inline-size: var(--private-arrow-width);
       }
 
       &.right,
       &.left {
-        block-size: var(--arrow-width);
-        inline-size: var(--arrow-height);
+        block-size: var(--private-arrow-width);
+        inline-size: var(--private-arrow-height);
         order: 2;
       }
     }

package/dist/tree.d.ts

@@ -6,7 +6,13 @@ declare global {
     }
 }
 /**
- * @slot - One or more of `<glide-core-tree-item>`.
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {GlideCoreTreeItem}
+ *
+ * @method selectItem
+ * @param {GlideCoreTreeItem} item
  */
 export default class GlideCoreTree extends LitElement {
     #private;