@crowdstrike/glide-core 0.29.2 → 0.30.0

package/dist/dropdown.option.js

@@ -1 +1,536 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(a=(s<3?l(a):s>3?l(t,i,a):l(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./checkbox.js";import"./tooltip.js";import{html,LitElement}from"lit";import{ifDefined}from"lit/directives/if-defined.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{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import{LocalizeController}from"./library/localize.js";import styles from"./dropdown.option.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let DropdownOption=class DropdownOption extends LitElement{constructor(){super(...arguments),this.id=uniqueId(),this.privateActive=!1,this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateIsTooltipOpen=!1,this.privateMultiple=!1,this.role="option",this.tabIndex=-1,this.version=packageJson.version,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#l=createRef(),this.#s=new LocalizeController(this),this.#a=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#r}set label(e){this.#r=e,setTimeout((()=>{this.#d()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get disabled(){return this.#i}set disabled(e){this.#i=e,this.ariaDisabled=e.toString(),this.#e.value?.checked&&e?this.#e.value.checked=!1:this.#e.value&&this.selected&&!e&&(this.#e.value.checked=!0),this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get editable(){return this.#o}set editable(e){this.#o=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get selected(){return this.#a}set selected(e){this.#a=e,this.isMultiple&&this.#e.value&&(this.#e.value.checked=e),this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get value(){return this.#n}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#n=e}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}get lastSelectedAndEnabledOption(){const e=this.parentElement?.querySelectorAll("glide-core-dropdown-option");if(e&&e.length>0)return[...e].findLast((e=>e.selected&&!e.disabled))}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.ariaDisabled=this.disabled.toString(),this.#c=new IntersectionObserver((()=>{this.checkVisibility()&&this.#d()})),this.#c.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#c?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected&&!this.disabled)}privateEdit(){this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-variant="minimal" value="${this.value}" @click="${this.#p}" private-internally-inert ?disabled="${this.disabled}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsTooltipOpen}" ?private-disable-label-tooltip="${this.disabled}" ${ref(this.#e)}><slot class="checkbox-icon-slot" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,multiple:Boolean(this.isMultiple)})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}`),(()=>html`<div class="${classMap({option:!0,count:Boolean(this.count),disabled:this.disabled,editable:this.editable})}"><slot class="${classMap({"icon-slot":!0})}" name="icon"></slot><glide-core-tooltip class="tooltip" data-test="tooltip" label="${ifDefined(this.label)}" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}" screenreader-hidden @toggle="${this.#u}"><div class="label" data-test="label" slot="target" ${ref(this.#l)}>${this.label}</div></glide-core-tooltip>${when(this.selected&&this===this.lastSelectedAndEnabledOption&&!this.disabled,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}</div>`))}</div>`}updated(){this.privateMultiple?this.ariaSelected=!this.disabled&&this.selected?"true":"false":this.ariaSelected=!this.disabled&&this.selected&&this===this.lastSelectedAndEnabledOption?"true":"false"}#e;#t;#c;#i;#o;#r;#l;#s;#a;#n;#p(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#h(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#d(){this.#l.value&&(this.isLabelOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}};__decorate([property({reflect:!0}),required],DropdownOption.prototype,"label",null),__decorate([property({reflect:!0,type:Number})],DropdownOption.prototype,"count",void 0),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"editable",null),__decorate([property({reflect:!0})],DropdownOption.prototype,"id",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateActive",void 0),__decorate([property({attribute:"private-indeterminate",type:Boolean})],DropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],DropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0})],DropdownOption.prototype,"role",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"selected",null),__decorate([property({attribute:"tabindex",reflect:!0,type:Number})],DropdownOption.prototype,"tabIndex",void 0),__decorate([property({reflect:!0})],DropdownOption.prototype,"value",null),__decorate([property({reflect:!0})],DropdownOption.prototype,"version",void 0),__decorate([state()],DropdownOption.prototype,"isMultiple",null),__decorate([state()],DropdownOption.prototype,"lastSelectedAndEnabledOption",null),__decorate([state()],DropdownOption.prototype,"isLabelOverflow",void 0),DropdownOption=__decorate([customElement("glide-core-dropdown-option"),final],DropdownOption);export default DropdownOption;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import './checkbox.js';
+import './tooltip.js';
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.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 { when } from 'lit/directives/when.js';
+import packageJson from '../package.json' with { type: 'json' };
+import checkedIcon from './icons/checked.js';
+import pencilIcon from './icons/pencil.js';
+import { LocalizeController } from './library/localize.js';
+import styles from './dropdown.option.styles.js';
+import shadowRootMode from './library/shadow-root-mode.js';
+import final from './library/final.js';
+import required from './library/required.js';
+import uniqueId from './library/unique-id.js';
+/**
+ * @attr {string} label
+ * @attr {number} [count]
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [editable=false]
+ *
+ * @readonly
+ * @attr {string} [id]
+ *
+ * @readonly
+ * @attr {string} [role='option']
+ *
+ * @attr {boolean} [selected=false]
+ *
+ * @readonly
+ * @attr {number} [tabindex=-1]
+ *
+ * @attr {string} [value='']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element} [icon] - An icon before the label
+ *
+ * @fires {Event} edit
+ */
+let DropdownOption = class DropdownOption extends LitElement {
+    constructor() {
+        super(...arguments);
+        // On the host instead of inside the shadow DOM so screenreaders can find it
+        // when Dropdown uses it with `aria-activedescendant`.
+        this.id = uniqueId();
+        // An option is considered active when it's interacted with via keyboard or
+        // hovered. Used by Dropdown.
+        this.privateActive = false;
+        // Private because it's only meant to be used by Dropdown.
+        this.privateIndeterminate = false;
+        // Private because it's only meant to be used by Dropdown.
+        this.privateIsEditActive = false;
+        this.privateIsTooltipOpen = false;
+        // Private because it's only meant to be used by Dropdown.
+        this.privateMultiple = false;
+        this.role = 'option';
+        this.tabIndex = -1;
+        this.version = packageJson.version;
+        this.isLabelOverflow = false;
+        this.#checkboxElementRef = createRef();
+        this.#componentElementRef = createRef();
+        this.#isDisabled = false;
+        this.#isEditable = false;
+        this.#labelElementRef = createRef();
+        this.#localize = new LocalizeController(this);
+        this.#selected = false;
+        this.#value = '';
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default undefined
+     */
+    get label() {
+        return this.#label;
+    }
+    set label(label) {
+        this.#label = label;
+        // Wait for the label to render. A rerender won't be scheduled by Lit
+        // until after this setter finishes. So awaiting `this.updateComplete`
+        // won't fly.
+        setTimeout(() => {
+            this.#updateLabelOverflow();
+        });
+        this.dispatchEvent(new Event('private-label-change', {
+            bubbles: true,
+        }));
+    }
+    /**
+     * @default false
+     */
+    get disabled() {
+        return this.#isDisabled;
+    }
+    set disabled(isDisabled) {
+        this.#isDisabled = isDisabled;
+        this.ariaDisabled = isDisabled.toString();
+        if (this.#checkboxElementRef.value?.checked && isDisabled) {
+            this.#checkboxElementRef.value.checked = false;
+        }
+        else if (this.#checkboxElementRef.value && this.selected && !isDisabled) {
+            this.#checkboxElementRef.value.checked = true;
+        }
+        this.dispatchEvent(new Event('private-disabled-change', { bubbles: true }));
+    }
+    /**
+     * @default false
+     */
+    get editable() {
+        return this.#isEditable;
+    }
+    set editable(isEditable) {
+        this.#isEditable = isEditable;
+        this.dispatchEvent(new Event('private-editable-change', {
+            bubbles: true,
+        }));
+    }
+    /**
+     * @default false
+     */
+    get selected() {
+        return this.#selected;
+    }
+    set selected(isSelected) {
+        this.#selected = isSelected;
+        if (this.isMultiple && this.#checkboxElementRef.value) {
+            this.#checkboxElementRef.value.checked = isSelected;
+        }
+        this.dispatchEvent(new Event('private-selected-change', { bubbles: true }));
+    }
+    /**
+     * @default ''
+     */
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        // `this.value` can be set programmatically. Dropdown needs to know when that
+        // happens so it can update its own `this.value`.
+        this.dispatchEvent(new CustomEvent('private-value-change', {
+            bubbles: true,
+            // Without knowing what the old value was, Dropdown would be unable to find the
+            // value in its `this.value` array and remove it.
+            detail: {
+                old: this.value,
+                new: value,
+            },
+        }));
+        this.#value = value;
+    }
+    get isMultiple() {
+        // The soonest Dropdown can set `this.privateMultiple` is in its `firstUpdated`.
+        // By then, however, this component has has already completed its initial render.
+        // So we fall sadly back to `this.closest('glide-core-dropdown')`.
+        //
+        // `this.privateMultiple` is still useful fwhen Dropdown's `this.multiple` is set
+        // programmatically.
+        return (this.privateMultiple || this.closest('glide-core-dropdown')?.multiple);
+    }
+    get lastSelectedAndEnabledOption() {
+        const options = this.parentElement?.querySelectorAll('glide-core-dropdown-option');
+        if (options && options.length > 0) {
+            return [...options].findLast((option) => option.selected && !option.disabled);
+        }
+    }
+    click() {
+        if (this.privateMultiple) {
+            this.#checkboxElementRef.value?.click();
+        }
+        else {
+            this.#componentElementRef.value?.click();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.ariaDisabled = this.disabled.toString();
+        // Options are arbitrarily shown and hidden when Dropdown is opened and closed. So
+        // calling `#updateLabelOverflow` in the `label` setter isn't sufficient because
+        // the label's `scrollWidth` and `clientWidth` will both be zero until Dropdown
+        // is open. So, rather than expose a pseudo-private method for Dropdown to call
+        // on open, Dropdown Option simply monitors its own visibility.
+        this.#intersectionObserver = new IntersectionObserver(() => {
+            if (this.checkVisibility()) {
+                this.#updateLabelOverflow();
+            }
+        });
+        this.#intersectionObserver.observe(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#intersectionObserver?.disconnect();
+    }
+    firstUpdated() {
+        if (this.#checkboxElementRef.value) {
+            this.#checkboxElementRef.value.checked = this.selected && !this.disabled;
+        }
+    }
+    privateEdit() {
+        this.dispatchEvent(new Event('edit', { bubbles: true, composed: true }));
+    }
+    async privateUpdateCheckbox() {
+        // Hacky indeed. This is for the case where Dropdown is set programmatically
+        // from a single to a multiselect. `this.isMultiple` is set to `true` but
+        // `this.#checkboxElementRef.value` in the `multiple` setter is `undefined`
+        // because this component hasn't had a chance to rerender. So we wait for it
+        // to rerender then update the checkbox to match `this.selected`. Halp!
+        await this.updateComplete;
+        if (this.#checkboxElementRef.value) {
+            this.#checkboxElementRef.value.checked = this.selected;
+        }
+    }
+    render() {
+        // The linter wants a keyboard handler. There's one on Dropdown itself. It's there
+        // because options aren't focusable and thus don't produce keyboard events when
+        // Dropdown is filterable.
+        return html `<div
+      class=${classMap({
+            component: true,
+            active: this.privateActive,
+            disabled: this.disabled,
+        })}
+      data-test="component"
+      ${ref(this.#componentElementRef)}
+    >
+      ${when(this.isMultiple, () => {
+            return html `
+            <glide-core-checkbox
+              class=${classMap({
+                checkbox: true,
+                editable: this.editable,
+            })}
+              data-test="checkbox"
+              label=${this.label ?? ''}
+              tabindex="-1"
+              private-label-tooltip-offset=${12}
+              private-variant="minimal"
+              value=${this.value}
+              @click=${this.#onCheckboxClick}
+              private-internally-inert
+              ?disabled=${this.disabled}
+              ?indeterminate=${this.privateIndeterminate}
+              ?private-show-label-tooltip=${this.privateIsTooltipOpen}
+              ?private-disable-label-tooltip=${this.disabled}
+              ${ref(this.#checkboxElementRef)}
+            >
+              <slot class="checkbox-icon-slot" name="icon" slot="private-icon">
+                <!--
+                  An icon before the label
+                  @type {Element}
+                -->
+              </slot>
+            </glide-core-checkbox>
+
+            ${when(this.editable, () => {
+                return html `<button
+                aria-label=${this.#localize.term('editOption', 
+                // `this.label` is always defined because it's a required attribute.
+                //
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                this.label)}
+                class=${classMap({
+                    'edit-button': true,
+                    active: this.privateIsEditActive,
+                    count: Boolean(this.count),
+                    disabled: this.disabled,
+                    multiple: Boolean(this.isMultiple),
+                })}
+                data-test="edit-button"
+                type="button"
+                @mouseover=${this.#onEditButtonMouseover}
+                @mouseout=${this.#onEditButtonMouseout}
+              >
+                ${pencilIcon}
+              </button>`;
+            })}
+            ${when(this.count && this.count > 0, () => {
+                return html `<div
+                class=${classMap({
+                    'count-container': true,
+                    disabled: this.disabled,
+                })}
+                data-test="count-container"
+              >
+                ${when(
+                // `this.count` is guaranteed to be defined by the `when()` above.
+                //
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                this.count >= 1000, () => {
+                    return '999+';
+                }, () => {
+                    return this.count;
+                })}
+              </div>`;
+            })}
+          `;
+        }, () => {
+            return html `
+            <div
+              class=${classMap({
+                option: true,
+                count: Boolean(this.count),
+                disabled: this.disabled,
+                editable: this.editable,
+            })}
+            >
+              <slot
+                class=${classMap({
+                'icon-slot': true,
+            })}
+                name="icon"
+              >
+                <!--
+                  An icon before the label
+                  @type {Element}
+                -->
+              </slot>
+
+              <glide-core-tooltip
+                class="tooltip"
+                data-test="tooltip"
+                label=${ifDefined(this.label)}
+                offset=${10}
+                ?disabled=${!this.isLabelOverflow || this.disabled}
+                ?open=${this.privateIsTooltipOpen}
+                screenreader-hidden
+                @toggle=${this.#onTooltipToggle}>
+
+                <div
+                  class="label"
+                  data-test="label"
+                  slot="target"
+                  ${ref(this.#labelElementRef)}
+                >
+                  ${this.label}
+                </div>
+              </glide-core-tooltip>
+
+              ${when(this.selected &&
+                this === this.lastSelectedAndEnabledOption &&
+                !this.disabled, () => {
+                return html `<div
+                    class="checked-icon-container"
+                    data-test="checked-icon-container"
+                  >
+                    ${checkedIcon}
+                  </div>`;
+            })}
+
+              ${when(this.editable, () => {
+                return html `<button
+                  aria-label=${this.#localize.term('editOption', 
+                // `this.label` is always defined because it's a required attribute.
+                //
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                this.label)}
+                  class=${classMap({
+                    'edit-button': true,
+                    active: this.privateActive && this.privateIsEditActive,
+                    count: Boolean(this.count),
+                    disabled: this.disabled,
+                })}
+                  data-test="edit-button"
+                  type="button"
+                  @mouseover=${this.#onEditButtonMouseover}
+                  @mouseout=${this.#onEditButtonMouseout}
+                >
+                  ${pencilIcon}
+                </button>`;
+            })}
+
+              ${when(this.count && this.count > 0, () => {
+                return html `<div
+                  class=${classMap({
+                    'count-container': true,
+                    disabled: this.disabled,
+                })}
+                  data-test="count-container"
+                >
+                  ${when(
+                // `this.count` is guaranteed to be defined by the `when()` above.
+                //
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                this.count >= 1000, () => {
+                    return '999+';
+                }, () => {
+                    return this.count;
+                })}
+                </div>`;
+            })}
+            </div>
+          </div>`;
+        })}
+    </div>`;
+    }
+    updated() {
+        // `this.ariaSelected` needs to be updated whenever `disabled`, `privateMulitple`,
+        // `selected`, or `this.lastSelectedAndEnabledOption` change.
+        //
+        // The logic below could be duplicated and added to each setter. But that wouldn't
+        // account for when `this.lastSelectedAndEnabledOption` is forcibly updated by
+        // Dropdown because another option has been selected or deselected.
+        //
+        // Setting `this.ariaSelected` here ensures `this.ariaSelected` is updated whenever
+        // `this.lastSelectedAndEnabledOption` changes. As a bonus, this logic is
+        // deduplicated.
+        if (this.privateMultiple) {
+            this.ariaSelected = !this.disabled && this.selected ? 'true' : 'false';
+        }
+        else {
+            this.ariaSelected =
+                !this.disabled &&
+                    this.selected &&
+                    this === this.lastSelectedAndEnabledOption
+                    ? 'true'
+                    : 'false';
+        }
+    }
+    #checkboxElementRef;
+    #componentElementRef;
+    #intersectionObserver;
+    #isDisabled;
+    #isEditable;
+    #label;
+    #labelElementRef;
+    #localize;
+    #selected;
+    #value;
+    #onCheckboxClick(event) {
+        // Form controls emit two events when their labels are clicked: one from the
+        // label, another from the control. Letting these events propagate would mean
+        // Dropdown receiving multiple "click" events and thus dispatching multiple
+        // "change" and "input" events.
+        //
+        // This is also why Dropdown listens for "input" when multiselect and "click"
+        // when single-select.
+        event.stopPropagation();
+    }
+    #onEditButtonMouseout() {
+        // A simple `:hover:` selector would be nice. But Dropdown needs to know if the
+        // button is active to decide what to do when the user is arrowing, among other
+        // things.
+        this.privateIsEditActive = false;
+    }
+    #onEditButtonMouseover() {
+        this.privateIsEditActive = true;
+    }
+    #onTooltipToggle(event) {
+        // Dropdown dispatches its own "toggle" event. Letting Tooltip's "toggle"
+        // propagate would mean that consumers listening for the event on Dropdown
+        // would have to filter it out when it comes from Tooltip. But first they'll
+        // probably file a bug. It's likely no consumer will be interested in knowing
+        // when this component's Tooltip is open. So it's probably best to stop the
+        // event from propagating.
+        event.stopPropagation();
+    }
+    #updateLabelOverflow() {
+        if (this.#labelElementRef.value) {
+            this.isLabelOverflow =
+                this.#labelElementRef.value.scrollWidth >
+                    this.#labelElementRef.value.clientWidth;
+        }
+    }
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], DropdownOption.prototype, "label", null);
+__decorate([
+    property({ reflect: true, type: Number })
+], DropdownOption.prototype, "count", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], DropdownOption.prototype, "disabled", null);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], DropdownOption.prototype, "editable", null);
+__decorate([
+    property({ reflect: true })
+], DropdownOption.prototype, "id", void 0);
+__decorate([
+    property({ type: Boolean })
+], DropdownOption.prototype, "privateActive", void 0);
+__decorate([
+    property({ attribute: 'private-indeterminate', type: Boolean })
+], DropdownOption.prototype, "privateIndeterminate", void 0);
+__decorate([
+    property({ type: Boolean })
+], DropdownOption.prototype, "privateIsEditActive", void 0);
+__decorate([
+    property({ type: Boolean })
+], DropdownOption.prototype, "privateIsTooltipOpen", void 0);
+__decorate([
+    property({ attribute: 'private-multiple', type: Boolean })
+], DropdownOption.prototype, "privateMultiple", void 0);
+__decorate([
+    property({ reflect: true })
+], DropdownOption.prototype, "role", void 0);
+__decorate([
+    property({ type: Boolean })
+], DropdownOption.prototype, "selected", null);
+__decorate([
+    property({ attribute: 'tabindex', reflect: true, type: Number })
+], DropdownOption.prototype, "tabIndex", void 0);
+__decorate([
+    property({ reflect: true })
+], DropdownOption.prototype, "value", null);
+__decorate([
+    property({ reflect: true })
+], DropdownOption.prototype, "version", void 0);
+__decorate([
+    state()
+], DropdownOption.prototype, "isMultiple", null);
+__decorate([
+    state()
+], DropdownOption.prototype, "lastSelectedAndEnabledOption", null);
+__decorate([
+    state()
+], DropdownOption.prototype, "isLabelOverflow", void 0);
+DropdownOption = __decorate([
+    customElement('glide-core-dropdown-option'),
+    final
+], DropdownOption);
+export default DropdownOption;

package/dist/dropdown.option.styles.js

@@ -1,4 +1,6 @@
-import{css}from"lit";export default[css`
+import { css } from 'lit';
+export default [
+    css `
     .component {
       align-items: center;
       block-size: var(--private-option-height);
@@ -144,4 +146,5 @@ import{css}from"lit";export default[css`
         color: var(--glide-core-icon-tertiary-disabled);
       }
     }
-  `];
+  `,
+];

package/dist/dropdown.styles.js

@@ -1,9 +1,15 @@
-import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";import skeleton from"./styles/skeleton.js";export default[css`
-    ${opacityAndScaleAnimation(".options-and-feedback:popover-open")}
-    ${skeleton(".loading-feedback")}
-    ${visuallyHidden(".item-count")}
-    ${visuallyHidden(".selected-option-labels")}
-  `,css`
+import { css } from 'lit';
+import opacityAndScaleAnimation from './styles/opacity-and-scale-animation.js';
+import visuallyHidden from './styles/visually-hidden.js';
+import skeleton from './styles/skeleton.js';
+export default [
+    css `
+    ${opacityAndScaleAnimation('.options-and-feedback:popover-open')}
+    ${skeleton('.loading-feedback')}
+    ${visuallyHidden('.item-count')}
+    ${visuallyHidden('.selected-option-labels')}
+  `,
+    css `
     .component {
       --private-min-inline-size: 9.375rem;
 
@@ -385,4 +391,5 @@ import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-s
     .validity-message {
       display: block;
     }
-  `];
+  `,
+];