@crowdstrike/glide-core 0.16.0 → 0.17.1

package/dist/tree.item.styles.js

@@ -1,5 +1,5 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".label-container:focus-visible")}
+    ${focusOutline(".label-container:not(.selected):focus-visible")}
   `,css`
     :host {
       cursor: pointer;
@@ -19,27 +19,35 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
 
       &.selected {
         --color: var(--glide-core-text-selected);
+
+        ::slotted([slot='prefix']),
+        ::slotted([slot='menu']),
+        ::slotted([slot='suffix']) {
+          --hovered-icon-button-color: var(--glide-core-icon-hover);
+        }
       }
     }
 
     .expand-icon-container {
       flex-shrink: 0;
       min-inline-size: 1.5625rem;
-    }
 
-    .expand-icon {
-      align-items: center;
-      cursor: pointer;
-      display: flex;
-      justify-content: center;
-      rotate: 0deg;
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: 250ms rotate ease;
+      &.expanded {
+        svg {
+          rotate: 0deg;
+        }
       }
 
-      &.expand-icon-expanded {
-        rotate: 90deg;
+      svg {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        rotate: -90deg;
+
+        @media (prefers-reduced-motion: no-preference) {
+          transition: 250ms rotate ease;
+        }
       }
     }
 
@@ -61,46 +69,29 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         transition: background-color 150ms ease-in-out;
       }
 
-      &:hover {
-        background-color: var(--glide-core-surface-hover);
-      }
-
       &.selected {
         background-color: var(--glide-core-surface-selected);
+      }
+
+      &:hover {
+        background-color: var(--glide-core-surface-hover);
 
-        &:hover {
+        &.selected {
           background-color: var(--glide-core-surface-selected-hover);
         }
       }
 
       &:focus-visible {
-        /* The outline is inside the component since children have overflow hidden */
-        outline-offset: -2px;
-
-        .component.selected & {
-          /*
-            We need !important here as we must override the focusVisible mixin
-            that also includes !important.
-            This component is a bit of a unique case as we want to override the
-            default outline styles when a tree item is also focus-visible, but
-            also selected.
-          */
-          outline: 1px solid var(--glide-core-icon-selected) !important;
-          outline-offset: -3px;
+        &:not(&.selected) {
+          /* The outline is inside the component since children have overflow hidden */
+          outline-offset: -2px;
         }
-      }
 
-      .component.selected & {
-        background-color: var(--glide-core-surface-selected);
-
-        &:hover {
-          background-color: var(--glide-core-surface-selected-hover);
+        &.selected {
+          outline: 1px solid var(--glide-core-icon-selected);
+          outline-offset: -3px;
         }
       }
-
-      &.prefix-icon .label {
-        padding-inline-start: var(--glide-core-spacing-xs);
-      }
     }
 
     ::slotted([slot='menu']) {
@@ -113,12 +104,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       --icon-button-color: var(--color);
     }
 
-    .component.selected ::slotted([slot='prefix']),
-    .component.selected ::slotted([slot='menu']),
-    .component.selected ::slotted([slot='suffix']) {
-      --hovered-icon-button-color: var(--glide-core-icon-hover);
-    }
-
     .label-container:hover,
     .label-container:focus,
     .label-container:focus-within,
@@ -134,18 +119,20 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      &.prefix-icon {
+        padding-inline-start: var(--glide-core-spacing-xs);
+      }
     }
 
-    .child-items {
+    .default-slot-container {
       block-size: 0;
       display: flex;
       flex-direction: column;
       overflow: hidden;
       visibility: hidden;
-    }
 
-    .expanded {
-      .child-items {
+      &.expanded {
         block-size: auto;
         visibility: visible;
       }

package/dist/tree.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,s){var r,i=arguments.length,l=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(i<3?r(l):i>3?r(t,o,l):r(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#s}" @keydown="${this.#r}"><slot @slotchange="${this.#i}" ${ref(this.#o)}></slot></div>`}selectItem(e){if(this.#l){for(const t of this.#l){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.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;get#l(){return this.#o.value?.assignedElements().filter((e=>e instanceof GlideCoreTreeItem))}#n(e){e?.focus(),this.focusedItem=e}#c(){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)}))}#s(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))}#i(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}#e(e){let t;e.target===this?t=this.selectedItem?.checkVisibility({visibilityProperty:!0})?this.selectedItem:this.#l?.[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)}#r(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;if(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.#c(),{focusedItem:o}=this,s=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!==s&&s<t.length-1&&this.#n(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#n(t[s-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))}};__decorate([state()],GlideCoreTree.prototype,"selectedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree")],GlideCoreTree);export default GlideCoreTree;
+var __decorate=this&&this.__decorate||function(e,t,o,s){var r,i=arguments.length,l=i<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,s);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(i<3?r(l):i>3?r(t,o,l):r(t,o))||l);return i>3&&l&&Object.defineProperty(t,o,l),l};import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreTreeItem from"./tree.item.js";import styles from"./tree.styles.js";let GlideCoreTree=class GlideCoreTree extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",this.#e),this.removeEventListener("focusout",this.#t)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}render(){return html`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${this.#s}" @keydown="${this.#r}"><slot @slotchange="${this.#i}" ${ref(this.#o)}></slot></div>`}selectItem(e){if(this.#l){for(const t of this.#l){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.privateTabIndex=0,this.#o=createRef(),this.addEventListener("focusin",this.#e),this.addEventListener("focusout",this.#t)}#o;get#l(){return this.#o.value?.assignedElements().filter((e=>e instanceof GlideCoreTreeItem))}#n(e){e?.focus(),this.focusedItem=e}#c(){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)}))}#s(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.#c(),{focusedItem:o}=this,s=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!==s&&s<t.length-1&&this.#n(t[s+1]),"ArrowUp"===e.key&&s>0&&this.#n(t[s-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))}#i(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreTreeItem])}#e(e){let t;e.target===this?t=this.selectedItem?.checkVisibility({visibilityProperty:!0})?this.selectedItem:this.#l?.[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([state()],GlideCoreTree.prototype,"selectedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"focusedItem",void 0),__decorate([state()],GlideCoreTree.prototype,"privateTabIndex",void 0),GlideCoreTree=__decorate([customElement("glide-core-tree")],GlideCoreTree);export default GlideCoreTree;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.16.0",
+  "version": "0.17.1",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -51,6 +51,7 @@
     "@eslint/js": "^9.17.0",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-commonjs": "^25.0.8",
+    "@storybook/addon-actions": "^8.4.7",
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
@@ -64,16 +65,16 @@
     "@types/eslint": "^8.56.12",
     "@types/mocha": "^10.0.10",
     "@types/sinon": "^17.0.3",
-    "@typescript-eslint/rule-tester": "^8.18.0",
-    "@typescript-eslint/types": "^8.18.0",
-    "@typescript-eslint/utils": "^8.18.0",
+    "@typescript-eslint/rule-tester": "^8.19.0",
+    "@typescript-eslint/types": "^8.19.0",
+    "@typescript-eslint/utils": "^8.19.0",
     "@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.0",
+    "esbuild": "^0.24.2",
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-lit": "^1.15.0",
@@ -85,7 +86,7 @@
     "globby": "^14.0.2",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "is-ci": "^3.0.1",
+    "is-ci": "^4.1.0",
     "lint-staged": "^15.2.11",
     "lit": "^3.2.1",
     "lit-analyzer": "^2.0.3",

package/dist/icons/informational.d.ts

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

package/dist/icons/informational.js

@@ -1 +0,0 @@
-import{svg}from"lit/static-html.js";export default svg`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="height: var(--size, 1rem); width: var(--size, 1rem);"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99996 0.666672C3.94987 0.666672 0.666626 3.94992 0.666626 8C0.666626 12.0501 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.0501 15.3333 8C15.3333 3.94992 12.05 0.666672 7.99996 0.666672ZM8.66663 5.33334C8.66663 4.96515 8.36815 4.66667 7.99996 4.66667C7.63177 4.66667 7.33329 4.96515 7.33329 5.33334V8C7.33329 8.36819 7.63177 8.66667 7.99996 8.66667C8.36815 8.66667 8.66663 8.36819 8.66663 8V5.33334ZM7.99996 10C7.63177 10 7.33329 10.2985 7.33329 10.6667C7.33329 11.0349 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0349 8.67329 10.6667C8.67329 10.2985 8.37482 10 8.00663 10H7.99996Z" fill="currentColor"/></svg>`;