@limetech/lime-elements 40.1.0 → 40.2.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [40.2.0](https://github.com/Lundalogik/lime-elements/compare/v40.1.1...v40.2.0) (2026-09-07)
+
+### Features
+
+
+* **button-group:** support disabling individual buttons ([3fa1726](https://github.com/Lundalogik/lime-elements/commit/3fa1726c6ea8613ad53732d6fdc4ab1d786711d6))
+
+## [40.1.1](https://github.com/Lundalogik/lime-elements/compare/v40.1.0...v40.1.1) (2026-09-07)
+
+### Bug Fixes
+
+
+* **picker:** clear the search query when an item is picked ([7692e87](https://github.com/Lundalogik/lime-elements/commit/7692e872e9cad63120349966013cac874437ac0a))
+
 ## [40.1.0](https://github.com/Lundalogik/lime-elements/compare/v40.0.3...v40.1.0) (2026-09-04)
 
 ### Features

package/dist/cjs/limel-button-group.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DYg_7kkT.js');
 var randomString = require('./random-string-BTzDB2ee.js');
 
-const buttonGroupCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limel-button-group){display:flex;box-sizing:border-box;align-items:center;border-radius:3.75rem;background-color:var(--button-group-background-color, rgb(var(--contrast-400)));width:max-content;max-width:100%;flex-wrap:nowrap}:host([disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}.button{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.button:hover,.button:focus,.button:focus-visible{will-change:color, background-color, box-shadow, transform}.button:hover,.button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.button:hover{box-shadow:var(--button-shadow-hovered)}.button:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.button:hover,.button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button:has(input[disabled]):hover{box-shadow:none;transform:none}.button{position:relative;display:inline-grid;grid-auto-flow:column;align-items:center;max-width:100%;min-width:2rem;height:2rem;padding:0 0.0625rem;margin:0.125rem;border-radius:1rem;font-size:var(--limel-theme-default-font-size);user-select:none}.button:not(:last-child):after{content:"";display:block;height:1rem;width:0.125rem;border-radius:0.25rem;background-color:var(--button-group-text-color, rgb(var(--contrast-1200)));opacity:0.1;position:absolute;right:-0.1875rem;top:0;bottom:0;margin:auto}.button label{cursor:pointer;transition:color 0.2s ease;display:flex;align-items:center;flex:1;height:100%;min-width:0}.button label:has(>limel-badge) .button__label{padding-right:0.25rem}.button input[type=radio]{position:absolute;width:0;opacity:0}.button input[type=radio]:focus-visible+label:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3.75rem;box-shadow:var(--shadow-depth-8-focused)}.button:focus-within{outline:none;color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button:only-child .button__label{padding-left:0.75rem}.button:first-child .button__label{padding-left:0.75rem}.button.button--selected{background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset);color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button.button--selected:active{box-shadow:var(--button-shadow-inset-pressed)}.button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-small-font-size);padding:0 0.75rem}.button__icon{border-radius:50%;vertical-align:middle}limel-badge{margin-right:0.25rem;pointer-events:none}.button:not(.button--selected){--badge-background-color:rgb(var(--contrast-200))}`;
+const buttonGroupCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limel-button-group){display:flex;box-sizing:border-box;align-items:center;border-radius:3.75rem;background-color:var(--button-group-background-color, rgb(var(--contrast-400)));width:max-content;max-width:100%;flex-wrap:nowrap}.button{color:var(--limel-theme-on-surface-color)}.button:not(:has(:disabled)){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.button:not(:has(:disabled)):hover,.button:not(:has(:disabled)):focus,.button:not(:has(:disabled)):focus-visible{will-change:color, background-color, box-shadow, transform}.button:not(:has(:disabled)):hover,.button:not(:has(:disabled)):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.button:not(:has(:disabled)):hover{box-shadow:var(--button-shadow-hovered)}.button:not(:has(:disabled)):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.button:not(:has(:disabled)):hover,.button:not(:has(:disabled)):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button{position:relative;display:inline-grid;grid-auto-flow:column;align-items:center;max-width:100%;min-width:2rem;height:2rem;padding:0 0.0625rem;margin:0.125rem;border-radius:1rem;font-size:var(--limel-theme-default-font-size);user-select:none}.button:not(:last-child):after{content:"";display:block;height:1rem;width:0.125rem;border-radius:0.25rem;background-color:var(--button-group-text-color, rgb(var(--contrast-1200)));opacity:0.1;position:absolute;right:-0.1875rem;top:0;bottom:0;margin:auto}.button label{cursor:pointer;transition:color 0.2s ease;display:flex;align-items:center;flex:1;height:100%;min-width:0}.button label:has(>limel-badge) .button__label{padding-right:0.25rem}.button:has(:disabled) label{cursor:not-allowed;opacity:0.4}.button input[type=radio]{position:absolute;width:0;opacity:0}.button input[type=radio]:focus-visible+label:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3.75rem;box-shadow:var(--shadow-depth-8-focused)}.button:focus-within{outline:none;color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button:only-child .button__label{padding-left:0.75rem}.button:first-child .button__label{padding-left:0.75rem}.button.button--selected{background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset);color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button.button--selected:not(:has(:disabled)):active{box-shadow:var(--button-shadow-inset-pressed)}.button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-small-font-size);padding:0 0.75rem}.button__icon{border-radius:50%;vertical-align:middle}limel-badge{margin-right:0.25rem;pointer-events:none}.button:not(.button--selected){--badge-background-color:rgb(var(--contrast-200))}`;
 
 const ButtonGroup = class {
     constructor(hostRef) {
@@ -14,7 +14,10 @@ const ButtonGroup = class {
          */
         this.value = [];
         /**
-         * True if the button-group should be disabled
+         * True if the button-group should be disabled.
+         *
+         * Disables every button in the group, regardless of the `disabled` value
+         * of each individual button.
          */
         this.disabled = false;
         this.radioGroupName = randomString.createRandomString();
@@ -32,17 +35,18 @@ const ButtonGroup = class {
         this.setSelectedButton();
     }
     render() {
-        return (index.h(index.Host, { key: '867ce929125e09bbe9f0862e6cb68ad10f90a768', role: "radiogroup" }, this.value.map(this.renderButton)));
+        return (index.h(index.Host, { key: '7823fd4593ee4eddb6d56ce55e7ff5eb1cc28397', role: "radiogroup" }, this.value.map(this.renderButton)));
     }
     renderButton(button) {
         // Prefix with 'b' because html IDs cannot start with a digit,
         // and we need to differentiate from the ID on the limel-icon. /Ads
         const buttonId = `b${button.id}`;
+        const isDisabled = this.disabled || button.disabled;
         const classes = {
             button: true,
             'button--selected': this.isButtonChecked(button),
         };
-        return (index.h("div", { class: classes }, index.h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled: this.disabled, id: buttonId, onChange: this.onChange }), index.h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button))));
+        return (index.h("div", { class: classes }, index.h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled: isDisabled, "aria-disabled": isDisabled ? 'true' : 'false', id: buttonId, onChange: this.onChange }), index.h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button))));
     }
     renderContent(button) {
         if (button.icon) {
@@ -75,10 +79,17 @@ const ButtonGroup = class {
         event.stopPropagation();
         const target = event.target;
         // The ID is prefixed with `b` in the HTML, remember? /Ads
-        this.selectedButtonId = target.id.slice(1);
+        const buttonId = target.id.slice(1);
         const button = this.value.find((item) => {
-            return item.id === this.selectedButtonId;
+            return item.id === buttonId;
         });
+        // The `disabled` attribute on the input already stops the browser
+        // from getting here. This makes it hold even if the attribute is
+        // removed from the DOM, or a `change` event is dispatched by hand.
+        if (!button || this.disabled || button.disabled) {
+            return;
+        }
+        this.selectedButtonId = buttonId;
         this.change.emit(button);
     }
     valueChanged() {

package/dist/cjs/limel-chip-set.cjs.entry.js

@@ -182,10 +182,10 @@ const ChipSet = class {
          * <kbd>Enter</kbd>. The input is then cleared to make room for the
          * next chip, and help user type a new keyword from scratch.
          *
-         * Set to `false` when the input represents a search query over an
-         * external suggestion list (as in `limel-picker`), so the typed keyword
-         * survives while chips are added or removed (when user selects items from
-         * the search results list, while it is open).
+         * Set to `false` when the input is a search query over an external
+         * suggestion list and the consumer decides when the keyword has served
+         * its purpose, clearing it itself via `emptyInput()`, as
+         * `limel-picker` does.
          */
         this.emptyInputOnChange = true;
         /**
@@ -374,7 +374,7 @@ const ChipSet = class {
             });
         }
         const value = this.getValue();
-        return (index.h(index.Host, { key: '18ec100a773d4106fd07dbef12f99708480de638' }, index.h("limel-notched-outline", { key: '016081ecef43a53935276aa5877a0436aadf9e92', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, index.h("div", Object.assign({ key: 'eac05f60451ddb37a77337c8ebc998241cb9f906', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
+        return (index.h(index.Host, { key: 'e800200b0f31ad297fb25ceac46624c7731a9197' }, index.h("limel-notched-outline", { key: 'e5c3b7ec97f7063010af7c9eea45e5a89f00bd65', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, index.h("div", Object.assign({ key: '96344e9fd7a12a019cbe9896d5c6ff91925f6ca8', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
     }
     getContentProps() {
         if (this.type === 'input') {

package/dist/cjs/limel-picker.cjs.entry.js

@@ -367,7 +367,7 @@ const Picker = class {
      * @param event - event
      */
     handleListChange(event) {
-        var _a, _b, _c;
+        var _a, _b;
         event.stopPropagation();
         if (!this.value || this.value !== event.detail) {
             let newValue = event.detail;
@@ -376,22 +376,23 @@ const Picker = class {
                 newValue = [...currentValue, event.detail];
             }
             this.change.emit(newValue);
-            if (this.multiple) {
-                const remaining = this.items.filter((item) => item !== event.detail);
-                this.items = this.hasPickableItems(remaining) ? remaining : [];
-            }
-            else {
-                // Single-pick: the search session ends with the pick, so
-                // wipe the input. (In multi-pick we deliberately keep the
-                // typed query so the user can keep adding matches.)
-                this.items = [];
-                this.textValue = '';
-                (_b = this.chipSet) === null || _b === void 0 ? void 0 : _b.emptyInput();
-            }
+            this.updateSearchAfterPick();
         }
         if (this.multiple) {
-            (_c = this.chipSet) === null || _c === void 0 ? void 0 : _c.setFocus();
+            (_b = this.chipSet) === null || _b === void 0 ? void 0 : _b.setFocus();
+        }
+    }
+    /**
+     * Ends the search session a pick concludes. A single-pick picker is
+     * full, so its dropdown has nothing left to show; a multi-pick one
+     * starts over from the default suggestions.
+     */
+    updateSearchAfterPick() {
+        if (!this.multiple) {
+            this.clearInputField();
+            return;
         }
+        this.resetSearchAfterValueChange();
     }
     /**
      * Change handler for the list
@@ -414,9 +415,9 @@ const Picker = class {
         const query = this.textValue;
         this.debouncedSearch(query);
     }
-    handleChange(event) {
+    async handleChange(event) {
+        var _a, _b;
         event.stopPropagation();
-        this.textValue = '';
         let newValue = null;
         if (this.multiple) {
             const chips = event.detail;
@@ -428,6 +429,14 @@ const Picker = class {
             });
         }
         this.change.emit(newValue);
+        const wasEditingInput = await ((_a = this.chipSet) === null || _a === void 0 ? void 0 : _a.getEditMode());
+        const wasShowingDropdown = ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > 0 || this.textValue !== '';
+        if (this.multiple && wasEditingInput && wasShowingDropdown) {
+            this.resetSearchAfterValueChange();
+        }
+        else {
+            this.clearInputField();
+        }
     }
     handleInteract(event) {
         event.stopPropagation();
@@ -538,6 +547,17 @@ const Picker = class {
         this.clearTextValue();
         this.search('');
     }
+    /**
+     * Ends the search session and shows the default suggestions once the
+     * consumer has had a chance to answer the `change` event this follows.
+     * Consumers commonly drop the picked item from `allItems`, and that
+     * arrives as a prop on their next render, so searching at once would
+     * read the list from before.
+     */
+    resetSearchAfterValueChange() {
+        this.clearTextValue();
+        this.debouncedSearch('');
+    }
     /**
      * Two-stage Esc: first press clears the typed query but keeps the
      * dropdown open showing the default suggestions; a second press

package/dist/collection/components/button-group/button-group.css

@@ -123,29 +123,27 @@
   flex-wrap: nowrap;
 }
 
-:host([disabled]:not([disabled=false])) {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
 .button {
+  color: var(--limel-theme-on-surface-color);
+}
+.button:not(:has(:disabled)) {
   transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--limel-theme-on-surface-color);
   background-color: transparent;
 }
-.button:hover, .button:focus, .button:focus-visible {
+.button:not(:has(:disabled)):hover, .button:not(:has(:disabled)):focus, .button:not(:has(:disabled)):focus-visible {
   will-change: color, background-color, box-shadow, transform;
 }
-.button:hover, .button:focus-visible {
+.button:not(:has(:disabled)):hover, .button:not(:has(:disabled)):focus-visible {
   transform: translate3d(0, -0.04rem, 0);
   color: var(--limel-theme-on-surface-color);
   background-color: var(--lime-elevated-surface-background-color);
 }
-.button:hover {
+.button:not(:has(:disabled)):hover {
   box-shadow: var(--button-shadow-hovered);
 }
-.button:active {
+.button:not(:has(:disabled)):active {
   --limel-clickable-transform-timing-function: cubic-bezier(
       0.83,
       -0.15,
@@ -156,14 +154,10 @@
   background-color: var(--limel-theme-surface-background-color);
   box-shadow: var(--button-shadow-inset-pressed);
 }
-.button:hover, .button:active {
+.button:not(:has(:disabled)):hover, .button:not(:has(:disabled)):active {
   --limel-clickable-transition-speed: 0.2s;
   --limel-clickable-transform-speed: 0.16s;
 }
-.button:has(input[disabled]):hover {
-  box-shadow: none;
-  transform: none;
-}
 .button {
   position: relative;
   display: inline-grid;
@@ -204,6 +198,10 @@
 .button label:has(> limel-badge) .button__label {
   padding-right: 0.25rem;
 }
+.button:has(:disabled) label {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
 .button input[type=radio] {
   position: absolute;
   width: 0;
@@ -235,7 +233,7 @@
   box-shadow: var(--button-shadow-inset);
   color: var(--lime-primary-color, var(--limel-theme-primary-color));
 }
-.button.button--selected:active {
+.button.button--selected:not(:has(:disabled)):active {
   box-shadow: var(--button-shadow-inset-pressed);
 }
 

package/dist/collection/components/button-group/button-group.js

@@ -34,6 +34,7 @@ import { createRandomString } from "../../util/random-string";
  * @exampleComponent limel-example-button-group-basic
  * @exampleComponent limel-example-button-group-mix
  * @exampleComponent limel-example-button-group-badges
+ * @exampleComponent limel-example-button-group-disabled-item
  * @exampleComponent limel-example-button-group-composite
  */
 export class ButtonGroup {
@@ -43,7 +44,10 @@ export class ButtonGroup {
          */
         this.value = [];
         /**
-         * True if the button-group should be disabled
+         * True if the button-group should be disabled.
+         *
+         * Disables every button in the group, regardless of the `disabled` value
+         * of each individual button.
          */
         this.disabled = false;
         this.radioGroupName = createRandomString();
@@ -61,17 +65,18 @@ export class ButtonGroup {
         this.setSelectedButton();
     }
     render() {
-        return (h(Host, { key: '867ce929125e09bbe9f0862e6cb68ad10f90a768', role: "radiogroup" }, this.value.map(this.renderButton)));
+        return (h(Host, { key: '7823fd4593ee4eddb6d56ce55e7ff5eb1cc28397', role: "radiogroup" }, this.value.map(this.renderButton)));
     }
     renderButton(button) {
         // Prefix with 'b' because html IDs cannot start with a digit,
         // and we need to differentiate from the ID on the limel-icon. /Ads
         const buttonId = `b${button.id}`;
+        const isDisabled = this.disabled || button.disabled;
         const classes = {
             button: true,
             'button--selected': this.isButtonChecked(button),
         };
-        return (h("div", { class: classes }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled: this.disabled, id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button))));
+        return (h("div", { class: classes }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled: isDisabled, "aria-disabled": isDisabled ? 'true' : 'false', id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button))));
     }
     renderContent(button) {
         if (button.icon) {
@@ -104,10 +109,17 @@ export class ButtonGroup {
         event.stopPropagation();
         const target = event.target;
         // The ID is prefixed with `b` in the HTML, remember? /Ads
-        this.selectedButtonId = target.id.slice(1);
+        const buttonId = target.id.slice(1);
         const button = this.value.find((item) => {
-            return item.id === this.selectedButtonId;
+            return item.id === buttonId;
         });
+        // The `disabled` attribute on the input already stops the browser
+        // from getting here. This makes it hold even if the attribute is
+        // removed from the DOM, or a `change` event is dispatched by hand.
+        if (!button || this.disabled || button.disabled) {
+            return;
+        }
+        this.selectedButtonId = buttonId;
         this.change.emit(button);
     }
     valueChanged() {
@@ -164,7 +176,7 @@ export class ButtonGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "True if the button-group should be disabled"
+                    "text": "True if the button-group should be disabled.\n\nDisables every button in the group, regardless of the `disabled` value\nof each individual button."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/chip-set/chip-set.js

@@ -100,10 +100,10 @@ export class ChipSet {
          * <kbd>Enter</kbd>. The input is then cleared to make room for the
          * next chip, and help user type a new keyword from scratch.
          *
-         * Set to `false` when the input represents a search query over an
-         * external suggestion list (as in `limel-picker`), so the typed keyword
-         * survives while chips are added or removed (when user selects items from
-         * the search results list, while it is open).
+         * Set to `false` when the input is a search query over an external
+         * suggestion list and the consumer decides when the keyword has served
+         * its purpose, clearing it itself via `emptyInput()`, as
+         * `limel-picker` does.
          */
         this.emptyInputOnChange = true;
         /**
@@ -292,7 +292,7 @@ export class ChipSet {
             });
         }
         const value = this.getValue();
-        return (h(Host, { key: '18ec100a773d4106fd07dbef12f99708480de638' }, h("limel-notched-outline", { key: '016081ecef43a53935276aa5877a0436aadf9e92', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: 'eac05f60451ddb37a77337c8ebc998241cb9f906', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
+        return (h(Host, { key: 'e800200b0f31ad297fb25ceac46624c7731a9197' }, h("limel-notched-outline", { key: 'e5c3b7ec97f7063010af7c9eea45e5a89f00bd65', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: '96344e9fd7a12a019cbe9896d5c6ff91925f6ca8', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
     }
     getContentProps() {
         if (this.type === 'input') {
@@ -778,7 +778,7 @@ export class ChipSet {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the input field should be emptied when the set of chips\nchanges (i.e. when the `value` prop is updated \u2014 a chip is added,\nremoved, or the array is replaced).\n\nDefaults to `true`, which is the right behavior for a standalone\ninput chip-set where the typed text *becomes* the next chip on\n<kbd>Enter</kbd>. The input is then cleared to make room for the\nnext chip, and help user type a new keyword from scratch.\n\nSet to `false` when the input represents a search query over an\nexternal suggestion list (as in `limel-picker`), so the typed keyword\nsurvives while chips are added or removed (when user selects items from\nthe search results list, while it is open)."
+                    "text": "Whether the input field should be emptied when the set of chips\nchanges (i.e. when the `value` prop is updated \u2014 a chip is added,\nremoved, or the array is replaced).\n\nDefaults to `true`, which is the right behavior for a standalone\ninput chip-set where the typed text *becomes* the next chip on\n<kbd>Enter</kbd>. The input is then cleared to make room for the\nnext chip, and help user type a new keyword from scratch.\n\nSet to `false` when the input is a search query over an external\nsuggestion list and the consumer decides when the keyword has served\nits purpose, clearing it itself via `emptyInput()`, as\n`limel-picker` does."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/picker/picker.js

@@ -370,7 +370,7 @@ export class Picker {
      * @param event - event
      */
     handleListChange(event) {
-        var _a, _b, _c;
+        var _a, _b;
         event.stopPropagation();
         if (!this.value || this.value !== event.detail) {
             let newValue = event.detail;
@@ -379,22 +379,23 @@ export class Picker {
                 newValue = [...currentValue, event.detail];
             }
             this.change.emit(newValue);
-            if (this.multiple) {
-                const remaining = this.items.filter((item) => item !== event.detail);
-                this.items = this.hasPickableItems(remaining) ? remaining : [];
-            }
-            else {
-                // Single-pick: the search session ends with the pick, so
-                // wipe the input. (In multi-pick we deliberately keep the
-                // typed query so the user can keep adding matches.)
-                this.items = [];
-                this.textValue = '';
-                (_b = this.chipSet) === null || _b === void 0 ? void 0 : _b.emptyInput();
-            }
+            this.updateSearchAfterPick();
         }
         if (this.multiple) {
-            (_c = this.chipSet) === null || _c === void 0 ? void 0 : _c.setFocus();
+            (_b = this.chipSet) === null || _b === void 0 ? void 0 : _b.setFocus();
+        }
+    }
+    /**
+     * Ends the search session a pick concludes. A single-pick picker is
+     * full, so its dropdown has nothing left to show; a multi-pick one
+     * starts over from the default suggestions.
+     */
+    updateSearchAfterPick() {
+        if (!this.multiple) {
+            this.clearInputField();
+            return;
         }
+        this.resetSearchAfterValueChange();
     }
     /**
      * Change handler for the list
@@ -417,9 +418,9 @@ export class Picker {
         const query = this.textValue;
         this.debouncedSearch(query);
     }
-    handleChange(event) {
+    async handleChange(event) {
+        var _a, _b;
         event.stopPropagation();
-        this.textValue = '';
         let newValue = null;
         if (this.multiple) {
             const chips = event.detail;
@@ -431,6 +432,14 @@ export class Picker {
             });
         }
         this.change.emit(newValue);
+        const wasEditingInput = await ((_a = this.chipSet) === null || _a === void 0 ? void 0 : _a.getEditMode());
+        const wasShowingDropdown = ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > 0 || this.textValue !== '';
+        if (this.multiple && wasEditingInput && wasShowingDropdown) {
+            this.resetSearchAfterValueChange();
+        }
+        else {
+            this.clearInputField();
+        }
     }
     handleInteract(event) {
         event.stopPropagation();
@@ -541,6 +550,17 @@ export class Picker {
         this.clearTextValue();
         this.search('');
     }
+    /**
+     * Ends the search session and shows the default suggestions once the
+     * consumer has had a chance to answer the `change` event this follows.
+     * Consumers commonly drop the picked item from `allItems`, and that
+     * arrives as a prop on their next render, so searching at once would
+     * read the list from before.
+     */
+    resetSearchAfterValueChange() {
+        this.clearTextValue();
+        this.debouncedSearch('');
+    }
     /**
      * Two-stage Esc: first press clears the typed query but keeps the
      * dropdown open showing the default suggestions; a second press

package/dist/esm/limel-button-group.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-BGxJfR2f.js';
 import { c as createRandomString } from './random-string-JbKhhoXs.js';
 
-const buttonGroupCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limel-button-group){display:flex;box-sizing:border-box;align-items:center;border-radius:3.75rem;background-color:var(--button-group-background-color, rgb(var(--contrast-400)));width:max-content;max-width:100%;flex-wrap:nowrap}:host([disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.4}.button{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.button:hover,.button:focus,.button:focus-visible{will-change:color, background-color, box-shadow, transform}.button:hover,.button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.button:hover{box-shadow:var(--button-shadow-hovered)}.button:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.button:hover,.button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button:has(input[disabled]):hover{box-shadow:none;transform:none}.button{position:relative;display:inline-grid;grid-auto-flow:column;align-items:center;max-width:100%;min-width:2rem;height:2rem;padding:0 0.0625rem;margin:0.125rem;border-radius:1rem;font-size:var(--limel-theme-default-font-size);user-select:none}.button:not(:last-child):after{content:"";display:block;height:1rem;width:0.125rem;border-radius:0.25rem;background-color:var(--button-group-text-color, rgb(var(--contrast-1200)));opacity:0.1;position:absolute;right:-0.1875rem;top:0;bottom:0;margin:auto}.button label{cursor:pointer;transition:color 0.2s ease;display:flex;align-items:center;flex:1;height:100%;min-width:0}.button label:has(>limel-badge) .button__label{padding-right:0.25rem}.button input[type=radio]{position:absolute;width:0;opacity:0}.button input[type=radio]:focus-visible+label:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3.75rem;box-shadow:var(--shadow-depth-8-focused)}.button:focus-within{outline:none;color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button:only-child .button__label{padding-left:0.75rem}.button:first-child .button__label{padding-left:0.75rem}.button.button--selected{background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset);color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button.button--selected:active{box-shadow:var(--button-shadow-inset-pressed)}.button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-small-font-size);padding:0 0.75rem}.button__icon{border-radius:50%;vertical-align:middle}limel-badge{margin-right:0.25rem;pointer-events:none}.button:not(.button--selected){--badge-background-color:rgb(var(--contrast-200))}`;
+const buttonGroupCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limel-button-group){display:flex;box-sizing:border-box;align-items:center;border-radius:3.75rem;background-color:var(--button-group-background-color, rgb(var(--contrast-400)));width:max-content;max-width:100%;flex-wrap:nowrap}.button{color:var(--limel-theme-on-surface-color)}.button:not(:has(:disabled)){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.button:not(:has(:disabled)):hover,.button:not(:has(:disabled)):focus,.button:not(:has(:disabled)):focus-visible{will-change:color, background-color, box-shadow, transform}.button:not(:has(:disabled)):hover,.button:not(:has(:disabled)):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.button:not(:has(:disabled)):hover{box-shadow:var(--button-shadow-hovered)}.button:not(:has(:disabled)):active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.button:not(:has(:disabled)):hover,.button:not(:has(:disabled)):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button{position:relative;display:inline-grid;grid-auto-flow:column;align-items:center;max-width:100%;min-width:2rem;height:2rem;padding:0 0.0625rem;margin:0.125rem;border-radius:1rem;font-size:var(--limel-theme-default-font-size);user-select:none}.button:not(:last-child):after{content:"";display:block;height:1rem;width:0.125rem;border-radius:0.25rem;background-color:var(--button-group-text-color, rgb(var(--contrast-1200)));opacity:0.1;position:absolute;right:-0.1875rem;top:0;bottom:0;margin:auto}.button label{cursor:pointer;transition:color 0.2s ease;display:flex;align-items:center;flex:1;height:100%;min-width:0}.button label:has(>limel-badge) .button__label{padding-right:0.25rem}.button:has(:disabled) label{cursor:not-allowed;opacity:0.4}.button input[type=radio]{position:absolute;width:0;opacity:0}.button input[type=radio]:focus-visible+label:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3.75rem;box-shadow:var(--shadow-depth-8-focused)}.button:focus-within{outline:none;color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button:only-child .button__label{padding-left:0.75rem}.button:first-child .button__label{padding-left:0.75rem}.button.button--selected{background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset);color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button.button--selected:not(:has(:disabled)):active{box-shadow:var(--button-shadow-inset-pressed)}.button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-small-font-size);padding:0 0.75rem}.button__icon{border-radius:50%;vertical-align:middle}limel-badge{margin-right:0.25rem;pointer-events:none}.button:not(.button--selected){--badge-background-color:rgb(var(--contrast-200))}`;
 
 const ButtonGroup = class {
     constructor(hostRef) {
@@ -12,7 +12,10 @@ const ButtonGroup = class {
          */
         this.value = [];
         /**
-         * True if the button-group should be disabled
+         * True if the button-group should be disabled.
+         *
+         * Disables every button in the group, regardless of the `disabled` value
+         * of each individual button.
          */
         this.disabled = false;
         this.radioGroupName = createRandomString();
@@ -30,17 +33,18 @@ const ButtonGroup = class {
         this.setSelectedButton();
     }
     render() {
-        return (h(Host, { key: '867ce929125e09bbe9f0862e6cb68ad10f90a768', role: "radiogroup" }, this.value.map(this.renderButton)));
+        return (h(Host, { key: '7823fd4593ee4eddb6d56ce55e7ff5eb1cc28397', role: "radiogroup" }, this.value.map(this.renderButton)));
     }
     renderButton(button) {
         // Prefix with 'b' because html IDs cannot start with a digit,
         // and we need to differentiate from the ID on the limel-icon. /Ads
         const buttonId = `b${button.id}`;
+        const isDisabled = this.disabled || button.disabled;
         const classes = {
             button: true,
             'button--selected': this.isButtonChecked(button),
         };
-        return (h("div", { class: classes }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled: this.disabled, id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button))));
+        return (h("div", { class: classes }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled: isDisabled, "aria-disabled": isDisabled ? 'true' : 'false', id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button))));
     }
     renderContent(button) {
         if (button.icon) {
@@ -73,10 +77,17 @@ const ButtonGroup = class {
         event.stopPropagation();
         const target = event.target;
         // The ID is prefixed with `b` in the HTML, remember? /Ads
-        this.selectedButtonId = target.id.slice(1);
+        const buttonId = target.id.slice(1);
         const button = this.value.find((item) => {
-            return item.id === this.selectedButtonId;
+            return item.id === buttonId;
         });
+        // The `disabled` attribute on the input already stops the browser
+        // from getting here. This makes it hold even if the attribute is
+        // removed from the DOM, or a `change` event is dispatched by hand.
+        if (!button || this.disabled || button.disabled) {
+            return;
+        }
+        this.selectedButtonId = buttonId;
         this.change.emit(button);
     }
     valueChanged() {

package/dist/esm/limel-chip-set.entry.js

@@ -180,10 +180,10 @@ const ChipSet = class {
          * <kbd>Enter</kbd>. The input is then cleared to make room for the
          * next chip, and help user type a new keyword from scratch.
          *
-         * Set to `false` when the input represents a search query over an
-         * external suggestion list (as in `limel-picker`), so the typed keyword
-         * survives while chips are added or removed (when user selects items from
-         * the search results list, while it is open).
+         * Set to `false` when the input is a search query over an external
+         * suggestion list and the consumer decides when the keyword has served
+         * its purpose, clearing it itself via `emptyInput()`, as
+         * `limel-picker` does.
          */
         this.emptyInputOnChange = true;
         /**
@@ -372,7 +372,7 @@ const ChipSet = class {
             });
         }
         const value = this.getValue();
-        return (h(Host, { key: '18ec100a773d4106fd07dbef12f99708480de638' }, h("limel-notched-outline", { key: '016081ecef43a53935276aa5877a0436aadf9e92', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: 'eac05f60451ddb37a77337c8ebc998241cb9f906', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
+        return (h(Host, { key: 'e800200b0f31ad297fb25ceac46624c7731a9197' }, h("limel-notched-outline", { key: 'e5c3b7ec97f7063010af7c9eea45e5a89f00bd65', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!((_a = this.value) === null || _a === void 0 ? void 0 : _a.length), hasLeadingIcon: !!this.leadingIcon, hasFloatingLabel: this.floatLabelAbove() }, h("div", Object.assign({ key: '96344e9fd7a12a019cbe9896d5c6ff91925f6ca8', slot: "content" }, this.getContentProps(), { class: classes }), this.renderContent(value))), this.renderHelperLine()));
     }
     getContentProps() {
         if (this.type === 'input') {