@limetech/lime-elements 39.45.3 → 40.0.0

package/dist/collection/components/slider/slider.css

@@ -241,8 +241,10 @@
   border-radius: 1.25rem;
   padding: 0 0.375rem;
   height: 1.25rem;
+  min-width: 1.25rem;
   display: flex;
   align-items: center;
+  justify-content: center;
   white-space: nowrap;
   color: rgb(var(--color-white));
   font-size: 0.6875rem;
@@ -383,6 +385,99 @@ input[type=range] {
   color: var(--limel-notched-outline-label-color, rgb(var(--contrast-1200)));
 }
 
+:host(.has-clear-button) div[slot=content] {
+  padding-right: calc(1rem + 0.25rem);
+}
+
+:host(.is-unset) .track .active {
+  width: 0;
+}
+:host(.is-unset) .thumb {
+  left: 50%;
+}
+
+button.clear-button {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+}
+button.clear-button:focus {
+  outline: none;
+}
+button.clear-button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+button.clear-button:not([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: rgb(var(--contrast-1100));
+  background-color: rgba(var(--contrast-700), 0.6);
+}
+button.clear-button:not([disabled]):hover, button.clear-button:not([disabled]):focus, button.clear-button:not([disabled]):focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
+button.clear-button:not([disabled]):hover, button.clear-button:not([disabled]):focus-visible {
+  transform: translate3d(0, 0.01rem, 0);
+  color: rgb(var(--contrast-100));
+  background-color: rgb(var(--contrast-1000));
+}
+button.clear-button:not([disabled]):hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+button.clear-button:not([disabled]):active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
+  box-shadow: var(--button-shadow-pressed);
+}
+button.clear-button:not([disabled]):hover, button.clear-button:not([disabled]):active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+button.clear-button:not([disabled]):focus-visible {
+  background-color: rgb(var(--contrast-1000));
+}
+button.clear-button {
+  position: absolute;
+  inset: 0.75rem 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 50%;
+}
+button.clear-button svg {
+  width: calc(1rem - 0.25rem);
+  height: calc(1rem - 0.25rem);
+  fill: currentColor;
+}
+button.clear-button:before {
+  content: "";
+  position: absolute;
+  inset: 0 auto 0 0;
+  margin: auto;
+  height: 0.125rem;
+  width: 0.25rem;
+  background-color: rgba(var(--contrast-700), 0.6);
+  transform: translate(-100%, 0);
+}
+button.clear-button[disabled] {
+  color: rgb(var(--contrast-1000));
+  background-color: rgb(var(--contrast-600));
+  cursor: not-allowed;
+}
+
 :host(limel-slider:focus),
 :host(limel-slider:focus-visible),
 :host(limel-slider:focus-within) {

package/dist/collection/components/slider/slider.js

@@ -1,12 +1,25 @@
 import { h, Host, } from "@stencil/core";
 import { getPercentageClass } from "./get-percentage-class";
 import { createRandomString } from "../../util/random-string";
+import translate from "../../global/translations";
 const DEFAULT_FACTOR = 1;
 const DEFAULT_MAX_VALUE = 100;
 const DEFAULT_MIN_VALUE = 0;
 const MAX_VISIBLE_STEP_DOTS = 20;
+/**
+ * Whether the slider holds a value at all. `Number.isFinite` is typed
+ * `(number: unknown) => boolean`, so it tests the right thing but narrows
+ * nothing; this does, which lets the unset check double as proof that what
+ * remains is a number the arithmetic can use. `null`, `undefined` and `NaN`
+ * all mean unset.
+ * @param value - the slider's `value` prop, which may not be a number.
+ */
+const isSetValue = (value) => {
+    return Number.isFinite(value);
+};
 /**
  * @exampleComponent limel-example-slider-basic
+ * @exampleComponent limel-example-slider-unset
  * @exampleComponent limel-example-slider-multiplier
  * @exampleComponent limel-example-slider-multiplier-percentage-colors
  * @exampleComponent limel-example-slider-unit
@@ -36,6 +49,9 @@ export class Slider {
         this.factor = DEFAULT_FACTOR;
         /**
          * Set to `true` to indicate that the slider is required.
+         * A required slider does not offer the clear button, since a required
+         * value cannot be unset. It can still be initialized unset (with a
+         * non-finite `value`) to prompt the user to make a choice.
          */
         this.required = false;
         /**
@@ -52,6 +68,10 @@ export class Slider {
          * Unit to display next to the value
          */
         this.unit = '';
+        /**
+         * Defines the language for translations of the accessible labels.
+         */
+        this.language = 'en';
         /**
          * The maximum value allowed
          */
@@ -60,6 +80,37 @@ export class Slider {
          * The minimum value allowed
          */
         this.valuemin = DEFAULT_MIN_VALUE;
+        /**
+         * `true` while the value on display is one the consumer has been told
+         * about — either it came from the `value` prop, or it has been emitted on
+         * `change`. It is `false` from the moment the slider becomes unset until a
+         * value is committed again.
+         *
+         * The native input always holds a value, so while unset it rests at the
+         * midpoint. A press that lands on that midpoint, or a drag that returns to
+         * it before releasing, leaves the input's value untouched and fires neither
+         * `input` nor `change`. Without this flag such an interaction is swallowed:
+         * the slider either stays unset, or shows a number the consumer never
+         * received.
+         */
+        this.valueIsCommitted = false;
+        this.syncStateFromValue = () => {
+            const value = this.value;
+            if (!isSetValue(value)) {
+                this.enterUnsetState();
+                return;
+            }
+            this.isUnset = false;
+            this.valueIsCommitted = true;
+            this.displayValue = this.multiplyByFactor(value);
+            this.setPercentageClass(value);
+        };
+        this.enterUnsetState = () => {
+            this.isUnset = true;
+            this.valueIsCommitted = false;
+            this.displayValue = this.getRestingDisplayValue();
+            this.percentageClass = undefined;
+        };
         this.renderStepDots = (min, max) => {
             if (!this.step) {
                 return;
@@ -77,24 +128,87 @@ export class Slider {
             }
             return (h("limel-helper-line", { helperText: this.helperText, helperTextId: this.helperTextId, invalid: this.invalid }));
         };
+        /**
+         * A required slider must hold a value, so it offers no way to clear it,
+         * and a readonly one cannot be edited at all. The styling needs the same
+         * answer to reserve room for the button, so both read it from here rather
+         * than each deriving it — the stylesheet cannot see a parsed prop, only
+         * the attribute string, and `required="false"` is a present attribute.
+         */
+        this.hasClearButton = () => {
+            return !this.readonly && !this.required;
+        };
+        this.renderClearButton = () => {
+            if (!this.hasClearButton()) {
+                return;
+            }
+            const label = this.label
+                ? translate.get('clear-value-of', this.language, {
+                    label: this.label,
+                })
+                : translate.get('clear-value', this.language);
+            return (h("button", { type: "button", id: this.clearButtonId, class: "clear-button", "aria-label": label, onClick: this.handleClear, disabled: this.isUnset || this.disabled }, h("svg", { viewBox: "0 0 32 32", "aria-hidden": "true", focusable: "false" }, h("path", { d: "M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z" })), h("limel-tooltip", { elementId: this.clearButtonId, label: label })));
+        };
         this.handleInput = (event) => {
             event.stopPropagation();
             const input = event.target;
             const value = Number(input.value);
+            this.isUnset = false;
             this.displayValue = value;
             this.setPercentageClass(value / this.factor);
         };
         this.handleChange = (event) => {
             event.stopPropagation();
             const input = event.target;
-            let value = Number(input.value);
+            this.commitValue(Number(input.value));
+        };
+        this.handleClick = (event) => {
+            if (this.valueIsCommitted) {
+                return;
+            }
+            // The interaction is over and the value on display still hasn't
+            // reached the consumer, so the native input never fired a `change`.
+            // Commit what it holds. The click is left to bubble, so consumers
+            // listening for clicks still see it.
+            const input = event.target;
+            this.commitValue(Number(input.value));
+        };
+        /**
+         * Leaves the unset state and emits the value, keeping the rendered state
+         * and the emitted value in step so the two cannot diverge.
+         * @param displayValue - the value held by the native input, already
+         * multiplied by `factor`.
+         */
+        this.commitValue = (displayValue) => {
             const step = this.multiplyByFactor(this.step);
-            if (!this.isMultipleOfStep(value, step)) {
-                value = this.roundToStep(value, step);
+            const min = this.multiplyByFactor(this.valuemin);
+            let value = displayValue;
+            // Steps are counted from `valuemin`, not from zero — a range of 1–5 in
+            // steps of 2 stops at 1, 3 and 5. Rounding against zero would push
+            // every one of those to the next even number, past `valuemax`.
+            if (!this.isMultipleOfStep(value - min, step)) {
+                value = min + this.roundToStep(value - min, step);
             }
+            this.valueIsCommitted = true;
+            this.isUnset = false;
+            this.displayValue = value;
+            this.setPercentageClass(value / this.factor);
             this.change.emit(value / this.factor);
         };
+        this.handleClear = (event) => {
+            var _a;
+            event.stopPropagation();
+            this.enterUnsetState();
+            this.change.emit(null);
+            // Move focus to the slider itself so keyboard users can immediately
+            // set a new value, and so assistive tech announces the now-unset state
+            // instead of focus falling to the body when the button self-disables.
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus();
+        };
         this.getContainerClassList = () => {
+            return Object.assign({ 'is-unset': this.isUnset, 'has-clear-button': this.hasClearButton() }, this.getPercentageClassList());
+        };
+        this.getPercentageClassList = () => {
             if (!this.percentageClass) {
                 return {};
             }
@@ -105,12 +219,18 @@ export class Slider {
         this.multiplyByFactor = (value) => {
             return Math.round(value * this.factor);
         };
-        this.getValue = () => {
-            let value = this.value;
-            if (!Number.isFinite(value)) {
-                value = this.valuemin;
-            }
-            return value;
+        /**
+         * The display value the thumb rests at while unset: the midpoint of the
+         * range, so both arrow-key directions are live (unlike anchoring at the
+         * minimum). Aligned to the step — native range inputs default to a step of
+         * 1 — so it matches a real input value and the first key press doesn't jump.
+         */
+        this.getRestingDisplayValue = () => {
+            const min = this.multiplyByFactor(this.valuemin);
+            const max = this.multiplyByFactor(this.valuemax);
+            const midpoint = (min + max) / 2;
+            const step = this.step ? this.multiplyByFactor(this.step) : 1;
+            return min + Math.round((midpoint - min) / step) * step;
         };
         this.getFraction = () => {
             const min = this.multiplyByFactor(this.valuemin);
@@ -134,10 +254,10 @@ export class Slider {
         };
         this.labelId = createRandomString();
         this.helperTextId = createRandomString();
+        this.clearButtonId = createRandomString();
     }
     componentWillLoad() {
-        this.displayValue = this.multiplyByFactor(this.getValue());
-        this.setPercentageClass(this.getValue());
+        this.syncStateFromValue();
     }
     render() {
         const min = this.multiplyByFactor(this.valuemin);
@@ -150,13 +270,18 @@ export class Slider {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (h(Host, { key: 'b525c7a5774b9832788a9fb18c3f00798e910d81', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'e0d97ce8992401fc85b370971a503cb4968bc182', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasFloatingLabel: true }, h("div", { key: 'fe53bc1695fdc29c42139677d0e0dd76ba17ec9e', slot: "content" }, h("div", { key: '45effbc8e70d5be0fbbbd30fac34d7a9cf7ef2a8', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '0e7b5da8cca6f95df8528d478619e0e1cc41ee7e', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
+        return (h(Host, { key: 'eecd22982d9180f24f947fd2ab9af9a25e64647e', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '848578a10d64a4af81e296c9f961e9be788484a7', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: '7ad977107b79fc9ca416562d5c7905b4a962053c', slot: "content" }, h("div", { key: 'dcb137a44b5244e63a4c8a95341d3918dc65445c', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '73af46f062991f3c715d13c0f44b0fb9478dc37c', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
                 ? this.helperTextId
-                : undefined, onInput: this.handleInput, onChange: this.handleChange }, inputProps)), h("div", { key: '7a064053a0e89209813c68637991f0e23c6ec877', class: "track" }, h("div", { key: '042a6185e0fa842bcd077cefe0934116827432fa', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '09f11ca04aa46a02f498507acae7d84e37210f14', class: "thumb" }, h("div", { key: 'd1b2513e6694a3bb0bba05a97139cc5fecca62e5', class: "knob" }), h("div", { key: 'cc135f641c78e80c9b57e86369e6cdf2cbf152a1', class: "indicator", "aria-hidden": "true" }, this.displayValue))), h("div", { key: '76baf35402525fc825667f04a7fdea5d1ff551cc', class: "range-labels" }, h("span", { key: 'c7d50a897ae0dcea864b8d98fca72cd1aef19f3b', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '65c5dee93cc75c978eaf9c6dc7be89f734e74913', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderHelperLine()));
+                : undefined, "aria-valuetext": this.isUnset
+                ? translate.get('value-not-set', this.language)
+                : undefined, ref: (el) => {
+                this.inputElement = el;
+            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: 'e9fb2af7f43cc040c382930d336c8eb903bc0162', class: "track" }, h("div", { key: '2cec88a4b8c99296473bbd9b064bccd0a6450b8f', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '5a090fb0528478450510ff0240e6b5499a177238', class: "thumb" }, h("div", { key: 'fde6792041312183af0328d9fc75d19d2553bf46', class: "knob" }), h("div", { key: 'de717ffa20723870bb27aa22e99fe9fe5ebdd563', class: "indicator", "aria-hidden": "true" }, this.isUnset
+            ? '\u2194\uFE0E'
+            : this.displayValue))), h("div", { key: 'd0c38d092fecc4bf9690680d8541c8d658056f08', class: "range-labels" }, h("span", { key: '581387615da0cdaf105a568e02212f8bdd22eeb6', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: '33c5673d8e56995bffdc35340381f2e87ae0918c', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
     }
     watchValue() {
-        this.displayValue = this.multiplyByFactor(this.getValue());
-        this.setPercentageClass(this.getValue());
+        this.syncStateFromValue();
     }
     static get is() { return "limel-slider"; }
     static get encapsulation() { return "shadow"; }
@@ -282,7 +407,7 @@ export class Slider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set to `true` to indicate that the slider is required."
+                    "text": "Set to `true` to indicate that the slider is required.\nA required slider does not offer the clear button, since a required\nvalue cannot be unset. It can still be initialized unset (with a\nnon-finite `value`) to prompt the user to make a choice."
                 },
                 "getter": false,
                 "setter": false,
@@ -350,11 +475,38 @@ export class Slider {
                 "attribute": "unit",
                 "defaultValue": "''"
             },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Languages",
+                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+                    "references": {
+                        "Languages": {
+                            "location": "import",
+                            "path": "../date-picker/date.types",
+                            "id": "src/components/date-picker/date.types.ts::Languages",
+                            "referenceLocation": "Languages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the language for translations of the accessible labels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "language",
+                "defaultValue": "'en'"
+            },
             "value": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
+                    "original": "number | null",
                     "resolved": "number",
                     "references": {}
                 },
@@ -362,7 +514,7 @@ export class Slider {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The value of the input"
+                    "text": "The value of the input. Set it to `null` to leave the slider unset,\nwhich is also what the `change` event emits once the value is cleared.\nAny other value that is not a finite number \u2014 `undefined`, or `NaN` \u2014\nunsets the slider too."
                 },
                 "getter": false,
                 "setter": false,
@@ -433,7 +585,8 @@ export class Slider {
     static get states() {
         return {
             "percentageClass": {},
-            "displayValue": {}
+            "displayValue": {},
+            "isUnset": {}
         };
     }
     static get events() {
@@ -445,10 +598,10 @@ export class Slider {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the value has been changed"
+                    "text": "Emitted when the value has been changed.\nEmits `null` when the value has been cleared and the slider becomes\nunset, so handlers must account for a value that is not a number."
                 },
                 "complexType": {
-                    "original": "number",
+                    "original": "number | null",
                     "resolved": "number",
                     "references": {}
                 }

package/dist/collection/global/translations.js

@@ -13,18 +13,31 @@ const allTranslations = {
     fi: fi,
     fr: fr,
     no: no,
+    nb: no, // Norwegian Bokmål shares the Norwegian (`no`) translations
     nl: nl,
     sv: sv,
 };
 const REGEX = /\{\s*(\w+)\s*\}/g;
 export class Translations {
     get(key, language = 'en', params) {
-        const translation = allTranslations[language][key];
+        var _a, _b;
+        // Fall back to English when the requested language has no translations.
+        // The `language` props are typed, but a custom element takes whatever
+        // string an attribute carries, so an unknown language must never make a
+        // component throw.
+        const languageTranslations = (_a = allTranslations[language]) !== null && _a !== void 0 ? _a : allTranslations.en;
+        // Fall back per key as well: a mapped language whose file is missing
+        // this one key would otherwise render the key itself as UI text.
+        const translation = (_b = languageTranslations[key]) !== null && _b !== void 0 ? _b : allTranslations.en[key];
         if (!translation) {
             return key;
         }
         return translation.replaceAll(REGEX, (match, mergeCodeKey) => {
-            return params[mergeCodeKey] || match;
+            var _a;
+            // Nullish, not falsy: `0` and `false` are values a caller can
+            // legitimately merge in, and `||` would leave the merge code
+            // itself in the string instead.
+            return String((_a = params === null || params === void 0 ? void 0 : params[mergeCodeKey]) !== null && _a !== void 0 ? _a : match);
         });
     }
 }

package/dist/collection/translations/da.js

@@ -1,4 +1,7 @@
 export default {
+    'clear-value': 'Ryd værdi',
+    'clear-value-of': 'Ryd værdien for { label }',
+    'value-not-set': 'Værdi ikke angivet',
     remove: 'Fjern',
     save: 'Gem',
     cancel: 'Annullér',

package/dist/collection/translations/de.js

@@ -1,4 +1,7 @@
 export default {
+    'clear-value': 'Wert löschen',
+    'clear-value-of': 'Wert von { label } löschen',
+    'value-not-set': 'Wert nicht festgelegt',
     remove: 'Entfernen',
     save: 'Speichern',
     cancel: 'Abbrechen',

package/dist/collection/translations/en.js

@@ -1,4 +1,7 @@
 export default {
+    'clear-value': 'Clear value',
+    'clear-value-of': 'Clear value of { label }',
+    'value-not-set': 'Value not set',
     remove: 'Remove',
     save: 'Save',
     cancel: 'Cancel',

package/dist/collection/translations/fi.js

@@ -1,4 +1,7 @@
 export default {
+    'clear-value': 'Tyhjennä arvo',
+    'clear-value-of': 'Tyhjennä kentän { label } arvo',
+    'value-not-set': 'Arvoa ei asetettu',
     remove: 'Poista',
     save: 'Tallenna',
     cancel: 'Peruuta',

package/dist/collection/translations/fr.js

@@ -1,4 +1,7 @@
 export default {
+    'clear-value': 'Effacer la valeur',
+    'clear-value-of': 'Effacer la valeur de { label }',
+    'value-not-set': 'Valeur non définie',
     remove: 'Supprimer',
     save: 'Enregistrer',
     cancel: 'Annuler',

package/dist/collection/translations/nl.js

@@ -1,4 +1,7 @@
 export default {
+    'clear-value': 'Waarde wissen',
+    'clear-value-of': 'Waarde van { label } wissen',
+    'value-not-set': 'Waarde niet ingesteld',
     remove: 'Verwijder',
     save: 'Opslaan',
     cancel: 'Annuleren',

package/dist/collection/translations/no.js

@@ -1,4 +1,7 @@
 export default {
+    'clear-value': 'Tøm verdi',
+    'clear-value-of': 'Tøm verdien for { label }',
+    'value-not-set': 'Verdi ikke angitt',
     remove: 'Fjerne',
     save: 'Lagre',
     cancel: 'Avbryt',

package/dist/collection/translations/sv.js

@@ -1,4 +1,7 @@
 export default {
+    'clear-value': 'Rensa värde',
+    'clear-value-of': 'Rensa värdet för { label }',
+    'value-not-set': 'Värde inte angivet',
     remove: 'Ta bort',
     save: 'Spara',
     cancel: 'Avbryt',