@crowdstrike/glide-core 0.5.0

package/dist/dropdown.d.ts

@@ -0,0 +1,66 @@
+import './checkbox.js';
+import './dropdown.option.js';
+import './label.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-dropdown': GlideCoreDropdown;
+    }
+}
+/**
+ * @description A dropdown with optional description and tooltip. Participates in forms and validation via `FormData` and various methods.
+ *
+ * @event change - Dispatched when an option is selected. An array of the selected option values is assigned to `event.detail`.
+ * @event input - Dispatched when an option is selected. An array of the selected option values is assigned to `event.detail`.
+ *
+ * @slot - One or more of `<glide-core-dropdown-option>`.
+ * @slot tooltip - Content for the tooltip.
+ * @slot description - Additional information or context.
+ */
+export default class GlideCoreDropdown extends LitElement {
+    #private;
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    hideLabel: boolean;
+    label?: string;
+    name?: string;
+    open: boolean;
+    orientation: 'horizontal' | 'vertical';
+    placeholder?: string;
+    selectAll: boolean;
+    get size(): 'small' | 'large';
+    set size(size: 'small' | 'large');
+    get multiple(): boolean;
+    set multiple(isMultiple: boolean);
+    required: boolean;
+    value: string[];
+    variant?: 'quiet';
+    private get selectedOptions();
+    private get lastSelectedOptionWithValue();
+    private get isAllSelected();
+    private get isSomeSelected();
+    private get activeOption();
+    private get internalLabel();
+    checkValidity(): boolean;
+    connectedCallback(): void;
+    createRenderRoot(): ShadowRoot;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    focus(): void;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get willValidate(): boolean;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    reportValidity(): boolean;
+    constructor();
+    private ariaActivedescendant;
+    private isCheckingValidity;
+    private isEveryOptionFilteredOut;
+    private isFilterable;
+    private isFiltering;
+    private isReportValidityOrSubmit;
+}

package/dist/dropdown.js

@@ -0,0 +1 @@
+"use strict";var Lt=Object.defineProperty;var Rt=Object.getOwnPropertyDescriptor;var o=(c,h,t,i)=>{for(var l=i>1?void 0:i?Rt(h,t):h,a=c.length-1,ot;a>=0;a--)(ot=c[a])&&(l=(i?ot(h,t,l):ot(l))||l);return i&&l&&Lt(h,t,l),l};var ht=(c,h,t)=>{if(!h.has(c))throw TypeError("Cannot "+t)};var e=(c,h,t)=>(ht(c,h,"read from private field"),t?t.call(c):h.get(c)),s=(c,h,t)=>{if(h.has(c))throw TypeError("Cannot add the same private member more than once");h instanceof WeakSet?h.add(c):h.set(c,t)},y=(c,h,t,i)=>(ht(c,h,"write to private field"),i?i.call(c,t):h.set(c,t),t);var r=(c,h,t)=>(ht(c,h,"access private method"),t);var V,E,p,A,R,x,I,K,d,T,N,L,U,P,j,f,g,$,k,B,Q,v,b,O,S,W,X,J,ct,Y,pt,Z,vt,C,gt,D,mt,_,bt,G,Ot,tt,yt,et,At,it,St,st,Et,at,$t,lt,Ft,nt,kt,rt,Vt;import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import{LitElement as ut,html as F}from"lit";import{classMap as z}from"lit/directives/class-map.js";import{createRef as q,ref as H}from"lit/directives/ref.js";import{customElement as xt,property as m,state as M}from"lit/decorators.js";import{owSlotType as dt}from"./library/ow.js";import{repeat as It}from"lit/directives/repeat.js";import{svg as Mt}from"lit/static-html.js";import{when as w}from"lit/directives/when.js";import u from"./dropdown.option.js";import ft from"./tag.js";import wt from"./icons/magnifying-glass.js";import Tt from"./dropdown.styles.js";let n=class extends ut{constructor(){super();s(this,f);s(this,$);s(this,B);s(this,v);s(this,O);s(this,W);s(this,J);s(this,Y);s(this,Z);s(this,C);s(this,D);s(this,_);s(this,G);s(this,tt);s(this,et);s(this,it);s(this,st);s(this,at);s(this,lt);s(this,nt);s(this,rt);this.disabled=!1;this.hideLabel=!1;this.open=!1;this.orientation="horizontal";this.selectAll=!1;this.required=!1;this.value=[];this.ariaActivedescendant="";this.isCheckingValidity=!1;this.isEveryOptionFilteredOut=!1;this.isFilterable=!1;this.isFiltering=!1;this.isReportValidityOrSubmit=!1;s(this,V,q());s(this,E,q());s(this,p,q());s(this,A,void 0);s(this,R,!1);s(this,x,!1);s(this,I,!1);s(this,K,!1);s(this,d,q());s(this,T,void 0);s(this,N,"large");s(this,L,3);s(this,U,q());s(this,P,t=>{this.multiple&&!(t.target instanceof n||t.target instanceof u)?this.open=!1:!this.multiple&&!(t.target instanceof n)&&(this.open=!1)});s(this,j,({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,JSON.stringify(this.value))});y(this,A,this.attachInternals()),this.addEventListener("invalid",t=>{t?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())})}get size(){return e(this,N)}set size(t){if(y(this,N,t),e(this,$,k))for(const i of e(this,$,k))i.privateSize=t}get multiple(){return e(this,x)}set multiple(t){const i=e(this,x)&&!t,l=!e(this,x)&&t;y(this,x,t);for(const a of e(this,f,g))a.privateMultiple=t,i&&a!==this.lastSelectedOptionWithValue&&(a.selected=!1);i&&this.lastSelectedOptionWithValue?this.value=[this.lastSelectedOptionWithValue.value]:l&&this.lastSelectedOptionWithValue&&this.lastSelectedOptionWithValue.privateUpdateCheckbox()}get selectedOptions(){return e(this,f,g).filter(t=>t instanceof u&&t.selected)}get lastSelectedOptionWithValue(){return e(this,f,g).findLast(t=>t.selected&&t.value)}get isAllSelected(){return e(this,f,g).filter(({selected:t})=>t).length===e(this,f,g).length}get isSomeSelected(){return e(this,f,g).some(({selected:t})=>t)}get activeOption(){return e(this,$,k)?.find(({privateActive:t})=>t)}get internalLabel(){return!this.isFilterable&&this.selectedOptions.length===0?this.placeholder:!this.multiple&&!this.isFilterable&&this.selectedOptions.at(-1)?.label?this.selectedOptions.at(-1)?.label:""}checkValidity(){return this.isCheckingValidity=!0,e(this,A).checkValidity()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",e(this,P),{capture:!0})}createRenderRoot(){return y(this,T,super.createRenderRoot()),e(this,T)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",e(this,j)),document.removeEventListener("click",e(this,P),{capture:!0})}firstUpdated(){dt(e(this,E).value,[u,Text])}focus(){this.isFilterable?e(this,p).value?.focus():e(this,V).value?.focus()}get form(){return e(this,A).form}get validity(){return this.required&&this.selectedOptions.length===0?e(this,A).setValidity({valueMissing:!0}," ",e(this,p).value):e(this,A).setValidity({}),e(this,A).validity}get willValidate(){return e(this,A).willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",e(this,j))}formResetCallback(){for(const l of e(this,f,g))l.hasAttribute("selected")||(l.selected=!1);const t=e(this,f,g).filter(l=>l.hasAttribute("selected")),i=t.at(-1)?.value;this.value=this.multiple&&t.length>0?t.map(({value:l})=>l):!this.multiple&&i?[i]:[]}render(){return F`<div class="${z({component:!0,horizontal:this.orientation==="horizontal",vertical:this.orientation==="vertical"})}"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${e(this,J,ct)}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${r(this,Z,vt)}" @keydown="${r(this,C,gt)}"><div class="${z({dropdown:!0,quiet:this.variant==="quiet",disabled:this.disabled,error:e(this,J,ct),multiple:this.multiple})}" @click="${r(this,D,mt)}" @mousedown="${r(this,_,bt)}">${w(this.multiple&&this.selectedOptions.length>0,()=>F`<ul aria-describedby="tag-overflow-text" class="tags" ${H(e(this,U))}>${w(this.multiple&&this.selectedOptions.length>0,()=>F`${It(this.selectedOptions,({id:t})=>t,({id:t,label:i},l)=>F`<li class="${z({"tag-container":!0,hidden:l>e(this,L)-1})}" data-test="tag-container" data-test-hidden="${l>e(this,L)-1}"><glide-core-tag data-test="tag" data-id="${t}" removable-label="${i??""}" @remove="${r(this,rt,Vt).bind(this,t)}">${i}</glide-core-tag></li>`)}`)}</ul>`)} ${w(this.isFilterable,()=>F`<input aria-activedescendant="${this.ariaActivedescendant}" aria-controls="options" aria-describedby="description" aria-expanded="${this.open}" aria-labelledby="label" autocapitalize="off" autocomplete="off" class="${z({input:!0,selection:!!this.selectedOptions.at(0),single:!this.multiple})}" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":this.selectedOptions.at(-1)?.label??""}" role="combobox" spellcheck="false" @input="${r(this,G,Ot)}" @keydown="${r(this,tt,yt)}" ${H(e(this,p))}>`)} ${w(this.internalLabel,()=>F`<div data-test="internal-label">${this.internalLabel}</div>`)} ${w(this.selectedOptions.length>e(this,L),()=>F`<div class="tag-overflow-text" id="tag-overflow-text" data-test="tag-overflow-text">+ <span data-test="tag-overflow-count">${this.selectedOptions.length-e(this,L)} </span>more</div>`)} <button aria-hidden="${this.isFilterable}" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="label" aria-describedby="description" class="button" data-test="button" id="button" tabindex="${this.isFilterable?"-1":"0"}" type="button" ${H(e(this,V))}>${w(this.isFiltering,()=>F`<div data-test="magnifying-glass-icon">${wt}</div>`,()=>Mt`<svg aria-label="Open" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`)}</button></div><div aria-labelledby="${this.isFilterable?"input":"button"}" class="${z({options:!0,visible:this.open&&!this.disabled&&!this.isEveryOptionFilteredOut})}" data-test="options" data-test-visible="${this.open&&!this.disabled&&!this.isEveryOptionFilteredOut}" role="listbox" @mousedown="${r(this,it,St)}" @mouseover="${r(this,st,Et)}"><glide-core-dropdown-option class="select-all" data-test="select-all" label="Select All" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" @private-selected-change="${r(this,nt,kt)}" ${H(e(this,d))}></glide-core-dropdown-option><slot @focusin="${r(this,et,At)}" @private-selected-change="${r(this,at,$t)}" @private-value-change="${r(this,lt,Ft)}" @slotchange="${r(this,Y,pt)}" ${H(e(this,E))}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return e(this,A).reportValidity()}};V=new WeakMap,E=new WeakMap,p=new WeakMap,A=new WeakMap,R=new WeakMap,x=new WeakMap,I=new WeakMap,K=new WeakMap,d=new WeakMap,T=new WeakMap,N=new WeakMap,L=new WeakMap,U=new WeakMap,P=new WeakMap,j=new WeakMap,f=new WeakSet,g=function(){return e(this,E).value?.assignedElements().filter(t=>t instanceof u)??[]},$=new WeakSet,k=function(){const t=e(this,E).value?.assignedElements().filter(i=>i instanceof u);if(t&&e(this,d).value)return[e(this,d).value,...t]},B=new WeakSet,Q=function(){return e(this,E).value?.assignedElements().filter(t=>t instanceof u&&!t.hidden)},v=new WeakSet,b=function(){const t=e(this,E).value?.assignedElements().filter(i=>i instanceof u&&!i.hidden);return e(this,d).value&&!e(this,d).value.hidden&&t?[e(this,d).value,...t]:t},O=new WeakSet,S=function(){if(e(this,$,k))for(const t of e(this,$,k))t.privateActive=!1},W=new WeakSet,X=async function(){this.activeOption&&(await this.updateComplete,this.activeOption.focus())},J=new WeakSet,ct=function(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit},Y=new WeakSet,pt=function(){if(dt(e(this,E).value,[u,Text]),this.isFilterable=e(this,f,g).length>10,e(this,$,k))for(const i of e(this,$,k))i.privateIsFocusable=!this.isFilterable,i.privateSize=this.size,i.privateMultiple=this.multiple;this.lastSelectedOptionWithValue?.value&&(r(this,O,S).call(this),this.lastSelectedOptionWithValue.privateActive=!0,this.ariaActivedescendant=this.lastSelectedOptionWithValue.id),e(this,d).value&&(y(this,R,!0),e(this,d).value.selected=this.isAllSelected,e(this,d).value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected);const t=e(this,v,b)?.at(0);t&&(r(this,O,S).call(this),t.privateActive=!0,this.ariaActivedescendant=t.id),this.multiple?this.value=this.selectedOptions.filter(i=>!!i.value).map(({value:i})=>i):this.lastSelectedOptionWithValue?.value&&(this.value=[this.lastSelectedOptionWithValue.value])},Z=new WeakSet,vt=function(t){t.relatedTarget===null&&!e(this,I)&&(this.open=!1)},C=new WeakSet,gt=function(t){if(t.key==="Escape"){this.open=!1,this.focus();return}const i=t.target===e(this,V).value||t.target===e(this,p).value||t.target instanceof u;if(!(this.multiple&&!i)){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(t.key)){t.preventDefault(),this.open=!0,this.isFilterable||r(this,W,X).call(this);return}if(this.activeOption&&this.open){if(t.key==="Enter"||t.key===" "){if(!this.isFilterable&&e(this,T)?.activeElement===e(this,V).value)return;if(this.multiple||y(this,K,!0),t.key==="Enter"){this.activeOption.selected=!this.activeOption?.selected;return}if(t.key===" "&&!this.isFilterable){this.activeOption.selected=!this.activeOption?.selected;return}}const l=e(this,v,b)?.indexOf(this.activeOption);if(t.key==="ArrowUp"&&!t.metaKey&&e(this,v,b)&&typeof l=="number"){t.preventDefault();const a=e(this,v,b).at(l-1);a&&l!==0&&(r(this,O,S).call(this),a.privateActive=!0,this.ariaActivedescendant=a.id,this.isFilterable?this.ariaActivedescendant=a.id:a.focus());return}if(t.key==="ArrowDown"&&!t.metaKey&&e(this,v,b)&&typeof l=="number"){t.preventDefault();const a=e(this,v,b).at(l+1);a&&(r(this,O,S).call(this),a.privateActive=!0,this.isFilterable?this.ariaActivedescendant=a.id:a.focus());return}if((t.key==="ArrowUp"&&t.metaKey||t.key==="Home"||t.key==="PageUp")&&e(this,v,b)){t.preventDefault();const a=e(this,v,b).at(0);a&&(r(this,O,S).call(this),a.privateActive=!0,this.isFilterable?this.ariaActivedescendant=a.id:a.focus());return}if((t.key==="ArrowDown"&&t.metaKey||t.key==="End"||t.key==="PageDown")&&e(this,v,b)){t.preventDefault();const a=e(this,v,b).at(-1);a&&(r(this,O,S).call(this),a.privateActive=!0,this.isFilterable?this.ariaActivedescendant=a.id:a.focus());return}}}},D=new WeakSet,mt=function(t){if(e(this,I)){y(this,I,!1);return}t.target instanceof Node&&e(this,V).value?.contains(t.target)&&!e(this,K)&&this.open?this.open=!1:!this.open&&t.detail!==0&&(this.open=!0,this.isFilterable||r(this,W,X).call(this))},_=new WeakSet,bt=function(t){!(t.target instanceof ft)&&this.isFilterable?(t.preventDefault(),this.focus()):t.target instanceof ft||(t.preventDefault(),r(this,W,X).call(this))},G=new WeakSet,Ot=function(){if(e(this,p).value){this.open=!0,this.isFiltering=e(this,p).value.value.trim()!=="";for(const i of e(this,f,g))i.hidden=!i.label?.toLowerCase().includes(e(this,p).value?.value.toLowerCase().trim());const t=e(this,B,Q)?.at(0);t&&this.activeOption?.hidden&&(r(this,O,S).call(this),t.privateActive=!0,this.ariaActivedescendant=t.id),this.isEveryOptionFilteredOut=!e(this,B,Q)||e(this,B,Q).length===0}},tt=new WeakSet,yt=function(t){const i=this.selectedOptions.filter((l,a)=>a<=e(this,L)-1).at(-1);i&&t.key==="Backspace"&&this.multiple&&e(this,p).value&&e(this,p).value.selectionStart===0&&(i.selected=!1)},et=new WeakSet,At=function(t){t.target instanceof u&&(r(this,O,S).call(this),t.target.privateActive=!0)},it=new WeakSet,St=function(t){this.isFilterable&&t.preventDefault()},st=new WeakSet,Et=function(t){if(t.target instanceof u&&e(this,v,b)){r(this,O,S).call(this),t.target.privateActive=!0;for(const i of e(this,v,b))this.isFilterable&&i.privateActive?this.ariaActivedescendant=i.id:!this.isFilterable&&i===t.target&&i.focus()}},at=new WeakSet,$t=function(t){if(e(this,d).value&&t.target!==e(this,d).value&&(y(this,R,!0),e(this,d).value.selected=this.isAllSelected,e(this,d).value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected),this.isFilterable&&e(this,p).value){e(this,p).value.value="",this.isFiltering=!1;for(const i of e(this,f,g))i.hidden=!1}t.target instanceof u&&(this.multiple?this.value=t.target.selected&&t.target.value?[...this.value,t.target.value]:this.value.filter(i=>t.target instanceof u&&i!==t.target.value):t.target.selected&&(this.value=t.target.value?[t.target.value]:[],this.open=!1,this.focus(),this.isFilterable&&e(this,p).value&&(this.isFiltering=!1))),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))},lt=new WeakSet,Ft=function(t){t.target instanceof u&&this.multiple&&t.target.selected&&t.target.value?this.value=[...this.value.filter(i=>i!==t.detail),t.target.value]:t.target instanceof u&&this.multiple?this.value=this.value.filter(i=>t.target instanceof u&&i!==t.detail):t.target instanceof u&&(this.value=t.target.value?[t.target.value]:[],this.open=!1,this.focus())},nt=new WeakSet,kt=function(){if(e(this,R)){y(this,R,!1);return}const t=this.isAllSelected;for(const i of e(this,f,g))i.selected=!t},rt=new WeakSet,Vt=async function(t){y(this,I,!0);for(const l of e(this,f,g))l.id===t&&(l.selected=!1,this.value=this.value.filter(a=>a!==l.value));const i=e(this,U).value?.querySelectorAll("glide-core-tag");if(i&&this.value.length>0){const l=[...i].findIndex(a=>a.dataset.id===t);await this.updateComplete,i[l<i.length-1?l+1:l-1]?.focus()}else this.focus()},n.formAssociated=!0,n.shadowRootOptions={...ut.shadowRootOptions,mode:"closed"},n.styles=Tt,o([m({reflect:!0,type:Boolean})],n.prototype,"disabled",2),o([m({attribute:"hide-label",reflect:!0,type:Boolean})],n.prototype,"hideLabel",2),o([m({reflect:!0})],n.prototype,"label",2),o([m({reflect:!0})],n.prototype,"name",2),o([m({reflect:!0,type:Boolean})],n.prototype,"open",2),o([m({reflect:!0})],n.prototype,"orientation",2),o([m({reflect:!0})],n.prototype,"placeholder",2),o([m({attribute:"select-all",reflect:!0,type:Boolean})],n.prototype,"selectAll",2),o([m({reflect:!0})],n.prototype,"size",1),o([m({reflect:!0,type:Boolean})],n.prototype,"multiple",1),o([m({reflect:!0,type:Boolean})],n.prototype,"required",2),o([m({type:Array})],n.prototype,"value",2),o([m({reflect:!0})],n.prototype,"variant",2),o([M()],n.prototype,"ariaActivedescendant",2),o([M()],n.prototype,"isCheckingValidity",2),o([M()],n.prototype,"isEveryOptionFilteredOut",2),o([M()],n.prototype,"isFilterable",2),o([M()],n.prototype,"isFiltering",2),o([M()],n.prototype,"isReportValidityOrSubmit",2),n=o([xt("glide-core-dropdown")],n);export{n as default};

package/dist/dropdown.option.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-dropdown-option': GlideCoreDropdownOption;
+    }
+}
+/**
+ * @description An individual option for use with <glide-core-dropdown>.
+ *
+ * @slot icon - An icon.
+ */
+export default class GlideCoreDropdownOption extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    label?: string;
+    privateMultiple: boolean;
+    get selected(): boolean;
+    set selected(isSelected: boolean);
+    privateSize: 'small' | 'large';
+    privateActive: boolean;
+    privateIndeterminate: boolean;
+    privateIsFocusable: boolean;
+    private get isMultiple();
+    click(): void;
+    firstUpdated(): void;
+    get value(): string;
+    set value(value: string);
+    focus(): void;
+    privateUpdateCheckbox(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+    constructor();
+}

package/dist/dropdown.option.js

@@ -0,0 +1 @@
+"use strict";var F=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var r=(i,t,e,a)=>{for(var o=a>1?void 0:a?L(t,e):t,k=i.length-1,$;k>=0;k--)($=i[k])&&(o=(a?$(t,e,o):$(o))||o);return a&&o&&F(t,e,o),o};var x=(i,t,e)=>{if(!t.has(i))throw TypeError("Cannot "+e)};var l=(i,t,e)=>(x(i,t,"read from private field"),e?e.call(i):t.get(i)),h=(i,t,e)=>{if(t.has(i))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(i):t.set(i,e)},E=(i,t,e,a)=>(x(i,t,"write to private field"),a?a.call(i,e):t.set(i,e),e);var M=(i,t,e)=>(x(i,t,"access private method"),e);var c,d,n,u,f,S,b,A,g,U;import{LitElement as I,html as y}from"lit";import{classMap as m}from"lit/directives/class-map.js";import{createRef as R,ref as z}from"lit/directives/ref.js";import{customElement as T,property as v,state as p}from"lit/decorators.js";import{when as B}from"lit/directives/when.js";import"./checkbox.js";import H from"./icons/checked.js";import q from"./dropdown.option.styles.js";let s=class extends I{constructor(){super();h(this,f);h(this,b);h(this,g);this.privateMultiple=!1;this.privateSize="large";this.privateActive=!1;this.privateIndeterminate=!1;this.privateIsFocusable=!0;h(this,c,R());h(this,d,R());h(this,n,!1);h(this,u,"");this.id=window.crypto.randomUUID()}get selected(){return l(this,n)}set selected(e){if(E(this,n,e),this.isMultiple)l(this,c).value&&(l(this,c).value.checked=e);else for(const a of l(this,f,S))a!==this&&this.selected&&a.selected&&(a.selected=!1);this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}click(){this.isMultiple?this.selected=!this.selected:this.selected||(this.selected=!0)}firstUpdated(){l(this,c).value&&(l(this,c).value.checked=this.selected)}get value(){return l(this,u)}set value(e){const a=l(this,u);E(this,u,e),this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:a}))}focus(){l(this,d).value?.focus()}async privateUpdateCheckbox(){await this.updateComplete,l(this,c).value&&(l(this,c).value.checked=this.selected)}render(){return y`<div aria-selected="${this.selected?"true":"false"}" class="${m({component:!0,active:this.privateActive,[this.privateSize]:!0})}" data-test="component" tabindex="${this.privateActive&&this.privateIsFocusable?"0":"-1"}" role="option" @click="${M(this,g,U)}" ${z(l(this,d))}>${B(this.isMultiple,()=>y`<glide-core-checkbox class="${m({checkbox:!0,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-variant="minimal" value="${this.value}" ?indeterminate="${this.privateIndeterminate}" ?internally-inert="${!this.privateIsFocusable}" @change="${M(this,b,A)}" ${z(l(this,c))}></glide-core-checkbox>`,()=>y`<div class="${m({option:!0,[this.privateSize]:!0})}"><div class="${m({"checked-icon":!0,visible:this.selected})}">${H}</div><slot name="icon"></slot>${this.label}</div>`)}</div>`}};c=new WeakMap,d=new WeakMap,n=new WeakMap,u=new WeakMap,f=new WeakSet,S=function(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]},b=new WeakSet,A=function(){this.selected=!this.selected},g=new WeakSet,U=function(e){e.target!==l(this,c).value&&!this.isMultiple&&!this.selected&&(this.selected=!0)},s.shadowRootOptions={...I.shadowRootOptions,mode:"closed"},s.styles=q,r([v({reflect:!0})],s.prototype,"label",2),r([v({attribute:"private-multiple",type:Boolean})],s.prototype,"privateMultiple",2),r([v({type:Boolean})],s.prototype,"selected",1),r([v({attribute:"private-size",reflect:!0})],s.prototype,"privateSize",2),r([p()],s.prototype,"privateActive",2),r([p()],s.prototype,"privateIndeterminate",2),r([p()],s.prototype,"privateIsFocusable",2),r([p()],s.prototype,"isMultiple",1),r([v()],s.prototype,"value",1),s=r([T("glide-core-dropdown-option")],s);export{s as default};

package/dist/dropdown.option.styles.d.ts

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

package/dist/dropdown.option.styles.js

@@ -0,0 +1,64 @@
+"use strict";import{css as e}from"lit";export default[e`
+    .component {
+      align-items: center;
+      border-radius: var(--glide-core-spacing-sm);
+
+      &.active {
+        background-color: var(--glide-core-surface-hover);
+      }
+
+      &.large {
+        --height: 1.75rem;
+        --gap: var(--glide-core-spacing-sm);
+        --padding-inline: var(--glide-core-spacing-sm);
+
+        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);
+        line-height: var(--glide-core-body-sm-line-height);
+      }
+
+      &.small {
+        --height: 1.25rem;
+        --gap: var(--glide-core-spacing-xs);
+        --padding-inline: var(--glide-core-spacing-xs);
+
+        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);
+        line-height: var(--glide-core-body-xs-line-height);
+      }
+    }
+
+    .option {
+      align-items: center;
+      block-size: var(--height);
+      display: flex;
+      gap: var(--gap);
+      padding-inline: var(--padding-inline);
+      user-select: none;
+    }
+
+    glide-core-checkbox {
+      &::part(private-label-and-input-and-checkbox) {
+        block-size: var(--height);
+        padding-inline: var(--padding-inline);
+      }
+    }
+
+    .checked-icon {
+      display: inline-flex;
+      justify-content: center;
+      opacity: 0;
+
+      &.visible {
+        opacity: 1;
+      }
+    }
+
+    .indeterminate-icon {
+      display: none;
+    }
+  `];

package/dist/dropdown.option.test.basics.d.ts

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

package/dist/dropdown.option.test.basics.multiple.d.ts

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

package/dist/dropdown.option.test.basics.single.d.ts

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

package/dist/dropdown.option.test.events.d.ts

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

package/dist/dropdown.option.test.focus.multiple.d.ts

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

package/dist/dropdown.option.test.focus.single.d.ts

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

package/dist/dropdown.option.test.interactions.multiple.d.ts

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

package/dist/dropdown.option.test.interactions.single.d.ts

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

package/dist/dropdown.stories.d.ts

@@ -0,0 +1,15 @@
+import './dropdown.option.js';
+import './icons/storybook.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const SingleSelectionHorizontal: StoryObj;
+export declare const SingleSelectionHorizontalWithIcon: StoryObj;
+export declare const SingleSelectionHorizontalWithTooltip: StoryObj;
+export declare const SingleSelectionHorizontalWithError: StoryObj;
+export declare const SingleSelectionVerticalWithIcon: StoryObj;
+export declare const SingleSelectionVerticalWithTooltip: StoryObj;
+export declare const SingleSelectionVerticalWithError: StoryObj;
+export declare const SingleSelectionHorizontalWithFiltering: StoryObj;
+export declare const MultipleSelectionHorizontal: StoryObj;
+export declare const MultipleSelectionHorizontalWithFiltering: StoryObj;

package/dist/dropdown.styles.d.ts

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

package/dist/dropdown.styles.js

@@ -0,0 +1,162 @@
+"use strict";import{css as e}from"lit";import i from"./styles/focus-outline.js";export default[e`
+    .component {
+      --min-inline-size: 9.375rem;
+
+      font-family: var(--glide-core-font-sans);
+    }
+
+    .dropdown-and-options {
+      display: flex;
+      position: relative;
+    }
+
+    .dropdown {
+      --button-and-input-height: 1.25rem;
+
+      align-items: center;
+      block-size: 2.125rem;
+      border: 1px solid var(--glide-core-border-base-lighter);
+      border-radius: var(--glide-core-spacing-xs);
+      box-sizing: border-box;
+      color: var(--glide-core-text-body-1);
+      cursor: inherit;
+      display: inline-flex;
+      flex-grow: 1;
+      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);
+      gap: var(--glide-core-spacing-xs);
+      justify-content: space-between;
+      min-inline-size: var(--min-inline-size);
+      padding-inline: var(--glide-core-spacing-xs);
+      text-align: start;
+      user-select: none;
+      white-space: nowrap;
+
+      &.quiet:not(.multiple) {
+        background-color: transparent;
+        border: unset;
+        font-size: var(--glide-core-heading-xxxs-font-size);
+        font-style: var(--glide-core-heading-xxxs-font-style);
+        font-weight: var(--glide-core-heading-xxxs-font-weight);
+        gap: var(--glide-core-spacing-xxs);
+        min-inline-size: 3.75rem;
+        padding-block: 0;
+        padding-inline: 0.375rem;
+      }
+
+      &.disabled {
+        background: var(--glide-core-surface-base-gray-light);
+        color: var(--glide-core-text-tertiary-disabled);
+      }
+
+      &.error {
+        border-color: var(--glide-core-status-error);
+        color: var(--glide-core-status-error);
+      }
+
+      &:has(.button:focus-visible, .input:focus-visible) {
+        ${i};
+      }
+
+      &:hover:not(&.error, &.disabled) {
+        border-color: var(--glide-core-border-base);
+      }
+
+      &.quiet:hover:not(&.error, &.disabled, &.multiple) {
+        background-color: var(--glide-core-surface-hover);
+      }
+    }
+
+    .options {
+      background-color: var(--glide-core-surface-modal);
+      border: 1px solid var(--glide-core-surface-modal);
+      border-radius: var(--glide-core-spacing-xs);
+      box-shadow: var(--glide-core-shadow-lg);
+      box-sizing: border-box;
+      inset-block-start: 100%;
+      inset-inline-start: 0;
+      margin-block: var(--glide-core-spacing-xxs) 0;
+      min-inline-size: var(--min-inline-size);
+      padding: var(--glide-core-spacing-xxxs);
+      position: absolute;
+      visibility: hidden;
+
+      /*
+        ".combobox-and-options" is relative and many Dropdowns may be stacked in a column.
+        This ensures that the ".options" of Dropdowns earlier in the column aren't obscured
+        by the ".combobox-and-options" that come after.
+      */
+      z-index: 1;
+
+      &.visible {
+        visibility: visible;
+      }
+    }
+
+    .select-all {
+      border-block-end: 1px solid var(--glide-core-border-base-light);
+      margin-block-end: var(--glide-core-spacing-xxxs);
+      padding-block-end: var(--glide-core-spacing-xxxs);
+
+      &:not([hidden]) {
+        display: block;
+      }
+    }
+
+    .tags {
+      display: flex;
+      gap: var(--glide-core-spacing-xs);
+      list-style-type: none;
+      margin-block: 0;
+      padding-inline-start: 0;
+    }
+
+    .tag-container {
+      display: block;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .tag-overflow-text {
+      color: var(--glide-core-text-link);
+      margin-inline-end: var(--glide-core-spacing-md);
+    }
+
+    .button {
+      align-items: center;
+      background: none;
+      block-size: var(--button-and-input-height);
+      border: none;
+      display: flex;
+      padding: 0;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .input {
+      block-size: var(--button-and-input-height);
+      border: none;
+      font-size: inherit;
+      min-inline-size: var(--min-inline-size);
+      padding: 0;
+
+      &:focus {
+        outline: none;
+      }
+
+      &.single.selection:not(:focus) {
+        &::placeholder {
+          color: inherit;
+        }
+      }
+
+      &::placeholder {
+        font-family: var(--glide-core-font-sans);
+      }
+    }
+  `];

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

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

package/dist/dropdown.test.basics.filterable.d.ts

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

package/dist/dropdown.test.basics.multiple.d.ts

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

package/dist/dropdown.test.basics.single.d.ts

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

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

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

package/dist/dropdown.test.focus.filterable.d.ts

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

package/dist/dropdown.test.focus.multiple.d.ts

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

package/dist/dropdown.test.focus.single.d.ts

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

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

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

package/dist/dropdown.test.form.multiple.d.ts

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

package/dist/dropdown.test.form.single.d.ts

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

package/dist/dropdown.test.interactions.d.ts

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

package/dist/dropdown.test.interactions.filterable.d.ts

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

package/dist/dropdown.test.interactions.multiple.d.ts

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

package/dist/dropdown.test.interactions.single.d.ts

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

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

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

package/dist/icon-button.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-icon-button': GlideCoreIconButton;
+    }
+}
+/**
+ * @slot - Reserved for the icon to display inside of the button.
+ */
+export default class GlideCoreIconButton extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    ariaExpanded: string | null;
+    ariaHasPopup: string | null;
+    disabled: boolean;
+    /** Text read aloud for screenreaders. For accessibility, this should always be provided. */
+    label: string;
+    variant: 'primary' | 'secondary' | 'tertiary';
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/icon-button.js

@@ -0,0 +1 @@
+"use strict";var g=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var s=(t,e,r,m)=>{for(var l=m>1?void 0:m?E(e,r):e,n=t.length-1,f;n>=0;n--)(f=t[n])&&(l=(m?f(e,r,l):f(l))||l);return m&&l&&g(e,r,l),l};var h=(t,e,r)=>{if(!e.has(t))throw TypeError("Cannot "+r)};var p=(t,e,r)=>(h(t,e,"read from private field"),r?r.call(t):e.get(t)),c=(t,e,r)=>{if(e.has(t))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(t):e.set(t,r)};var u=(t,e,r)=>(h(t,e,"access private method"),r);var i,d,v;import{LitElement as y,html as R}from"lit";import{classMap as S}from"lit/directives/class-map.js";import{createRef as $,ref as w}from"lit/directives/ref.js";import{customElement as M,property as o}from"lit/decorators.js";import{owSlot as b}from"./library/ow.js";import x from"./icon-button.styles.js";let a=class extends y{constructor(){super(...arguments);c(this,d);this.ariaExpanded=null;this.ariaHasPopup=null;this.disabled=!1;this.label="";this.variant="primary";c(this,i,$())}firstUpdated(){b(p(this,i).value)}render(){return R`<button aria-label="${this.label}" class="${S({component:!0,primary:this.variant==="primary",secondary:this.variant==="secondary",tertiary:this.variant==="tertiary"})}" type="button" ?disabled="${this.disabled}"><slot @slotchange="${u(this,d,v)}" ${w(p(this,i))}></slot></button>`}};i=new WeakMap,d=new WeakSet,v=function(){b(p(this,i).value)},a.shadowRootOptions={...y.shadowRootOptions,delegatesFocus:!0,mode:"closed"},a.styles=x,s([o({reflect:!0})],a.prototype,"ariaExpanded",2),s([o({reflect:!0})],a.prototype,"ariaHasPopup",2),s([o({type:Boolean,reflect:!0})],a.prototype,"disabled",2),s([o()],a.prototype,"label",2),s([o({reflect:!0})],a.prototype,"variant",2),a=s([M("glide-core-icon-button")],a);export{a as default};

package/dist/icon-button.stories.d.ts

@@ -0,0 +1,8 @@
+import './icon-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 Secondary: StoryObj;
+export declare const Tertiary: StoryObj;

package/dist/icon-button.styles.d.ts

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

package/dist/icon-button.styles.js

@@ -0,0 +1,112 @@
+"use strict";import{css as r}from"lit";import o from"./styles/focus-outline.js";export default[r`
+    :host {
+      /* Contains elements with "padding" and "width". Inline by default. */
+      display: inline-block;
+    }
+
+    .component {
+      align-items: center;
+      block-size: var(--size, 1.625rem);
+      border-color: transparent;
+      border-radius: var(--glide-core-spacing-xs);
+      border-style: solid;
+      border-width: 1px;
+      cursor: pointer;
+      display: inline-flex;
+      inline-size: var(--size, 1.625rem);
+      justify-content: center;
+      padding-inline: 0;
+      transition-duration: 150ms;
+      transition-property: color, background-color, border-color, fill, stroke;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        ${o};
+        outline-offset: 3px;
+      }
+
+      &:disabled {
+        cursor: default;
+        opacity: 1;
+      }
+
+      &.primary {
+        background-color: var(--glide-core-surface-primary);
+        border-color: transparent;
+        color: var(--icon-color, var(--glide-core-icon-selected));
+
+        &:disabled {
+          background-color: var(--glide-core-surface-base-gray-light);
+          border-color: transparent;
+          color: var(--glide-core-icon-tertiary-disabled);
+        }
+
+        &:not(:disabled):active {
+          background-color: var(--glide-core-surface-selected);
+          border-color: transparent;
+          color: var(--glide-core-icon-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-icon-primary);
+        }
+      }
+
+      &.secondary {
+        background-color: var(--glide-core-surface-page);
+        border-color: var(--glide-core-border-primary);
+        color: var(--icon-color, var(--glide-core-icon-primary));
+
+        &:disabled {
+          background-color: transparent;
+          border-color: var(--glide-core-border-base-light);
+          color: var(--glide-core-icon-tertiary-disabled);
+        }
+
+        &:not(:disabled):active {
+          background-color: var(--glide-core-surface-selected);
+          border-color: transparent;
+          color: var(--glide-core-icon-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-icon-primary);
+        }
+      }
+
+      &.tertiary {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--icon-color, var(--glide-core-icon-default));
+
+        &:focus-visible {
+          outline-offset: 0;
+        }
+
+        &:disabled {
+          color: var(--glide-core-icon-tertiary-disabled);
+        }
+
+        &:not(:disabled):active {
+          color: var(--glide-core-icon-active);
+        }
+
+        &:not(:active):hover:not(:disabled) {
+          color: var(
+            --hovered-icon-color,
+            var(--glide-core-icon-primary-hover)
+          );
+        }
+      }
+    }
+  `];

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

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

package/dist/icons/checked.d.ts

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

package/dist/icons/checked.js

@@ -0,0 +1 @@
+"use strict";import{svg as e}from"lit/static-html.js";export default e`<svg fill="none" viewBox="0 0 24 24" style="height: var(--size, 0.875rem); width: var(--size, 0.875rem);"><path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

package/dist/icons/magnifying-glass.d.ts

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