@limetech/lime-elements 40.12.0 → 40.12.2

package/dist/types/components/chip-set/chip-set.d.ts

@@ -182,6 +182,7 @@ export declare class ChipSet {
     private mdcTextField;
     private readonly handleKeyDown;
     private labelId;
+    private helperTextId;
     constructor();
     connectedCallback(): void;
     private initialize;
@@ -210,6 +211,7 @@ export declare class ChipSet {
     disconnectedCallback(): void;
     render(): any;
     private getContentProps;
+    private getDescribedBy;
     private renderContent;
     private readonly getValue;
     protected handleChangeChips(newValue: Chip[], oldValue: Chip[]): void;

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

@@ -27,7 +27,10 @@ export declare class ColorPicker implements FormComponent {
      */
     label: string;
     /**
-     * Helper text of the input field
+     * Optional helper text to display below the input field when it has focus.
+     * Screen readers read it as the description of the field, so use it for
+     * what the user needs to know, such as the format of the value or a
+     * requirement.
      */
     helperText: string;
     /**
@@ -57,8 +60,12 @@ export declare class ColorPicker implements FormComponent {
      */
     invalid: boolean;
     /**
-     * The placeholder text shown inside the input field,
-     * when the field is focused and empty.
+     * A hint about what to type, such as an example or the format of the
+     * value. It is shown inside the field when the field is focused and empty.
+     *
+     * Do not use it instead of a `label`, and do not put anything in it that
+     * the user needs to know. It disappears when the user starts to type, and
+     * some screen readers do not read it. Use `helperText` for that.
      */
     placeholder: string;
     /**

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

@@ -36,11 +36,20 @@ export declare class DatePicker {
      */
     label: string;
     /**
-     * The placeholder text shown inside the input field, when the field is focused and empty
+     * A hint about what to type, such as an example or the format of the
+     * value. It is shown inside the field when the field is focused and empty,
+     * but not on iOS and Android, where the native date picker is used.
+     *
+     * Do not use it instead of a `label`, and do not put anything in it that
+     * the user needs to know. It disappears when the user starts to type, and
+     * some screen readers do not read it. Use `helperText` for that.
      */
     placeholder: string;
     /**
-     * Optional helper text to display below the input field when it has focus
+     * Optional helper text to display below the input field when it has focus.
+     * Screen readers read it as the description of the field, so use it for
+     * what the user needs to know, such as the format of the value or a
+     * requirement.
      */
     helperText: string;
     /**

package/dist/types/components/helper-line/helper-line.d.ts

@@ -6,8 +6,12 @@
  * We created this to keep the visual styles the same everywhere
  * and to avoid importing styles separately.
  *
- * Also this enables us to open the helper line in limel-portal,
- * more easily without having to send the styles to the portal.
+ * :::note
+ * The component has `shadow: false`, so that the helper text is part of the
+ * DOM of the consumer. This way, the `id` of the helper text can be used in
+ * the `aria-describedby` of the input element in the consumer, which is
+ * not possible across a shadow root.
+ * :::
  *
  * @exampleComponent limel-example-helper-line-basic
  * @exampleComponent limel-example-helper-line-invalid
@@ -40,7 +44,7 @@ export declare class HelperLine {
      */
     invalid?: boolean;
     /**
-     * Used by `aria-controls` and `aria-describedby` in the parent component.
+     * Used by `aria-describedby` in the parent component.
      */
     helperTextId?: string;
     render(): any;

package/dist/types/components/input-field/input-field.d.ts

@@ -43,11 +43,19 @@ export declare class InputField {
      */
     label: string;
     /**
-     * The placeholder text shown inside the input field, when the field is focused and empty.
+     * A hint about what to type, such as an example or the format of the
+     * value. It is shown inside the field when the field is focused and empty.
+     *
+     * Do not use it instead of a `label`, and do not put anything in it that
+     * the user needs to know. It disappears when the user starts to type, and
+     * some screen readers do not read it. Use `helperText` for that.
      */
     placeholder: string;
     /**
-     * Optional helper text to display below the input field when it has focus
+     * Optional helper text to display below the input field when it has focus.
+     * Screen readers read it as the description of the field, so use it for
+     * what the user needs to know, such as the format of the value or a
+     * requirement.
      */
     helperText: string;
     /**

package/dist/types/components/text-editor/prosemirror-adapter/prosemirror-adapter.d.ts

@@ -62,6 +62,31 @@ export declare class ProsemirrorAdapter {
      * Specifies the visual appearance of the editor.
      */
     ui: EditorUiType;
+    /**
+     * The name of the editable area, read by assistive technology.
+     * Ids cannot be referenced across a shadow root, so a label that is
+     * rendered outside of the adapter cannot name the editable area.
+     */
+    accessibleLabel?: string;
+    /**
+     * The description of the editable area, read by assistive technology
+     * after its name.
+     */
+    accessibleDescription?: string;
+    /**
+     * A hint about what to type, which is exposed as the placeholder of the
+     * editable area. It is not shown by the adapter.
+     */
+    accessiblePlaceholder?: string;
+    /**
+     * Set to `true` to indicate that the editable area is required.
+     */
+    required?: boolean;
+    /**
+     * Set to `true` to indicate that the current value of the editable area
+     * is invalid.
+     */
+    invalid?: boolean;
     private host;
     private portalId;
     private view;
@@ -90,6 +115,7 @@ export declare class ProsemirrorAdapter {
     private transactionFired;
     private lastClickedPos;
     private focusRestoreTimeout;
+    private hadFocusWhenDisabled;
     private metadata;
     /**
      *  Used to stop change event emitting as result of getting updated value from consumer
@@ -142,6 +168,8 @@ export declare class ProsemirrorAdapter {
      * their own copy when calling this.
      */
     clear(): Promise<void>;
+    protected watchEditableAttributes(): void;
+    protected watchDisabled(disabled: boolean): void;
     protected watchValue(newValue: string): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
@@ -149,12 +177,17 @@ export declare class ProsemirrorAdapter {
     disconnectedCallback(): void;
     render(): any;
     renderToolbar(): any;
+    private getToolbarItems;
     renderLinkMenu(): any;
     private validateInlineImages;
     private setupContentConverter;
     private getActionBarItems;
     private getTranslatedItem;
     private initializeTextEditor;
+    private readonly isEditable;
+    private updateEditableProps;
+    private restoreFocus;
+    private getEditableAttributes;
     private initializeSchema;
     private parseInitialContent;
     private createEditorState;
@@ -165,6 +198,7 @@ export declare class ProsemirrorAdapter {
     private removeImagesFromCache;
     private handleActionBarItem;
     private handleCancelLinkMenu;
+    private closeLinkMenu;
     private handleSaveLinkMenu;
     private handleLinkChange;
     private handleFocus;

package/dist/types/components/text-editor/text-editor.d.ts

@@ -26,6 +26,7 @@ import { EditorUiType } from './types';
  * @exampleComponent limel-example-text-editor-ui
  * @exampleComponent limel-example-text-editor-custom-element
  * @exampleComponent limel-example-text-editor-triggers
+ * @exampleComponent limel-example-text-editor-accessibility
  * @exampleComponent limel-example-text-editor-composite
  * @beta
  */
@@ -191,10 +192,7 @@ export declare class TextEditor implements FormComponent<string> {
      * @alpha
      */
     triggerChange: EventEmitter<TriggerEventDetail>;
-    private readonly helperTextId;
-    private readonly editorId;
     private adapterElement?;
-    constructor();
     /**
      * Emits any pending `change` event immediately, instead of waiting
      * for the debounce delay to elapse. Does nothing if no change is

package/dist/types/components.d.ts

@@ -1213,7 +1213,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Helper text of the input field
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText": string;
         /**
@@ -1239,7 +1239,7 @@ export namespace Components {
          */
         "paletteColumnCount"?: number;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty.
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder": string;
         /**
@@ -1349,7 +1349,7 @@ export namespace Components {
          */
         "formatter"?: (date: Date) => string;
         /**
-          * Optional helper text to display below the input field when it has focus
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText": string;
         /**
@@ -1367,7 +1367,7 @@ export namespace Components {
          */
         "language": Languages;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty, but not on iOS and Android, where the native date picker is used.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder": string;
         /**
@@ -2059,8 +2059,12 @@ export namespace Components {
      * input field.
      * We created this to keep the visual styles the same everywhere
      * and to avoid importing styles separately.
-     * Also this enables us to open the helper line in limel-portal,
-     * more easily without having to send the styles to the portal.
+     * :::note
+     * The component has `shadow: false`, so that the helper text is part of the
+     * DOM of the consumer. This way, the `id` of the helper text can be used in
+     * the `aria-describedby` of the input element in the consumer, which is
+     * not possible across a shadow root.
+     * :::
      * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
@@ -2076,7 +2080,7 @@ export namespace Components {
          */
         "helperText"?: string;
         /**
-          * Used by `aria-controls` and `aria-describedby` in the parent component.
+          * Used by `aria-describedby` in the parent component.
          */
         "helperTextId"?: string;
         /**
@@ -2295,7 +2299,7 @@ export namespace Components {
          */
         "getSelectionStart": () => Promise<number | null>;
         /**
-          * Optional helper text to display below the input field when it has focus
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText": string;
         /**
@@ -2337,7 +2341,7 @@ export namespace Components {
          */
         "pattern": string;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty.
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder": string;
         /**
@@ -3304,6 +3308,18 @@ export namespace Components {
      * @private 
      */
     interface LimelProsemirrorAdapter {
+        /**
+          * The description of the editable area, read by assistive technology after its name.
+         */
+        "accessibleDescription"?: string;
+        /**
+          * The name of the editable area, read by assistive technology. Ids cannot be referenced across a shadow root, so a label that is rendered outside of the adapter cannot name the editable area.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * A hint about what to type, which is exposed as the placeholder of the editable area. It is not shown by the adapter.
+         */
+        "accessiblePlaceholder"?: string;
         /**
           * Clear the editor's content imperatively.  Assigning an empty `value` prop only clears the editor when the value changes. The editor debounces its `change` event, so a consumer's bound value can lag the live document; assigning `''` when the prop was already `''` is skipped by change detection and would leave the typed content untouched — for example, clearing the editor right after a send. Use this to empty the editor regardless of the prop's change detection.  Does not emit a `change` event. Consumers that mirror the editor content on `change` (drafts, validation, dirty state) should reset their own copy when calling this.
          */
@@ -3335,10 +3351,20 @@ export namespace Components {
           * @alpha
          */
         "inlineImages"?: InlineImages;
+        /**
+          * Set to `true` to indicate that the current value of the editable area is invalid.
+          * @default false
+         */
+        "invalid"?: boolean;
         /**
           * Defines the language for translations.
          */
         "language": Languages;
+        /**
+          * Set to `true` to indicate that the editable area is required.
+          * @default false
+         */
+        "required"?: boolean;
         /**
           * set to private to avoid usage while under development
           * @private 
@@ -4117,6 +4143,7 @@ export namespace Components {
      * @exampleComponent limel-example-text-editor-ui
      * @exampleComponent limel-example-text-editor-custom-element
      * @exampleComponent limel-example-text-editor-triggers
+     * @exampleComponent limel-example-text-editor-accessibility
      * @exampleComponent limel-example-text-editor-composite
      * @beta 
      */
@@ -5739,8 +5766,12 @@ declare global {
      * input field.
      * We created this to keep the visual styles the same everywhere
      * and to avoid importing styles separately.
-     * Also this enables us to open the helper line in limel-portal,
-     * more easily without having to send the styles to the portal.
+     * :::note
+     * The component has `shadow: false`, so that the helper text is part of the
+     * DOM of the consumer. This way, the `id` of the helper text can be used in
+     * the `aria-describedby` of the input element in the consumer, which is
+     * not possible across a shadow root.
+     * :::
      * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
@@ -6948,6 +6979,7 @@ declare global {
      * @exampleComponent limel-example-text-editor-ui
      * @exampleComponent limel-example-text-editor-custom-element
      * @exampleComponent limel-example-text-editor-triggers
+     * @exampleComponent limel-example-text-editor-accessibility
      * @exampleComponent limel-example-text-editor-composite
      * @beta 
      */
@@ -8291,7 +8323,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Helper text of the input field
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText"?: string;
         /**
@@ -8321,7 +8353,7 @@ declare namespace LocalJSX {
          */
         "paletteColumnCount"?: number;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty.
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder"?: string;
         /**
@@ -8435,7 +8467,7 @@ declare namespace LocalJSX {
          */
         "formatter"?: (date: Date) => string;
         /**
-          * Optional helper text to display below the input field when it has focus
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText"?: string;
         /**
@@ -8457,7 +8489,7 @@ declare namespace LocalJSX {
          */
         "onChange"?: (event: LimelDatePickerCustomEvent<Date>) => void;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty, but not on iOS and Android, where the native date picker is used.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder"?: string;
         /**
@@ -9222,8 +9254,12 @@ declare namespace LocalJSX {
      * input field.
      * We created this to keep the visual styles the same everywhere
      * and to avoid importing styles separately.
-     * Also this enables us to open the helper line in limel-portal,
-     * more easily without having to send the styles to the portal.
+     * :::note
+     * The component has `shadow: false`, so that the helper text is part of the
+     * DOM of the consumer. This way, the `id` of the helper text can be used in
+     * the `aria-describedby` of the input element in the consumer, which is
+     * not possible across a shadow root.
+     * :::
      * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
@@ -9239,7 +9275,7 @@ declare namespace LocalJSX {
          */
         "helperText"?: string;
         /**
-          * Used by `aria-controls` and `aria-describedby` in the parent component.
+          * Used by `aria-describedby` in the parent component.
          */
         "helperTextId"?: string;
         /**
@@ -9446,7 +9482,7 @@ declare namespace LocalJSX {
          */
         "formatNumber"?: boolean;
         /**
-          * Optional helper text to display below the input field when it has focus
+          * Optional helper text to display below the input field when it has focus. Screen readers read it as the description of the field, so use it for what the user needs to know, such as the format of the value or a requirement.
          */
         "helperText"?: string;
         /**
@@ -9496,7 +9532,7 @@ declare namespace LocalJSX {
          */
         "pattern"?: string;
         /**
-          * The placeholder text shown inside the input field, when the field is focused and empty.
+          * A hint about what to type, such as an example or the format of the value. It is shown inside the field when the field is focused and empty.  Do not use it instead of a `label`, and do not put anything in it that the user needs to know. It disappears when the user starts to type, and some screen readers do not read it. Use `helperText` for that.
          */
         "placeholder"?: string;
         /**
@@ -10524,6 +10560,18 @@ declare namespace LocalJSX {
      * @private 
      */
     interface LimelProsemirrorAdapter {
+        /**
+          * The description of the editable area, read by assistive technology after its name.
+         */
+        "accessibleDescription"?: string;
+        /**
+          * The name of the editable area, read by assistive technology. Ids cannot be referenced across a shadow root, so a label that is rendered outside of the adapter cannot name the editable area.
+         */
+        "accessibleLabel"?: string;
+        /**
+          * A hint about what to type, which is exposed as the placeholder of the editable area. It is not shown by the adapter.
+         */
+        "accessiblePlaceholder"?: string;
         /**
           * The type of content that the editor should handle and emit, defaults to `markdown`  Assumed to be set only once, so not reactive to changes
           * @default 'markdown'
@@ -10547,6 +10595,11 @@ declare namespace LocalJSX {
           * @alpha
          */
         "inlineImages"?: InlineImages;
+        /**
+          * Set to `true` to indicate that the current value of the editable area is invalid.
+          * @default false
+         */
+        "invalid"?: boolean;
         /**
           * Defines the language for translations.
          */
@@ -10573,6 +10626,11 @@ declare namespace LocalJSX {
           * @alpha
          */
         "onMetadataChange"?: (event: LimelProsemirrorAdapterCustomEvent<EditorMetadata>) => void;
+        /**
+          * Set to `true` to indicate that the editable area is required.
+          * @default false
+         */
+        "required"?: boolean;
         /**
           * set to private to avoid usage while under development
           * @private 
@@ -11432,6 +11490,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-text-editor-ui
      * @exampleComponent limel-example-text-editor-custom-element
      * @exampleComponent limel-example-text-editor-triggers
+     * @exampleComponent limel-example-text-editor-accessibility
      * @exampleComponent limel-example-text-editor-composite
      * @beta 
      */
@@ -12170,6 +12229,11 @@ declare namespace LocalJSX {
         "language": Languages;
         "disabled": boolean;
         "ui": EditorUiType;
+        "accessibleLabel": string;
+        "accessibleDescription": string;
+        "accessiblePlaceholder": string;
+        "required": boolean;
+        "invalid": boolean;
     }
     interface LimelRadioButtonAttributes {
         "checked": boolean;
@@ -13134,8 +13198,12 @@ declare module "@stencil/core" {
              * input field.
              * We created this to keep the visual styles the same everywhere
              * and to avoid importing styles separately.
-             * Also this enables us to open the helper line in limel-portal,
-             * more easily without having to send the styles to the portal.
+             * :::note
+             * The component has `shadow: false`, so that the helper text is part of the
+             * DOM of the consumer. This way, the `id` of the helper text can be used in
+             * the `aria-describedby` of the input element in the consumer, which is
+             * not possible across a shadow root.
+             * :::
              * @exampleComponent limel-example-helper-line-basic
              * @exampleComponent limel-example-helper-line-invalid
              * @exampleComponent limel-example-helper-line-long-text
@@ -13841,6 +13909,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-text-editor-ui
              * @exampleComponent limel-example-text-editor-custom-element
              * @exampleComponent limel-example-text-editor-triggers
+             * @exampleComponent limel-example-text-editor-accessibility
              * @exampleComponent limel-example-text-editor-composite
              * @beta 
              */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.12.0",
+  "version": "40.12.2",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -70,7 +70,7 @@
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@types/tabulator-tables": "^6.3.6",
-    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.12",
     "axe-core": "4.14.0",
     "codemirror": "^5.65.9",
     "cross-env": "^10.1.0",
@@ -93,7 +93,7 @@
     "morphdom": "^2.7.8",
     "number-abbreviate": "^2.0.0",
     "parse-css-color": "^0.2.1",
-    "postal-mime": "^4.0.6",
+    "postal-mime": "^4.0.7",
     "prettier": "^3.9.10",
     "prosemirror-example-setup": "^1.2.3",
     "prosemirror-markdown": "^1.13.8",