@limetech/lime-elements 39.45.2 → 40.0.0

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DYg_7kkT.js');
-var translations = require('./translations-Bnw00bkf.js');
+var translations = require('./translations-Do_D3pxu.js');
 var fileMetadata = require('./file-metadata-BrhOssGG.js');
 var formatBytes = require('./format-bytes-CpUKKU86.js');
 var imageResize = require('./image-resize-CG2fitJT.js');

package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DYg_7kkT.js');
-var translations = require('./translations-Bnw00bkf.js');
+var translations = require('./translations-Do_D3pxu.js');
 var _commonjsHelpers = require('./_commonjsHelpers-CFO10eej.js');
 require('./sv-BSR4W58y.js');
 var moment = require('./moment-CqRdiK10.js');

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

@@ -29155,8 +29155,15 @@ function NullField(props) {
     return null;
 }
 
-// Static matchers for standard '.' separator used during normalization inside handleChange
+// Matches a string that ends in a . character, optionally followed by a sequence of
+// digits followed by any number of 0 characters up until the end of the line.
+// Ensuring that there is at least one prefixed character is important so that
+// you don't incorrectly match against "0".
 const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
+// This is used for trimming the trailing 0 and . characters without affecting
+// the rest of the string. Its possible to use one RegEx with groups for this
+// functionality, but it is fairly complex compared to simply defining two
+// different matchers.
 const trailingCharMatcher = /[0.]0*$/;
 /**
  * The NumberField class has some special handling for dealing with trailing
@@ -29179,8 +29186,6 @@ function NumberField(props) {
     const { registry, onChange, formData, value: initialValue } = props;
     const [lastValue, setLastValue] = reactExports.useState(initialValue);
     const { StringField } = registry.fields;
-    const separator = getDecimalSeparator();
-    const escapedSeparator = separator === '.' ? '\\.' : separator;
     let value = formData;
     /** Handle the change from the `StringField` to properly convert to a number
      *
@@ -29189,11 +29194,9 @@ function NumberField(props) {
     const handleChange = reactExports.useCallback((newValue, path, errorSchema, id) => {
         // Cache the original value in component state
         setLastValue(newValue);
-        // Convert locale separator to standard '.' first
-        const standardValue = typeof newValue === 'string' ? newValue.replace(separator, '.') : newValue;
         // Normalize decimals that don't start with a zero character in advance so
         // that the rest of the normalization logic is simpler
-        const normalizedValue = `${standardValue}`.startsWith('.') ? `0${standardValue}` : standardValue;
+        const normalizedValue = `${newValue}`.startsWith('.') ? `0${newValue}` : newValue;
         // Check that the value is a string (this can happen if the widget used is a
         // <select>, due to an enum declaration etc) then, if the value ends in a
         // trailing decimal point or multiple zeroes, strip the trailing values
@@ -29201,33 +29204,19 @@ function NumberField(props) {
             ? asNumber(normalizedValue.replace(trailingCharMatcher, ''))
             : asNumber(normalizedValue);
         onChange(processed, path, errorSchema, id);
-    }, [onChange, separator]);
+    }, [onChange]);
     if (typeof lastValue === 'string' && typeof value === 'number') {
         // Construct a regular expression that checks for a string that consists
-        // of the formData value suffixed with zero or one locale separator characters and zero
+        // of the formData value suffixed with zero or one '.' characters and zero
         // or more '0' characters
-        const re = new RegExp(`^(${String(value).replace('.', escapedSeparator)})?${escapedSeparator}?0*$`);
+        const re = new RegExp(`^(${String(value).replace('.', '\\.')})?\\.?0*$`);
         // If the cached "lastValue" is a match, use that instead of the formData
         // value to prevent the input value from changing in the UI
         if (lastValue.match(re)) {
             value = lastValue;
         }
     }
-    // Format value to use the locale separator for rendering if it is a number
-    let displayValue = value;
-    if (typeof value === 'number' && separator !== '.') {
-        const { schema, uiSchema } = props;
-        const { schemaUtils } = registry;
-        const enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema, uiSchema) : undefined;
-        const defaultWidget = enumOptions ? 'select' : 'text';
-        const { widget = defaultWidget } = getUiOptions(uiSchema);
-        // Do not convert the value to a locale-specific string for radio, select,
-        // or hidden widgets because option matching relies on the original numeric value.
-        if (widget !== 'radio' && widget !== 'select' && widget !== 'hidden') {
-            displayValue = String(value).replace('.', separator);
-        }
-    }
-    return jsxRuntimeExports.jsx(StringField, { ...props, formData: displayValue, onChange: handleChange });
+    return jsxRuntimeExports.jsx(StringField, { ...props, formData: value, onChange: handleChange });
 }
 
 var q={af:"\u2061",applyfunction:"\u2061",ic:"\u2063",invisiblecomma:"\u2063",invisibletimes:"\u2062",it:"\u2062",lrm:"\u200E",negativemediumspace:"\u200B",negativethickspace:"\u200B",negativethinspace:"\u200B",negativeverythinspace:"\u200B",nobreak:"\u2060",rlm:"\u200F",shy:"\xAD",zerowidthspace:"\u200B",zwj:"\u200D",zwnj:"\u200C",downbreve:"\u0311",tdot:"\u20DB",tripledot:"\u20DB",dotdot:"\u20DC",tab:"	",newline:`
@@ -29320,12 +29309,6 @@ function getDefaultValue(translateString, type) {
             return translateString(TranslatableString.NewStringDefault);
     }
 }
-function isAdditionalPropertySchema(schema) {
-    return Boolean(schema?.[ADDITIONAL_PROPERTY_FLAG]);
-}
-function getAdditionalPropertyOrder(schemaProperties) {
-    return Object.keys(schemaProperties).filter((property) => isAdditionalPropertySchema(schemaProperties[property]));
-}
 /** The `ObjectFieldProperty` component is used to render the `SchemaField` for a child property of an object
  */
 function ObjectFieldPropertyFn(props) {
@@ -29390,15 +29373,10 @@ function ObjectField$1(props) {
     formDataRef.current = formData;
     const schema = reactExports.useMemo(() => schemaUtils.retrieveSchema(rawSchema, formData, true), [schemaUtils, rawSchema, formData]);
     const uiOptions = reactExports.useMemo(() => getUiOptions(uiSchema, globalUiOptions), [uiSchema, globalUiOptions]);
-    const schemaProperties = reactExports.useMemo(() => schema.properties ?? {}, [schema.properties]);
+    const { properties: schemaProperties = {} } = schema;
     // All the children will use childFieldPathId if present in the props, falling back to the fieldPathId
     const childFieldPathId = props.childFieldPathId ?? fieldPathId;
     const lastRenamedProperty = reactExports.useRef({ previousKey: '', currentKey: undefined });
-    const [additionalPropertyOrder, setAdditionalPropertyOrder] = reactExports.useState(() => getAdditionalPropertyOrder(schemaProperties));
-    const definedPropertyOrder = reactExports.useMemo(() => {
-        const additionalPropertySet = new Set(getAdditionalPropertyOrder(schemaProperties));
-        return Object.keys(schemaProperties).filter((property) => !additionalPropertySet.has(property));
-    }, [schemaProperties]);
     const templateTitle = uiOptions.title ?? schema.title ?? title ?? name;
     const description = uiOptions.description ?? schema.description;
     const renderOptionalField = shouldRenderOptionalField(registry, schema, required, uiSchema);
@@ -29461,7 +29439,6 @@ function ObjectField$1(props) {
             lastRenamedProperty.current.currentKey = newKey;
             lastRenamedProperty.current.previousKey = getAvailableKey(newKey, newFormData);
         }
-        setAdditionalPropertyOrder((order) => [...order, newKey]);
         onChange(newFormData, childFieldPathId.path);
     }, [formData, onChange, translateString, schemaUtils, childFieldPathId, getAvailableKey, schema]);
     /** Returns a callback function that deals with the rename of a key for an additional property for a schema. That
@@ -29490,7 +29467,6 @@ function ObjectField$1(props) {
                 lastRenamedProperty.current.previousKey = oldKey;
             }
             lastRenamedProperty.current.currentKey = actualNewKey;
-            setAdditionalPropertyOrder((order) => order.map((property) => (property === oldKey ? actualNewKey : property)));
             onChange(renamedObj, childFieldPathId.path);
         }
     }, [onChange, childFieldPathId, getAvailableKey]);
@@ -29498,7 +29474,6 @@ function ObjectField$1(props) {
      * value for the path plus the key to be removed
      */
     const handleRemoveProperty = reactExports.useCallback((key) => {
-        setAdditionalPropertyOrder((order) => order.filter((property) => property !== key));
         onChange(ADDITIONAL_PROPERTY_KEY_REMOVE, [...childFieldPathId.path, key]);
     }, [onChange, childFieldPathId]);
     /** Returns the stable React key for a property. For the most recently renamed
@@ -29514,9 +29489,8 @@ function ObjectField$1(props) {
     }, []);
     if (!renderOptionalField || hasFormData) {
         try {
-            const definedPropertySet = new Set(definedPropertyOrder);
-            const currentAdditionalProperties = additionalPropertyOrder.filter((property) => Object.hasOwn(schemaProperties, property) && !definedPropertySet.has(property));
-            orderedProperties = orderProperties([...definedPropertyOrder, ...currentAdditionalProperties], uiOptions.order);
+            const properties = Object.keys(schemaProperties);
+            orderedProperties = orderProperties(properties, uiOptions.order);
         }
         catch (err) {
             return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: 'rjsf-config-error', style: { color: 'red' }, children: jsxRuntimeExports.jsx(AZ, { options: { disableParsingRawHTML: true }, children: translateString(TranslatableString.InvalidObjectField, [name || 'root', err.message]) }) }), jsxRuntimeExports.jsx("pre", { children: JSON.stringify(schema) })] }));
@@ -29529,7 +29503,7 @@ function ObjectField$1(props) {
         title: uiOptions.label === false ? '' : templateTitle,
         description: uiOptions.label === false ? undefined : description,
         properties: orderedProperties.map((propertyName) => {
-            const addedByAdditionalProperties = isAdditionalPropertySchema(schema.properties?.[propertyName]);
+            const addedByAdditionalProperties = Boolean(schema.properties?.[propertyName]?.[ADDITIONAL_PROPERTY_FLAG]);
             const fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[propertyName];
             const hidden = getUiOptions(fieldUiSchema).widget === 'hidden';
             const content = (jsxRuntimeExports.jsx(ObjectFieldProperty, { propertyName: propertyName, required: isRequired(schema, propertyName), schema: _baseIteratee.get(schema, [PROPERTIES_KEY, propertyName], {}), uiSchema: fieldUiSchema, errorSchema: _baseIteratee.get(errorSchema, [propertyName]), fieldPathId: childFieldPathId, formData: _baseIteratee.get(formData, [propertyName]), handleKeyRename: handleKeyRename, handleRemoveProperty: handleRemoveProperty, addedByAdditionalProperties: addedByAdditionalProperties, onChange: onChange, onBlur: onBlur, onFocus: onFocus, registry: registry, disabled: disabled, readonly: readonly, hideError: hideError }, getStableKey(propertyName)));

package/dist/cjs/limel-list-item.cjs.entry.js

@@ -5,7 +5,7 @@ var getIconProps = require('./get-icon-props-CwpDdQDI.js');
 var randomString = require('./random-string-BTzDB2ee.js');
 var renderListComponent = require('./render-list-component-1GrRKk_R.js');
 var checkbox_template = require('./checkbox.template-BewtdTin.js');
-var translations = require('./translations-Bnw00bkf.js');
+var translations = require('./translations-Do_D3pxu.js');
 var image_template = require('./image.template-DZC6_5a4.js');
 
 const listItemCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;overflow-wrap:var(--limel-boolean-input-label-overflow-wrap, normal);font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.box{}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{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);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){--limel-boolean-input-label-overflow-wrap:var(       --checkbox-label-overflow-wrap,       normal   );min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox{}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}*,*:before,*:after{box-sizing:border-box}limel-list-item{min-height:2.5rem}limel-list-item:focus{outline:none}limel-list-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-list-item{transition:background-color 0.6s ease;position:relative;isolation:isolate;display:flex;align-items:center;gap:0.5rem;padding:0 1rem;background-color:rgb(var(--contrast-100))}limel-list-item:hover{z-index:1;transition:background-color 0.2s ease;border-radius:0.5rem}limel-list-item:focus,limel-list-item:focus-visible,limel-list-item:active{z-index:1;border-radius:0.5rem}limel-list-item:first-of-type{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}limel-list-item:last-of-type{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}limel-list-item:not([disabled]):not([disabled=true]){cursor:pointer}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]) .text,limel-list-item[disabled]:not([disabled=false]) limel-icon,limel-list-item[disabled]:not([disabled=false]) img,limel-list-item[disabled]:not([disabled=false]) .boolean-input{opacity:0.4}limel-list-item:not([disabled]):not([disabled=true]):hover,limel-list-item:not([disabled]):not([disabled=true]):focus-visible{background-color:rgb(var(--contrast-400))}limel-list-item[type=option]:before{transition:background-color 0.6s ease;content:"";position:absolute;inset:0;opacity:0.2;border-radius:0.5rem}limel-list-item[type=option][selected]:not([selected=false]):before{transition:background-color 0.2s ease;background-color:var(--mdc-theme-primary)}limel-list-item .text{flex-grow:1;min-width:0;display:flex;flex-direction:column;padding:0.5rem 0;color:var(--limel-theme-text-primary-on-background-color)}limel-list-item .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-font-size);line-height:1rem}limel-list-item .description{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:var(--maxLinesSecondaryText);line-height:1rem;font-size:var(--limel-theme-default-small-font-size);opacity:0.6}limel-list-item limel-icon{color:var(--limel-theme-text-secondary-on-background-color);flex-shrink:0;margin-left:-0.5rem}limel-list-item limel-icon:has(+img){margin-left:0;position:absolute;top:0.125rem;left:0.125rem;padding:0.1875rem;width:1.25rem;background-color:rgb(var(--contrast-200), 0.8)}limel-list-item img{flex-shrink:0;object-fit:var(--list-item-image-object-fit, cover);border-radius:var(--list-item-image-border-radius, 50%);width:2rem;height:2rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.5)}limel-list-item limel-menu{margin-right:-0.5rem;order:var(--limel-list-item-menu-order, 3)}limel-list-item[role=menuitem] limel-list-item .label{font-size:var(--limel-theme-default-small-font-size)}.boolean-input,limel-radio-button{width:var(--limel-boolean-input-box-size) !important;margin-left:-0.25rem !important}.boolean-input.checkbox{margin-right:0.25rem}limel-list-item:has(limel-icon) .boolean-input,limel-list-item:has(img) .boolean-input{margin-right:-0.25rem;margin-left:0;order:2}.boolean-input .boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}`;

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DYg_7kkT.js');
-var translations = require('./translations-Bnw00bkf.js');
+var translations = require('./translations-Do_D3pxu.js');
 var dom = require('./dom-BWMDM6En.js');
 var keycodes = require('./keycodes-k-EdzcMX.js');
 var randomString = require('./random-string-BTzDB2ee.js');

package/dist/cjs/limel-profile-picture.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-DYg_7kkT.js');
 var files = require('./files-DI4jItxi.js');
 var getIconProps = require('./get-icon-props-CwpDdQDI.js');
-var translations = require('./translations-Bnw00bkf.js');
+var translations = require('./translations-Do_D3pxu.js');
 var randomString = require('./random-string-BTzDB2ee.js');
 var imageResize = require('./image-resize-CG2fitJT.js');
 var image_template = require('./image.template-DZC6_5a4.js');

package/dist/cjs/limel-prosemirror-adapter.cjs.entry.js

@@ -4,7 +4,7 @@ var index$1 = require('./index-DYg_7kkT.js');
 var types = require('./types-C7gNcwzE.js');
 var markdownParser = require('./markdown-parser-YH5HSSgF.js');
 var cloneDeep = require('./cloneDeep-hE40Q8aw.js');
-var translations = require('./translations-Bnw00bkf.js');
+var translations = require('./translations-Do_D3pxu.js');
 var index = require('./index-ETPz91V5.js');
 var randomString = require('./random-string-BTzDB2ee.js');
 var isItem = require('./is-item-DMELyaao.js');
@@ -23296,34 +23296,6 @@ class MarkdownSerializerState {
                     let next = parent.child(index + 1);
                     return m.isInSet(next.marks) && (!next.isText || /\S/.test(next.text));
                 });
-            let leading = trailing;
-            trailing = "";
-            // If whitespace has to be expelled from the node, adjust
-            // leading and trailing accordingly.
-            if (node && node.isText && marks.some(mark => {
-                let info = this.getMark(mark.type.name);
-                return info && info.expelEnclosingWhitespace && !mark.isInSet(active);
-            })) {
-                let [_, lead, rest] = /^(\s*)(.*)$/m.exec(node.text);
-                if (lead) {
-                    leading += lead;
-                    node = rest ? node.withText(rest) : null;
-                    if (!node)
-                        marks = active;
-                }
-            }
-            if (node && node.isText && marks.some(mark => {
-                let info = this.getMark(mark.type.name);
-                return info && info.expelEnclosingWhitespace && !this.isMarkAhead(parent, index + 1, mark);
-            })) {
-                let [_, rest, trail] = /^(.*?)(\s*)$/m.exec(node.text);
-                if (trail) {
-                    trailing = trail;
-                    node = rest ? node.withText(rest) : null;
-                    if (!node)
-                        marks = active;
-                }
-            }
             let inner = marks.length ? marks[marks.length - 1] : null;
             let noEsc = inner && this.getMark(inner.type.name).escape === false;
             let len = marks.length - (noEsc ? 1 : 0);
@@ -23352,9 +23324,38 @@ class MarkdownSerializerState {
             let keep = 0;
             while (keep < Math.min(active.length, len) && marks[keep].eq(active[keep]))
                 ++keep;
+            let leading = trailing;
+            trailing = "";
+            // If whitespace has to be expelled from the node, adjust
+            // leading and trailing accordingly.
+            if (node && node.isText && marks.some(mark => {
+                let info = this.getMark(mark.type.name);
+                return info && info.expelEnclosingWhitespace && !active.some((m, i) => i < keep && m.eq(mark));
+            })) {
+                let [_, lead, rest] = /^(\s*)(.*)$/m.exec(node.text);
+                if (lead) {
+                    leading += lead;
+                    node = rest ? node.withText(rest) : null;
+                    if (!node)
+                        marks = active;
+                }
+            }
+            if (node && node.isText && marks.some(mark => {
+                let info = this.getMark(mark.type.name);
+                return info && info.expelEnclosingWhitespace && !this.isMarkAhead(parent, index + 1, mark);
+            })) {
+                let [_, rest, trail] = /^(.*?)(\s*)$/m.exec(node.text);
+                if (trail) {
+                    trailing = trail;
+                    node = rest ? node.withText(rest) : null;
+                    if (!node)
+                        marks = active;
+                }
+            }
             // Close the marks that need to be closed
-            while (keep < active.length)
-                this.text(this.markString(active.pop(), false, parent, index), false);
+            if (node || index == parent.childCount)
+                while (keep < active.length)
+                    this.text(this.markString(active.pop(), false, parent, index), false);
             // Output any previously expelled trailing whitespace outside the marks
             if (leading)
                 this.text(leading);
@@ -23374,15 +23375,14 @@ class MarkdownSerializerState {
                 else
                     this.render(node, parent, index);
                 this.atBlockStart = false;
-            }
-            // After the first non-empty text node is rendered, the end of output
-            // is no longer at block start.
-            //
-            // FIXME: If a non-text node writes something to the output for this
-            // block, the end of output is also no longer at block start. But how
-            // can we detect that?
-            if ((node === null || node === void 0 ? void 0 : node.isText) && node.nodeSize > 0) {
-                this.atBlockStart = false;
+                // After the first non-empty text node is rendered, the end of output
+                // is no longer at block start.
+                //
+                // FIXME: If a non-text node writes something to the output for this
+                // block, the end of output is also no longer at block start. But how
+                // can we detect that?
+                if (node.isText && node.nodeSize > 0)
+                    this.atBlockStart = false;
             }
         };
         parent.forEach(progress);

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

@@ -2,6 +2,7 @@
 
 var index = require('./index-DYg_7kkT.js');
 var randomString = require('./random-string-BTzDB2ee.js');
+var translations = require('./translations-Do_D3pxu.js');
 
 /**
  *
@@ -50,12 +51,23 @@ function getPercentageClass(value) {
     return 'percent-90-100';
 }
 
-const sliderCss = () => `@charset "UTF-8";:host([displays-percentage-colors].percent-0){--lime-primary-color:var(--color-percent--0)}:host([displays-percentage-colors].percent-0-10){--lime-primary-color:var(--color-percent--0to10)}:host([displays-percentage-colors].percent-10-20){--lime-primary-color:var(--color-percent--10to20)}:host([displays-percentage-colors].percent-20-30){--lime-primary-color:var(--color-percent--20to30)}:host([displays-percentage-colors].percent-30-40){--lime-primary-color:var(--color-percent--30to40)}:host([displays-percentage-colors].percent-40-50){--lime-primary-color:var(--color-percent--40to50)}:host([displays-percentage-colors].percent-50-60){--lime-primary-color:var(--color-percent--50to60)}:host([displays-percentage-colors].percent-60-70){--lime-primary-color:var(--color-percent--60to70)}:host([displays-percentage-colors].percent-70-80){--lime-primary-color:var(--color-percent--70to80)}:host([displays-percentage-colors].percent-80-90){--lime-primary-color:var(--color-percent--80to90)}:host([displays-percentage-colors].percent-90-100){--lime-primary-color:var(--color-percent--90to100)}:host([displays-percentage-colors].percent-30-40) .indicator,:host([displays-percentage-colors].percent-40-50) .indicator,:host([displays-percentage-colors].percent-70-80) .indicator{color:rgb(var(--color-gray-darker))}:host([displays-percentage-colors].percent-50-60) .indicator,:host([displays-percentage-colors].percent-60-70) .indicator{color:rgb(var(--color-gray-dark))}:host([readonly]:not([readonly=false])) input[type=range]{cursor:default}:host([readonly]:not([readonly=false])) .track,:host([readonly]:not([readonly=false])) .active,:host([readonly]:not([readonly=false])) .indicator{height:0.75rem}:host([readonly]:not([readonly=false])) .indicator{box-shadow:none}:host([readonly]:not([readonly=false])) .knob{opacity:0}:host([readonly]:not([readonly=false])) .active{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.thumb{position:absolute;left:calc(var(--slider-fraction) * 100%);top:0;bottom:0;width:0;z-index:1}.knob{transition:border-color 0.5s ease;position:absolute;top:50%;left:0;transform:translate3d(-50%, -50%, 0);width:1.25rem;height:1.25rem;border-radius:50%;border:0.5rem solid;border-color:var(--lime-primary-color, var(--limel-theme-primary-color));background-color:rgb(var(--contrast-100))}.knob:before,.knob:after{transition:all 0.2s ease 0.2s;content:"";display:block;position:absolute;top:0;bottom:0;margin:auto;width:0;height:0;border:0.375rem solid transparent}:host([disabled]:not([disabled=false])) .knob:before,:host([disabled]:not([disabled=false])) .knob:after{content:none}.knob:before{opacity:calc(var(--slider-fraction) * 100);left:-1rem;transform:rotate(90deg)}.knob:after{opacity:calc((1 - var(--slider-fraction)) * 100);right:-1rem;transform:rotate(-90deg)}.slider:hover .knob,.slider:has(input[type=range]:active) .knob,.slider:has(input[type=range]:focus) .knob{box-shadow:var(--button-shadow-normal)}.slider:hover .knob:before,.slider:has(input[type=range]:active) .knob:before,.slider:has(input[type=range]:focus) .knob:before{left:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.slider:hover .knob:after,.slider:has(input[type=range]:active) .knob:after,.slider:has(input[type=range]:focus) .knob:after{right:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.indicator{user-select:none;position:absolute;left:0;top:50%;z-index:1;transform:translate3d(-50%, -50%, 0);transform-origin:bottom center;transition:transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.5s ease;border-radius:1.25rem;padding:0 0.375rem;height:1.25rem;display:flex;align-items:center;white-space:nowrap;color:rgb(var(--color-white));font-size:0.6875rem;background-color:var(--lime-primary-color, var(--limel-theme-primary-color));box-shadow:var(--button-shadow-normal)}:host(:not([disabled]):not([readonly])) input[type=range]:active~.thumb .indicator,:host(:not([disabled]):not([readonly])) input[type=range]:focus~.thumb .indicator{transform:translate3d(-50%, calc(-100% - 0.75rem), 0) scale(1.25);box-shadow:var(--shadow-depth-16)}*,*:before,*:after{box-sizing:border-box;min-width:0;min-height:0}:host(limel-slider){box-sizing:border-box;isolation:isolate;position:relative;display:flex;flex-direction:column}:host(limel-slider:not([invalid]):not([invalid=true])) .limel-notched-outline,:host(limel-slider[disabled]:not([disabled=false])) .limel-notched-outline{--limel-notched-outline-border-color:transparent;--limel-notched-outline-background-color:transparent}div[slot=content]{display:flex;flex-direction:column;width:100%;padding:0 0.25rem}.slider{position:relative;height:2.5rem;margin:0 0.75rem}input[type=range]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;margin:0;appearance:none}:host([disabled]:not([disabled=false])) input[type=range]{cursor:not-allowed}:host([disabled]:not([disabled=false])) .track .active{opacity:0.5}:host([disabled]:not([disabled=false])) .indicator{border-radius:0.125rem;box-shadow:var(--button-shadow-pressed)}.track{transition:background-color 0.5s ease;display:flex;align-items:center;justify-content:space-between;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:0.5rem;border-radius:1rem;background-color:rgba(var(--contrast-700), 0.6)}.track:before,.track:after{content:"";display:inline-block;position:absolute;top:0;bottom:0;margin:auto;width:0.375rem;height:0.375rem;border-radius:50%;background-color:rgba(var(--contrast-700), 0.6)}.track:before{left:-0.75rem}.track:after{right:-0.75rem}.track .active{transition:background-color 0.5s ease;position:absolute;height:100%;width:calc(var(--slider-fraction) * 100%);border-radius:inherit;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.step-dot{transform:translateX(-50%);border-radius:50%;height:0.25rem;width:0.25rem;background-color:rgb(var(--contrast-100), 0.6)}.step-dot:first-of-type,.step-dot:last-of-type{opacity:0}.range-labels{display:flex;justify-content:space-between;margin-top:-0.75rem;width:100%}.range-labels .min,.range-labels .max{line-height:1;font-size:0.75rem;color:var(--limel-notched-outline-label-color, rgb(var(--contrast-1200)))}:host(limel-slider:focus),:host(limel-slider:focus-visible),:host(limel-slider:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-slider){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-slider:focus) limel-helper-line,:host(limel-slider:focus-visible) limel-helper-line,:host(limel-slider:focus-within) limel-helper-line,:host(limel-slider:hover) limel-helper-line{will-change:grid-template-rows}`;
+const sliderCss = () => `@charset "UTF-8";:host([displays-percentage-colors].percent-0){--lime-primary-color:var(--color-percent--0)}:host([displays-percentage-colors].percent-0-10){--lime-primary-color:var(--color-percent--0to10)}:host([displays-percentage-colors].percent-10-20){--lime-primary-color:var(--color-percent--10to20)}:host([displays-percentage-colors].percent-20-30){--lime-primary-color:var(--color-percent--20to30)}:host([displays-percentage-colors].percent-30-40){--lime-primary-color:var(--color-percent--30to40)}:host([displays-percentage-colors].percent-40-50){--lime-primary-color:var(--color-percent--40to50)}:host([displays-percentage-colors].percent-50-60){--lime-primary-color:var(--color-percent--50to60)}:host([displays-percentage-colors].percent-60-70){--lime-primary-color:var(--color-percent--60to70)}:host([displays-percentage-colors].percent-70-80){--lime-primary-color:var(--color-percent--70to80)}:host([displays-percentage-colors].percent-80-90){--lime-primary-color:var(--color-percent--80to90)}:host([displays-percentage-colors].percent-90-100){--lime-primary-color:var(--color-percent--90to100)}:host([displays-percentage-colors].percent-30-40) .indicator,:host([displays-percentage-colors].percent-40-50) .indicator,:host([displays-percentage-colors].percent-70-80) .indicator{color:rgb(var(--color-gray-darker))}:host([displays-percentage-colors].percent-50-60) .indicator,:host([displays-percentage-colors].percent-60-70) .indicator{color:rgb(var(--color-gray-dark))}:host([readonly]:not([readonly=false])) input[type=range]{cursor:default}:host([readonly]:not([readonly=false])) .track,:host([readonly]:not([readonly=false])) .active,:host([readonly]:not([readonly=false])) .indicator{height:0.75rem}:host([readonly]:not([readonly=false])) .indicator{box-shadow:none}:host([readonly]:not([readonly=false])) .knob{opacity:0}:host([readonly]:not([readonly=false])) .active{background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.thumb{position:absolute;left:calc(var(--slider-fraction) * 100%);top:0;bottom:0;width:0;z-index:1}.knob{transition:border-color 0.5s ease;position:absolute;top:50%;left:0;transform:translate3d(-50%, -50%, 0);width:1.25rem;height:1.25rem;border-radius:50%;border:0.5rem solid;border-color:var(--lime-primary-color, var(--limel-theme-primary-color));background-color:rgb(var(--contrast-100))}.knob:before,.knob:after{transition:all 0.2s ease 0.2s;content:"";display:block;position:absolute;top:0;bottom:0;margin:auto;width:0;height:0;border:0.375rem solid transparent}:host([disabled]:not([disabled=false])) .knob:before,:host([disabled]:not([disabled=false])) .knob:after{content:none}.knob:before{opacity:calc(var(--slider-fraction) * 100);left:-1rem;transform:rotate(90deg)}.knob:after{opacity:calc((1 - var(--slider-fraction)) * 100);right:-1rem;transform:rotate(-90deg)}.slider:hover .knob,.slider:has(input[type=range]:active) .knob,.slider:has(input[type=range]:focus) .knob{box-shadow:var(--button-shadow-normal)}.slider:hover .knob:before,.slider:has(input[type=range]:active) .knob:before,.slider:has(input[type=range]:focus) .knob:before{left:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.slider:hover .knob:after,.slider:has(input[type=range]:active) .knob:after,.slider:has(input[type=range]:focus) .knob:after{right:-1.5rem;border-top-color:rgb(var(--contrast-1400), 0.5)}.indicator{user-select:none;position:absolute;left:0;top:50%;z-index:1;transform:translate3d(-50%, -50%, 0);transform-origin:bottom center;transition:transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.5s ease;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;background-color:var(--lime-primary-color, var(--limel-theme-primary-color));box-shadow:var(--button-shadow-normal)}:host(:not([disabled]):not([readonly])) input[type=range]:active~.thumb .indicator,:host(:not([disabled]):not([readonly])) input[type=range]:focus~.thumb .indicator{transform:translate3d(-50%, calc(-100% - 0.75rem), 0) scale(1.25);box-shadow:var(--shadow-depth-16)}*,*:before,*:after{box-sizing:border-box;min-width:0;min-height:0}:host(limel-slider){box-sizing:border-box;isolation:isolate;position:relative;display:flex;flex-direction:column}:host(limel-slider:not([invalid]):not([invalid=true])) .limel-notched-outline,:host(limel-slider[disabled]:not([disabled=false])) .limel-notched-outline{--limel-notched-outline-border-color:transparent;--limel-notched-outline-background-color:transparent}div[slot=content]{display:flex;flex-direction:column;width:100%;padding:0 0.25rem}.slider{position:relative;height:2.5rem;margin:0 0.75rem}input[type=range]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2;margin:0;appearance:none}:host([disabled]:not([disabled=false])) input[type=range]{cursor:not-allowed}:host([disabled]:not([disabled=false])) .track .active{opacity:0.5}:host([disabled]:not([disabled=false])) .indicator{border-radius:0.125rem;box-shadow:var(--button-shadow-pressed)}.track{transition:background-color 0.5s ease;display:flex;align-items:center;justify-content:space-between;position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:0.5rem;border-radius:1rem;background-color:rgba(var(--contrast-700), 0.6)}.track:before,.track:after{content:"";display:inline-block;position:absolute;top:0;bottom:0;margin:auto;width:0.375rem;height:0.375rem;border-radius:50%;background-color:rgba(var(--contrast-700), 0.6)}.track:before{left:-0.75rem}.track:after{right:-0.75rem}.track .active{transition:background-color 0.5s ease;position:absolute;height:100%;width:calc(var(--slider-fraction) * 100%);border-radius:inherit;background-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.step-dot{transform:translateX(-50%);border-radius:50%;height:0.25rem;width:0.25rem;background-color:rgb(var(--contrast-100), 0.6)}.step-dot:first-of-type,.step-dot:last-of-type{opacity:0}.range-labels{display:flex;justify-content:space-between;margin-top:-0.75rem;width:100%}.range-labels .min,.range-labels .max{line-height:1;font-size:0.75rem;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){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-slider){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-slider:focus) limel-helper-line,:host(limel-slider:focus-visible) limel-helper-line,:host(limel-slider:focus-within) limel-helper-line,:host(limel-slider:hover) limel-helper-line{will-change:grid-template-rows}`;
 
 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);
+};
 const Slider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -82,6 +94,9 @@ const Slider = class {
         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;
         /**
@@ -98,6 +113,10 @@ const Slider = class {
          * 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
          */
@@ -106,6 +125,37 @@ const Slider = class {
          * 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;
@@ -123,24 +173,87 @@ const Slider = class {
             }
             return (index.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
+                ? translations.translate.get('clear-value-of', this.language, {
+                    label: this.label,
+                })
+                : translations.translate.get('clear-value', this.language);
+            return (index.h("button", { type: "button", id: this.clearButtonId, class: "clear-button", "aria-label": label, onClick: this.handleClear, disabled: this.isUnset || this.disabled }, index.h("svg", { viewBox: "0 0 32 32", "aria-hidden": "true", focusable: "false" }, index.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" })), index.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 {};
             }
@@ -151,12 +264,18 @@ const Slider = class {
         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);
@@ -180,10 +299,10 @@ const Slider = class {
         };
         this.labelId = randomString.createRandomString();
         this.helperTextId = randomString.createRandomString();
+        this.clearButtonId = randomString.createRandomString();
     }
     componentWillLoad() {
-        this.displayValue = this.multiplyByFactor(this.getValue());
-        this.setPercentageClass(this.getValue());
+        this.syncStateFromValue();
     }
     render() {
         const min = this.multiplyByFactor(this.valuemin);
@@ -196,13 +315,18 @@ const Slider = class {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (index.h(index.Host, { key: 'b525c7a5774b9832788a9fb18c3f00798e910d81', class: this.getContainerClassList() }, index.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 }, index.h("div", { key: 'fe53bc1695fdc29c42139677d0e0dd76ba17ec9e', slot: "content" }, index.h("div", { key: '45effbc8e70d5be0fbbbd30fac34d7a9cf7ef2a8', class: "slider", style: { '--slider-fraction': `${fraction}` } }, index.h("input", Object.assign({ key: '0e7b5da8cca6f95df8528d478619e0e1cc41ee7e', type: "range", min: min, max: max, value: this.displayValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperText
+        return (index.h(index.Host, { key: 'eecd22982d9180f24f947fd2ab9af9a25e64647e', class: this.getContainerClassList() }, index.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 }, index.h("div", { key: '7ad977107b79fc9ca416562d5c7905b4a962053c', slot: "content" }, index.h("div", { key: 'dcb137a44b5244e63a4c8a95341d3918dc65445c', class: "slider", style: { '--slider-fraction': `${fraction}` } }, index.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)), index.h("div", { key: '7a064053a0e89209813c68637991f0e23c6ec877', class: "track" }, index.h("div", { key: '042a6185e0fa842bcd077cefe0934116827432fa', class: "active" }), this.renderStepDots(min, max)), index.h("div", { key: '09f11ca04aa46a02f498507acae7d84e37210f14', class: "thumb" }, index.h("div", { key: 'd1b2513e6694a3bb0bba05a97139cc5fecca62e5', class: "knob" }), index.h("div", { key: 'cc135f641c78e80c9b57e86369e6cdf2cbf152a1', class: "indicator", "aria-hidden": "true" }, this.displayValue))), index.h("div", { key: '76baf35402525fc825667f04a7fdea5d1ff551cc', class: "range-labels" }, index.h("span", { key: 'c7d50a897ae0dcea864b8d98fca72cd1aef19f3b', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), index.h("span", { key: '65c5dee93cc75c978eaf9c6dc7be89f734e74913', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderHelperLine()));
+                : undefined, "aria-valuetext": this.isUnset
+                ? translations.translate.get('value-not-set', this.language)
+                : undefined, ref: (el) => {
+                this.inputElement = el;
+            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), index.h("div", { key: 'e9fb2af7f43cc040c382930d336c8eb903bc0162', class: "track" }, index.h("div", { key: '2cec88a4b8c99296473bbd9b064bccd0a6450b8f', class: "active" }), this.renderStepDots(min, max)), index.h("div", { key: '5a090fb0528478450510ff0240e6b5499a177238', class: "thumb" }, index.h("div", { key: 'fde6792041312183af0328d9fc75d19d2553bf46', class: "knob" }), index.h("div", { key: 'de717ffa20723870bb27aa22e99fe9fe5ebdd563', class: "indicator", "aria-hidden": "true" }, this.isUnset
+            ? '\u2194\uFE0E'
+            : this.displayValue))), index.h("div", { key: 'd0c38d092fecc4bf9690680d8541c8d658056f08', class: "range-labels" }, index.h("span", { key: '581387615da0cdaf105a568e02212f8bdd22eeb6', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), index.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 watchers() { return {
         "value": [{

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-DYg_7kkT.js');
-var translations = require('./translations-Bnw00bkf.js');
+var translations = require('./translations-Do_D3pxu.js');
 var randomString = require('./random-string-BTzDB2ee.js');
 
 /**

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

@@ -4,7 +4,7 @@ var index = require('./index-DYg_7kkT.js');
 var pickBy = require('./pickBy-D-X6S5kg.js');
 var layout = require('./layout-CL_D-afg.js');
 var isEqual = require('./isEqual-Cd9J8a5-.js');
-var translations = require('./translations-Bnw00bkf.js');
+var translations = require('./translations-Do_D3pxu.js');
 require('./_baseIteratee-DDklwtn9.js');
 require('./_baseIsEqual-CQZKiKbe.js');
 require('./eq-DFcUoVzv.js');