@exmg/exm-chip-input 1.2.8 → 1.2.9

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

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

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

@@ -30,6 +30,6 @@ export declare class ExmChipInputDropdown extends ChipSet {
     private onMenuClosed;
     private _removeSelected;
     private onKeydown;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private updateTabIndicesOverride;
 }

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

@@ -1,19 +1,33 @@
-import { ChipSet } from '@material/web/chips/internal/chip-set.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'exm-chip-input': ExmChipInput;
-    }
-}
+import { PropertyValues } from 'lit';
+import { ExmChipSet } from './exm-chip-set.js';
 /**
  *
  * @final
  * @suppress {visibility}
  */
-export declare class ExmChipInput extends ChipSet {
+export declare class ExmChipInput extends ExmChipSet {
+    static formAssociated: boolean;
     label: string;
     supportingText: string;
+    required: boolean;
+    value: string;
+    min: number;
+    max?: number;
     chipCount: number;
     static styles: import("lit").CSSResult[];
-    protected render(): import("lit-html").TemplateResult<1>;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    protected firstUpdated(): void;
+    updated(changedProperties: PropertyValues): void;
+    private validate;
+    protected render(): import("lit").TemplateResult<1>;
+    fireChange(name: string): void;
+    valuesToString(): string;
+    onChanges(): void;
     private updateTabIndicesOverride;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-chip-input': ExmChipInput;
+    }
+}

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

@@ -1,24 +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';
+import { ExmChipSet } from './exm-chip-set.js';
 /**
  *
  * @final
  * @suppress {visibility}
  */
-let ExmChipInput = class ExmChipInput extends ChipSet {
+let ExmChipInput = class ExmChipInput extends ExmChipSet {
     constructor() {
         super(...arguments);
         this.label = '';
         this.supportingText = '';
+        this.required = false;
+        this.value = '';
+        this.min = 1;
+        this.max = undefined;
         this.chipCount = 0;
     }
+    checkValidity() {
+        var _a;
+        return (_a = this.internals) === null || _a === void 0 ? void 0 : _a.checkValidity();
+    }
+    reportValidity() {
+        var _a;
+        return (_a = this.internals) === null || _a === void 0 ? void 0 : _a.reportValidity();
+    }
+    firstUpdated() {
+        this.validate();
+    }
+    updated(changedProperties) {
+        var _a;
+        if (changedProperties.has('value')) {
+            (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue(this.value);
+            this.validate();
+        }
+        if (changedProperties.has('required')) {
+            this.validate();
+        }
+    }
+    validate() {
+        var _a, _b, _c;
+        const { chips } = this;
+        this.chipCount = chips.length;
+        let selectedCount = 0;
+        for (const chip of chips) {
+            selectedCount = chip.selected ? selectedCount + 1 : selectedCount;
+        }
+        const isInvalid = this.min && this.max !== undefined && this.max !== 0
+            ? selectedCount < this.min || selectedCount > this.max
+            : selectedCount < this.min;
+        if (isInvalid) {
+            if (this.max && (this.max !== undefined || this.max !== 0) && selectedCount > this.max) {
+                (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setValidity({
+                    rangeOverflow: true,
+                }, `Please select a maximum of ${this.max}`);
+            }
+            else {
+                (_b = this.internals) === null || _b === void 0 ? void 0 : _b.setValidity({
+                    rangeUnderflow: true,
+                }, `Please select a minimum of ${this.min}`);
+            }
+        }
+        else {
+            (_c = this.internals) === null || _c === void 0 ? void 0 : _c.setValidity({});
+        }
+    }
     render() {
         const containerClasses = { 'has-label': !!this.label };
         const labelClasses = { 'not-empty': this.chipCount > 0 };
@@ -27,11 +79,30 @@ let ExmChipInput = class ExmChipInput extends ChipSet {
         <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>
+        <div class="items">
+          <slot @slotchange=${this.updateTabIndicesOverride} @change=${this.onChanges}></slot>
+        </div>
         ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
       </div>
     `;
     }
+    fireChange(name) {
+        this.dispatchEvent(new CustomEvent(name, {
+            detail: this.value,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    valuesToString() {
+        const values = this.chips.map((value) => (value.selected ? value.value : null));
+        return values.filter((value) => value !== null).join();
+    }
+    onChanges() {
+        this.value = this.valuesToString();
+        this.required && this.validate();
+        this.fireChange('change');
+        this.fireChange('input');
+    }
     updateTabIndicesOverride() {
         // The chip that should be focusable is either the chip that currently has
         // focus or the first chip that can be focused.
@@ -59,6 +130,7 @@ let ExmChipInput = class ExmChipInput extends ChipSet {
         }
     }
 };
+ExmChipInput.formAssociated = true;
 ExmChipInput.styles = [styles, sharedChipStyle, style];
 __decorate([
     property({ type: String })
@@ -66,6 +138,18 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'supporting-text' })
 ], ExmChipInput.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExmChipInput.prototype, "required", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ExmChipInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], ExmChipInput.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], ExmChipInput.prototype, "max", void 0);
 __decorate([
     state()
 ], ExmChipInput.prototype, "chipCount", void 0);

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

@@ -0,0 +1,38 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { ExmChipInputDropdown } from './exm-chip-input-dropdown.js';
+import { ExmChipInput } from './exm-chip-input.js';
+import { ExmChip } from './exm-chip.js';
+import './exm-chip-input-dropdown.js';
+import './exm-chip-input.js';
+import '@exmg/exm-form';
+import './exm-chip.js';
+declare const meta: {
+    title: string;
+    tags: string[];
+    render: (args: Partial<ExmChip>) => import("lit").TemplateResult<1>;
+    argTypes: {
+        name: {
+            control: string;
+        };
+        value: {
+            control: "text";
+        };
+        label: {
+            control: "text";
+        };
+        ariaLabel: {
+            control: "text";
+        };
+        required: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+export declare const Chip: StoryObj<ExmChip>;
+export declare const ChipInput: StoryObj<ExmChipInput>;
+export declare const ChipInputDropdown: StoryObj<ExmChipInputDropdown>;
+type ExmChipInputExtended = ExmChipInput & {
+    formSubmit: (e: any) => void;
+};
+export declare const ChipInputValidation: StoryObj<ExmChipInputExtended>;

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

@@ -0,0 +1,139 @@
+import { faker } from '@faker-js/faker';
+import { html } from 'lit';
+import './exm-chip-input-dropdown.js';
+import './exm-chip-input.js';
+import '@exmg/exm-form';
+import './exm-chip.js';
+const supportingText = 'Supporting text option';
+const chipTemplate = (args) => html `
+  <exm-chip
+    name="${args.name || ''}"
+    value="${args.value || ''}"
+    label="${args.label || ''}"
+    aria-label="${args.ariaLabel || ''}"
+    ?required="${args.required}"
+    ?selected="${args.selected}"
+  ></exm-chip>
+`;
+const meta = {
+    title: 'Packages/Chip Input',
+    tags: ['autodocs'],
+    render: chipTemplate,
+    argTypes: {
+        name: { control: 'text' },
+        value: { control: 'text' },
+        label: { control: 'text' },
+        ariaLabel: { control: 'text' },
+        required: { control: 'boolean' },
+    },
+};
+export default meta;
+const lorem = faker.lorem.word();
+export const Chip = {
+    args: {
+        name: lorem,
+        value: lorem,
+        label: lorem,
+        ariaLabel: lorem,
+        required: false,
+    },
+};
+const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+const ChipInputTemplate = (args) => html `
+  <exm-chip-input label="${args.label}" supporting-text="${args.supportingText}"> ${args.children} </exm-chip-input>
+`;
+const selectedWeekDay = faker.number.int({ max: weekdays.length - 1 });
+const days = html `${weekdays.map((d, i) => chipTemplate({
+    name: d.substring(0, 3),
+    value: d.substring(0, 3),
+    label: d.substring(0, 3),
+    ariaLabel: d,
+    selected: i == selectedWeekDay,
+}))}`;
+export const ChipInput = {
+    render: ChipInputTemplate,
+    argTypes: {
+        label: { control: 'text' },
+        supportingText: { control: 'text' },
+    },
+    args: {
+        label: 'Dates (Chip input)',
+        supportingText,
+        children: days,
+    },
+};
+// eslint-disable-next-line prefer-spread
+const fruitsArray = Array.apply(null, Array(5)).map((_unused) => faker.food.fruit());
+const fruits = (preSelected) => html `${fruitsArray.map((f, i) => chipTemplate({
+    name: `${f}-name`,
+    value: f,
+    label: f,
+    ariaLabel: f,
+    selected: i === preSelected,
+}))}`;
+const ChipInputDropdownTemplate = (args) => html `
+  <exm-chip-input-dropdown
+    label="${args.label}"
+    aria-labelledby="fruit-label"
+    dropdown-title="${args.dropdownTitle}"
+    supporting-text="${args.supportingText}"
+  >
+    ${args.children}
+  </exm-chip-input-dropdown>
+`;
+export const ChipInputDropdown = {
+    render: ChipInputDropdownTemplate,
+    argTypes: {
+        label: { control: 'text' },
+        supportingText: { control: 'text' },
+        dropdownTitle: { control: 'text' },
+    },
+    args: {
+        label: 'Preferred Fruit (Chip input dropdown)',
+        dropdownTitle: 'Select fruits',
+        supportingText,
+        children: fruits(1),
+    },
+};
+const ChipInputTemplateWithForm = (args) => html `
+  <exm-form
+    hide-cancel-button
+    submitBtn="valid-submit"
+    @form-success=${args.formSuccess}
+    @form-error=${args.formError}
+    @form-submit-finished=${args.formSubmitFinished}
+    @form-submit=${args.formSubmit}
+    @form-cancel=${args.formCancel}
+  >
+    <form>
+      <exm-chip-input
+        name="fruit"
+        label="${args.label}"
+        supporting-text="${args.supportingText}"
+        min="${args.min}"
+        max="${args.max}"
+        required
+      >
+        ${args.children}
+      </exm-chip-input>
+    </form>
+  </exm-form>
+`;
+export const ChipInputValidation = {
+    render: ChipInputTemplateWithForm,
+    argTypes: {
+        label: { control: 'text' },
+        supportingText: { control: 'text' },
+        min: { control: 'number' },
+        max: { control: 'number' },
+    },
+    args: {
+        min: 2,
+        max: undefined,
+        label: 'Preferred Fruit (min required)',
+        supportingText,
+        children: fruits(-1),
+        formSubmit: (e) => console.log(e),
+    },
+};
+//# sourceMappingURL=exm-chip-input.stories.js.map

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

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import { ExmChip } from './exm-chip.js';
+/**
+ * A chip set component.
+ */
+export declare class ExmChipSet extends LitElement {
+    get chips(): ExmChip[];
+    private readonly childElements;
+    internals: ElementInternals;
+    constructor();
+    protected render(): import("lit").TemplateResult<1>;
+    private handleKeyDown;
+    updateTabIndices(): void;
+}

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

@@ -0,0 +1,121 @@
+import { __decorate } from "tslib";
+import { html, isServer, LitElement } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { ExmChip } from './exm-chip.js';
+/**
+ * A chip set component.
+ */
+export class ExmChipSet extends LitElement {
+    get chips() {
+        return this.childElements.filter((child) => child instanceof ExmChip);
+    }
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+        if (!isServer) {
+            this.addEventListener('focusin', this.updateTabIndices.bind(this));
+            this.addEventListener('update-focus', this.updateTabIndices.bind(this));
+            this.addEventListener('keydown', this.handleKeyDown.bind(this));
+            this.internals.role = 'toolbar';
+        }
+    }
+    render() {
+        return html `<slot @slotchange=${this.updateTabIndices}></slot>`;
+    }
+    handleKeyDown(event) {
+        const isLeft = event.key === 'ArrowLeft';
+        const isRight = event.key === 'ArrowRight';
+        const isHome = event.key === 'Home';
+        const isEnd = event.key === 'End';
+        // Ignore non-navigation keys
+        if (!isLeft && !isRight && !isHome && !isEnd) {
+            return;
+        }
+        const { chips } = this;
+        // Don't try to select another chip if there aren't any.
+        if (chips.length < 2) {
+            return;
+        }
+        // Prevent default interactions, such as scrolling.
+        event.preventDefault();
+        if (isHome || isEnd) {
+            const index = isHome ? 0 : chips.length - 1;
+            chips[index].focus({ trailing: isEnd });
+            this.updateTabIndices();
+            return;
+        }
+        // Check if moving forwards or backwards
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const forwards = isRtl ? isLeft : isRight;
+        const focusedChip = chips.find((chip) => chip.matches(':focus-within'));
+        if (!focusedChip) {
+            // If there is not already a chip focused, select the first or last chip
+            // based on the direction we're traveling.
+            const nextChip = forwards ? chips[0] : chips[chips.length - 1];
+            nextChip.focus({ trailing: !forwards });
+            this.updateTabIndices();
+            return;
+        }
+        const currentIndex = chips.indexOf(focusedChip);
+        let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;
+        // Search for the next sibling that is not disabled to select.
+        // If we return to the host index, there is nothing to select.
+        while (nextIndex !== currentIndex) {
+            if (nextIndex >= chips.length) {
+                // Return to start if moving past the last item.
+                nextIndex = 0;
+            }
+            else if (nextIndex < 0) {
+                // Go to end if moving before the first item.
+                nextIndex = chips.length - 1;
+            }
+            // Check if the next sibling is disabled. If so,
+            // move the index and continue searching.
+            //
+            // Some toolbar items may be focusable when disabled for increased
+            // visibility.
+            const nextChip = chips[nextIndex];
+            if (nextChip.disabled && !nextChip.alwaysFocusable) {
+                if (forwards) {
+                    nextIndex++;
+                }
+                else {
+                    nextIndex--;
+                }
+                continue;
+            }
+            nextChip.focus({ trailing: !forwards });
+            this.updateTabIndices();
+            break;
+        }
+    }
+    updateTabIndices() {
+        // 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;
+        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;
+        }
+    }
+}
+__decorate([
+    queryAssignedElements()
+], ExmChipSet.prototype, "childElements", void 0);
+//# sourceMappingURL=exm-chip-set.js.map

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

@@ -1,14 +1,11 @@
 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>;
+declare const FilterChipBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof FilterChip, import("@material/web/labs/behaviors/focusable.js").Focusable>;
 /**
  *
  * @final
@@ -36,16 +33,8 @@ export declare class ExmChip extends FilterChipBaseClass {
     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>;
+    protected renderPrimaryAction(content: unknown): import("lit").TemplateResult<1>;
     private _handleClick;
-    [createValidator](): ChipValidator;
-    [getValidityAnchor](): HTMLElement;
 }
 export {};

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

@@ -8,17 +8,13 @@ import { styles as selectableStyles } from '@material/web/chips/internal/selecta
 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))));
+const FilterChipBaseClass = mixinFocusable(FilterChip);
 /**
  *
  * @final
@@ -39,12 +35,6 @@ let ExmChip = class ExmChip extends FilterChipBaseClass {
         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;
@@ -61,18 +51,6 @@ let ExmChip = class ExmChip extends FilterChipBaseClass {
          */
         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;
@@ -97,6 +75,11 @@ let ExmChip = class ExmChip extends FilterChipBaseClass {
         // event listener.
         const prevValue = this.selected;
         this.selected = !this.selected;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.selected,
+            bubbles: true,
+            composed: true,
+        }));
         const preventDefault = !redispatchEvent(this, event);
         if (preventDefault) {
             // We should not do `this.selected = !this.selected`, since a client
@@ -106,20 +89,8 @@ let ExmChip = class ExmChip extends FilterChipBaseClass {
             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;
-    }
 };
+_a = CHECKED;
 ExmChip.styles = [sharedStyles, elevatedStyles, trailingIconStyles, selectableStyles, styles];
 __decorate([
     property({ type: Boolean })

package/dist/dropdown/dropdown-container.d.ts

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

package/dist/dropdown/dropdown-container.js

@@ -1,4 +1,4 @@
-import { __decorate } from 'tslib';
+import { __decorate } from '../node_modules/.bun/@rollup_plugin-typescript@12.3.0_8b7a8dd02ef2c96b/node_modules/tslib/tslib.es6.js';
 import { css, LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 

package/dist/exm-chip-input-dropdown.d.ts

@@ -30,6 +30,6 @@ export declare class ExmChipInputDropdown extends ChipSet {
     private onMenuClosed;
     private _removeSelected;
     private onKeydown;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private updateTabIndicesOverride;
 }

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

@@ -1,4 +1,4 @@
-import { __decorate } from 'tslib';
+import { __decorate } from './node_modules/.bun/@rollup_plugin-typescript@12.3.0_8b7a8dd02ef2c96b/node_modules/tslib/tslib.es6.js';
 import { customElement } from 'lit/decorators/custom-element.js';
 import '@material/web/iconbutton/icon-button.js';
 import '@material/web/button/text-button.js';

package/dist/exm-chip-input.d.ts

@@ -1,19 +1,33 @@
-import { ChipSet } from '@material/web/chips/internal/chip-set.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'exm-chip-input': ExmChipInput;
-    }
-}
+import { PropertyValues } from 'lit';
+import { ExmChipSet } from './exm-chip-set.js';
 /**
  *
  * @final
  * @suppress {visibility}
  */
-export declare class ExmChipInput extends ChipSet {
+export declare class ExmChipInput extends ExmChipSet {
+    static formAssociated: boolean;
     label: string;
     supportingText: string;
+    required: boolean;
+    value: string;
+    min: number;
+    max?: number;
     chipCount: number;
     static styles: import("lit").CSSResult[];
-    protected render(): import("lit-html").TemplateResult<1>;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    protected firstUpdated(): void;
+    updated(changedProperties: PropertyValues): void;
+    private validate;
+    protected render(): import("lit").TemplateResult<1>;
+    fireChange(name: string): void;
+    valuesToString(): string;
+    onChanges(): void;
     private updateTabIndicesOverride;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-chip-input': ExmChipInput;
+    }
+}

package/dist/exm-chip-input.js

@@ -1,25 +1,77 @@
-import { __decorate } from 'tslib';
+import { __decorate } from './node_modules/.bun/@rollup_plugin-typescript@12.3.0_8b7a8dd02ef2c96b/node_modules/tslib/tslib.es6.js';
 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 { 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';
+import { ExmChipSet } from './exm-chip-set.js';
 
 /**
  *
  * @final
  * @suppress {visibility}
  */
-let ExmChipInput = class ExmChipInput extends ChipSet {
+let ExmChipInput = class ExmChipInput extends ExmChipSet {
     constructor() {
         super(...arguments);
         this.label = '';
         this.supportingText = '';
+        this.required = false;
+        this.value = '';
+        this.min = 1;
+        this.max = undefined;
         this.chipCount = 0;
     }
+    checkValidity() {
+        var _a;
+        return (_a = this.internals) === null || _a === void 0 ? void 0 : _a.checkValidity();
+    }
+    reportValidity() {
+        var _a;
+        return (_a = this.internals) === null || _a === void 0 ? void 0 : _a.reportValidity();
+    }
+    firstUpdated() {
+        this.validate();
+    }
+    updated(changedProperties) {
+        var _a;
+        if (changedProperties.has('value')) {
+            (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue(this.value);
+            this.validate();
+        }
+        if (changedProperties.has('required')) {
+            this.validate();
+        }
+    }
+    validate() {
+        var _a, _b, _c;
+        const { chips } = this;
+        this.chipCount = chips.length;
+        let selectedCount = 0;
+        for (const chip of chips) {
+            selectedCount = chip.selected ? selectedCount + 1 : selectedCount;
+        }
+        const isInvalid = this.min && this.max !== undefined && this.max !== 0
+            ? selectedCount < this.min || selectedCount > this.max
+            : selectedCount < this.min;
+        if (isInvalid) {
+            if (this.max && (this.max !== undefined || this.max !== 0) && selectedCount > this.max) {
+                (_a = this.internals) === null || _a === void 0 ? void 0 : _a.setValidity({
+                    rangeOverflow: true,
+                }, `Please select a maximum of ${this.max}`);
+            }
+            else {
+                (_b = this.internals) === null || _b === void 0 ? void 0 : _b.setValidity({
+                    rangeUnderflow: true,
+                }, `Please select a minimum of ${this.min}`);
+            }
+        }
+        else {
+            (_c = this.internals) === null || _c === void 0 ? void 0 : _c.setValidity({});
+        }
+    }
     render() {
         const containerClasses = { 'has-label': !!this.label };
         const labelClasses = { 'not-empty': this.chipCount > 0 };
@@ -28,11 +80,30 @@ let ExmChipInput = class ExmChipInput extends ChipSet {
         <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>
+        <div class="items">
+          <slot @slotchange=${this.updateTabIndicesOverride} @change=${this.onChanges}></slot>
+        </div>
         ${this.supportingText ? html `<div class="supporting-text">${this.supportingText}</div>` : nothing}
       </div>
     `;
     }
+    fireChange(name) {
+        this.dispatchEvent(new CustomEvent(name, {
+            detail: this.value,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    valuesToString() {
+        const values = this.chips.map((value) => (value.selected ? value.value : null));
+        return values.filter((value) => value !== null).join();
+    }
+    onChanges() {
+        this.value = this.valuesToString();
+        this.required && this.validate();
+        this.fireChange('change');
+        this.fireChange('input');
+    }
     updateTabIndicesOverride() {
         // The chip that should be focusable is either the chip that currently has
         // focus or the first chip that can be focused.
@@ -60,6 +131,7 @@ let ExmChipInput = class ExmChipInput extends ChipSet {
         }
     }
 };
+ExmChipInput.formAssociated = true;
 ExmChipInput.styles = [styles, sharedChipStyle, style];
 __decorate([
     property({ type: String })
@@ -67,6 +139,18 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'supporting-text' })
 ], ExmChipInput.prototype, "supportingText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], ExmChipInput.prototype, "required", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ExmChipInput.prototype, "value", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], ExmChipInput.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], ExmChipInput.prototype, "max", void 0);
 __decorate([
     state()
 ], ExmChipInput.prototype, "chipCount", void 0);

package/dist/exm-chip-input.stories.d.ts

@@ -0,0 +1,38 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { ExmChipInputDropdown } from './exm-chip-input-dropdown.js';
+import { ExmChipInput } from './exm-chip-input.js';
+import { ExmChip } from './exm-chip.js';
+import './exm-chip-input-dropdown.js';
+import './exm-chip-input.js';
+import '@exmg/exm-form';
+import './exm-chip.js';
+declare const meta: {
+    title: string;
+    tags: string[];
+    render: (args: Partial<ExmChip>) => import("lit").TemplateResult<1>;
+    argTypes: {
+        name: {
+            control: string;
+        };
+        value: {
+            control: "text";
+        };
+        label: {
+            control: "text";
+        };
+        ariaLabel: {
+            control: "text";
+        };
+        required: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+export declare const Chip: StoryObj<ExmChip>;
+export declare const ChipInput: StoryObj<ExmChipInput>;
+export declare const ChipInputDropdown: StoryObj<ExmChipInputDropdown>;
+type ExmChipInputExtended = ExmChipInput & {
+    formSubmit: (e: any) => void;
+};
+export declare const ChipInputValidation: StoryObj<ExmChipInputExtended>;

package/dist/exm-chip-set.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import { ExmChip } from './exm-chip.js';
+/**
+ * A chip set component.
+ */
+export declare class ExmChipSet extends LitElement {
+    get chips(): ExmChip[];
+    private readonly childElements;
+    internals: ElementInternals;
+    constructor();
+    protected render(): import("lit").TemplateResult<1>;
+    private handleKeyDown;
+    updateTabIndices(): void;
+}

package/dist/exm-chip-set.js

@@ -0,0 +1,124 @@
+import { __decorate } from './node_modules/.bun/@rollup_plugin-typescript@12.3.0_8b7a8dd02ef2c96b/node_modules/tslib/tslib.es6.js';
+import { LitElement, isServer, html } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { ExmChip } from './exm-chip.js';
+
+/**
+ * A chip set component.
+ */
+class ExmChipSet extends LitElement {
+    get chips() {
+        return this.childElements.filter((child) => child instanceof ExmChip);
+    }
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+        if (!isServer) {
+            this.addEventListener('focusin', this.updateTabIndices.bind(this));
+            this.addEventListener('update-focus', this.updateTabIndices.bind(this));
+            this.addEventListener('keydown', this.handleKeyDown.bind(this));
+            this.internals.role = 'toolbar';
+        }
+    }
+    render() {
+        return html `<slot @slotchange=${this.updateTabIndices}></slot>`;
+    }
+    handleKeyDown(event) {
+        const isLeft = event.key === 'ArrowLeft';
+        const isRight = event.key === 'ArrowRight';
+        const isHome = event.key === 'Home';
+        const isEnd = event.key === 'End';
+        // Ignore non-navigation keys
+        if (!isLeft && !isRight && !isHome && !isEnd) {
+            return;
+        }
+        const { chips } = this;
+        // Don't try to select another chip if there aren't any.
+        if (chips.length < 2) {
+            return;
+        }
+        // Prevent default interactions, such as scrolling.
+        event.preventDefault();
+        if (isHome || isEnd) {
+            const index = isHome ? 0 : chips.length - 1;
+            chips[index].focus({ trailing: isEnd });
+            this.updateTabIndices();
+            return;
+        }
+        // Check if moving forwards or backwards
+        const isRtl = getComputedStyle(this).direction === 'rtl';
+        const forwards = isRtl ? isLeft : isRight;
+        const focusedChip = chips.find((chip) => chip.matches(':focus-within'));
+        if (!focusedChip) {
+            // If there is not already a chip focused, select the first or last chip
+            // based on the direction we're traveling.
+            const nextChip = forwards ? chips[0] : chips[chips.length - 1];
+            nextChip.focus({ trailing: !forwards });
+            this.updateTabIndices();
+            return;
+        }
+        const currentIndex = chips.indexOf(focusedChip);
+        let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1;
+        // Search for the next sibling that is not disabled to select.
+        // If we return to the host index, there is nothing to select.
+        while (nextIndex !== currentIndex) {
+            if (nextIndex >= chips.length) {
+                // Return to start if moving past the last item.
+                nextIndex = 0;
+            }
+            else if (nextIndex < 0) {
+                // Go to end if moving before the first item.
+                nextIndex = chips.length - 1;
+            }
+            // Check if the next sibling is disabled. If so,
+            // move the index and continue searching.
+            //
+            // Some toolbar items may be focusable when disabled for increased
+            // visibility.
+            const nextChip = chips[nextIndex];
+            if (nextChip.disabled && !nextChip.alwaysFocusable) {
+                if (forwards) {
+                    nextIndex++;
+                }
+                else {
+                    nextIndex--;
+                }
+                continue;
+            }
+            nextChip.focus({ trailing: !forwards });
+            this.updateTabIndices();
+            break;
+        }
+    }
+    updateTabIndices() {
+        // 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;
+        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;
+        }
+    }
+}
+__decorate([
+    queryAssignedElements()
+], ExmChipSet.prototype, "childElements", void 0);
+
+export { ExmChipSet };
+//# sourceMappingURL=exm-chip-set.js.map

package/dist/exm-chip.d.ts

@@ -1,14 +1,11 @@
 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>;
+declare const FilterChipBaseClass: import("@material/web/labs/behaviors/mixin.js").MixinReturn<typeof FilterChip, import("@material/web/labs/behaviors/focusable.js").Focusable>;
 /**
  *
  * @final
@@ -36,16 +33,8 @@ export declare class ExmChip extends FilterChipBaseClass {
     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>;
+    protected renderPrimaryAction(content: unknown): import("lit").TemplateResult<1>;
     private _handleClick;
-    [createValidator](): ChipValidator;
-    [getValidityAnchor](): HTMLElement;
 }
 export {};

package/dist/exm-chip.js

@@ -1,4 +1,4 @@
-import { __decorate } from 'tslib';
+import { __decorate } from './node_modules/.bun/@rollup_plugin-typescript@12.3.0_8b7a8dd02ef2c96b/node_modules/tslib/tslib.es6.js';
 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';
@@ -7,11 +7,7 @@ import { styles as styles$3 } from '@material/web/chips/internal/selectable-styl
 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 { 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 { nothing, html } from 'lit';
@@ -19,7 +15,7 @@ import { nothing, html } from 'lit';
 var _a;
 const CHECKED = Symbol('checked');
 // Separate variable needed for closure.
-const FilterChipBaseClass = mixinConstraintValidation(mixinFormAssociated(mixinElementInternals(mixinFocusable(FilterChip))));
+const FilterChipBaseClass = mixinFocusable(FilterChip);
 /**
  *
  * @final
@@ -40,12 +36,6 @@ let ExmChip = class ExmChip extends FilterChipBaseClass {
         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;
@@ -62,18 +52,6 @@ let ExmChip = class ExmChip extends FilterChipBaseClass {
          */
         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;
@@ -98,6 +76,11 @@ let ExmChip = class ExmChip extends FilterChipBaseClass {
         // event listener.
         const prevValue = this.selected;
         this.selected = !this.selected;
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: this.selected,
+            bubbles: true,
+            composed: true,
+        }));
         const preventDefault = !redispatchEvent(this, event);
         if (preventDefault) {
             // We should not do `this.selected = !this.selected`, since a client
@@ -107,20 +90,8 @@ let ExmChip = class ExmChip extends FilterChipBaseClass {
             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;
-    }
 };
+_a = CHECKED;
 ExmChip.styles = [styles, styles$1, styles$2, styles$3, styles$4];
 __decorate([
     property({ type: Boolean })

package/dist/node_modules/.bun/@rollup_plugin-typescript@12.3.0_8b7a8dd02ef2c96b/node_modules/tslib/tslib.es6.js

@@ -0,0 +1,31 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(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;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __decorate };
+//# sourceMappingURL=tslib.es6.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@exmg/exm-chip-input",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,5 +39,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e1496408e91a3861a0eb532a05ebae18320ac591"
+  "gitHead": "c27c4ffabda0c6a509df58537017af65719d1e57"
 }

package/dist/validator/chip-validator.js

@@ -1,68 +0,0 @@
-import { Validator } from '@material/web/labs/behaviors/validators/validator.js';
-
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * A validator that provides constraint validation that emulates
- * `<input type="checkbox">` validation.
- */
-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,
-        }));
-    }
-}
-
-export { ChipValidator };
-//# sourceMappingURL=chip-validator.js.map