@crowdstrike/glide-core 0.5.0

package/dist/toggle.js

@@ -0,0 +1 @@
+"use strict";var y=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var a=(i,e,t,l)=>{for(var o=l>1?void 0:l?E(e,t):e,p=i.length-1,m;p>=0;p--)(m=i[p])&&(o=(l?m(e,t,o):m(o))||o);return l&&o&&y(e,t,o),o};var u=(i,e,t)=>{if(!e.has(i))throw TypeError("Cannot "+t)};var c=(i,e,t)=>(u(i,e,"read from private field"),t?t.call(i):e.get(i)),h=(i,e,t)=>{if(e.has(i))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(i):e.set(i,t)};var f=(i,e,t)=>(u(i,e,"access private method"),t);var n,d,v;import"./label.js";import{LitElement as b,html as $}from"lit";import{createRef as k,ref as L}from"lit/directives/ref.js";import{customElement as R,property as r}from"lit/decorators.js";import w from"./toggle.styles.js";let s=class extends b{constructor(){super(...arguments);h(this,d);this.checked=!1;this.disabled=!1;this.hideLabel=!1;this.orientation="horizontal";h(this,n,k())}click(){c(this,n).value?.click()}focus(t){c(this,n).value?.focus(t)}render(){return $`<div data-test="component"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?hide="${this.hideLabel}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="toggle-and-input" slot="control"><input aria-describedby="summary description" data-test="input" id="input" type="checkbox" ?checked="${this.checked}" ?disabled="${this.disabled}" @change="${f(this,d,v)}" ${L(c(this,n))}></div><div slot="summary" id="summary">${this.summary}</div><slot class="description" id="description" name="description" slot="description"></slot></glide-core-label></div>`}};n=new WeakMap,d=new WeakSet,v=function(t){t.target instanceof HTMLInputElement&&(this.checked=t.target.checked),this.dispatchEvent(new Event(t.type,t))},s.shadowRootOptions={...b.shadowRootOptions,mode:"closed"},s.styles=w,a([r({type:Boolean})],s.prototype,"checked",2),a([r({reflect:!0,type:Boolean})],s.prototype,"disabled",2),a([r({attribute:"hide-label",type:Boolean})],s.prototype,"hideLabel",2),a([r({reflect:!0})],s.prototype,"label",2),a([r({reflect:!0})],s.prototype,"orientation",2),a([r({reflect:!0})],s.prototype,"name",2),a([r({reflect:!0})],s.prototype,"summary",2),s=a([R("glide-core-toggle")],s);export{s as default};

package/dist/toggle.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Horizontal: StoryObj;
+export declare const HorizontalWithTooltip: StoryObj;
+export declare const Vertical: StoryObj;
+export declare const VerticalWithToolip: StoryObj;

package/dist/toggle.styles.d.ts

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

package/dist/toggle.styles.js

@@ -0,0 +1,81 @@
+"use strict";import{css as e}from"lit";import s from"./styles/focus-outline.js";export default[e`
+    /*
+Most states are handled on the host. But ":checked" is handled on the input
+because browsers don't support that class on the host. And using attribute
+selectors won't work because those attributes, same as native, don't change
+when their properties do.
+
+TODO
+Use the ":checked" pseudo class on the host and throughout when browsers support it.
+*/
+
+    .toggle-and-input-and-summary {
+      align-items: center;
+      display: flex;
+      gap: var(--glide-core-spacing-sm);
+    }
+
+    .toggle-and-input {
+      --inline-size: 1.5rem;
+
+      align-items: center;
+      background-color: var(--glide-core-surface-selected-disabled);
+      block-size: 0.875rem;
+      border: 1px solid transparent;
+      border-radius: var(--glide-core-spacing-sm);
+      display: flex;
+      flex-shrink: 0; /* Don't shrink when the summary wraps. */
+      inline-size: var(--inline-size);
+      justify-content: center;
+      position: relative;
+
+      &:has(input:focus-visible) {
+        ${s};
+        outline-offset: 4px;
+      }
+
+      &:has(input:checked:not(:disabled)) {
+        background-color: var(--glide-core-surface-primary);
+        border-color: transparent;
+
+        &::before {
+          transform: translateX(0);
+        }
+      }
+
+      &:has(input:disabled) {
+        background-color: var(--glide-core-surface-disabled);
+
+        &::before {
+          box-shadow: none;
+        }
+      }
+
+      &::before {
+        background: var(--glide-core-surface-page);
+        block-size: 0.875rem;
+        border-radius: 50%;
+        box-shadow:
+          0 3px 1px 0 rgb(0 0 0 / 6%),
+          0 3px 8px 0 rgb(0 0 0 / 15%);
+        content: '';
+        display: block;
+        inline-size: 0.875rem;
+        inset-inline-end: 0;
+        position: absolute;
+        transform: translateX(calc(var(--inline-size) * -1 + 100%));
+        transition: 150ms transform;
+      }
+    }
+
+    input {
+      block-size: 100%;
+      cursor: inherit;
+      inline-size: 100%;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      margin: 0;
+      opacity: 0;
+      position: absolute;
+    }
+  `];

package/dist/toggle.test.basics.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/toggle.test.events.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/toggle.test.focus.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/toggle.test.states.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tooltip.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-tooltip': GlideCoreTooltip;
+    }
+}
+/**
+ * @slot - The contents of the tooltip.
+ * @slot target - The element to which the tooltip should attach.
+ */
+export default class GlideCoreTooltip extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    placement?: 'bottom' | 'left' | 'right' | 'top';
+    firstUpdated(): void;
+    private get isVisible();
+    private set isVisible(value);
+    render(): import("lit").TemplateResult<1>;
+    private effectivePlacement?;
+}

package/dist/tooltip.js

@@ -0,0 +1 @@
+"use strict";var Z=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var v=(i,s,t,l)=>{for(var n=l>1?void 0:l?_(s,t):s,f=i.length-1,u;f>=0;f--)(u=i[f])&&(n=(l?u(s,t,n):u(n))||n);return l&&n&&Z(s,t,n),n};var P=(i,s,t)=>{if(!s.has(i))throw TypeError("Cannot "+t)};var e=(i,s,t)=>(P(i,s,"read from private field"),t?t.call(i):s.get(i)),o=(i,s,t)=>{if(s.has(i))throw TypeError("Cannot add the same private member more than once");s instanceof WeakSet?s.add(i):s.set(i,t)},S=(i,s,t,l)=>(P(i,s,"write to private field"),l?l.call(i,t):s.set(i,t),t);var a=(i,s,t)=>(P(i,s,"access private method"),t);var b,y,w,c,$,m,p,h,x,N,M,X,V,Y,T,q,L,z,U,A,H,B,F,J,O,Q,E,k;import{LitElement as I,html as C}from"lit";import{arrow as G,autoUpdate as tt,computePosition as et,flip as st,offset as it,shift as ot}from"@floating-ui/dom";import{classMap as lt}from"lit/directives/class-map.js";import{createRef as d,ref as g}from"lit/directives/ref.js";import{customElement as at,property as rt,state as K}from"lit/decorators.js";import{owSlot as R}from"./library/ow.js";import nt from"./tooltip.styles.js";let r=class extends I{constructor(){super(...arguments);o(this,x);o(this,M);o(this,V);o(this,T);o(this,L);o(this,U);o(this,H);o(this,F);o(this,O);o(this,E);o(this,b,d());o(this,y,void 0);o(this,w,void 0);o(this,c,d());o(this,$,!1);o(this,m,d());o(this,p,d());o(this,h,d())}firstUpdated(){R(e(this,c).value),R(e(this,p).value),a(this,E,k).call(this)}get isVisible(){return e(this,$)}set isVisible(t){var l;S(this,$,t),this.isVisible?a(this,E,k).call(this):(l=e(this,y))==null||l.call(this)}render(){return C`<div class="component" @mouseover="${a(this,H,B)}" @mouseout="${a(this,U,A)}"><div aria-labelledby="tooltip" class="target" slot="target" @focusin="${a(this,V,Y)}" @focusout="${a(this,T,q)}" @keydown="${a(this,L,z)}" ${g(e(this,m))}><slot @slotchange="${a(this,F,J)}" ${g(e(this,p))} name="target"></slot></div><div class="${lt({tooltip:!0,visible:this.isVisible})}" id="tooltip" role="tooltip" ${g(e(this,h))}><span aria-label="Tooltip: "></span><slot @slotchange="${a(this,M,X)}" ${g(e(this,c))}></slot><div class="arrow" ${g(e(this,b))}></div></div></div>`}};b=new WeakMap,y=new WeakMap,w=new WeakMap,c=new WeakMap,$=new WeakMap,m=new WeakMap,p=new WeakMap,h=new WeakMap,x=new WeakSet,N=function(){clearTimeout(e(this,w))},M=new WeakSet,X=function(){R(e(this,c).value)},V=new WeakSet,Y=function(){this.isVisible=!0},T=new WeakSet,q=function(){this.isVisible=!1},L=new WeakSet,z=function(t){t.key==="Escape"&&(this.isVisible=!1)},U=new WeakSet,A=function(){a(this,O,Q).call(this)},H=new WeakSet,B=function(){a(this,x,N).call(this),this.isVisible=!0},F=new WeakSet,J=function(){R(e(this,p).value)},O=new WeakSet,Q=function(){S(this,w,setTimeout(()=>{this.isVisible=!1},200))},E=new WeakSet,k=function(){e(this,m).value&&e(this,h).value&&S(this,y,tt(e(this,m).value,e(this,h).value,()=>{(async()=>{if(e(this,m).value&&e(this,h).value){const t=e(this,b).value,{placement:l,x:n,y:f,middlewareData:u}=await et(e(this,m).value,e(this,h).value,{placement:this.placement,strategy:"fixed",middleware:[it(10),st({fallbackStrategy:"initialPlacement"}),ot(),G({element:t})]});Object.assign(e(this,h).value.style,{left:`${n}px`,top:`${f}px`});const D=u.arrow?.x??null,j=u.arrow?.y??null,W={top:"bottom",right:"left",bottom:"top",left:"right"}[l.split("-")[0]];Object.assign(t.style,{left:D===null?"":`${D}px`,top:j===null?"":`${j}px`,right:"",bottom:"",[W]:"-3px"}),this.effectivePlacement=l}})()}))},r.shadowRootOptions={...I.shadowRootOptions,delegatesFocus:!0,mode:"closed"},r.styles=nt,v([rt()],r.prototype,"placement",2),v([K()],r.prototype,"isVisible",1),v([K()],r.prototype,"effectivePlacement",2),r=v([at("glide-core-tooltip")],r);export{r as default};

package/dist/tooltip.stories.d.ts

@@ -0,0 +1,7 @@
+import './button.js';
+import './icons/storybook.js';
+import './tooltip.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Tooltip: StoryObj;

package/dist/tooltip.styles.d.ts

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

package/dist/tooltip.styles.js

@@ -0,0 +1,66 @@
+"use strict";import{css as e}from"lit";import i from"./styles/focus-outline.js";export default[e`
+    .component {
+      /* https://github.com/CrowdStrike/glide-core/pull/119#issuecomment-2113314591 */
+      display: flex;
+      position: relative;
+    }
+
+    .target {
+      background-color: transparent;
+      border-width: 0;
+
+      /* Additional whitespace from line height and the tooltip won't be vertically centered. */
+      display: flex;
+      padding: 0;
+      position: relative;
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        ${i};
+      }
+
+      ::slotted svg {
+        display: block;
+      }
+    }
+
+    .tooltip {
+      background-color: var(--glide-core-surface-base-dark);
+      border-radius: var(--glide-core-spacing-xs);
+      color: var(--glide-core-text-selected);
+      display: none;
+      font-family: var(--glide-core-body-md-font-family);
+      font-style: var(--glide-core-body-md-font-style);
+      font-weight: var(--glide-core-body-md-font-weight);
+      inline-size: max-content;
+      inset-block-start: 50%;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      padding: var(--glide-core-spacing-xs) var(--glide-core-spacing-sm);
+      position: fixed;
+      z-index: 1;
+
+      ::slotted(kbd) {
+        color: var(--glide-core-text-header-2);
+        display: inline-block;
+        font-family: inherit;
+        margin-inline-start: var(--glide-core-spacing-sm);
+        white-space: nowrap;
+      }
+
+      &.visible {
+        display: unset;
+      }
+    }
+
+    .arrow {
+      background: var(--glide-core-surface-base-dark);
+      block-size: 0.375rem;
+      inline-size: 0.375rem;
+      position: absolute;
+      transform: rotate(45deg);
+    }
+  `];

package/dist/tooltip.test.basics.d.ts

@@ -0,0 +1 @@
+import './tooltip.js';

package/dist/tooltip.test.interactions.d.ts

@@ -0,0 +1 @@
+import './tooltip.js';

package/dist/tree.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+import GlideCoreTreeItem from './tree.item.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-tree': GlideCoreTree;
+    }
+}
+/**
+ * @description A tree element, containing a hierarchy of tree items
+ *
+ * @slot - One or more of <glide-core-tree-item>
+ */
+export default class GlideCoreTree extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    selectedItem?: GlideCoreTreeItem;
+    focusedItem?: GlideCoreTreeItem | null;
+    privateTabIndex: number;
+    slotElements: GlideCoreTreeItem[];
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+    selectItem(item: GlideCoreTreeItem): void;
+    constructor();
+}

package/dist/tree.item.d.ts

@@ -0,0 +1,43 @@
+import './tree.item.menu.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-tree-item': GlideCoreTreeItem;
+    }
+}
+/**
+ * @description A single node of a Tree.
+ *
+ * @slot - One or more of <glide-core-tree-item>, if this tree item contains nested tree items.
+ * @slot prefix - An optional icon to display before the label.
+ * @slot suffix - An optional icon to add after the label.
+ * @slot menu - Place a <glide-core-menu> here, which will be visible on hover or focus
+ */
+export default class GlideCoreTreeItem extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    expanded: boolean;
+    label: string;
+    level: number;
+    selected: boolean;
+    menuSlotAssignedElements: HTMLElement[];
+    prefixSlotAssignedElements: HTMLElement[];
+    slotElements: GlideCoreTreeItem[];
+    suffixSlotAssignedElements: HTMLElement[];
+    firstUpdated(): void;
+    focus(): void;
+    get hasChildTreeItems(): boolean;
+    render(): import("lit").TemplateResult<1>;
+    /**
+     * Traverses down the tree, selecting the passed-in item,
+     * and deselecting all other items.
+     * Returns the selected item
+     */
+    selectItem(item: GlideCoreTreeItem): GlideCoreTreeItem | undefined;
+    toggleExpand(): void;
+    private childTreeItems;
+    private hasMenuSlot;
+    private hasPrefixSlot;
+    private hasSuffixSlot;
+}

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

@@ -0,0 +1,20 @@
+import './icon-button.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-tree-item-icon-button': GlideCoreTreeItemIconButton;
+    }
+}
+/**
+ * @description An icon button that can be used inside of a tree item.
+ * Provides correct color styling based on tree item state
+ *
+ * @slot - Reserved for the icon to display inside of the button.
+ */
+export default class GlideCoreTreeItemIconButton extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1 @@
+"use strict";var b=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var f=(e,t,o,a)=>{for(var i=a>1?void 0:a?E(t,o):t,n=e.length-1,d;n>=0;n--)(d=e[n])&&(i=(a?d(t,o,i):d(i))||i);return a&&i&&b(t,o,i),i};var p=(e,t,o)=>{if(!t.has(e))throw TypeError("Cannot "+o)};var s=(e,t,o)=>(p(e,t,"read from private field"),o?o.call(e):t.get(e)),c=(e,t,o)=>{if(t.has(e))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(e):t.set(e,o)};var h=(e,t,o)=>(p(e,t,"access private method"),o);var l,m,v;import"./icon-button.js";import{LitElement as g,html as R}from"lit";import{createRef as S,ref as w}from"lit/directives/ref.js";import{customElement as y}from"lit/decorators.js";import{owSlot as u}from"./library/ow.js";import L from"./tree.item.icon-button.styles.js";let r=class extends g{constructor(){super(...arguments);c(this,m);c(this,l,S())}firstUpdated(){u(s(this,l).value)}render(){return R`<glide-core-icon-button class="component" variant="tertiary"><slot @slotchange="${h(this,m,v)}" ${w(s(this,l))}></slot></glide-core-icon-button>`}};l=new WeakMap,m=new WeakSet,v=function(){u(s(this,l).value)},r.shadowRootOptions={...g.shadowRootOptions,mode:"closed"},r.styles=L,r=f([y("glide-core-tree-item-icon-button")],r);export{r as default};

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

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

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

@@ -0,0 +1,9 @@
+"use strict";import{css as o}from"lit";export default[o`
+    .component {
+      display: flex;
+
+      --icon-color: var(--icon-button-color);
+      --hovered-icon-color: var(--hovered-icon-button-color);
+      --size: 1rem;
+    }
+  `];

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

@@ -0,0 +1 @@
+export {};

package/dist/tree.item.js

@@ -0,0 +1 @@
+"use strict";var N=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var l=(i,s,t,o)=>{for(var n=o>1?void 0:o?O(s,t):s,r=i.length-1,b;r>=0;r--)(b=i[r])&&(n=(o?b(s,t,n):b(n))||n);return o&&n&&N(s,t,n),n};var A=(i,s,t)=>{if(!s.has(i))throw TypeError("Cannot "+t)};var d=(i,s,t)=>(A(i,s,"read from private field"),t?t.call(i):s.get(i)),a=(i,s,t)=>{if(s.has(i))throw TypeError("Cannot add the same private member more than once");s instanceof WeakSet?s.add(i):s.set(i,t)};var h=(i,s,t)=>(A(i,s,"access private method"),t);var f,p,H,x,I,g,R,v,k,S,B,E,P,$,T;import"./tree.item.menu.js";import{LitElement as w,html as y}from"lit";import{classMap as M}from"lit/directives/class-map.js";import{createRef as j,ref as q}from"lit/directives/ref.js";import{customElement as D,property as c,queryAssignedElements as m,state as u}from"lit/decorators.js";import{ifDefined as L}from"lit/directives/if-defined.js";import{when as F}from"lit/directives/when.js";import U from"./tree.item.styles.js";let e=class extends w{constructor(){super(...arguments);a(this,p);a(this,x);a(this,g);a(this,v);a(this,S);a(this,E);a(this,$);this.expanded=!1;this.label="";this.level=1;this.selected=!1;this.childTreeItems=[];this.hasMenuSlot=!1;this.hasPrefixSlot=!1;this.hasSuffixSlot=!1;a(this,f,j())}firstUpdated(){h(this,$,T).call(this)}focus(){d(this,f).value?.focus()}get hasChildTreeItems(){return this.childTreeItems.length>0}render(){return y`<div class="${M({component:!0,expanded:this.expanded,selected:this.selected})}" role="treeitem" aria-label="${this.label}" aria-selected="${L(d(this,x,I))}" aria-expanded="${L(d(this,p,H))}"><div class="${M({"label-container":!0})}" tabindex="-1" ${q(d(this,f))}><div style="width:${d(this,g,R)};"></div><div class="expand-icon-container">${F(this.hasChildTreeItems,()=>y`<div><svg aria-hidden="true" class="${M({"expand-icon":!0,"expand-icon-expanded":this.expanded})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>`)}</div><slot name="prefix" @slotchange="${h(this,S,B)}"></slot><div class="label">${this.label}</div><slot name="menu" @slotchange="${h(this,v,k)}"></slot><slot name="suffix" @slotchange="${h(this,E,P)}"></slot></div><div class="child-items" role="group"><slot></slot></div></div>`}selectItem(t){let o;for(const n of this.slotElements)if(t===n)n.setAttribute("selected","true"),o=n;else{n.removeAttribute("selected");const r=n.selectItem(t);r&&(o=r)}return o}toggleExpand(){this.expanded=!this.expanded}};f=new WeakMap,p=new WeakSet,H=function(){if(this.hasChildTreeItems)return this.expanded?"true":"false"},x=new WeakSet,I=function(){if(!this.hasChildTreeItems)return this.selected?"true":"false"},g=new WeakSet,R=function(){return`${(this.level-1)*20}px`},v=new WeakSet,k=function(){this.hasMenuSlot=this.menuSlotAssignedElements.length>0},S=new WeakSet,B=function(){this.hasPrefixSlot=this.prefixSlotAssignedElements.length>0},E=new WeakSet,P=function(){this.hasSuffixSlot=this.suffixSlotAssignedElements.length>0},$=new WeakSet,T=function(){const t=[];for(const o of this.slotElements)o.level=this.level+1,t.push(o);this.childTreeItems=t},e.shadowRootOptions={...w.shadowRootOptions,delegatesFocus:!0,mode:"closed"},e.styles=U,l([c({type:Boolean})],e.prototype,"expanded",2),l([c({reflect:!0})],e.prototype,"label",2),l([c({type:Number})],e.prototype,"level",2),l([c({type:Boolean})],e.prototype,"selected",2),l([m({slot:"menu"})],e.prototype,"menuSlotAssignedElements",2),l([m({slot:"prefix"})],e.prototype,"prefixSlotAssignedElements",2),l([m()],e.prototype,"slotElements",2),l([m({slot:"suffix"})],e.prototype,"suffixSlotAssignedElements",2),l([u()],e.prototype,"childTreeItems",2),l([u()],e.prototype,"hasMenuSlot",2),l([u()],e.prototype,"hasPrefixSlot",2),l([u()],e.prototype,"hasSuffixSlot",2),e=l([D("glide-core-tree-item")],e);export{e as default};

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

@@ -0,0 +1,21 @@
+import './icon-button.js';
+import './menu.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-tree-item-menu': GlideCoreTreeItemMenu;
+    }
+}
+/**
+ * @description A menu built into a tree item. Uses <glide-core-menu>
+ *
+ * @slot - One or more of <glide-core-menu-link> or <glide-core-menu-button>.
+ * @slot target - A focusable element against which Menu will be positioned. Opens and closes Menu when interacted with.
+ */
+export default class GlideCoreTreeItemMenu extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/tree.item.menu.js

@@ -0,0 +1 @@
+"use strict";var E=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var h=(o,t,e,a)=>{for(var i=a>1?void 0:a?R(t,e):t,m=o.length-1,d;m>=0;m--)(d=o[m])&&(i=(a?d(t,e,i):d(i))||i);return a&&i&&E(t,e,i),i};var p=(o,t,e)=>{if(!t.has(o))throw TypeError("Cannot "+e)};var s=(o,t,e)=>(p(o,t,"read from private field"),e?e.call(o):t.get(o)),c=(o,t,e)=>{if(t.has(o))throw TypeError("Cannot add the same private member more than once");t instanceof WeakSet?t.add(o):t.set(o,e)};var f=(o,t,e)=>(p(o,t,"access private method"),e);var r,n,S;import"./icon-button.js";import"./menu.js";import{LitElement as u,html as y}from"lit";import{createRef as L,ref as M}from"lit/directives/ref.js";import{customElement as b}from"lit/decorators.js";import{owSlot as g,owSlotType as v}from"./library/ow.js";import C from"./menu.button.js";import w from"./menu.link.js";import k from"./tree.item.menu.styles.js";let l=class extends u{constructor(){super(...arguments);c(this,n);c(this,r,L())}firstUpdated(){g(s(this,r).value),v(s(this,r).value,[C,w])}render(){return y`<glide-core-menu class="component"><slot @slotchange="${f(this,n,S)}" ${M(s(this,r))}></slot><glide-core-icon-button slot="target" variant="tertiary"><svg width="4" height="14" 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></glide-core-icon-button></glide-core-menu>`}};r=new WeakMap,n=new WeakSet,S=function(){g(s(this,r).value),v(s(this,r).value,[C,w])},l.shadowRootOptions={...u.shadowRootOptions,mode:"closed"},l.styles=k,l=h([b("glide-core-tree-item-menu")],l);export{l as default};

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

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

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

@@ -0,0 +1,17 @@
+"use strict";import{css as o}from"lit";export default[o`
+    :host {
+      display: contents;
+    }
+
+    .component {
+      display: flex;
+    }
+
+    glide-core-icon-button {
+      display: flex;
+
+      --icon-color: var(--icon-button-color);
+      --hovered-icon-color: var(--hovered-icon-button-color);
+      --size: 1rem;
+    }
+  `];

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

@@ -0,0 +1 @@
+export {};

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

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

package/dist/tree.item.styles.js

@@ -0,0 +1,130 @@
+"use strict";import{css as e}from"lit";export default[e`
+    :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);
+
+      --color: var(--glide-core-text-body-1);
+
+      &.selected {
+        --color: var(--glide-core-text-selected);
+      }
+    }
+
+    .expand-icon-container {
+      min-inline-size: 1.5625rem;
+    }
+
+    .expand-icon {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      rotate: 0deg;
+      transition: 250ms rotate ease;
+
+      &.expand-icon-expanded {
+        rotate: 90deg;
+      }
+    }
+
+    .label-and-children {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .label-container {
+      align-items: center;
+      border-radius: 0.625rem;
+      color: var(--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);
+
+      &:hover {
+        background-color: var(--glide-core-surface-hover);
+      }
+
+      &.selected {
+        background-color: var(--glide-core-surface-selected);
+
+        &:hover {
+          background-color: var(--glide-core-color-dark-blue);
+        }
+      }
+
+      &:focus-visible {
+        outline: var(--glide-core-border-primary);
+        outline-offset: -1px;
+        outline-style: auto;
+        outline-width: 2px;
+      }
+
+      .component.selected & {
+        background-color: var(--glide-core-surface-selected);
+
+        &:hover {
+          background-color: var(--glide-core-color-dark-blue);
+        }
+      }
+    }
+
+    ::slotted([slot='prefix']) {
+      margin-inline-end: var(--glide-core-spacing-xs);
+    }
+
+    ::slotted([slot='menu']) {
+      visibility: hidden;
+    }
+
+    ::slotted([slot='prefix']),
+    ::slotted([slot='menu']),
+    ::slotted([slot='suffix']) {
+      --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);
+    }
+
+    ::slotted([slot='suffix']) {
+      padding-inline: var(--glide-core-spacing-xxs);
+    }
+
+    .label-container:hover,
+    .label-container:focus,
+    .label-container:focus-within,
+    .label-container:focus-visible {
+      ::slotted([slot='menu']) {
+        visibility: visible;
+      }
+    }
+
+    .label {
+      flex-grow: 1;
+    }
+
+    .child-items {
+      block-size: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .expanded {
+      .child-items {
+        block-size: auto;
+      }
+    }
+  `];

package/dist/tree.item.test.basics.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tree.js

@@ -0,0 +1 @@
+"use strict";var O=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var f=(r,o,e,t)=>{for(var s=t>1?void 0:t?D(o,e):o,l=r.length-1,h;l>=0;l--)(h=r[l])&&(s=(t?h(o,e,s):h(s))||s);return t&&s&&O(o,e,s),s};var A=(r,o,e)=>{if(!o.has(r))throw TypeError("Cannot "+e)};var u=(r,o,e)=>(A(r,o,"read from private field"),e?e.call(r):o.get(r)),d=(r,o,e)=>{if(o.has(r))throw TypeError("Cannot add the same private member more than once");o instanceof WeakSet?o.add(r):o.set(r,e)};var i=(r,o,e)=>(A(r,o,"access private method"),e);var m,c,a,g,F,E,R,v,H,I,y,p,k,w,M,T,$;import{LitElement as L,html as U}from"lit";import{createRef as q,ref as K}from"lit/directives/ref.js";import{customElement as N,queryAssignedElements as j,state as b}from"lit/decorators.js";import{owSlot as S,owSlotType as C}from"./library/ow.js";import x from"./tree.item.js";import z from"./tree.styles.js";let n=class extends L{constructor(){super();d(this,c);d(this,g);d(this,E);d(this,v);d(this,I);d(this,p);d(this,w);d(this,T);this.privateTabIndex=0;d(this,m,q());this.addEventListener("focusin",i(this,I,y)),this.addEventListener("focusout",i(this,p,k))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("focusin",i(this,I,y)),this.removeEventListener("focusout",i(this,p,k))}firstUpdated(){S(u(this,m).value),C(u(this,m).value,[x])}render(){return U`<div class="component" role="tree" tabindex="${this.privateTabIndex}" @click="${i(this,v,H)}" @keydown="${i(this,w,M)}"><slot @slotchange="${i(this,T,$)}" ${K(u(this,m))}></slot></div>`}selectItem(e){for(const t of this.slotElements)if(e===t)t.setAttribute("selected","true"),this.selectedItem=t;else{t.removeAttribute("selected");const s=t.selectItem(e);s&&(this.selectedItem=s)}this.dispatchEvent(new CustomEvent("item-selected",{bubbles:!0,detail:e}))}};m=new WeakMap,c=new WeakSet,a=function(e){e?.focus(),this.focusedItem=e},g=new WeakSet,F=function(){return[...this.querySelectorAll("glide-core-tree-item")]},E=new WeakSet,R=function(){const e=i(this,g,F).call(this),t=new Set;return e.filter(s=>{const l=s.parentElement?.closest("glide-core-tree-item");return l&&(!l.expanded||t.has(l))&&t.add(s),!t.has(s)})},v=new WeakSet,H=function(e){const t=e.target;if(t.closest("glide-core-tree-item-icon-button")??t.closest("glide-core-tree-item-menu"))return;const s=t.closest("glide-core-tree-item");s&&(s.hasChildTreeItems?s.toggleExpand():this.selectItem(s))},I=new WeakSet,y=function(e){let t;e.target===this?t=this.selectedItem??this.slotElements[0]:e.target instanceof x&&(t=e.target,this.privateTabIndex=-1),i(this,c,a).call(this,t)},p=new WeakSet,k=function(e){const t=e.relatedTarget;(!t||!this.contains(t))&&(this.privateTabIndex=0,this.focusedItem=void 0)},w=new WeakSet,M=function(e){if(!["ArrowRight","ArrowLeft","ArrowDown","ArrowUp","Home","End","Enter"].includes(e.key))return;const t=i(this,E,R).call(this),{focusedItem:s}=this,l=t.findIndex(h=>h.matches(":focus"));if(e.key==="ArrowRight"&&s?.hasChildTreeItems&&(s.expanded?i(this,c,a).call(this,s.slotElements[0]):s.toggleExpand()),e.key==="ArrowLeft")if(s?.expanded)s.toggleExpand();else{const h=s?.parentElement?.closest("glide-core-tree-item");i(this,c,a).call(this,h)}e.key==="ArrowDown"&&l!==-1&&l<t.length-1&&i(this,c,a).call(this,t[l+1]),e.key==="ArrowUp"&&l>0&&i(this,c,a).call(this,t[l-1]),e.key==="Home"&&i(this,c,a).call(this,t[0]),e.key==="End"&&i(this,c,a).call(this,t.at(-1)),e.key==="Enter"&&s&&(s.hasChildTreeItems?s.toggleExpand():this.selectItem(s))},T=new WeakSet,$=function(){S(u(this,m).value),C(u(this,m).value,[x])},n.shadowRootOptions={...L.shadowRootOptions,mode:"closed"},n.styles=z,f([b()],n.prototype,"selectedItem",2),f([b()],n.prototype,"focusedItem",2),f([b()],n.prototype,"privateTabIndex",2),f([j()],n.prototype,"slotElements",2),n=f([N("glide-core-tree")],n);export{n as default};

package/dist/tree.stories.d.ts

@@ -0,0 +1,17 @@
+import './icon-button.js';
+import './icons/storybook.js';
+import './tree.item.icon-button.js';
+import './tree.item.js';
+import './tree.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const Tree: StoryObj;
+export declare const TreeItemDefault: StoryObj;
+export declare const TreeItemSelected: StoryObj;
+export declare const TreeItemWithChildItemsCollapsed: StoryObj;
+export declare const TreeItemWithChildItemsExpanded: StoryObj;
+export declare const TreeItemWithPrefixIcon: StoryObj;
+export declare const TreeItemWithSuffixIconButton: StoryObj;
+export declare const TreeItemWithMenu: StoryObj;
+export declare const TreeItemWithPrefixSuffixAndMenu: StoryObj;

package/dist/tree.styles.d.ts

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

package/dist/tree.styles.js

@@ -0,0 +1,7 @@
+"use strict";import{css as o}from"lit";export default[o`
+    .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);
+    }
+  `];

package/dist/tree.test.aria.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tree.test.basics.d.ts

@@ -0,0 +1,3 @@
+import './tree.item.icon-button.js';
+import './tree.item.js';
+import './tree.js';

package/dist/tree.test.events.d.ts

@@ -0,0 +1,2 @@
+import './tree.item.menu.js';
+import './tree.js';

package/dist/tree.test.focus.d.ts

@@ -0,0 +1 @@
+import './tree.js';