@crowdstrike/glide-core 0.5.0 → 0.5.1

package/dist/drawer.styles.js

@@ -1,6 +1,7 @@
 "use strict";import{css as i}from"lit";export default[i`
     .component {
       all: unset;
+      backdrop-filter: blur(50px);
       background-color: var(--glide-core-surface-base-lighter);
       block-size: 0;
       border-end-start-radius: 0.625rem;

package/dist/dropdown.option.d.ts

@@ -23,11 +23,11 @@ export default class GlideCoreDropdownOption extends LitElement {
     privateIsFocusable: boolean;
     private get isMultiple();
     click(): void;
+    connectedCallback(): 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

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

package/dist/dropdown.styles.js

@@ -83,9 +83,9 @@
       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.
+        ".dropdown-and-options" is relative and many Dropdowns may be stacked in a column.
+        This ensures the ".options" of Dropdowns earlier in the column aren't obscured by
+        the ".dropdown-and-options" that come later.
       */
       z-index: 1;
 

package/dist/menu.styles.js

@@ -1,4 +1,4 @@
-"use strict";import{css as i}from"lit";export default[i`
+"use strict";import{css as e}from"lit";export default[e`
     :host {
       /* Contains elements with "padding", "margin", and "width". Inline by default. */
       display: inline-block;
@@ -15,8 +15,8 @@
     }
 
     .options {
-      background-color: var(--glide-core-surface-base-lighter);
-      border: 1px solid var(--glide-core-border-base-lighter);
+      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;
@@ -29,6 +29,13 @@
       position: absolute;
       visibility: hidden;
 
+      /*
+        ".target-container" is relative and many Menus may be stacked in a column.
+        This ensures the ".options" of Menus earlier in the column aren't obscured
+        by the ".target-container" that come later.
+      */
+      z-index: 1;
+
       &.visible {
         visibility: visible;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -29,8 +29,8 @@
     "./styles/*": null,
     "./label.js": null,
     "./toasts.toast.js": null,
-    "./styles/fonts.js": "./dist/styles/fonts.js",
-    "./styles/variables.js": "./dist/styles/variables.js"
+    "./styles/fonts.css": "./dist/styles/fonts.css",
+    "./styles/variables.css": "./dist/styles/variables.css"
   },
   "engines": {
     "node": ">= 20",