@crowdstrike/glide-core 0.5.0

package/dist/icons/magnifying-glass.js

@@ -0,0 +1 @@
+"use strict";import{svg as o}from"lit/static-html.js";export default o`<svg class="search-icon" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>`;

package/dist/input.d.ts

@@ -0,0 +1,67 @@
+import './icon-button.js';
+import './label.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-input': GlideCoreInput;
+    }
+}
+export declare const SUPPORTED_TYPES: readonly ["email", "number", "password", "search", "tel", "text", "url"];
+type SupportedTypes = (typeof SUPPORTED_TYPES)[number];
+/**
+ * @description An input with a label and optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
+ *
+ * @event change - (same as native input's `change` event)
+ * @event input - (same as native input's `input` event)
+
+ * @slot tooltip - Content for the tooltip.
+ * @slot description - Additional information or context.
+ * @slot prefix - An optional icon slot to display before the input.
+ * @slot suffix - An optional icon slot to display after the input.
+ */
+export default class GlideCoreInput extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult;
+    type: SupportedTypes;
+    name?: string;
+    value: string;
+    label?: string;
+    hideLabel: boolean;
+    orientation: 'horizontal' | 'vertical';
+    placeholder?: string;
+    clearable: boolean;
+    spellcheck: boolean;
+    autocapitalize: 'on' | 'off' | 'none' | 'sentences' | 'words' | 'characters';
+    /** For 'password' type, whether to show a button to toggle the password's visibility */
+    passwordToggle: boolean;
+    required: boolean;
+    readonly: boolean;
+    disabled: boolean;
+    maxlength?: number;
+    descriptionNodes: NodeListOf<HTMLElement>;
+    prefixIconNodes: NodeListOf<HTMLElement>;
+    suffixIconNodes: NodeListOf<HTMLElement>;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get willValidate(): boolean;
+    blur(): void;
+    checkValidity(): boolean;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    get isTypeSearch(): boolean;
+    get hasClearIcon(): boolean;
+    get isClearIconVisible(): boolean;
+    render(): import("lit").TemplateResult<1>;
+    reportValidity(): boolean;
+    get valueCharacterCount(): number;
+    constructor();
+    private hasFocus;
+    private isCheckingValidity?;
+    private isReportValidityOrSubmit;
+    private passwordVisible;
+}
+export {};

package/dist/input.js

@@ -0,0 +1 @@
+"use strict";var Y=Object.defineProperty;var Z=Object.getOwnPropertyDescriptor;var i=(r,a,t,u)=>{for(var p=u>1?void 0:u?Z(a,t):a,S=r.length-1,B;S>=0;S--)(B=r[S])&&(p=(u?B(a,t,p):B(p))||p);return u&&p&&Y(a,t,p),p};var R=(r,a,t)=>{if(!a.has(r))throw TypeError("Cannot "+t)};var s=(r,a,t)=>(R(r,a,"read from private field"),t?t.call(r):a.get(r)),l=(r,a,t)=>{if(a.has(r))throw TypeError("Cannot add the same private member more than once");a instanceof WeakSet?a.add(r):a.set(r,t)},P=(r,a,t,u)=>(R(r,a,"write to private field"),u?u.call(r,t):a.set(r,t),t);var n=(r,a,t)=>(R(r,a,"access private method"),t);var g,h,y,b,$,w,F,d,c,x,H,E,j,V,z,L,D,T,C,M,U,v,f;import"./icon-button.js";import"./label.js";import{LitElement as q,html as m,nothing as _}from"lit";import{classMap as N}from"lit/directives/class-map.js";import{createRef as J,ref as K}from"lit/directives/ref.js";import{customElement as Q,property as o,queryAssignedNodes as O,state as k}from"lit/decorators.js";import{ifDefined as A}from"lit/directives/if-defined.js";import W from"./icons/magnifying-glass.js";import X from"./input.styles.js";export const SUPPORTED_TYPES=["email","number","password","search","tel","text","url"];let e=class extends q{constructor(){super();l(this,b);l(this,w);l(this,d);l(this,x);l(this,E);l(this,V);l(this,L);l(this,T);l(this,M);l(this,v);this.type="text";this.value="";this.hideLabel=!1;this.orientation="horizontal";this.clearable=!1;this.spellcheck=!1;this.autocapitalize="on";this.passwordToggle=!1;this.required=!1;this.readonly=!1;this.disabled=!1;this.hasFocus=!1;this.isReportValidityOrSubmit=!1;this.passwordVisible=!1;l(this,g,J());l(this,h,void 0);l(this,y,({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)});P(this,h,this.attachInternals()),this.addEventListener("invalid",t=>{t?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())})}get form(){return s(this,h).form}get validity(){return s(this,h).validity}get willValidate(){return s(this,h).willValidate}blur(){s(this,d,c)?.blur()}checkValidity(){return this.isCheckingValidity=!0,s(this,h).checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",s(this,y))}firstUpdated(){n(this,v,f).call(this)}formAssociatedCallback(){this.form?.addEventListener("formdata",s(this,y))}formResetCallback(){this.value=this.getAttribute("value")??""}get isTypeSearch(){return this.type==="search"}get hasClearIcon(){return this.clearable&&!this.disabled&&!this.readonly}get isClearIconVisible(){return this.hasClearIcon&&this.value.length>0}render(){return m`<glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${s(this,w,F)||s(this,b,$)}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="${N({"input-box":!0,focused:this.hasFocus,empty:this.value==="",disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:s(this,w,F)||s(this,b,$)})}" slot="control"><slot name="prefix"></slot><input aria-describedby="meta" id="input" type="${this.type==="password"&&this.passwordVisible?"text":this.type}" .value="${this.value}" placeholder="${A(this.placeholder)}" autocapitalize="${A(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focus="${n(this,L,D)}" @blur="${n(this,x,H)}" @change="${n(this,E,j)}" @input="${n(this,T,C)}" ${K(s(this,g))}> ${this.hasClearIcon?m`<glide-core-icon-button variant="tertiary" class="${N({"clear-icon-button":!0,"clear-icon-button--visible":this.isClearIconVisible})}" aria-label="Clear entry" @click="${n(this,V,z)}" tabindex="-1"><slot name="clear-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 6L18 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></slot></glide-core-icon-button>`:""} ${this.type==="password"&&this.passwordToggle&&!this.disabled?m`<glide-core-icon-button variant="tertiary" class="password-toggle" aria-label="${this.passwordVisible?"Hide password":"Show password"}" aria-controls="input" aria-expanded="${this.passwordVisible?"true":"false"}" @click="${n(this,M,U)}" tabindex="-1">${this.passwordVisible?m`<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>`:m`<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>`}</glide-core-icon-button>`:""}<div class="suffix">${this.isTypeSearch?W:m`<slot name="suffix"></slot>`}</div></div><div class="meta" id="meta" slot="description"><slot class="description" name="description"></slot>${this.maxlength?m`<div class="${N({"character-count":!0,error:s(this,b,$)})}">${this.valueCharacterCount}/${this.maxlength}</div>`:_}</div></glide-core-label>`}reportValidity(){return s(this,h).reportValidity()}get valueCharacterCount(){return this.value.length}};g=new WeakMap,h=new WeakMap,y=new WeakMap,b=new WeakSet,$=function(){return!!(this.maxlength&&this.valueCharacterCount>this.maxlength)},w=new WeakSet,F=function(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit},d=new WeakSet,c=function(){return s(this,g).value},x=new WeakSet,H=function(){this.hasFocus=!1},E=new WeakSet,j=function(t){this.value=s(this,d,c).value,n(this,v,f).call(this),this.dispatchEvent(new Event(t.type,t))},V=new WeakSet,z=function(t){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),s(this,d,c)?.focus(),n(this,v,f).call(this),t.stopPropagation()},L=new WeakSet,D=function(){this.hasFocus=!0},T=new WeakSet,C=function(){const t=s(this,d,c).value;this.value=t,n(this,v,f).call(this)},M=new WeakSet,U=function(){this.passwordVisible=!this.passwordVisible},v=new WeakSet,f=async function(){await this.updateComplete,s(this,h).setValidity(s(this,d,c)?.validity,s(this,d,c)?.validationMessage,s(this,d,c))},e.formAssociated=!0,e.shadowRootOptions={...q.shadowRootOptions,mode:"closed",delegatesFocus:!0},e.styles=X,i([o()],e.prototype,"type",2),i([o({reflect:!0})],e.prototype,"name",2),i([o()],e.prototype,"value",2),i([o()],e.prototype,"label",2),i([o({attribute:"hide-label",type:Boolean})],e.prototype,"hideLabel",2),i([o({reflect:!0})],e.prototype,"orientation",2),i([o()],e.prototype,"placeholder",2),i([o({type:Boolean})],e.prototype,"clearable",2),i([o({type:Boolean})],e.prototype,"spellcheck",2),i([o()],e.prototype,"autocapitalize",2),i([o({attribute:"password-toggle",type:Boolean})],e.prototype,"passwordToggle",2),i([o({reflect:!0,type:Boolean})],e.prototype,"required",2),i([o({type:Boolean})],e.prototype,"readonly",2),i([o({type:Boolean})],e.prototype,"disabled",2),i([o({type:Number,converter(t){return t&&Number.parseInt(t,10)}})],e.prototype,"maxlength",2),i([O({slot:"description"})],e.prototype,"descriptionNodes",2),i([O({slot:"prefix"})],e.prototype,"prefixIconNodes",2),i([O({slot:"suffix"})],e.prototype,"suffixIconNodes",2),i([k()],e.prototype,"hasFocus",2),i([k()],e.prototype,"isCheckingValidity",2),i([k()],e.prototype,"isReportValidityOrSubmit",2),i([k()],e.prototype,"passwordVisible",2),e=i([Q("glide-core-input")],e);export{e as default};

package/dist/input.stories.d.ts

@@ -0,0 +1,19 @@
+import './icons/storybook.js';
+import './input.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Default: StoryObj;
+export declare const Password: StoryObj;
+export declare const WithError: StoryObj;
+export declare const Description: StoryObj;
+export declare const Readonly: StoryObj;
+export declare const Disabled: StoryObj;
+export declare const Placeholder: StoryObj;
+export declare const Clearable: StoryObj;
+export declare const SuffixIcon: StoryObj;
+export declare const PrefixIcon: StoryObj;
+export declare const SearchType: StoryObj;
+export declare const MaxLength: StoryObj;
+export declare const MaxLengthAndDescription: StoryObj;
+export declare const Tooltip: StoryObj;

package/dist/input.styles.d.ts

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

package/dist/input.styles.js

@@ -0,0 +1,109 @@
+"use strict";import{css as e}from"lit";export default e`
+  .meta {
+    column-gap: var(--glide-core-spacing-xs);
+    display: flex;
+    font-size: 0.75rem;
+    grid-column: 2;
+    justify-content: space-between;
+  }
+
+  .description {
+    display: block;
+  }
+
+  .character-count {
+    &.error {
+      font-weight: var(--glide-core-font-weight-bold);
+    }
+  }
+
+  .search-icon {
+    align-items: center;
+    display: flex;
+  }
+
+  .input-box {
+    align-items: center;
+    background-color: var(--glide-core-surface-base-lighter);
+    block-size: 2.125rem;
+    border: 1px solid var(--glide-core-border-base-light);
+    border-radius: var(--glide-core-spacing-xs);
+    box-sizing: border-box;
+    color: var(--glide-core-text-body-1);
+    display: flex;
+    gap: var(--glide-core-spacing-xxs);
+    line-height: var(--glide-core-body-xs-line-height);
+    padding-inline: var(--glide-core-spacing-sm);
+
+    &.error {
+      border-color: var(--glide-core-status-error);
+    }
+
+    &.focused:not(.error) {
+      border-color: var(--glide-core-border-focus);
+    }
+
+    /* We had to resort to a class selector because there may be a bug in Chrome and Safari
+    * with ":read-only"
+    * https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
+    */
+    &.readonly {
+      border: 1px solid transparent;
+      padding-inline-start: 0;
+    }
+
+    &.disabled {
+      background-color: var(--glide-core-surface-base-gray-light);
+      color: var(--glide-core-text-tertiary-disabled);
+    }
+
+    input {
+      border: none;
+      color: inherit;
+      cursor: inherit;
+      font-family: var(--glide-core-font-sans);
+      font-size: var(--glide-core-body-sm-font-size);
+      font-weight: var(--glide-core-body-xs-font-weight);
+      inline-size: 100%;
+      min-inline-size: 0;
+      outline: none;
+      padding: 0;
+
+      &::-webkit-search-decoration,
+      &::-webkit-search-cancel-button,
+      &::-webkit-search-results-button,
+      &::-webkit-search-results-decoration {
+        appearance: none;
+      }
+    }
+
+    .suffix {
+      align-items: center;
+      display: flex;
+    }
+  }
+
+  .clear-icon-button,
+  .password-toggle,
+  ::slotted([slot='suffix']) {
+    align-items: center;
+    background: none;
+    border: none;
+    color: var(--glide-core-icon-default);
+    display: inline-flex;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .clear-icon-button,
+  .password-toggle,
+  .search-icon,
+  ::slotted([slot='prefix']),
+  ::slotted([slot='suffix']) {
+    display: flex;
+  }
+
+  .empty .clear-icon-button {
+    visibility: hidden;
+  }
+`;

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

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

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

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

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

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

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

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

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

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

package/dist/label.d.ts

@@ -0,0 +1,33 @@
+import './tooltip.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-label': GlideCoreLabel;
+    }
+}
+/**
+ * @private
+ *
+ * @description A label with a required control and optional description and tooltip.
+ *
+ * @slot - The label.
+ * @slot control - The control with which the label is associated.
+ * @slot summary - Additional information or context.
+ * @slot description - Additional information or context.
+ * @slot tooltip - Content for the tooltip.
+ */
+export default class GlideCoreLabel extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    error: boolean;
+    hide: boolean;
+    orientation: 'horizontal' | 'vertical';
+    required: boolean;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    private hasDescriptionSlot;
+    private hasSummarySlot;
+    private hasTooltipSlot;
+}

package/dist/label.js

@@ -0,0 +1 @@
+"use strict";var O=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var r=(o,e,t,S)=>{for(var n=S>1?void 0:S?U(e,t):e,R=o.length-1,w;R>=0;R--)(w=o[R])&&(n=(S?w(e,t,n):w(n))||n);return S&&n&&O(e,t,n),n};var N=(o,e,t)=>{if(!e.has(o))throw TypeError("Cannot "+t)};var i=(o,e,t)=>(N(o,e,"read from private field"),t?t.call(o):e.get(o)),l=(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 h=(o,e,t)=>(N(o,e,"access private method"),t);var c,d,v,f,g,y,k,E,D,T,z,b,q,M,I;import"./tooltip.js";import{LitElement as x,html as H}from"lit";import{classMap as a}from"lit/directives/class-map.js";import{createRef as m,ref as p}from"lit/directives/ref.js";import{customElement as j,property as u,state as B}from"lit/decorators.js";import{owSlot as $}from"./library/ow.js";import A from"./label.styles.js";import{svg as F}from"lit/static-html.js";const J=F`<svg aria-label="More information" width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="8" r="1" fill="currentColor"/></svg>`;let s=class extends x{constructor(){super(...arguments);l(this,y);l(this,E);l(this,T);l(this,b);l(this,M);this.disabled=!1;this.error=!1;this.hide=!1;this.orientation="horizontal";this.required=!1;this.hasDescriptionSlot=!1;this.hasSummarySlot=!1;this.hasTooltipSlot=!1;l(this,c,m());l(this,d,m());l(this,v,m());l(this,f,m());l(this,g,m())}firstUpdated(){$(i(this,d).value),$(i(this,c).value)}render(){return H`<div class="${a({component:!0,horizontal:this.orientation==="horizontal",vertical:this.orientation==="vertical","hidden-label":this.hide})}"><div class="${a({"tooltip-and-label":!0,hidden:this.hide})}" part="tooltip-and-label-container"><div class="tooltip-and-label"><glide-core-tooltip class="${a({tooltip:!0,vertical:this.orientation==="vertical",visible:this.hasTooltipSlot})}" placement="${this.orientation==="vertical"?"right":"bottom"}"><span class="tooltip-target" slot="target" tabindex="0">${J}</span><slot class="${a({tooltip:!0,visible:this.hasTooltipSlot})}" name="tooltip" @slotchange="${h(this,M,I)}" ${p(i(this,g))}></slot></glide-core-tooltip><div class="${a({label:!0,disabled:this.disabled})}" data-test="label"><slot @slotchange="${h(this,E,D)}" ${p(i(this,d))}></slot>${this.required?H`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></div></div><div class="control-and-summary"><slot class="${a({control:!0,error:this.error,disabled:this.disabled,vertical:this.orientation==="vertical",summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${h(this,y,k)}" ${p(i(this,c))}></slot><slot class="${a({summary:!0,error:this.error})}" name="summary" @slotchange="${h(this,b,q)}" ${p(i(this,f))}></slot></div><slot class="${a({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${h(this,T,z)}" ${p(i(this,v))}></slot></div>`}};c=new WeakMap,d=new WeakMap,v=new WeakMap,f=new WeakMap,g=new WeakMap,y=new WeakSet,k=function(){$(i(this,c).value)},E=new WeakSet,D=function(){$(i(this,d).value)},T=new WeakSet,z=function(){const t=i(this,v).value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=!!(t&&t.length>0)},b=new WeakSet,q=function(){const t=i(this,f).value?.assignedNodes({flatten:!0});this.hasSummarySlot=!!(t&&t.length>0)},M=new WeakSet,I=function(){const t=i(this,g).value?.assignedNodes({flatten:!0});this.hasTooltipSlot=!!(t&&t.length>0)},s.shadowRootOptions={...x.shadowRootOptions,mode:"closed"},s.styles=A,r([u({reflect:!0,type:Boolean})],s.prototype,"disabled",2),r([u({reflect:!0,type:Boolean})],s.prototype,"error",2),r([u({reflect:!0,type:Boolean})],s.prototype,"hide",2),r([u({reflect:!0})],s.prototype,"orientation",2),r([u({reflect:!0,type:Boolean})],s.prototype,"required",2),r([B()],s.prototype,"hasDescriptionSlot",2),r([B()],s.prototype,"hasSummarySlot",2),r([B()],s.prototype,"hasTooltipSlot",2),s=r([j("glide-core-label")],s);export{s as default};

package/dist/label.styles.d.ts

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

package/dist/label.styles.js

@@ -0,0 +1,154 @@
+"use strict";import{css as e}from"lit";import o from"./styles/visually-hidden.js";export default[e`
+    .component {
+      &.horizontal {
+        column-gap: var(--glide-core-spacing-sm);
+        display: grid;
+
+        /*
+         Since 1fr is actually minmax(auto, 1fr), this explicit minmax will make it so
+         the first column is sized to its content, and the second column fills the rest
+         of the space.
+        */
+        grid-template-columns: auto minmax(0, 1fr);
+      }
+
+      &.vertical {
+        display: flex;
+        flex-direction: column;
+      }
+
+      &.hidden-label {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+
+    .tooltip-and-label {
+      align-items: center;
+      column-gap: var(--glide-core-spacing-xs);
+      display: flex;
+
+      &.hidden {
+        ${o};
+      }
+    }
+
+    glide-core-tooltip {
+      display: none;
+
+      &.vertical {
+        order: 1;
+      }
+
+      &.visible {
+        /*
+      The default is "display: content". But "order" does not work with
+      "display: content" and "order" is needed above.
+    */
+        display: block;
+      }
+    }
+
+    .tooltip-target {
+      background-color: transparent;
+      border: none;
+
+      /* TODO
+We want the focus outline to wrap neatly around the trigger. Tooltip should
+probably wrap its default slot in a SPAN with "tabindex=0" and include the
+below styles so every consumer doesn't have to.
+*/
+      border-radius: 50%;
+      color: var(--glide-core-text-body-1);
+
+      /*
+Any "display" that's not inline-level will do. We don't want the button to
+acquire a line box, which will make it taller than its content and thus
+make it difficult to center vertically with the label.
+*/
+      display: flex;
+      outline-offset: 1px;
+      padding: 0;
+    }
+
+    .label {
+      color: var(--glide-core-text-body-1);
+      display: block;
+      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-heading-xxxs-font-weight);
+      line-height: 100%;
+      user-select: none;
+
+      &.disabled ::slotted(*) {
+        cursor: not-allowed;
+      }
+
+      &.horizontal {
+        line-height: 100%;
+      }
+
+      &.vertical {
+        margin-block-end: var(--glide-core-spacing-xxs);
+      }
+    }
+
+    .required-symbol {
+      color: var(--glide-core-status-error);
+    }
+
+    .control-and-summary {
+      align-items: center;
+      display: flex;
+      gap: var(--glide-core-spacing-sm);
+    }
+
+    .control {
+      display: block;
+
+      &.summaryless {
+        flex-grow: 1;
+      }
+
+      &.disabled::slotted(*) {
+        cursor: not-allowed;
+      }
+
+      &.vertical:not(.hidden-label) {
+        margin-block-start: var(--glide-core-spacing-xxs);
+      }
+    }
+
+    .summary {
+      font-family: var(--glide-core-body-sm-font-family);
+      font-size: var(--glide-core-body-sm-font-size);
+      font-style: var(--glide-core-body-sm-font-style);
+      font-weight: var(--glide-core-body-sm-font-weight);
+
+      &.error {
+        color: var(--glide-core-status-error);
+      }
+    }
+
+    .description {
+      color: var(--glide-core-text-body-1);
+      display: none;
+      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-style);
+      font-weight: var(--glide-core-body-xs-font-weight);
+      grid-column: 2;
+      line-height: var(--glide-core-body-xs-line-height);
+      margin-block-start: var(--glide-core-spacing-xxs);
+
+      &.error {
+        color: var(--glide-core-status-error);
+      }
+
+      &.visible {
+        display: block;
+      }
+    }
+  `];

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

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

package/dist/library/expect-argument-error.d.ts

@@ -0,0 +1 @@
+export default function (callback: () => Promise<unknown>): Promise<void>;

package/dist/library/expect-argument-error.js

@@ -0,0 +1 @@
+"use strict";import{ArgumentError as e}from"ow";import{expect as i}from"@open-wc/testing";import c from"sinon";export default async function(r){const n=window.onerror;window.onerror=null;const o=c.spy();try{await r.call(context)}catch(t){t instanceof e&&o()}i(o.called).to.be.true,window.onerror=n}

package/dist/library/ow.d.ts

@@ -0,0 +1,16 @@
+import { type Ow } from 'ow';
+/**
+ * @description Asserts that a slot has at least one slotted node.
+ *
+ * @param slot - The slot to assert against.
+ */
+export declare function owSlot(slot?: HTMLSlotElement): void;
+/**
+ * @description Asserts that slotted nodes are a certain type.
+ *
+ * @param slot - The slot to assert against.
+ * @param slotted - An array of constructors. Slotted nodes must extend one of them.
+ */
+export declare function owSlotType(slot?: HTMLSlotElement, slotted?: (typeof Element | typeof Text)[]): void;
+declare const owOrShim: Ow;
+export default owOrShim;

package/dist/library/ow.js

@@ -0,0 +1 @@
+"use strict";import e from"ow";const i=window.location.host.startsWith("localhost")||window.location.host.startsWith("127.0.0.1");export function owSlot(o){i&&(e(o,e.object.is(t=>t instanceof HTMLSlotElement)),e(o.assignedNodes().length,e.number.is(t=>t>0).message(o.name?`Expected a "${o.name}" slot.`:"Expected a default slot.")))}export function owSlotType(o,t=[]){if(i&&(e(o,e.object.is(s=>s instanceof HTMLSlotElement)),o.assignedNodes().length!==0&&t.length>0)){const s=o.assignedNodes({flatten:!0}).filter(n=>n instanceof Text&&t.includes(Text)?!0:!(n instanceof Text));e(s.length,e.number.is(n=>n>0).message(`Expected a slotted node that extends ${t.map(({name:n})=>n).join(" or ")}.`));for(const n of s){const c=`Expected slotted node to extend ${t.map(({name:a})=>a).join(" or ")}. Extends ${n.constructor.name} instead.`,l=t.some(a=>n instanceof a);e(l,e.boolean.true.message(c))}}}const r=new Proxy(()=>{},{get:()=>r,apply:()=>r}),m=i?e:r;export default m;

package/dist/library/ow.test.d.ts

@@ -0,0 +1,4 @@
+import { LitElement } from 'lit';
+export default class GlideCoreSlot extends LitElement {
+    render(): any;
+}

package/dist/menu.button.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-menu-button': GlideCoreMenuButton;
+    }
+}
+/**
+ * @description A button for use within a <glide-core-menu>.
+ *
+ * @slot icon - An icon.
+ */
+export default class GlideCoreMenuButton extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    label?: string;
+    privateActive: boolean;
+    privateIsFocused: boolean;
+    focus(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/menu.button.js

@@ -0,0 +1 @@
+"use strict";var y=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var c=(e,t,o,a)=>{for(var i=a>1?void 0:a?E(t,o):t,p=e.length-1,f;p>=0;p--)(f=e[p])&&(i=(a?f(t,o,i):f(i))||i);return a&&i&&y(t,o,i),i};var u=(e,t,o)=>{if(!t.has(e))throw TypeError("Cannot "+o)};var v=(e,t,o)=>(u(e,t,"read from private field"),o?o.call(e):t.get(e)),m=(e,t,o)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,o)};var d=(e,t,o)=>(u(e,t,"access private method"),o);var r,l,$,n,g;import{LitElement as h,html as F}from"lit";import{classMap as R}from"lit/directives/class-map.js";import{createRef as I,ref as w}from"lit/directives/ref.js";import{customElement as x,property as b}from"lit/decorators.js";import A from"./menu.button.styles.js";let s=class extends h{constructor(){super(...arguments);m(this,l);m(this,n);this.privateActive=!1;this.privateIsFocused=!1;m(this,r,I())}focus(){v(this,r).value?.focus()}render(){return F`<button class="${R({component:!0,"component-active":this.privateActive})}" data-test="component" role="menuitem" tabindex="${this.privateActive?"0":"-1"}" type="button" @focusin="${d(this,l,$)}" @focusout="${d(this,n,g)}" ${w(v(this,r))}><slot name="icon"></slot>${this.label}</button>`}};r=new WeakMap,l=new WeakSet,$=function(){this.privateIsFocused=!0},n=new WeakSet,g=function(){this.privateIsFocused=!1},s.shadowRootOptions={...h.shadowRootOptions,mode:"closed"},s.styles=A,c([b({reflect:!0})],s.prototype,"label",2),c([b({type:Boolean})],s.prototype,"privateActive",2),s=c([x("glide-core-menu-button")],s);export{s as default};

package/dist/menu.button.styles.d.ts

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

package/dist/menu.button.styles.js

@@ -0,0 +1,20 @@
+"use strict";import{css as e}from"lit";export default[e`
+    .component {
+      align-items: center;
+      background-color: transparent;
+      border: none;
+      border-radius: var(--glide-core-spacing-sm);
+      cursor: pointer;
+      display: flex;
+      font: inherit;
+      gap: var(--gap);
+      inline-size: 100%;
+      padding-block: var(--padding-block);
+      padding-inline: var(--padding-inline);
+      user-select: none;
+
+      &.component-active {
+        background-color: var(--glide-core-surface-hover);
+      }
+    }
+  `];

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

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

package/dist/menu.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import { type Placement } from '@floating-ui/dom';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-menu': GlideCoreMenu;
+    }
+}
+/**
+ * @description A basic menu.
+ *
+ * @slot - One or more of <glide-core-menu-link> or <glide-core-menu-button>.
+ * @slot target - A focusable element against which Menu will be positioned. Opens and closes Menu when interacted with.
+ */
+export default class GlideCoreMenu extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    get open(): boolean;
+    set open(isOpen: boolean);
+    placement: Placement;
+    size: 'small' | 'large';
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    focus(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/menu.js

@@ -0,0 +1 @@
+"use strict";var et=Object.defineProperty;var it=Object.getOwnPropertyDescriptor;var g=(n,a,t,i)=>{for(var r=i>1?void 0:i?it(a,t):a,o=n.length-1,F;o>=0;o--)(F=n[o])&&(r=(i?F(a,t,r):F(r))||r);return i&&r&&et(a,t,r),r};var z=(n,a,t)=>{if(!a.has(n))throw TypeError("Cannot "+t)};var e=(n,a,t)=>(z(n,a,"read from private field"),t?t.call(n):a.get(n)),s=(n,a,t)=>{if(a.has(n))throw TypeError("Cannot add the same private member more than once");a instanceof WeakSet?a.add(n):a.set(n,t)},B=(n,a,t,i)=>(z(n,a,"write to private field"),i?i.call(n,t):a.set(n,t),t);var l=(n,a,t)=>(z(n,a,"access private method"),t);var y,D,m,E,h,v,k,w,N,L,J,U,Q,C,W,K,X,S,Y,R,Z,H,_,M,G,P,tt,p,u,A,j,c,f;import{LitElement as V,html as ot}from"lit";import{autoUpdate as st,computePosition as at,flip as nt,offset as rt}from"@floating-ui/dom";import{classMap as lt}from"lit/directives/class-map.js";import{createRef as T,ref as $}from"lit/directives/ref.js";import{customElement as ct,property as I}from"lit/decorators.js";import{owSlot as b,owSlotType as q}from"./library/ow.js";import x from"./menu.button.js";import O from"./menu.link.js";import pt from"./menu.styles.js";let d=class extends V{constructor(){super(...arguments);s(this,w);s(this,L);s(this,U);s(this,C);s(this,K);s(this,S);s(this,R);s(this,H);s(this,M);s(this,P);s(this,p);s(this,A);s(this,c);this.placement="bottom-start";this.size="large";s(this,y,void 0);s(this,D,T());s(this,m,T());s(this,E,!1);s(this,h,T());s(this,v,T());s(this,k,t=>{t.target&&this.contains(t.target)||(this.open=!1)})}get open(){return e(this,E)}set open(t){var i;B(this,E,t),t?l(this,A,j).call(this):(i=e(this,y))==null||i.call(this),e(this,c,f)&&(e(this,c,f).ariaExpanded=t?"true":"false")}connectedCallback(){super.connectedCallback(),document.addEventListener("click",e(this,k),{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",e(this,k),{capture:!0})}firstUpdated(){b(e(this,m).value),b(e(this,v).value),q(e(this,m).value,[x,O,Text]),l(this,A,j).call(this);const t=e(this,p,u).at(0);t&&(t.privateActive=!0),e(this,c,f)&&e(this,h).value&&(e(this,c,f).ariaHasPopup="true",e(this,c,f).ariaExpanded=this.open?"true":"false")}focus(){const t=e(this,v).value?.assignedElements().at(0);t&&"focus"in t&&t?.focus()}render(){return ot`<div @focusout="${l(this,S,Y)}" @keydown="${l(this,R,Z)}" ${$(e(this,D))} class="component"><div class="target-container" @click="${l(this,H,_)}" @keydown="${l(this,M,G)}" id="target-container"><slot name="target" @slotchange="${l(this,P,tt)}" ${$(e(this,v))}></slot></div><div aria-labelledby="target-container" class="${lt({options:!0,large:this.size==="large",small:this.size==="small",visible:this.open})}" role="menu" ${$(e(this,h))}><slot @click="${l(this,U,Q)}" @keydown="${l(this,C,W)}" @mouseover="${l(this,K,X)}" @slotchange="${l(this,L,J)}" ${$(e(this,m))}></slot></div></div>`}};y=new WeakMap,D=new WeakMap,m=new WeakMap,E=new WeakMap,h=new WeakMap,v=new WeakMap,k=new WeakMap,w=new WeakSet,N=async function(){const t=e(this,p,u).find(i=>i.privateActive);t&&(await this.updateComplete,t.focus())},L=new WeakSet,J=function(){b(e(this,m).value),q(e(this,m).value,[x,O,Text])},U=new WeakSet,Q=function(){this.open=!1},C=new WeakSet,W=function(t){if([" ","Enter"].includes(t.key)){this.open=!1,this.focus();return}const i=e(this,p,u).findIndex(o=>o.privateActive),r=e(this,p,u).at(i);if(r){if(t.key==="ArrowUp"&&!t.metaKey){t.preventDefault();const o=e(this,p,u).at(i-1);o&&i!==0&&(r.privateActive=!1,o.privateActive=!0,o.focus());return}if(t.key==="ArrowDown"&&!t.metaKey){t.preventDefault();const o=e(this,p,u).at(i+1);o&&(r.privateActive=!1,o.privateActive=!0,o.focus());return}if(t.key==="ArrowUp"&&t.metaKey||t.key==="Home"||t.key==="PageUp"){t.preventDefault();const o=e(this,p,u).at(0);o&&(r.privateActive=!1,o.privateActive=!0,o.focus());return}if(t.key==="ArrowDown"&&t.metaKey||t.key==="End"||t.key==="PageDown"){t.preventDefault();const o=e(this,p,u).at(-1);o&&(r.privateActive=!1,o.privateActive=!0,o.focus());return}}},K=new WeakSet,X=function(t){if(t.target instanceof O||t.target instanceof x){for(const i of e(this,p,u))i.privateActive=i===t.target;t.target.focus()}},S=new WeakSet,Y=function(){setTimeout(()=>{e(this,p,u).some(({privateIsFocused:i})=>i)||(this.open=!1)})},R=new WeakSet,Z=function(t){t.key==="Escape"&&(this.open=!1,this.focus())},H=new WeakSet,_=function(){e(this,c,f)instanceof HTMLElement&&(e(this,c,f).ariaExpanded=this.open?"true":"false"),this.open=!this.open,this.open?l(this,w,N).call(this):this.focus()},M=new WeakSet,G=function(t){[" ","ArrowUp","ArrowDown"].includes(t.key)&&(t.preventDefault(),this.open=!0,l(this,w,N).call(this))},P=new WeakSet,tt=function(){b(e(this,v).value)},p=new WeakSet,u=function(){return(e(this,m).value?.assignedElements({flatten:!0})??[]).filter(t=>t instanceof O||t instanceof x)},A=new WeakSet,j=function(){e(this,c,f)&&e(this,h).value&&B(this,y,st(e(this,c,f),e(this,h).value,()=>{(async()=>{if(e(this,c,f)&&e(this,h).value){const{x:t,y:i,placement:r}=await at(e(this,c,f),e(this,h).value,{placement:this.placement,middleware:[rt({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*16}),nt()]});e(this,h).value.dataset.placement=r,Object.assign(e(this,h).value.style,{left:`${t}px`,top:`${i}px`})}})()}))},c=new WeakSet,f=function(){return e(this,v).value?.assignedElements().at(0)},d.shadowRootOptions={...V.shadowRootOptions,mode:"closed"},d.styles=pt,g([I({reflect:!0,type:Boolean})],d.prototype,"open",1),g([I({reflect:!0})],d.prototype,"placement",2),g([I({reflect:!0})],d.prototype,"size",2),d=g([ct("glide-core-menu")],d);export{d as default};

package/dist/menu.link.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-menu-link': GlideCoreMenuLink;
+    }
+}
+/**
+ * @description A link for use within a <glide-core-menu>.
+ *
+ * @slot icon - An icon.
+ */
+export default class GlideCoreMenuLink extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    label?: string;
+    url?: string;
+    privateActive: boolean;
+    privateIsFocused: boolean;
+    focus(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/menu.link.js

@@ -0,0 +1 @@
+"use strict";var F=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var a=(e,t,o,c)=>{for(var r=c>1?void 0:c?R(t,o):t,f=e.length-1,n;f>=0;f--)(n=e[f])&&(r=(c?n(t,o,r):n(r))||r);return c&&r&&F(t,o,r),r};var d=(e,t,o)=>{if(!t.has(e))throw TypeError("Cannot "+o)};var u=(e,t,o)=>(d(e,t,"read from private field"),o?o.call(e):t.get(e)),m=(e,t,o)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,o)};var h=(e,t,o)=>(d(e,t,"access private method"),o);var i,l,g,p,E;import{LitElement as $,html as b}from"lit";import{classMap as y}from"lit/directives/class-map.js";import{createRef as I,ref as w}from"lit/directives/ref.js";import{customElement as x,property as v}from"lit/decorators.js";import{ifDefined as A}from"lit/directives/if-defined.js";import T from"./menu.link.styles.js";let s=class extends ${constructor(){super(...arguments);m(this,l);m(this,p);this.privateActive=!1;this.privateIsFocused=!1;m(this,i,I())}focus(){u(this,i).value?.focus()}render(){return b`<a class="${y({component:!0,"component-active":this.privateActive})}" data-test="component" href="${A(this.url)}" role="menuitem" tabindex="${this.privateActive?"0":"-1"}" @focusin="${h(this,l,g)}" @focusout="${h(this,p,E)}" ${w(u(this,i))}><slot name="icon"></slot>${this.label}</a>`}};i=new WeakMap,l=new WeakSet,g=function(){this.privateIsFocused=!0},p=new WeakSet,E=function(){this.privateIsFocused=!1},s.shadowRootOptions={...$.shadowRootOptions,mode:"closed"},s.styles=T,a([v({reflect:!0})],s.prototype,"label",2),a([v({reflect:!0})],s.prototype,"url",2),a([v({type:Boolean})],s.prototype,"privateActive",2),s=a([x("glide-core-menu-link")],s);export{s as default};

package/dist/menu.link.styles.d.ts

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

package/dist/menu.link.styles.js

@@ -0,0 +1,22 @@
+"use strict";import{css as e}from"lit";export default[e`
+    .component {
+      align-items: center;
+      background-color: transparent;
+      border: none;
+      border-radius: var(--glide-core-spacing-sm);
+      box-sizing: border-box;
+      color: inherit;
+      display: flex;
+      font: inherit;
+      gap: var(--gap);
+      inline-size: 100%;
+      padding-block: var(--padding-block);
+      padding-inline: var(--padding-inline);
+      text-decoration: none;
+      user-select: none;
+
+      &.component-active {
+        background-color: var(--glide-core-surface-hover);
+      }
+    }
+  `];

package/dist/menu.link.test.basics.d.ts

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