@crowdstrike/glide-core 0.5.0

package/dist/button.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-button': GlideCoreButton;
+    }
+}
+/**
+ * @slot - A label for the contents of the button.
+ * @slot prefix - An optional icon slot to display before the label.
+ * @slot suffix - An optional icon slot to display after the label.
+ */
+export default class GlideCoreButton extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    ariaExpanded: string | null;
+    ariaHasPopup: string | null;
+    disabled: boolean;
+    type: 'button' | 'submit' | 'reset';
+    variant: 'primary' | 'secondary' | 'tertiary';
+    size: 'large' | 'small';
+    get form(): HTMLFormElement | null;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    constructor();
+    private hasPrefixSlot;
+    private hasSuffixSlot;
+}

package/dist/button.js

@@ -0,0 +1 @@
+"use strict";var I=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var a=(s,e,t,o)=>{for(var n=o>1?void 0:o?D(e,t):e,x=s.length-1,b;x>=0;x--)(b=s[x])&&(n=(o?b(e,t,n):b(n))||n);return o&&n&&I(e,t,n),n};var E=(s,e,t)=>{if(!e.has(s))throw TypeError("Cannot "+t)};var l=(s,e,t)=>(E(s,e,"read from private field"),t?t.call(s):e.get(s)),i=(s,e,t)=>{if(e.has(s))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(s):e.set(s,t)},M=(s,e,t,o)=>(E(s,e,"write to private field"),o?o.call(s,t):e.set(s,t),t);var f=(s,e,t)=>(E(s,e,"access private method"),t);var m,u,c,p,d,w,g,P,y,T,S,k,v,z;import{LitElement as H,html as K}from"lit";import{classMap as O}from"lit/directives/class-map.js";import{createRef as $,ref as R}from"lit/directives/ref.js";import{customElement as q,property as h,state as L}from"lit/decorators.js";import{owSlot as N}from"./library/ow.js";import A from"./button.styles.js";let r=class extends H{constructor(){super();i(this,d);i(this,g);i(this,y);i(this,S);i(this,v);this.ariaExpanded=null;this.ariaHasPopup=null;this.disabled=!1;this.type="button";this.variant="primary";this.size="large";this.hasPrefixSlot=!1;this.hasSuffixSlot=!1;i(this,m,$());i(this,u,void 0);i(this,c,$());i(this,p,$());M(this,u,this.attachInternals())}get form(){return l(this,u).form}firstUpdated(){N(l(this,m).value)}render(){return K`<button class="${O({component:!0,primary:this.variant==="primary",secondary:this.variant==="secondary",tertiary:this.variant==="tertiary",large:this.size==="large",small:this.size==="small","has-prefix":this.hasPrefixSlot,"has-suffix":this.hasSuffixSlot})}" type="${this.type}" ?disabled="${this.disabled}" @click="${f(this,d,w)}" @keydown="${f(this,y,T)}"><slot name="prefix" @slotchange="${f(this,S,k)}" ${R(l(this,c))}></slot><slot @slotchange="${f(this,g,P)}" ${R(l(this,m))}></slot><slot name="suffix" @slotchange="${f(this,v,z)}" ${R(l(this,p))}></slot></button>`}};m=new WeakMap,u=new WeakMap,c=new WeakMap,p=new WeakMap,d=new WeakSet,w=function(){if(this.type!=="button"){if(this.type==="submit"){this.form?.requestSubmit();return}this.form?.reset()}},g=new WeakSet,P=function(){N(l(this,m).value)},y=new WeakSet,T=function(t){["Enter"].includes(t.key)&&(t.preventDefault(),f(this,d,w).call(this))},S=new WeakSet,k=function(){const t=l(this,c).value?.assignedNodes();this.hasPrefixSlot=!!(t&&t.length>0)},v=new WeakSet,z=function(){const t=l(this,p).value?.assignedNodes();this.hasSuffixSlot=!!(t&&t.length>0)},r.formAssociated=!0,r.shadowRootOptions={...H.shadowRootOptions,delegatesFocus:!0,mode:"closed"},r.styles=A,a([h({reflect:!0})],r.prototype,"ariaExpanded",2),a([h({reflect:!0})],r.prototype,"ariaHasPopup",2),a([h({type:Boolean,reflect:!0})],r.prototype,"disabled",2),a([h()],r.prototype,"type",2),a([h({reflect:!0})],r.prototype,"variant",2),a([h({reflect:!0})],r.prototype,"size",2),a([L()],r.prototype,"hasPrefixSlot",2),a([L()],r.prototype,"hasSuffixSlot",2),r=a([q("glide-core-button")],r);export{r as default};

package/dist/button.stories.d.ts

@@ -0,0 +1,17 @@
+import './button.js';
+import './icons/storybook.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Primary: StoryObj;
+export declare const PrimaryWithPrefixIcon: StoryObj;
+export declare const PrimaryWithSuffixIcon: StoryObj;
+export declare const PrimaryWithPrefixAndSuffixIcons: StoryObj;
+export declare const Secondary: StoryObj;
+export declare const SecondaryWithPrefixIcon: StoryObj;
+export declare const SecondaryWithSuffixIcon: StoryObj;
+export declare const SecondaryWithPrefixAndSuffixIcons: StoryObj;
+export declare const Tertiary: StoryObj;
+export declare const TertiaryWithPrefixIcon: StoryObj;
+export declare const TertiaryWithSuffixIcon: StoryObj;
+export declare const TertiaryWithPrefixAndSuffixIcons: StoryObj;

package/dist/button.styles.d.ts

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

package/dist/button.styles.js

@@ -0,0 +1,133 @@
+"use strict";import{css as e}from"lit";import r from"./styles/focus-outline.js";export default[e`
+    :host {
+      /* Contains elements with "padding" and "width". Inline by default. */
+      display: inline-block;
+    }
+
+    .component {
+      align-items: center;
+      border-color: transparent;
+      border-radius: var(--glide-core-spacing-sm);
+      border-style: solid;
+      border-width: 1px;
+      cursor: pointer;
+      display: inline-flex;
+      font-family: var(--glide-core-heading-xxs-font-family);
+      font-style: var(--glide-core-heading-xxs-font-style);
+      font-weight: var(--glide-core-heading-xxs-font-weight);
+      gap: 0.625rem;
+      justify-content: center;
+      padding-block: var(--glide-core-spacing-xs);
+      padding-inline: var(--glide-core-spacing-md);
+      transition-duration: 150ms;
+      transition-property: color, background-color, border-color, fill, stroke;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      user-select: none;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        ${r};
+      }
+
+      &:disabled {
+        cursor: default;
+        opacity: 1;
+      }
+
+      /* We remove spacing using negative margin when an icon is present to help with empty space balancing */
+      &.has-prefx,
+      ::slotted([slot='prefix']) {
+        margin-inline-start: -0.125rem;
+      }
+
+      &.has-suffix,
+      ::slotted([slot='suffix']) {
+        margin-inline-end: -0.125rem;
+      }
+
+      &.primary {
+        background-color: var(--glide-core-surface-primary);
+        border-color: transparent;
+        color: var(--glide-core-text-selected);
+
+        &:disabled {
+          background-color: var(--glide-core-surface-disabled);
+          border-color: transparent;
+          color: var(--glide-core-text-tertiary-disabled);
+        }
+
+        &:not(:disabled):active {
+          background-color: var(--glide-core-surface-selected-hover);
+          border-color: transparent;
+          color: var(--glide-core-text-selected);
+        }
+
+        &:not(:active):hover:not(:disabled) {
+          background-color: var(--glide-core-surface-hover);
+          border-color: transparent;
+          box-shadow: var(--glide-core-glow-sm);
+          color: var(--glide-core-text-primary);
+        }
+      }
+
+      &.secondary {
+        background-color: transparent;
+        border-color: var(--glide-core-border-primary);
+        color: var(--glide-core-text-primary);
+
+        &:disabled {
+          background-color: var(--glide-core-surface-disabled);
+          border-color: transparent;
+          color: var(--glide-core-text-tertiary-disabled);
+        }
+
+        &:not(:disabled):active {
+          background-color: var(--glide-core-surface-selected-hover);
+          border-color: transparent;
+          color: var(--glide-core-text-selected);
+        }
+
+        &:not(:active):hover:not(:disabled) {
+          background-color: var(--glide-core-surface-hover);
+          border-color: transparent;
+          box-shadow: var(--glide-core-glow-sm);
+          color: var(--glide-core-text-primary);
+        }
+      }
+
+      &.tertiary {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--glide-core-text-primary);
+
+        &:disabled {
+          color: var(--glide-core-text-tertiary-disabled);
+        }
+
+        &:not(:disabled):active {
+          color: var(--glide-core-text-secondary);
+        }
+
+        &:not(:active):hover:not(:disabled) {
+          color: var(--glide-core-text-primary-hover);
+        }
+      }
+
+      &.large {
+        block-size: 2.125rem;
+        font-size: var(--glide-core-heading-xxs-font-size);
+        line-height: 1.5rem;
+        min-inline-size: 5.1875rem;
+      }
+
+      &.small {
+        block-size: 1.75rem;
+        font-size: var(--glide-core-body-xs-font-size);
+        line-height: 1rem;
+        min-inline-size: 4.375rem;
+      }
+    }
+  `];

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

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

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

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

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

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

package/dist/checkbox-group.d.ts

@@ -0,0 +1,43 @@
+import './label.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-checkbox-group': GlideCoreCheckboxGroup;
+    }
+}
+/**
+ * @description A group of checkboxes with a label and optional tooltip and description. Participates in forms and validation via `FormData` and various methods.
+ *
+ * @slot - One or more of `<glide-core-checkbox>`.
+ * @slot description - Additional information or context.
+ * @slot tooltip - Content for the tooltip.
+ */
+export default class GlideCoreCheckboxGroup extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    get disabled(): boolean;
+    set disabled(isDisabled: boolean);
+    hideLabel: boolean;
+    label?: string;
+    name?: string;
+    get required(): boolean;
+    set required(isRequired: boolean);
+    summary?: string;
+    value: string[];
+    checkValidity(): boolean;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get willValidate(): boolean;
+    focus(options?: FocusOptions): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    reportValidity(): boolean;
+    constructor();
+    private isCheckingValidity;
+    private isReportValidityOrSubmit;
+}

package/dist/checkbox-group.js

@@ -0,0 +1 @@
+"use strict";var H=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var n=(a,s,t,i)=>{for(var f=i>1?void 0:i?I(s,t):s,k=a.length-1,R;k>=0;k--)(R=a[k])&&(f=(i?R(s,t,f):R(f))||f);return i&&f&&H(s,t,f),f};var S=(a,s,t)=>{if(!s.has(a))throw TypeError("Cannot "+t)};var e=(a,s,t)=>(S(a,s,"read from private field"),t?t.call(a):s.get(a)),d=(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)},g=(a,s,t,i)=>(S(a,s,"write to private field"),i?i.call(a,t):s.set(a,t),t);var L=(a,s,t)=>(S(a,s,"access private method"),t);var u,c,r,v,p,o,h,b,y,D,V,F,E,A;import"./label.js";import{LitElement as q,html as U}from"lit";import{createRef as w,ref as O}from"lit/directives/ref.js";import{customElement as N,property as m,state as B}from"lit/decorators.js";import{owSlot as M,owSlotType as T}from"./library/ow.js";import $ from"./checkbox.js";import x from"./checkbox-group.styles.js";let l=class extends q{constructor(){super();d(this,o);d(this,y);d(this,V);d(this,E);this.hideLabel=!1;this.value=[];this.isCheckingValidity=!1;this.isReportValidityOrSubmit=!1;d(this,u,w());d(this,c,w());d(this,r,void 0);d(this,v,!1);d(this,p,!1);d(this,b,({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,JSON.stringify(this.value))});g(this,r,this.attachInternals()),this.addEventListener("invalid",t=>{t?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())})}get disabled(){return e(this,v)}set disabled(t){g(this,v,t);for(const i of e(this,o,h))i.disabled=t}get required(){return e(this,p)}set required(t){g(this,p,t);for(const i of e(this,o,h))t?i.setValidity(e(this,r).validity," "):i.setValidity({}),i.requestUpdate()}checkValidity(){return this.isCheckingValidity=!0,e(this,r).checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",e(this,b))}firstUpdated(){if(M(e(this,c).value),T(e(this,c).value,[$]),this.disabled)for(const t of e(this,o,h))t.disabled=!0;this.value=e(this,o,h).filter(({checked:t,disabled:i})=>t&&!i).map(({value:t})=>t).filter(t=>!!t);for(const t of e(this,o,h))t.privateVariant="minimal"}get form(){return e(this,r).form}get validity(){const t=e(this,o,h).some(({checked:i})=>i);this.required&&!t?e(this,r).setValidity({valueMissing:!0}," ",e(this,u).value):e(this,r).setValidity({});for(const i of e(this,o,h))i.setValidity(e(this,r).validity," "),i.requestUpdate();return e(this,r).validity}get willValidate(){return e(this,r).willValidate}focus(t){e(this,o,h).at(0)?.focus(t)}formAssociatedCallback(){this.form?.addEventListener("formdata",e(this,b))}formResetCallback(){for(const t of e(this,o,h))t.formResetCallback()}render(){return U`<div class="component" data-test="component" ${O(e(this,u))}><glide-core-label ?hide="${this.hideLabel}" ?disabled="${this.disabled}" ?error="${e(this,y,D)}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label id="label">${this.label}</label><div aria-labelledby="label description" role="group" slot="control"><slot class="checkboxes" @change="${L(this,V,F)}" @slotchange="${L(this,E,A)}" ${O(e(this,c))}></slot></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return e(this,r).reportValidity()}};u=new WeakMap,c=new WeakMap,r=new WeakMap,v=new WeakMap,p=new WeakMap,o=new WeakSet,h=function(){return e(this,c).value?e(this,c).value.assignedElements().filter(t=>t instanceof $):[]},b=new WeakMap,y=new WeakSet,D=function(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit},V=new WeakSet,F=function(){this.value=e(this,o,h).filter(({checked:t,disabled:i})=>t&&!i).map(({value:t})=>t).filter(t=>!!t)},E=new WeakSet,A=function(){M(e(this,c).value),T(e(this,c).value,[$])},l.formAssociated=!0,l.shadowRootOptions={...q.shadowRootOptions,mode:"closed"},l.styles=x,n([m({reflect:!0,type:Boolean})],l.prototype,"disabled",1),n([m({attribute:"hide-label",type:Boolean})],l.prototype,"hideLabel",2),n([m({reflect:!0})],l.prototype,"label",2),n([m({reflect:!0})],l.prototype,"name",2),n([m({reflect:!0,type:Boolean})],l.prototype,"required",1),n([m({reflect:!0})],l.prototype,"summary",2),n([m({type:Array})],l.prototype,"value",2),n([B()],l.prototype,"isCheckingValidity",2),n([B()],l.prototype,"isReportValidityOrSubmit",2),l=n([N("glide-core-checkbox-group")],l);export{l as default};

package/dist/checkbox-group.stories.d.ts

@@ -0,0 +1,7 @@
+import './checkbox.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Vertical: StoryObj;
+export declare const VerticalWithToolip: StoryObj;
+export declare const VerticalWithError: StoryObj;

package/dist/checkbox-group.styles.d.ts

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

package/dist/checkbox-group.styles.js

@@ -0,0 +1,20 @@
+"use strict";import{css as e}from"lit";export default[e`
+    :host(:not(:disabled)) .component {
+      &.error {
+        .checkbox {
+          border-color: var(--glide-core-status-error);
+        }
+      }
+    }
+
+    glide-core-label::part(tooltip-and-label-container) {
+      align-items: flex-start;
+    }
+
+    .checkboxes {
+      display: flex;
+      flex-direction: column;
+      grid-column: 2;
+      row-gap: var(--glide-core-spacing-xxs);
+    }
+  `];

package/dist/checkbox-group.test.basics.d.ts

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

package/dist/checkbox-group.test.events.d.ts

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

package/dist/checkbox-group.test.focus.d.ts

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

package/dist/checkbox-group.test.form.d.ts

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

package/dist/checkbox-group.test.validity.d.ts

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

package/dist/checkbox.d.ts

@@ -0,0 +1,50 @@
+import './label.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-checkbox': GlideCoreCheckbox;
+    }
+}
+/**
+ * @description A checkbox with a label and optional tooltip, summary, and description. Participates in forms and validation via `FormData` and various methods.
+ *
+ * @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 GlideCoreCheckbox extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    checked: boolean;
+    internallyInert: boolean;
+    disabled: boolean;
+    hideLabel: boolean;
+    indeterminate: boolean;
+    label?: string;
+    orientation: 'horizontal' | 'vertical';
+    name?: string;
+    privateVariant?: 'minimal';
+    required: boolean;
+    summary?: string;
+    value?: string;
+    get form(): HTMLFormElement | null;
+    checkValidity(): boolean;
+    click(): void;
+    disconnectedCallback(): void;
+    get validity(): ValidityState;
+    focus(options?: FocusOptions): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    reportValidity(): boolean;
+    setValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;
+    get willValidate(): boolean;
+    updated(): void;
+    constructor();
+    private isCheckingValidity;
+    private isReportValidityOrSubmit;
+}

package/dist/checkbox.js

@@ -0,0 +1 @@
+"use strict";var M=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var r=(s,a,t,c)=>{for(var o=c>1?void 0:c?B(a,t):a,f=s.length-1,y;f>=0;f--)(y=s[f])&&(o=(c?y(a,t,o):y(o))||o);return c&&o&&M(a,t,o),o};var b=(s,a,t)=>{if(!a.has(s))throw TypeError("Cannot "+t)};var i=(s,a,t)=>(b(s,a,"read from private field"),t?t.call(s):a.get(s)),u=(s,a,t)=>{if(a.has(s))throw TypeError("Cannot add the same private member more than once");a instanceof WeakSet?a.add(s):a.set(s,t)},k=(s,a,t,c)=>(b(s,a,"write to private field"),c?c.call(s,t):a.set(s,t),t);var g=(s,a,t)=>(b(s,a,"access private method"),t);var d,l,p,h,m,v,V;import"./label.js";import{LitElement as E,html as $}from"lit";import{classMap as L}from"lit/directives/class-map.js";import{createRef as O,ref as w}from"lit/directives/ref.js";import{customElement as S,property as n,state as q}from"lit/decorators.js";import{svg as F}from"lit/static-html.js";import{when as H}from"lit/directives/when.js";import I from"./icons/checked.js";import T from"./checkbox.styles.js";const R=F`<svg class="indeterminate-icon" fill="none" height="14" viewBox="0 0 24 24" width="14"><path d="M8 10C8 8.89543 8.89543 8 10 8H14.7929C15.2383 8 15.4614 8.53857 15.1464 8.85355L8.85355 15.1464C8.53857 15.4614 8 15.2383 8 14.7929V10Z" fill="currentColor"/></svg>`;let e=class extends E{constructor(){super();u(this,h);u(this,v);this.checked=!1;this.internallyInert=!1;this.disabled=!1;this.hideLabel=!1;this.indeterminate=!1;this.orientation="horizontal";this.required=!1;this.value="";this.isCheckingValidity=!1;this.isReportValidityOrSubmit=!1;u(this,d,O());u(this,l,void 0);u(this,p,({formData:t})=>{this.checked&&this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)});k(this,l,this.attachInternals()),this.addEventListener("invalid",t=>{t?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())})}get form(){return i(this,l).form}checkValidity(){return this.isCheckingValidity=!0,i(this,l).checkValidity()}click(){i(this,d).value?.click()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",i(this,p))}get validity(){return this.privateVariant==="minimal"?i(this,l).validity:(this.required&&!this.checked?i(this,l).setValidity({valueMissing:!0}," ",i(this,d).value):i(this,l).setValidity({}),i(this,l).validity)}focus(t){i(this,d).value?.focus(t)}formAssociatedCallback(){this.form?.addEventListener("formdata",i(this,p))}formResetCallback(){this.checked=this.getAttribute("checked")==="",this.indeterminate=this.getAttribute("indeterminate")===""}render(){return $`<div class="component" data-test="component">${H(this.privateVariant==="minimal",()=>$`<label class="label-and-input-and-checkbox" part="private-label-and-input-and-checkbox"><div class="input-and-checkbox"><input aria-invalid="${i(this,h,m)}" data-test="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${g(this,v,V)}" ?inert="${this.internallyInert}" ${w(i(this,d))}><div class="${L({checkbox:!0,disabled:this.disabled,error:i(this,h,m)})}"><div class="checked-icon">${I}</div>${R}</div></div>${this.label}</label>`,()=>$`<glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${i(this,h,m)}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="input-and-checkbox" slot="control"><input aria-describedby="summary description" aria-invalid="${i(this,h,m)}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${g(this,v,V)}" ${w(i(this,d))}><div class="${L({checkbox:!0,disabled:this.disabled,error:i(this,h,m)})}"><div class="checked-icon">${I}</div>${R}</div></div><div id="summary" slot="summary">${this.summary}</div><slot id="description" name="description" slot="description"></slot></glide-core-label>`)}</div>`}reportValidity(){return i(this,l).reportValidity()}setValidity(t,c,o){return i(this,l).setValidity(t,c,o)}get willValidate(){return i(this,l).willValidate}updated(){i(this,d).value&&(i(this,d).value.indeterminate=this.indeterminate)}};d=new WeakMap,l=new WeakMap,p=new WeakMap,h=new WeakSet,m=function(){return this.privateVariant==="minimal"?!this.validity.valid:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit},v=new WeakSet,V=function(t){t.target instanceof HTMLInputElement&&(this.checked=t.target.checked),this.indeterminate=!1,this.dispatchEvent(new Event(t.type,t))},e.formAssociated=!0,e.shadowRootOptions={...E.shadowRootOptions,mode:"closed"},e.styles=T,r([n({type:Boolean})],e.prototype,"checked",2),r([n({attribute:"internally-inert",type:Boolean})],e.prototype,"internallyInert",2),r([n({reflect:!0,type:Boolean})],e.prototype,"disabled",2),r([n({attribute:"hide-label",type:Boolean})],e.prototype,"hideLabel",2),r([n({type:Boolean})],e.prototype,"indeterminate",2),r([n({reflect:!0})],e.prototype,"label",2),r([n({reflect:!0})],e.prototype,"orientation",2),r([n({reflect:!0})],e.prototype,"name",2),r([n({attribute:"private-variant"})],e.prototype,"privateVariant",2),r([n({reflect:!0,type:Boolean})],e.prototype,"required",2),r([n({reflect:!0})],e.prototype,"summary",2),r([n({reflect:!0})],e.prototype,"value",2),r([q()],e.prototype,"isCheckingValidity",2),r([q()],e.prototype,"isReportValidityOrSubmit",2),e=r([S("glide-core-checkbox")],e);export{e as default};

package/dist/checkbox.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Horizontal: StoryObj;
+export declare const HorizontalWithTooltip: StoryObj;
+export declare const HorizontalWithError: StoryObj;
+export declare const Vertical: StoryObj;
+export declare const VerticalWithToolip: StoryObj;
+export declare const VerticalWithError: StoryObj;

package/dist/checkbox.styles.d.ts

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

package/dist/checkbox.styles.js

@@ -0,0 +1,116 @@
+"use strict";import{css as e}from"lit";import i from"./styles/focus-outline.js";export default[e`
+    /*
+Most states are handled on the host. But ":checked" and ":indeterminate" are
+handled on the input because browsers don't support those classes on the host.
+And using attribute selectors won't work because those attributes, same as
+native, don't change when their properties do.
+
+TODO
+Use the ":checked" and ":indeterminate" pseudo classes on the host and throughout
+when browsers support them.
+*/
+
+    .label-and-input-and-checkbox {
+      align-items: center;
+      display: flex;
+      font-family: var(--glide-core-heading-xxxs-font-family);
+      font-size: var(--glide-core-heading-xxxs-font-size);
+      font-style: var(--glide-core-heading-xxxs-font-style);
+      font-variant: var(--glide-core-heading-xxxs-font-variant);
+      font-weight: var(--glide-core-body-xs-font-weight);
+      gap: var(--glide-core-spacing-sm);
+      line-height: 100%;
+    }
+
+    .input-and-checkbox-and-summary {
+      display: flex;
+      gap: var(--glide-core-spacing-sm);
+    }
+
+    .input-and-checkbox {
+      block-size: 0.875rem;
+      inline-size: 0.875rem;
+      position: relative;
+    }
+
+    .checkbox {
+      align-items: center;
+      block-size: 100%;
+      border: 1px solid var(--glide-core-border-base-dark);
+      border-radius: 0.25rem;
+      box-sizing: border-box;
+      color: var(--glide-core-icon-selected);
+      display: flex;
+      flex-shrink: 0; /* Don't shrink when the summary wraps. */
+      inline-size: 100%;
+      justify-content: center;
+
+      &.error:not(.disabled) {
+        border-color: var(--glide-core-status-error);
+      }
+
+      &:not(.disabled):hover {
+        box-shadow: var(--glide-core-glow-sm);
+      }
+    }
+
+    input {
+      block-size: 100%;
+      cursor: inherit;
+      inline-size: 100%;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      margin: 0;
+      opacity: 0;
+      position: absolute;
+
+      &:not(:disabled):hover ~ .checkbox {
+        box-shadow: var(--glide-core-glow-sm);
+      }
+
+      &:checked:not(:indeterminate) ~ .checkbox .checked-icon {
+        display: flex;
+      }
+
+      &:indeterminate ~ .checkbox .indeterminate-icon {
+        display: inline-block;
+      }
+
+      &:disabled:not(:is(:checked, :indeterminate)) ~ .checkbox {
+        border-color: var(--glide-core-surface-primary-disabled);
+      }
+
+      &:focus-visible ~ .checkbox {
+        ${i};
+        outline-offset: 4px;
+      }
+
+      &:is(:checked, :indeterminate):not(:disabled) ~ .checkbox {
+        background-color: var(--glide-core-surface-primary);
+        border-color: transparent;
+      }
+
+      &:is(:checked, :indeterminate):disabled ~ .checkbox {
+        background-color: var(--glide-core-surface-primary-disabled);
+        border-color: transparent;
+      }
+    }
+
+    .checked-icon {
+      --size: 0.75rem;
+
+      align-items: center;
+      block-size: 100%;
+      display: none;
+      inline-size: 100%;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      justify-content: center;
+      pointer-events: none;
+      position: absolute;
+    }
+
+    .indeterminate-icon {
+      display: none;
+    }
+  `];

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

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

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

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

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

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

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

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

package/dist/checkbox.test.states.d.ts

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

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

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

package/dist/drawer.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-drawer': GlideCoreDrawer;
+    }
+}
+/**
+ * @cssprop [--width] - Sets the width of the Drawer when open.
+ *
+ * @event close - Emitted when the Drawer closes.
+ * @event open - Emitted when the Drawer opens.
+ *
+ * @method close - A method on the `glide-core-drawer` component to close the Drawer programmatically.
+ * @method open - A method on the `glide-core-drawer` component to open the Drawer programmatically.
+ *
+ * @slot - The content of the Drawer.
+ */
+export default class GlideCoreDrawer extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    close(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    open(): void;
+    render(): import("lit").TemplateResult<1>;
+    private currentState;
+    private isOpen;
+}

package/dist/drawer.js

@@ -0,0 +1,15 @@
+"use strict";var R=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var p=(o,e,t,d)=>{for(var n=d>1?void 0:d?O(e,t):e,h=o.length-1,v;h>=0;h--)(v=o[h])&&(n=(d?v(e,t,n):v(n))||n);return d&&n&&R(e,t,n),n};var f=(o,e,t)=>{if(!e.has(o))throw TypeError("Cannot "+t)};var s=(o,e,t)=>(f(o,e,"read from private field"),t?t.call(o):e.get(o)),a=(o,e,t)=>{if(e.has(o))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(o):e.set(o,t)};var g=(o,e,t)=>(f(o,e,"access private method"),t);var i,l,u,k,m,y;import{LitElement as S,html as $}from"lit";import{createRef as E,ref as L}from"lit/directives/ref.js";import{customElement as M,state as w}from"lit/decorators.js";import{owSlot as b}from"./library/ow.js";import T from"./drawer.styles.js";const c=new CSSStyleSheet;c.insertRule(`
+  @supports (scrollbar-gutter: stable) {
+    .private-glide-core-drawer-lock-scroll {
+      scrollbar-gutter: stable !important;
+      overflow: hidden !important;
+    }
+  }
+`),c.insertRule(`
+  @supports not (scrollbar-gutter: stable) {
+    .private-glide-core-drawer-lock-scroll {
+      padding-right: var(--glide-scroll-size, 0.9375rem) !important;
+      overflow: hidden !important;
+    }
+  }
+`);let r=class extends S{constructor(){super(...arguments);a(this,u);a(this,m);this.currentState="closed";this.isOpen=!1;a(this,i,E());a(this,l,E())}close(){this.currentState==="open"&&(s(this,l)?.value?.addEventListener("transitionend",()=>{this.isOpen=!1,s(this,l)?.value?.classList?.remove("open"),s(this,l)?.value?.classList?.remove("closing"),this.currentState="closed",this.dispatchEvent(new Event("close")),document.documentElement.classList.remove("private-glide-core-drawer-lock-scroll")},{once:!0}),s(this,l)?.value?.classList?.add("closing"),document.documentElement.classList.add("private-glide-core-drawer-lock-scroll"),this.currentState="closing")}connectedCallback(){super.connectedCallback(),document.adoptedStyleSheets.includes(c)||document.adoptedStyleSheets.push(c)}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.contains("private-glide-core-drawer-lock-scroll")&&document.documentElement.classList.remove("private-glide-core-drawer-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter(t=>t!==c)}firstUpdated(){b(s(this,i).value)}open(){this.currentState==="closed"&&(s(this,l)?.value?.addEventListener("transitionend",()=>{this.currentState="open",s(this,l)?.value?.focus(),this.dispatchEvent(new Event("open")),document.documentElement.classList.remove("private-glide-core-drawer-lock-scroll")},{once:!0}),s(this,l)?.value?.classList?.add("open"),document.documentElement.classList.add("private-glide-core-drawer-lock-scroll"),this.currentState="opening",this.isOpen=!0)}render(){return $`<dialog class="component" tabindex="-1" ?open="${this.isOpen}" @keydown="${g(this,u,k)}" ${L(s(this,l))}><slot @slotchange="${g(this,m,y)}" ${L(s(this,i))}></slot></dialog>`}};i=new WeakMap,l=new WeakMap,u=new WeakSet,k=function(t){t.key==="Escape"&&this.close()},m=new WeakSet,y=function(){b(s(this,i).value)},r.shadowRootOptions={...S.shadowRootOptions,mode:"closed"},r.styles=T,p([w()],r.prototype,"currentState",2),p([w()],r.prototype,"isOpen",2),r=p([M("glide-core-drawer")],r);export{r as default};

package/dist/drawer.stories.d.ts

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

package/dist/drawer.styles.d.ts

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

package/dist/drawer.styles.js

@@ -0,0 +1,34 @@
+"use strict";import{css as i}from"lit";export default[i`
+    .component {
+      all: unset;
+      background-color: var(--glide-core-surface-base-lighter);
+      block-size: 0;
+      border-end-start-radius: 0.625rem;
+      border-start-start-radius: 0.625rem;
+      box-shadow: var(--glide-core-shadow-xl);
+      font-family: var(--glide-core-body-xs-font-family);
+      inline-size: 0;
+      inset: 0;
+      max-inline-size: 100%;
+      opacity: 0;
+      position: absolute;
+      transform: translateX(100%);
+      transition:
+        transform 0.2s ease-out,
+        opacity 0.3s ease-out;
+      visibility: hidden;
+    }
+
+    .open {
+      block-size: auto;
+      inline-size: var(--width, 27.375rem);
+      inset: 0 0 0 auto;
+      opacity: 1;
+      transform: none;
+      visibility: visible;
+    }
+
+    .closing {
+      transform: translateX(100%);
+    }
+  `];

package/dist/drawer.test.accessibility.d.ts

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

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

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

package/dist/drawer.test.closing.d.ts

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

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

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

package/dist/drawer.test.methods.d.ts

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