@crowdstrike/glide-core 0.19.5 → 0.20.1

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length,s=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(s=(a<3?r(s):a>3?r(t,i,s):r(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get value(){return this.#i}set value(e){const t=this.#i;this.#i=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#o.form}blur(){this.#r.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#r.value?.click()}connectedCallback(){super.connectedCallback(),this.#a=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#a.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#s),this.#a?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#o.validity:this.required&&!this.checked?(this.#o.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#r.value),this.#o.validity):this.required&&this.#o.validity.valueMissing&&this.checked?(this.#o.setValidity({}),this.#o.validity):(this.required||!this.#o.validity.valueMissing||this.checked||this.#o.setValidity({}),this.#o.validity)}focus(e){this.#r.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#s)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
+var __decorate=this&&this.__decorate||function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get value(){return this.#i}set value(e){const t=this.#i;this.#i=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#r.form}checkValidity(){this.isCheckingValidity=!0;const e=this.#r.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?.click()}connectedCallback(){super.connectedCallback(),this.#a=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#a.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#s),this.#a?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#r.validity:this.required&&!this.checked?(this.#r.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#o.value),this.#r.validity):this.required&&this.#r.validity.valueMissing&&this.checked?(this.#r.setValidity({}),this.#r.validity):(this.required||!this.#r.validity.valueMissing||this.checked||this.#r.setValidity({}),this.#r.validity)}focus(e){this.#o.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#s)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
       ${when("minimal"===this.privateVariant,(()=>html`
           <label
             class=${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}
@@ -11,13 +11,13 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length
                 data-test="input"
                 type="checkbox"
                 .checked=${this.checked}
-                .inert=${this.internallyInert}
+                .inert=${this.privateInternallyInert}
                 ?disabled=${this.disabled}
                 ?required=${this.required}
                 @change=${this.#n}
                 @input=${this.#n}
                 @keydown=${this.#d}
-                ${ref(this.#r)}
+                ${ref(this.#o)}
               />
 
               <div
@@ -29,12 +29,14 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length
             </div>
 
             <div class="icon-and-label">
-              <slot name="private-icon"></slot>
+              <slot name="private-icon">
+                <!-- @type {Element} -->
+              </slot>
 
               <glide-core-tooltip
                 class="label-tooltip"
                 data-test="label-tooltip"
-                label=${ifDefined(this.tooltip)}
+                label=${ifDefined(this.label)}
                 offset=${this.privateLabelTooltipOffset}
                 ?disabled=${!this.isLabelOverflow||this.privateDisableLabelTooltip}
                 ?open=${this.privateShowLabelTooltip}
@@ -51,6 +53,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length
             </div>
           </label>
         `),(()=>html`<glide-core-private-label
+            label=${ifDefined(this.label)}
             orientation=${this.orientation}
             split=${ifDefined(this.privateSplit??void 0)}
             tooltip=${ifDefined(this.tooltip)}
@@ -81,7 +84,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length
                 @change=${this.#n}
                 @input=${this.#n}
                 @keydown=${this.#d}
-                ${ref(this.#r)}
+                ${ref(this.#o)}
               />
 
               <div
@@ -92,13 +95,23 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length
               </div>
             </div>
 
-            <div id="summary" slot="summary">${this.summary}</div>
+            ${when(this.summary,(()=>html`<div id="summary" slot="summary">${this.summary}</div>`))}
 
             <div id="description" slot="description">
+              <!--
+                  Additional information or context
+                  @type {Element | string}
+                -->
               <slot
                 class=${classMap({description:!0,hidden:Boolean(this.#l&&this.validityMessage)})}
                 name="description"
-              ></slot>
+              >
+                <!--
+                  Additional information or context
+                  @type {Element | string}
+                -->
+              </slot>
+
               ${when(this.#l&&this.validityMessage,(()=>html`<span
                     class="validity-message"
                     data-test="validity-message"
@@ -106,7 +119,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length
                   >`))}
             </div>
           </glide-core-private-label>`))}
-    </div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.privateIsReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#r.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#r.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#r.value)}get willValidate(){return this.#o.willValidate}updated(){this.#r.value&&(this.#r.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#r=createRef(),this.#e="",this.#h=createRef(),this.#i="",this.#s=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#r;#o;#a;#e;#h;#i;#s;get#l(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#n(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,{bubbles:!0,composed:!0}))}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#h.value&&(this.isLabelOverflow=this.#h.value.scrollWidth>this.#h.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"version",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;const icons={indeterminate:html`
+    </div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#r.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.privateIsReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#r.setValidity({customError:!1},"",this.#o.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#o.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#o.value)}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.privateInternallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#h=createRef(),this.#i="",this.#s=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#r=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#o;#r;#a;#e;#h;#i;#s;get#l(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#n(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#h.value&&(this.isLabelOverflow=this.#h.value.scrollWidth>this.#h.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"private-internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"privateInternallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0}),required],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"version",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox"),final],GlideCoreCheckbox);export default GlideCoreCheckbox;const icons={indeterminate:html`
     <svg
       style=${styleMap({height:"0.875rem",width:"0.875rem"})}
       viewBox="0 0 14 14"

package/dist/checkbox.styles.js

@@ -128,7 +128,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     }
 
     .checked-icon {
-      --size: 0.75rem;
+      --private-size: 0.75rem;
 
       align-items: center;
       block-size: 100%;

package/dist/drawer.d.ts

@@ -5,11 +5,18 @@ declare global {
     }
 }
 /**
- * @event toggle
+ * @attr {string} label
+ * @attr {boolean} [open=false]
+ * @attr {boolean} [pinned=false]
  *
- * @cssprop [--width] - The width the drawer.
+ * @readonly
+ * @attr {string} [version]
  *
- * @slot - The content of the Drawer.
+ * @slot {Element | string} - The content of the drawer
+ *
+ * @cssprop [--width=27.375rem] - The width the drawer
+ *
+ * @fires {Event} toggle
  */
 export default class GlideCoreDrawer extends LitElement {
     #private;
@@ -17,6 +24,9 @@ export default class GlideCoreDrawer extends LitElement {
     static styles: import("lit").CSSResult[];
     label?: string;
     pinned: boolean;
+    /**
+     * @default false
+     */
     get open(): boolean;
     set open(isOpen: boolean);
     readonly version: string;

package/dist/drawer.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,n){var i,r=arguments.length,s=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,o,s):i(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./drawer.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.pinned=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;const o=window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:300;this.#o&&t?(this.#n?.cancel(),this.#e?.value?.classList?.add("open"),this.#i=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:o,fill:"forwards",easing:"ease-in",composite:"add"}),this.#i?.finished.then((()=>{this.#e?.value?.focus(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))):t&&(this.#i?.cancel(),this.#n=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:o,fill:"forwards",composite:"add"}),this.#n?.finished.then((()=>{this.#e.value?.classList?.remove("open"),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))})))}firstUpdated(){this.#o&&(this.#e?.value?.classList?.add("open"),this.#i=this.#e?.value?.animate({transform:"translateX(0)"},{duration:0,fill:"forwards"}),this.#e?.value?.animate({opacity:1},{duration:0,fill:"forwards",composite:"add"}))}render(){return html`<aside aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,pinned:this.pinned})}" data-test="component" tabindex="-1" @keydown="${this.#r}" ${ref(this.#e)}><slot ${assertSlot()} ${ref(this.#t)}></slot></aside>`}#n;#e;#t;#o;#i;#r(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}};__decorate([property({reflect:!0})],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreDrawer.prototype,"version",void 0),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,s=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(n<3?r(s):n>3?r(t,o,s):r(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./drawer.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.pinned=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;const o=window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:300;this.#o&&t?(this.#i?.cancel(),this.#e?.value?.classList?.add("open"),this.#r=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:o,fill:"forwards",easing:"ease-in",composite:"add"}),this.#r?.finished.then((()=>{this.#e?.value?.focus(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))):t&&(this.#r?.cancel(),this.#i=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:o,fill:"forwards",composite:"add"}),this.#i?.finished.then((()=>{this.#e.value?.classList?.remove("open"),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))})))}firstUpdated(){this.#o&&(this.#e?.value?.classList?.add("open"),this.#r=this.#e?.value?.animate({transform:"translateX(0)"},{duration:0,fill:"forwards"}),this.#e?.value?.animate({opacity:1},{duration:0,fill:"forwards",composite:"add"}))}render(){return html`<aside aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,pinned:this.pinned})}" data-test="component" tabindex="-1" ${ref(this.#e)}><slot ${assertSlot()} ${ref(this.#t)}></slot></aside>`}#i;#e;#t;#o;#r};__decorate([property({reflect:!0}),required],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreDrawer.prototype,"version",void 0),GlideCoreDrawer=__decorate([customElement("glide-core-drawer"),final],GlideCoreDrawer);export default GlideCoreDrawer;

package/dist/drawer.styles.js

@@ -1,4 +1,9 @@
 import{css}from"lit";export default[css`
+    :host {
+      /* The width the drawer */
+      --width: 27.375rem;
+    }
+
     .component {
       background-color: var(--glide-core-surface-base-xlightest);
       block-size: 0;
@@ -27,7 +32,7 @@ import{css}from"lit";export default[css`
     .open {
       backdrop-filter: blur(50px);
       block-size: auto;
-      inline-size: var(--width, 27.375rem);
+      inline-size: var(--width);
       inset: 0 0 0 auto;
       visibility: visible;
     }

package/dist/dropdown.d.ts

@@ -11,14 +11,64 @@ declare global {
     }
 }
 /**
- * @event change
- * @event input
- * @event invalid
- * @event toggle
+ * @attr {string} label
+ * @attr {string} [add-button-label]
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [filterable=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {boolean} [multiple=false]
+ * @attr {string} [name='']
+ * @attr {boolean} [open=false]
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {string} [placeholder]
+ * @attr {boolean} [readonly=false]
+ * @attr {boolean} [required=false]
+ * @attr {boolean} [select-all=false]
+ * @attr {'large'|'small'} [size='large']
+ * @attr {string} [tooltip]
+ * @attr {string[]} [value=[]]
+ * @attr {'quiet'} [variant]
  *
- * @slot - One or more of `<glide-core-dropdown-option>`.
- * @slot description - Additional information or context.
- * @slot icon:<value> - Icons for the selected option or options. Slot one icon per option. `<value>` should be equal to the `value` of each option.
+ * @readonly
+ * @attr [version]
+ *
+ * @slot {GlideCoreDropdownOption}
+ * @slot {Element | string} [description] - Additional information or context
+ * @slot {Element} [icon:value] - Icons for the selected option or options. Slot one icon per option. `<value>` should be equal to the `value` of each option.
+ *
+ * @fires {Event} add
+ * @fires {Event} change
+ * @fires {Event} input
+ * @fires {Event} invalid
+ * @fires {Event} toggle
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method filter
+ * @param {string} query
+ * @returns Promise<GlideCoreDropdownOption[]>
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method resetValidityFeedback
+ *
+ * @method setCustomValidity
+ * @param {string} message
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ * @param {string} [message]
  */
 export default class GlideCoreDropdown extends LitElement implements FormControl {
     #private;
@@ -26,13 +76,22 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     addButtonLabel?: string;
+    /**
+     * @default false
+     */
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
+    /**
+     * @default false
+     */
     get filterable(): boolean;
     set filterable(isFilterable: boolean);
     hideLabel: boolean;
     label?: string;
     name: string;
+    /**
+     * @default false
+     */
     get open(): boolean;
     set open(isOpen: boolean);
     orientation: 'horizontal' | 'vertical';
@@ -40,12 +99,21 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
     privateSplit?: 'left' | 'middle';
     readonly: boolean;
     selectAll: boolean;
-    get size(): "small" | "large";
-    set size(size: 'small' | 'large');
+    required: boolean;
+    /**
+     * @default false
+     */
     get multiple(): boolean;
     set multiple(isMultiple: boolean);
-    required: boolean;
+    /**
+     * @default 'large'
+     */
+    get size(): 'large' | 'small';
+    set size(size: 'large' | 'small');
     tooltip?: string;
+    /**
+     * @default []
+     */
     get value(): string[];
     set value(value: string[]);
     variant?: 'quiet';
@@ -66,7 +134,6 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
     focus(options?: FocusOptions): void;
     get form(): HTMLFormElement | null;
     get validity(): ValidityState;
-    get willValidate(): boolean;
     formAssociatedCallback(): void;
     formResetCallback(): void;
     render(): import("lit").TemplateResult<1>;