@limetech/lime-elements 40.12.1 → 40.12.3

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

@@ -18460,114 +18460,141 @@ function list (state, startLine, endLine, silent) {
   return true
 }
 
-function reference (state, startLine, _endLine, silent) {
-  let pos = state.bMarks[startLine] + state.tShift[startLine];
-  let max = state.eMarks[startLine];
-  let nextLine = startLine + 1;
-
-  // if it's indented more than 3 spaces, it should be a code block
-  if (state.sCount[startLine] - state.blkIndent >= 4) { return false }
+// CommonMark limits reference labels to 999 Unicode code points.
+const MAX_LABEL_LENGTH = 999;
 
-  if (state.src.charCodeAt(pos) !== 0x5B/* [ */) { return false }
+function countCodePoints (str) {
+  let length = str.length;
 
-  function getNextLine (nextLine) {
-    const endLine = state.lineMax;
+  for (let i = 0; i < str.length - 1; i++) {
+    const high = str.charCodeAt(i);
+    if (high < 0xD800 || high > 0xDBFF) { continue }
 
-    if (nextLine >= endLine || state.isEmpty(nextLine)) {
-      // empty line or end of input
-      return null
+    const low = str.charCodeAt(i + 1);
+    if (low >= 0xDC00 && low <= 0xDFFF) {
+      length--;
+      i++;
     }
+  }
 
-    let isContinuation = false;
+  return length
+}
 
-    // this would be a code block normally, but after paragraph
-    // it's considered a lazy continuation regardless of what's there
-    if (state.sCount[nextLine] - state.blkIndent > 3) { isContinuation = true; }
+// Exclusive end offset of the line, after its newline if present
+function lineEnd (state, line) {
+  return Math.min(state.eMarks[line] + 1, state.src.length)
+}
 
-    // quirk for blockquotes, this line should already be checked by that rule
-    if (state.sCount[nextLine] < 0) { isContinuation = true; }
-
-    if (!isContinuation) {
-      const terminatorRules = state.md.block.ruler.getRules('reference');
-      const oldParentType = state.parentType;
-      state.parentType = 'reference';
-
-      // Some tags can terminate paragraph without empty line.
-      let terminate = false;
-      for (let i = 0, l = terminatorRules.length; i < l; i++) {
-        if (terminatorRules[i](state, nextLine, endLine, true)) {
-          terminate = true;
-          break
-        }
-      }
+// Returns -1 if the reference can't continue on this line
+function getNextLinePos (state, nextLine) {
+  const endLine = state.lineMax;
+
+  if (nextLine >= endLine || state.isEmpty(nextLine)) {
+    // empty line or end of input
+    return -1
+  }
+
+  let isContinuation = false;
+
+  // this would be a code block normally, but after paragraph
+  // it's considered a lazy continuation regardless of what's there
+  if (state.sCount[nextLine] - state.blkIndent > 3) { isContinuation = true; }
 
-      state.parentType = oldParentType;
-      if (terminate) {
-        // terminated by another block
-        return null
+  // quirk for blockquotes, this line should already be checked by that rule
+  if (state.sCount[nextLine] < 0) { isContinuation = true; }
+
+  if (!isContinuation) {
+    const terminatorRules = state.md.block.ruler.getRules('reference');
+    const oldParentType = state.parentType;
+    state.parentType = 'reference';
+
+    // Some tags can terminate paragraph without empty line.
+    let terminate = false;
+    for (let i = 0, l = terminatorRules.length; i < l; i++) {
+      if (terminatorRules[i](state, nextLine, endLine, true)) {
+        terminate = true;
+        break
       }
     }
 
-    const pos = state.bMarks[nextLine] + state.tShift[nextLine];
-    const max = state.eMarks[nextLine];
-
-    // max + 1 explicitly includes the newline
-    return state.src.slice(pos, max + 1)
+    state.parentType = oldParentType;
+    if (terminate) {
+      // terminated by another block
+      return -1
+    }
   }
 
-  let str = state.src.slice(pos, max + 1);
+  return state.bMarks[nextLine] + state.tShift[nextLine]
+}
+
+function reference (state, startLine, _endLine, silent) {
+  const src = state.src;
+  let pos = state.bMarks[startLine] + state.tShift[startLine];
+  let nextLine = startLine + 1;
+
+  // if it's indented more than 3 spaces, it should be a code block
+  if (state.sCount[startLine] - state.blkIndent >= 4) { return false }
+
+  if (src.charCodeAt(pos) !== 0x5B/* [ */) { return false }
+
+  // Scan the source directly: indexing a string after each appended line
+  // can make V8 copy the accumulated prefix on every continuation.
+  let max = lineEnd(state, startLine);
 
-  max = str.length;
+  let rawLabel = '';
   let labelEnd = -1;
+  let segmentStart = ++pos;
 
-  for (pos = 1; pos < max; pos++) {
-    const ch = str.charCodeAt(pos);
-    if (ch === 0x5B /* [ */) {
-      return false
-    } else if (ch === 0x5D /* ] */) {
+  while (pos < max) {
+    if (rawLabel.length + pos - segmentStart > MAX_LABEL_LENGTH * 2) { return false }
+
+    let ch = src.charCodeAt(pos);
+    if (ch === 0x5B /* [ */) { return false }
+    if (ch === 0x5D /* ] */) {
       labelEnd = pos;
       break
-    } else if (ch === 0x0A /* \n */) {
-      const lineContent = getNextLine(nextLine);
-      if (lineContent !== null) {
-        str += lineContent;
-        max = str.length;
-        nextLine++;
-      }
-    } else if (ch === 0x5C /* \ */) {
-      pos++;
-      if (pos < max && str.charCodeAt(pos) === 0x0A) {
-        const lineContent = getNextLine(nextLine);
-        if (lineContent !== null) {
-          str += lineContent;
-          max = str.length;
-          nextLine++;
-        }
-      }
     }
+    if (ch === 0x5C /* \ */) { ch = src.charCodeAt(++pos); }
+
+    if (ch === 0x0A /* \n */ && pos < max) {
+      const nextPos = getNextLinePos(state, nextLine);
+      if (nextPos < 0) { return false }
+      rawLabel += src.slice(segmentStart, max);
+      pos = segmentStart = nextPos;
+      max = lineEnd(state, nextLine++);
+      continue
+    }
+    pos++;
   }
 
-  if (labelEnd < 0 || str.charCodeAt(labelEnd + 1) !== 0x3A/* : */) { return false }
+  if (labelEnd < 0 || src.charCodeAt(labelEnd + 1) !== 0x3A/* : */) { return false }
+
+  rawLabel += src.slice(segmentStart, labelEnd);
+
+  if (rawLabel.length > MAX_LABEL_LENGTH && countCodePoints(rawLabel) > MAX_LABEL_LENGTH) {
+    return false
+  }
 
   // [label]:   destination   'title'
   //         ^^^ skip optional whitespace here
-  for (pos = labelEnd + 2; pos < max; pos++) {
-    const ch = str.charCodeAt(pos);
+  pos = labelEnd + 2;
+  while (pos < max) {
+    const ch = src.charCodeAt(pos);
     if (ch === 0x0A) {
-      const lineContent = getNextLine(nextLine);
-      if (lineContent !== null) {
-        str += lineContent;
-        max = str.length;
-        nextLine++;
-      }
-    } else if (isSpace(ch)) ; else {
+      const nextPos = getNextLinePos(state, nextLine);
+      if (nextPos < 0) { break }
+      pos = nextPos;
+      max = lineEnd(state, nextLine++);
+    } else if (isSpace(ch)) {
+      pos++;
+    } else {
       break
     }
   }
 
   // [label]:   destination   'title'
   //            ^^^^^^^^^^^ parse this
-  const destRes = state.md.helpers.parseLinkDestination(str, pos, max);
+  const destRes = state.md.helpers.parseLinkDestination(src, pos, max);
   if (!destRes.ok) { return false }
 
   const href = state.md.normalizeLink(destRes.str);
@@ -18577,76 +18604,77 @@ function reference (state, startLine, _endLine, silent) {
 
   // save cursor state, we could require to rollback later
   const destEndPos = pos;
+  const destEndMax = max;
   const destEndLineNo = nextLine;
 
   // [label]:   destination   'title'
   //                       ^^^ skipping those spaces
-  const start = pos;
-  for (; pos < max; pos++) {
-    const ch = str.charCodeAt(pos);
+  while (pos < max) {
+    const ch = src.charCodeAt(pos);
     if (ch === 0x0A) {
-      const lineContent = getNextLine(nextLine);
-      if (lineContent !== null) {
-        str += lineContent;
-        max = str.length;
-        nextLine++;
-      }
-    } else if (isSpace(ch)) ; else {
+      const nextPos = getNextLinePos(state, nextLine);
+      if (nextPos < 0) { break }
+      pos = nextPos;
+      max = lineEnd(state, nextLine++);
+    } else if (isSpace(ch)) {
+      pos++;
+    } else {
       break
     }
   }
 
   // [label]:   destination   'title'
   //                          ^^^^^^^ parse this
-  let titleRes = state.md.helpers.parseLinkTitle(str, pos, max);
+  const titleStart = pos;
+  let titleRes = state.md.helpers.parseLinkTitle(src, pos, max);
   while (titleRes.can_continue) {
-    const lineContent = getNextLine(nextLine);
-    if (lineContent === null) break
-    str += lineContent;
-    pos = max;
-    max = str.length;
-    nextLine++;
-    titleRes = state.md.helpers.parseLinkTitle(str, pos, max, titleRes);
+    const nextPos = getNextLinePos(state, nextLine);
+    if (nextPos < 0) break
+    pos = nextPos;
+    max = lineEnd(state, nextLine++);
+    titleRes = state.md.helpers.parseLinkTitle(src, pos, max, titleRes);
   }
   let title;
 
-  if (pos < max && start !== pos && titleRes.ok) {
+  if (titleStart !== destEndPos && titleRes.ok) {
     title = titleRes.str;
     pos = titleRes.pos;
   } else {
     title = '';
     pos = destEndPos;
+    max = destEndMax;
     nextLine = destEndLineNo;
   }
 
   // skip trailing spaces until the rest of the line
   while (pos < max) {
-    const ch = str.charCodeAt(pos);
+    const ch = src.charCodeAt(pos);
     if (!isSpace(ch)) { break }
     pos++;
   }
 
-  if (pos < max && str.charCodeAt(pos) !== 0x0A) {
+  if (pos < max && src.charCodeAt(pos) !== 0x0A) {
     if (title) {
       // garbage at the end of the line after title,
       // but it could still be a valid reference if we roll back
       title = '';
       pos = destEndPos;
+      max = destEndMax;
       nextLine = destEndLineNo;
       while (pos < max) {
-        const ch = str.charCodeAt(pos);
+        const ch = src.charCodeAt(pos);
         if (!isSpace(ch)) { break }
         pos++;
       }
     }
   }
 
-  if (pos < max && str.charCodeAt(pos) !== 0x0A) {
+  if (pos < max && src.charCodeAt(pos) !== 0x0A) {
     // garbage at the end of the line
     return false
   }
 
-  const label = normalizeReference(str.slice(1, labelEnd));
+  const label = normalizeReference(rawLabel);
   if (!label) {
     // CommonMark 0.20 disallows empty labels
     return false
@@ -18750,13 +18778,6 @@ const attribute = '(?:\\s+' + attr_name + '(?:\\s*=\\s*' + attr_value + ')?)';
 const open_tag = '<[A-Za-z][A-Za-z0-9\\-]*' + attribute + '*\\s*\\/?>';
 
 const close_tag = '<\\/[A-Za-z][A-Za-z0-9\\-]*\\s*>';
-const comment = '<!---?>|<!--(?:[^-]|-[^-]|--[^>])*-->';
-const processing = '<[?][\\s\\S]*?[?]>';
-const declaration = '<![A-Za-z][^>]*>';
-const cdata = '<!\\[CDATA\\[[\\s\\S]*?\\]\\]>';
-
-const HTML_TAG_RE = new RegExp('^(?:' + open_tag + '|' + close_tag + '|' + comment +
-                        '|' + processing + '|' + declaration + '|' + cdata + ')');
 const HTML_OPEN_CLOSE_TAG_RE = new RegExp('^(?:' + open_tag + '|' + close_tag + ')');
 
 // HTML block
@@ -19171,6 +19192,10 @@ function StateInline (src, md, env, outTokens) {
   this.backticks = {};
   this.backticksScanned = false;
 
+  // Set when html comment / PI / declaration / CDATA has no terminator,
+  // to skip further scans of these constructs
+  this.skipHtmlSpecial = false;
+
   // Counter used to disable inline linkify-it execution
   // inside <a> and markdown links
   this.linkLevel = 0;
@@ -20265,6 +20290,43 @@ function isLetter (ch) {
   return (lc >= 0x61/* a */) && (lc <= 0x7a/* z */)
 }
 
+// Comment, processing instruction, declaration or CDATA: fixed opener,
+// then everything up to the first terminator. Returns end position or -1.
+function scanSpecial (state, pos) {
+  const src = state.src;
+  let start;
+  let terminator;
+
+  if (src.startsWith('<!--', pos)) {
+    if (src.startsWith('>', pos + 4)) { return pos + 5 }
+    if (src.startsWith('->', pos + 4)) { return pos + 6 }
+    start = pos + 4;
+    terminator = '-->';
+  } else if (src.startsWith('<![CDATA[', pos)) {
+    start = pos + 9;
+    terminator = ']]>';
+  } else if (src.charCodeAt(pos + 1) === 0x3F/* ? */) {
+    start = pos + 2;
+    terminator = '?>';
+  } else if (isLetter(src.charCodeAt(pos + 2))) {
+    start = pos + 3;
+    terminator = '>';
+  } else {
+    return -1
+  }
+
+  if (state.skipHtmlSpecial) { return -1 }
+
+  const end = src.indexOf(terminator, start);
+  if (end < 0) {
+    // One flag for all constructs to keep code simple. Valid constructs after
+    // an unclosed one in the same paragraph become text, that's acceptable.
+    state.skipHtmlSpecial = true;
+    return -1
+  }
+  return end + terminator.length
+}
+
 function html_inline (state, silent) {
   if (!state.md.options.html) { return false }
 
@@ -20276,26 +20338,28 @@ function html_inline (state, silent) {
     return false
   }
 
-  // Quick fail on second char
+  let end;
   const ch = state.src.charCodeAt(pos + 1);
-  if (ch !== 0x21/* ! */ &&
-      ch !== 0x3F/* ? */ &&
-      ch !== 0x2F/* / */ &&
-      !isLetter(ch)) {
+
+  if (ch === 0x21/* ! */ || ch === 0x3F/* ? */) {
+    end = scanSpecial(state, pos);
+  } else if (ch === 0x2F/* / */ || isLetter(ch)) {
+    const match = state.src.slice(pos).match(HTML_OPEN_CLOSE_TAG_RE);
+    end = match ? pos + match[0].length : -1;
+  } else {
     return false
   }
 
-  const match = state.src.slice(pos).match(HTML_TAG_RE);
-  if (!match) { return false }
+  if (end < 0) { return false }
 
   if (!silent) {
     const token = state.push('html_inline', '', 0);
-    token.content = match[0];
+    token.content = state.src.slice(pos, end);
 
     if (isLinkOpen(token.content)) state.linkLevel++;
     if (isLinkClose(token.content)) state.linkLevel--;
   }
-  state.pos += match[0].length;
+  state.pos = end;
   return true
 }
 
@@ -28318,6 +28382,15 @@ const ProsemirrorAdapter = class {
          * Specifies the visual appearance of the editor.
          */
         this.ui = 'standard';
+        /**
+         * Set to `true` to indicate that the editable area is required.
+         */
+        this.required = false;
+        /**
+         * Set to `true` to indicate that the current value of the editable area
+         * is invalid.
+         */
+        this.invalid = false;
         this.actionBarItems = [];
         this.link = { href: 'https://' };
         /**
@@ -28328,6 +28401,7 @@ const ProsemirrorAdapter = class {
         this.transactionFired = false;
         this.lastClickedPos = null;
         this.focusRestoreTimeout = null;
+        this.hadFocusWhenDisabled = false;
         this.metadata = { images: [], links: [] };
         /**
          *  Used to stop change event emitting as result of getting updated value from consumer
@@ -28346,6 +28420,7 @@ const ProsemirrorAdapter = class {
             }
             return newItem;
         };
+        this.isEditable = () => !this.disabled;
         this.updateActiveActionBarItems = (activeTypes, allowedTypes) => {
             this.actionBarItems = getTextEditorMenuItems()
                 .map(this.getTranslatedItem)
@@ -28391,8 +28466,7 @@ const ProsemirrorAdapter = class {
         this.handleCancelLinkMenu = (event) => {
             event.preventDefault();
             event.stopPropagation();
-            this.isLinkMenuOpen = false;
-            this.link = { text: '', href: 'https://' };
+            this.closeLinkMenu();
         };
         this.handleSaveLinkMenu = () => {
             this.isLinkMenuOpen = false;
@@ -28509,6 +28583,20 @@ const ProsemirrorAdapter = class {
         }
         await this.updateView('');
     }
+    watchEditableAttributes() {
+        this.updateEditableProps();
+    }
+    watchDisabled(disabled) {
+        var _a;
+        if (disabled) {
+            this.hadFocusWhenDisabled = !!((_a = this.view) === null || _a === void 0 ? void 0 : _a.hasFocus());
+            this.closeLinkMenu();
+        }
+        this.updateEditableProps();
+        if (!disabled) {
+            this.restoreFocus();
+        }
+    }
     watchValue(newValue) {
         if (!this.view) {
             return;
@@ -28568,13 +28656,19 @@ const ProsemirrorAdapter = class {
         (_e = this.view) === null || _e === void 0 ? void 0 : _e.destroy();
     }
     render() {
-        return (index$1.h(index$1.Host, { key: '6c92f1576fdd862e592d0ccf6779c6d3da806808', onFocus: this.handleFocus }, index$1.h("div", { key: '0b1b90a7c68b62ecffed21f4c49fced5333f0d83', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
+        return (index$1.h(index$1.Host, { key: 'eff663aa0d2c0ce2906fc160a70691e78dbda774', onFocus: this.handleFocus }, index$1.h("div", { key: '71111267b9098261ca843516ae067443c7f40740', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
     }
     renderToolbar() {
         if (this.actionBarItems.length === 0 || this.ui === 'no-toolbar') {
             return;
         }
-        return (index$1.h("div", { class: "toolbar" }, index$1.h("limel-action-bar", { ref: (el) => (this.actionBarElement = el), accessibleLabel: translations.translations.get('editor-menu.toolbar', this.language), actions: this.actionBarItems, onItemSelected: this.handleActionBarItem })));
+        return (index$1.h("div", { class: "toolbar" }, index$1.h("limel-action-bar", { ref: (el) => (this.actionBarElement = el), accessibleLabel: translations.translations.get('editor-menu.toolbar', this.language), actions: this.getToolbarItems(), onItemSelected: this.handleActionBarItem })));
+    }
+    getToolbarItems() {
+        if (!this.disabled) {
+            return this.actionBarItems;
+        }
+        return this.actionBarItems.map((item) => isItem.isItem(item) ? Object.assign(Object.assign({}, item), { disabled: true }) : item);
     }
     renderLinkMenu() {
         if (!this.isLinkMenuOpen) {
@@ -28614,6 +28708,8 @@ const ProsemirrorAdapter = class {
         this.view = new EditorView(this.host.shadowRoot.querySelector('#editor'), {
             state: this.createEditorState(initialDoc),
             dispatchTransaction: this.handleTransaction,
+            attributes: this.getEditableAttributes(),
+            editable: this.isEditable,
         });
         this.view.dom.addEventListener('blur', this.handleBlur);
         this.view.dom.addEventListener('mousedown', this.handleMouseDown);
@@ -28623,6 +28719,47 @@ const ProsemirrorAdapter = class {
         // Initialize lastEmittedValue to prevent false change events
         this.lastEmittedValue = this.contentConverter.serialize(this.view, this.schema);
     }
+    updateEditableProps() {
+        var _a;
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.setProps({
+            attributes: this.getEditableAttributes(),
+            editable: this.isEditable,
+        });
+    }
+    restoreFocus() {
+        var _a;
+        const shouldRestore = this.hadFocusWhenDisabled &&
+            document.activeElement === document.body;
+        this.hadFocusWhenDisabled = false;
+        if (shouldRestore) {
+            (_a = this.view) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    getEditableAttributes() {
+        const attributes = {
+            role: 'textbox',
+            'aria-multiline': 'true',
+        };
+        if (this.accessibleLabel) {
+            attributes['aria-label'] = this.accessibleLabel;
+        }
+        if (this.accessibleDescription) {
+            attributes['aria-description'] = this.accessibleDescription;
+        }
+        if (this.accessiblePlaceholder) {
+            attributes['aria-placeholder'] = this.accessiblePlaceholder;
+        }
+        if (this.required) {
+            attributes['aria-required'] = 'true';
+        }
+        if (this.invalid) {
+            attributes['aria-invalid'] = 'true';
+        }
+        if (this.disabled) {
+            attributes['aria-disabled'] = 'true';
+        }
+        return attributes;
+    }
     initializeSchema() {
         return buildEditorSchema({
             customElements: this.customElements,
@@ -28704,9 +28841,31 @@ const ProsemirrorAdapter = class {
             this.imageRemoved.emit(image);
         }
     }
+    closeLinkMenu() {
+        this.isLinkMenuOpen = false;
+        this.link = { text: '', href: 'https://' };
+    }
     static get delegatesFocus() { return true; }
     get host() { return index$1.getElement(this); }
     static get watchers() { return {
+        "accessibleLabel": [{
+                "watchEditableAttributes": 0
+            }],
+        "accessibleDescription": [{
+                "watchEditableAttributes": 0
+            }],
+        "accessiblePlaceholder": [{
+                "watchEditableAttributes": 0
+            }],
+        "required": [{
+                "watchEditableAttributes": 0
+            }],
+        "invalid": [{
+                "watchEditableAttributes": 0
+            }],
+        "disabled": [{
+                "watchDisabled": 0
+            }],
         "value": [{
                 "watchValue": 0
             }]

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

@@ -449,7 +449,7 @@ const SelectTemplate = (props) => {
     };
     return [
         index.h("div", { class: fieldClassList }, index.h("limel-notched-outline", { class: classList, labelId: TRIGGER_ID, labelElementId: LABEL_ID, label: props.label, required: props.required, invalid: !isValid, disabled: props.disabled, readonly: props.readonly, hasValue: hasValue, hasFloatingLabel: floatLabelAbove(props) }, index.h(SelectValue, Object.assign({}, props, { hasValue: hasValue, isValid: isValid, hasEmptyText: hasEmptyText }))), index.h(HelperText, { text: props.helperText, isValid: isValid })),
-        index.h(SelectDropdown, Object.assign({}, props)),
+        index.h(SelectDropdown, Object.assign({}, props, { isValid: isValid })),
     ];
 };
 const getDescribedBy = (props) => {
@@ -511,7 +511,7 @@ const NativeDropdown = (props) => {
     const options = props.options
         .filter((option) => !('separator' in option))
         .map(renderOption(props.value));
-    return (index.h("select", { required: props.required, "aria-labelledby": props.label ? LABEL_ID : undefined, "aria-describedby": getDescribedBy(props), "aria-disabled": props.disabled, "aria-required": props.required, onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, options));
+    return (index.h("select", { required: props.required, "aria-labelledby": props.label ? LABEL_ID : undefined, "aria-describedby": getDescribedBy(props), "aria-disabled": props.disabled, "aria-required": props.required, "aria-invalid": props.isValid ? undefined : 'true', onChange: props.onNativeChange, onFocus: props.open, onBlur: props.close, class: "limel-select__native-control", disabled: props.disabled, multiple: props.multiple }, options));
 };
 const renderOption = (selectedOption) => {
     return (option) => {

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

@@ -307,15 +307,15 @@ const Slider = class {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (index.h(index.Host, { key: '6d910879894ffc7ff36df228e4252e4758622ab9', class: this.getContainerClassList() }, index.h("limel-notched-outline", { key: '56e3b4dbc963b6923c63a33acb21895f4e86c947', labelId: this.inputId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, index.h("div", { key: 'f74ef31e0b7d67dcc8a231a05f9b00b84de50b33', slot: "content" }, index.h("div", { key: '4a4018ac095977f89cba99a0222603469d11ce30', class: "slider", style: { '--slider-fraction': `${fraction}` } }, index.h("input", Object.assign({ key: '588a4049b70749cf54a9faf08d6f0514cbfd2d6c', id: this.inputId, type: "range", min: min, max: max, value: this.displayValue, "aria-describedby": this.helperText
+        return (index.h(index.Host, { key: '6d910879894ffc7ff36df228e4252e4758622ab9', class: this.getContainerClassList() }, index.h("limel-notched-outline", { key: '56e3b4dbc963b6923c63a33acb21895f4e86c947', labelId: this.inputId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, index.h("div", { key: 'f74ef31e0b7d67dcc8a231a05f9b00b84de50b33', slot: "content" }, index.h("div", { key: '4a4018ac095977f89cba99a0222603469d11ce30', class: "slider", style: { '--slider-fraction': `${fraction}` } }, index.h("input", Object.assign({ key: '3c9dc1fb20dd26ae0ea6cbab0914d5012a9c0184', id: this.inputId, type: "range", min: min, max: max, value: this.displayValue, "aria-describedby": this.helperText
                 ? this.helperTextId
-                : undefined, "aria-valuetext": this.isUnset
+                : undefined, "aria-invalid": this.invalid ? 'true' : undefined, "aria-valuetext": this.isUnset
                 ? translations.translations.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: '48f58e7fe170d8fe9d01fcd938b53088ff9b796d', class: "track" }, index.h("div", { key: '4f488b62a840c0346de6157d7d1ce7bdba26b357', class: "active" }), this.renderStepDots(min, max)), index.h("div", { key: '4234e2d0711fa650b1d0b7c05eb9d52d327818fc', class: "thumb" }, index.h("div", { key: '28c9d98e694cdaa0927ef05b396199b24d6b6e16', class: "knob" }), index.h("div", { key: 'cde9b95313351dd37794e32f2a107426a5bca7dc', class: "indicator", "aria-hidden": "true" }, this.isUnset
+            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), index.h("div", { key: '4873567abad9bd78cd44cf244bb5c41e87c10e12', class: "track" }, index.h("div", { key: '165858a4a1ee9ff35ed17b3f31c358b77143af47', class: "active" }), this.renderStepDots(min, max)), index.h("div", { key: 'ad6a62247047caad0332385713acf0660473589c', class: "thumb" }, index.h("div", { key: '10a5b6171a86d156de78987caf36c6256b1d3db7', class: "knob" }), index.h("div", { key: 'dac6f4e48e2345091c58433124afeb29cca52e02', class: "indicator", "aria-hidden": "true" }, this.isUnset
             ? '\u{2194}\u{FE0E}'
-            : this.displayValue))), index.h("div", { key: '0fa3c9c45697c787376880734f8be0127927eb30', class: "range-labels" }, index.h("span", { key: '9dc7d1b38bcf62369e827519b919c9cd69676b4d', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), index.h("span", { key: '6cf1350f909d119da15e46599dbada96f2e9f7dc', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
+            : this.displayValue))), index.h("div", { key: 'b62ca0a0dc80b5d6c370d477a7cb340c5c1fb79d', class: "range-labels" }, index.h("span", { key: '4455915693d0c95db8f5a05ac344e8de3c7efe4d', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), index.h("span", { key: 'ef141dec4f89ad937e521cb82b94ad3348904e49', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
     }
     watchValue() {
         this.syncStateFromValue();

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

@@ -44,7 +44,7 @@ const Switch = class {
             return (index.h("limel-dynamic-label", { value: this.value, "aria-describedby": this.ariaDescribedBy, defaultLabel: { text: this.label, icon: icon }, labels: this.readonlyLabels }));
         };
         this.renderInteractive = () => {
-            return (index.h("div", { class: "switch" }, index.h("button", { id: this.fieldId, type: "button", role: "switch", "aria-checked": String(this.value), disabled: this.disabled, onClick: this.handleClick, "aria-describedby": this.ariaDescribedBy }, index.h("span", { class: "handle" })), index.h("label", { htmlFor: this.fieldId }, this.label)));
+            return (index.h("div", { class: "switch" }, index.h("button", { id: this.fieldId, type: "button", role: "switch", "aria-checked": String(this.value), disabled: this.disabled, onClick: this.handleClick, "aria-describedby": this.ariaDescribedBy, "aria-invalid": this.invalid ? 'true' : undefined }, index.h("span", { class: "handle" })), index.h("label", { htmlFor: this.fieldId }, this.label)));
         };
         this.renderHelperLine = () => {
             if (!this.hasHelperText()) {