@limetech/lime-elements 40.5.4 → 40.6.1

package/dist/types/components/markdown/markdown.d.ts

@@ -32,6 +32,7 @@ import { CustomElementDefinition } from '../../global/shared-types/custom-elemen
  * @exampleComponent limel-example-markdown-custom-component-with-json-props
  * @exampleComponent limel-example-markdown-remove-empty-paragraphs
  * @exampleComponent limel-example-markdown-adapt-color-contrast
+ * @exampleComponent limel-example-markdown-to-markdown
  * @exampleComponent limel-example-markdown-composite
  */
 export declare class Markdown {
@@ -87,11 +88,29 @@ export declare class Markdown {
      * drives the surrounding text color.
      */
     adaptColorContrast: boolean;
+    /**
+     * Returns the content as markdown, with every whitelisted custom
+     * element replaced by the markdown it describes itself as.
+     *
+     * Use this to hand the content to a target that cannot render custom
+     * elements, such as the clipboard. An element describes itself by
+     * implementing `MarkdownDescribable`; elements that do not keep
+     * their child content, or are removed if they have none.
+     *
+     * The markdown is generated from the rendered content, so it may be
+     * formatted differently from `value`.
+     *
+     * @alpha
+     * @returns The content as markdown.
+     */
+    toMarkdown(): Promise<string>;
     textChanged(): Promise<void>;
+    private renderMarkdown;
     handleWhitelistChange(): Promise<void>;
     handleRemoveEmptyParagraphsChange(): Promise<void>;
     handleAdaptColorContrastChange(): Promise<void>;
     private rootElement;
+    private rendering?;
     private imageIntersectionObserver;
     private cachedConsumerWhitelist?;
     private cachedCombinedWhitelist?;

package/dist/types/components/pagination/jump/pagination-jump.d.ts

@@ -50,7 +50,7 @@ export declare class PaginationJump {
      * so it always offers the page the user is on now.
      */
     protected handleOpenChange(): void;
-    componentDidRender(): void;
+    componentDidRender(): Promise<void>;
     render(): any;
     /**
      * Only to keep what is on screen honest. `limel-input-field` draws an

package/dist/types/components/scroller/scroller.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Makes content that is larger than its container scrollable, along one axis.
+ *
+ * The native scrollbar is hidden. Instead, an edge that has more to reveal
+ * fades out, and an arrow appears on it. Clicking the arrow scrolls almost a
+ * page, and leaves the last part of the previous page in view, as a reference
+ * for how far the user has scrolled. For people who have asked their system to
+ * reduce motion, the scroller jumps instead of gliding.
+ *
+ * When something inside the scroller receives focus, the scroller reveals the
+ * item that holds it, together with a glimpse of whatever is next to it. An
+ * item can control how much of its neighbors gets revealed, by setting its
+ * `scroll-margin`. An item that becomes selected without receiving focus is up
+ * to the consumer to reveal, using the `reveal()` method.
+ *
+ * :::note Accessibility
+ * The arrows are only a shortcut for people who use a mouse or a touch screen.
+ * They are not real buttons. Screen readers do not announce them, and the Tab
+ * key skips them. Therefore, the content must contain something that can
+ * receive focus, such as a button, a link or a tab. Without it, there is no way
+ * to scroll with a keyboard. The examples explain the reasoning.
+ * :::
+ *
+ * @slot - The content to scroll. Each child is treated as an item.
+ * @exampleComponent limel-example-scroller-horizontal
+ * @exampleComponent limel-example-scroller-vertical
+ * @private
+ */
+export declare class Scroller {
+    /**
+     * The axis along which the content scrolls.
+     */
+    orientation: 'horizontal' | 'vertical';
+    private canScrollToStart;
+    private canScrollToEnd;
+    private scrollArea?;
+    private scrollContent?;
+    private slotElement?;
+    private readonly fades;
+    private resizeObserver?;
+    private pendingReveal?;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+    private renderEdge;
+    private observeSize;
+    private readonly handleResize;
+    private readonly updateScrollability;
+    private scrollOnePage;
+    private findItem;
+    private readonly revealFocusedItem;
+    /**
+     * Scrolls an item into view, together with a glimpse of its neighbors.
+     * Whatever receives focus is revealed without being asked to. This is for
+     * an item that becomes selected without receiving focus. If the scroller
+     * is hidden, in a dialog that is closed for instance, the item is revealed
+     * when the scroller is shown.
+     *
+     * @param item - one of the items of the scroller, or something inside one
+     * @param behavior - `auto` jumps to the item, and `smooth` glides there.
+     * Defaults to `smooth`, unless the user has asked to reduce motion.
+     */
+    reveal(item: HTMLElement, behavior?: ScrollBehavior): Promise<void>;
+    private revealItem;
+}
+//# sourceMappingURL=scroller.d.ts.map

package/dist/types/components/tab-bar/tab-bar.d.ts

@@ -7,6 +7,7 @@ import { Tab } from './tab.types';
  * :::
  * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
  * 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.
+ * 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.
  * :::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.
@@ -29,34 +30,30 @@ export declare class TabBar {
      */
     private changeTab;
     private host;
-    private canScrollLeft;
-    private canScrollRight;
     private mdcTabBar;
     private setupMdc;
-    private scrollArea;
-    private scrollContent;
+    private revealedTabId?;
+    private hasLoaded;
     constructor();
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
     componentDidLoad(): void;
+    componentDidRender(): Promise<void>;
     componentDidUpdate(): void;
     disconnectedCallback(): void;
     render(): any;
     protected tabsChanged(newTabs?: Tab[], oldTabs?: Tab[]): void;
-    protected handleWindowResize(): void;
     private setup;
     private tearDown;
-    private setupListeners;
-    private handleTabActivated;
-    private sortByInactive;
-    private handleScroll;
-    private handleLeftScrollClick;
-    private handleRightScrollClick;
     /**
-     * Calculates how far to scroll when navigation buttons are clicked.
-     * Returns the visible width minus an overlap percentage to maintain context.
-     * Falls back to the constant value if something goes wrong.
+     * A tab that is activated by the user has focus, and the scroller reveals
+     * what has focus. This is for a tab that becomes active without it.
+     *
+     * @param behavior - `auto` to jump to the tab. Leave it out to let the
+     * scroller glide there.
      */
-    private getScrollDistance;
+    private revealActiveTab;
+    private handleTabActivated;
+    private sortByInactive;
     private renderIcon;
     private renderTab;
     private triggerIconColorWarning;

package/dist/types/components.d.ts

@@ -2562,6 +2562,7 @@ export namespace Components {
      * @exampleComponent limel-example-markdown-custom-component-with-json-props
      * @exampleComponent limel-example-markdown-remove-empty-paragraphs
      * @exampleComponent limel-example-markdown-adapt-color-contrast
+     * @exampleComponent limel-example-markdown-to-markdown
      * @exampleComponent limel-example-markdown-composite
      */
     interface LimelMarkdown {
@@ -2580,6 +2581,12 @@ export namespace Components {
           * @default true
          */
         "removeEmptyParagraphs": boolean;
+        /**
+          * Returns the content as markdown, with every whitelisted custom element replaced by the markdown it describes itself as.  Use this to hand the content to a target that cannot render custom elements, such as the clipboard. An element describes itself by implementing `MarkdownDescribable`; elements that do not keep their child content, or are removed if they have none.  The markdown is generated from the rendered content, so it may be formatted differently from `value`.
+          * @alpha 
+          * @returns The content as markdown.
+         */
+        "toMarkdown": () => Promise<string>;
         /**
           * The input text. Treated as GitHub Flavored Markdown, with the addition that any included HTML will be parsed and rendered as HTML, rather than as text.
           * @default ''
@@ -3415,6 +3422,42 @@ export namespace Components {
          */
         "selectedItem"?: ListItem<string | number>;
     }
+    /**
+     * Makes content that is larger than its container scrollable, along one axis.
+     * The native scrollbar is hidden. Instead, an edge that has more to reveal
+     * fades out, and an arrow appears on it. Clicking the arrow scrolls almost a
+     * page, and leaves the last part of the previous page in view, as a reference
+     * for how far the user has scrolled. For people who have asked their system to
+     * reduce motion, the scroller jumps instead of gliding.
+     * When something inside the scroller receives focus, the scroller reveals the
+     * item that holds it, together with a glimpse of whatever is next to it. An
+     * item can control how much of its neighbors gets revealed, by setting its
+     * `scroll-margin`. An item that becomes selected without receiving focus is up
+     * to the consumer to reveal, using the `reveal()` method.
+     * :::note Accessibility
+     * The arrows are only a shortcut for people who use a mouse or a touch screen.
+     * They are not real buttons. Screen readers do not announce them, and the Tab
+     * key skips them. Therefore, the content must contain something that can
+     * receive focus, such as a button, a link or a tab. Without it, there is no way
+     * to scroll with a keyboard. The examples explain the reasoning.
+     * :::
+     * @exampleComponent limel-example-scroller-horizontal
+     * @exampleComponent limel-example-scroller-vertical
+     * @private 
+     */
+    interface LimelScroller {
+        /**
+          * The axis along which the content scrolls.
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+        /**
+          * Scrolls an item into view, together with a glimpse of its neighbors. Whatever receives focus is revealed without being asked to. This is for an item that becomes selected without receiving focus. If the scroller is hidden, in a dialog that is closed for instance, the item is revealed when the scroller is shown.
+          * @param item - one of the items of the scroller, or something inside one
+          * @param behavior - `auto` jumps to the item, and `smooth` glides there. Defaults to `smooth`, unless the user has asked to reduce motion.
+         */
+        "reveal": (item: HTMLElement, behavior?: ScrollBehavior) => Promise<void>;
+    }
     /**
      * ## Keyboard
      * Typing characters jumps to the option whose text starts with them, the way
@@ -3781,6 +3824,7 @@ export namespace Components {
      * :::
      * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
      * 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.
+     * 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.
      * :::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.
@@ -5802,6 +5846,7 @@ declare global {
      * @exampleComponent limel-example-markdown-custom-component-with-json-props
      * @exampleComponent limel-example-markdown-remove-empty-paragraphs
      * @exampleComponent limel-example-markdown-adapt-color-contrast
+     * @exampleComponent limel-example-markdown-to-markdown
      * @exampleComponent limel-example-markdown-composite
      */
     interface HTMLLimelMarkdownElement extends Components.LimelMarkdown, HTMLStencilElement {
@@ -6314,6 +6359,35 @@ declare global {
         prototype: HTMLLimelRadioButtonGroupElement;
         new (): HTMLLimelRadioButtonGroupElement;
     };
+    /**
+     * Makes content that is larger than its container scrollable, along one axis.
+     * The native scrollbar is hidden. Instead, an edge that has more to reveal
+     * fades out, and an arrow appears on it. Clicking the arrow scrolls almost a
+     * page, and leaves the last part of the previous page in view, as a reference
+     * for how far the user has scrolled. For people who have asked their system to
+     * reduce motion, the scroller jumps instead of gliding.
+     * When something inside the scroller receives focus, the scroller reveals the
+     * item that holds it, together with a glimpse of whatever is next to it. An
+     * item can control how much of its neighbors gets revealed, by setting its
+     * `scroll-margin`. An item that becomes selected without receiving focus is up
+     * to the consumer to reveal, using the `reveal()` method.
+     * :::note Accessibility
+     * The arrows are only a shortcut for people who use a mouse or a touch screen.
+     * They are not real buttons. Screen readers do not announce them, and the Tab
+     * key skips them. Therefore, the content must contain something that can
+     * receive focus, such as a button, a link or a tab. Without it, there is no way
+     * to scroll with a keyboard. The examples explain the reasoning.
+     * :::
+     * @exampleComponent limel-example-scroller-horizontal
+     * @exampleComponent limel-example-scroller-vertical
+     * @private 
+     */
+    interface HTMLLimelScrollerElement extends Components.LimelScroller, HTMLStencilElement {
+    }
+    var HTMLLimelScrollerElement: {
+        prototype: HTMLLimelScrollerElement;
+        new (): HTMLLimelScrollerElement;
+    };
     interface HTMLLimelSelectElementEventMap {
         "change": Option | Option[];
     }
@@ -6525,6 +6599,7 @@ declare global {
      * :::
      * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
      * 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.
+     * 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.
      * :::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.
@@ -6812,6 +6887,7 @@ declare global {
         "limel-prosemirror-adapter": HTMLLimelProsemirrorAdapterElement;
         "limel-radio-button": HTMLLimelRadioButtonElement;
         "limel-radio-button-group": HTMLLimelRadioButtonGroupElement;
+        "limel-scroller": HTMLLimelScrollerElement;
         "limel-select": HTMLLimelSelectElement;
         "limel-shortcut": HTMLLimelShortcutElement;
         "limel-slider": HTMLLimelSliderElement;
@@ -9437,6 +9513,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-markdown-custom-component-with-json-props
      * @exampleComponent limel-example-markdown-remove-empty-paragraphs
      * @exampleComponent limel-example-markdown-adapt-color-contrast
+     * @exampleComponent limel-example-markdown-to-markdown
      * @exampleComponent limel-example-markdown-composite
      */
     interface LimelMarkdown {
@@ -10363,6 +10440,36 @@ declare namespace LocalJSX {
          */
         "selectedItem"?: ListItem<string | number>;
     }
+    /**
+     * Makes content that is larger than its container scrollable, along one axis.
+     * The native scrollbar is hidden. Instead, an edge that has more to reveal
+     * fades out, and an arrow appears on it. Clicking the arrow scrolls almost a
+     * page, and leaves the last part of the previous page in view, as a reference
+     * for how far the user has scrolled. For people who have asked their system to
+     * reduce motion, the scroller jumps instead of gliding.
+     * When something inside the scroller receives focus, the scroller reveals the
+     * item that holds it, together with a glimpse of whatever is next to it. An
+     * item can control how much of its neighbors gets revealed, by setting its
+     * `scroll-margin`. An item that becomes selected without receiving focus is up
+     * to the consumer to reveal, using the `reveal()` method.
+     * :::note Accessibility
+     * The arrows are only a shortcut for people who use a mouse or a touch screen.
+     * They are not real buttons. Screen readers do not announce them, and the Tab
+     * key skips them. Therefore, the content must contain something that can
+     * receive focus, such as a button, a link or a tab. Without it, there is no way
+     * to scroll with a keyboard. The examples explain the reasoning.
+     * :::
+     * @exampleComponent limel-example-scroller-horizontal
+     * @exampleComponent limel-example-scroller-vertical
+     * @private 
+     */
+    interface LimelScroller {
+        /**
+          * The axis along which the content scrolls.
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+    }
     /**
      * ## Keyboard
      * Typing characters jumps to the option whose text starts with them, the way
@@ -10748,6 +10855,7 @@ declare namespace LocalJSX {
      * :::
      * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
      * 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.
+     * 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.
      * :::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.
@@ -11701,6 +11809,9 @@ declare namespace LocalJSX {
         "badgeIcons": boolean;
         "maxLinesSecondaryText": number;
     }
+    interface LimelScrollerAttributes {
+        "orientation": 'horizontal' | 'vertical';
+    }
     interface LimelSelectAttributes {
         "disabled": boolean;
         "readonly": boolean;
@@ -11879,6 +11990,7 @@ declare namespace LocalJSX {
         "limel-prosemirror-adapter": Omit<LimelProsemirrorAdapter, keyof LimelProsemirrorAdapterAttributes> & { [K in keyof LimelProsemirrorAdapter & keyof LimelProsemirrorAdapterAttributes]?: LimelProsemirrorAdapter[K] } & { [K in keyof LimelProsemirrorAdapter & keyof LimelProsemirrorAdapterAttributes as `attr:${K}`]?: LimelProsemirrorAdapterAttributes[K] } & { [K in keyof LimelProsemirrorAdapter & keyof LimelProsemirrorAdapterAttributes as `prop:${K}`]?: LimelProsemirrorAdapter[K] };
         "limel-radio-button": Omit<LimelRadioButton, keyof LimelRadioButtonAttributes> & { [K in keyof LimelRadioButton & keyof LimelRadioButtonAttributes]?: LimelRadioButton[K] } & { [K in keyof LimelRadioButton & keyof LimelRadioButtonAttributes as `attr:${K}`]?: LimelRadioButtonAttributes[K] } & { [K in keyof LimelRadioButton & keyof LimelRadioButtonAttributes as `prop:${K}`]?: LimelRadioButton[K] } & OneOf<"id", LimelRadioButton["id"], LimelRadioButtonAttributes["id"]>;
         "limel-radio-button-group": Omit<LimelRadioButtonGroup, keyof LimelRadioButtonGroupAttributes> & { [K in keyof LimelRadioButtonGroup & keyof LimelRadioButtonGroupAttributes]?: LimelRadioButtonGroup[K] } & { [K in keyof LimelRadioButtonGroup & keyof LimelRadioButtonGroupAttributes as `attr:${K}`]?: LimelRadioButtonGroupAttributes[K] } & { [K in keyof LimelRadioButtonGroup & keyof LimelRadioButtonGroupAttributes as `prop:${K}`]?: LimelRadioButtonGroup[K] };
+        "limel-scroller": Omit<LimelScroller, keyof LimelScrollerAttributes> & { [K in keyof LimelScroller & keyof LimelScrollerAttributes]?: LimelScroller[K] } & { [K in keyof LimelScroller & keyof LimelScrollerAttributes as `attr:${K}`]?: LimelScrollerAttributes[K] } & { [K in keyof LimelScroller & keyof LimelScrollerAttributes as `prop:${K}`]?: LimelScroller[K] };
         "limel-select": Omit<LimelSelect, keyof LimelSelectAttributes> & { [K in keyof LimelSelect & keyof LimelSelectAttributes]?: LimelSelect[K] } & { [K in keyof LimelSelect & keyof LimelSelectAttributes as `attr:${K}`]?: LimelSelectAttributes[K] } & { [K in keyof LimelSelect & keyof LimelSelectAttributes as `prop:${K}`]?: LimelSelect[K] };
         "limel-shortcut": Omit<LimelShortcut, keyof LimelShortcutAttributes> & { [K in keyof LimelShortcut & keyof LimelShortcutAttributes]?: LimelShortcut[K] } & { [K in keyof LimelShortcut & keyof LimelShortcutAttributes as `attr:${K}`]?: LimelShortcutAttributes[K] } & { [K in keyof LimelShortcut & keyof LimelShortcutAttributes as `prop:${K}`]?: LimelShortcut[K] };
         "limel-slider": Omit<LimelSlider, keyof LimelSliderAttributes> & { [K in keyof LimelSlider & keyof LimelSliderAttributes]?: LimelSlider[K] } & { [K in keyof LimelSlider & keyof LimelSliderAttributes as `attr:${K}`]?: LimelSliderAttributes[K] } & { [K in keyof LimelSlider & keyof LimelSliderAttributes as `prop:${K}`]?: LimelSlider[K] };
@@ -12799,6 +12911,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-markdown-custom-component-with-json-props
              * @exampleComponent limel-example-markdown-remove-empty-paragraphs
              * @exampleComponent limel-example-markdown-adapt-color-contrast
+             * @exampleComponent limel-example-markdown-to-markdown
              * @exampleComponent limel-example-markdown-composite
              */
             "limel-markdown": LocalJSX.IntrinsicElements["limel-markdown"] & JSXBase.HTMLAttributes<HTMLLimelMarkdownElement>;
@@ -13075,6 +13188,30 @@ declare module "@stencil/core" {
              * @beta 
              */
             "limel-radio-button-group": LocalJSX.IntrinsicElements["limel-radio-button-group"] & JSXBase.HTMLAttributes<HTMLLimelRadioButtonGroupElement>;
+            /**
+             * Makes content that is larger than its container scrollable, along one axis.
+             * The native scrollbar is hidden. Instead, an edge that has more to reveal
+             * fades out, and an arrow appears on it. Clicking the arrow scrolls almost a
+             * page, and leaves the last part of the previous page in view, as a reference
+             * for how far the user has scrolled. For people who have asked their system to
+             * reduce motion, the scroller jumps instead of gliding.
+             * When something inside the scroller receives focus, the scroller reveals the
+             * item that holds it, together with a glimpse of whatever is next to it. An
+             * item can control how much of its neighbors gets revealed, by setting its
+             * `scroll-margin`. An item that becomes selected without receiving focus is up
+             * to the consumer to reveal, using the `reveal()` method.
+             * :::note Accessibility
+             * The arrows are only a shortcut for people who use a mouse or a touch screen.
+             * They are not real buttons. Screen readers do not announce them, and the Tab
+             * key skips them. Therefore, the content must contain something that can
+             * receive focus, such as a button, a link or a tab. Without it, there is no way
+             * to scroll with a keyboard. The examples explain the reasoning.
+             * :::
+             * @exampleComponent limel-example-scroller-horizontal
+             * @exampleComponent limel-example-scroller-vertical
+             * @private 
+             */
+            "limel-scroller": LocalJSX.IntrinsicElements["limel-scroller"] & JSXBase.HTMLAttributes<HTMLLimelScrollerElement>;
             /**
              * ## Keyboard
              * Typing characters jumps to the option whose text starts with them, the way
@@ -13192,6 +13329,7 @@ declare module "@stencil/core" {
              * :::
              * An exception for using tab bars in a high level of hierarchy is their usage in modals. This is because modals are perceived as a separate place and not a part of the current context. Therefore you can use tab bars in a modal to group and organize its content.
              * 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.
+             * 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.
              * :::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.

package/dist/types/global/icon-cache/factory.d.ts

@@ -1,5 +1,5 @@
 import { CacheStorageIconCache } from './cache-storage-icon-cache';
 import { InMemoryIconCache } from './in-memory-icon-cache';
-declare const _default: CacheStorageIconCache | InMemoryIconCache;
-export default _default;
+declare const iconCache: CacheStorageIconCache | InMemoryIconCache;
+export default iconCache;
 //# sourceMappingURL=factory.d.ts.map

package/dist/types/global/shared-types/custom-element.types.d.ts

@@ -20,4 +20,29 @@ export type CustomElement = Omit<CustomElementDefinition, 'attributes'> & {
      */
     attributes: Record<string, any>;
 };
+/**
+ * A custom element that can describe itself as markdown.
+ *
+ * `limel-markdown` calls `toMarkdown` on every whitelisted element that
+ * implements it when its own `toMarkdown` is called, and puts the result
+ * in the element's place. Use it to give targets that cannot render the
+ * element, such as the clipboard, a markdown form of what it shows.
+ *
+ * The returned markdown takes the element's place as is, without
+ * escaping. An element that is rendered inline, such as a chip, should
+ * return inline markdown, such as a link.
+ *
+ * Implement `toMarkdown` as a method of the element's class, since
+ * `limel-markdown` looks for it on the class of each whitelisted tag.
+ *
+ * @alpha
+ */
+export interface MarkdownDescribable {
+    /**
+     * Describe the element as markdown.
+     *
+     * @returns The markdown that represents the element.
+     */
+    toMarkdown(): Promise<string>;
+}
 //# sourceMappingURL=custom-element.types.d.ts.map

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

@@ -2,6 +2,6 @@ export declare class Translations {
     get(key: string, language?: string, params?: object): string;
     private getTranslationsFor;
 }
-declare const _default: Translations;
-export default _default;
+declare const translations: Translations;
+export default translations;
 //# sourceMappingURL=translations.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.5.4",
+  "version": "40.6.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -52,15 +52,15 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
+    "@commitlint/cli": "^21.2.3",
     "@commitlint/config-conventional": "^21.2.3",
-    "@limetech/eslint-config": "^4.1.0",
-    "@microsoft/api-extractor": "^7.59.2",
-    "@playwright/test": "1.62.1",
+    "@limetech/eslint-config": "^5.0.1",
+    "@microsoft/api-extractor": "^7.59.3",
+    "@playwright/test": "1.63.0",
     "@popperjs/core": "^2.11.8",
     "@rjsf/core": "^6.11.0",
     "@rjsf/utils": "^6.11.0",
     "@rjsf/validator-ajv8": "^6.11.0",
-    "@rollup/plugin-node-resolve": "^13.3.0",
     "@stencil/core": "^4.43.5",
     "@stencil/sass": "^3.3.3",
     "@stencil/vitest": "^1.15.1",
@@ -76,22 +76,25 @@
     "cross-env": "^10.1.0",
     "dayjs": "^1.11.23",
     "diff": "^9.0.0",
-    "eslint": "^9.39.4",
+    "eslint": "^10.11.0",
     "flatpickr": "^4.6.13",
     "glob": "^13.0.6",
-    "globals": "^17.12.0",
+    "globals": "^17.13.0",
+    "hast-util-from-dom": "^5.0.1",
+    "hast-util-to-mdast": "^10.1.2",
     "html-escaper": "^3.0.3",
     "jsonlint-mod": "^1.7.6",
     "jsx-dom": "^8.1.6",
     "kompendium": "npm:@limetech/kompendium@^1.3.0",
     "lodash-es": "^4.17.23",
     "material-components-web": "^13.0.0",
-    "moment": "^2.30.1",
+    "mdast-util-to-markdown": "^2.1.3",
+    "moment": "^2.31.0",
     "morphdom": "^2.7.8",
     "number-abbreviate": "^2.0.0",
     "parse-css-color": "^0.2.1",
-    "postal-mime": "^3.0.1",
-    "prettier": "^3.8.3",
+    "postal-mime": "^4.0.2",
+    "prettier": "^3.9.9",
     "prosemirror-example-setup": "^1.2.3",
     "prosemirror-markdown": "^1.13.8",
     "prosemirror-model": ">=1.25.12",
@@ -102,22 +105,25 @@
     "react-dom": "^19.3.0",
     "rehype-parse": "^9.0.1",
     "rehype-raw": "^7.0.0",
+    "rehype-remark": "^10.0.1",
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.1",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
+    "remark-stringify": "^11.0.0",
     "replace-in-file": "^8.4.0",
     "shelljs": "0.10.0",
     "shx": "^0.4.0",
     "sirv": "^3.0.2",
     "sortablejs": "^1.15.7",
     "style-to-object": "^2.0.2",
-    "tabulator-tables": "^6.5.3",
+    "tabulator-tables": "^6.6.1",
     "typescript": "^4.9.5",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
-    "yargs": "^17.7.2"
+    "yargs": "^18.2.0"
   },
   "overrides": {
     "prosemirror-model": "$prosemirror-model"