@crowdstrike/glide-core 0.29.1 → 0.30.0

package/dist/textarea.js

@@ -1,10 +1,126 @@
-var __decorate=this&&this.__decorate||function(e,t,i,a){var r,s=arguments.length,o=s<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(o=(s<3?r(o):s>3?r(t,i,o):r(t,i))||o);return s>3&&o&&Object.defineProperty(t,i,o),o};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 Textarea=class Textarea 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
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import './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';
+/**
+ * @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 {boolean} [spellcheck=false]
+ * @attr {string} [tooltip]
+ * @attr {string} [value='']
+ *
+ * @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]
+ */
+let Textarea = class Textarea extends LitElement {
+    static { this.formAssociated = true; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+        delegatesFocus: true,
+    }; }
+    static { this.styles = styles; }
+    checkValidity() {
+        this.isCheckingValidity = true;
+        const isValid = this.#internals.checkValidity();
+        this.isCheckingValidity = false;
+        return isValid;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.form?.removeEventListener('formdata', this.#onFormdata);
+    }
+    get form() {
+        return this.#internals.form;
+    }
+    get validity() {
+        if (this.required && !this.value && !this.disabled) {
+            // A validation message is required but unused because we disable native
+            // validation feedback. And an empty string isn't allowed. Thus a single space.
+            this.#internals.setValidity({ customError: Boolean(this.validityMessage), valueMissing: true }, ' ', this.#textareaElementRef.value);
+            return this.#internals.validity;
+        }
+        if (this.required && this.#internals.validity.valueMissing && this.value) {
+            this.#internals.setValidity({});
+            return this.#internals.validity;
+        }
+        if (!this.required &&
+            this.#internals.validity.valueMissing &&
+            !this.value) {
+            this.#internals.setValidity({});
+            return this.#internals.validity;
+        }
+        return this.#internals.validity;
+    }
+    formAssociatedCallback() {
+        this.form?.addEventListener('formdata', this.#onFormdata);
+    }
+    formResetCallback() {
+        this.value = this.getAttribute('value') ?? '';
+    }
+    render() {
+        return html `<glide-core-private-label
       label=${ifDefined(this.label)}
-      split=${ifDefined(this.privateSplit??void 0)}
+      split=${ifDefined(this.privateSplit ?? undefined)}
       tooltip=${ifDefined(this.tooltip)}
       orientation=${this.orientation}
       ?disabled=${this.disabled}
-      ?error=${this.#a||this.#r}
+      ?error=${this.#isShowValidationFeedback ||
+            this.#isMaxCharacterCountExceeded}
       ?hide=${this.hideLabel}
       ?required=${this.required}
     >
@@ -13,8 +129,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,s=arguments.length
       <div class="textarea-container" slot="control">
         <textarea
           aria-describedby="meta"
-          aria-invalid=${this.#a||this.#r}
-          class=${classMap({error:this.#a||this.#r})}
+          aria-invalid=${this.#isShowValidationFeedback ||
+            this.#isMaxCharacterCountExceeded}
+          class=${classMap({
+            error: this.#isShowValidationFeedback ||
+                this.#isMaxCharacterCountExceeded,
+        })}
           data-test="textarea"
           id="textarea"
           name=${ifDefined(this.name)}
@@ -26,18 +146,21 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,s=arguments.length
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          ${ref(this.#i)}
-          @blur=${this.#s}
-          @change=${this.#o}
-          @input=${this.#l}
-          @keydown=${this.#n}
+          ${ref(this.#textareaElementRef)}
+          @blur=${this.#onTextareaBlur}
+          @change=${this.#onTextareaChange}
+          @input=${this.#onTextareaInput}
+          @keydown=${this.#onTextareaKeydown}
         >
         </textarea>
       </div>
 
       <div class="meta" id="meta" slot="description">
         <slot
-          class=${classMap({description:!0,hidden:Boolean(this.#a&&this.validityMessage)})}
+          class=${classMap({
+            description: true,
+            hidden: Boolean(this.#isShowValidationFeedback && this.validityMessage),
+        })}
           name="description"
         >
           <!--
@@ -46,20 +169,231 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var r,s=arguments.length
           -->
         </slot>
 
-        ${when(this.#a&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
+        ${when(this.#isShowValidationFeedback && this.validityMessage, () => html `<span class="validity-message" data-test="validity-message"
               >${unsafeHTML(this.validityMessage)}</span
-            >`))}
-        ${this.maxlength?html`<div
-              class=${classMap({"character-count":!0,error:this.#r})}
+            >`)}
+        ${this.maxlength
+            ? html `<div
+              class=${classMap({
+                'character-count': true,
+                error: this.#isMaxCharacterCountExceeded,
+            })}
               data-test="character-count-container"
             >
               <span aria-hidden="true" data-test="character-count-text">
-                ${this.#d.term("displayedCharacterCount",this.#h,this.maxlength)}
+                ${this.#localize.term('displayedCharacterCount', this.#valueCharacterCount, this.maxlength)}
               </span>
 
               <span class="hidden" data-test="character-count-announcement"
-                >${this.#d.term("announcedCharacterCount",this.#h,this.maxlength)}</span
+                >${this.#localize.term('announcedCharacterCount', this.#valueCharacterCount, this.maxlength)}</span
               >
-            </div>`:nothing}
+            </div>`
+            : nothing}
       </div></glide-core-private-label
-    >`}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.autocapitalize="on",this.autocomplete="on",this.disabled=!1,this.hideLabel=!1,this.name="",this.orientation="horizontal",this.spellcheck=!1,this.required=!1,this.readonly=!1,this.value="",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=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;#d;#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)}#s(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#o(){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)}#n(e){"Enter"===e.key&&(e.metaKey||e.ctrlKey)&&this.form?.requestSubmit()}};__decorate([property({reflect:!0}),required],Textarea.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],Textarea.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0,useDefault:!0})],Textarea.prototype,"autocomplete",void 0),__decorate([property({reflect:!0,type:Boolean})],Textarea.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],Textarea.prototype,"hideLabel",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10),reflect:!0})],Textarea.prototype,"maxlength",void 0),__decorate([property({reflect:!0,useDefault:!0})],Textarea.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],Textarea.prototype,"orientation",void 0),__decorate([property({reflect:!0})],Textarea.prototype,"placeholder",void 0),__decorate([property()],Textarea.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean,useDefault:!0})],Textarea.prototype,"spellcheck",void 0),__decorate([property({reflect:!0,type:Boolean})],Textarea.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],Textarea.prototype,"readonly",void 0),__decorate([property({reflect:!0})],Textarea.prototype,"tooltip",void 0),__decorate([property()],Textarea.prototype,"value",void 0),__decorate([property({reflect:!0})],Textarea.prototype,"version",void 0),__decorate([state()],Textarea.prototype,"isBlurring",void 0),__decorate([state()],Textarea.prototype,"isCheckingValidity",void 0),__decorate([state()],Textarea.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Textarea.prototype,"validityMessage",void 0),Textarea=__decorate([customElement("glide-core-textarea"),final],Textarea);export default Textarea;
+    >`;
+    }
+    reportValidity() {
+        this.isReportValidityOrSubmit = true;
+        const isValid = this.#internals.reportValidity();
+        // Ensures that getters referencing `this.validity.valid` are updated.
+        this.requestUpdate();
+        return isValid;
+    }
+    resetValidityFeedback() {
+        this.isReportValidityOrSubmit = false;
+    }
+    setCustomValidity(message) {
+        this.validityMessage = message;
+        if (message === '') {
+            this.#internals.setValidity({ customError: false }, '', this.#textareaElementRef.value);
+        }
+        else {
+            this.#internals.setValidity({
+                customError: true,
+                valueMissing: this.#internals.validity.valueMissing,
+            }, ' ', this.#textareaElementRef.value);
+        }
+    }
+    setValidity(flags, message) {
+        this.validityMessage = message;
+        this.#internals.setValidity(flags, ' ', this.#textareaElementRef.value);
+    }
+    constructor() {
+        super();
+        this.autocapitalize = 'on';
+        this.autocomplete = 'on';
+        this.disabled = false;
+        this.hideLabel = false;
+        this.name = '';
+        this.orientation = 'horizontal';
+        // It's typed by TypeScript as a boolean. But we treat it as a string throughout.
+        this.spellcheck = false;
+        this.required = false;
+        this.readonly = false;
+        // Intentionally not reflected to match native.
+        this.value = '';
+        this.version = packageJson.version;
+        this.isBlurring = false;
+        this.isCheckingValidity = false;
+        this.isReportValidityOrSubmit = false;
+        this.#localize = new LocalizeController(this);
+        this.#textareaElementRef = createRef();
+        // An arrow function field instead of a method so `this` is closed over and
+        // set to the component instead of `document`.
+        this.#onFormdata = ({ formData }) => {
+            if (this.name && this.value && !this.disabled) {
+                formData.append(this.name, this.value);
+            }
+        };
+        this.#internals = this.attachInternals();
+        // Event handlers on the host aren't great because consumers can remove them.
+        // Unfortunately, the host is the only thing on which this event is dispatched
+        // because it's the host that is form-associated.
+        this.addEventListener('invalid', (event) => {
+            event?.preventDefault(); // Canceled so a native validation message isn't shown.
+            // We only want to focus the input if the "invalid" event resulted from either:
+            //
+            // 1. A form submission.
+            // 2. A call of `reportValidity()` that did not result from the input's "blur"
+            //    event.
+            if (this.isCheckingValidity || this.isBlurring) {
+                return;
+            }
+            this.isReportValidityOrSubmit = true;
+            const isFirstInvalidFormElement = this.form?.querySelector(':invalid') === this;
+            if (isFirstInvalidFormElement) {
+                // - `this.#internals.delegatesFocus` is preferred because it's declarative. But
+                //    it's limited to focusing the first focusable element. That doesn't work for
+                //    us because our first focusable element is the tooltip when it's present.
+                //
+                // - Canceling this event means the input won't get focus, even if we were to use
+                //   `this.#internals.delegatesFocus`.
+                //
+                // - The browser will ignore this if Input isn't the first invalid form control.
+                //
+                // TODO
+                // Try passing `focusVisible` after browsers support it. It may prevent the issue
+                // where the input itself has a focus outline after this call.
+                //
+                // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
+                this.focus();
+            }
+        });
+    }
+    #internals;
+    #localize;
+    #textareaElementRef;
+    // An arrow function field instead of a method so `this` is closed over and
+    // set to the component instead of `document`.
+    #onFormdata;
+    get #isShowValidationFeedback() {
+        return (!this.disabled &&
+            !this.readonly &&
+            !this.validity.valid &&
+            this.isReportValidityOrSubmit);
+    }
+    get #valueCharacterCount() {
+        return this.value.length;
+    }
+    get #isMaxCharacterCountExceeded() {
+        return Boolean(!this.disabled &&
+            !this.readonly &&
+            this.maxlength &&
+            this.#valueCharacterCount > this.maxlength);
+    }
+    #onTextareaBlur() {
+        this.isBlurring = true;
+        this.reportValidity();
+        this.isBlurring = false;
+    }
+    #onTextareaChange() {
+        if (this.#textareaElementRef.value) {
+            this.value = this.#textareaElementRef.value.value;
+        }
+        // Unlike "input" events, "change" events aren't composed. So we have to
+        // manually dispatch them.
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    #onTextareaInput() {
+        if (this.#textareaElementRef.value) {
+            this.value = this.#textareaElementRef.value.value;
+        }
+    }
+    #onTextareaKeydown(event) {
+        if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            this.form?.requestSubmit();
+        }
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Textarea.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Textarea.prototype, "autocapitalize", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Textarea.prototype, "autocomplete", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Textarea.prototype, "disabled", void 0);
+__decorate([
+    property({ attribute: 'hide-label', reflect: true, type: Boolean })
+], Textarea.prototype, "hideLabel", void 0);
+__decorate([
+    property({
+        type: Number,
+        converter(value) {
+            return value && Number.parseInt(value, 10);
+        },
+        reflect: true,
+    })
+], Textarea.prototype, "maxlength", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Textarea.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Textarea.prototype, "orientation", void 0);
+__decorate([
+    property({ reflect: true })
+], Textarea.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], Textarea.prototype, "privateSplit", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean, useDefault: true })
+], Textarea.prototype, "spellcheck", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Textarea.prototype, "required", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Textarea.prototype, "readonly", void 0);
+__decorate([
+    property({ reflect: true })
+], Textarea.prototype, "tooltip", void 0);
+__decorate([
+    property()
+], Textarea.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], Textarea.prototype, "version", void 0);
+__decorate([
+    state()
+], Textarea.prototype, "isBlurring", void 0);
+__decorate([
+    state()
+], Textarea.prototype, "isCheckingValidity", void 0);
+__decorate([
+    state()
+], Textarea.prototype, "isReportValidityOrSubmit", void 0);
+__decorate([
+    state()
+], Textarea.prototype, "validityMessage", void 0);
+Textarea = __decorate([
+    customElement('glide-core-textarea'),
+    final
+], Textarea);
+export default Textarea;

package/dist/textarea.styles.js

@@ -1,6 +1,24 @@
-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`
+import { css, unsafeCSS } from 'lit';
+import visuallyHidden from './styles/visually-hidden.js';
+/*
+  `field-sizing` is only supported in Chrome and Edge
+  at the moment (https://caniuse.com/mdn-css_properties_field-sizing),
+  making this a progressive enhancement. This functionality is additive,
+  rather than required for use with our components.
+
+  `field-sizing` is also not recognized by lit-plugin, so we are seeing
+  https://github.com/runem/lit-analyzer/issues/157 when
+  attempting to use it directly in our CSS below. This use of unsafeCSS
+  is a workaround for that bug for the time being.
+ */
+const fieldSizingContent = unsafeCSS(`
+  field-sizing: content;
+`);
+export default [
+    css `
+    ${visuallyHidden('.character-count .hidden')}
+  `,
+    css `
     glide-core-private-label[orientation='horizontal']::part(private-tooltips) {
       align-items: flex-start;
       margin-block-start: var(--glide-core-spacing-base-sm);
@@ -107,4 +125,5 @@ import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidd
         font-weight: var(--glide-core-typography-weight-bold);
       }
     }
-  `];
+  `,
+];

package/dist/toast.js

@@ -1 +1,130 @@
-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;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import './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';
+/**
+ * @attr {string} label
+ * @attr {number} [duration=5000] - Set to `Infinity` to make it persist until dismissed by the user
+ * @attr {'informational'|'success'|'error'} [variant='informational']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Link | string} - A description
+ *
+ * @fires {Event} dismiss
+ *
+ * @method dismiss
+ */
+let Toast = class Toast extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Set to `Infinity` to make it persist until dismissed by the user
+         **/
+        this.duration = 5000;
+        this.privateDismissing = false;
+        this.privateDismissingViaButton = false;
+        // `privateId` instead of `id` so consumers can specify their own `id` to
+        // determine, via `event.target.id`, which Toast was dismissed and then update
+        // whatever data structure they're using to render Toasts.
+        this.privateId = uniqueId();
+        this.privateShow = false;
+        this.variant = 'informational';
+        this.version = packageJson.version;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    dismiss() {
+        this.dispatchEvent(new Event('dismiss', { bubbles: true, composed: true }));
+        // It's a tough call whether we should remove Toast for the consumers or ask
+        // them should remove it themselves. It's never ideal to manipulate a consumer's
+        // DOM. But a stale element on the page is likely to cause confusion given some
+        // consumers are unlikely to remove it, whether they know they should or not.
+        // For those who do, removing it is an additional and clunky step.
+        this.remove();
+    }
+    // `firstUpdated()` instead of `connectedCallback()` so the Toast isn't shown
+    // before `assertSlot()` has had a chance to check the slot.
+    firstUpdated() {
+        (async () => {
+            // A workaround for a Glimmmer rendering quirk.
+            //
+            // When an attribute's value is dynamic, Glimmer doesn't render it immediately
+            // with the rest of a component's markup. Instead, it appears to schedule setting
+            // the attribute, delaying its render by a tick or so.
+            //
+            // In practice, this means Link receives its attributes sometime between its
+            // `connectedCallback()` and `firstUpdated()` lifecycle methods. So we wait
+            // for `firstUpdated()` via  `updateComplete`. If we don't, Links will be rendered
+            // inside the Toasts component without their attributes.
+            //
+            // This workaround is, of course, dependent on Glimmmer not delaying attribute
+            // rendering past `firstUpdated()`. But it may be the best we can do. If Glimmmer
+            // does change how it renders dynamic attributes, it hopefully renders them sooner
+            // not later.
+            await this.querySelector('glide-core-link')?.updateComplete;
+            Toasts.show(this);
+        })();
+    }
+    render() {
+        // `hidden` is used to avoid a stylesheet for a single style.
+        return html `<slot hidden ${assertSlot([Link, Text], true)}>
+      <!--
+        A description
+        @type {Link | string}
+      -->
+    </slot>`;
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], Toast.prototype, "label", void 0);
+__decorate([
+    property()
+], Toast.prototype, "privateDescription", void 0);
+__decorate([
+    property({ reflect: true, type: Number, useDefault: true })
+], 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: false })
+], Toast.prototype, "privateTimeoutId", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Toast.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], Toast.prototype, "version", void 0);
+Toast = __decorate([
+    customElement('glide-core-toast'),
+    final
+], Toast);
+export default Toast;