@crowdstrike/glide-core 0.19.5 → 0.20.1

package/dist/tree.item.d.ts

@@ -5,33 +5,51 @@ declare global {
     }
 }
 /**
- * @slot - Zero or more of `<glide-core-tree-item>`.
- * @slot prefix - An optional icon before the label.
- * @slot suffix - An optional icon after the label.
- * @slot menu - A `<glide-core-menu>` made visible on hover or focus.
+ * @attr {string} label
+ * @attr {boolean} [expanded=false]
+ * @attr {number} [level=1]
+ * @attr {boolean} [non-collapsible=false]
+ * @attr {boolean} [remove-indentation=false]
+ * @attr {boolean} [selected=false]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {GlideCoreTreeItem}
+ * @slot {GlideCoreTreeItemMenu} [menu] - Visible on hover and focus
+ * @slot {Element} [prefix] - An icon before the label
+ * @slot {Element} [suffix] - An icon after the label
+ *
+ * @fires {Event} selected
+ *
+ * @method selectItem - Traverses down the tree, selects the item, then deselects all other items.
+ * @param {GlideCoreTreeItem} item
+ * @returns GlideCoreTreeItem | undefined
  */
 export default class GlideCoreTreeItem extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     expanded: boolean;
-    label: string;
+    label?: string;
     level: number;
-    selected: boolean;
+    /**
+     * @default false
+     */
+    get selected(): boolean;
+    set selected(isSelected: boolean);
     removeIndentation: boolean;
     nonCollapsible: boolean;
     readonly version: string;
     focus(options?: FocusOptions): void;
-    get hasChildTreeItems(): boolean;
-    get hasExpandIcon(): boolean;
+    get privateHasChildTreeItems(): boolean;
+    private get hasExpandIcon();
+    privateToggleExpand(): void;
     render(): import("lit").TemplateResult<1>;
     /**
-     * Traverses down the tree, selecting the passed-in item,
-     * and deselecting all other items.
-     * Returns the selected item
+     * Traverses down the tree, selects the item, then deselects all other items.
      */
     selectItem(item: GlideCoreTreeItem): GlideCoreTreeItem | undefined;
-    toggleExpand(): void;
     private childTreeItems;
     private hasPrefixIcon;
 }

package/dist/tree.item.icon-button.d.ts

@@ -6,12 +6,17 @@ declare global {
     }
 }
 /**
- * @slot - An icon.
+ * @attr {string} label
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element} - An icon
  */
 export default class GlideCoreTreeItemIconButton extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    label: string;
+    label?: string;
     readonly version: string;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/tree.item.icon-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,n=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(i<3?s(n):i>3?s(t,o,n):s(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};import"./icon-button.js";import{html,LitElement}from"lit";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tree.item.icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreTreeItemIconButton=class GlideCoreTreeItemIconButton extends LitElement{constructor(){super(...arguments),this.label="",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<glide-core-icon-button class="component" variant="tertiary" tabindex="-1" label="${this.label}"><slot ${assertSlot()}></slot></glide-core-icon-button>`}};__decorate([property()],GlideCoreTreeItemIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItemIconButton.prototype,"version",void 0),GlideCoreTreeItemIconButton=__decorate([customElement("glide-core-tree-item-icon-button")],GlideCoreTreeItemIconButton);export default GlideCoreTreeItemIconButton;
+var __decorate=this&&this.__decorate||function(e,t,o,r){var i,n=arguments.length,s=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(s=(n<3?i(s):n>3?i(t,o,s):i(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};import"./icon-button.js";import{html,LitElement}from"lit";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"./tree.item.icon-button.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 GlideCoreTreeItemIconButton=class GlideCoreTreeItemIconButton extends LitElement{constructor(){super(...arguments),this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<glide-core-icon-button class="component" variant="tertiary" tabindex="-1" label="${ifDefined(this.label)}"><slot ${assertSlot()}></slot></glide-core-icon-button>`}};__decorate([property(),required],GlideCoreTreeItemIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItemIconButton.prototype,"version",void 0),GlideCoreTreeItemIconButton=__decorate([customElement("glide-core-tree-item-icon-button"),final],GlideCoreTreeItemIconButton);export default GlideCoreTreeItemIconButton;

package/dist/tree.item.icon-button.styles.js

@@ -2,8 +2,8 @@ import{css}from"lit";export default[css`
     .component {
       display: flex;
 
-      --icon-color: var(--icon-button-color);
-      --hovered-icon-color: var(--hovered-icon-button-color);
-      --size: 1rem;
+      --private-icon-color: var(--private-icon-button-color);
+      --private-hovered-icon-color: var(--private-hovered-icon-button-color);
+      --private-size: 1rem;
     }
   `];

package/dist/tree.item.js

@@ -1 +1 @@
-var _a,GlideCoreTreeItem_1,__decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};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 packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import GlideCoreTreeItemMenu from"./tree.item.menu.js";import GlideCoreIconButton from"./icon-button.js";import chevronIcon from"./icons/chevron.js";import styles from"./tree.item.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.label="",this.level=1,this.selected=!1,this.removeIndentation=!1,this.nonCollapsible=!1,this.version=packageJson.version,this.childTreeItems=[],this.hasPrefixIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=new LocalizeController(this),this.#i=createRef(),this.#r=createRef()}static{GlideCoreTreeItem_1=this}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}focus(e){this.#t.value?.focus(e),this.#s(0)}get hasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.hasChildTreeItems&&!this.nonCollapsible}render(){return html`<div class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${ifDefined(this.#l)}" aria-expanded="${ifDefined(this.#n)}"><div class="${classMap({"label-container":!0,"prefix-icon":this.hasPrefixIcon,selected:this.selected})}" tabindex="-1" @focusout="${this.#a}" @focusin="${this.#d}" ${ref(this.#t)}><div style="${styleMap({flexShrink:0,width:this.#c})}"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="${classMap({"expand-icon-container":!0,expanded:this.expanded})}">${when(this.hasExpandIcon,(()=>chevronIcon))}</div>`))}<slot name="prefix" ${ref(this.#r)} @slotchange="${this.#h}"></slot><div class="${classMap({label:!0,"prefix-icon":this.hasPrefixIcon})}">${this.label}</div><div class="icon-container"><slot name="menu" ${ref(this.#i)} @slotchange="${this.#m}" ${assertSlot([GlideCoreTreeItemMenu],!0)}></slot><slot name="suffix"></slot></div></div><div class="${classMap({"default-slot-container":!0,expanded:this.expanded})}" role="group"><slot @slotchange="${this.#f}" ${ref(this.#e)}></slot></div></div>`}selectItem(e){let t;if(this.#p)for(const o of this.#p)if(e===o)o.setAttribute("selected","true"),t=o;else{o.removeAttribute("selected");const i=o.selectItem(e);i&&(t=i)}return t}toggleExpand(){this.expanded=!this.expanded}#e;#t;#o;#i;#r;get#p(){return this.#e.value?.assignedElements().filter((e=>e instanceof GlideCoreTreeItem_1))}get#n(){return this.hasChildTreeItems?this.expanded?"true":"false":void 0}get#l(){return this.hasChildTreeItems?void 0:this.selected?"true":"false"}get#c(){return 20*(this.level-1)+"px"}#u(e){return e&&e instanceof HTMLElement&&!(e instanceof GlideCoreTreeItem_1)&&this.contains(e)}#f(){this.#I()}#d(e){this.#u(e.target)&&e.stopPropagation()}#a(e){this.#u(e.relatedTarget)?e.stopPropagation():this.#s(-1)}#m(){if(this.#i.value)for(const e of this.#i.value.assignedElements())e instanceof GlideCoreTreeItemMenu&&(e.label=this.#o.term("actionsFor",this.label))}#h(){const e=this.#r.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#s(e){this.#t.value&&(this.#t.value.tabIndex=e);for(const t of this.querySelectorAll("& > glide-core-tree-item-icon-button"))t.tabIndex=e}#I(){const e=[];if(this.#p){for(const t of this.#p)t.level=this.level+1,e.push(t);this.childTreeItems=e}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTreeItem.prototype,"selected",void 0),__decorate([property({reflect:!0,type:Boolean,attribute:"remove-indentation"})],GlideCoreTreeItem.prototype,"removeIndentation",void 0),__decorate([property({reflect:!0,type:Boolean,attribute:"non-collapsible"})],GlideCoreTreeItem.prototype,"nonCollapsible",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"version",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasPrefixIcon",void 0),GlideCoreTreeItem=GlideCoreTreeItem_1=__decorate([customElement("glide-core-tree-item")],GlideCoreTreeItem);export default GlideCoreTreeItem;
+var _a,GlideCoreTreeItem_1,__decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};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 packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import GlideCoreTreeItemMenu from"./tree.item.menu.js";import GlideCoreIconButton from"./icon-button.js";import chevronIcon from"./icons/chevron.js";import styles from"./tree.item.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 GlideCoreTreeItem=class GlideCoreTreeItem extends LitElement{constructor(){super(...arguments),this.expanded=!1,this.level=1,this.removeIndentation=!1,this.nonCollapsible=!1,this.version=packageJson.version,this.childTreeItems=[],this.hasPrefixIcon=!1,this.#e=createRef(),this.#t=!1,this.#o=createRef(),this.#i=new LocalizeController(this),this.#r=createRef(),this.#s=createRef()}static{GlideCoreTreeItem_1=this}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#t}set selected(e){const t=e!==this.#t;this.#t=e,e&&t&&this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}focus(e){this.#o.value?.focus(e),this.#l(0)}get privateHasChildTreeItems(){return this.childTreeItems.length>0}get hasExpandIcon(){return this.privateHasChildTreeItems&&!this.nonCollapsible}privateToggleExpand(){this.expanded=!this.expanded}render(){return html`<div aria-label="${ifDefined(this.label)}" aria-selected="${ifDefined(this.#n)}" aria-expanded="${ifDefined(this.#a)}" class="${classMap({component:!0,expanded:this.expanded,selected:this.selected})}" data-test="component" role="treeitem"><div class="${classMap({"label-container":!0,"prefix-icon":this.hasPrefixIcon,selected:this.selected})}" tabindex="-1" @focusout="${this.#d}" @focusin="${this.#c}" ${ref(this.#o)}><div style="${styleMap({flexShrink:0,width:this.#m})}"></div>${when(!this.removeIndentation||this.hasExpandIcon,(()=>html`<div class="${classMap({"expand-icon-container":!0,expanded:this.expanded})}" data-test="expand-icon-container">${when(this.hasExpandIcon,(()=>chevronIcon))}</div>`))}<slot name="prefix" class="prefix-slot" ${ref(this.#s)} @slotchange="${this.#h}"></slot><div class="${classMap({label:!0,"prefix-icon":this.hasPrefixIcon})}">${this.label}</div><div class="icon-container"><slot name="menu" ${ref(this.#r)} @slotchange="${this.#p}" ${assertSlot([GlideCoreTreeItemMenu],!0)}></slot><slot name="suffix"></slot></div></div><div class="${classMap({"default-slot-container":!0,expanded:this.expanded})}" role="group"><slot @slotchange="${this.#f}" ${ref(this.#e)}></slot></div></div>`}selectItem(e){let t;if(this.#u)for(const o of this.#u)if(e===o)o.setAttribute("selected","true"),t=o;else{o.removeAttribute("selected");const i=o.selectItem(e);i&&(t=i)}return t}#e;#t;#o;#i;#r;#s;get#u(){return this.#e.value?.assignedElements().filter((e=>e instanceof GlideCoreTreeItem_1))}get#a(){return this.privateHasChildTreeItems?this.expanded?"true":"false":void 0}get#n(){return this.privateHasChildTreeItems?void 0:this.selected?"true":"false"}get#m(){return 20*(this.level-1)+"px"}#v(e){return e&&e instanceof HTMLElement&&!(e instanceof GlideCoreTreeItem_1)&&this.contains(e)}#f(){this.#I()}#c(e){this.#v(e.target)&&e.stopPropagation()}#d(e){this.#v(e.relatedTarget)?e.stopPropagation():this.#l(-1)}#p(){if(this.#r.value)for(const e of this.#r.value.assignedElements())e instanceof GlideCoreTreeItemMenu&&this.label&&(e.label=this.#i.term("actionsFor",this.label))}#h(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#l(e){this.#o.value&&(this.#o.value.tabIndex=e);for(const t of this.querySelectorAll("& > glide-core-tree-item-icon-button"))t.tabIndex=e}#I(){const e=[];if(this.#u){for(const t of this.#u)t.level=this.level+1,e.push(t);this.childTreeItems=e}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTreeItem.prototype,"expanded",void 0),__decorate([property({reflect:!0}),required],GlideCoreTreeItem.prototype,"label",void 0),__decorate([property({reflect:!0,type:Number})],GlideCoreTreeItem.prototype,"level",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTreeItem.prototype,"selected",null),__decorate([property({reflect:!0,type:Boolean,attribute:"remove-indentation"})],GlideCoreTreeItem.prototype,"removeIndentation",void 0),__decorate([property({reflect:!0,type:Boolean,attribute:"non-collapsible"})],GlideCoreTreeItem.prototype,"nonCollapsible",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItem.prototype,"version",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"childTreeItems",void 0),__decorate([state()],GlideCoreTreeItem.prototype,"hasPrefixIcon",void 0),GlideCoreTreeItem=GlideCoreTreeItem_1=__decorate([customElement("glide-core-tree-item"),final],GlideCoreTreeItem);export default GlideCoreTreeItem;

package/dist/tree.item.menu.d.ts

@@ -7,15 +7,21 @@ declare global {
     }
 }
 /**
- * @slot - One or more of `<glide-core-menu-button>` or `<glide-core-menu-link>`.
- * @slot icon - An optional icon.
+ * @attr {string} [label]
+ * @attr {'bottom-start'|'top-start'} [placement='bottom-start']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {GlideCoreMenuButton | GlideCoreMenuLink}
+ * @slot {Element} [icon]
  */
 export default class GlideCoreTreeItemMenu extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     placement: 'bottom-start' | 'top-start';
-    label: string;
+    label?: string;
     readonly version: string;
     click(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/tree.item.menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var n,i=arguments.length,s=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(s=(i<3?n(s):i>3?n(t,o,s):n(t,o))||s);return i>3&&s&&Object.defineProperty(t,o,s),s};import"./menu.js";import"./menu.options.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tree.item.menu.styles.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuButton from"./menu.button.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.label="",this.version=packageJson.version,this.hasCustomIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}click(){this.#e.value?.click()}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#o)}><glide-core-menu-options><slot ${assertSlot([GlideCoreMenuButton,GlideCoreMenuLink])}></slot></glide-core-menu-options><glide-core-icon-button data-test="icon-button" slot="target" variant="tertiary" label="${this.label}" ${ref(this.#e)}><slot name="icon" @slotchange="${this.#r}" ${ref(this.#t)}></slot>${when(!this.hasCustomIcon,(()=>icons.dots))}</glide-core-icon-button></glide-core-menu>`}#e;#t;#o;#r(){const e=this.#t.value?.assignedNodes();this.hasCustomIcon=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),__decorate([property()],GlideCoreTreeItemMenu.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"version",void 0),__decorate([state()],GlideCoreTreeItemMenu.prototype,"hasCustomIcon",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;const icons={dots:html`<svg aria-hidden="true" style="${styleMap({height:"0.875rem",width:"0.25rem"})}" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg>`};
+var __decorate=this&&this.__decorate||function(e,t,o,r){var i,n=arguments.length,s=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(s=(n<3?i(s):n>3?i(t,o,s):i(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};import"./menu.js";import"./menu.options.js";import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./tree.item.menu.styles.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreMenuLink from"./menu.link.js";import GlideCoreMenuButton from"./menu.button.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.version=packageJson.version,this.hasCustomIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}click(){this.#e.value?.click()}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#o)}><glide-core-menu-options><slot ${assertSlot([GlideCoreMenuButton,GlideCoreMenuLink])}></slot></glide-core-menu-options><glide-core-icon-button data-test="icon-button" slot="target" variant="tertiary" label="${ifDefined(this.label)}" ${ref(this.#e)}><slot name="icon" @slotchange="${this.#r}" ${ref(this.#t)}></slot>${when(!this.hasCustomIcon,(()=>icons.dots))}</glide-core-icon-button></glide-core-menu>`}#e;#t;#o;#r(){const e=this.#t.value?.assignedNodes();this.hasCustomIcon=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),__decorate([property()],GlideCoreTreeItemMenu.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"version",void 0),__decorate([state()],GlideCoreTreeItemMenu.prototype,"hasCustomIcon",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu"),final],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;const icons={dots:html`<svg aria-hidden="true" style="${styleMap({height:"0.875rem",width:"0.25rem"})}" viewBox="0 0 4 18" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16C1 15.4477 1.44772 15 2 15Z"/><path d="M2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9C1 8.44772 1.44772 8 2 8Z"/><path d="M2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2C1 1.44772 1.44772 1 2 1Z"/></svg>`};

package/dist/tree.item.menu.styles.js

@@ -10,8 +10,8 @@ import{css}from"lit";export default[css`
     glide-core-icon-button {
       display: flex;
 
-      --icon-color: var(--icon-button-color);
-      --hovered-icon-color: var(--hovered-icon-button-color);
-      --size: 1rem;
+      --private-icon-color: var(--private-icon-button-color);
+      --private-hovered-icon-color: var(--private-hovered-icon-button-color);
+      --private-size: 1rem;
     }
   `];

package/dist/tree.item.styles.js

@@ -15,15 +15,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       grid-template-columns: repeat(auto-fill, 2.5rem);
       line-height: 1.25rem;
 
-      --color: var(--glide-core-text-body-1);
+      --private-color: var(--glide-core-text-body-1);
 
       &.selected {
-        --color: var(--glide-core-text-selected);
+        --private-color: var(--glide-core-text-selected);
 
         ::slotted([slot='prefix']),
         ::slotted([slot='menu']),
         ::slotted([slot='suffix']) {
-          --hovered-icon-button-color: var(--glide-core-icon-hover);
+          --private-hovered-icon-button-color: var(--glide-core-icon-hover);
         }
       }
     }
@@ -51,6 +51,11 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
     }
 
+    .prefix-slot {
+      align-items: center;
+      display: flex;
+    }
+
     .label-and-children {
       display: flex;
       flex-direction: column;
@@ -59,7 +64,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     .label-container {
       align-items: center;
       border-radius: 0.5rem;
-      color: var(--color);
+      color: var(--private-color);
       display: flex;
       font-size: var(--glide-core-body-sm-font-size);
       padding-block: var(--glide-core-spacing-xxs);
@@ -101,7 +106,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     ::slotted([slot='prefix']),
     ::slotted([slot='menu']),
     ::slotted([slot='suffix']) {
-      --icon-button-color: var(--color);
+      --private-icon-button-color: var(--private-color);
     }
 
     .label-container:hover,

package/dist/tree.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,n=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(i<3?s(n):i>3?s(t,o,n):s(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#o}" @keydown="${this.#r}"><slot ${ref(this.#s)} ${assertSlot([GlideCoreTreeItem])}></slot></div>`}selectItem(e){if(this.#i){for(const t of this.#i){e===t?(t.setAttribute("selected","true"),this.selectedItem=t):t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}e.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}}constructor(){super(),this.version=packageJson.version,this.privateTabIndex=0,this.#s=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#s;get#i(){return this.#s.value?.assignedElements().filter((e=>e instanceof GlideCoreTreeItem))}#n(e){e?.focus(),this.focusedItem=e}#l(){const e=new Set;return[...this.querySelectorAll("glide-core-tree-item")].filter((t=>{const o=t.parentElement?.closest("glide-core-tree-item");return!o||o.expanded&&!e.has(o)||e.add(t),!e.has(t)}))}#o(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const o=t.closest("glide-core-tree-item");o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#r(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;if(["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End"].includes(e.key)&&e.preventDefault(),e.target&&e.target instanceof HTMLElement&&(e.target.closest("glide-core-tree-item-icon-button")??e.target.closest("glide-core-tree-item-menu")))return;const t=this.#l(),{focusedItem:o}=this,r=t.findIndex((e=>e.matches(":focus")));if("ArrowRight"===e.key&&o?.hasChildTreeItems&&(o.expanded?this.#n(o.querySelector("glide-core-tree-item")):o.toggleExpand()),"ArrowLeft"===e.key)if(o?.expanded&&!o.nonCollapsible)o.toggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#n(e)}"ArrowDown"===e.key&&-1!==r&&r<t.length-1&&this.#n(t[r+1]),"ArrowUp"===e.key&&r>0&&this.#n(t[r-1]),"Home"===e.key&&this.#n(t[0]),"End"===e.key&&this.#n(t.at(-1)),"Enter"===e.key&&o&&(o.hasChildTreeItems&&!o.nonCollapsible?o.toggleExpand():this.selectItem(o))}#e(e){let t;e.target===this?t=this.selectedItem?.checkVisibility({visibilityProperty:!0})?this.selectedItem:this.#i?.[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#n(t)}#t(e){e.relatedTarget&&e.relatedTarget instanceof HTMLElement&&this.contains(e.relatedTarget)||(this.privateTabIndex=0,this.focusedItem=void 0)}};__decorate([property({reflect:!0})],GlideCoreTree.prototype,"version",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree")],GlideCoreTree);export default GlideCoreTree;
+var __decorate=this&&this.__decorate||function(e,t,o,r){var s,i=arguments.length,n=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(n=(i<3?s(n):i>3?s(t,o,n):s(t,o))||n);return i>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#o}" @keydown="${this.#r}"><slot ${ref(this.#s)} ${assertSlot([GlideCoreTreeItem])}></slot></div>`}selectItem(e){if(this.#i)for(const t of this.#i){e===t?(t.setAttribute("selected","true"),this.selectedItem=t):t.removeAttribute("selected");const o=t.selectItem(e);o&&(this.selectedItem=o)}}constructor(){super(),this.version=packageJson.version,this.privateTabIndex=0,this.#s=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#s;get#i(){return this.#s.value?.assignedElements().filter((e=>e instanceof GlideCoreTreeItem))}#n(e){e?.focus(),this.focusedItem=e}#l(){const e=new Set;return[...this.querySelectorAll("glide-core-tree-item")].filter((t=>{const o=t.parentElement?.closest("glide-core-tree-item");return!o||o.expanded&&!e.has(o)||e.add(t),!e.has(t)}))}#o(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const o=t.closest("glide-core-tree-item");o&&(o.privateHasChildTreeItems&&!o.nonCollapsible?o.privateToggleExpand():this.selectItem(o))}#r(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;if(["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End"].includes(e.key)&&e.preventDefault(),e.target&&e.target instanceof HTMLElement&&(e.target.closest("glide-core-tree-item-icon-button")??e.target.closest("glide-core-tree-item-menu")))return;const t=this.#l(),{focusedItem:o}=this,r=t.findIndex((e=>e.matches(":focus")));if("ArrowRight"===e.key&&o?.privateHasChildTreeItems&&(o.expanded?this.#n(o.querySelector("glide-core-tree-item")):o.privateToggleExpand()),"ArrowLeft"===e.key)if(o?.expanded&&!o.nonCollapsible)o.privateToggleExpand();else{const e=o?.parentElement?.closest("glide-core-tree-item");this.#n(e)}"ArrowDown"===e.key&&-1!==r&&r<t.length-1&&this.#n(t[r+1]),"ArrowUp"===e.key&&r>0&&this.#n(t[r-1]),"Home"===e.key&&this.#n(t[0]),"End"===e.key&&this.#n(t.at(-1)),"Enter"===e.key&&o&&(o.privateHasChildTreeItems&&!o.nonCollapsible?o.privateToggleExpand():this.selectItem(o))}#e(e){let t;e.target===this?t=this.selectedItem?.checkVisibility({visibilityProperty:!0})?this.selectedItem:this.#i?.[0]:e.target instanceof GlideCoreTreeItem&&(t=e.target,this.privateTabIndex=-1),this.#n(t)}#t(e){e.relatedTarget&&e.relatedTarget instanceof HTMLElement&&this.contains(e.relatedTarget)||(this.privateTabIndex=0,this.focusedItem=void 0)}};__decorate([property({reflect:!0})],GlideCoreTree.prototype,"version",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree"),final],GlideCoreTree);export default GlideCoreTree;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.19.5",
-  "description": "CrowdStrike's Glide Design System components package for providing web components",
+  "version": "0.20.1",
+  "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
   "type": "module",
@@ -9,31 +9,44 @@
     "type": "git",
     "url": "https://github.com/CrowdStrike/glide-core.git"
   },
+  "publishConfig": {
+    "provenance": true
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "design-system"
+  ],
   "files": [
     "dist",
+    "!dist/*.*.test.*.d.ts",
+    "!dist/*.*.test.*.js",
+    "!dist/*.stories.d.ts",
+    "!dist/*.stories.js",
+    "!dist/*.test.*.d.ts",
+    "!dist/*.test.*.js",
+    "!dist/cem-analyzer-plugins",
     "!dist/eslint",
     "!dist/icons/storybook.*",
     "!dist/storybook",
-    "!dist/*.test.js",
-    "!dist/*.test.*.d.ts",
-    "!dist/*.test.*.js",
-    "!dist/*.stories.js",
-    "!dist/*.stories.d.ts"
+    "!dist/stylelint",
+    "!dist/ts-morph"
   ],
   "exports": {
     "./*.js": {
       "types": "./dist/*.d.ts",
       "import": "./dist/*.js"
     },
-    "./*.styles.js": null,
-    "./library/*": null,
-    "./icons/*": null,
-    "./styles/*": null,
-    "./label.js": null,
-    "./toasts.toast.js": null,
+    "./translations/*": null,
     "./tooltip.container.js": null,
+    "./toasts.toast.js": null,
+    "./styles/variables.css": "./dist/styles/variables.css",
     "./styles/fonts.css": "./dist/styles/fonts.css",
-    "./styles/variables.css": "./dist/styles/variables.css"
+    "./styles/*": null,
+    "./library/*": null,
+    "./label.js": null,
+    "./icons/*": null,
+    "./*.styles.js": null
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.12",
@@ -47,36 +60,41 @@
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.10",
     "@crowdstrike/design-tokens": "^2.0.1",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.17.0",
     "@open-wc/testing": "^4.0.0",
-    "@rollup/plugin-commonjs": "^25.0.8",
-    "@storybook/addon-actions": "^8.5.1",
-    "@storybook/addon-controls": "^8.5.1",
-    "@storybook/addon-docs": "^8.5.1",
-    "@storybook/addon-toolbars": "^8.5.1",
-    "@storybook/core-events": "^8.5.1",
-    "@storybook/manager-api": "^8.5.1",
-    "@storybook/preview-api": "^8.5.1",
-    "@storybook/theming": "^8.5.1",
-    "@storybook/web-components": "^8.5.1",
-    "@storybook/web-components-vite": "^8.5.1",
+    "@playwright/test": "^1.50.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@storybook/addon-actions": "^8.5.8",
+    "@storybook/addon-controls": "^8.5.8",
+    "@storybook/addon-docs": "^8.5.8",
+    "@storybook/addon-toolbars": "^8.5.8",
+    "@storybook/core-events": "^8.5.8",
+    "@storybook/manager-api": "^8.5.8",
+    "@storybook/preview-api": "^8.5.8",
+    "@storybook/theming": "^8.5.8",
+    "@storybook/web-components": "^8.5.8",
+    "@storybook/web-components-vite": "^8.5.8",
     "@stylistic/eslint-plugin": "^2.12.1",
     "@types/eslint": "^8.56.12",
     "@types/mocha": "^10.0.10",
     "@types/sinon": "^17.0.3",
-    "@typescript-eslint/rule-tester": "^8.19.0",
-    "@typescript-eslint/types": "^8.19.0",
-    "@typescript-eslint/utils": "^8.19.0",
+    "@typescript-eslint/rule-tester": "^8.24.1",
+    "@typescript-eslint/types": "^8.24.1",
+    "@typescript-eslint/utils": "^8.24.1",
     "@web/dev-server-esbuild": "^1.0.3",
     "@web/dev-server-rollup": "^0.6.4",
     "@web/test-runner": "^0.19.0",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "chalk": "^5.3.0",
-    "esbuild": "^0.24.2",
+    "chokidar-cli": "^3.0.0",
+    "comment-parser": "^1.4.1",
+    "custom-elements-manifest": "^2.1.0",
+    "esbuild": "^0.25.0",
     "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
@@ -91,14 +109,18 @@
     "lit": "^3.2.1",
     "lit-analyzer": "^2.0.3",
     "minify-literals": "^1.0.10",
+    "node-html-parser": "^7.0.1",
     "npm-run-all2": "^7.0.2",
     "per-env": "^1.0.2",
+    "playwright": "^1.50.1",
     "postcss": "^8.4.49",
     "postcss-lit": "^1.1.1",
-    "prettier": "3.4.2",
-    "rimraf": "^5.0.10",
+    "prettier": "3.5.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
     "sinon": "^19.0.2",
-    "storybook": "^8.5.1",
+    "storybook": "^8.5.8",
     "stylelint": "^16.12.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",
@@ -107,10 +129,12 @@
     "stylelint-use-nesting": "^6.0.0",
     "terser": "^5.37.0",
     "ts-lit-plugin": "^2.0.2",
+    "ts-morph": "^25.0.1",
+    "tsx": "^4.19.2",
     "typescript": "^5.7.2",
-    "typescript-eslint": "^8.18.0",
-    "vite": "^6.0.7",
-    "vitest": "^2.1.8"
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.1.1",
+    "vitest": "^3.0.6"
   },
   "engines": {
     "node": ">= 20",
@@ -118,33 +142,45 @@
   },
   "scripts": {
     "start": "per-env",
-    "start:development": "storybook dev --config-dir .storybook --no-open --port 6006",
-    "start:production": "rimraf ./dist && npm-run-all --parallel start:production:components start:production:storybook start:production:stylesheets --aggregate-output --print-label",
-    "start:production:components": "tsc --outDir ./dist && node ./terser.js",
+    "start:development": "npm-run-all --parallel --print-name start:development:*",
+    "start:development:cem-analyze": "chokidar ./custom-elements.config.js './src/*.ts' './src/*.*.ts' './src/cem-analyzer-plugins/**' --ignore '**/*stories*' --ignore '**/*test*' --initial --silent --command 'tsc --noCheck --outDir ./dist && NODE_OPTIONS=--no-warnings=ExperimentalWarning cem analyze --config ./custom-elements.config.js --quiet'",
+    "start:development:cem-analyze:comment": "JSON module imports produce a warning. Remove NODE_OPTIONS when JSON module imports are no longer experimental.",
+    "start:development:storybook": "storybook dev --config-dir .storybook --no-open --no-version-updates --port 6006",
+    "start:development:ts-morph": "chokidar ./custom-elements.json './src/ts-morph/**' --initial --silent --command 'tsx ./src/ts-morph/run.ts'",
+    "start:development:ts-morph:comment:tsx": "Remove `tsx` once Node.js type stripping is available.",
+    "start:development:ts-morph:comment:watching": "It would be helpful to also watch './custom-elements.json`. But doing so would create a loop between this script and `start:development:cem-analyze`.",
+    "start:production": "rimraf ./dist && npm-run-all --aggregate-output --print-label --parallel start:production:components start:production:storybook start:production:stylesheets",
+    "start:production:components": "tsc --noCheck --outDir ./dist && node ./terser.js",
     "start:production:figma": "pnpm dt export-variables && pnpm dt build-tokens && pnpm dt build-styles",
+    "start:production:cem-analyze": "tsc --noCheck --outDir ./dist && NODE_OPTIONS=--no-warnings=ExperimentalWarning cem analyze --config ./custom-elements.config.js --quiet && git diff --quiet -- || { echo ERROR: Uncommitted elements manifest changes. Run this command locally and commit the changes.; exit 1; }",
     "start:production:storybook": "storybook build --config-dir .storybook --disable-telemetry --output-dir ./dist/storybook",
     "start:production:stylesheets": "node ./esbuild.js",
+    "start:production:ts-morph": "tsx ./src/ts-morph/run.ts && git diff --quiet -- || { echo ERROR: Uncommitted code modifications. Run this command locally and commit the changes.; exit 1; }",
     "format": "per-env",
-    "format:development": "prettier . --write && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --fix",
-    "format:production": "prettier . --check && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --no-color",
+    "format:development": "chokidar '**/*' --ignore 'dist/**' --ignore '.changeset/**' --ignore '.git/**' --ignore 'node_modules/**' --ignore 'pnpm-lock.yaml' --initial --silent --comand 'prettier --write --ignore-unknown {path} && stylelint {path}'",
+    "format:production": "prettier . --debug-check",
     "lint": "per-env",
-    "lint:development": "npm-run-all --print-name lint:development:*",
-    "lint:development:eslint": "tsc --outDir ./dist && eslint . --fix",
+    "lint:development": "npm-run-all --parallel --print-name lint:development:*",
+    "lint:development:eslint": "chokidar ./eslint-config.js ./src/eslint/** ./src/*.ts ./src/*.*.ts --initial --silent --command 'tsc --noCheck --outDir ./dist && eslint {path} --fix'",
     "lint:development:lit-analyzer": "lit-analyzer **/*.ts",
-    "lint:production": "npm-run-all --parallel --aggregate-output --print-label lint:production:*",
-    "lint:production:eslint": "tsc --outDir ./dist && eslint .",
+    "lint:development:stylelint": "chokidar ./.stylelintrc.js ./src/stylelint/** ./src/*.styles.ts ./src/*.*.styles.ts --initial --silent --command 'tsc --noCheck --outDir ./dist && stylelint {path} --custom-syntax postcss-lit --fix'",
+    "lint:production": "npm-run-all --aggregate-output --print-label --parallel lint:production:*",
+    "lint:production:eslint": "tsc --noCheck --outDir ./dist && eslint .",
     "lint:production:lit-analyzer": "lit-analyzer **/*.ts",
-    "typecheck": "tsc --noEmit",
+    "lint:production:stylelint": "tsc --noCheck --outDir ./dist && stylelint '**/*.styles.ts' --custom-syntax postcss-lit --no-color",
     "test": "per-env",
-    "test:development": "npm-run-all --parallel test:development:serve test:development:web-test-runner start:production:stylesheets",
-    "test:development:serve": "npx http-server dist/coverage/lcov-report --silent",
-    "test:development:web-test-runner": "web-test-runner --watch",
-    "test:development:vitest": "vitest --config ./vitest.config.js",
-    "test:development:vitest:comment": "Vitest is excluded from `test:development` because it muddies the console when running alongside Web Test Runner.",
-    "test:production": "npm-run-all --parallel test:production:* start:production:stylesheets --aggregate-output --print-label",
-    "test:production:vitest": "vitest run --config ./vitest.config.js",
-    "test:production:web-test-runner": "web-test-runner",
-    "postinstall": "pnpm dlx playwright@1.49.1 install --with-deps",
+    "test:development": "npm-run-all --parallel test:development:components test:development:serve-component-coverage",
+    "test:development:components": "web-test-runner --watch",
+    "test:development:lint-rules": "vitest --config ./vitest.config.js & chokidar './src/eslint/**' './src/stylelint/**' --ignore './src/eslint/rules/*.test.ts' './src/stylelint/*.test.ts' --initial --silent --command 'tsc --noCheck --outDir ./dist'",
+    "test:development:lint-rules:comment": "Excluded from `test:development` because Vitest muddies the console when running alongside Web Test Runner.",
+    "test:development:serve-component-coverage": "npx http-server dist/coverage/lcov-report --silent",
+    "test:production": "pnpm start:production:stylesheets && npm-run-all --aggregate-output --print-label --parallel test:production:*",
+    "test:production:lint-rules": "tsc --noCheck --outDir ./dist && vitest run --config ./vitest.config.js",
+    "test:production:components": "web-test-runner",
+    "typecheck": "per-env",
+    "typecheck:development": "tsc --outDir ./dist -w",
+    "typecheck:production": "tsc --outDir ./dist",
+    "postinstall": "pnpm dlx playwright@1.50.1 install --with-deps",
     "release": "changeset publish"
   }
 }