@exmg/exm-chip-input 1.1.36 → 1.2.0

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/dropdown/dropdown-container.d.ts

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+export declare class DropdownContainer extends LitElement {
+    dropdownTitle: string;
+    static styles: import("lit").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/dropdown/dropdown-container.js

@@ -0,0 +1,39 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let DropdownContainer = class DropdownContainer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.dropdownTitle = 'Select items';
+    }
+    render() {
+        return html `<div class="container">
+      <div class="label">${this.dropdownTitle}</div>
+      <div class="items"><slot></slot></div>
+    </div>`;
+    }
+};
+DropdownContainer.styles = [
+    css `
+      :host {
+        display: block;
+        padding: 0 1rem 0.5rem;
+      }
+      .label {
+        margin-bottom: 0.5rem;
+      }
+      .items {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.3rem;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], DropdownContainer.prototype, "dropdownTitle", void 0);
+DropdownContainer = __decorate([
+    customElement('dropdown-container')
+], DropdownContainer);
+export { DropdownContainer };
+//# sourceMappingURL=dropdown-container.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/exm-chip-input-dropdown.d.ts

@@ -0,0 +1,35 @@
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/chips/input-chip.js';
+import '@material/web/icon/icon.js';
+import '@material/web/menu/menu.js';
+import './dropdown/dropdown-container.js';
+import { ChipSet } from '@material/web/chips/internal/chip-set.js';
+import { ExmChip } from './exm-chip.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-chip-input-dropdown': ExmChipInputDropdown;
+    }
+}
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class ExmChipInputDropdown extends ChipSet {
+    label: string;
+    dropdownTitle: string;
+    btnAddText: string;
+    selectedChips?: ExmChip[];
+    supportingText: string;
+    private menuOpen;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    private _onSelect;
+    private onOpenClick;
+    private onMenuClosed;
+    private _removeSelected;
+    private onKeydown;
+    protected render(): import("lit-html").TemplateResult<1>;
+    private updateTabIndicesOverride;
+}

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/exm-chip-input-dropdown.js

@@ -0,0 +1,153 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import '@material/web/iconbutton/icon-button.js';
+import '@material/web/button/text-button.js';
+import '@material/web/chips/input-chip.js';
+import '@material/web/icon/icon.js';
+import '@material/web/menu/menu.js';
+import './dropdown/dropdown-container.js';
+import { ChipSet } from '@material/web/chips/internal/chip-set.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { style } from './styles/exm-chip-input-dropdown-css.js';
+import { sharedChipStyle } from './styles/exm-chips-shared-css.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let ExmChipInputDropdown = class ExmChipInputDropdown extends ChipSet {
+    constructor() {
+        super();
+        this.label = '';
+        this.dropdownTitle = 'Select items';
+        this.btnAddText = 'Add items';
+        this.supportingText = '';
+        this.menuOpen = false;
+        // Add event listeners in the constructor
+        this.addEventListener('click', this._onSelect);
+    }
+    _onSelect(e) {
+        const clickedElement = e.target;
+        const elementType = clickedElement.tagName;
+        if (elementType === 'EXM-CHIP') {
+            // @ts-ignore
+            this.selectedChips = this.chips.filter((chip) => chip.selected);
+        }
+    }
+    onOpenClick() {
+        this.menuOpen = true;
+    }
+    onMenuClosed() {
+        this.menuOpen = false;
+    }
+    _removeSelected(val) {
+        const index = (this.selectedChips || []).findIndex((el) => el.value === val);
+        if (index > -1) {
+            (this.selectedChips || []).splice(index, 1); // 2nd parameter means remove one item only
+            // @ts-ignore
+            const chip = this.chips.find((el) => el.value === val);
+            if (chip) {
+                // @ts-ignore
+                chip.selected = false;
+                setTimeout(() => chip.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true })), 0);
+            }
+        }
+    }
+    onKeydown(e) {
+        if (!e.defaultPrevented && e.key === 'Escape') {
+            e.preventDefault();
+            this.menuOpen = false;
+        }
+    }
+    render() {
+        const containerClasses = { 'has-label': !!this.label };
+        const labelClasses = { 'not-empty': (this.selectedChips || []).length > 0, 'has-focus': this.menuOpen };
+        return html `
+      <div class="container ${classMap(containerClasses)}">
+        <div class="background"></div>
+        <div class="label ${classMap(labelClasses)}">${this.label}</div>
+        <div class="input-container" id="input-container" @click="${this.onOpenClick}">
+          <div class="selected-chips">
+            ${repeat(this.selectedChips || [], (chip) => chip.value, (chip) => html `<md-input-chip
+                  label="${chip.label}"
+                  data-value=${chip.value}
+                  selected
+                  @remove=${() => this._removeSelected(chip.value)}
+                ></md-input-chip>`)}
+          </div>
+          <md-menu
+            anchor="input-container"
+            menu-corner="start-start"
+            anchor-corner="end-start"
+            default-focus="none"
+            role="dialog"
+            aria-label="${this.dropdownTitle} controls"
+            .open=${this.menuOpen}
+            @closed=${this.onMenuClosed}
+            @keydown=${this.onKeydown}
+          >
+            <dropdown-container .dropdownTitle=${this.dropdownTitle}
+              ><slot @slotchange=${this.updateTabIndicesOverride}></slot
+            ></dropdown-container>
+          </md-menu>
+        </div>
+        ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
+      </div>
+    `;
+    }
+    updateTabIndicesOverride() {
+        // The chip that should be focusable is either the chip that currently has
+        // focus or the first chip that can be focused.
+        const { chips } = this;
+        // update selected array after dom change
+        // @ts-ignore
+        this.selectedChips = this.chips.filter((chip) => chip.selected);
+        let chipToFocus;
+        for (const chip of chips) {
+            const isChipFocusable = chip.alwaysFocusable || !chip.disabled;
+            const chipIsFocused = chip.matches(':focus-within');
+            if (chipIsFocused && isChipFocusable) {
+                // Found the first chip that is actively focused. This overrides the
+                // first focusable chip found.
+                chipToFocus = chip;
+                continue;
+            }
+            if (isChipFocusable && !chipToFocus) {
+                chipToFocus = chip;
+            }
+            // Disable non-focused chips. If we disable all of them, we'll grant focus
+            // to the first focusable child that was found.
+            chip.tabIndex = -1;
+        }
+        if (chipToFocus) {
+            chipToFocus.tabIndex = 0;
+        }
+    }
+};
+ExmChipInputDropdown.styles = [sharedChipStyle, style];
+__decorate([
+    property({ type: String })
+], ExmChipInputDropdown.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], ExmChipInputDropdown.prototype, "dropdownTitle", void 0);
+__decorate([
+    property({ type: String })
+], ExmChipInputDropdown.prototype, "btnAddText", void 0);
+__decorate([
+    property({ type: Array })
+], ExmChipInputDropdown.prototype, "selectedChips", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], ExmChipInputDropdown.prototype, "supportingText", void 0);
+__decorate([
+    state()
+], ExmChipInputDropdown.prototype, "menuOpen", void 0);
+ExmChipInputDropdown = __decorate([
+    customElement('exm-chip-input-dropdown')
+], ExmChipInputDropdown);
+export { ExmChipInputDropdown };
+//# sourceMappingURL=exm-chip-input-dropdown.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/exm-chip-input.d.ts

@@ -0,0 +1,19 @@
+import { ChipSet } from '@material/web/chips/internal/chip-set.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-chip-input': ExmChipInput;
+    }
+}
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class ExmChipInput extends ChipSet {
+    label: string;
+    supportingText: string;
+    chipCount: number;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit-html").TemplateResult<1>;
+    private updateTabIndicesOverride;
+}

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/exm-chip-input.js

@@ -0,0 +1,76 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators/custom-element.js';
+import { style } from './styles/exm-chip-input-css.js';
+import { ChipSet } from '@material/web/chips/internal/chip-set.js';
+import { styles } from '@material/web/chips/internal/chip-set-styles.js';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { sharedChipStyle } from './styles/exm-chips-shared-css.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let ExmChipInput = class ExmChipInput extends ChipSet {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.supportingText = '';
+        this.chipCount = 0;
+    }
+    render() {
+        const containerClasses = { 'has-label': !!this.label };
+        const labelClasses = { 'not-empty': this.chipCount > 0 };
+        return html `
+      <div class="container ${classMap(containerClasses)}">
+        <div class="background"></div>
+        <div class="state-layer"></div>
+        <div class="label ${classMap(labelClasses)}">${this.label}</div>
+        <div class="items"><slot @slotchange=${this.updateTabIndicesOverride}></slot></div>
+        ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
+      </div>
+    `;
+    }
+    updateTabIndicesOverride() {
+        // The chip that should be focusable is either the chip that currently has
+        // focus or the first chip that can be focused.
+        const { chips } = this;
+        this.chipCount = chips.length;
+        let chipToFocus;
+        for (const chip of chips) {
+            const isChipFocusable = chip.alwaysFocusable || !chip.disabled;
+            const chipIsFocused = chip.matches(':focus-within');
+            if (chipIsFocused && isChipFocusable) {
+                // Found the first chip that is actively focused. This overrides the
+                // first focusable chip found.
+                chipToFocus = chip;
+                continue;
+            }
+            if (isChipFocusable && !chipToFocus) {
+                chipToFocus = chip;
+            }
+            // Disable non-focused chips. If we disable all of them, we'll grant focus
+            // to the first focusable child that was found.
+            chip.tabIndex = -1;
+        }
+        if (chipToFocus) {
+            chipToFocus.tabIndex = 0;
+        }
+    }
+};
+ExmChipInput.styles = [styles, sharedChipStyle, style];
+__decorate([
+    property({ type: String })
+], ExmChipInput.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'supporting-text' })
+], ExmChipInput.prototype, "supportingText", void 0);
+__decorate([
+    state()
+], ExmChipInput.prototype, "chipCount", void 0);
+ExmChipInput = __decorate([
+    customElement('exm-chip-input')
+], ExmChipInput);
+export { ExmChipInput };
+//# sourceMappingURL=exm-chip-input.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/exm-chip.d.ts

@@ -0,0 +1,51 @@
+import { FilterChip } from '@material/web/chips/internal/filter-chip.js';
+import { createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
+import { getFormState, getFormValue } from '@material/web/labs/behaviors/form-associated.js';
+import { ChipValidator } from './validator/chip-validator.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-chip': ExmChip;
+    }
+}
+declare const CHECKED: unique symbol;
+declare const FilterChipBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<import("@material/web/labs/behaviors/mixin.js").MixinReturn<(abstract new (...args: any[]) => import("@material/web/labs/behaviors/element-internals.js").WithElementInternals) & (abstract new (...args: any[]) => import("@material/web/labs/behaviors/focusable.js").Focusable) & typeof FilterChip & import("@material/web/labs/behaviors/form-associated.js").FormAssociatedConstructor, import("@material/web/labs/behaviors/form-associated.js").FormAssociated>, import("@material/web/labs/behaviors/constraint-validation.js").ConstraintValidation>;
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class ExmChip extends FilterChipBaseClass {
+    static styles: import("lit").CSSResult[];
+    removable: boolean;
+    selected: boolean;
+    /**
+     * Whether or not the radio is selected.
+     */
+    get checked(): boolean;
+    set checked(checked: boolean);
+    [CHECKED]: boolean;
+    private selectionController;
+    /**
+     * Whether or not the radio is required. If any radio is required in a group,
+     * all radios are implicitly required.
+     */
+    required: boolean;
+    /**
+     * The element value to use in form submission when checked.
+     */
+    value: string;
+    private readonly container;
+    disabled: boolean;
+    name: string;
+    [getFormValue](): string | null;
+    [getFormState](): string;
+    constructor();
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    protected updated(): void;
+    protected renderPrimaryAction(content: unknown): import("lit-html").TemplateResult<1>;
+    private _handleClick;
+    [createValidator](): ChipValidator;
+    [getValidityAnchor](): HTMLElement;
+}
+export {};

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/exm-chip.js

@@ -0,0 +1,149 @@
+var _a;
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { styles as elevatedStyles } from '@material/web/chips/internal/elevated-styles.js';
+import { FilterChip } from '@material/web/chips/internal/filter-chip.js';
+import { styles } from '@material/web/chips/internal/filter-styles.js';
+import { styles as selectableStyles } from '@material/web/chips/internal/selectable-styles.js';
+import { styles as sharedStyles } from '@material/web/chips/internal/shared-styles.js';
+import { styles as trailingIconStyles } from '@material/web/chips/internal/trailing-icon-styles.js';
+import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
+import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
+import { getFormState, getFormValue, mixinFormAssociated } from '@material/web/labs/behaviors/form-associated.js';
+import { internals, mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
+import { mixinFocusable } from '@material/web/labs/behaviors/focusable.js';
+import { ChipValidator } from './validator/chip-validator.js';
+import { observer } from '@exmg/lit-base';
+import { SelectionController } from './selection-controller.js';
+import { html, nothing } from 'lit';
+const CHECKED = Symbol('checked');
+// Separate variable needed for closure.
+const FilterChipBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(FilterChip))));
+/**
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let ExmChip = class ExmChip extends FilterChipBaseClass {
+    /**
+     * Whether or not the radio is selected.
+     */
+    get checked() {
+        return this[CHECKED];
+    }
+    set checked(checked) {
+        const wasChecked = this.checked;
+        if (wasChecked === checked) {
+            return;
+        }
+        this[CHECKED] = checked;
+        this.requestUpdate('checked', wasChecked);
+    }
+    [(_a = CHECKED, getFormValue)]() {
+        return this.checked ? this.value : null;
+    }
+    [getFormState]() {
+        return String(this.checked);
+    }
+    constructor() {
+        super();
+        this.removable = false;
+        this.selected = false;
+        this[_a] = false;
+        this.selectionController = new SelectionController(this);
+        /**
+         * Whether or not the radio is required. If any radio is required in a group,
+         * all radios are implicitly required.
+         */
+        this.required = false;
+        /**
+         * The element value to use in form submission when checked.
+         */
+        this.value = 'on';
+        this.addController(this.selectionController);
+        this[internals].role = 'radio';
+    }
+    formResetCallback() {
+        // The checked property does not reflect, so the original attribute set by
+        // the user is used to determine the default value.
+        this.checked = this.hasAttribute('checked');
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === 'true';
+    }
+    updated() {
+        this[internals].ariaChecked = String(this.checked);
+    }
+    renderPrimaryAction(content) {
+        const { ariaLabel } = this;
+        return html `
+      <button
+        class="primary action"
+        id="button"
+        aria-label=${ariaLabel || nothing}
+        aria-pressed=${this.selected}
+        ?disabled=${this.disabled && !this.alwaysFocusable}
+        @click=${this._handleClick}
+      >
+        ${content}
+      </button>
+    `;
+    }
+    _handleClick(event) {
+        if (this.disabled) {
+            return;
+        }
+        // Store prevValue to revert in case `chip.selected` is changed during an
+        // event listener.
+        const prevValue = this.selected;
+        this.selected = !this.selected;
+        const preventDefault = !redispatchEvent(this, event);
+        if (preventDefault) {
+            // We should not do `this.selected = !this.selected`, since a client
+            // click listener could change its value. Instead, always revert to the
+            // original value.
+            this.selected = prevValue;
+            return;
+        }
+    }
+    [createValidator]() {
+        return new ChipValidator(() => {
+            if (!this.selectionController) {
+                // Validation runs on superclass construction, so selection controller
+                // might not actually be ready until this class constructs.
+                return [this];
+            }
+            return this.selectionController.controls;
+        });
+    }
+    [getValidityAnchor]() {
+        return this.container;
+    }
+};
+ExmChip.styles = [sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles];
+__decorate([
+    property({ type: Boolean })
+], ExmChip.prototype, "removable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    observer(function (selected) {
+        this.checked = selected;
+    })
+], ExmChip.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmChip.prototype, "checked", null);
+__decorate([
+    property({ type: Boolean })
+], ExmChip.prototype, "required", void 0);
+__decorate([
+    property()
+], ExmChip.prototype, "value", void 0);
+__decorate([
+    query('.container')
+], ExmChip.prototype, "container", void 0);
+ExmChip = __decorate([
+    customElement('exm-chip')
+], ExmChip);
+export { ExmChip };
+//# sourceMappingURL=exm-chip.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ExmChipInput } from './exm-chip-input.js';
+export { ExmChip } from './exm-chip.js';
+export { ExmChipInputDropdown } from './exm-chip-input-dropdown.js';
+export { style as chipInputStyles } from './styles/exm-chip-input-css.js';

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/index.js

@@ -0,0 +1,5 @@
+export { ExmChipInput } from './exm-chip-input.js';
+export { ExmChip } from './exm-chip.js';
+export { ExmChipInputDropdown } from './exm-chip-input-dropdown.js';
+export { style as chipInputStyles } from './styles/exm-chip-input-css.js';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/selection-controller.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { ReactiveController } from 'lit';
+/**
+ * An element that supports single-selection with `SelectionController`.
+ */
+export interface SelectionElement extends HTMLElement {
+    /**
+     * Whether or not the element is selected.
+     */
+    checked: boolean;
+}
+/**
+ * A `ReactiveController` that provides root node-scoped selection for
+ * elements, similar to native `<input type="radio">` selection.
+ *
+ * @example
+ * const CHECKED = Symbol('checked');
+ *
+ * class MyChip extends LitElement {
+ *   @property({ type: Boolean }) removable = false;
+ *
+ *    @property({ type: Boolean, reflect: true })
+ *    @observer(function (this: ExmChip, selected: boolean) {
+ *      this.checked = selected;
+ *    })
+ *    selected = false;
+ *
+ *    @property({ type: Boolean })
+ *    get checked() {
+ *      return this[CHECKED];
+ *    }
+ *    set checked(checked: boolean) {
+ *      const wasChecked = this.checked;
+ *      if (wasChecked === checked) {
+ *        return;
+ *      }
+ *      console.log('checked', checked);
+ *
+ *      this[CHECKED] = checked;
+ *      this.requestUpdate('checked', wasChecked);
+ *    }
+ *
+ *    [CHECKED] = false;
+ *
+ *    private selectionController = new SelectionController(this);
+ *
+ *    constructor() {
+ *      super();
+ *      this.addController(this.selectionController);
+ *    }
+ * }
+ */
+export declare class SelectionController implements ReactiveController {
+    private readonly host;
+    /**
+     * All selection elements in the host element's root with the same
+     * `name` attribute, including the host element.
+     */
+    get controls(): [SelectionElement, ...SelectionElement[]];
+    private root;
+    constructor(host: SelectionElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+}

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/selection-controller.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * A `ReactiveController` that provides root node-scoped selection for
+ * elements, similar to native `<input type="radio">` selection.
+ *
+ * @example
+ * const CHECKED = Symbol('checked');
+ *
+ * class MyChip extends LitElement {
+ *   @property({ type: Boolean }) removable = false;
+ *
+ *    @property({ type: Boolean, reflect: true })
+ *    @observer(function (this: ExmChip, selected: boolean) {
+ *      this.checked = selected;
+ *    })
+ *    selected = false;
+ *
+ *    @property({ type: Boolean })
+ *    get checked() {
+ *      return this[CHECKED];
+ *    }
+ *    set checked(checked: boolean) {
+ *      const wasChecked = this.checked;
+ *      if (wasChecked === checked) {
+ *        return;
+ *      }
+ *      console.log('checked', checked);
+ *
+ *      this[CHECKED] = checked;
+ *      this.requestUpdate('checked', wasChecked);
+ *    }
+ *
+ *    [CHECKED] = false;
+ *
+ *    private selectionController = new SelectionController(this);
+ *
+ *    constructor() {
+ *      super();
+ *      this.addController(this.selectionController);
+ *    }
+ * }
+ */
+export class SelectionController {
+    /**
+     * All selection elements in the host element's root with the same
+     * `name` attribute, including the host element.
+     */
+    get controls() {
+        const name = this.host.getAttribute('name');
+        if (!name || !this.root || !this.host.isConnected) {
+            return [this.host];
+        }
+        // Cast as unknown since there is not enough information for typescript to
+        // know that there is always at least one element (the host).
+        return Array.from(this.root.querySelectorAll(`[name="${name}"]`));
+    }
+    constructor(host) {
+        this.host = host;
+        // eslint-disable-next-line no-undef
+        this.root = null;
+    }
+    hostConnected() {
+        // eslint-disable-next-line no-undef
+        this.root = this.host.getRootNode();
+    }
+    hostDisconnected() {
+        this.root = null;
+    }
+}
+//# sourceMappingURL=selection-controller.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/styles/exm-chip-input-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/styles/exm-chip-input-css.js

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+  }
+
+  .container {
+    overflow: hidden;
+  }
+
+  .items {
+    grid-area: 2/1/3/2;
+    padding: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+  }
+`;
+//# sourceMappingURL=exm-chip-input-css.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/styles/exm-chip-input-dropdown-css.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit").CSSResult;

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/styles/exm-chip-input-dropdown-css.js

@@ -0,0 +1,20 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    display: block;
+  }
+
+  .input-container {
+    grid-area: 2/1/3/2;
+    position: relative;
+    min-height: 32px;
+    padding: 16px;
+  }
+
+  .selected-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.3rem;
+  }
+`;
+//# sourceMappingURL=exm-chip-input-dropdown-css.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/styles/exm-chips-shared-css.d.ts

@@ -0,0 +1 @@
+export declare const sharedChipStyle: import("lit").CSSResult;

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/styles/exm-chips-shared-css.js

@@ -0,0 +1,77 @@
+import { css } from 'lit';
+export const sharedChipStyle = css `
+  .container {
+    display: grid;
+    grid-template-rows: 0px auto auto;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+  }
+
+  .container.has-label {
+    grid-template-rows: 2rem auto auto;
+  }
+
+  .background {
+    grid-area: 1/1/3/2;
+  }
+
+  .background {
+    background-color: var(--editor-code-background-color, var(--md-sys-color-surface-container-highest));
+    border-bottom: 1px solid var(--editor-border-color-focus, var(--md-sys-color-primary));
+    border-top-right-radius: inherit;
+    border-top-left-radius: inherit;
+  }
+
+  .container:hover .state-layer {
+    background-color: var(--editor-code-background-focus-color, var(--md-sys-color-on-surface-variant));
+    border-top-right-radius: inherit;
+    border-top-left-radius: inherit;
+    opacity: 0.08;
+  }
+
+  .label {
+    grid-area: 1/1/2/2;
+    font-size: 1rem;
+    padding: 0.5rem 0 0 1rem;
+    transition: all 200ms ease;
+    transform: scale(1) translateY(0px);
+  }
+
+  .label.has-focus {
+    color: var(--editor-label-focus-color, var(--md-sys-color-primary));
+  }
+
+  .label.has-focus,
+  .label.not-empty {
+    padding: 0.5rem 0 0 1rem;
+    font-size: 0.7rem;
+    transition: all 200ms ease;
+    transform: scale(1) translateY(0px);
+  }
+
+  .supporting-text {
+    grid-area: 3/1/4/2;
+
+    color: var(--md-filled-field-supporting-text-color, var(--md-sys-color-on-surface-variant, #49454f));
+    display: flex;
+    font-family: var(
+      --md-filled-field-supporting-text-font,
+      var(--md-sys-typescale-body-small-font, var(--md-ref-typeface-plain, Roboto))
+    );
+    font-size: var(--md-filled-field-supporting-text-size, var(--md-sys-typescale-body-small-size, 0.75rem));
+    line-height: var(
+      --md-filled-field-supporting-text-line-height,
+      var(--md-sys-typescale-body-small-line-height, 1rem)
+    );
+    font-weight: var(
+      --md-filled-field-supporting-text-weight,
+      var(--md-sys-typescale-body-small-weight, var(--md-ref-typeface-weight-regular, 400))
+    );
+    gap: 16px;
+    justify-content: space-between;
+    padding-inline-start: var(--md-filled-field-supporting-text-leading-space, 16px);
+    padding-inline-end: var(--md-filled-field-supporting-text-trailing-space, 16px);
+    padding-top: var(--md-filled-field-supporting-text-top-space, 4px);
+  }
+`;
+//# sourceMappingURL=exm-chips-shared-css.js.map

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/validator/chip-validator.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
+/**
+ * Constraint validation properties for a checkbox.
+ */
+export interface ChipState {
+    /**
+     * Whether the checkbox is checked.
+     */
+    readonly checked: boolean;
+    /**
+     * Whether the checkbox is required.
+     */
+    readonly required: boolean;
+}
+/**
+ * Radio constraint validation properties for a single radio and its siblings.
+ */
+export type ChipGroupState = readonly [ChipState, ...ChipState[]];
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="checkbox">` validation.
+ */
+export declare class ChipValidator extends Validator<ChipGroupState> {
+    private radioElement?;
+    protected computeValidity(states: ChipGroupState): {
+        validity: {
+            valueMissing: boolean;
+        };
+        validationMessage: string;
+    };
+    protected equals(prevGroup: ChipGroupState, nextGroup: ChipGroupState): boolean;
+    protected copy(states: ChipGroupState): ChipGroupState;
+}

package/.rollup.cache/root/repo/packages/exm-chip-input/dist/validator/chip-validator.js

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
+/**
+ * A validator that provides constraint validation that emulates
+ * `<input type="checkbox">` validation.
+ */
+export class ChipValidator extends Validator {
+    computeValidity(states) {
+        if (!this.radioElement) {
+            // Lazily create the radio element
+            this.radioElement = document.createElement('input');
+            this.radioElement.type = 'radio';
+            // A name is required for validation to run
+            this.radioElement.name = 'group';
+        }
+        let isRequired = false;
+        let isChecked = false;
+        for (const { checked, required } of states) {
+            if (required) {
+                isRequired = true;
+            }
+            if (checked) {
+                isChecked = true;
+            }
+        }
+        // Firefox v119 doesn't compute grouped radio validation correctly while
+        // they are detached from the DOM, which is why we don't render multiple
+        // virtual <input>s. Instead, we can check the required/checked states and
+        // grab the i18n'd validation message if the value is missing.
+        this.radioElement.checked = isChecked;
+        this.radioElement.required = isRequired;
+        return {
+            validity: {
+                valueMissing: isRequired && !isChecked,
+            },
+            validationMessage: this.radioElement.validationMessage,
+        };
+    }
+    equals(prevGroup, nextGroup) {
+        if (prevGroup.length !== nextGroup.length) {
+            return false;
+        }
+        for (let i = 0; i < prevGroup.length; i++) {
+            const prev = prevGroup[i];
+            const next = nextGroup[i];
+            if (prev.checked !== next.checked || prev.required !== next.required) {
+                return false;
+            }
+        }
+        return true;
+    }
+    copy(states) {
+        // Cast as unknown since typescript does not have enough information to
+        // infer that the array always has at least one element.
+        return states.map(({ checked, required }) => ({
+            checked,
+            required,
+        }));
+    }
+}
+//# sourceMappingURL=chip-validator.js.map

package/dist/dropdown/dropdown-container.js

@@ -1,6 +1,7 @@
-import { __decorate } from "tslib";
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { __decorate } from 'tslib';
+import { css, LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+
 let DropdownContainer = class DropdownContainer extends LitElement {
     constructor() {
         super(...arguments);
@@ -35,5 +36,6 @@ __decorate([
 DropdownContainer = __decorate([
     customElement('dropdown-container')
 ], DropdownContainer);
+
 export { DropdownContainer };
-//# sourceMappingURL=dropdown-container.js.map
+//# sourceMappingURL=dropdown-container.js.map

package/dist/exm-chip-input-dropdown.js

@@ -1,4 +1,4 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { customElement } from 'lit/decorators/custom-element.js';
 import '@material/web/iconbutton/icon-button.js';
 import '@material/web/button/text-button.js';
@@ -7,12 +7,13 @@ import '@material/web/icon/icon.js';
 import '@material/web/menu/menu.js';
 import './dropdown/dropdown-container.js';
 import { ChipSet } from '@material/web/chips/internal/chip-set.js';
-import { html, nothing } from 'lit';
+import { nothing, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { style } from './styles/exm-chip-input-dropdown-css.js';
 import { sharedChipStyle } from './styles/exm-chips-shared-css.js';
 import { classMap } from 'lit/directives/class-map.js';
+
 /**
  *
  * @final
@@ -149,5 +150,6 @@ __decorate([
 ExmChipInputDropdown = __decorate([
     customElement('exm-chip-input-dropdown')
 ], ExmChipInputDropdown);
+
 export { ExmChipInputDropdown };
-//# sourceMappingURL=exm-chip-input-dropdown.js.map
+//# sourceMappingURL=exm-chip-input-dropdown.js.map

package/dist/exm-chip-input.js

@@ -1,12 +1,13 @@
-import { __decorate } from "tslib";
+import { __decorate } from 'tslib';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { style } from './styles/exm-chip-input-css.js';
 import { ChipSet } from '@material/web/chips/internal/chip-set.js';
 import { styles } from '@material/web/chips/internal/chip-set-styles.js';
-import { html, nothing } from 'lit';
+import { nothing, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { sharedChipStyle } from './styles/exm-chips-shared-css.js';
 import { classMap } from 'lit/directives/class-map.js';
+
 /**
  *
  * @final
@@ -72,5 +73,6 @@ __decorate([
 ExmChipInput = __decorate([
     customElement('exm-chip-input')
 ], ExmChipInput);
+
 export { ExmChipInput };
-//# sourceMappingURL=exm-chip-input.js.map
+//# sourceMappingURL=exm-chip-input.js.map

package/dist/exm-chip.js

@@ -1,21 +1,22 @@
-var _a;
-import { __decorate } from "tslib";
-import { customElement, property, query } from 'lit/decorators.js';
-import { styles as elevatedStyles } from '@material/web/chips/internal/elevated-styles.js';
+import { __decorate } from 'tslib';
+import { property, query, customElement } from 'lit/decorators.js';
+import { styles as styles$1 } from '@material/web/chips/internal/elevated-styles.js';
 import { FilterChip } from '@material/web/chips/internal/filter-chip.js';
-import { styles } from '@material/web/chips/internal/filter-styles.js';
-import { styles as selectableStyles } from '@material/web/chips/internal/selectable-styles.js';
-import { styles as sharedStyles } from '@material/web/chips/internal/shared-styles.js';
-import { styles as trailingIconStyles } from '@material/web/chips/internal/trailing-icon-styles.js';
+import { styles as styles$4 } from '@material/web/chips/internal/filter-styles.js';
+import { styles as styles$3 } from '@material/web/chips/internal/selectable-styles.js';
+import { styles } from '@material/web/chips/internal/shared-styles.js';
+import { styles as styles$2 } from '@material/web/chips/internal/trailing-icon-styles.js';
 import { redispatchEvent } from '@material/web/internal/events/redispatch-event.js';
-import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '@material/web/labs/behaviors/constraint-validation.js';
-import { getFormState, getFormValue, mixinFormAssociated } from '@material/web/labs/behaviors/form-associated.js';
-import { internals, mixinElementInternals } from '@material/web/labs/behaviors/element-internals.js';
+import { mixinConstraintValidation, createValidator, getValidityAnchor } from '@material/web/labs/behaviors/constraint-validation.js';
+import { mixinFormAssociated, getFormValue, getFormState } from '@material/web/labs/behaviors/form-associated.js';
+import { mixinElementInternals, internals } from '@material/web/labs/behaviors/element-internals.js';
 import { mixinFocusable } from '@material/web/labs/behaviors/focusable.js';
 import { ChipValidator } from './validator/chip-validator.js';
 import { observer } from '@exmg/lit-base';
 import { SelectionController } from './selection-controller.js';
-import { html, nothing } from 'lit';
+import { nothing, html } from 'lit';
+
+var _a;
 const CHECKED = Symbol('checked');
 // Separate variable needed for closure.
 const FilterChipBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(FilterChip))));
@@ -120,7 +121,7 @@ let ExmChip = class ExmChip extends FilterChipBaseClass {
         return this.container;
     }
 };
-ExmChip.styles = [sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles];
+ExmChip.styles = [styles, styles$1, styles$2, styles$3, styles$4];
 __decorate([
     property({ type: Boolean })
 ], ExmChip.prototype, "removable", void 0);
@@ -145,5 +146,6 @@ __decorate([
 ExmChip = __decorate([
     customElement('exm-chip')
 ], ExmChip);
+
 export { ExmChip };
-//# sourceMappingURL=exm-chip.js.map
+//# sourceMappingURL=exm-chip.js.map

package/dist/index.js

@@ -2,4 +2,4 @@ export { ExmChipInput } from './exm-chip-input.js';
 export { ExmChip } from './exm-chip.js';
 export { ExmChipInputDropdown } from './exm-chip-input-dropdown.js';
 export { style as chipInputStyles } from './styles/exm-chip-input-css.js';
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/selection-controller.js

@@ -44,7 +44,7 @@
  *    }
  * }
  */
-export class SelectionController {
+class SelectionController {
     /**
      * All selection elements in the host element's root with the same
      * `name` attribute, including the host element.
@@ -71,4 +71,6 @@ export class SelectionController {
         this.root = null;
     }
 }
-//# sourceMappingURL=selection-controller.js.map
+
+export { SelectionController };
+//# sourceMappingURL=selection-controller.js.map

package/dist/styles/exm-chip-input-css.js

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const style = css `
+
+const style = css `
   :host {
     display: block;
   }
@@ -16,4 +17,6 @@ export const style = css `
     gap: 0.3rem;
   }
 `;
-//# sourceMappingURL=exm-chip-input-css.js.map
+
+export { style };
+//# sourceMappingURL=exm-chip-input-css.js.map

package/dist/styles/exm-chip-input-dropdown-css.js

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const style = css `
+
+const style = css `
   :host {
     display: block;
   }
@@ -17,4 +18,6 @@ export const style = css `
     gap: 0.3rem;
   }
 `;
-//# sourceMappingURL=exm-chip-input-dropdown-css.js.map
+
+export { style };
+//# sourceMappingURL=exm-chip-input-dropdown-css.js.map

package/dist/styles/exm-chips-shared-css.js

@@ -1,5 +1,6 @@
 import { css } from 'lit';
-export const sharedChipStyle = css `
+
+const sharedChipStyle = css `
   .container {
     display: grid;
     grid-template-rows: 0px auto auto;
@@ -74,4 +75,6 @@ export const sharedChipStyle = css `
     padding-top: var(--md-filled-field-supporting-text-top-space, 4px);
   }
 `;
-//# sourceMappingURL=exm-chips-shared-css.js.map
+
+export { sharedChipStyle };
+//# sourceMappingURL=exm-chips-shared-css.js.map

package/dist/validator/chip-validator.js

@@ -1,14 +1,15 @@
+import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
+
 /**
  * @license
  * Copyright 2023 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
 /**
  * A validator that provides constraint validation that emulates
  * `<input type="checkbox">` validation.
  */
-export class ChipValidator extends Validator {
+class ChipValidator extends Validator {
     computeValidity(states) {
         if (!this.radioElement) {
             // Lazily create the radio element
@@ -62,4 +63,6 @@ export class ChipValidator extends Validator {
         }));
     }
 }
-//# sourceMappingURL=chip-validator.js.map
+
+export { ChipValidator };
+//# sourceMappingURL=chip-validator.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-chip-input",
-  "version": "1.1.36",
+  "version": "1.2.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0fb4c4b7fdbc8d149a825e172b63f7e00c8e8a4a"
+  "gitHead": "b5f4ed4f41d79e3cce85dc0c44181ef4413d7458"
 }