@limetech/lime-elements 40.12.0 → 40.12.2

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

@@ -18458,114 +18458,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);
@@ -18575,76 +18602,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
@@ -18748,13 +18776,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
@@ -19169,6 +19190,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;
@@ -20263,6 +20288,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 }
 
@@ -20274,26 +20336,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
 }
 
@@ -28316,6 +28380,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://' };
         /**
@@ -28326,6 +28399,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
@@ -28344,6 +28418,7 @@ const ProsemirrorAdapter = class {
             }
             return newItem;
         };
+        this.isEditable = () => !this.disabled;
         this.updateActiveActionBarItems = (activeTypes, allowedTypes) => {
             this.actionBarItems = getTextEditorMenuItems()
                 .map(this.getTranslatedItem)
@@ -28389,8 +28464,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;
@@ -28507,6 +28581,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;
@@ -28566,13 +28654,19 @@ const ProsemirrorAdapter = class {
         (_e = this.view) === null || _e === void 0 ? void 0 : _e.destroy();
     }
     render() {
-        return (h(Host, { key: '6c92f1576fdd862e592d0ccf6779c6d3da806808', onFocus: this.handleFocus }, h("div", { key: '0b1b90a7c68b62ecffed21f4c49fced5333f0d83', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
+        return (h(Host, { key: 'eff663aa0d2c0ce2906fc160a70691e78dbda774', onFocus: this.handleFocus }, h("div", { key: '71111267b9098261ca843516ae067443c7f40740', id: "editor" }), this.renderToolbar(), this.renderLinkMenu()));
     }
     renderToolbar() {
         if (this.actionBarItems.length === 0 || this.ui === 'no-toolbar') {
             return;
         }
-        return (h("div", { class: "toolbar" }, h("limel-action-bar", { ref: (el) => (this.actionBarElement = el), accessibleLabel: translations.get('editor-menu.toolbar', this.language), actions: this.actionBarItems, onItemSelected: this.handleActionBarItem })));
+        return (h("div", { class: "toolbar" }, h("limel-action-bar", { ref: (el) => (this.actionBarElement = el), accessibleLabel: 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(item) ? Object.assign(Object.assign({}, item), { disabled: true }) : item);
     }
     renderLinkMenu() {
         if (!this.isLinkMenuOpen) {
@@ -28612,6 +28706,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);
@@ -28621,6 +28717,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,
@@ -28702,9 +28839,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 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/esm/limel-select.entry.js

@@ -417,6 +417,7 @@ class TypeaheadBuffer {
 const TRIGGER_ID = 's-trigger';
 const LABEL_ID = 's-label';
 const SELECTED_TEXT_ID = 's-selected-text';
+const HELPER_TEXT_ID = 's-helper-text';
 const SelectTemplate = (props) => {
     const value = props.value;
     let hasValue = !!props.value;
@@ -449,6 +450,10 @@ const SelectTemplate = (props) => {
         h(SelectDropdown, Object.assign({}, props)),
     ];
 };
+const getDescribedBy = (props) => {
+    var _a;
+    return ((_a = props.helperText) === null || _a === void 0 ? void 0 : _a.trim()) ? HELPER_TEXT_ID : undefined;
+};
 const floatLabelAbove = (props) => {
     if (props.isOpen) {
         return true;
@@ -470,7 +475,7 @@ const SelectValue = (props) => {
     };
     return (h("button", { id: TRIGGER_ID, slot: "content", class: anchorClassList, onClick: props.open, onKeyDown: props.onTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": props.isOpen, "aria-controls": props.id, "aria-labelledby": props.label
             ? `${LABEL_ID} ${SELECTED_TEXT_ID}`
-            : SELECTED_TEXT_ID, "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: SELECTED_TEXT_ID, class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
+            : SELECTED_TEXT_ID, "aria-describedby": getDescribedBy(props), "aria-required": props.required, disabled: props.disabled || props.readonly }, h("span", { class: "mdc-select__selected-text-container limel-select__selected-option" }, getSelectedIcon(props.value), getSelectedPrimaryComponent(props.value), h("span", { id: SELECTED_TEXT_ID, class: "mdc-select__selected-text limel-select__selected-option__text" }, getSelectedText(props.value))), h(ShowIcon, Object.assign({}, props, { isValid: props.isValid })), h("span", { class: "mdc-select__dropdown-icon" }, h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" }, h("polygon", { stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" })))));
 };
 const ShowIcon = (props) => {
     if (props.isValid) {
@@ -482,7 +487,7 @@ const HelperText = (props) => {
     if (typeof props.text !== 'string') {
         return;
     }
-    return (h("limel-helper-line", { helperText: props.text.trim(), invalid: !props.isValid }));
+    return (h("limel-helper-line", { helperText: props.text.trim(), helperTextId: HELPER_TEXT_ID, invalid: !props.isValid }));
 };
 const SelectDropdown = (props) => {
     if (props.native) {
@@ -504,7 +509,7 @@ const NativeDropdown = (props) => {
     const options = props.options
         .filter((option) => !('separator' in option))
         .map(renderOption(props.value));
-    return (h("select", { required: props.required, "aria-labelledby": props.label ? LABEL_ID : undefined, "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 (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));
 };
 const renderOption = (selectedOption) => {
     return (option) => {