@crowdstrike/glide-core 0.5.0

package/dist/tab.styles.js

@@ -0,0 +1,83 @@
+"use strict";import{css as e}from"lit";export default[e`
+    .component {
+      align-items: center;
+      cursor: pointer;
+      display: inline-flex;
+      font-family: var(--glide-core-heading-xxs-font-family);
+      font-size: var(--glide-core-heading-xxxs-font-size);
+      font-style: var(--glide-core-heading-xxs-font-style);
+      gap: 0.4375rem;
+      justify-content: center;
+      line-height: 1.1875rem;
+      padding-block: var(--glide-core-spacing-xs);
+      padding-inline: var(--glide-core-spacing-md);
+    }
+
+    /* Primary */
+
+    .primary {
+      border: 1px solid transparent;
+      border-block-end-width: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--glide-core-spacing-sm);
+      border-start-start-radius: var(--glide-core-spacing-sm);
+      font-weight: var(--glide-core-heading-xxs-font-weight);
+
+      &.active,
+      &.tab:hover:not(.disabled) {
+        background-color: var(--glide-core-surface-base);
+        border: 1px solid var(--glide-core-border-primary);
+
+        /* hide the outer tab-group bottom border */
+        border-block-end: 1px solid var(--glide-core-surface-base);
+        margin-block-end: -1px;
+      }
+    }
+
+    .tab:hover {
+      color: var(--glide-core-text-primary);
+    }
+
+    .disabled {
+      border: none;
+      color: var(--glide-core-text-tertiary-disabled);
+      pointer-events: none;
+    }
+
+    /* Secondary */
+
+    .secondary {
+      border-color: transparent;
+      border-style: solid;
+      border-width: 1px;
+      font-weight: var(--glide-core-body-sm-font-weight);
+
+      &.active {
+        border-block-end: 2px solid var(--glide-core-border-focus);
+      }
+    }
+
+    /* Vertical */
+
+    .vertical {
+      flex-direction: column;
+      font-weight: var(--glide-core-body-sm-font-weight);
+      padding-inline: var(--glide-core-spacing-xxs);
+
+      & .default-slot {
+        transform: rotate(180deg);
+        writing-mode: vertical-lr;
+      }
+
+      &.active {
+        border-inline-start: 2px solid var(--glide-core-border-focus);
+      }
+
+      &.active,
+      &.disabled,
+      &.tab-wrapper:hover {
+        background-color: var(--glide-core-surface-base);
+      }
+    }
+  `];

package/dist/tab.test.basics.d.ts

@@ -0,0 +1 @@
+import './tab.js';

package/dist/tabs.stories.d.ts

@@ -0,0 +1,9 @@
+import './tab.group.js';
+import './tab.js';
+import './tab.panel.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Primary: StoryObj;
+export declare const Secondary: StoryObj;
+export declare const Vertical: StoryObj;

package/dist/tag.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-tag': GlideCoreTag;
+    }
+}
+/**
+ * @description A tag component to categorize information.
+ *
+ * @event remove - Emitted when `glide-core-tag` is removed
+ *
+ * @slot - The content of the tag
+ *
+ * @slot prefix - A slot for an optional icon
+ */
+export default class GlideCoreTag extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    size: 'small' | 'medium' | 'large';
+    removableLabel?: string | undefined;
+    click(): void;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/tag.js

@@ -0,0 +1 @@
+"use strict";var y=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var h=(t,e,o,c)=>{for(var s=c>1?void 0:c?H(e,o):e,E=t.length-1,L;E>=0;E--)(L=t[E])&&(s=(c?L(e,o,s):L(s))||s);return c&&s&&y(e,o,s),s};var k=(t,e,o)=>{if(!e.has(t))throw TypeError("Cannot "+o)};var i=(t,e,o)=>(k(t,e,"read from private field"),o?o.call(t):e.get(t)),r=(t,e,o)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,o)};var g=(t,e,o)=>(k(t,e,"access private method"),o);var m,a,n,v,p,f,b,x;import{LitElement as w,html as $}from"lit";import{classMap as M}from"lit/directives/class-map.js";import{createRef as u,ref as d}from"lit/directives/ref.js";import{customElement as z,property as R}from"lit/decorators.js";import{owSlot as S}from"./library/ow.js";import{when as D}from"lit/directives/when.js";import j from"./tag.styles.js";let l=class extends w{constructor(){super(...arguments);r(this,b);this.size="medium";this.removableLabel="";r(this,m,u());r(this,a,u());r(this,n,u());r(this,v,u());r(this,p,200);r(this,f,()=>{new Promise(()=>setTimeout(()=>{this.remove()},i(this,p))),i(this,a).value?.classList.toggle("activate"),i(this,a).value?.classList.toggle("deactivate"),this.dispatchEvent(new Event("remove"))})}click(){i(this,m).value?.click()}firstUpdated(){S(i(this,n).value)}render(){return $`<div class="${M({component:!0,activate:!0,[this.size]:!0})}" ${d(i(this,a))}><slot name="prefix" ${d(i(this,v))}></slot><slot @slotchange="${g(this,b,x)}" ${d(i(this,n))}></slot>${D(this.removableLabel,()=>$`<button type="button" class="${M({[this.size]:!0})}" aria-label="Remove ${this.removableLabel}" data-test="button" ${d(i(this,m))} @click="${i(this,f)}"><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>`)}</div>`}};m=new WeakMap,a=new WeakMap,n=new WeakMap,v=new WeakMap,p=new WeakMap,f=new WeakMap,b=new WeakSet,x=function(){S(i(this,n).value)},l.shadowRootOptions={...w.shadowRootOptions,delegatesFocus:!0,mode:"closed"},l.styles=j,h([R({reflect:!0})],l.prototype,"size",2),h([R({attribute:"removable-label"})],l.prototype,"removableLabel",2),l=h([z("glide-core-tag")],l);export{l as default};

package/dist/tag.stories.d.ts

@@ -0,0 +1,9 @@
+import './icons/storybook.js';
+import './tag.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;
+export declare const DefaultWithPrefixIcon: StoryObj;
+export declare const Removable: StoryObj;
+export declare const RemovableWithIcon: StoryObj;

package/dist/tag.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/tag.styles.js

@@ -0,0 +1,133 @@
+"use strict";import{css as e}from"lit";import i from"./styles/focus-outline.js";export default[e`
+    .component {
+      align-items: center;
+      background: var(--glide-core-surface-base);
+      border-radius: var(--glide-core-border-radius-round);
+      color: var(--glide-core-text-body-1);
+      display: inline-flex;
+      font-family: var(--glide-core-body-xs-font-family);
+      font-size: var(--glide-core-body-xs-font-size);
+      font-style: var(--glide-core-body-xs-font-variant);
+      font-weight: var(--glide-core-body-xs-font-weight);
+      justify-content: center;
+      line-height: 1;
+      margin: 0;
+      min-block-size: var(--glide-core-spacing-md);
+      opacity: 1;
+      overflow: hidden;
+      padding: var(--glide-core-spacing-xxxs) var(--glide-core-spacing-xs);
+
+      &.large {
+        min-block-size: 0.875rem;
+        padding: var(--glide-core-spacing-xxs) var(--glide-core-spacing-sm);
+      }
+
+      &.small {
+        font-size: 0.625rem;
+        min-block-size: var(--glide-core-spacing-md);
+        padding: 0 var(--glide-core-spacing-xs);
+      }
+
+      &.activate {
+        animation: fade-in 100ms ease-in-out;
+      }
+
+      &.deactivate {
+        animation: fade-out 200ms ease-in-out;
+        animation-fill-mode: forwards;
+      }
+
+      & ::slotted([slot='prefix']) {
+        --size: var(--glide-core-spacing-sm);
+
+        align-items: center;
+        block-size: var(--glide-core-spacing-sm);
+        display: flex;
+        inline-size: var(--glide-core-spacing-sm);
+        justify-content: center;
+        margin-inline-end: 0.375rem;
+      }
+
+      &.small ::slotted([slot='prefix']) {
+        --size: 0.625rem;
+
+        align-items: center;
+        block-size: 0.625rem;
+        display: flex;
+        inline-size: 0.625rem;
+        justify-content: center;
+        margin-inline-end: var(--glide-core-spacing-xxs);
+      }
+
+      &.large ::slotted([slot='prefix']) {
+        --size: 0.875rem;
+
+        align-items: center;
+        block-size: 0.875rem;
+        display: flex;
+        inline-size: 0.875rem;
+        justify-content: center;
+        margin-inline-end: var(--glide-core-spacing-xs);
+      }
+    }
+
+    @keyframes fade-in {
+      0% {
+        opacity: 0;
+      }
+
+      100% {
+        opacity: 1;
+      }
+    }
+
+    @keyframes fade-out {
+      0% {
+        opacity: 1;
+      }
+
+      100% {
+        opacity: 0;
+      }
+    }
+
+    button {
+      align-items: center;
+      background-color: transparent;
+      block-size: var(--glide-core-spacing-sm);
+      border: none;
+      color: var(--glide-core-icon-display);
+      cursor: pointer;
+      display: flex;
+      inline-size: var(--glide-core-spacing-sm);
+      justify-content: center;
+      margin: 0;
+      margin-inline-start: 0.375rem;
+      padding: 0;
+      transition: color 200ms ease-in-out;
+
+      &.large {
+        block-size: 0.875rem;
+        inline-size: 0.875rem;
+        margin-inline-start: var(--glide-core-spacing-xs);
+      }
+
+      &.small {
+        block-size: 0.625rem;
+        inline-size: 0.6215rem;
+        margin-inline-start: var(--glide-core-spacing-xxs);
+      }
+
+      &:hover {
+        color: var(--glide-core-icon-primary-hover);
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        ${i};
+      }
+    }
+  `];

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

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

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

@@ -0,0 +1 @@
+import './tag.js';

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

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

package/dist/textarea.d.ts

@@ -0,0 +1,49 @@
+import './label.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-textarea': GlideCoreTextarea;
+    }
+}
+/**
+ * @description A textarea with a label and optional description and toolip. Participates in forms and validation via `FormData` and various methods.
+ *
+ * @event change - (same as native textarea's `change` event)
+ * @event input - (same as native textarea's `input` event)
+ *
+ * @slot tooltip - Content for the tooltip.
+ * @slot description - Additional information or context.
+ */
+export default class GlideCoreTextarea extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult;
+    value: string;
+    label?: string;
+    hideLabel?: boolean | undefined;
+    orientation: 'horizontal' | 'vertical';
+    placeholder?: string;
+    rows: number;
+    required: boolean;
+    readonly: boolean;
+    disabled: boolean;
+    maxlength?: number;
+    name?: string;
+    spellcheck: boolean;
+    autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
+    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>;
+    reportValidity(): boolean;
+    updated(): void;
+    constructor();
+    private isCheckingValidity;
+    private isReportValidityOrSubmit;
+}

package/dist/textarea.js

@@ -0,0 +1,2 @@
+"use strict";var O=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var l=(a,s,t,d)=>{for(var u=d>1?void 0:d?N(s,t):s,E=a.length-1,k;E>=0;E--)(k=a[E])&&(u=(d?k(s,t,u):k(u))||u);return d&&u&&O(s,t,u),u};var w=(a,s,t)=>{if(!s.has(a))throw TypeError("Cannot "+t)};var e=(a,s,t)=>(w(a,s,"read from private field"),t?t.call(a):s.get(a)),o=(a,s,t)=>{if(s.has(a))throw TypeError("Cannot add the same private member more than once");s instanceof WeakSet?s.add(a):s.set(a,t)},S=(a,s,t,d)=>(w(a,s,"write to private field"),d?d.call(a,t):s.set(a,t),t);var c=(a,s,t)=>(w(a,s,"access private method"),t);var n,h,f,b,R,m,p,$,F,V,M,y,I,v,g;import"./label.js";import{LitElement as A,html as q}from"lit";import{classMap as z}from"lit/directives/class-map.js";import{createRef as D,ref as H}from"lit/directives/ref.js";import{customElement as U,property as r,state as B}from"lit/decorators.js";import{ifDefined as L}from"lit/directives/if-defined.js";import{when as j}from"lit/directives/when.js";import x from"./textarea.styles.js";let i=class extends A{constructor(){super();o(this,b);o(this,m);o(this,$);o(this,V);o(this,y);o(this,v);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.spellcheck=!1;this.autocapitalize="on";this.isCheckingValidity=!1;this.isReportValidityOrSubmit=!1;o(this,n,void 0);o(this,h,D());o(this,f,({formData:t})=>{this.value.length>0&&this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)});S(this,n,this.attachInternals()),this.addEventListener("invalid",c(this,y,I))}blur(){e(this,h).value?.blur()}checkValidity(){return this.isCheckingValidity=!0,e(this,n).checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",e(this,f)),this.removeEventListener("invalid",c(this,y,I))}get form(){return e(this,n).form}get validity(){return e(this,n).validity}get willValidate(){return e(this,n).willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",e(this,f))}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return q`<glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${e(this,b,R)||e(this,m,p)}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label class="label" for="textarea">${this.label}</label><div class="textarea-container" slot="control"><textarea class="${z({error:e(this,b,R)||e(this,m,p)})}" id="textarea" name="${L(this.name)}" placeholder="${L(this.placeholder)}" rows="${this.rows}" autocapitalize="${L(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" aria-describedby="meta" ${H(e(this,h))} @input="${c(this,V,M)}" @change="${c(this,$,F)}">
+        </textarea></div><div class="meta" data-test-description-container id="meta" slot="description"><slot name="description"></slot>${j(this.maxlength,()=>q`<div class="${z({"character-count":!0,error:e(this,m,p)})}" data-test-maxlength>${this.value.length}/${this.maxlength}</div>`)}</div></glide-core-label>`}reportValidity(){return e(this,n).reportValidity()}updated(){e(this,h).value&&(e(this,h).value.value=this.value),c(this,v,g).call(this)}};n=new WeakMap,h=new WeakMap,f=new WeakMap,b=new WeakSet,R=function(){return!this.disabled&&!this.readonly&&!this.validity.valid&&this.isReportValidityOrSubmit},m=new WeakSet,p=function(){return!this.maxlength||this.disabled?!1:this.value.length>this.maxlength},$=new WeakSet,F=function(t){const d=e(this,h).value.value;this.value=d,c(this,v,g).call(this),this.dispatchEvent(new Event(t.type,t))},V=new WeakSet,M=function(){const t=e(this,h).value.value;this.value=t,e(this,n).setFormValue(this.value),c(this,v,g).call(this)},y=new WeakSet,I=function(t){t.preventDefault(),this.isCheckingValidity||(this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!0)},v=new WeakSet,g=async function(){const t=e(this,h).value;e(this,m,p)?e(this,n).setValidity({...t?.validity,tooLong:!0}," ",t):e(this,n).setValidity(t?.validity,t?.validationMessage,t),await this.updateComplete},i.formAssociated=!0,i.shadowRootOptions={...A.shadowRootOptions,mode:"closed",delegatesFocus:!0},i.styles=x,l([r()],i.prototype,"value",2),l([r()],i.prototype,"label",2),l([r({attribute:"hide-label",type:Boolean})],i.prototype,"hideLabel",2),l([r({reflect:!0})],i.prototype,"orientation",2),l([r()],i.prototype,"placeholder",2),l([r({reflect:!0,type:Number})],i.prototype,"rows",2),l([r({type:Boolean})],i.prototype,"required",2),l([r({type:Boolean})],i.prototype,"readonly",2),l([r({type:Boolean})],i.prototype,"disabled",2),l([r({type:Number,converter(t){return t&&Number.parseInt(t,10)}})],i.prototype,"maxlength",2),l([r({reflect:!0})],i.prototype,"name",2),l([r({type:Boolean})],i.prototype,"spellcheck",2),l([r()],i.prototype,"autocapitalize",2),l([B()],i.prototype,"isCheckingValidity",2),l([B()],i.prototype,"isReportValidityOrSubmit",2),i=l([U("glide-core-textarea")],i);export{i as default};

package/dist/textarea.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;
+export declare const Required: StoryObj;
+export declare const Vertical: StoryObj;
+export declare const Readonly: StoryObj;
+export declare const Disabled: StoryObj;
+export declare const Placeholder: StoryObj;
+export declare const MaxLength: StoryObj;
+export declare const Description: StoryObj;
+export declare const WithError: StoryObj;
+export declare const Tooltip: StoryObj;

package/dist/textarea.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/textarea.styles.js

@@ -0,0 +1,69 @@
+"use strict";import{css as e}from"lit";export default e`
+  glide-core-label::part(tooltip-and-label-container) {
+    align-items: flex-start;
+    margin-block-start: var(--glide-core-spacing-sm);
+  }
+
+  .textarea-container {
+    display: flex;
+  }
+
+  textarea {
+    appearance: none;
+    background-color: var(--glide-core-surface-base-lighter);
+    border: 1px solid var(--glide-core-border-base-light);
+    border-radius: 0.5rem;
+    color: var(--glide-core-text-body-1);
+    cursor: inherit;
+    display: block;
+    flex-grow: 1;
+    font-family: var(--glide-core-body-xs-font-family);
+    font-size: var(--glide-core-body-sm-font-size);
+    font-weight: var(--glide-core-body-xs-font-weight);
+    min-block-size: 1.1875rem;
+    padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
+    resize: vertical;
+    transition: border-color 200ms ease-in-out;
+
+    &:hover {
+      border-color: var(--glide-core-border-base);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      border-color: var(--glide-core-border-focus);
+    }
+
+    &.error {
+      border-color: var(--glide-core-status-error);
+    }
+
+    &[readonly] {
+      border-color: transparent;
+      outline: none;
+      transition: none;
+    }
+
+    &[disabled] {
+      background-color: var(--glide-core-surface-base-gray-light);
+      border: 0.0625rem solid var(--glide-core-border-base-light);
+      color: var(--glide-core-text-tertiary-disabled);
+    }
+  }
+
+  .meta {
+    column-gap: var(--glide-core-spacing-xs);
+    display: flex;
+    font-size: var(--glide-core-body-xs-font-size);
+    justify-content: space-between;
+  }
+
+  .character-count {
+    &.error {
+      font-weight: var(--glide-core-font-weight-bold);
+    }
+  }
+`;

package/dist/textarea.test.basics.d.ts

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

package/dist/textarea.test.events.d.ts

@@ -0,0 +1 @@
+import './textarea.js';

package/dist/textarea.test.form.d.ts

@@ -0,0 +1 @@
+import './textarea.js';

package/dist/textarea.test.validity.d.ts

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

package/dist/toasts.d.ts

@@ -0,0 +1,29 @@
+import './toasts.toast.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-toasts': GlideCoreToasts;
+    }
+}
+export interface Toast {
+    label: string;
+    description: string;
+    variant: 'informational' | 'success';
+    duration?: number;
+}
+/**
+ * @description A container and controller for toast messages
+
+ */
+export default class GlideCoreToasts extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    add(toast: Toast): import("./toasts.toast.js").default & {
+        variant: "success" | "informational";
+        label: string;
+        description: string;
+        duration: number | undefined;
+    };
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/toasts.js

@@ -0,0 +1 @@
+"use strict";var u=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var d=(t,e,o,i)=>{for(var r=i>1?void 0:i?v(e,o):e,a=t.length-1,s;a>=0;a--)(s=t[a])&&(r=(i?s(e,o,r):s(r))||r);return i&&r&&u(e,o,r),r};var g=(t,e,o)=>{if(!e.has(t))throw TypeError("Cannot "+o)};var m=(t,e,o)=>(g(t,e,"read from private field"),o?o.call(t):e.get(t)),p=(t,e,o)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,o)};var c;import"./toasts.toast.js";import{LitElement as f,html as E}from"lit";import{createRef as b,ref as h}from"lit/directives/ref.js";import{customElement as R}from"lit/decorators.js";import x from"./toasts.styles.js";let n=class extends f{constructor(){super(...arguments);p(this,c,b())}add(o){const{variant:i,label:r,description:a,duration:s}=o,l=Object.assign(document.createElement("glide-core-toast"),{variant:i,label:r,description:a,duration:s});return m(this,c).value.append(l),l.addEventListener("close",()=>{l.remove()},{once:!0}),l}render(){return E`<div class="component" role="region" tabindex="-1" aria-label="Notifications" ${h(m(this,c))}></div>`}};c=new WeakMap,n.shadowRootOptions={...f.shadowRootOptions,mode:"closed"},n.styles=x,n=d([R("glide-core-toasts")],n);export{n as default};

package/dist/toasts.stories.d.ts

@@ -0,0 +1,7 @@
+import './button.js';
+import './toasts.js';
+import './toasts.toast.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;

package/dist/toasts.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/toasts.styles.js

@@ -0,0 +1,15 @@
+"use strict";import{css as i}from"lit";export default[i`
+    .component {
+      display: flex;
+      flex-direction: column;
+      gap: var(--glide-core-spacing-md);
+      inline-size: 24.25rem;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      max-block-size: 100%;
+      max-inline-size: 100%;
+      overflow: hidden;
+      padding: var(--glide-core-spacing-sm);
+      position: fixed;
+    }
+  `];

package/dist/toasts.test.basics.d.ts

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

package/dist/toasts.toast.d.ts

@@ -0,0 +1,28 @@
+import './icon-button.js';
+import './status-indicator.js';
+import './tooltip.js';
+import { LitElement } from 'lit';
+import type { Toast } from './toasts.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-toast': GlideCoreToast;
+    }
+}
+/**
+ * @private
+ *
+ * @description A message that animates onto the screen
+ */
+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;
+    close(): void;
+    firstUpdated(): void;
+    open(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/toasts.toast.js

@@ -0,0 +1 @@
+"use strict";var k=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var r=(i,e,t,l)=>{for(var o=l>1?void 0:l?w(e,t):e,u=i.length-1,h;u>=0;u--)(h=i[u])&&(o=(l?h(e,t,o):h(o))||o);return l&&o&&k(e,t,o),o};var v=(i,e,t)=>{if(!e.has(i))throw TypeError("Cannot "+t)};var a=(i,e,t)=>(v(i,e,"read from private field"),t?t.call(i):e.get(i)),c=(i,e,t)=>{if(e.has(i))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(i):e.set(i,t)};var f=(i,e,t)=>(v(i,e,"access private method"),t);var n,m,b,p,L;import"./icon-button.js";import"./status-indicator.js";import"./tooltip.js";import{LitElement as g,html as E}from"lit";import{classMap as y}from"lit/directives/class-map.js";import{createRef as I,ref as M}from"lit/directives/ref.js";import{customElement as $,property as d}from"lit/decorators.js";import N from"./toasts.toast.styles.js";let s=class extends g{constructor(){super(...arguments);c(this,m);c(this,p);this.duration=5e3;c(this,n,I())}close(){const t=a(this,n)?.value;t?.addEventListener("transitionend",()=>{t?.classList?.remove("open"),t?.classList?.remove("closing"),t?.classList?.add("closed"),this.dispatchEvent(new Event("close",{bubbles:!0}))},{once:!0}),t?.classList?.add("closing")}firstUpdated(){requestAnimationFrame(()=>{this.open()})}open(){const t=Math.max(this.duration??0,5e3);t<Number.POSITIVE_INFINITY&&setTimeout(()=>{this.close()},t),a(this,n)?.value?.classList?.add("open")}render(){return E`<div class="${y({component:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label description" ${M(a(this,n))}><glide-core-status-indicator style="--size: 1.25rem;" class="icon" variant="${a(this,p,L)}"></glide-core-status-indicator><div class="label" id="label">${this.label}</div><glide-core-icon-button label="Close" variant="tertiary" class="close-button" @click="${f(this,m,b)}"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></glide-core-icon-button><div class="description" id="description">${this.description}</div></div>`}};n=new WeakMap,m=new WeakSet,b=function(){this.close()},p=new WeakSet,L=function(){return{informational:"warning-informational",success:"success"}[this.variant]},s.shadowRootOptions={...g.shadowRootOptions,mode:"closed"},s.styles=N,r([d({reflect:!0})],s.prototype,"label",2),r([d({reflect:!0})],s.prototype,"description",2),r([d()],s.prototype,"variant",2),r([d({type:Number})],s.prototype,"duration",2),s=r([$("glide-core-toast")],s);export{s as default};

package/dist/toasts.toast.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/toasts.toast.styles.js

@@ -0,0 +1,60 @@
+"use strict";import{css as o}from"lit";export default[o`
+    .component {
+      align-items: center;
+      border-radius: var(--glide-core-spacing-sm);
+      box-shadow: var(--glide-core-shadow-lg);
+      column-gap: var(--glide-core-spacing-xs);
+      display: grid;
+      font-family: var(--glide-core-body-xs-font-family);
+      font-size: var(--glide-core-body-sm-font-size);
+      font-weight: var(--glide-core-body-xs-font-weight);
+      grid-template-columns: auto minmax(0, 1fr);
+      line-height: var(--glide-core-body-xs-line-height);
+      padding: var(--glide-core-spacing-sm);
+      transform: translateX(110%);
+      transition:
+        transform 0.2s ease-out,
+        opacity 0.3s ease-out;
+
+      &.informational {
+        background-color: var(--glide-core-surface-informational);
+      }
+
+      &.success {
+        background-color: var(--glide-core-surface-success);
+      }
+
+      &.open {
+        opacity: 1;
+        transform: none;
+        visibility: visible;
+      }
+
+      &.closing {
+        opacity: 0;
+        transform: none;
+      }
+
+      &.closed {
+        display: none;
+      }
+    }
+
+    .icon {
+      grid-column: 1;
+    }
+
+    .label {
+      font-size: var(--glide-core-heading-xs-font-size);
+      font-weight: var(--glide-core-heading-xs-font-weight);
+      grid-column: 2;
+    }
+
+    .close-button {
+      grid-column: 3;
+    }
+
+    .description {
+      grid-column: 2;
+    }
+  `];

package/dist/toasts.toast.test.basics.d.ts

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

package/dist/toggle.d.ts

@@ -0,0 +1,31 @@
+import './label.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-toggle': GlideCoreToggle;
+    }
+}
+/**
+ * @description A toggle with a label and optional tooltip, summary, and description.
+ *
+ * @event change - Dispatched when checked or unchecked.
+ * @event input - Dispatched when checked or unchecked.
+
+ * @slot description - Additional information or context.
+ * @slot tooltip - Content for the tooltip.
+ */
+export default class GlideCoreToggle extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    checked: boolean;
+    disabled: boolean;
+    hideLabel: boolean;
+    label?: string;
+    orientation: 'horizontal' | 'vertical';
+    name?: string;
+    summary?: string;
+    click(): void;
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+}