@crowdstrike/glide-core 0.10.0 → 0.12.0

package/dist/textarea.test.validity.js

@@ -42,46 +42,6 @@ it('is invalid if no value and required', async () => {
         ?.querySelector('textarea')
         ?.getAttribute('aria-invalid')).to.equal('true');
 });
-it('is valid when empty and does not exceed `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot
-        ?.querySelector('textarea')
-        ?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('is valid when filled in and does not exceed `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
-    component.focus();
-    await sendKeys({ type: 'abc' });
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot
-        ?.querySelector('textarea')
-        ?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('is invalid when filled in and exceeds `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-textarea maxlength="3"></glide-core-textarea>`);
-    component.focus();
-    await sendKeys({ type: 'value' });
-    expect(component.validity?.valid).to.be.false;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.true;
-    expect(component.checkValidity()).to.be.false;
-    expect(component.reportValidity()).to.be.false;
-    await elementUpdated(component);
-    expect(component.shadowRoot
-        ?.querySelector('textarea')
-        ?.getAttribute('aria-invalid')).to.equal('true');
-});
 it('is valid if no value but required and disabled', async () => {
     const component = await fixture(html `<glide-core-textarea required disabled></glide-core-textarea>`);
     expect(component.validity?.valid).to.be.true;
@@ -166,38 +126,6 @@ it('is valid when `value` is empty and `required` is set to `false` programmatic
         ?.querySelector('textarea')
         ?.getAttribute('aria-invalid')).to.equal('false');
 });
-it('is valid when filled in, disabled, and value exceeds `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-textarea
-      value="value"
-      disabled
-      maxlength="3"
-    ></glide-core-textarea>`);
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot
-        ?.querySelector('textarea')
-        ?.getAttribute('aria-invalid')).to.equal('false');
-});
-it('is valid when filled in, readonly, and value exceeds `maxlength`', async () => {
-    const component = await fixture(html `<glide-core-textarea
-      value="value"
-      readonly
-      maxlength="3"
-    ></glide-core-textarea>`);
-    expect(component.validity?.valid).to.be.true;
-    expect(component.validity?.valueMissing).to.be.false;
-    expect(component.validity?.tooLong).to.be.false;
-    expect(component.checkValidity()).to.be.true;
-    expect(component.reportValidity()).to.be.true;
-    await elementUpdated(component);
-    expect(component.shadowRoot
-        ?.querySelector('textarea')
-        ?.getAttribute('aria-invalid')).to.equal('false');
-});
 it('blurs the textarea and reports validity if `blur` is called', async () => {
     const component = await fixture(html `<glide-core-textarea required></glide-core-textarea>`);
     component.focus();
@@ -210,3 +138,67 @@ it('blurs the textarea and reports validity if `blur` is called', async () => {
     expect(component.shadowRoot?.querySelector('glide-core-private-label')?.error)
         .to.be.true;
 });
+it('sets the validity message with `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.checkValidity()).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.reportValidity()).to.be.false;
+    await elementUpdated(component);
+    expect(component.shadowRoot
+        ?.querySelector('textarea')
+        ?.getAttribute('aria-invalid')).to.equal('true');
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
+    const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    component.setCustomValidity('validity message');
+    component.reportValidity();
+    await elementUpdated(component);
+    component.setCustomValidity('');
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('is invalid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    component.setValidity({ customError: true }, 'validity message');
+    expect(component.validity.valid).to.be.false;
+    await elementUpdated(component);
+    // Like native, the validity message shouldn't display until `reportValidity()` is called.
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+    expect(component.validity?.customError).to.be.true;
+    component.reportValidity();
+    await elementUpdated(component);
+    expect(component.shadowRoot
+        ?.querySelector('textarea')
+        ?.getAttribute('aria-invalid')).to.equal('true');
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.equal('validity message');
+});
+it('is valid when `setValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-textarea label="Label"></glide-core-textarea>`);
+    component.setValidity({ customError: true }, 'validity message');
+    component.setValidity({});
+    await elementUpdated(component);
+    expect(component.validity.valid).to.be.true;
+    expect(component.validity.customError).to.be.false;
+    expect(component.reportValidity()).to.be.true;
+    await elementUpdated(component);
+    expect(component.shadowRoot?.querySelector('[data-test="validity-message"]')
+        ?.textContent).to.be.undefined;
+});
+it('retains existing validity state when `setCustomValidity()` is called', async () => {
+    const component = await fixture(html `<glide-core-textarea label="Label" required></glide-core-textarea>`);
+    component.setCustomValidity('validity message');
+    expect(component.validity?.valid).to.be.false;
+    expect(component.validity?.customError).to.be.true;
+    expect(component.validity?.valueMissing).to.be.true;
+});

package/dist/tooltip.d.ts

@@ -14,7 +14,8 @@ export default class GlideCoreTooltip extends LitElement {
     static styles: import("lit").CSSResult[];
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
-    offset: number;
+    get offset(): number;
+    set offset(offset: number);
     get open(): boolean;
     set open(isOpen: boolean);
     placement?: 'bottom' | 'left' | 'right' | 'top';

package/dist/tooltip.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(a=(s<3?l(a):s>3?l(t,o,a):l(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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{map}from"lit/directives/map.js";import ow,{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.offset=4,this.shortcut=[],this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#i=!1,this.#l=createRef(),this.#s=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,this.open&&!e?this.#r():this.#n()}get open(){return this.#i}set open(e){this.#i=e,e&&!this.disabled?this.#r():this.#n()}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#f),clearTimeout(this.#h)}firstUpdated(){owSlot(this.#t.value),owSlot(this.#s.value),ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#a.value.popover="manual",this.open&&!this.disabled&&this.#r()}render(){return html`<div class="component" data-test="component" @mouseover="${this.#p}" @mouseout="${this.#c}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target" data-test="target" slot="target" @focusin="${this.#d}" @focusout="${this.#m}" @keydown="${this.#u}" ${ref(this.#l)}><slot @slotchange="${this.#v}" ${ref(this.#s)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="#212121"/></svg>`],["right",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="#212121"/></svg>`],["bottom",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="#212121"/></svg>`],["left",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="#212121"/></svg>`]])}</div><span aria-label="${ifDefined(this.disabled?void 0:"Tooltip: ")}"></span><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" @slotchange="${this.#g}" ${ref(this.#t)}></slot><kbd class="${classMap({shortcut:!0,reversed:"left"===this.effectivePlacement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div></div></div>`}#e;#R;#f;#t;#o;#i;#h;#l;#s;#a;#E(){clearTimeout(this.#f)}#n(){this.#a.value?.hidePopover(),this.#R&&this.#R()}#g(){owSlot(this.#t.value)}#d(){this.open=!0}#m(){this.open=!1}#u(e){"Escape"===e.key&&(this.open=!1)}#c(){this.#w(),clearTimeout(this.#h)}#p(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#E(),this.#h=setTimeout((()=>{this.open=!0}),Number(this.#a.value.dataset.openDelay))}#v(){owSlot(this.#s.value)}#w(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#f=setTimeout((()=>{this.open=!1}),Number(this.#a.value.dataset.closeDelay))}#r(){this.disabled||(this.#R?.(),this.#l.value&&this.#a.value&&(this.#R=autoUpdate(this.#l.value,this.#a.value,(()=>{(async()=>{if(this.#l.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:i}=await computePosition(this.#l.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?`${i.arrow.x}px`:null,top:i.arrow?.y?`${i.arrow.y}px`:null}),this.effectivePlacement=o,this.#a.value.showPopover()}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,a=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,l);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement,html}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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{map}from"lit/directives/map.js";import ow,{owSlot}from"./library/ow.js";import styles from"./tooltip.styles.js";let GlideCoreTooltip=class GlideCoreTooltip extends LitElement{constructor(){super(...arguments),this.shortcut=[],this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#l=!1,this.#i=createRef(),this.#s=createRef(),this.#a=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.#o=e,this.open&&!e?this.#r():this.#n()}get offset(){return this.#f??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#f=e}get open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#r():this.#n()}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.#p),clearTimeout(this.#c)}firstUpdated(){owSlot(this.#t.value),owSlot(this.#s.value),ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#a.value.popover="manual",this.open&&!this.disabled&&this.#r()}render(){return html`<div class="component" data-test="component" @mouseover="${this.#h}" @mouseout="${this.#d}"><div aria-labelledby="${ifDefined(this.disabled?void 0:"tooltip")}" class="target" data-test="target" slot="target" @focusin="${this.#m}" @focusout="${this.#u}" @keydown="${this.#v}" ${ref(this.#i)}><slot @slotchange="${this.#g}" ${ref(this.#s)} name="target"></slot></div><div class="${classMap({tooltip:!0,[this.effectivePlacement]:!0})}" id="tooltip" data-test="tooltip" data-open-delay="300" data-close-delay="200" role="${ifDefined(this.disabled?void 0:"tooltip")}" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 5.07814C4.63157 5.55789 5.36843 5.55789 5.76822 5.07813L10 -7.9486e-08L-2.62268e-07 3.57628e-07L4.23178 5.07814Z" fill="currentColor"/></svg>`],["right",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M0.921865 4.23178C0.442111 4.63157 0.442112 5.36843 0.921866 5.76822L6 10L6 -2.62268e-07L0.921865 4.23178Z" fill="currentColor"/></svg>`],["bottom",()=>html`<svg viewBox="0 0 10 6" fill="none"><path d="M4.23178 0.921865C4.63157 0.442111 5.36843 0.442112 5.76822 0.921866L10 6L-2.62268e-07 6L4.23178 0.921865Z" fill="currentColor"/></svg>`],["left",()=>html`<svg viewBox="0 0 6 10" fill="none"><path d="M5.07814 4.23178C5.55789 4.63157 5.55789 5.36843 5.07813 5.76822L-4.37114e-07 10L0 -2.62268e-07L5.07814 4.23178Z" fill="currentColor"/></svg>`]])}</div><span aria-label="${ifDefined(this.disabled?void 0:"Tooltip: ")}"></span><div class="${classMap({content:!0,reversed:"left"===this.effectivePlacement})}"><slot class="default-slot" @slotchange="${this.#R}" ${ref(this.#t)}></slot><kbd class="${classMap({shortcut:!0,reversed:"left"===this.effectivePlacement,visible:this.shortcut.length>0})}" data-test="shortcut">${1===this.shortcut.length?this.shortcut.at(0):map(this.shortcut,((e,t)=>html`<kbd>${e}</kbd> ${t===this.shortcut.length-1?"":" + "}`))}</kbd></div></div></div>`}#e;#w;#p;#t;#o;#l;#f;#c;#i;#s;#a;#E(){clearTimeout(this.#p)}#n(){this.#a.value?.hidePopover(),this.#w&&this.#w()}#R(){owSlot(this.#t.value)}#m(){this.open=!0}#u(){this.open=!1}#v(e){"Escape"===e.key&&(this.open=!1)}#d(){this.#y(),clearTimeout(this.#c)}#h(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#E(),this.#c=setTimeout((()=>{this.open=!0}),Number(this.#a.value.dataset.openDelay))}#g(){owSlot(this.#s.value)}#y(){ow(this.#a.value,ow.object.instanceOf(HTMLElement)),this.#p=setTimeout((()=>{this.open=!1}),Number(this.#a.value.dataset.closeDelay))}#r(){this.disabled||(this.#w?.(),this.#i.value&&this.#a.value&&(this.#w=autoUpdate(this.#i.value,this.#a.value,(()=>{(async()=>{if(this.#i.value&&this.#a.value&&this.#e.value){const{x:e,y:t,placement:o,middlewareData:l}=await computePosition(this.#i.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:20})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${e}px`,top:`${t}px`}),Object.assign(this.#e.value.style,{left:l.arrow?.x?`${l.arrow.x}px`:null,top:l.arrow?.y?`${l.arrow.y}px`:null}),this.effectivePlacement=o,this.#a.value.showPopover()}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCoreTooltip.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreTooltip.prototype,"open",null),__decorate([property()],GlideCoreTooltip.prototype,"placement",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreTooltip.prototype,"shortcut",void 0),__decorate([state()],GlideCoreTooltip.prototype,"effectivePlacement",void 0),GlideCoreTooltip=__decorate([customElement("glide-core-tooltip")],GlideCoreTooltip);export default GlideCoreTooltip;

package/dist/tooltip.styles.js

@@ -80,6 +80,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       --arrow-height: 0.375rem;
       --arrow-width: 0.625rem;
 
+      color: var(--glide-core-surface-base-dark);
       display: flex;
       position: relative;
 
@@ -117,7 +118,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     }
 
     .default-slot {
-      color: var(--glide-core-text-selected);
+      color: var(--glide-core-text-selected-2);
       display: block;
       hyphens: auto;
       max-inline-size: 11.25rem;

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

@@ -21,4 +21,5 @@ export default class GlideCoreTreeItemMenu extends LitElement {
     click(): void;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
+    private hasCustomIcon;
 }

package/dist/tree.item.menu.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var n,r=arguments.length,i=r<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,l);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){ow(this.#t.value,ow.object.instanceOf(GlideCoreIconButton)),this.#t.value.click()}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#o)}><glide-core-menu-options><slot @slotchange="${this.#l}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary" label="${this.label}" ${ref(this.#t)}><svg aria-hidden="true" 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>`}#e;#t;#o;#l(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}};__decorate([property({reflect:!0})],GlideCoreTreeItemMenu.prototype,"placement",void 0),__decorate([property()],GlideCoreTreeItemMenu.prototype,"label",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;
+var __decorate=this&&this.__decorate||function(e,t,o,n){var l,i=arguments.length,r=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var s=e.length-1;s>=0;s--)(l=e[s])&&(r=(i<3?l(r):i>3?l(t,o,r):l(t,o))||r);return i>3&&r&&Object.defineProperty(t,o,r),r};import"./icon-button.js";import"./menu.js";import"./menu.options.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{when}from"lit/directives/when.js";import GlideCoreIconButton from"./icon-button.js";import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./tree.item.menu.styles.js";let GlideCoreTreeItemMenu=class GlideCoreTreeItemMenu extends LitElement{constructor(){super(...arguments),this.placement="bottom-start",this.label="",this.hasCustomIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#n=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}click(){ow(this.#t.value,ow.object.instanceOf(GlideCoreIconButton)),this.#t.value.click()}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}render(){return html`<glide-core-menu class="component" placement="${this.placement}" ${ref(this.#n)}><glide-core-menu-options><slot @slotchange="${this.#l}" ${ref(this.#e)}></slot></glide-core-menu-options><glide-core-icon-button slot="target" variant="tertiary" label="${this.label}" ${ref(this.#t)}><slot name="icon" @slotchange="${this.#i}" ${ref(this.#o)}></slot>${when(!this.hasCustomIcon,(()=>html`<svg aria-hidden="true" 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>`}#e;#t;#o;#n;#l(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreMenuButton,GlideCoreMenuLink])}#i(){const e=this.#o.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([state()],GlideCoreTreeItemMenu.prototype,"hasCustomIcon",void 0),GlideCoreTreeItemMenu=__decorate([customElement("glide-core-tree-item-menu")],GlideCoreTreeItemMenu);export default GlideCoreTreeItemMenu;

package/dist/tree.item.menu.test.basics.js

@@ -1,8 +1,10 @@
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { assert, expect, fixture, html, waitUntil } from '@open-wc/testing';
+import GlideCoreMenu from './menu.js';
 import GlideCoreTreeItemMenu from './tree.item.menu.js';
 import expectArgumentError from './library/expect-argument-error.js';
 import sinon from 'sinon';
 GlideCoreTreeItemMenu.shadowRootOptions.mode = 'open';
+GlideCoreMenu.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-tree-item-menu')).to.equal(GlideCoreTreeItemMenu);
 });
@@ -63,3 +65,22 @@ it('can be opened programmatically', async () => {
         ?.querySelector('glide-core-menu')
         ?.getAttribute('open')).to.equal('');
 });
+it('can set a custom icon', async () => {
+    const component = await fixture(html `
+    <glide-core-tree-item-menu placement="bottom-end">
+      <svg data-test-custom-icon="true" slot="icon"></svg>
+      <glide-core-menu-link label="One" url="/one"> </glide-core-menu-link>
+    </glide-core-tree-item-menu>
+  `);
+    const menu = component.shadowRoot?.querySelector('glide-core-menu');
+    assert(menu);
+    const menuTarget = menu.shadowRoot
+        ?.querySelector('slot[name="target"]')
+        ?.assignedElements()[0];
+    assert(menuTarget);
+    const icon = menuTarget
+        ?.querySelector('slot[name="icon"]')
+        ?.assignedElements()[0];
+    assert(icon instanceof SVGElement);
+    expect(icon.dataset.testCustomIcon).to.equal('true');
+});

package/dist/tree.item.styles.js

@@ -113,10 +113,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       --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,
@@ -127,6 +123,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
     }
 
     .label {
+      margin-inline-end: auto;
       min-inline-size: 0;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -150,7 +147,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
 
     .icon-container {
       display: flex;
-      flex: 1;
-      justify-content: flex-end;
+      gap: var(--glide-core-spacing-xxs);
+      padding-inline: var(--glide-core-spacing-xxs);
     }
   `];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",