@limetech/lime-elements 40.1.0 → 40.2.0

package/dist/types/components/picker/picker.d.ts

@@ -201,6 +201,12 @@ export declare class Picker {
      * @param event - event
      */
     private handleListChange;
+    /**
+     * 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.
+     */
+    private updateSearchAfterPick;
     /**
      * Change handler for the list
      *
@@ -237,6 +243,14 @@ export declare class Picker {
     private clearTextValue;
     private clearInputField;
     private resetSearchToDefault;
+    /**
+     * 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.
+     */
+    private resetSearchAfterValueChange;
     /**
      * Two-stage Esc: first press clears the typed query but keeps the
      * dropdown open showing the default suggestions; a second press

package/dist/types/components.d.ts

@@ -390,11 +390,12 @@ export namespace Components {
      * @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
      */
     interface LimelButtonGroup {
         /**
-          * 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.
           * @default false
          */
         "disabled": boolean;
@@ -875,7 +876,7 @@ export namespace Components {
          */
         "emptyInputOnBlur": boolean;
         /**
-          * Whether the input field should be emptied when the set of chips changes (i.e. when the `value` prop is updated — a chip is added, removed, or the array is replaced).  Defaults to `true`, which is the right behavior for a standalone input chip-set where the typed text *becomes* the next chip on <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).
+          * Whether the input field should be emptied when the set of chips changes (i.e. when the `value` prop is updated — a chip is added, removed, or the array is replaced).  Defaults to `true`, which is the right behavior for a standalone input chip-set where the typed text *becomes* the next chip on <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 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.
           * @default true
          */
         "emptyInputOnChange": boolean;
@@ -4480,6 +4481,7 @@ declare global {
      * @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
      */
     interface HTMLLimelButtonGroupElement extends Components.LimelButtonGroup, HTMLStencilElement {
@@ -6968,11 +6970,12 @@ declare namespace LocalJSX {
      * @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
      */
     interface LimelButtonGroup {
         /**
-          * 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.
           * @default false
          */
         "disabled"?: boolean;
@@ -7472,7 +7475,7 @@ declare namespace LocalJSX {
          */
         "emptyInputOnBlur"?: boolean;
         /**
-          * Whether the input field should be emptied when the set of chips changes (i.e. when the `value` prop is updated — a chip is added, removed, or the array is replaced).  Defaults to `true`, which is the right behavior for a standalone input chip-set where the typed text *becomes* the next chip on <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).
+          * Whether the input field should be emptied when the set of chips changes (i.e. when the `value` prop is updated — a chip is added, removed, or the array is replaced).  Defaults to `true`, which is the right behavior for a standalone input chip-set where the typed text *becomes* the next chip on <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 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.
           * @default true
          */
         "emptyInputOnChange"?: boolean;
@@ -11775,6 +11778,7 @@ declare module "@stencil/core" {
              * @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
              */
             "limel-button-group": LocalJSX.IntrinsicElements["limel-button-group"] & JSXBase.HTMLAttributes<HTMLLimelButtonGroupElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.1.0",
+  "version": "40.2.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -79,7 +79,7 @@
     "eslint": "^9.39.4",
     "flatpickr": "^4.6.13",
     "glob": "^13.0.6",
-    "globals": "^17.11.0",
+    "globals": "^17.12.0",
     "html-escaper": "^3.0.3",
     "jsonlint-mod": "^1.7.6",
     "jsx-dom": "^8.1.6",

package/dist/lime-elements/p-92bbb643.entry.js

@@ -1 +0,0 @@
-import{r as t,c as e,h as o,H as r}from"./p-BGxJfR2f.js";import{c as i}from"./p-JbKhhoXs.js";const a=class{constructor(o){t(this,o),this.change=e(this,"change"),this.value=[],this.disabled=!1,this.radioGroupName=i(),this.setSelectedButton=()=>{var t;this.selectedButtonId=null===(t=this.value.find((t=>t.selected)))||void 0===t?void 0:t.id},this.renderButton=this.renderButton.bind(this),this.onChange=this.onChange.bind(this),this.renderContent=this.renderContent.bind(this)}componentWillLoad(){this.setSelectedButton()}render(){return o(r,{key:"867ce929125e09bbe9f0862e6cb68ad10f90a768",role:"radiogroup"},this.value.map(this.renderButton))}renderButton(t){const e=`b${t.id}`,r={button:!0,"button--selected":this.isButtonChecked(t)};return o("div",{class:r},o("input",{type:"radio",name:this.radioGroupName,checked:this.isButtonChecked(t),disabled:this.disabled,id:e,onChange:this.onChange}),o("label",{htmlFor:e},this.renderContent(t),this.renderBadge(t)))}renderContent(t){return t.icon?this.renderIcon(t):this.renderLabel(t)}isButtonChecked(t){return t.id===this.selectedButtonId}renderLabel(t){return o("span",{class:"button__label"},t.title)}renderIcon(t){const e=`i${t.id}`;return[o("limel-icon",{id:e,class:"button__icon","aria-label":t.title,name:t.icon,size:"small",badge:!0}),o("limel-tooltip",{elementId:e,label:t.title})]}renderBadge(t){if(t.badge)return o("limel-badge",{label:t.badge})}onChange(t){t.stopPropagation(),this.selectedButtonId=t.target.id.slice(1);const e=this.value.find((t=>t.id===this.selectedButtonId));this.change.emit(e)}valueChanged(){this.setSelectedButton()}static get watchers(){return{value:[{valueChanged:0}]}}};a.style='@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))}';export{a as limel_button_group}