@limetech/lime-elements 40.12.3 → 40.13.1

package/dist/types/components.d.ts

@@ -51,7 +51,7 @@ import { EditorUiType } from "./components/text-editor/types";
 import { Option } from "./components/select/option.types";
 import { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from "./components/side-panel/side-panel.types";
 import { SpinnerSize } from "./components/spinner/spinner.types";
-import { Tab } from "./components/tab-bar/tab.types";
+import { Tab, TabReorderEvent } from "./components/tab-bar/tab.types";
 import { Column, ColumnAggregate, ColumnSorter, RowData, RowReorderEvent, TableParams } from "./components/table/table.types";
 import { Layout } from "./components/table/layout";
 import { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
@@ -101,7 +101,7 @@ export { EditorUiType } from "./components/text-editor/types";
 export { Option } from "./components/select/option.types";
 export { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from "./components/side-panel/side-panel.types";
 export { SpinnerSize } from "./components/spinner/spinner.types";
-export { Tab } from "./components/tab-bar/tab.types";
+export { Tab, TabReorderEvent } from "./components/tab-bar/tab.types";
 export { Column, ColumnAggregate, ColumnSorter, RowData, RowReorderEvent, TableParams } from "./components/table/table.types";
 export { Layout } from "./components/table/layout";
 export { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
@@ -1900,6 +1900,7 @@ export namespace Components {
      * @exampleComponent limel-example-form-row-layout
      * @exampleComponent limel-example-builtin-field-types-form
      * @exampleComponent limel-example-code-editor-form
+     * @exampleComponent limel-example-form-highlighted-field
      */
     interface LimelForm {
         /**
@@ -1911,6 +1912,11 @@ export namespace Components {
           * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
          */
         "errors": ValidationError;
+        /**
+          * The path in the value of a field to take the user to, such as `['heroes', 2, 'name']`. When it changes, the form opens the sections and list items the field is in, scrolls it into view, focuses it and briefly highlights it.  If the path goes further than the form can show, such as into a custom component, the closest field above the end of the path is shown. To show the same field again, set it to `undefined` first.
+          * @beta
+         */
+        "highlightedField"?: Array<string | number>;
         /**
           * Factory for creating properties for custom form components  When using custom components in the form some properties might have to be set dynamically. If this factory is set, it will be called with the current schema for the field for each custom component in the form. The factory must return an object where each key is the name of the property that should be set, along with its value.
          */
@@ -3475,16 +3481,25 @@ export namespace Components {
      * the edge that `location` names. Give the element a `position` other than
      * `static`. If other content covers the handle, also give the element
      * `isolation: isolate`.
+     * ## Accessibility
+     * The user reaches the handle with the <kbd>Tab</kbd> key. The handle is named
+     * "Resize" followed by `resizableRegionLabel`, for example "Resize side
+     * panel". A tooltip shows the name and how to resize. While the pointer is
+     * over the handle, it says to drag the handle. While the handle has keyboard
+     * focus, it says which arrow keys to press, which fit `location`. Screen
+     * readers read the arrow keys as the description of the handle.
      * @exampleComponent limel-example-resize-handle-basic
      * @exampleComponent limel-example-resize-handle-locations
      * @exampleComponent limel-example-resize-handle-grab-area
+     * @exampleComponent limel-example-resize-handle-accessibility
      * @private 
      */
     interface LimelResizeHandle {
         /**
-          * The accessible name of the handle.
+          * Defines the language for translations.
+          * @default 'en'
          */
-        "label": string;
+        "language": Languages;
         /**
           * The location of the handle relative to the resizable element.
           * @default 'left'
@@ -3498,6 +3513,10 @@ export namespace Components {
           * The smallest size that the element can have, in pixels.
          */
         "min"?: number;
+        /**
+          * The name of the region that the handle resizes, for example `side panel`. The accessible name of the handle is "Resize" followed by this name, for example "Resize side panel". When no name is set, the handle is named "Resize this region".  Write the name in the language that is set in `language`, in the form that reads right after "Resize", for example `side panel` in English and `sidopanelen` in Swedish.
+         */
+        "resizableRegionLabel"?: string;
         /**
           * The size of the element, in pixels: the width when `location` is `left` or `right`, and the height when it is `top` or `bottom`.
          */
@@ -3660,6 +3679,7 @@ export namespace Components {
      * @exampleComponent limel-example-side-panel-header-actions
      * @exampleComponent limel-example-side-panel-stacking
      * @exampleComponent limel-example-side-panel-full-screen
+     * @exampleComponent limel-example-side-panel-accessibility
      * @private 
      */
     interface LimelSidePanel {
@@ -3684,14 +3704,14 @@ export namespace Components {
          */
         "fullScreen": boolean;
         /**
-          * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.
+          * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.  The resize handle is named after it, for example "Resize Customer details panel". When no label is set, the handle is named "Resize side panel".
          */
         "label"?: string;
         /**
-          * Label of the resize handle. Used as the accessible name.
-          * @default 'Resize'
+          * Defines the language for translations.
+          * @default 'en'
          */
-        "resizeLabel": string;
+        "language": Languages;
         /**
           * The panels in the stack, outermost first. The last entry is the panel that is displayed. Its heading, subheading and icon are shown in the header. The other entries are shown as backs behind the panel.
           * @default []
@@ -3965,6 +3985,7 @@ export namespace Components {
      * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device. A vertical tab bar does the same, upwards and downwards.
      * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
      * The left and right arrow keys move to the previous and the next tab, and select it. In a vertical tab bar, the up and down arrow keys do that instead. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
+     * Set `allowTabReorder` to let the user drag the tabs into the order they want. Every tab then gets a drag handle, and the tab bar emits `reorderTab` when the user drops a tab in a new place. The tab bar does not change `tabs` itself, so the component that uses it decides the new order, and can save it for the user. A tab that the component does not move, stays where it was. The tabs can be reordered with a mouse and a touch screen, but not yet with the keyboard.
      * :::tip Other things to consider
      * Never divide the content of a tab using a nested tab bar.
      * Never place two tab bars within the same screen.
@@ -3977,8 +3998,15 @@ export namespace Components {
      * @exampleComponent limel-example-tab-bar-with-equal-tab-width
      * @exampleComponent limel-example-tab-bar-vertical
      * @exampleComponent limel-example-tab-bar-tab-width
+     * @exampleComponent limel-example-tab-bar-reorder
+     * @exampleComponent limel-example-tab-bar-reorder-vertical
      */
     interface LimelTabBar {
+        /**
+          * Set to `true` to let the user reorder the tabs by dragging them. Listen for `reorderTab` and give the tab bar the tabs in their new order.
+          * @default false
+         */
+        "allowTabReorder": boolean;
         /**
           * Whether the tabs are laid out in a row, above the content they belong to, or in a column, next to it.
           * @default 'horizontal'
@@ -4002,10 +4030,20 @@ export namespace Components {
      * load data or render anything until the tab is active.
      * The slotted components can also emit the `changeTab` event to update anything
      * inside the actual tab, e.g. to change the icon, color or badge.
+     * Set `allowTabReorder` to let the user reorder the tabs by dragging them. The
+     * panel does not change `tabs` itself. Listen for `reorderTab`, and give the
+     * panel the tabs in their new order. The tabs can be reordered with a mouse
+     * and a touch screen, but not yet with the keyboard.
      * @exampleComponent limel-example-tab-panel-basic
      * @exampleComponent limel-example-tab-panel-vertical
+     * @exampleComponent limel-example-tab-panel-reorder
      */
     interface LimelTabPanel {
+        /**
+          * Set to `true` to let the user reorder the tabs by dragging them. Listen for `reorderTab` and give the panel the tabs in their new order.
+          * @default false
+         */
+        "allowTabReorder": boolean;
         /**
           * Whether the tabs are laid out in a row, above the content, or in a column, to the left of it.
           * @default 'horizontal'
@@ -5651,6 +5689,7 @@ declare global {
      * @exampleComponent limel-example-form-row-layout
      * @exampleComponent limel-example-builtin-field-types-form
      * @exampleComponent limel-example-code-editor-form
+     * @exampleComponent limel-example-form-highlighted-field
      */
     interface HTMLLimelFormElement extends Components.LimelForm, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLimelFormElementEventMap>(type: K, listener: (this: HTMLLimelFormElement, ev: LimelFormCustomEvent<HTMLLimelFormElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6545,9 +6584,17 @@ declare global {
      * the edge that `location` names. Give the element a `position` other than
      * `static`. If other content covers the handle, also give the element
      * `isolation: isolate`.
+     * ## Accessibility
+     * The user reaches the handle with the <kbd>Tab</kbd> key. The handle is named
+     * "Resize" followed by `resizableRegionLabel`, for example "Resize side
+     * panel". A tooltip shows the name and how to resize. While the pointer is
+     * over the handle, it says to drag the handle. While the handle has keyboard
+     * focus, it says which arrow keys to press, which fit `location`. Screen
+     * readers read the arrow keys as the description of the handle.
      * @exampleComponent limel-example-resize-handle-basic
      * @exampleComponent limel-example-resize-handle-locations
      * @exampleComponent limel-example-resize-handle-grab-area
+     * @exampleComponent limel-example-resize-handle-accessibility
      * @private 
      */
     interface HTMLLimelResizeHandleElement extends Components.LimelResizeHandle, HTMLStencilElement {
@@ -6676,6 +6723,7 @@ declare global {
      * @exampleComponent limel-example-side-panel-header-actions
      * @exampleComponent limel-example-side-panel-stacking
      * @exampleComponent limel-example-side-panel-full-screen
+     * @exampleComponent limel-example-side-panel-accessibility
      * @private 
      */
     interface HTMLLimelSidePanelElement extends Components.LimelSidePanel, HTMLStencilElement {
@@ -6837,6 +6885,7 @@ declare global {
     };
     interface HTMLLimelTabBarElementEventMap {
         "changeTab": Tab;
+        "reorderTab": TabReorderEvent;
     }
     /**
      * Tabs are great to organize information hierarchically in the interface and divide it into distinct categories. Using tabs, you can create groups of content that are related and at the same level in the hierarchy.
@@ -6848,6 +6897,7 @@ declare global {
      * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device. A vertical tab bar does the same, upwards and downwards.
      * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
      * The left and right arrow keys move to the previous and the next tab, and select it. In a vertical tab bar, the up and down arrow keys do that instead. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
+     * Set `allowTabReorder` to let the user drag the tabs into the order they want. Every tab then gets a drag handle, and the tab bar emits `reorderTab` when the user drops a tab in a new place. The tab bar does not change `tabs` itself, so the component that uses it decides the new order, and can save it for the user. A tab that the component does not move, stays where it was. The tabs can be reordered with a mouse and a touch screen, but not yet with the keyboard.
      * :::tip Other things to consider
      * Never divide the content of a tab using a nested tab bar.
      * Never place two tab bars within the same screen.
@@ -6860,6 +6910,8 @@ declare global {
      * @exampleComponent limel-example-tab-bar-with-equal-tab-width
      * @exampleComponent limel-example-tab-bar-vertical
      * @exampleComponent limel-example-tab-bar-tab-width
+     * @exampleComponent limel-example-tab-bar-reorder
+     * @exampleComponent limel-example-tab-bar-reorder-vertical
      */
     interface HTMLLimelTabBarElement extends Components.LimelTabBar, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLimelTabBarElementEventMap>(type: K, listener: (this: HTMLLimelTabBarElement, ev: LimelTabBarCustomEvent<HTMLLimelTabBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6877,6 +6929,7 @@ declare global {
     };
     interface HTMLLimelTabPanelElementEventMap {
         "changeTab": Tab;
+        "reorderTab": TabReorderEvent;
     }
     /**
      * The `limel-tab-panel` component uses the `limel-tab-bar` component together
@@ -6890,8 +6943,13 @@ declare global {
      * load data or render anything until the tab is active.
      * The slotted components can also emit the `changeTab` event to update anything
      * inside the actual tab, e.g. to change the icon, color or badge.
+     * Set `allowTabReorder` to let the user reorder the tabs by dragging them. The
+     * panel does not change `tabs` itself. Listen for `reorderTab`, and give the
+     * panel the tabs in their new order. The tabs can be reordered with a mouse
+     * and a touch screen, but not yet with the keyboard.
      * @exampleComponent limel-example-tab-panel-basic
      * @exampleComponent limel-example-tab-panel-vertical
+     * @exampleComponent limel-example-tab-panel-reorder
      */
     interface HTMLLimelTabPanelElement extends Components.LimelTabPanel, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLimelTabPanelElementEventMap>(type: K, listener: (this: HTMLLimelTabPanelElement, ev: LimelTabPanelCustomEvent<HTMLLimelTabPanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -9087,6 +9145,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-form-row-layout
      * @exampleComponent limel-example-builtin-field-types-form
      * @exampleComponent limel-example-code-editor-form
+     * @exampleComponent limel-example-form-highlighted-field
      */
     interface LimelForm {
         /**
@@ -9098,6 +9157,11 @@ declare namespace LocalJSX {
           * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
          */
         "errors"?: ValidationError;
+        /**
+          * The path in the value of a field to take the user to, such as `['heroes', 2, 'name']`. When it changes, the form opens the sections and list items the field is in, scrolls it into view, focuses it and briefly highlights it.  If the path goes further than the form can show, such as into a custom component, the closest field above the end of the path is shown. To show the same field again, set it to `undefined` first.
+          * @beta
+         */
+        "highlightedField"?: Array<string | number>;
         /**
           * Emitted when a change is made within the form
          */
@@ -10745,16 +10809,25 @@ declare namespace LocalJSX {
      * the edge that `location` names. Give the element a `position` other than
      * `static`. If other content covers the handle, also give the element
      * `isolation: isolate`.
+     * ## Accessibility
+     * The user reaches the handle with the <kbd>Tab</kbd> key. The handle is named
+     * "Resize" followed by `resizableRegionLabel`, for example "Resize side
+     * panel". A tooltip shows the name and how to resize. While the pointer is
+     * over the handle, it says to drag the handle. While the handle has keyboard
+     * focus, it says which arrow keys to press, which fit `location`. Screen
+     * readers read the arrow keys as the description of the handle.
      * @exampleComponent limel-example-resize-handle-basic
      * @exampleComponent limel-example-resize-handle-locations
      * @exampleComponent limel-example-resize-handle-grab-area
+     * @exampleComponent limel-example-resize-handle-accessibility
      * @private 
      */
     interface LimelResizeHandle {
         /**
-          * The accessible name of the handle.
+          * Defines the language for translations.
+          * @default 'en'
          */
-        "label"?: string;
+        "language"?: Languages;
         /**
           * The location of the handle relative to the resizable element.
           * @default 'left'
@@ -10776,6 +10849,10 @@ declare namespace LocalJSX {
           * Emitted after the last `changeSize` when the user has finished a resize: when the pointer is released after it has moved, and after each arrow key press. Pressing and releasing the handle without moving it emits nothing.
          */
         "onEndResize"?: (event: LimelResizeHandleCustomEvent<void>) => void;
+        /**
+          * The name of the region that the handle resizes, for example `side panel`. The accessible name of the handle is "Resize" followed by this name, for example "Resize side panel". When no name is set, the handle is named "Resize this region".  Write the name in the language that is set in `language`, in the form that reads right after "Resize", for example `side panel` in English and `sidopanelen` in Swedish.
+         */
+        "resizableRegionLabel"?: string;
         /**
           * The size of the element, in pixels: the width when `location` is `left` or `right`, and the height when it is `top` or `bottom`.
          */
@@ -10936,6 +11013,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-side-panel-header-actions
      * @exampleComponent limel-example-side-panel-stacking
      * @exampleComponent limel-example-side-panel-full-screen
+     * @exampleComponent limel-example-side-panel-accessibility
      * @private 
      */
     interface LimelSidePanel {
@@ -10960,9 +11038,14 @@ declare namespace LocalJSX {
          */
         "fullScreen"?: boolean;
         /**
-          * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.
+          * Accessible name of the panel. Screen readers announce it. Set it to something that tells the user what the panel is for.  The resize handle is named after it, for example "Resize Customer details panel". When no label is set, the handle is named "Resize side panel".
          */
         "label"?: string;
+        /**
+          * Defines the language for translations.
+          * @default 'en'
+         */
+        "language"?: Languages;
         /**
           * Emitted when the user has finished a resize that changed the width. The detail is the new width in pixels. The panel already uses the new width. Store the value to restore the width with `--side-panel-width` the next time the panel opens.
          */
@@ -10979,11 +11062,6 @@ declare namespace LocalJSX {
           * Emitted when a back of the stack is clicked. The detail is the index of its entry in `stack`.
          */
         "onSelectStackEntry"?: (event: LimelSidePanelCustomEvent<number>) => void;
-        /**
-          * Label of the resize handle. Used as the accessible name.
-          * @default 'Resize'
-         */
-        "resizeLabel"?: string;
         /**
           * The panels in the stack, outermost first. The last entry is the panel that is displayed. Its heading, subheading and icon are shown in the header. The other entries are shown as backs behind the panel.
           * @default []
@@ -11272,6 +11350,7 @@ declare namespace LocalJSX {
      * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device. A vertical tab bar does the same, upwards and downwards.
      * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
      * The left and right arrow keys move to the previous and the next tab, and select it. In a vertical tab bar, the up and down arrow keys do that instead. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
+     * Set `allowTabReorder` to let the user drag the tabs into the order they want. Every tab then gets a drag handle, and the tab bar emits `reorderTab` when the user drops a tab in a new place. The tab bar does not change `tabs` itself, so the component that uses it decides the new order, and can save it for the user. A tab that the component does not move, stays where it was. The tabs can be reordered with a mouse and a touch screen, but not yet with the keyboard.
      * :::tip Other things to consider
      * Never divide the content of a tab using a nested tab bar.
      * Never place two tab bars within the same screen.
@@ -11284,12 +11363,23 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-tab-bar-with-equal-tab-width
      * @exampleComponent limel-example-tab-bar-vertical
      * @exampleComponent limel-example-tab-bar-tab-width
+     * @exampleComponent limel-example-tab-bar-reorder
+     * @exampleComponent limel-example-tab-bar-reorder-vertical
      */
     interface LimelTabBar {
+        /**
+          * Set to `true` to let the user reorder the tabs by dragging them. Listen for `reorderTab` and give the tab bar the tabs in their new order.
+          * @default false
+         */
+        "allowTabReorder"?: boolean;
         /**
           * Emitted when a tab has been changed
          */
         "onChangeTab"?: (event: LimelTabBarCustomEvent<Tab>) => void;
+        /**
+          * Emitted when the user has dragged a tab to a new place. The tab bar does not change `tabs` itself. The tab stays where it was until `tabs` is set to the tabs in their new order.
+         */
+        "onReorderTab"?: (event: LimelTabBarCustomEvent<TabReorderEvent>) => void;
         /**
           * Whether the tabs are laid out in a row, above the content they belong to, or in a column, next to it.
           * @default 'horizontal'
@@ -11313,14 +11403,28 @@ declare namespace LocalJSX {
      * load data or render anything until the tab is active.
      * The slotted components can also emit the `changeTab` event to update anything
      * inside the actual tab, e.g. to change the icon, color or badge.
+     * Set `allowTabReorder` to let the user reorder the tabs by dragging them. The
+     * panel does not change `tabs` itself. Listen for `reorderTab`, and give the
+     * panel the tabs in their new order. The tabs can be reordered with a mouse
+     * and a touch screen, but not yet with the keyboard.
      * @exampleComponent limel-example-tab-panel-basic
      * @exampleComponent limel-example-tab-panel-vertical
+     * @exampleComponent limel-example-tab-panel-reorder
      */
     interface LimelTabPanel {
+        /**
+          * Set to `true` to let the user reorder the tabs by dragging them. Listen for `reorderTab` and give the panel the tabs in their new order.
+          * @default false
+         */
+        "allowTabReorder"?: boolean;
         /**
           * Emitted when a tab has been changed
          */
         "onChangeTab"?: (event: LimelTabPanelCustomEvent<Tab>) => void;
+        /**
+          * Emitted when the user has dragged a tab to a new place. The panel does not change `tabs` itself. The tab stays where it was until `tabs` is set to the tabs in their new order.
+         */
+        "onReorderTab"?: (event: LimelTabPanelCustomEvent<TabReorderEvent>) => void;
         /**
           * Whether the tabs are laid out in a row, above the content, or in a column, to the left of it.
           * @default 'horizontal'
@@ -12248,7 +12352,8 @@ declare namespace LocalJSX {
     }
     interface LimelResizeHandleAttributes {
         "location": 'left' | 'right' | 'top' | 'bottom';
-        "label": string;
+        "resizableRegionLabel": string;
+        "language": Languages;
         "value": number;
         "min": number;
         "max": number;
@@ -12273,8 +12378,8 @@ declare namespace LocalJSX {
     }
     interface LimelSidePanelAttributes {
         "label": string;
+        "language": Languages;
         "closeLabel": string;
-        "resizeLabel": string;
         "closeOnEscape": boolean;
         "fullScreen": boolean;
     }
@@ -12325,9 +12430,11 @@ declare namespace LocalJSX {
     }
     interface LimelTabBarAttributes {
         "orientation": 'horizontal' | 'vertical';
+        "allowTabReorder": boolean;
     }
     interface LimelTabPanelAttributes {
         "orientation": 'horizontal' | 'vertical';
+        "allowTabReorder": boolean;
     }
     interface LimelTableAttributes {
         "mode": 'local' | 'remote';
@@ -13116,6 +13223,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-form-row-layout
              * @exampleComponent limel-example-builtin-field-types-form
              * @exampleComponent limel-example-code-editor-form
+             * @exampleComponent limel-example-form-highlighted-field
              */
             "limel-form": LocalJSX.IntrinsicElements["limel-form"] & JSXBase.HTMLAttributes<HTMLLimelFormElement>;
             /**
@@ -13667,9 +13775,17 @@ declare module "@stencil/core" {
              * the edge that `location` names. Give the element a `position` other than
              * `static`. If other content covers the handle, also give the element
              * `isolation: isolate`.
+             * ## Accessibility
+             * The user reaches the handle with the <kbd>Tab</kbd> key. The handle is named
+             * "Resize" followed by `resizableRegionLabel`, for example "Resize side
+             * panel". A tooltip shows the name and how to resize. While the pointer is
+             * over the handle, it says to drag the handle. While the handle has keyboard
+             * focus, it says which arrow keys to press, which fit `location`. Screen
+             * readers read the arrow keys as the description of the handle.
              * @exampleComponent limel-example-resize-handle-basic
              * @exampleComponent limel-example-resize-handle-locations
              * @exampleComponent limel-example-resize-handle-grab-area
+             * @exampleComponent limel-example-resize-handle-accessibility
              * @private 
              */
             "limel-resize-handle": LocalJSX.IntrinsicElements["limel-resize-handle"] & JSXBase.HTMLAttributes<HTMLLimelResizeHandleElement>;
@@ -13753,6 +13869,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-side-panel-header-actions
              * @exampleComponent limel-example-side-panel-stacking
              * @exampleComponent limel-example-side-panel-full-screen
+             * @exampleComponent limel-example-side-panel-accessibility
              * @private 
              */
             "limel-side-panel": LocalJSX.IntrinsicElements["limel-side-panel"] & JSXBase.HTMLAttributes<HTMLLimelSidePanelElement>;
@@ -13839,6 +13956,7 @@ declare module "@stencil/core" {
              * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device. A vertical tab bar does the same, upwards and downwards.
              * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
              * The left and right arrow keys move to the previous and the next tab, and select it. In a vertical tab bar, the up and down arrow keys do that instead. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
+             * Set `allowTabReorder` to let the user drag the tabs into the order they want. Every tab then gets a drag handle, and the tab bar emits `reorderTab` when the user drops a tab in a new place. The tab bar does not change `tabs` itself, so the component that uses it decides the new order, and can save it for the user. A tab that the component does not move, stays where it was. The tabs can be reordered with a mouse and a touch screen, but not yet with the keyboard.
              * :::tip Other things to consider
              * Never divide the content of a tab using a nested tab bar.
              * Never place two tab bars within the same screen.
@@ -13851,6 +13969,8 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-tab-bar-with-equal-tab-width
              * @exampleComponent limel-example-tab-bar-vertical
              * @exampleComponent limel-example-tab-bar-tab-width
+             * @exampleComponent limel-example-tab-bar-reorder
+             * @exampleComponent limel-example-tab-bar-reorder-vertical
              */
             "limel-tab-bar": LocalJSX.IntrinsicElements["limel-tab-bar"] & JSXBase.HTMLAttributes<HTMLLimelTabBarElement>;
             /**
@@ -13865,8 +13985,13 @@ declare module "@stencil/core" {
              * load data or render anything until the tab is active.
              * The slotted components can also emit the `changeTab` event to update anything
              * inside the actual tab, e.g. to change the icon, color or badge.
+             * Set `allowTabReorder` to let the user reorder the tabs by dragging them. The
+             * panel does not change `tabs` itself. Listen for `reorderTab`, and give the
+             * panel the tabs in their new order. The tabs can be reordered with a mouse
+             * and a touch screen, but not yet with the keyboard.
              * @exampleComponent limel-example-tab-panel-basic
              * @exampleComponent limel-example-tab-panel-vertical
+             * @exampleComponent limel-example-tab-panel-reorder
              */
             "limel-tab-panel": LocalJSX.IntrinsicElements["limel-tab-panel"] & JSXBase.HTMLAttributes<HTMLLimelTabPanelElement>;
             /**

package/dist/types/translations/da.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/de.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/en.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/fi.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/fr.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/nl.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;

package/dist/types/translations/no.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'file.drag-and-drop-tips': string;
     'file.optimizing': string;

package/dist/types/translations/sv.d.ts

@@ -29,6 +29,13 @@ declare const _default: {
     'date-picker.year.heading': string;
     'drag-handle.drag-handle': string;
     'drag-handle.drag-to-reorder': string;
+    'resize-handle.resize': string;
+    'resize-handle.resize-this-region': string;
+    'resize-handle.drag': string;
+    'resize-handle.keys-left-right': string;
+    'resize-handle.keys-up-down': string;
+    'side-panel.resize-region': string;
+    'side-panel.resize-region.named': string;
     'chip-set.clear-all': string;
     'snackbar.dismiss': string;
     'file.drag-and-drop-tips': string;