@crowdstrike/glide-core 0.20.4 → 0.22.0

package/dist/tree.item.styles.js

@@ -1,151 +0,0 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline(".label-container:not(.selected):focus-visible")}
-  `,css`
-    :host {
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .component {
-      display: contents;
-      font-family: var(--glide-core-body-sm-font-family);
-      font-style: var(--glide-core-body-sm-font-style);
-      font-weight: var(--glide-core-body-sm-font-weight);
-      grid-template-columns: repeat(auto-fill, 2.5rem);
-      line-height: 1.25rem;
-
-      --private-color: var(--glide-core-text-body-1);
-
-      &.selected {
-        --private-color: var(--glide-core-text-selected);
-
-        ::slotted([slot='prefix']),
-        ::slotted([slot='menu']),
-        ::slotted([slot='suffix']) {
-          --private-hovered-icon-button-color: var(--glide-core-icon-hover);
-        }
-      }
-    }
-
-    .expand-icon-container {
-      flex-shrink: 0;
-      min-inline-size: 1.5625rem;
-
-      &.expanded {
-        svg {
-          rotate: 0deg;
-        }
-      }
-
-      svg {
-        align-items: center;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        rotate: -90deg;
-
-        @media (prefers-reduced-motion: no-preference) {
-          transition: 250ms rotate ease;
-        }
-      }
-    }
-
-    .prefix-slot {
-      align-items: center;
-      display: flex;
-    }
-
-    .label-and-children {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .label-container {
-      align-items: center;
-      border-radius: 0.5rem;
-      color: var(--private-color);
-      display: flex;
-      font-size: var(--glide-core-body-sm-font-size);
-      padding-block: var(--glide-core-spacing-xxs);
-      padding-inline: var(--glide-core-spacing-xs);
-
-      @media (prefers-reduced-motion: no-preference) {
-        transition: background-color 150ms ease-in-out;
-      }
-
-      &.selected {
-        background-color: var(--glide-core-surface-selected);
-      }
-
-      &:hover {
-        background-color: var(--glide-core-surface-hover);
-
-        &.selected {
-          background-color: var(--glide-core-surface-selected-hover);
-        }
-      }
-
-      &:focus-visible {
-        &:not(&.selected) {
-          /* The outline is inside the component since children have overflow hidden */
-          outline-offset: -2px;
-        }
-
-        &.selected {
-          outline: 1px solid var(--glide-core-icon-selected);
-          outline-offset: -3px;
-        }
-      }
-    }
-
-    ::slotted([slot='menu']) {
-      visibility: hidden;
-    }
-
-    ::slotted([slot='prefix']),
-    ::slotted([slot='menu']),
-    ::slotted([slot='suffix']) {
-      --private-icon-button-color: var(--private-color);
-    }
-
-    .label-container:hover,
-    .label-container:focus,
-    .label-container:focus-within,
-    .label-container:focus-visible {
-      ::slotted([slot='menu']) {
-        visibility: visible;
-      }
-    }
-
-    .label {
-      margin-inline-end: auto;
-      min-inline-size: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      &.prefix-icon {
-        padding-inline-start: var(--glide-core-spacing-xs);
-      }
-    }
-
-    .default-slot-container {
-      block-size: 0;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      visibility: hidden;
-
-      &.expanded {
-        block-size: auto;
-        visibility: visible;
-      }
-    }
-
-    .icon-container {
-      display: flex;
-      gap: var(--glide-core-spacing-xxs);
-      padding-inline: var(--glide-core-spacing-xxs);
-    }
-  `];

package/dist/tree.js

@@ -1 +0,0 @@
-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/dist/tree.styles.d.ts

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

package/dist/tree.styles.js

@@ -1,7 +0,0 @@
-import{css}from"lit";export default[css`
-    .component {
-      font-family: var(--glide-core-body-sm-font-family);
-      font-style: var(--glide-core-body-sm-font-style);
-      font-weight: var(--glide-core-body-sm-font-weight);
-    }
-  `];