@crowdstrike/glide-core 0.12.2 → 0.12.3

package/dist/dropdown.test.interactions.single.js

@@ -9,10 +9,7 @@ GlideCoreDropdown.shadowRootOptions.mode = 'open';
 GlideCoreDropdownOption.shadowRootOptions.mode = 'open';
 it('opens on click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
     // which puts us in a guard in the event handler. `Event` has no `detail` property
@@ -29,10 +26,7 @@ it('opens on click', async () => {
 });
 it('toggles open and closed when the primary button is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
     // which puts us in a guard in the event handler. `Event` has no `detail` property
@@ -48,10 +42,7 @@ it('toggles open and closed when the primary button is clicked', async () => {
 });
 it('does not toggle open and closed when the button overflow text is clicked', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Calling `click()` would be sweet. The problem is it sets `event.detail` to `0`,
     // which puts us in a guard in the event handler. `Event` has no `detail` property
@@ -68,10 +59,7 @@ it('does not toggle open and closed when the button overflow text is clicked', a
 });
 it('selects an option on click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -139,10 +127,7 @@ it('does not deselect options on Space', async () => {
 });
 it('selects an option on Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -153,15 +138,9 @@ it('selects an option on Enter', async () => {
 });
 it('deactivates all other options on "mouseover"', async () => {
     const component = await fixture(html `<glide-core-dropdown open>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const options = component.querySelectorAll('glide-core-dropdown-option');
     options[0]?.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
@@ -171,10 +150,7 @@ it('deactivates all other options on "mouseover"', async () => {
 });
 it('closes when an option is selected via click', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -183,10 +159,7 @@ it('closes when an option is selected via click', async () => {
 });
 it('closes when an option is selected via Space', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -196,10 +169,7 @@ it('closes when an option is selected via Space', async () => {
 });
 it('closes when an option is selected via Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -209,10 +179,7 @@ it('closes when an option is selected via Enter', async () => {
 });
 it('closes when an option is selected via Enter', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -222,10 +189,7 @@ it('closes when an option is selected via Enter', async () => {
 });
 it('closes when an option is selected via Space', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" open>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     // Wait for it to open.
     await aTimeout(0);
@@ -265,19 +229,11 @@ it('deselects all other options when one is newly selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Three"
-        value="three"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Three"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.shadowRoot
         ?.querySelector('[data-test="primary-button"]')
@@ -566,39 +522,25 @@ it('hides Select All', async () => {
     >
       <glide-core-dropdown-option
         label="One"
-        value="one"
         selected
       ></glide-core-dropdown-option>
 
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const selectAll = component.shadowRoot?.querySelector('[data-test="select-all"]');
     expect(selectAll?.checkVisibility()).to.not.be.ok;
 });
 it('cannot be tabbed to when `disabled`', async () => {
     await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" disabled>
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     await sendKeys({ down: 'Tab' });
     expect(document.activeElement).to.equal(document.body);
 });
 it('clicks the primary button when `click()` is called', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const button = component.shadowRoot?.querySelector('[data-test="primary-button"]');
     assert(button);
@@ -614,15 +556,8 @@ it('unhides its options when made unfilterable', async () => {
       placeholder="Placeholder"
       filterable
     >
-      <glide-core-dropdown-option
-        label="One"
-        value="one"
-      ></glide-core-dropdown-option>
-
-      <glide-core-dropdown-option
-        label="Two"
-        value="two"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="One"></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Two"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.focus();
     await sendKeys({ type: 'one' });

package/dist/dropdown.test.validity.js

@@ -7,7 +7,6 @@ it('is valid if not required and no option is selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
         label="Label"
-        value="value"
         selected
       ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
@@ -18,10 +17,7 @@ it('is valid if not required and no option is selected', async () => {
 });
 it('is invalid if required and no option is selected', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder" required>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     expect(component.validity.valid).to.be.false;
     expect(component.validity?.valueMissing).to.be.true;
@@ -35,10 +31,7 @@ it('is invalid if required and no option is selected when `filterable`', async (
       filterable
       required
     >
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     expect(component.validity.valid).to.be.false;
     expect(component.validity?.valueMissing).to.be.true;
@@ -52,10 +45,7 @@ it('is both invalid and valid if required but disabled and no option is selected
       disabled
       required
     >
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     expect(component.validity.valid).to.be.false;
     expect(component.validity?.valueMissing).to.be.true;
@@ -64,10 +54,7 @@ it('is both invalid and valid if required but disabled and no option is selected
 });
 it('sets the validity message with `setCustomValidity()`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label">
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.setCustomValidity('validity message');
     expect(component.validity?.valid).to.be.false;
@@ -84,10 +71,7 @@ it('sets the validity message with `setCustomValidity()`', async () => {
 });
 it('removes a validity message with an empty argument to `setCustomValidity()`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label">
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.setCustomValidity('validity message');
     component.reportValidity();
@@ -99,10 +83,7 @@ it('removes a validity message with an empty argument to `setCustomValidity()`',
 });
 it('is invalid when `setValidity()` is called', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label">
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.setValidity({ customError: true }, 'validity message');
     expect(component.validity.valid).to.be.false;
@@ -118,10 +99,7 @@ it('is invalid when `setValidity()` is called', async () => {
 });
 it('is valid when `setValidity()` is called', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label">
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.setValidity({ customError: true }, 'validity message');
     component.setValidity({});
@@ -135,10 +113,7 @@ it('is valid when `setValidity()` is called', async () => {
 });
 it('sets the validity message with `setCustomValidity()` when `filterable`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.setCustomValidity('validity message');
     expect(component.validity?.valid).to.be.false;
@@ -155,10 +130,7 @@ it('sets the validity message with `setCustomValidity()` when `filterable`', asy
 });
 it('removes a validity message with an empty argument to `setCustomValidity()` when `filterable`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.setCustomValidity('validity message');
     component.reportValidity();
@@ -170,10 +142,7 @@ it('removes a validity message with an empty argument to `setCustomValidity()` w
 });
 it('is invalid when `setValidity()` is called when `filterable`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.setValidity({ customError: true }, 'validity message');
     expect(component.validity.valid).to.be.false;
@@ -189,10 +158,7 @@ it('is invalid when `setValidity()` is called when `filterable`', async () => {
 });
 it('is valid when `setValidity()` is called when `filterable`', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" filterable>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.setValidity({ customError: true }, 'validity message');
     component.setValidity({});
@@ -206,10 +172,7 @@ it('is valid when `setValidity()` is called when `filterable`', async () => {
 });
 it('retains existing validity state when `setCustomValidity()` is called', async () => {
     const component = await fixture(html `<glide-core-dropdown label="Label" required>
-      <glide-core-dropdown-option
-        label="Label"
-        value="value"
-      ></glide-core-dropdown-option>
+      <glide-core-dropdown-option label="Label"></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     component.setCustomValidity('validity message');
     expect(component.validity?.valid).to.be.false;

package/dist/label.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html,svg}from"lit";import{LocalizeController}from"./library/localize.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 ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value);const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#o.value&&this.#o.value.offsetHeight>0)}));this.#o.value&&e.observe(this.#o.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({"tooltips-and-label":!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="tooltips-and-label"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html,svg}from"lit";import{LocalizeController}from"./library/localize.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 ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value);const e=new ResizeObserver((()=>{this.hasDescription=Boolean(this.#o.value&&this.#o.value.offsetHeight>0)}));this.#o.value&&e.observe(this.#o.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="private-tooltips"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary" part="private-control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label")],GlideCoreLabel);export default GlideCoreLabel;

package/dist/label.styles.js

@@ -1,6 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
     ${focusOutline(".optional-tooltip-target:focus-visible ")}
-    ${visuallyHidden(".tooltips-and-label.hidden")}
+    ${visuallyHidden(".tooltips.hidden")}
   `,css`
     .component {
       &.horizontal {
@@ -8,7 +8,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
         column-gap: var(--glide-core-spacing-sm);
         display: grid;
-        grid-template-columns: auto minmax(min-content, 1fr);
+        grid-template-columns: auto minmax(auto, 1fr);
       }
 
       &.vertical {
@@ -32,7 +32,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
-    .tooltips-and-label {
+    .tooltips {
       align-items: center;
       column-gap: var(--glide-core-spacing-xs);
       display: flex;
@@ -129,10 +129,14 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       align-items: center;
       display: flex;
       gap: var(--glide-core-spacing-sm);
+
+      /* https://css-tricks.com/flexbox-truncated-text/#aa-the-solution-is-min-width-0-on-the-flex-child */
+      min-inline-size: 0;
     }
 
     .control {
       display: block;
+      max-inline-size: 100%;
 
       &.summaryless {
         flex-grow: 1;

package/dist/radio-group.styles.js

@@ -30,7 +30,7 @@ import{css}from"lit";export default[css`
       }
     }
 
-    glide-core-private-label::part(tooltips-and-label) {
+    glide-core-private-label::part(private-tooltips) {
       align-items: flex-start;
     }
 

package/dist/tab.group.styles.js

@@ -9,14 +9,8 @@ import{css}from"lit";export default[css`
         box-sizing: border-box;
         display: flex;
         padding-block-end: var(--tabs-padding-block-end);
-
-        /* Better to be explicit with start and end than using the shorthand property */
-        /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
         padding-block-start: var(--tabs-padding-block-start);
         padding-inline-end: var(--tabs-padding-inline-end);
-
-        /* Better to be explicit with start and end than using the shorthand property */
-        /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
         padding-inline-start: var(--tabs-padding-inline-start);
       }
 

package/dist/tab.panel.styles.js

@@ -23,9 +23,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         and it will apply to all child panels for convenience.
       */
       padding-inline-end: var(--panel-padding-inline-end);
-
-      /* Better to be explicit with start and end than using the shorthand property */
-      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
       padding-inline-start: var(--panel-padding-inline-start);
     }
   `];

package/dist/textarea.styles.js

@@ -1,7 +1,7 @@
 import{css,unsafeCSS}from"lit";import visuallyHidden from"./styles/visually-hidden.js";const fieldSizingContent=unsafeCSS("\n  field-sizing: content;\n");export default[css`
     ${visuallyHidden(".character-count .hidden")}
   `,css`
-    glide-core-private-label::part(tooltips-and-label) {
+    glide-core-private-label::part(private-tooltips) {
       align-items: flex-start;
       margin-block-start: var(--glide-core-spacing-sm);
     }

package/package.json

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