@limetech/lime-elements 38.28.1 → 38.28.2

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [38.28.2](https://github.com/Lundalogik/lime-elements/compare/v38.28.1...v38.28.2) (2025-10-15)
+
+
+### Bug Fixes
+
+
+* **list:** prevent double `interact` event emits, when an item is clicked ([7672994](https://github.com/Lundalogik/lime-elements/commit/7672994ce1e44f6d39afea841656a0ee4c2ddd09))
+
 ## [38.28.1](https://github.com/Lundalogik/lime-elements/compare/v38.28.0...v38.28.1) (2025-10-15)
 
 

package/dist/cjs/limel-list-item.cjs.entry.js

@@ -25,7 +25,6 @@ const listItemCss = "@charset \"UTF-8\";*,*:before,*:after{box-sizing:border-box
 const ListItemComponent = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.interact = index.createEvent(this, "interact", 7);
     this.renderLabel = () => {
       return (index.h("span", { class: "label", id: this.labelId }, this.text));
     };
@@ -95,84 +94,6 @@ const ListItemComponent = class {
       }
       return (index.h(checkbox_template.CheckboxTemplate, { id: `checkbox_${this.labelId}`, checked: this.selected, disabled: this.disabled }));
     };
-    this.onClick = (event) => {
-      if (this.disabled) {
-        // Ignore toggling, but don't block embedded controls
-        return;
-      }
-      const target = event.target;
-      const cameFromActionTrigger = !!(target === null || target === void 0 ? void 0 : target.closest('.action-menu-trigger'));
-      const cameFromNoToggle = !!(target === null || target === void 0 ? void 0 : target.closest('[data-no-toggle]'));
-      const cameFromMenu = !!(target === null || target === void 0 ? void 0 : target.closest('limel-menu'));
-      if (cameFromActionTrigger || cameFromNoToggle || cameFromMenu) {
-        return;
-      }
-      if (this.isSelectableType()) {
-        this.handleInteraction();
-      }
-      // For non-selectable types (menuitem/listitem), allow native click to bubble
-    };
-    this.onKeyDown = (event) => {
-      if (this.disabled) {
-        return;
-      }
-      // Only handle keyboard when the host itself has focus.
-      // This avoids toggling when Space/Enter is pressed on inner controls
-      // like the action menu trigger or any primary component.
-      const shadowRoot = this.host.shadowRoot;
-      const activeElement = shadowRoot
-        ? shadowRoot.activeElement
-        : null;
-      if (activeElement && activeElement !== this.host) {
-        return;
-      }
-      const isEnter = event.key === 'Enter';
-      const isSpace = event.key === ' ' ||
-        event.key === 'Space' ||
-        event.key === 'Spacebar' ||
-        event.code === 'Space';
-      if (!isEnter && !isSpace) {
-        return;
-      }
-      // Avoid re-triggering while key is held down and auto-repeats
-      if (event.repeat) {
-        // Also prevent default scroll on Space when repeating
-        if (isSpace) {
-          event.preventDefault();
-        }
-        return;
-      }
-      // Prevent page scroll and default button behavior on Space
-      if (isSpace) {
-        event.preventDefault();
-      }
-      if (this.isSelectableType()) {
-        this.handleInteraction();
-        return;
-      }
-      // For non-selectable items, treat Enter and Space as activation (simulate click)
-      if (isEnter || isSpace) {
-        this.host.click();
-      }
-    };
-    this.handleInteraction = () => {
-      const newSelected = !this.selected;
-      const item = {
-        text: this.text,
-        secondaryText: this.secondaryText,
-        disabled: this.disabled,
-        icon: this.icon,
-        selected: newSelected,
-        value: this.value,
-        actions: this.actions,
-        primaryComponent: this.primaryComponent,
-        image: this.image,
-      };
-      this.interact.emit({
-        selected: newSelected,
-        item: item,
-      });
-    };
     this.actionMenuLabel = () => {
       return translations.translate.get('file-viewer.more-actions', this.language);
     };
@@ -212,7 +133,7 @@ const ListItemComponent = class {
     }
     return (index.h(index.Host, Object.assign({ role: this.getHostRole(), class: {
         'has-primary-component': !!((_a = this.primaryComponent) === null || _a === void 0 ? void 0 : _a.name),
-      } }, ariaProps, { onClick: this.onClick, onKeyDown: this.onKeyDown }), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), index.h("div", { class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+      } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), index.h("div", { class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
   }
   /**
    * Returns a stable reference for the provided actions array to avoid
@@ -228,11 +149,6 @@ const ListItemComponent = class {
     this.memoizedActions = actions;
     return actions;
   }
-  isSelectableType() {
-    return (this.type === 'option' ||
-      this.type === 'radio' ||
-      this.type === 'checkbox');
-  }
   getHostRole() {
     switch (this.type) {
       case 'option': {
@@ -252,7 +168,6 @@ const ListItemComponent = class {
       }
     }
   }
-  get host() { return index.getElement(this); }
 };
 ListItemComponent.style = listItemCss;
 

package/dist/cjs/limel-list-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-list-item.entry.cjs.js","mappings":"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","names":["h","getIconName","CheckboxTemplate","translate","createRandomString","Host"],"sources":["./src/components/radio-button-group/radio-button.template.tsx","./src/components/list-item/list-item.scss?tag=limel-list-item","./src/components/list-item/list-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Radio Button Template\n *\n * This is a low-level template component that renders individual radio button elements\n * using Material Design Components (MDC) styling and structure. It's used internally\n * by the list component to render radio buttons when `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * @internal\n */\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div\n            class={{\n                'boolean-input': true,\n                'radio-button': true,\n                checked: props.checked,\n                disabled: props.disabled,\n            }}\n        >\n            <input\n                type=\"radio\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled}\n                onChange={props.onChange}\n            />\n            <div class=\"box\" />\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","/**\n * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.\n * @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.\n * @prop --limel-list-item-menu-order: Defines the order of the menu, within the list item's flexbox. Defaults to `3`.\n */\n\n@use '../../style/mixins';\n@forward '../checkbox/checkbox.scss';\n@forward '../radio-button-group/radio-button.scss';\n\n*,\n*:before,\n*:after {\n    box-sizing: border-box;\n}\n\nlimel-list-item {\n    min-height: 2.5rem;\n    @include mixins.visualize-keyboard-focus();\n\n    transition: background-color 0.6s ease;\n    position: relative;\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n\n    padding: 0 1rem;\n    background-color: rgb(var(--contrast-100));\n\n    &:hover {\n        z-index: 1;\n        transition: background-color 0.2s ease;\n        border-radius: 0.5rem;\n    }\n\n    &:focus,\n    &:focus-visible,\n    &:active {\n        z-index: 1;\n        border-radius: 0.5rem;\n    }\n\n    &:first-of-type {\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n\n    &:last-of-type {\n        border-bottom-left-radius: 0.5rem;\n        border-bottom-right-radius: 0.5rem;\n    }\n\n    &:not([disabled]):not([disabled='true']) {\n        cursor: pointer;\n    }\n\n    &[disabled]:not([disabled='false']) {\n        cursor: not-allowed;\n    }\n}\n\nlimel-list-item[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n\n    .text,\n    limel-icon,\n    img,\n    .boolean-input {\n        opacity: 0.4;\n    }\n}\n\nlimel-list-item:not([disabled]):not([disabled='true']):hover,\nlimel-list-item:not([disabled]):not([disabled='true']):focus-visible {\n    background-color: rgb(var(--contrast-400));\n}\n\nlimel-list-item[type='option'] {\n    &:before {\n        transition: background-color 0.6s ease;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        opacity: 0.2;\n        border-radius: 0.5rem;\n    }\n\n    &[selected]:not([selected='false']) {\n        &:before {\n            transition: background-color 0.2s ease;\n            background-color: var(--limel-theme-primary-color);\n        }\n    }\n}\n\nlimel-list-item {\n    .text {\n        flex-grow: 1;\n        min-width: 0;\n\n        display: flex;\n        flex-direction: column;\n\n        padding: 0.5rem 0;\n\n        color: var(--limel-theme-text-primary-on-background-color);\n    }\n\n    .label {\n        @include mixins.truncate-text();\n\n        font-size: var(--limel-theme-default-font-size);\n        line-height: 1rem;\n    }\n\n    .description {\n        @include mixins.truncate-text-on-line(var(--maxLinesSecondaryText));\n        line-height: 1rem;\n        font-size: var(--limel-theme-default-small-font-size);\n        opacity: 0.6;\n    }\n\n    limel-icon {\n        color: var(--limel-theme-text-secondary-on-background-color);\n        flex-shrink: 0;\n        margin-left: -0.5rem;\n\n        &:has(+ img) {\n            margin-left: 0;\n            position: absolute;\n            top: 0.125rem;\n            left: 0.125rem;\n            padding: 0.1875rem;\n            width: 1.25rem;\n            background-color: rgb(var(--contrast-200), 0.8);\n        }\n    }\n\n    img {\n        flex-shrink: 0;\n        object-fit: cover;\n        border-radius: 50%;\n        width: 2rem;\n        height: 2rem;\n        box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);\n    }\n\n    limel-menu {\n        margin-right: -0.5rem;\n        // Sometimes, `primaryComponent`s in list items need to get\n        // `order: 2;` to be placed after the text. But since the default `order`\n        // of all lit item children is `0`, we need to push the menu to the far right\n        // by giving it a bigger order number. Also, by making this into a variable\n        // we can handle other edge-cases in consuming components.\n        order: var(--limel-list-item-menu-order, 3);\n    }\n}\n\nlimel-list-item {\n    &[role='menuitem'] & {\n        .label {\n            font-size: var(--limel-theme-default-small-font-size);\n        }\n    }\n}\n\n// ====================\n// Checkbox and radios\n.boolean-input {\n    width: var(--limel-boolean-input-box-size);\n    margin-left: -0.25rem;\n    &.checkbox {\n        margin-right: 0.25rem;\n    }\n\n    limel-list-item:has(limel-icon) &,\n    limel-list-item:has(img) & {\n        margin-right: -0.25rem;\n        margin-left: 0;\n        order: 2;\n    }\n}\n\n.boolean-input-label {\n    @include mixins.truncate-text();\n    opacity: 0;\n    width: var(--limel-boolean-input-box-size);\n}\n// ====================\n","import {\n    Component,\n    Host,\n    Prop,\n    h,\n    Event,\n    EventEmitter,\n    Element,\n} from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n    tag: 'limel-list-item',\n    shadow: false,\n    styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * {@inheritdoc ListItem.value}\n     */\n    @Prop()\n    public value?: any;\n\n    /**\n     * {@inheritdoc ListItem.text}\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * {@inheritdoc ListItem.secondaryText}\n     */\n    @Prop({ reflect: true })\n    public secondaryText?: string;\n\n    /**\n     * {@inheritdoc ListItem.disabled}\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * {@inheritdoc ListItem.icon}\n     */\n    @Prop()\n    public icon?: string | ListItem['icon'];\n\n    /**\n     * Size of the icon displayed for this item.\n     */\n    @Prop({ reflect: true })\n    public iconSize: IconSize = 'small';\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop({ reflect: true })\n    public badgeIcon = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public actions?: ListItem['actions'];\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public primaryComponent?: ListItem['primaryComponent'];\n\n    /**\n     * {@inheritdoc ListItem.image}\n     */\n    @Prop()\n    public image?: ListItem['image'];\n\n    /**\n     * The semantic role of the list item. This affects the ARIA role\n     * and the interaction behavior.\n     *\n     * - 'option' → selectable via click/Enter/Space, aria-selected\n     * - 'radio'/'checkbox' → selectable, aria-checked\n     * - 'menuitem'/'listitem' → activation only, no selection toggle\n     */\n    @Prop({ reflect: true })\n    public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n        'listitem';\n\n    /**\n     * Emitted when the list item toggles selection (only for selectable types and not disabled).\n     */\n    @Event()\n    public interact: EventEmitter<{\n        selected: boolean;\n        item: ListItem;\n    }>;\n\n    @Element()\n    private host: HTMLLimelListItemElement;\n\n    /**\n     * Used to describe the list item for assistive technology.\n     */\n    private readonly descriptionId: string;\n\n    /**\n     * Used to label the list item for assistive technology.\n     */\n    private readonly labelId: string;\n\n    // Memoized reference for the action items to avoid unnecessary updates\n    private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.descriptionId = createRandomString();\n    }\n\n    public render() {\n        const ariaProps: any = {\n            'aria-labelledby': this.labelId,\n            'aria-describedby': this.secondaryText\n                ? this.descriptionId\n                : undefined,\n            'aria-disabled': this.disabled ? 'true' : 'false',\n        };\n\n        // ARIA state depending on `role`/`type`\n        if (this.type === 'radio' || this.type === 'checkbox') {\n            ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n        } else if (this.type === 'option' || this.type === 'menuitem') {\n            // aria-selected for `option` (spec);\n            // also keep for `menuitem` for visual state consistency\n            ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n        }\n\n        return (\n            <Host\n                role={this.getHostRole()}\n                class={{\n                    'has-primary-component': !!this.primaryComponent?.name,\n                }}\n                {...ariaProps}\n                onClick={this.onClick}\n                onKeyDown={this.onKeyDown}\n            >\n                {this.renderRadioButton()}\n                {this.renderCheckbox()}\n                {this.renderIcon()}\n                {this.renderImage()}\n                {this.renderPrimaryComponent()}\n                <div class=\"text\">\n                    {this.renderLabel()}\n                    {this.renderDescription()}\n                </div>\n                {this.renderActionMenu(this.actions)}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        return (\n            <span class=\"label\" id={this.labelId}>\n                {this.text}\n            </span>\n        );\n    };\n\n    private renderDescription = () => {\n        if (!this.secondaryText) {\n            return;\n        }\n\n        return (\n            <span class=\"description\" id={this.descriptionId}>\n                {this.secondaryText}\n            </span>\n        );\n    };\n\n    private renderIcon = () => {\n        const iconName = getIconName(this.icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n        let title: string | undefined;\n\n        if (typeof this.icon === 'object') {\n            iconColor = this.icon.color;\n            iconBackgroundColor = this.icon.backgroundColor;\n            title = this.icon.title;\n        }\n\n        const iconProps = {\n            'aria-label': title,\n            'aria-hidden': title ? null : 'true',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n            badge: this.badgeIcon,\n            size: this.iconSize,\n        };\n\n        return <limel-icon {...iconProps} />;\n    };\n\n    private renderPrimaryComponent = () => {\n        const primary = this.primaryComponent;\n        if (!primary?.name) {\n            return;\n        }\n\n        const PrimaryComponent: any = primary.name;\n        const props = primary.props || {};\n\n        return <PrimaryComponent {...props} />;\n    };\n\n    private renderImage = () => {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        const stableActions = this.getStableActions(actions);\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={stableActions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                    label={this.actionMenuLabel()}\n                />\n            </limel-menu>\n        );\n    };\n\n    /**\n     * Returns a stable reference for the provided actions array to avoid\n     * unnecessary re-renders of the action menu when the reference is unchanged.\n     *\n     * @param actions The actions (and separators) to display in the menu\n     * @returns The same array instance that was previously seen, if unchanged\n     */\n    private getStableActions(\n        actions: Array<MenuItem | ListSeparator>\n    ): Array<MenuItem | ListSeparator> {\n        if (this.memoizedActions === actions) {\n            return this.memoizedActions;\n        }\n        this.memoizedActions = actions;\n        return actions;\n    }\n\n    private renderRadioButton = () => {\n        if (this.type !== 'radio') {\n            return;\n        }\n\n        return (\n            <RadioButtonTemplate\n                id={`radio_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private renderCheckbox = () => {\n        if (this.type !== 'checkbox') {\n            return;\n        }\n\n        return (\n            <CheckboxTemplate\n                id={`checkbox_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private onClick = (event: MouseEvent) => {\n        if (this.disabled) {\n            // Ignore toggling, but don't block embedded controls\n            return;\n        }\n\n        const target = event.target as HTMLElement | null;\n        const cameFromActionTrigger = !!target?.closest('.action-menu-trigger');\n        const cameFromNoToggle = !!target?.closest('[data-no-toggle]');\n        const cameFromMenu = !!target?.closest('limel-menu');\n        if (cameFromActionTrigger || cameFromNoToggle || cameFromMenu) {\n            return;\n        }\n\n        if (this.isSelectableType()) {\n            this.handleInteraction();\n        }\n        // For non-selectable types (menuitem/listitem), allow native click to bubble\n    };\n\n    private onKeyDown = (event: KeyboardEvent) => {\n        if (this.disabled) {\n            return;\n        }\n\n        // Only handle keyboard when the host itself has focus.\n        // This avoids toggling when Space/Enter is pressed on inner controls\n        // like the action menu trigger or any primary component.\n        const shadowRoot = this.host.shadowRoot;\n        const activeElement = shadowRoot\n            ? (shadowRoot.activeElement as HTMLElement | null)\n            : null;\n        if (activeElement && activeElement !== this.host) {\n            return;\n        }\n\n        const isEnter = event.key === 'Enter';\n        const isSpace =\n            event.key === ' ' ||\n            event.key === 'Space' ||\n            event.key === 'Spacebar' ||\n            event.code === 'Space';\n\n        if (!isEnter && !isSpace) {\n            return;\n        }\n\n        // Avoid re-triggering while key is held down and auto-repeats\n        if (event.repeat) {\n            // Also prevent default scroll on Space when repeating\n            if (isSpace) {\n                event.preventDefault();\n            }\n            return;\n        }\n\n        // Prevent page scroll and default button behavior on Space\n        if (isSpace) {\n            event.preventDefault();\n        }\n\n        if (this.isSelectableType()) {\n            this.handleInteraction();\n            return;\n        }\n\n        // For non-selectable items, treat Enter and Space as activation (simulate click)\n        if (isEnter || isSpace) {\n            this.host.click();\n        }\n    };\n\n    private isSelectableType(): boolean {\n        return (\n            this.type === 'option' ||\n            this.type === 'radio' ||\n            this.type === 'checkbox'\n        );\n    }\n\n    private getHostRole(): string {\n        switch (this.type) {\n            case 'option': {\n                return 'option';\n            }\n            case 'radio': {\n                return 'radio';\n            }\n            case 'checkbox': {\n                return 'checkbox';\n            }\n            case 'menuitem': {\n                return 'menuitem';\n            }\n            default: {\n                return 'listitem';\n            }\n        }\n    }\n\n    private handleInteraction = () => {\n        const newSelected = !this.selected;\n\n        const item: ListItem = {\n            text: this.text,\n            secondaryText: this.secondaryText,\n            disabled: this.disabled,\n            icon: this.icon,\n            selected: newSelected,\n            value: this.value,\n            actions: this.actions,\n            primaryComponent: this.primaryComponent,\n            image: this.image,\n        };\n\n        this.interact.emit({\n            selected: newSelected,\n            item: item,\n        });\n    };\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n}\n"],"version":3}
+{"file":"limel-list-item.entry.cjs.js","mappings":"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","names":["h","getIconName","CheckboxTemplate","translate","createRandomString","Host"],"sources":["./src/components/radio-button-group/radio-button.template.tsx","./src/components/list-item/list-item.scss?tag=limel-list-item","./src/components/list-item/list-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Radio Button Template\n *\n * This is a low-level template component that renders individual radio button elements\n * using Material Design Components (MDC) styling and structure. It's used internally\n * by the list component to render radio buttons when `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * @internal\n */\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div\n            class={{\n                'boolean-input': true,\n                'radio-button': true,\n                checked: props.checked,\n                disabled: props.disabled,\n            }}\n        >\n            <input\n                type=\"radio\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled}\n                onChange={props.onChange}\n            />\n            <div class=\"box\" />\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","/**\n * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.\n * @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.\n * @prop --limel-list-item-menu-order: Defines the order of the menu, within the list item's flexbox. Defaults to `3`.\n */\n\n@use '../../style/mixins';\n@forward '../checkbox/checkbox.scss';\n@forward '../radio-button-group/radio-button.scss';\n\n*,\n*:before,\n*:after {\n    box-sizing: border-box;\n}\n\nlimel-list-item {\n    min-height: 2.5rem;\n    @include mixins.visualize-keyboard-focus();\n\n    transition: background-color 0.6s ease;\n    position: relative;\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n\n    padding: 0 1rem;\n    background-color: rgb(var(--contrast-100));\n\n    &:hover {\n        z-index: 1;\n        transition: background-color 0.2s ease;\n        border-radius: 0.5rem;\n    }\n\n    &:focus,\n    &:focus-visible,\n    &:active {\n        z-index: 1;\n        border-radius: 0.5rem;\n    }\n\n    &:first-of-type {\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n\n    &:last-of-type {\n        border-bottom-left-radius: 0.5rem;\n        border-bottom-right-radius: 0.5rem;\n    }\n\n    &:not([disabled]):not([disabled='true']) {\n        cursor: pointer;\n    }\n\n    &[disabled]:not([disabled='false']) {\n        cursor: not-allowed;\n    }\n}\n\nlimel-list-item[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n\n    .text,\n    limel-icon,\n    img,\n    .boolean-input {\n        opacity: 0.4;\n    }\n}\n\nlimel-list-item:not([disabled]):not([disabled='true']):hover,\nlimel-list-item:not([disabled]):not([disabled='true']):focus-visible {\n    background-color: rgb(var(--contrast-400));\n}\n\nlimel-list-item[type='option'] {\n    &:before {\n        transition: background-color 0.6s ease;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        opacity: 0.2;\n        border-radius: 0.5rem;\n    }\n\n    &[selected]:not([selected='false']) {\n        &:before {\n            transition: background-color 0.2s ease;\n            background-color: var(--limel-theme-primary-color);\n        }\n    }\n}\n\nlimel-list-item {\n    .text {\n        flex-grow: 1;\n        min-width: 0;\n\n        display: flex;\n        flex-direction: column;\n\n        padding: 0.5rem 0;\n\n        color: var(--limel-theme-text-primary-on-background-color);\n    }\n\n    .label {\n        @include mixins.truncate-text();\n\n        font-size: var(--limel-theme-default-font-size);\n        line-height: 1rem;\n    }\n\n    .description {\n        @include mixins.truncate-text-on-line(var(--maxLinesSecondaryText));\n        line-height: 1rem;\n        font-size: var(--limel-theme-default-small-font-size);\n        opacity: 0.6;\n    }\n\n    limel-icon {\n        color: var(--limel-theme-text-secondary-on-background-color);\n        flex-shrink: 0;\n        margin-left: -0.5rem;\n\n        &:has(+ img) {\n            margin-left: 0;\n            position: absolute;\n            top: 0.125rem;\n            left: 0.125rem;\n            padding: 0.1875rem;\n            width: 1.25rem;\n            background-color: rgb(var(--contrast-200), 0.8);\n        }\n    }\n\n    img {\n        flex-shrink: 0;\n        object-fit: cover;\n        border-radius: 50%;\n        width: 2rem;\n        height: 2rem;\n        box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);\n    }\n\n    limel-menu {\n        margin-right: -0.5rem;\n        // Sometimes, `primaryComponent`s in list items need to get\n        // `order: 2;` to be placed after the text. But since the default `order`\n        // of all lit item children is `0`, we need to push the menu to the far right\n        // by giving it a bigger order number. Also, by making this into a variable\n        // we can handle other edge-cases in consuming components.\n        order: var(--limel-list-item-menu-order, 3);\n    }\n}\n\nlimel-list-item {\n    &[role='menuitem'] & {\n        .label {\n            font-size: var(--limel-theme-default-small-font-size);\n        }\n    }\n}\n\n// ====================\n// Checkbox and radios\n.boolean-input {\n    width: var(--limel-boolean-input-box-size);\n    margin-left: -0.25rem;\n    &.checkbox {\n        margin-right: 0.25rem;\n    }\n\n    limel-list-item:has(limel-icon) &,\n    limel-list-item:has(img) & {\n        margin-right: -0.25rem;\n        margin-left: 0;\n        order: 2;\n    }\n}\n\n.boolean-input-label {\n    @include mixins.truncate-text();\n    opacity: 0;\n    width: var(--limel-boolean-input-box-size);\n}\n// ====================\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n    tag: 'limel-list-item',\n    shadow: false,\n    styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * {@inheritdoc ListItem.value}\n     */\n    @Prop()\n    public value?: any;\n\n    /**\n     * {@inheritdoc ListItem.text}\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * {@inheritdoc ListItem.secondaryText}\n     */\n    @Prop({ reflect: true })\n    public secondaryText?: string;\n\n    /**\n     * {@inheritdoc ListItem.disabled}\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * {@inheritdoc ListItem.icon}\n     */\n    @Prop()\n    public icon?: string | ListItem['icon'];\n\n    /**\n     * Size of the icon displayed for this item.\n     */\n    @Prop({ reflect: true })\n    public iconSize: IconSize = 'small';\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop({ reflect: true })\n    public badgeIcon = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public actions?: ListItem['actions'];\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public primaryComponent?: ListItem['primaryComponent'];\n\n    /**\n     * {@inheritdoc ListItem.image}\n     */\n    @Prop()\n    public image?: ListItem['image'];\n\n    /**\n     * The semantic role of the list item. This affects the ARIA role\n     * and the interaction behavior.\n     *\n     * - 'option' → selectable via click/Enter/Space, aria-selected\n     * - 'radio'/'checkbox' → selectable, aria-checked\n     * - 'menuitem'/'listitem' → activation only, no selection toggle\n     */\n    @Prop({ reflect: true })\n    public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n        'listitem';\n\n    /**\n     * Used to describe the list item for assistive technology.\n     */\n    private readonly descriptionId: string;\n\n    /**\n     * Used to label the list item for assistive technology.\n     */\n    private readonly labelId: string;\n\n    // Memoized reference for the action items to avoid unnecessary updates\n    private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.descriptionId = createRandomString();\n    }\n\n    public render() {\n        const ariaProps: any = {\n            'aria-labelledby': this.labelId,\n            'aria-describedby': this.secondaryText\n                ? this.descriptionId\n                : undefined,\n            'aria-disabled': this.disabled ? 'true' : 'false',\n        };\n\n        // ARIA state depending on `role`/`type`\n        if (this.type === 'radio' || this.type === 'checkbox') {\n            ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n        } else if (this.type === 'option' || this.type === 'menuitem') {\n            // aria-selected for `option` (spec);\n            // also keep for `menuitem` for visual state consistency\n            ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n        }\n\n        return (\n            <Host\n                role={this.getHostRole()}\n                class={{\n                    'has-primary-component': !!this.primaryComponent?.name,\n                }}\n                {...ariaProps}\n            >\n                {this.renderRadioButton()}\n                {this.renderCheckbox()}\n                {this.renderIcon()}\n                {this.renderImage()}\n                {this.renderPrimaryComponent()}\n                <div class=\"text\">\n                    {this.renderLabel()}\n                    {this.renderDescription()}\n                </div>\n                {this.renderActionMenu(this.actions)}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        return (\n            <span class=\"label\" id={this.labelId}>\n                {this.text}\n            </span>\n        );\n    };\n\n    private renderDescription = () => {\n        if (!this.secondaryText) {\n            return;\n        }\n\n        return (\n            <span class=\"description\" id={this.descriptionId}>\n                {this.secondaryText}\n            </span>\n        );\n    };\n\n    private renderIcon = () => {\n        const iconName = getIconName(this.icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n        let title: string | undefined;\n\n        if (typeof this.icon === 'object') {\n            iconColor = this.icon.color;\n            iconBackgroundColor = this.icon.backgroundColor;\n            title = this.icon.title;\n        }\n\n        const iconProps = {\n            'aria-label': title,\n            'aria-hidden': title ? null : 'true',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n            badge: this.badgeIcon,\n            size: this.iconSize,\n        };\n\n        return <limel-icon {...iconProps} />;\n    };\n\n    private renderPrimaryComponent = () => {\n        const primary = this.primaryComponent;\n        if (!primary?.name) {\n            return;\n        }\n\n        const PrimaryComponent: any = primary.name;\n        const props = primary.props || {};\n\n        return <PrimaryComponent {...props} />;\n    };\n\n    private renderImage = () => {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        const stableActions = this.getStableActions(actions);\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={stableActions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                    label={this.actionMenuLabel()}\n                />\n            </limel-menu>\n        );\n    };\n\n    /**\n     * Returns a stable reference for the provided actions array to avoid\n     * unnecessary re-renders of the action menu when the reference is unchanged.\n     *\n     * @param actions The actions (and separators) to display in the menu\n     * @returns The same array instance that was previously seen, if unchanged\n     */\n    private getStableActions(\n        actions: Array<MenuItem | ListSeparator>\n    ): Array<MenuItem | ListSeparator> {\n        if (this.memoizedActions === actions) {\n            return this.memoizedActions;\n        }\n        this.memoizedActions = actions;\n        return actions;\n    }\n\n    private renderRadioButton = () => {\n        if (this.type !== 'radio') {\n            return;\n        }\n\n        return (\n            <RadioButtonTemplate\n                id={`radio_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private renderCheckbox = () => {\n        if (this.type !== 'checkbox') {\n            return;\n        }\n\n        return (\n            <CheckboxTemplate\n                id={`checkbox_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private getHostRole(): string {\n        switch (this.type) {\n            case 'option': {\n                return 'option';\n            }\n            case 'radio': {\n                return 'radio';\n            }\n            case 'checkbox': {\n                return 'checkbox';\n            }\n            case 'menuitem': {\n                return 'menuitem';\n            }\n            default: {\n                return 'listitem';\n            }\n        }\n    }\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n}\n"],"version":3}

package/dist/collection/components/list-item/list-item.js

@@ -1,4 +1,4 @@
-import { Host, h, } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 import { getIconName } from '../icon/get-icon-props';
 import { createRandomString } from '../../util/random-string';
 import { CheckboxTemplate } from '../checkbox/checkbox.template';
@@ -109,84 +109,6 @@ export class ListItemComponent {
       }
       return (h(CheckboxTemplate, { id: `checkbox_${this.labelId}`, checked: this.selected, disabled: this.disabled }));
     };
-    this.onClick = (event) => {
-      if (this.disabled) {
-        // Ignore toggling, but don't block embedded controls
-        return;
-      }
-      const target = event.target;
-      const cameFromActionTrigger = !!(target === null || target === void 0 ? void 0 : target.closest('.action-menu-trigger'));
-      const cameFromNoToggle = !!(target === null || target === void 0 ? void 0 : target.closest('[data-no-toggle]'));
-      const cameFromMenu = !!(target === null || target === void 0 ? void 0 : target.closest('limel-menu'));
-      if (cameFromActionTrigger || cameFromNoToggle || cameFromMenu) {
-        return;
-      }
-      if (this.isSelectableType()) {
-        this.handleInteraction();
-      }
-      // For non-selectable types (menuitem/listitem), allow native click to bubble
-    };
-    this.onKeyDown = (event) => {
-      if (this.disabled) {
-        return;
-      }
-      // Only handle keyboard when the host itself has focus.
-      // This avoids toggling when Space/Enter is pressed on inner controls
-      // like the action menu trigger or any primary component.
-      const shadowRoot = this.host.shadowRoot;
-      const activeElement = shadowRoot
-        ? shadowRoot.activeElement
-        : null;
-      if (activeElement && activeElement !== this.host) {
-        return;
-      }
-      const isEnter = event.key === 'Enter';
-      const isSpace = event.key === ' ' ||
-        event.key === 'Space' ||
-        event.key === 'Spacebar' ||
-        event.code === 'Space';
-      if (!isEnter && !isSpace) {
-        return;
-      }
-      // Avoid re-triggering while key is held down and auto-repeats
-      if (event.repeat) {
-        // Also prevent default scroll on Space when repeating
-        if (isSpace) {
-          event.preventDefault();
-        }
-        return;
-      }
-      // Prevent page scroll and default button behavior on Space
-      if (isSpace) {
-        event.preventDefault();
-      }
-      if (this.isSelectableType()) {
-        this.handleInteraction();
-        return;
-      }
-      // For non-selectable items, treat Enter and Space as activation (simulate click)
-      if (isEnter || isSpace) {
-        this.host.click();
-      }
-    };
-    this.handleInteraction = () => {
-      const newSelected = !this.selected;
-      const item = {
-        text: this.text,
-        secondaryText: this.secondaryText,
-        disabled: this.disabled,
-        icon: this.icon,
-        selected: newSelected,
-        value: this.value,
-        actions: this.actions,
-        primaryComponent: this.primaryComponent,
-        image: this.image,
-      };
-      this.interact.emit({
-        selected: newSelected,
-        item: item,
-      });
-    };
     this.actionMenuLabel = () => {
       return translate.get('file-viewer.more-actions', this.language);
     };
@@ -226,7 +148,7 @@ export class ListItemComponent {
     }
     return (h(Host, Object.assign({ role: this.getHostRole(), class: {
         'has-primary-component': !!((_a = this.primaryComponent) === null || _a === void 0 ? void 0 : _a.name),
-      } }, ariaProps, { onClick: this.onClick, onKeyDown: this.onKeyDown }), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+      } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
   }
   /**
    * Returns a stable reference for the provided actions array to avoid
@@ -242,11 +164,6 @@ export class ListItemComponent {
     this.memoizedActions = actions;
     return actions;
   }
-  isSelectableType() {
-    return (this.type === 'option' ||
-      this.type === 'radio' ||
-      this.type === 'checkbox');
-  }
   getHostRole() {
     switch (this.type) {
       case 'option': {
@@ -532,29 +449,5 @@ export class ListItemComponent {
       }
     };
   }
-  static get events() {
-    return [{
-        "method": "interact",
-        "name": "interact",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the list item toggles selection (only for selectable types and not disabled)."
-        },
-        "complexType": {
-          "original": "{\n        selected: boolean;\n        item: ListItem;\n    }",
-          "resolved": "{ selected: boolean; item: ListItem<any>; }",
-          "references": {
-            "ListItem": {
-              "location": "import",
-              "path": "./list-item.types"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=list-item.js.map

package/dist/collection/components/list-item/list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../src/components/list-item/list-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    Host,\n    Prop,\n    h,\n    Event,\n    EventEmitter,\n    Element,\n} from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n    tag: 'limel-list-item',\n    shadow: false,\n    styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * {@inheritdoc ListItem.value}\n     */\n    @Prop()\n    public value?: any;\n\n    /**\n     * {@inheritdoc ListItem.text}\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * {@inheritdoc ListItem.secondaryText}\n     */\n    @Prop({ reflect: true })\n    public secondaryText?: string;\n\n    /**\n     * {@inheritdoc ListItem.disabled}\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * {@inheritdoc ListItem.icon}\n     */\n    @Prop()\n    public icon?: string | ListItem['icon'];\n\n    /**\n     * Size of the icon displayed for this item.\n     */\n    @Prop({ reflect: true })\n    public iconSize: IconSize = 'small';\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop({ reflect: true })\n    public badgeIcon = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public actions?: ListItem['actions'];\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public primaryComponent?: ListItem['primaryComponent'];\n\n    /**\n     * {@inheritdoc ListItem.image}\n     */\n    @Prop()\n    public image?: ListItem['image'];\n\n    /**\n     * The semantic role of the list item. This affects the ARIA role\n     * and the interaction behavior.\n     *\n     * - 'option' → selectable via click/Enter/Space, aria-selected\n     * - 'radio'/'checkbox' → selectable, aria-checked\n     * - 'menuitem'/'listitem' → activation only, no selection toggle\n     */\n    @Prop({ reflect: true })\n    public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n        'listitem';\n\n    /**\n     * Emitted when the list item toggles selection (only for selectable types and not disabled).\n     */\n    @Event()\n    public interact: EventEmitter<{\n        selected: boolean;\n        item: ListItem;\n    }>;\n\n    @Element()\n    private host: HTMLLimelListItemElement;\n\n    /**\n     * Used to describe the list item for assistive technology.\n     */\n    private readonly descriptionId: string;\n\n    /**\n     * Used to label the list item for assistive technology.\n     */\n    private readonly labelId: string;\n\n    // Memoized reference for the action items to avoid unnecessary updates\n    private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.descriptionId = createRandomString();\n    }\n\n    public render() {\n        const ariaProps: any = {\n            'aria-labelledby': this.labelId,\n            'aria-describedby': this.secondaryText\n                ? this.descriptionId\n                : undefined,\n            'aria-disabled': this.disabled ? 'true' : 'false',\n        };\n\n        // ARIA state depending on `role`/`type`\n        if (this.type === 'radio' || this.type === 'checkbox') {\n            ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n        } else if (this.type === 'option' || this.type === 'menuitem') {\n            // aria-selected for `option` (spec);\n            // also keep for `menuitem` for visual state consistency\n            ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n        }\n\n        return (\n            <Host\n                role={this.getHostRole()}\n                class={{\n                    'has-primary-component': !!this.primaryComponent?.name,\n                }}\n                {...ariaProps}\n                onClick={this.onClick}\n                onKeyDown={this.onKeyDown}\n            >\n                {this.renderRadioButton()}\n                {this.renderCheckbox()}\n                {this.renderIcon()}\n                {this.renderImage()}\n                {this.renderPrimaryComponent()}\n                <div class=\"text\">\n                    {this.renderLabel()}\n                    {this.renderDescription()}\n                </div>\n                {this.renderActionMenu(this.actions)}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        return (\n            <span class=\"label\" id={this.labelId}>\n                {this.text}\n            </span>\n        );\n    };\n\n    private renderDescription = () => {\n        if (!this.secondaryText) {\n            return;\n        }\n\n        return (\n            <span class=\"description\" id={this.descriptionId}>\n                {this.secondaryText}\n            </span>\n        );\n    };\n\n    private renderIcon = () => {\n        const iconName = getIconName(this.icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n        let title: string | undefined;\n\n        if (typeof this.icon === 'object') {\n            iconColor = this.icon.color;\n            iconBackgroundColor = this.icon.backgroundColor;\n            title = this.icon.title;\n        }\n\n        const iconProps = {\n            'aria-label': title,\n            'aria-hidden': title ? null : 'true',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n            badge: this.badgeIcon,\n            size: this.iconSize,\n        };\n\n        return <limel-icon {...iconProps} />;\n    };\n\n    private renderPrimaryComponent = () => {\n        const primary = this.primaryComponent;\n        if (!primary?.name) {\n            return;\n        }\n\n        const PrimaryComponent: any = primary.name;\n        const props = primary.props || {};\n\n        return <PrimaryComponent {...props} />;\n    };\n\n    private renderImage = () => {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        const stableActions = this.getStableActions(actions);\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={stableActions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                    label={this.actionMenuLabel()}\n                />\n            </limel-menu>\n        );\n    };\n\n    /**\n     * Returns a stable reference for the provided actions array to avoid\n     * unnecessary re-renders of the action menu when the reference is unchanged.\n     *\n     * @param actions The actions (and separators) to display in the menu\n     * @returns The same array instance that was previously seen, if unchanged\n     */\n    private getStableActions(\n        actions: Array<MenuItem | ListSeparator>\n    ): Array<MenuItem | ListSeparator> {\n        if (this.memoizedActions === actions) {\n            return this.memoizedActions;\n        }\n        this.memoizedActions = actions;\n        return actions;\n    }\n\n    private renderRadioButton = () => {\n        if (this.type !== 'radio') {\n            return;\n        }\n\n        return (\n            <RadioButtonTemplate\n                id={`radio_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private renderCheckbox = () => {\n        if (this.type !== 'checkbox') {\n            return;\n        }\n\n        return (\n            <CheckboxTemplate\n                id={`checkbox_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private onClick = (event: MouseEvent) => {\n        if (this.disabled) {\n            // Ignore toggling, but don't block embedded controls\n            return;\n        }\n\n        const target = event.target as HTMLElement | null;\n        const cameFromActionTrigger = !!target?.closest('.action-menu-trigger');\n        const cameFromNoToggle = !!target?.closest('[data-no-toggle]');\n        const cameFromMenu = !!target?.closest('limel-menu');\n        if (cameFromActionTrigger || cameFromNoToggle || cameFromMenu) {\n            return;\n        }\n\n        if (this.isSelectableType()) {\n            this.handleInteraction();\n        }\n        // For non-selectable types (menuitem/listitem), allow native click to bubble\n    };\n\n    private onKeyDown = (event: KeyboardEvent) => {\n        if (this.disabled) {\n            return;\n        }\n\n        // Only handle keyboard when the host itself has focus.\n        // This avoids toggling when Space/Enter is pressed on inner controls\n        // like the action menu trigger or any primary component.\n        const shadowRoot = this.host.shadowRoot;\n        const activeElement = shadowRoot\n            ? (shadowRoot.activeElement as HTMLElement | null)\n            : null;\n        if (activeElement && activeElement !== this.host) {\n            return;\n        }\n\n        const isEnter = event.key === 'Enter';\n        const isSpace =\n            event.key === ' ' ||\n            event.key === 'Space' ||\n            event.key === 'Spacebar' ||\n            event.code === 'Space';\n\n        if (!isEnter && !isSpace) {\n            return;\n        }\n\n        // Avoid re-triggering while key is held down and auto-repeats\n        if (event.repeat) {\n            // Also prevent default scroll on Space when repeating\n            if (isSpace) {\n                event.preventDefault();\n            }\n            return;\n        }\n\n        // Prevent page scroll and default button behavior on Space\n        if (isSpace) {\n            event.preventDefault();\n        }\n\n        if (this.isSelectableType()) {\n            this.handleInteraction();\n            return;\n        }\n\n        // For non-selectable items, treat Enter and Space as activation (simulate click)\n        if (isEnter || isSpace) {\n            this.host.click();\n        }\n    };\n\n    private isSelectableType(): boolean {\n        return (\n            this.type === 'option' ||\n            this.type === 'radio' ||\n            this.type === 'checkbox'\n        );\n    }\n\n    private getHostRole(): string {\n        switch (this.type) {\n            case 'option': {\n                return 'option';\n            }\n            case 'radio': {\n                return 'radio';\n            }\n            case 'checkbox': {\n                return 'checkbox';\n            }\n            case 'menuitem': {\n                return 'menuitem';\n            }\n            default: {\n                return 'listitem';\n            }\n        }\n    }\n\n    private handleInteraction = () => {\n        const newSelected = !this.selected;\n\n        const item: ListItem = {\n            text: this.text,\n            secondaryText: this.secondaryText,\n            disabled: this.disabled,\n            icon: this.icon,\n            selected: newSelected,\n            value: this.value,\n            actions: this.actions,\n            primaryComponent: this.primaryComponent,\n            image: this.image,\n        };\n\n        this.interact.emit({\n            selected: newSelected,\n            item: item,\n        });\n    };\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n}\n"]}
+{"version":3,"file":"list-item.js","sourceRoot":"","sources":["../../../src/components/list-item/list-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n    tag: 'limel-list-item',\n    shadow: false,\n    styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * {@inheritdoc ListItem.value}\n     */\n    @Prop()\n    public value?: any;\n\n    /**\n     * {@inheritdoc ListItem.text}\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * {@inheritdoc ListItem.secondaryText}\n     */\n    @Prop({ reflect: true })\n    public secondaryText?: string;\n\n    /**\n     * {@inheritdoc ListItem.disabled}\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * {@inheritdoc ListItem.icon}\n     */\n    @Prop()\n    public icon?: string | ListItem['icon'];\n\n    /**\n     * Size of the icon displayed for this item.\n     */\n    @Prop({ reflect: true })\n    public iconSize: IconSize = 'small';\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop({ reflect: true })\n    public badgeIcon = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public actions?: ListItem['actions'];\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public primaryComponent?: ListItem['primaryComponent'];\n\n    /**\n     * {@inheritdoc ListItem.image}\n     */\n    @Prop()\n    public image?: ListItem['image'];\n\n    /**\n     * The semantic role of the list item. This affects the ARIA role\n     * and the interaction behavior.\n     *\n     * - 'option' → selectable via click/Enter/Space, aria-selected\n     * - 'radio'/'checkbox' → selectable, aria-checked\n     * - 'menuitem'/'listitem' → activation only, no selection toggle\n     */\n    @Prop({ reflect: true })\n    public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n        'listitem';\n\n    /**\n     * Used to describe the list item for assistive technology.\n     */\n    private readonly descriptionId: string;\n\n    /**\n     * Used to label the list item for assistive technology.\n     */\n    private readonly labelId: string;\n\n    // Memoized reference for the action items to avoid unnecessary updates\n    private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.descriptionId = createRandomString();\n    }\n\n    public render() {\n        const ariaProps: any = {\n            'aria-labelledby': this.labelId,\n            'aria-describedby': this.secondaryText\n                ? this.descriptionId\n                : undefined,\n            'aria-disabled': this.disabled ? 'true' : 'false',\n        };\n\n        // ARIA state depending on `role`/`type`\n        if (this.type === 'radio' || this.type === 'checkbox') {\n            ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n        } else if (this.type === 'option' || this.type === 'menuitem') {\n            // aria-selected for `option` (spec);\n            // also keep for `menuitem` for visual state consistency\n            ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n        }\n\n        return (\n            <Host\n                role={this.getHostRole()}\n                class={{\n                    'has-primary-component': !!this.primaryComponent?.name,\n                }}\n                {...ariaProps}\n            >\n                {this.renderRadioButton()}\n                {this.renderCheckbox()}\n                {this.renderIcon()}\n                {this.renderImage()}\n                {this.renderPrimaryComponent()}\n                <div class=\"text\">\n                    {this.renderLabel()}\n                    {this.renderDescription()}\n                </div>\n                {this.renderActionMenu(this.actions)}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        return (\n            <span class=\"label\" id={this.labelId}>\n                {this.text}\n            </span>\n        );\n    };\n\n    private renderDescription = () => {\n        if (!this.secondaryText) {\n            return;\n        }\n\n        return (\n            <span class=\"description\" id={this.descriptionId}>\n                {this.secondaryText}\n            </span>\n        );\n    };\n\n    private renderIcon = () => {\n        const iconName = getIconName(this.icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n        let title: string | undefined;\n\n        if (typeof this.icon === 'object') {\n            iconColor = this.icon.color;\n            iconBackgroundColor = this.icon.backgroundColor;\n            title = this.icon.title;\n        }\n\n        const iconProps = {\n            'aria-label': title,\n            'aria-hidden': title ? null : 'true',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n            badge: this.badgeIcon,\n            size: this.iconSize,\n        };\n\n        return <limel-icon {...iconProps} />;\n    };\n\n    private renderPrimaryComponent = () => {\n        const primary = this.primaryComponent;\n        if (!primary?.name) {\n            return;\n        }\n\n        const PrimaryComponent: any = primary.name;\n        const props = primary.props || {};\n\n        return <PrimaryComponent {...props} />;\n    };\n\n    private renderImage = () => {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        const stableActions = this.getStableActions(actions);\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={stableActions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                    label={this.actionMenuLabel()}\n                />\n            </limel-menu>\n        );\n    };\n\n    /**\n     * Returns a stable reference for the provided actions array to avoid\n     * unnecessary re-renders of the action menu when the reference is unchanged.\n     *\n     * @param actions The actions (and separators) to display in the menu\n     * @returns The same array instance that was previously seen, if unchanged\n     */\n    private getStableActions(\n        actions: Array<MenuItem | ListSeparator>\n    ): Array<MenuItem | ListSeparator> {\n        if (this.memoizedActions === actions) {\n            return this.memoizedActions;\n        }\n        this.memoizedActions = actions;\n        return actions;\n    }\n\n    private renderRadioButton = () => {\n        if (this.type !== 'radio') {\n            return;\n        }\n\n        return (\n            <RadioButtonTemplate\n                id={`radio_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private renderCheckbox = () => {\n        if (this.type !== 'checkbox') {\n            return;\n        }\n\n        return (\n            <CheckboxTemplate\n                id={`checkbox_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private getHostRole(): string {\n        switch (this.type) {\n            case 'option': {\n                return 'option';\n            }\n            case 'radio': {\n                return 'radio';\n            }\n            case 'checkbox': {\n                return 'checkbox';\n            }\n            case 'menuitem': {\n                return 'menuitem';\n            }\n            default: {\n                return 'listitem';\n            }\n        }\n    }\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n}\n"]}

package/dist/esm/limel-list-item.entry.js

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-2714248e.js';
+import { h, r as registerInstance, H as Host } from './index-2714248e.js';
 import { g as getIconName } from './get-icon-props-37514418.js';
 import { c as createRandomString } from './random-string-355331d3.js';
 import { C as CheckboxTemplate } from './checkbox.template-9acc6347.js';
@@ -21,7 +21,6 @@ const listItemCss = "@charset \"UTF-8\";*,*:before,*:after{box-sizing:border-box
 const ListItemComponent = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.interact = createEvent(this, "interact", 7);
     this.renderLabel = () => {
       return (h("span", { class: "label", id: this.labelId }, this.text));
     };
@@ -91,84 +90,6 @@ const ListItemComponent = class {
       }
       return (h(CheckboxTemplate, { id: `checkbox_${this.labelId}`, checked: this.selected, disabled: this.disabled }));
     };
-    this.onClick = (event) => {
-      if (this.disabled) {
-        // Ignore toggling, but don't block embedded controls
-        return;
-      }
-      const target = event.target;
-      const cameFromActionTrigger = !!(target === null || target === void 0 ? void 0 : target.closest('.action-menu-trigger'));
-      const cameFromNoToggle = !!(target === null || target === void 0 ? void 0 : target.closest('[data-no-toggle]'));
-      const cameFromMenu = !!(target === null || target === void 0 ? void 0 : target.closest('limel-menu'));
-      if (cameFromActionTrigger || cameFromNoToggle || cameFromMenu) {
-        return;
-      }
-      if (this.isSelectableType()) {
-        this.handleInteraction();
-      }
-      // For non-selectable types (menuitem/listitem), allow native click to bubble
-    };
-    this.onKeyDown = (event) => {
-      if (this.disabled) {
-        return;
-      }
-      // Only handle keyboard when the host itself has focus.
-      // This avoids toggling when Space/Enter is pressed on inner controls
-      // like the action menu trigger or any primary component.
-      const shadowRoot = this.host.shadowRoot;
-      const activeElement = shadowRoot
-        ? shadowRoot.activeElement
-        : null;
-      if (activeElement && activeElement !== this.host) {
-        return;
-      }
-      const isEnter = event.key === 'Enter';
-      const isSpace = event.key === ' ' ||
-        event.key === 'Space' ||
-        event.key === 'Spacebar' ||
-        event.code === 'Space';
-      if (!isEnter && !isSpace) {
-        return;
-      }
-      // Avoid re-triggering while key is held down and auto-repeats
-      if (event.repeat) {
-        // Also prevent default scroll on Space when repeating
-        if (isSpace) {
-          event.preventDefault();
-        }
-        return;
-      }
-      // Prevent page scroll and default button behavior on Space
-      if (isSpace) {
-        event.preventDefault();
-      }
-      if (this.isSelectableType()) {
-        this.handleInteraction();
-        return;
-      }
-      // For non-selectable items, treat Enter and Space as activation (simulate click)
-      if (isEnter || isSpace) {
-        this.host.click();
-      }
-    };
-    this.handleInteraction = () => {
-      const newSelected = !this.selected;
-      const item = {
-        text: this.text,
-        secondaryText: this.secondaryText,
-        disabled: this.disabled,
-        icon: this.icon,
-        selected: newSelected,
-        value: this.value,
-        actions: this.actions,
-        primaryComponent: this.primaryComponent,
-        image: this.image,
-      };
-      this.interact.emit({
-        selected: newSelected,
-        item: item,
-      });
-    };
     this.actionMenuLabel = () => {
       return translate.get('file-viewer.more-actions', this.language);
     };
@@ -208,7 +129,7 @@ const ListItemComponent = class {
     }
     return (h(Host, Object.assign({ role: this.getHostRole(), class: {
         'has-primary-component': !!((_a = this.primaryComponent) === null || _a === void 0 ? void 0 : _a.name),
-      } }, ariaProps, { onClick: this.onClick, onKeyDown: this.onKeyDown }), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+      } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
   }
   /**
    * Returns a stable reference for the provided actions array to avoid
@@ -224,11 +145,6 @@ const ListItemComponent = class {
     this.memoizedActions = actions;
     return actions;
   }
-  isSelectableType() {
-    return (this.type === 'option' ||
-      this.type === 'radio' ||
-      this.type === 'checkbox');
-  }
   getHostRole() {
     switch (this.type) {
       case 'option': {
@@ -248,7 +164,6 @@ const ListItemComponent = class {
       }
     }
   }
-  get host() { return getElement(this); }
 };
 ListItemComponent.style = listItemCss;
 

package/dist/esm/limel-list-item.entry.js.map

@@ -1 +1 @@
-{"file":"limel-list-item.entry.js","mappings":"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","names":[],"sources":["./src/components/radio-button-group/radio-button.template.tsx","./src/components/list-item/list-item.scss?tag=limel-list-item","./src/components/list-item/list-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Radio Button Template\n *\n * This is a low-level template component that renders individual radio button elements\n * using Material Design Components (MDC) styling and structure. It's used internally\n * by the list component to render radio buttons when `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * @internal\n */\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div\n            class={{\n                'boolean-input': true,\n                'radio-button': true,\n                checked: props.checked,\n                disabled: props.disabled,\n            }}\n        >\n            <input\n                type=\"radio\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled}\n                onChange={props.onChange}\n            />\n            <div class=\"box\" />\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","/**\n * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.\n * @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.\n * @prop --limel-list-item-menu-order: Defines the order of the menu, within the list item's flexbox. Defaults to `3`.\n */\n\n@use '../../style/mixins';\n@forward '../checkbox/checkbox.scss';\n@forward '../radio-button-group/radio-button.scss';\n\n*,\n*:before,\n*:after {\n    box-sizing: border-box;\n}\n\nlimel-list-item {\n    min-height: 2.5rem;\n    @include mixins.visualize-keyboard-focus();\n\n    transition: background-color 0.6s ease;\n    position: relative;\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n\n    padding: 0 1rem;\n    background-color: rgb(var(--contrast-100));\n\n    &:hover {\n        z-index: 1;\n        transition: background-color 0.2s ease;\n        border-radius: 0.5rem;\n    }\n\n    &:focus,\n    &:focus-visible,\n    &:active {\n        z-index: 1;\n        border-radius: 0.5rem;\n    }\n\n    &:first-of-type {\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n\n    &:last-of-type {\n        border-bottom-left-radius: 0.5rem;\n        border-bottom-right-radius: 0.5rem;\n    }\n\n    &:not([disabled]):not([disabled='true']) {\n        cursor: pointer;\n    }\n\n    &[disabled]:not([disabled='false']) {\n        cursor: not-allowed;\n    }\n}\n\nlimel-list-item[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n\n    .text,\n    limel-icon,\n    img,\n    .boolean-input {\n        opacity: 0.4;\n    }\n}\n\nlimel-list-item:not([disabled]):not([disabled='true']):hover,\nlimel-list-item:not([disabled]):not([disabled='true']):focus-visible {\n    background-color: rgb(var(--contrast-400));\n}\n\nlimel-list-item[type='option'] {\n    &:before {\n        transition: background-color 0.6s ease;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        opacity: 0.2;\n        border-radius: 0.5rem;\n    }\n\n    &[selected]:not([selected='false']) {\n        &:before {\n            transition: background-color 0.2s ease;\n            background-color: var(--limel-theme-primary-color);\n        }\n    }\n}\n\nlimel-list-item {\n    .text {\n        flex-grow: 1;\n        min-width: 0;\n\n        display: flex;\n        flex-direction: column;\n\n        padding: 0.5rem 0;\n\n        color: var(--limel-theme-text-primary-on-background-color);\n    }\n\n    .label {\n        @include mixins.truncate-text();\n\n        font-size: var(--limel-theme-default-font-size);\n        line-height: 1rem;\n    }\n\n    .description {\n        @include mixins.truncate-text-on-line(var(--maxLinesSecondaryText));\n        line-height: 1rem;\n        font-size: var(--limel-theme-default-small-font-size);\n        opacity: 0.6;\n    }\n\n    limel-icon {\n        color: var(--limel-theme-text-secondary-on-background-color);\n        flex-shrink: 0;\n        margin-left: -0.5rem;\n\n        &:has(+ img) {\n            margin-left: 0;\n            position: absolute;\n            top: 0.125rem;\n            left: 0.125rem;\n            padding: 0.1875rem;\n            width: 1.25rem;\n            background-color: rgb(var(--contrast-200), 0.8);\n        }\n    }\n\n    img {\n        flex-shrink: 0;\n        object-fit: cover;\n        border-radius: 50%;\n        width: 2rem;\n        height: 2rem;\n        box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);\n    }\n\n    limel-menu {\n        margin-right: -0.5rem;\n        // Sometimes, `primaryComponent`s in list items need to get\n        // `order: 2;` to be placed after the text. But since the default `order`\n        // of all lit item children is `0`, we need to push the menu to the far right\n        // by giving it a bigger order number. Also, by making this into a variable\n        // we can handle other edge-cases in consuming components.\n        order: var(--limel-list-item-menu-order, 3);\n    }\n}\n\nlimel-list-item {\n    &[role='menuitem'] & {\n        .label {\n            font-size: var(--limel-theme-default-small-font-size);\n        }\n    }\n}\n\n// ====================\n// Checkbox and radios\n.boolean-input {\n    width: var(--limel-boolean-input-box-size);\n    margin-left: -0.25rem;\n    &.checkbox {\n        margin-right: 0.25rem;\n    }\n\n    limel-list-item:has(limel-icon) &,\n    limel-list-item:has(img) & {\n        margin-right: -0.25rem;\n        margin-left: 0;\n        order: 2;\n    }\n}\n\n.boolean-input-label {\n    @include mixins.truncate-text();\n    opacity: 0;\n    width: var(--limel-boolean-input-box-size);\n}\n// ====================\n","import {\n    Component,\n    Host,\n    Prop,\n    h,\n    Event,\n    EventEmitter,\n    Element,\n} from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n    tag: 'limel-list-item',\n    shadow: false,\n    styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * {@inheritdoc ListItem.value}\n     */\n    @Prop()\n    public value?: any;\n\n    /**\n     * {@inheritdoc ListItem.text}\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * {@inheritdoc ListItem.secondaryText}\n     */\n    @Prop({ reflect: true })\n    public secondaryText?: string;\n\n    /**\n     * {@inheritdoc ListItem.disabled}\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * {@inheritdoc ListItem.icon}\n     */\n    @Prop()\n    public icon?: string | ListItem['icon'];\n\n    /**\n     * Size of the icon displayed for this item.\n     */\n    @Prop({ reflect: true })\n    public iconSize: IconSize = 'small';\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop({ reflect: true })\n    public badgeIcon = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public actions?: ListItem['actions'];\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public primaryComponent?: ListItem['primaryComponent'];\n\n    /**\n     * {@inheritdoc ListItem.image}\n     */\n    @Prop()\n    public image?: ListItem['image'];\n\n    /**\n     * The semantic role of the list item. This affects the ARIA role\n     * and the interaction behavior.\n     *\n     * - 'option' → selectable via click/Enter/Space, aria-selected\n     * - 'radio'/'checkbox' → selectable, aria-checked\n     * - 'menuitem'/'listitem' → activation only, no selection toggle\n     */\n    @Prop({ reflect: true })\n    public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n        'listitem';\n\n    /**\n     * Emitted when the list item toggles selection (only for selectable types and not disabled).\n     */\n    @Event()\n    public interact: EventEmitter<{\n        selected: boolean;\n        item: ListItem;\n    }>;\n\n    @Element()\n    private host: HTMLLimelListItemElement;\n\n    /**\n     * Used to describe the list item for assistive technology.\n     */\n    private readonly descriptionId: string;\n\n    /**\n     * Used to label the list item for assistive technology.\n     */\n    private readonly labelId: string;\n\n    // Memoized reference for the action items to avoid unnecessary updates\n    private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.descriptionId = createRandomString();\n    }\n\n    public render() {\n        const ariaProps: any = {\n            'aria-labelledby': this.labelId,\n            'aria-describedby': this.secondaryText\n                ? this.descriptionId\n                : undefined,\n            'aria-disabled': this.disabled ? 'true' : 'false',\n        };\n\n        // ARIA state depending on `role`/`type`\n        if (this.type === 'radio' || this.type === 'checkbox') {\n            ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n        } else if (this.type === 'option' || this.type === 'menuitem') {\n            // aria-selected for `option` (spec);\n            // also keep for `menuitem` for visual state consistency\n            ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n        }\n\n        return (\n            <Host\n                role={this.getHostRole()}\n                class={{\n                    'has-primary-component': !!this.primaryComponent?.name,\n                }}\n                {...ariaProps}\n                onClick={this.onClick}\n                onKeyDown={this.onKeyDown}\n            >\n                {this.renderRadioButton()}\n                {this.renderCheckbox()}\n                {this.renderIcon()}\n                {this.renderImage()}\n                {this.renderPrimaryComponent()}\n                <div class=\"text\">\n                    {this.renderLabel()}\n                    {this.renderDescription()}\n                </div>\n                {this.renderActionMenu(this.actions)}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        return (\n            <span class=\"label\" id={this.labelId}>\n                {this.text}\n            </span>\n        );\n    };\n\n    private renderDescription = () => {\n        if (!this.secondaryText) {\n            return;\n        }\n\n        return (\n            <span class=\"description\" id={this.descriptionId}>\n                {this.secondaryText}\n            </span>\n        );\n    };\n\n    private renderIcon = () => {\n        const iconName = getIconName(this.icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n        let title: string | undefined;\n\n        if (typeof this.icon === 'object') {\n            iconColor = this.icon.color;\n            iconBackgroundColor = this.icon.backgroundColor;\n            title = this.icon.title;\n        }\n\n        const iconProps = {\n            'aria-label': title,\n            'aria-hidden': title ? null : 'true',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n            badge: this.badgeIcon,\n            size: this.iconSize,\n        };\n\n        return <limel-icon {...iconProps} />;\n    };\n\n    private renderPrimaryComponent = () => {\n        const primary = this.primaryComponent;\n        if (!primary?.name) {\n            return;\n        }\n\n        const PrimaryComponent: any = primary.name;\n        const props = primary.props || {};\n\n        return <PrimaryComponent {...props} />;\n    };\n\n    private renderImage = () => {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        const stableActions = this.getStableActions(actions);\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={stableActions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                    label={this.actionMenuLabel()}\n                />\n            </limel-menu>\n        );\n    };\n\n    /**\n     * Returns a stable reference for the provided actions array to avoid\n     * unnecessary re-renders of the action menu when the reference is unchanged.\n     *\n     * @param actions The actions (and separators) to display in the menu\n     * @returns The same array instance that was previously seen, if unchanged\n     */\n    private getStableActions(\n        actions: Array<MenuItem | ListSeparator>\n    ): Array<MenuItem | ListSeparator> {\n        if (this.memoizedActions === actions) {\n            return this.memoizedActions;\n        }\n        this.memoizedActions = actions;\n        return actions;\n    }\n\n    private renderRadioButton = () => {\n        if (this.type !== 'radio') {\n            return;\n        }\n\n        return (\n            <RadioButtonTemplate\n                id={`radio_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private renderCheckbox = () => {\n        if (this.type !== 'checkbox') {\n            return;\n        }\n\n        return (\n            <CheckboxTemplate\n                id={`checkbox_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private onClick = (event: MouseEvent) => {\n        if (this.disabled) {\n            // Ignore toggling, but don't block embedded controls\n            return;\n        }\n\n        const target = event.target as HTMLElement | null;\n        const cameFromActionTrigger = !!target?.closest('.action-menu-trigger');\n        const cameFromNoToggle = !!target?.closest('[data-no-toggle]');\n        const cameFromMenu = !!target?.closest('limel-menu');\n        if (cameFromActionTrigger || cameFromNoToggle || cameFromMenu) {\n            return;\n        }\n\n        if (this.isSelectableType()) {\n            this.handleInteraction();\n        }\n        // For non-selectable types (menuitem/listitem), allow native click to bubble\n    };\n\n    private onKeyDown = (event: KeyboardEvent) => {\n        if (this.disabled) {\n            return;\n        }\n\n        // Only handle keyboard when the host itself has focus.\n        // This avoids toggling when Space/Enter is pressed on inner controls\n        // like the action menu trigger or any primary component.\n        const shadowRoot = this.host.shadowRoot;\n        const activeElement = shadowRoot\n            ? (shadowRoot.activeElement as HTMLElement | null)\n            : null;\n        if (activeElement && activeElement !== this.host) {\n            return;\n        }\n\n        const isEnter = event.key === 'Enter';\n        const isSpace =\n            event.key === ' ' ||\n            event.key === 'Space' ||\n            event.key === 'Spacebar' ||\n            event.code === 'Space';\n\n        if (!isEnter && !isSpace) {\n            return;\n        }\n\n        // Avoid re-triggering while key is held down and auto-repeats\n        if (event.repeat) {\n            // Also prevent default scroll on Space when repeating\n            if (isSpace) {\n                event.preventDefault();\n            }\n            return;\n        }\n\n        // Prevent page scroll and default button behavior on Space\n        if (isSpace) {\n            event.preventDefault();\n        }\n\n        if (this.isSelectableType()) {\n            this.handleInteraction();\n            return;\n        }\n\n        // For non-selectable items, treat Enter and Space as activation (simulate click)\n        if (isEnter || isSpace) {\n            this.host.click();\n        }\n    };\n\n    private isSelectableType(): boolean {\n        return (\n            this.type === 'option' ||\n            this.type === 'radio' ||\n            this.type === 'checkbox'\n        );\n    }\n\n    private getHostRole(): string {\n        switch (this.type) {\n            case 'option': {\n                return 'option';\n            }\n            case 'radio': {\n                return 'radio';\n            }\n            case 'checkbox': {\n                return 'checkbox';\n            }\n            case 'menuitem': {\n                return 'menuitem';\n            }\n            default: {\n                return 'listitem';\n            }\n        }\n    }\n\n    private handleInteraction = () => {\n        const newSelected = !this.selected;\n\n        const item: ListItem = {\n            text: this.text,\n            secondaryText: this.secondaryText,\n            disabled: this.disabled,\n            icon: this.icon,\n            selected: newSelected,\n            value: this.value,\n            actions: this.actions,\n            primaryComponent: this.primaryComponent,\n            image: this.image,\n        };\n\n        this.interact.emit({\n            selected: newSelected,\n            item: item,\n        });\n    };\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n}\n"],"version":3}
+{"file":"limel-list-item.entry.js","mappings":"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","names":[],"sources":["./src/components/radio-button-group/radio-button.template.tsx","./src/components/list-item/list-item.scss?tag=limel-list-item","./src/components/list-item/list-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Radio Button Template\n *\n * This is a low-level template component that renders individual radio button elements\n * using Material Design Components (MDC) styling and structure. It's used internally\n * by the list component to render radio buttons when `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * @internal\n */\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div\n            class={{\n                'boolean-input': true,\n                'radio-button': true,\n                checked: props.checked,\n                disabled: props.disabled,\n            }}\n        >\n            <input\n                type=\"radio\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled}\n                onChange={props.onChange}\n            />\n            <div class=\"box\" />\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","/**\n * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.\n * @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.\n * @prop --limel-list-item-menu-order: Defines the order of the menu, within the list item's flexbox. Defaults to `3`.\n */\n\n@use '../../style/mixins';\n@forward '../checkbox/checkbox.scss';\n@forward '../radio-button-group/radio-button.scss';\n\n*,\n*:before,\n*:after {\n    box-sizing: border-box;\n}\n\nlimel-list-item {\n    min-height: 2.5rem;\n    @include mixins.visualize-keyboard-focus();\n\n    transition: background-color 0.6s ease;\n    position: relative;\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n\n    padding: 0 1rem;\n    background-color: rgb(var(--contrast-100));\n\n    &:hover {\n        z-index: 1;\n        transition: background-color 0.2s ease;\n        border-radius: 0.5rem;\n    }\n\n    &:focus,\n    &:focus-visible,\n    &:active {\n        z-index: 1;\n        border-radius: 0.5rem;\n    }\n\n    &:first-of-type {\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n\n    &:last-of-type {\n        border-bottom-left-radius: 0.5rem;\n        border-bottom-right-radius: 0.5rem;\n    }\n\n    &:not([disabled]):not([disabled='true']) {\n        cursor: pointer;\n    }\n\n    &[disabled]:not([disabled='false']) {\n        cursor: not-allowed;\n    }\n}\n\nlimel-list-item[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n\n    .text,\n    limel-icon,\n    img,\n    .boolean-input {\n        opacity: 0.4;\n    }\n}\n\nlimel-list-item:not([disabled]):not([disabled='true']):hover,\nlimel-list-item:not([disabled]):not([disabled='true']):focus-visible {\n    background-color: rgb(var(--contrast-400));\n}\n\nlimel-list-item[type='option'] {\n    &:before {\n        transition: background-color 0.6s ease;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        opacity: 0.2;\n        border-radius: 0.5rem;\n    }\n\n    &[selected]:not([selected='false']) {\n        &:before {\n            transition: background-color 0.2s ease;\n            background-color: var(--limel-theme-primary-color);\n        }\n    }\n}\n\nlimel-list-item {\n    .text {\n        flex-grow: 1;\n        min-width: 0;\n\n        display: flex;\n        flex-direction: column;\n\n        padding: 0.5rem 0;\n\n        color: var(--limel-theme-text-primary-on-background-color);\n    }\n\n    .label {\n        @include mixins.truncate-text();\n\n        font-size: var(--limel-theme-default-font-size);\n        line-height: 1rem;\n    }\n\n    .description {\n        @include mixins.truncate-text-on-line(var(--maxLinesSecondaryText));\n        line-height: 1rem;\n        font-size: var(--limel-theme-default-small-font-size);\n        opacity: 0.6;\n    }\n\n    limel-icon {\n        color: var(--limel-theme-text-secondary-on-background-color);\n        flex-shrink: 0;\n        margin-left: -0.5rem;\n\n        &:has(+ img) {\n            margin-left: 0;\n            position: absolute;\n            top: 0.125rem;\n            left: 0.125rem;\n            padding: 0.1875rem;\n            width: 1.25rem;\n            background-color: rgb(var(--contrast-200), 0.8);\n        }\n    }\n\n    img {\n        flex-shrink: 0;\n        object-fit: cover;\n        border-radius: 50%;\n        width: 2rem;\n        height: 2rem;\n        box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);\n    }\n\n    limel-menu {\n        margin-right: -0.5rem;\n        // Sometimes, `primaryComponent`s in list items need to get\n        // `order: 2;` to be placed after the text. But since the default `order`\n        // of all lit item children is `0`, we need to push the menu to the far right\n        // by giving it a bigger order number. Also, by making this into a variable\n        // we can handle other edge-cases in consuming components.\n        order: var(--limel-list-item-menu-order, 3);\n    }\n}\n\nlimel-list-item {\n    &[role='menuitem'] & {\n        .label {\n            font-size: var(--limel-theme-default-small-font-size);\n        }\n    }\n}\n\n// ====================\n// Checkbox and radios\n.boolean-input {\n    width: var(--limel-boolean-input-box-size);\n    margin-left: -0.25rem;\n    &.checkbox {\n        margin-right: 0.25rem;\n    }\n\n    limel-list-item:has(limel-icon) &,\n    limel-list-item:has(img) & {\n        margin-right: -0.25rem;\n        margin-left: 0;\n        order: 2;\n    }\n}\n\n.boolean-input-label {\n    @include mixins.truncate-text();\n    opacity: 0;\n    width: var(--limel-boolean-input-box-size);\n}\n// ====================\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n    tag: 'limel-list-item',\n    shadow: false,\n    styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * {@inheritdoc ListItem.value}\n     */\n    @Prop()\n    public value?: any;\n\n    /**\n     * {@inheritdoc ListItem.text}\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * {@inheritdoc ListItem.secondaryText}\n     */\n    @Prop({ reflect: true })\n    public secondaryText?: string;\n\n    /**\n     * {@inheritdoc ListItem.disabled}\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * {@inheritdoc ListItem.icon}\n     */\n    @Prop()\n    public icon?: string | ListItem['icon'];\n\n    /**\n     * Size of the icon displayed for this item.\n     */\n    @Prop({ reflect: true })\n    public iconSize: IconSize = 'small';\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop({ reflect: true })\n    public badgeIcon = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public actions?: ListItem['actions'];\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public primaryComponent?: ListItem['primaryComponent'];\n\n    /**\n     * {@inheritdoc ListItem.image}\n     */\n    @Prop()\n    public image?: ListItem['image'];\n\n    /**\n     * The semantic role of the list item. This affects the ARIA role\n     * and the interaction behavior.\n     *\n     * - 'option' → selectable via click/Enter/Space, aria-selected\n     * - 'radio'/'checkbox' → selectable, aria-checked\n     * - 'menuitem'/'listitem' → activation only, no selection toggle\n     */\n    @Prop({ reflect: true })\n    public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n        'listitem';\n\n    /**\n     * Used to describe the list item for assistive technology.\n     */\n    private readonly descriptionId: string;\n\n    /**\n     * Used to label the list item for assistive technology.\n     */\n    private readonly labelId: string;\n\n    // Memoized reference for the action items to avoid unnecessary updates\n    private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.descriptionId = createRandomString();\n    }\n\n    public render() {\n        const ariaProps: any = {\n            'aria-labelledby': this.labelId,\n            'aria-describedby': this.secondaryText\n                ? this.descriptionId\n                : undefined,\n            'aria-disabled': this.disabled ? 'true' : 'false',\n        };\n\n        // ARIA state depending on `role`/`type`\n        if (this.type === 'radio' || this.type === 'checkbox') {\n            ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n        } else if (this.type === 'option' || this.type === 'menuitem') {\n            // aria-selected for `option` (spec);\n            // also keep for `menuitem` for visual state consistency\n            ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n        }\n\n        return (\n            <Host\n                role={this.getHostRole()}\n                class={{\n                    'has-primary-component': !!this.primaryComponent?.name,\n                }}\n                {...ariaProps}\n            >\n                {this.renderRadioButton()}\n                {this.renderCheckbox()}\n                {this.renderIcon()}\n                {this.renderImage()}\n                {this.renderPrimaryComponent()}\n                <div class=\"text\">\n                    {this.renderLabel()}\n                    {this.renderDescription()}\n                </div>\n                {this.renderActionMenu(this.actions)}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        return (\n            <span class=\"label\" id={this.labelId}>\n                {this.text}\n            </span>\n        );\n    };\n\n    private renderDescription = () => {\n        if (!this.secondaryText) {\n            return;\n        }\n\n        return (\n            <span class=\"description\" id={this.descriptionId}>\n                {this.secondaryText}\n            </span>\n        );\n    };\n\n    private renderIcon = () => {\n        const iconName = getIconName(this.icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n        let title: string | undefined;\n\n        if (typeof this.icon === 'object') {\n            iconColor = this.icon.color;\n            iconBackgroundColor = this.icon.backgroundColor;\n            title = this.icon.title;\n        }\n\n        const iconProps = {\n            'aria-label': title,\n            'aria-hidden': title ? null : 'true',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n            badge: this.badgeIcon,\n            size: this.iconSize,\n        };\n\n        return <limel-icon {...iconProps} />;\n    };\n\n    private renderPrimaryComponent = () => {\n        const primary = this.primaryComponent;\n        if (!primary?.name) {\n            return;\n        }\n\n        const PrimaryComponent: any = primary.name;\n        const props = primary.props || {};\n\n        return <PrimaryComponent {...props} />;\n    };\n\n    private renderImage = () => {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        const stableActions = this.getStableActions(actions);\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={stableActions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                    label={this.actionMenuLabel()}\n                />\n            </limel-menu>\n        );\n    };\n\n    /**\n     * Returns a stable reference for the provided actions array to avoid\n     * unnecessary re-renders of the action menu when the reference is unchanged.\n     *\n     * @param actions The actions (and separators) to display in the menu\n     * @returns The same array instance that was previously seen, if unchanged\n     */\n    private getStableActions(\n        actions: Array<MenuItem | ListSeparator>\n    ): Array<MenuItem | ListSeparator> {\n        if (this.memoizedActions === actions) {\n            return this.memoizedActions;\n        }\n        this.memoizedActions = actions;\n        return actions;\n    }\n\n    private renderRadioButton = () => {\n        if (this.type !== 'radio') {\n            return;\n        }\n\n        return (\n            <RadioButtonTemplate\n                id={`radio_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private renderCheckbox = () => {\n        if (this.type !== 'checkbox') {\n            return;\n        }\n\n        return (\n            <CheckboxTemplate\n                id={`checkbox_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private getHostRole(): string {\n        switch (this.type) {\n            case 'option': {\n                return 'option';\n            }\n            case 'radio': {\n                return 'radio';\n            }\n            case 'checkbox': {\n                return 'checkbox';\n            }\n            case 'menuitem': {\n                return 'menuitem';\n            }\n            default: {\n                return 'listitem';\n            }\n        }\n    }\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n}\n"],"version":3}

package/dist/lime-elements/lime-elements.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-250acfe4",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-ac334aa7",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-b5abf284",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-5ac43dbd",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-0334e593",[[0,"limel-list-item",{"language":[513],"value":[8],"text":[513],"secondaryText":[513,"secondary-text"],"disabled":[516],"icon":[1],"iconSize":[513,"icon-size"],"badgeIcon":[516,"badge-icon"],"selected":[516],"actions":[16],"primaryComponent":[16],"image":[16],"type":[513]}]]],["p-b43e8cb2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-d349e355",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-489d7f63",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"placeholder":[513],"manualInput":[516,"manual-input"],"palette":[16],"paletteColumnCount":[514,"palette-column-count"],"isOpen":[32]}]]],["p-ed04acfc",[[1,"limel-profile-picture",{"language":[513],"label":[513],"icon":[1],"helperText":[1,"helper-text"],"disabled":[516],"readonly":[516],"required":[516],"invalid":[516],"loading":[516],"value":[1],"imageFit":[513,"image-fit"],"accept":[513],"resize":[16],"objectUrl":[32],"imageError":[32],"isErrorMessagePopoverOpen":[32]}]]],["p-ac55217a",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-cbbe129b",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-aeba4aa4",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-483ba5da",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-8e7d31b3",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-f83ebd28",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-ed8aa16c",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-580a29c5",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-e6245ef7",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-68192519",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16],"language":[513]}]]],["p-3a61deb1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-51d475d8",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-2fdb51de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-ef1d26ac",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-2116b3ce",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"required":[516],"invalid":[516],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-0115bb1e",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-5b1cb891",[[1,"limel-menu-item-meta",{"commandText":[1,"command-text"],"badge":[8],"showChevron":[4,"show-chevron"]}]]],["p-07988749",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-8e3c4418",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-596af3ae",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-54fc2316",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-d24988e7",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-0d247b83",[[1,"limel-grid"]]],["p-6c60172e",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-4f85b3c4",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"placeholder":[513],"required":[516],"invalid":[516],"manualInput":[516,"manual-input"],"columnCount":[514,"column-count"],"palette":[16]}]]],["p-47da9c59",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-8539647d",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-d80e776d",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-1b036add",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-c7ffe359",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-32572c31",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-d4a220eb",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-52fb3988",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-eb396630",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-b928421f",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-e839ce5b",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-b45cfa71",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}]]],["p-0592207d",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-18a3c28a",[[1,"limel-badge",{"label":[520]}]]],["p-e4bafb75",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-7528a002",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-b5a96409",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-78747886",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}]]],["p-2bfb4b41",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"size":[513],"menuItems":[16]}]]],["p-c6aaf532",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-2ff2186f",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-cc7f4c81",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-e6bb4d1a",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-eac0220e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
+import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-250acfe4",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-ac334aa7",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-b5abf284",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-5ac43dbd",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-048c0d8e",[[0,"limel-list-item",{"language":[513],"value":[8],"text":[513],"secondaryText":[513,"secondary-text"],"disabled":[516],"icon":[1],"iconSize":[513,"icon-size"],"badgeIcon":[516,"badge-icon"],"selected":[516],"actions":[16],"primaryComponent":[16],"image":[16],"type":[513]}]]],["p-b43e8cb2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-d349e355",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-489d7f63",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"placeholder":[513],"manualInput":[516,"manual-input"],"palette":[16],"paletteColumnCount":[514,"palette-column-count"],"isOpen":[32]}]]],["p-ed04acfc",[[1,"limel-profile-picture",{"language":[513],"label":[513],"icon":[1],"helperText":[1,"helper-text"],"disabled":[516],"readonly":[516],"required":[516],"invalid":[516],"loading":[516],"value":[1],"imageFit":[513,"image-fit"],"accept":[513],"resize":[16],"objectUrl":[32],"imageError":[32],"isErrorMessagePopoverOpen":[32]}]]],["p-ac55217a",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-cbbe129b",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-aeba4aa4",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-483ba5da",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-8e7d31b3",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-f83ebd28",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-ed8aa16c",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-580a29c5",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-e6245ef7",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-68192519",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16],"language":[513]}]]],["p-3a61deb1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-51d475d8",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-2fdb51de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-ef1d26ac",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-2116b3ce",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"required":[516],"invalid":[516],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-0115bb1e",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-5b1cb891",[[1,"limel-menu-item-meta",{"commandText":[1,"command-text"],"badge":[8],"showChevron":[4,"show-chevron"]}]]],["p-07988749",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-8e3c4418",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-596af3ae",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-54fc2316",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-d24988e7",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-0d247b83",[[1,"limel-grid"]]],["p-6c60172e",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-4f85b3c4",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"placeholder":[513],"required":[516],"invalid":[516],"manualInput":[516,"manual-input"],"columnCount":[514,"column-count"],"palette":[16]}]]],["p-47da9c59",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-8539647d",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-d80e776d",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-1b036add",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-c7ffe359",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-32572c31",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-d4a220eb",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-52fb3988",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-eb396630",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-b928421f",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-e839ce5b",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-b45cfa71",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}]]],["p-0592207d",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-18a3c28a",[[1,"limel-badge",{"label":[520]}]]],["p-e4bafb75",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-7528a002",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-b5a96409",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-78747886",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}]]],["p-2bfb4b41",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"size":[513],"menuItems":[16]}]]],["p-c6aaf532",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-2ff2186f",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-cc7f4c81",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-e6bb4d1a",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-eac0220e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
 //# sourceMappingURL=lime-elements.esm.js.map

package/dist/lime-elements/p-048c0d8e.entry.js

@@ -0,0 +1,2 @@
+import{h as e,r as i,H as t}from"./p-288f0842.js";import{g as o}from"./p-d251f404.js";import{c as l}from"./p-ad52787a.js";import{C as r}from"./p-8ded6465.js";import{t as a}from"./p-4c88e5d3.js";const s=i=>e("div",{class:{"boolean-input":true,"radio-button":true,checked:i.checked,disabled:i.disabled}},e("input",{type:"radio",id:i.id,checked:i.checked,disabled:i.disabled,onChange:i.onChange}),e("div",{class:"box"}),e("label",{class:"boolean-input-label",htmlFor:i.id},i.label));const n='@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem;}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}.radio-button{--limel-boolean-input-box-border-radius:var(\n      --limel-boolean-input-box-size\n  )}.box:after{width:100%;height:100%;border-radius:50%}.boolean-input:has(input[type=radio]:checked) .box:after{opacity:1;transform:scale(0.6);box-shadow:var(--shadow-depth-8)}*,*:before,*:after{box-sizing:border-box}limel-list-item{min-height:2.5rem;transition:background-color 0.6s ease;position:relative;isolation:isolate;display:flex;align-items:center;gap:0.5rem;padding:0 1rem;background-color:rgb(var(--contrast-100))}limel-list-item:focus{outline:none}limel-list-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-list-item:hover{z-index:1;transition:background-color 0.2s ease;border-radius:0.5rem}limel-list-item:focus,limel-list-item:focus-visible,limel-list-item:active{z-index:1;border-radius:0.5rem}limel-list-item:first-of-type{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}limel-list-item:last-of-type{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}limel-list-item:not([disabled]):not([disabled=true]){cursor:pointer}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]) .text,limel-list-item[disabled]:not([disabled=false]) limel-icon,limel-list-item[disabled]:not([disabled=false]) img,limel-list-item[disabled]:not([disabled=false]) .boolean-input{opacity:0.4}limel-list-item:not([disabled]):not([disabled=true]):hover,limel-list-item:not([disabled]):not([disabled=true]):focus-visible{background-color:rgb(var(--contrast-400))}limel-list-item[type=option]:before{transition:background-color 0.6s ease;content:"";position:absolute;inset:0;opacity:0.2;border-radius:0.5rem}limel-list-item[type=option][selected]:not([selected=false]):before{transition:background-color 0.2s ease;background-color:var(--limel-theme-primary-color)}limel-list-item .text{flex-grow:1;min-width:0;display:flex;flex-direction:column;padding:0.5rem 0;color:var(--limel-theme-text-primary-on-background-color)}limel-list-item .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-font-size);line-height:1rem}limel-list-item .description{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:var(--maxLinesSecondaryText);line-height:1rem;font-size:var(--limel-theme-default-small-font-size);opacity:0.6}limel-list-item limel-icon{color:var(--limel-theme-text-secondary-on-background-color);flex-shrink:0;margin-left:-0.5rem}limel-list-item limel-icon:has(+img){margin-left:0;position:absolute;top:0.125rem;left:0.125rem;padding:0.1875rem;width:1.25rem;background-color:rgb(var(--contrast-200), 0.8)}limel-list-item img{flex-shrink:0;object-fit:cover;border-radius:50%;width:2rem;height:2rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.5)}limel-list-item limel-menu{margin-right:-0.5rem;order:var(--limel-list-item-menu-order, 3)}limel-list-item[role=menuitem] limel-list-item .label{font-size:var(--limel-theme-default-small-font-size)}.boolean-input{width:var(--limel-boolean-input-box-size);margin-left:-0.25rem}.boolean-input.checkbox{margin-right:0.25rem}limel-list-item:has(limel-icon) .boolean-input,limel-list-item:has(img) .boolean-input{margin-right:-0.25rem;margin-left:0;order:2}.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}';const d=class{constructor(t){i(this,t);this.renderLabel=()=>e("span",{class:"label",id:this.labelId},this.text);this.renderDescription=()=>{if(!this.secondaryText){return}return e("span",{class:"description",id:this.descriptionId},this.secondaryText)};this.renderIcon=()=>{const i=o(this.icon);if(!i){return}let t;let l;let r;if(typeof this.icon==="object"){t=this.icon.color;l=this.icon.backgroundColor;r=this.icon.title}const a={"aria-label":r,"aria-hidden":r?null:"true",name:i,style:{color:t,"background-color":l},badge:this.badgeIcon,size:this.iconSize};return e("limel-icon",Object.assign({},a))};this.renderPrimaryComponent=()=>{const i=this.primaryComponent;if(!(i===null||i===void 0?void 0:i.name)){return}const t=i.name;const o=i.props||{};return e(t,Object.assign({},o))};this.renderImage=()=>{if(!this.image){return}return e("img",{src:this.image.src,alt:this.image.alt,loading:"lazy"})};this.renderActionMenu=i=>{if(!i||i.length===0){return}const t=this.getStableActions(i);return e("limel-menu",{class:"mdc-deprecated-list-item__meta",items:t,openDirection:"left-start"},e("limel-icon-button",{class:"action-menu-trigger",slot:"trigger",icon:"menu_2",label:this.actionMenuLabel()}))};this.renderRadioButton=()=>{if(this.type!=="radio"){return}return e(s,{id:`radio_${this.labelId}`,checked:this.selected,disabled:this.disabled})};this.renderCheckbox=()=>{if(this.type!=="checkbox"){return}return e(r,{id:`checkbox_${this.labelId}`,checked:this.selected,disabled:this.disabled})};this.actionMenuLabel=()=>a.get("file-viewer.more-actions",this.language);this.language="en";this.value=undefined;this.text=undefined;this.secondaryText=undefined;this.disabled=false;this.icon=undefined;this.iconSize="small";this.badgeIcon=false;this.selected=false;this.actions=undefined;this.primaryComponent=undefined;this.image=undefined;this.type="listitem";this.labelId=l();this.descriptionId=l()}render(){var i;const o={"aria-labelledby":this.labelId,"aria-describedby":this.secondaryText?this.descriptionId:undefined,"aria-disabled":this.disabled?"true":"false"};if(this.type==="radio"||this.type==="checkbox"){o["aria-checked"]=this.selected?"true":"false"}else if(this.type==="option"||this.type==="menuitem"){o["aria-selected"]=this.selected?"true":"false"}return e(t,Object.assign({role:this.getHostRole(),class:{"has-primary-component":!!((i=this.primaryComponent)===null||i===void 0?void 0:i.name)}},o),this.renderRadioButton(),this.renderCheckbox(),this.renderIcon(),this.renderImage(),this.renderPrimaryComponent(),e("div",{class:"text"},this.renderLabel(),this.renderDescription()),this.renderActionMenu(this.actions))}getStableActions(e){if(this.memoizedActions===e){return this.memoizedActions}this.memoizedActions=e;return e}getHostRole(){switch(this.type){case"option":{return"option"}case"radio":{return"radio"}case"checkbox":{return"checkbox"}case"menuitem":{return"menuitem"}default:{return"listitem"}}}};d.style=n;export{d as limel_list_item};
+//# sourceMappingURL=p-048c0d8e.entry.js.map

package/dist/lime-elements/p-048c0d8e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RadioButtonTemplate","props","h","class","checked","disabled","type","id","onChange","htmlFor","label","listItemCss","ListItemComponent","constructor","hostRef","this","renderLabel","labelId","text","renderDescription","secondaryText","descriptionId","renderIcon","iconName","getIconName","icon","iconColor","iconBackgroundColor","title","color","backgroundColor","iconProps","name","style","badge","badgeIcon","size","iconSize","Object","assign","renderPrimaryComponent","primary","primaryComponent","PrimaryComponent","renderImage","image","src","alt","loading","renderActionMenu","actions","length","stableActions","getStableActions","items","openDirection","slot","actionMenuLabel","renderRadioButton","selected","renderCheckbox","CheckboxTemplate","translate","get","language","createRandomString","render","ariaProps","undefined","Host","role","getHostRole","_a","memoizedActions"],"sources":["./src/components/radio-button-group/radio-button.template.tsx","./src/components/list-item/list-item.scss?tag=limel-list-item","./src/components/list-item/list-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Radio Button Template\n *\n * This is a low-level template component that renders individual radio button elements\n * using Material Design Components (MDC) styling and structure. It's used internally\n * by the list component to render radio buttons when `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * @internal\n */\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div\n            class={{\n                'boolean-input': true,\n                'radio-button': true,\n                checked: props.checked,\n                disabled: props.disabled,\n            }}\n        >\n            <input\n                type=\"radio\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled}\n                onChange={props.onChange}\n            />\n            <div class=\"box\" />\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","/**\n * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.\n * @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.\n * @prop --limel-list-item-menu-order: Defines the order of the menu, within the list item's flexbox. Defaults to `3`.\n */\n\n@use '../../style/mixins';\n@forward '../checkbox/checkbox.scss';\n@forward '../radio-button-group/radio-button.scss';\n\n*,\n*:before,\n*:after {\n    box-sizing: border-box;\n}\n\nlimel-list-item {\n    min-height: 2.5rem;\n    @include mixins.visualize-keyboard-focus();\n\n    transition: background-color 0.6s ease;\n    position: relative;\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n\n    padding: 0 1rem;\n    background-color: rgb(var(--contrast-100));\n\n    &:hover {\n        z-index: 1;\n        transition: background-color 0.2s ease;\n        border-radius: 0.5rem;\n    }\n\n    &:focus,\n    &:focus-visible,\n    &:active {\n        z-index: 1;\n        border-radius: 0.5rem;\n    }\n\n    &:first-of-type {\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n\n    &:last-of-type {\n        border-bottom-left-radius: 0.5rem;\n        border-bottom-right-radius: 0.5rem;\n    }\n\n    &:not([disabled]):not([disabled='true']) {\n        cursor: pointer;\n    }\n\n    &[disabled]:not([disabled='false']) {\n        cursor: not-allowed;\n    }\n}\n\nlimel-list-item[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n\n    .text,\n    limel-icon,\n    img,\n    .boolean-input {\n        opacity: 0.4;\n    }\n}\n\nlimel-list-item:not([disabled]):not([disabled='true']):hover,\nlimel-list-item:not([disabled]):not([disabled='true']):focus-visible {\n    background-color: rgb(var(--contrast-400));\n}\n\nlimel-list-item[type='option'] {\n    &:before {\n        transition: background-color 0.6s ease;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        opacity: 0.2;\n        border-radius: 0.5rem;\n    }\n\n    &[selected]:not([selected='false']) {\n        &:before {\n            transition: background-color 0.2s ease;\n            background-color: var(--limel-theme-primary-color);\n        }\n    }\n}\n\nlimel-list-item {\n    .text {\n        flex-grow: 1;\n        min-width: 0;\n\n        display: flex;\n        flex-direction: column;\n\n        padding: 0.5rem 0;\n\n        color: var(--limel-theme-text-primary-on-background-color);\n    }\n\n    .label {\n        @include mixins.truncate-text();\n\n        font-size: var(--limel-theme-default-font-size);\n        line-height: 1rem;\n    }\n\n    .description {\n        @include mixins.truncate-text-on-line(var(--maxLinesSecondaryText));\n        line-height: 1rem;\n        font-size: var(--limel-theme-default-small-font-size);\n        opacity: 0.6;\n    }\n\n    limel-icon {\n        color: var(--limel-theme-text-secondary-on-background-color);\n        flex-shrink: 0;\n        margin-left: -0.5rem;\n\n        &:has(+ img) {\n            margin-left: 0;\n            position: absolute;\n            top: 0.125rem;\n            left: 0.125rem;\n            padding: 0.1875rem;\n            width: 1.25rem;\n            background-color: rgb(var(--contrast-200), 0.8);\n        }\n    }\n\n    img {\n        flex-shrink: 0;\n        object-fit: cover;\n        border-radius: 50%;\n        width: 2rem;\n        height: 2rem;\n        box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);\n    }\n\n    limel-menu {\n        margin-right: -0.5rem;\n        // Sometimes, `primaryComponent`s in list items need to get\n        // `order: 2;` to be placed after the text. But since the default `order`\n        // of all lit item children is `0`, we need to push the menu to the far right\n        // by giving it a bigger order number. Also, by making this into a variable\n        // we can handle other edge-cases in consuming components.\n        order: var(--limel-list-item-menu-order, 3);\n    }\n}\n\nlimel-list-item {\n    &[role='menuitem'] & {\n        .label {\n            font-size: var(--limel-theme-default-small-font-size);\n        }\n    }\n}\n\n// ====================\n// Checkbox and radios\n.boolean-input {\n    width: var(--limel-boolean-input-box-size);\n    margin-left: -0.25rem;\n    &.checkbox {\n        margin-right: 0.25rem;\n    }\n\n    limel-list-item:has(limel-icon) &,\n    limel-list-item:has(img) & {\n        margin-right: -0.25rem;\n        margin-left: 0;\n        order: 2;\n    }\n}\n\n.boolean-input-label {\n    @include mixins.truncate-text();\n    opacity: 0;\n    width: var(--limel-boolean-input-box-size);\n}\n// ====================\n","import { Component, Host, Prop, h } from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n    tag: 'limel-list-item',\n    shadow: false,\n    styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * {@inheritdoc ListItem.value}\n     */\n    @Prop()\n    public value?: any;\n\n    /**\n     * {@inheritdoc ListItem.text}\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * {@inheritdoc ListItem.secondaryText}\n     */\n    @Prop({ reflect: true })\n    public secondaryText?: string;\n\n    /**\n     * {@inheritdoc ListItem.disabled}\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * {@inheritdoc ListItem.icon}\n     */\n    @Prop()\n    public icon?: string | ListItem['icon'];\n\n    /**\n     * Size of the icon displayed for this item.\n     */\n    @Prop({ reflect: true })\n    public iconSize: IconSize = 'small';\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop({ reflect: true })\n    public badgeIcon = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public actions?: ListItem['actions'];\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public primaryComponent?: ListItem['primaryComponent'];\n\n    /**\n     * {@inheritdoc ListItem.image}\n     */\n    @Prop()\n    public image?: ListItem['image'];\n\n    /**\n     * The semantic role of the list item. This affects the ARIA role\n     * and the interaction behavior.\n     *\n     * - 'option' → selectable via click/Enter/Space, aria-selected\n     * - 'radio'/'checkbox' → selectable, aria-checked\n     * - 'menuitem'/'listitem' → activation only, no selection toggle\n     */\n    @Prop({ reflect: true })\n    public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n        'listitem';\n\n    /**\n     * Used to describe the list item for assistive technology.\n     */\n    private readonly descriptionId: string;\n\n    /**\n     * Used to label the list item for assistive technology.\n     */\n    private readonly labelId: string;\n\n    // Memoized reference for the action items to avoid unnecessary updates\n    private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.descriptionId = createRandomString();\n    }\n\n    public render() {\n        const ariaProps: any = {\n            'aria-labelledby': this.labelId,\n            'aria-describedby': this.secondaryText\n                ? this.descriptionId\n                : undefined,\n            'aria-disabled': this.disabled ? 'true' : 'false',\n        };\n\n        // ARIA state depending on `role`/`type`\n        if (this.type === 'radio' || this.type === 'checkbox') {\n            ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n        } else if (this.type === 'option' || this.type === 'menuitem') {\n            // aria-selected for `option` (spec);\n            // also keep for `menuitem` for visual state consistency\n            ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n        }\n\n        return (\n            <Host\n                role={this.getHostRole()}\n                class={{\n                    'has-primary-component': !!this.primaryComponent?.name,\n                }}\n                {...ariaProps}\n            >\n                {this.renderRadioButton()}\n                {this.renderCheckbox()}\n                {this.renderIcon()}\n                {this.renderImage()}\n                {this.renderPrimaryComponent()}\n                <div class=\"text\">\n                    {this.renderLabel()}\n                    {this.renderDescription()}\n                </div>\n                {this.renderActionMenu(this.actions)}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        return (\n            <span class=\"label\" id={this.labelId}>\n                {this.text}\n            </span>\n        );\n    };\n\n    private renderDescription = () => {\n        if (!this.secondaryText) {\n            return;\n        }\n\n        return (\n            <span class=\"description\" id={this.descriptionId}>\n                {this.secondaryText}\n            </span>\n        );\n    };\n\n    private renderIcon = () => {\n        const iconName = getIconName(this.icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n        let title: string | undefined;\n\n        if (typeof this.icon === 'object') {\n            iconColor = this.icon.color;\n            iconBackgroundColor = this.icon.backgroundColor;\n            title = this.icon.title;\n        }\n\n        const iconProps = {\n            'aria-label': title,\n            'aria-hidden': title ? null : 'true',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n            badge: this.badgeIcon,\n            size: this.iconSize,\n        };\n\n        return <limel-icon {...iconProps} />;\n    };\n\n    private renderPrimaryComponent = () => {\n        const primary = this.primaryComponent;\n        if (!primary?.name) {\n            return;\n        }\n\n        const PrimaryComponent: any = primary.name;\n        const props = primary.props || {};\n\n        return <PrimaryComponent {...props} />;\n    };\n\n    private renderImage = () => {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        const stableActions = this.getStableActions(actions);\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={stableActions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                    label={this.actionMenuLabel()}\n                />\n            </limel-menu>\n        );\n    };\n\n    /**\n     * Returns a stable reference for the provided actions array to avoid\n     * unnecessary re-renders of the action menu when the reference is unchanged.\n     *\n     * @param actions The actions (and separators) to display in the menu\n     * @returns The same array instance that was previously seen, if unchanged\n     */\n    private getStableActions(\n        actions: Array<MenuItem | ListSeparator>\n    ): Array<MenuItem | ListSeparator> {\n        if (this.memoizedActions === actions) {\n            return this.memoizedActions;\n        }\n        this.memoizedActions = actions;\n        return actions;\n    }\n\n    private renderRadioButton = () => {\n        if (this.type !== 'radio') {\n            return;\n        }\n\n        return (\n            <RadioButtonTemplate\n                id={`radio_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private renderCheckbox = () => {\n        if (this.type !== 'checkbox') {\n            return;\n        }\n\n        return (\n            <CheckboxTemplate\n                id={`checkbox_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private getHostRole(): string {\n        switch (this.type) {\n            case 'option': {\n                return 'option';\n            }\n            case 'radio': {\n                return 'radio';\n            }\n            case 'checkbox': {\n                return 'checkbox';\n            }\n            case 'menuitem': {\n                return 'menuitem';\n            }\n            default: {\n                return 'listitem';\n            }\n        }\n    }\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n}\n"],"mappings":"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"}

package/dist/types/components/list-item/list-item.d.ts

@@ -1,4 +1,3 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 import type { IconSize } from '../icon/icon.types';
 import { ListItem } from './list-item.types';
 import { Languages } from '../date-picker/date.types';
@@ -95,14 +94,6 @@ export declare class ListItemComponent implements ListItem {
    * - 'menuitem'/'listitem' → activation only, no selection toggle
    */
   type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox';
-  /**
-   * Emitted when the list item toggles selection (only for selectable types and not disabled).
-   */
-  interact: EventEmitter<{
-    selected: boolean;
-    item: ListItem;
-  }>;
-  private host;
   /**
    * Used to describe the list item for assistive technology.
    */
@@ -130,11 +121,7 @@ export declare class ListItemComponent implements ListItem {
   private getStableActions;
   private renderRadioButton;
   private renderCheckbox;
-  private onClick;
-  private onKeyDown;
-  private isSelectableType;
   private getHostRole;
-  private handleInteraction;
   private actionMenuLabel;
 }
 //# sourceMappingURL=list-item.d.ts.map

package/dist/types/components.d.ts

@@ -3373,10 +3373,6 @@ export interface LimelListCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelListElement;
 }
-export interface LimelListItemCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLLimelListItemElement;
-}
 export interface LimelMenuCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLLimelMenuElement;
@@ -7207,13 +7203,6 @@ declare namespace LocalJSX {
           * Defines the language for translations. Will translate the translatable strings on the components.
          */
         "language"?: Languages;
-        /**
-          * Emitted when the list item toggles selection (only for selectable types and not disabled).
-         */
-        "onInteract"?: (event: LimelListItemCustomEvent<{
-        selected: boolean;
-        item: ListItem;
-    }>) => void;
         /**
           * {@inheritdoc ListItem.selected}
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.28.1",
+  "version": "38.28.2",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-0334e593.entry.js

@@ -1,2 +0,0 @@
-import{h as e,r as i,c as t,H as o,g as l}from"./p-288f0842.js";import{g as r}from"./p-d251f404.js";import{c as s}from"./p-ad52787a.js";import{C as a}from"./p-8ded6465.js";import{t as n}from"./p-4c88e5d3.js";const c=i=>e("div",{class:{"boolean-input":true,"radio-button":true,checked:i.checked,disabled:i.disabled}},e("input",{type:"radio",id:i.id,checked:i.checked,disabled:i.disabled,onChange:i.onChange}),e("div",{class:"box"}),e("label",{class:"boolean-input-label",htmlFor:i.id},i.label));const d='@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}.boolean-input{--limel-boolean-input-box-size:1.25rem;--limel-boolean-input-gap-size:0.5rem;position:relative;isolation:isolate;display:flex;align-items:center;min-height:var(--limel-checkbox-min-height, 2.5rem);width:100%}.boolean-input input[type=checkbox],.boolean-input input[type=radio]{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;-webkit-appearance:none;-moz-appearance:none;appearance:none}label.boolean-input-label{min-width:var(--limel-boolean-input-box-size);min-height:var(--limel-boolean-input-box-size);padding-top:0.125rem;cursor:pointer;position:relative;width:100%;font-size:var(--limel-theme-default-small-font-size);color:var(--limel-theme-text-primary-on-background-color);padding-left:calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size))}.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label{cursor:not-allowed;color:var(--limel-theme-text-disabled-color)}.required label.boolean-input-label:after{margin-left:0.0625rem;content:"*"}.invalid:not(.readonly) label.boolean-input-label{color:var(--limel-theme-error-text-color)}:host(limel-checkbox.hide-label) label.boolean-input-label,.hide-label label.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}.box{position:absolute;pointer-events:none;transition:border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;display:inline-block;vertical-align:middle;width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);margin-right:var(--limel-boolean-input-gap-size);border-radius:var(--limel-boolean-input-box-border-radius);border:0.125rem solid;border-color:var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));background-color:var(--limel-checkbox-background-color, rgb(var(--contrast-300)));}.checked .box,.boolean-input>input[type=checkbox]:checked+.box,.boolean-input>input[type=radio]:checked+.box{background-color:var(--lime-primary-color, var(--limel-theme-primary-color));border-color:var(--lime-primary-color, var(--limel-theme-primary-color))}.disabled .box{opacity:0.4}.boolean-input:not(.disabled):hover .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):active .box{will-change:box-shadow;box-shadow:var(--button-shadow-pressed)}.box:before{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);content:"";position:absolute;inset:-0.1875rem;border-radius:inherit;}.boolean-input>input[type=checkbox]:focus-visible+.box:before,.boolean-input>input[type=radio]:focus-visible+.box:before{will-change:box-shadow;box-shadow:var(--shadow-depth-8-focused)}.box:after{transition:opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);content:"";position:absolute;inset:0;margin:auto;border-radius:1rem;opacity:0;background-color:rgb(var(--color-white));}.boolean-input:not(.disabled):hover .box:after{will-change:opacity, box-shadow, transform, width}:host(limel-checkbox){min-height:var(--limel-checkbox-min-height, 2.5rem)}.box:after{height:0.125rem;width:0.25rem}.indeterminate .box:after{opacity:1;width:calc(var(--limel-boolean-input-box-size) - 0.5rem)}.checkbox{--limel-boolean-input-box-border-radius:0.25rem;}.checkbox svg.check-mark{position:absolute;z-index:1;inset:0;transform:translate3d(-0.125rem, -0.125rem, 0);width:var(--limel-boolean-input-box-size);height:var(--limel-boolean-input-box-size);padding:0.25rem;color:rgb(var(--color-white));opacity:0;stroke-width:0.1875rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.checkbox svg.check-mark path{stroke-dashoffset:29.7833;stroke-dasharray:29.7833;transition:stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1)}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark{opacity:1}.checkbox:not(.indeterminate)>input[type=checkbox]:checked+.box svg.check-mark path{stroke-dashoffset:0}limel-dynamic-label{margin-top:0.375rem;margin-left:-0.25rem}:host(limel-checkbox:focus),:host(limel-checkbox:focus-visible),:host(limel-checkbox:focus-within){--limel-h-l-grid-template-rows-transition-speed:0.46s;--limel-h-l-grid-template-rows:1fr}:host(limel-checkbox){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}:host(limel-checkbox:focus) limel-helper-line,:host(limel-checkbox:focus-visible) limel-helper-line,:host(limel-checkbox:focus-within) limel-helper-line,:host(limel-checkbox:hover) limel-helper-line{will-change:grid-template-rows}.radio-button{--limel-boolean-input-box-border-radius:var(\n      --limel-boolean-input-box-size\n  )}.box:after{width:100%;height:100%;border-radius:50%}.boolean-input:has(input[type=radio]:checked) .box:after{opacity:1;transform:scale(0.6);box-shadow:var(--shadow-depth-8)}*,*:before,*:after{box-sizing:border-box}limel-list-item{min-height:2.5rem;transition:background-color 0.6s ease;position:relative;isolation:isolate;display:flex;align-items:center;gap:0.5rem;padding:0 1rem;background-color:rgb(var(--contrast-100))}limel-list-item:focus{outline:none}limel-list-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-list-item:hover{z-index:1;transition:background-color 0.2s ease;border-radius:0.5rem}limel-list-item:focus,limel-list-item:focus-visible,limel-list-item:active{z-index:1;border-radius:0.5rem}limel-list-item:first-of-type{border-top-left-radius:0.5rem;border-top-right-radius:0.5rem}limel-list-item:last-of-type{border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem}limel-list-item:not([disabled]):not([disabled=true]){cursor:pointer}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]){cursor:not-allowed}limel-list-item[disabled]:not([disabled=false]) .text,limel-list-item[disabled]:not([disabled=false]) limel-icon,limel-list-item[disabled]:not([disabled=false]) img,limel-list-item[disabled]:not([disabled=false]) .boolean-input{opacity:0.4}limel-list-item:not([disabled]):not([disabled=true]):hover,limel-list-item:not([disabled]):not([disabled=true]):focus-visible{background-color:rgb(var(--contrast-400))}limel-list-item[type=option]:before{transition:background-color 0.6s ease;content:"";position:absolute;inset:0;opacity:0.2;border-radius:0.5rem}limel-list-item[type=option][selected]:not([selected=false]):before{transition:background-color 0.2s ease;background-color:var(--limel-theme-primary-color)}limel-list-item .text{flex-grow:1;min-width:0;display:flex;flex-direction:column;padding:0.5rem 0;color:var(--limel-theme-text-primary-on-background-color)}limel-list-item .label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-font-size);line-height:1rem}limel-list-item .description{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:var(--maxLinesSecondaryText);line-height:1rem;font-size:var(--limel-theme-default-small-font-size);opacity:0.6}limel-list-item limel-icon{color:var(--limel-theme-text-secondary-on-background-color);flex-shrink:0;margin-left:-0.5rem}limel-list-item limel-icon:has(+img){margin-left:0;position:absolute;top:0.125rem;left:0.125rem;padding:0.1875rem;width:1.25rem;background-color:rgb(var(--contrast-200), 0.8)}limel-list-item img{flex-shrink:0;object-fit:cover;border-radius:50%;width:2rem;height:2rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.5)}limel-list-item limel-menu{margin-right:-0.5rem;order:var(--limel-list-item-menu-order, 3)}limel-list-item[role=menuitem] limel-list-item .label{font-size:var(--limel-theme-default-small-font-size)}.boolean-input{width:var(--limel-boolean-input-box-size);margin-left:-0.25rem}.boolean-input.checkbox{margin-right:0.25rem}limel-list-item:has(limel-icon) .boolean-input,limel-list-item:has(img) .boolean-input{margin-right:-0.25rem;margin-left:0;order:2}.boolean-input-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:0;width:var(--limel-boolean-input-box-size)}';const h=class{constructor(o){i(this,o);this.interact=t(this,"interact",7);this.renderLabel=()=>e("span",{class:"label",id:this.labelId},this.text);this.renderDescription=()=>{if(!this.secondaryText){return}return e("span",{class:"description",id:this.descriptionId},this.secondaryText)};this.renderIcon=()=>{const i=r(this.icon);if(!i){return}let t;let o;let l;if(typeof this.icon==="object"){t=this.icon.color;o=this.icon.backgroundColor;l=this.icon.title}const s={"aria-label":l,"aria-hidden":l?null:"true",name:i,style:{color:t,"background-color":o},badge:this.badgeIcon,size:this.iconSize};return e("limel-icon",Object.assign({},s))};this.renderPrimaryComponent=()=>{const i=this.primaryComponent;if(!(i===null||i===void 0?void 0:i.name)){return}const t=i.name;const o=i.props||{};return e(t,Object.assign({},o))};this.renderImage=()=>{if(!this.image){return}return e("img",{src:this.image.src,alt:this.image.alt,loading:"lazy"})};this.renderActionMenu=i=>{if(!i||i.length===0){return}const t=this.getStableActions(i);return e("limel-menu",{class:"mdc-deprecated-list-item__meta",items:t,openDirection:"left-start"},e("limel-icon-button",{class:"action-menu-trigger",slot:"trigger",icon:"menu_2",label:this.actionMenuLabel()}))};this.renderRadioButton=()=>{if(this.type!=="radio"){return}return e(c,{id:`radio_${this.labelId}`,checked:this.selected,disabled:this.disabled})};this.renderCheckbox=()=>{if(this.type!=="checkbox"){return}return e(a,{id:`checkbox_${this.labelId}`,checked:this.selected,disabled:this.disabled})};this.onClick=e=>{if(this.disabled){return}const i=e.target;const t=!!(i===null||i===void 0?void 0:i.closest(".action-menu-trigger"));const o=!!(i===null||i===void 0?void 0:i.closest("[data-no-toggle]"));const l=!!(i===null||i===void 0?void 0:i.closest("limel-menu"));if(t||o||l){return}if(this.isSelectableType()){this.handleInteraction()}};this.onKeyDown=e=>{if(this.disabled){return}const i=this.host.shadowRoot;const t=i?i.activeElement:null;if(t&&t!==this.host){return}const o=e.key==="Enter";const l=e.key===" "||e.key==="Space"||e.key==="Spacebar"||e.code==="Space";if(!o&&!l){return}if(e.repeat){if(l){e.preventDefault()}return}if(l){e.preventDefault()}if(this.isSelectableType()){this.handleInteraction();return}if(o||l){this.host.click()}};this.handleInteraction=()=>{const e=!this.selected;const i={text:this.text,secondaryText:this.secondaryText,disabled:this.disabled,icon:this.icon,selected:e,value:this.value,actions:this.actions,primaryComponent:this.primaryComponent,image:this.image};this.interact.emit({selected:e,item:i})};this.actionMenuLabel=()=>n.get("file-viewer.more-actions",this.language);this.language="en";this.value=undefined;this.text=undefined;this.secondaryText=undefined;this.disabled=false;this.icon=undefined;this.iconSize="small";this.badgeIcon=false;this.selected=false;this.actions=undefined;this.primaryComponent=undefined;this.image=undefined;this.type="listitem";this.labelId=s();this.descriptionId=s()}render(){var i;const t={"aria-labelledby":this.labelId,"aria-describedby":this.secondaryText?this.descriptionId:undefined,"aria-disabled":this.disabled?"true":"false"};if(this.type==="radio"||this.type==="checkbox"){t["aria-checked"]=this.selected?"true":"false"}else if(this.type==="option"||this.type==="menuitem"){t["aria-selected"]=this.selected?"true":"false"}return e(o,Object.assign({role:this.getHostRole(),class:{"has-primary-component":!!((i=this.primaryComponent)===null||i===void 0?void 0:i.name)}},t,{onClick:this.onClick,onKeyDown:this.onKeyDown}),this.renderRadioButton(),this.renderCheckbox(),this.renderIcon(),this.renderImage(),this.renderPrimaryComponent(),e("div",{class:"text"},this.renderLabel(),this.renderDescription()),this.renderActionMenu(this.actions))}getStableActions(e){if(this.memoizedActions===e){return this.memoizedActions}this.memoizedActions=e;return e}isSelectableType(){return this.type==="option"||this.type==="radio"||this.type==="checkbox"}getHostRole(){switch(this.type){case"option":{return"option"}case"radio":{return"radio"}case"checkbox":{return"checkbox"}case"menuitem":{return"menuitem"}default:{return"listitem"}}}get host(){return l(this)}};h.style=d;export{h as limel_list_item};
-//# sourceMappingURL=p-0334e593.entry.js.map

package/dist/lime-elements/p-0334e593.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["RadioButtonTemplate","props","h","class","checked","disabled","type","id","onChange","htmlFor","label","listItemCss","ListItemComponent","constructor","hostRef","this","renderLabel","labelId","text","renderDescription","secondaryText","descriptionId","renderIcon","iconName","getIconName","icon","iconColor","iconBackgroundColor","title","color","backgroundColor","iconProps","name","style","badge","badgeIcon","size","iconSize","Object","assign","renderPrimaryComponent","primary","primaryComponent","PrimaryComponent","renderImage","image","src","alt","loading","renderActionMenu","actions","length","stableActions","getStableActions","items","openDirection","slot","actionMenuLabel","renderRadioButton","selected","renderCheckbox","CheckboxTemplate","onClick","event","target","cameFromActionTrigger","closest","cameFromNoToggle","cameFromMenu","isSelectableType","handleInteraction","onKeyDown","shadowRoot","host","activeElement","isEnter","key","isSpace","code","repeat","preventDefault","click","newSelected","item","value","interact","emit","translate","get","language","createRandomString","render","ariaProps","undefined","Host","role","getHostRole","_a","memoizedActions"],"sources":["./src/components/radio-button-group/radio-button.template.tsx","./src/components/list-item/list-item.scss?tag=limel-list-item","./src/components/list-item/list-item.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Radio Button Template\n *\n * This is a low-level template component that renders individual radio button elements\n * using Material Design Components (MDC) styling and structure. It's used internally\n * by the list component to render radio buttons when `type=\"radio\"` is specified.\n *\n * ## Usage in the Library\n *\n * This template is primarily used by:\n * - `limel-list` component when `type=\"radio\"`\n * - `limel-radio-button-group` component (which wraps `limel-list`)\n *\n * ## Why This Exists\n *\n * While we have `limel-radio-button-group` for most use cases, this template provides\n * the actual radio button HTML structure with proper MDC classes and accessibility\n * attributes. It ensures consistent styling and behavior across all radio button\n * implementations in the library.\n *\n * ## Design Philosophy\n *\n * This follows the principle that individual radio buttons should not be standalone\n * components, as a single radio button is never useful in a UI. Instead, this template\n * is used to build groups of radio buttons through higher-level components.\n *\n * @internal\n */\ninterface RadioButtonTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n}\n\nexport const RadioButtonTemplate: FunctionalComponent<\n    RadioButtonTemplateProps\n> = (props) => {\n    return (\n        <div\n            class={{\n                'boolean-input': true,\n                'radio-button': true,\n                checked: props.checked,\n                disabled: props.disabled,\n            }}\n        >\n            <input\n                type=\"radio\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled}\n                onChange={props.onChange}\n            />\n            <div class=\"box\" />\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>\n    );\n};\n","/**\n * @prop --notification-badge-text-color: (Publicly documented in `limel-menu` too) Defines the text color of notification badges. Defaults to `--color-white`.\n * @prop --notification-badge-background-color: (Publicly documented in `limel-menu` too) Defines the background color of notification badges. Defaults to `--color-red-default`.\n * @prop --limel-list-item-menu-order: Defines the order of the menu, within the list item's flexbox. Defaults to `3`.\n */\n\n@use '../../style/mixins';\n@forward '../checkbox/checkbox.scss';\n@forward '../radio-button-group/radio-button.scss';\n\n*,\n*:before,\n*:after {\n    box-sizing: border-box;\n}\n\nlimel-list-item {\n    min-height: 2.5rem;\n    @include mixins.visualize-keyboard-focus();\n\n    transition: background-color 0.6s ease;\n    position: relative;\n    isolation: isolate;\n\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n\n    padding: 0 1rem;\n    background-color: rgb(var(--contrast-100));\n\n    &:hover {\n        z-index: 1;\n        transition: background-color 0.2s ease;\n        border-radius: 0.5rem;\n    }\n\n    &:focus,\n    &:focus-visible,\n    &:active {\n        z-index: 1;\n        border-radius: 0.5rem;\n    }\n\n    &:first-of-type {\n        border-top-left-radius: 0.5rem;\n        border-top-right-radius: 0.5rem;\n    }\n\n    &:last-of-type {\n        border-bottom-left-radius: 0.5rem;\n        border-bottom-right-radius: 0.5rem;\n    }\n\n    &:not([disabled]):not([disabled='true']) {\n        cursor: pointer;\n    }\n\n    &[disabled]:not([disabled='false']) {\n        cursor: not-allowed;\n    }\n}\n\nlimel-list-item[disabled]:not([disabled='false']) {\n    cursor: not-allowed;\n\n    .text,\n    limel-icon,\n    img,\n    .boolean-input {\n        opacity: 0.4;\n    }\n}\n\nlimel-list-item:not([disabled]):not([disabled='true']):hover,\nlimel-list-item:not([disabled]):not([disabled='true']):focus-visible {\n    background-color: rgb(var(--contrast-400));\n}\n\nlimel-list-item[type='option'] {\n    &:before {\n        transition: background-color 0.6s ease;\n        content: '';\n        position: absolute;\n        inset: 0;\n\n        opacity: 0.2;\n        border-radius: 0.5rem;\n    }\n\n    &[selected]:not([selected='false']) {\n        &:before {\n            transition: background-color 0.2s ease;\n            background-color: var(--limel-theme-primary-color);\n        }\n    }\n}\n\nlimel-list-item {\n    .text {\n        flex-grow: 1;\n        min-width: 0;\n\n        display: flex;\n        flex-direction: column;\n\n        padding: 0.5rem 0;\n\n        color: var(--limel-theme-text-primary-on-background-color);\n    }\n\n    .label {\n        @include mixins.truncate-text();\n\n        font-size: var(--limel-theme-default-font-size);\n        line-height: 1rem;\n    }\n\n    .description {\n        @include mixins.truncate-text-on-line(var(--maxLinesSecondaryText));\n        line-height: 1rem;\n        font-size: var(--limel-theme-default-small-font-size);\n        opacity: 0.6;\n    }\n\n    limel-icon {\n        color: var(--limel-theme-text-secondary-on-background-color);\n        flex-shrink: 0;\n        margin-left: -0.5rem;\n\n        &:has(+ img) {\n            margin-left: 0;\n            position: absolute;\n            top: 0.125rem;\n            left: 0.125rem;\n            padding: 0.1875rem;\n            width: 1.25rem;\n            background-color: rgb(var(--contrast-200), 0.8);\n        }\n    }\n\n    img {\n        flex-shrink: 0;\n        object-fit: cover;\n        border-radius: 50%;\n        width: 2rem;\n        height: 2rem;\n        box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.5);\n    }\n\n    limel-menu {\n        margin-right: -0.5rem;\n        // Sometimes, `primaryComponent`s in list items need to get\n        // `order: 2;` to be placed after the text. But since the default `order`\n        // of all lit item children is `0`, we need to push the menu to the far right\n        // by giving it a bigger order number. Also, by making this into a variable\n        // we can handle other edge-cases in consuming components.\n        order: var(--limel-list-item-menu-order, 3);\n    }\n}\n\nlimel-list-item {\n    &[role='menuitem'] & {\n        .label {\n            font-size: var(--limel-theme-default-small-font-size);\n        }\n    }\n}\n\n// ====================\n// Checkbox and radios\n.boolean-input {\n    width: var(--limel-boolean-input-box-size);\n    margin-left: -0.25rem;\n    &.checkbox {\n        margin-right: 0.25rem;\n    }\n\n    limel-list-item:has(limel-icon) &,\n    limel-list-item:has(img) & {\n        margin-right: -0.25rem;\n        margin-left: 0;\n        order: 2;\n    }\n}\n\n.boolean-input-label {\n    @include mixins.truncate-text();\n    opacity: 0;\n    width: var(--limel-boolean-input-box-size);\n}\n// ====================\n","import {\n    Component,\n    Host,\n    Prop,\n    h,\n    Event,\n    EventEmitter,\n    Element,\n} from '@stencil/core';\nimport { getIconName } from '../icon/get-icon-props';\nimport type { IconSize } from '../icon/icon.types';\nimport { createRandomString } from '../../util/random-string';\nimport { ListItem } from './list-item.types';\nimport { MenuItem } from '../menu/menu.types';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { CheckboxTemplate } from '../checkbox/checkbox.template';\nimport { RadioButtonTemplate } from '../radio-button-group/radio-button.template';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * This components displays the list item.\n * This centralizes styles and functionality, and helps reduce redundant code\n * in consumer components such as `limel-list` and `limel-menu-list`.\n *\n * :::note\n * The component has `shadow: false`. There are a few reasons for it:\n * 1. This is to improve performance, and ensure that its internal elements are\n * considered as internal parts of the consumer's DOM.\n * 2. The consumer does not need to implement the interactive styles\n * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no\n * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\n * within the component's own styles.\n * 3. Most importantly, the MDCList checks the light DOM of each list item\n * to find native inputs to decide the list mode (checkbox/radio).\n * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\n * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\n * an array index (for the items).\n * With `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\n * would be visible to MDC.\n * :::\n * @exampleComponent limel-example-list-item-basic\n * @exampleComponent limel-example-list-item-icon\n * @exampleComponent limel-example-list-item-icon-size\n * @exampleComponent limel-example-list-item-pictures\n * @exampleComponent limel-example-list-item-multiple-lines\n * @exampleComponent limel-example-list-item-interactive\n * @exampleComponent limel-example-list-item-radio\n * @exampleComponent limel-example-list-item-checkbox\n * @exampleComponent limel-example-list-item-actions\n * @exampleComponent limel-example-list-item-primary-component\n * @exampleComponent limel-example-list-item-command-text\n * @private\n */\n@Component({\n    tag: 'limel-list-item',\n    shadow: false,\n    styleUrl: 'list-item.scss',\n})\nexport class ListItemComponent implements ListItem {\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * {@inheritdoc ListItem.value}\n     */\n    @Prop()\n    public value?: any;\n\n    /**\n     * {@inheritdoc ListItem.text}\n     */\n    @Prop({ reflect: true })\n    public text: string;\n\n    /**\n     * {@inheritdoc ListItem.secondaryText}\n     */\n    @Prop({ reflect: true })\n    public secondaryText?: string;\n\n    /**\n     * {@inheritdoc ListItem.disabled}\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * {@inheritdoc ListItem.icon}\n     */\n    @Prop()\n    public icon?: string | ListItem['icon'];\n\n    /**\n     * Size of the icon displayed for this item.\n     */\n    @Prop({ reflect: true })\n    public iconSize: IconSize = 'small';\n\n    /**\n     * Set to `true` if the list should display larger icons with a background\n     */\n    @Prop({ reflect: true })\n    public badgeIcon = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop({ reflect: true })\n    public selected = false;\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public actions?: ListItem['actions'];\n\n    /**\n     * {@inheritdoc ListItem.selected}\n     */\n    @Prop()\n    public primaryComponent?: ListItem['primaryComponent'];\n\n    /**\n     * {@inheritdoc ListItem.image}\n     */\n    @Prop()\n    public image?: ListItem['image'];\n\n    /**\n     * The semantic role of the list item. This affects the ARIA role\n     * and the interaction behavior.\n     *\n     * - 'option' → selectable via click/Enter/Space, aria-selected\n     * - 'radio'/'checkbox' → selectable, aria-checked\n     * - 'menuitem'/'listitem' → activation only, no selection toggle\n     */\n    @Prop({ reflect: true })\n    public type: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox' =\n        'listitem';\n\n    /**\n     * Emitted when the list item toggles selection (only for selectable types and not disabled).\n     */\n    @Event()\n    public interact: EventEmitter<{\n        selected: boolean;\n        item: ListItem;\n    }>;\n\n    @Element()\n    private host: HTMLLimelListItemElement;\n\n    /**\n     * Used to describe the list item for assistive technology.\n     */\n    private readonly descriptionId: string;\n\n    /**\n     * Used to label the list item for assistive technology.\n     */\n    private readonly labelId: string;\n\n    // Memoized reference for the action items to avoid unnecessary updates\n    private memoizedActions?: Array<MenuItem | ListSeparator>;\n\n    constructor() {\n        this.labelId = createRandomString();\n        this.descriptionId = createRandomString();\n    }\n\n    public render() {\n        const ariaProps: any = {\n            'aria-labelledby': this.labelId,\n            'aria-describedby': this.secondaryText\n                ? this.descriptionId\n                : undefined,\n            'aria-disabled': this.disabled ? 'true' : 'false',\n        };\n\n        // ARIA state depending on `role`/`type`\n        if (this.type === 'radio' || this.type === 'checkbox') {\n            ariaProps['aria-checked'] = this.selected ? 'true' : 'false';\n        } else if (this.type === 'option' || this.type === 'menuitem') {\n            // aria-selected for `option` (spec);\n            // also keep for `menuitem` for visual state consistency\n            ariaProps['aria-selected'] = this.selected ? 'true' : 'false';\n        }\n\n        return (\n            <Host\n                role={this.getHostRole()}\n                class={{\n                    'has-primary-component': !!this.primaryComponent?.name,\n                }}\n                {...ariaProps}\n                onClick={this.onClick}\n                onKeyDown={this.onKeyDown}\n            >\n                {this.renderRadioButton()}\n                {this.renderCheckbox()}\n                {this.renderIcon()}\n                {this.renderImage()}\n                {this.renderPrimaryComponent()}\n                <div class=\"text\">\n                    {this.renderLabel()}\n                    {this.renderDescription()}\n                </div>\n                {this.renderActionMenu(this.actions)}\n            </Host>\n        );\n    }\n\n    private renderLabel = () => {\n        return (\n            <span class=\"label\" id={this.labelId}>\n                {this.text}\n            </span>\n        );\n    };\n\n    private renderDescription = () => {\n        if (!this.secondaryText) {\n            return;\n        }\n\n        return (\n            <span class=\"description\" id={this.descriptionId}>\n                {this.secondaryText}\n            </span>\n        );\n    };\n\n    private renderIcon = () => {\n        const iconName = getIconName(this.icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n        let title: string | undefined;\n\n        if (typeof this.icon === 'object') {\n            iconColor = this.icon.color;\n            iconBackgroundColor = this.icon.backgroundColor;\n            title = this.icon.title;\n        }\n\n        const iconProps = {\n            'aria-label': title,\n            'aria-hidden': title ? null : 'true',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n            badge: this.badgeIcon,\n            size: this.iconSize,\n        };\n\n        return <limel-icon {...iconProps} />;\n    };\n\n    private renderPrimaryComponent = () => {\n        const primary = this.primaryComponent;\n        if (!primary?.name) {\n            return;\n        }\n\n        const PrimaryComponent: any = primary.name;\n        const props = primary.props || {};\n\n        return <PrimaryComponent {...props} />;\n    };\n\n    private renderImage = () => {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    };\n\n    private renderActionMenu = (actions: Array<MenuItem | ListSeparator>) => {\n        if (!actions || actions.length === 0) {\n            return;\n        }\n\n        const stableActions = this.getStableActions(actions);\n        return (\n            <limel-menu\n                class=\"mdc-deprecated-list-item__meta\"\n                items={stableActions}\n                openDirection=\"left-start\"\n            >\n                <limel-icon-button\n                    class=\"action-menu-trigger\"\n                    slot=\"trigger\"\n                    icon=\"menu_2\"\n                    label={this.actionMenuLabel()}\n                />\n            </limel-menu>\n        );\n    };\n\n    /**\n     * Returns a stable reference for the provided actions array to avoid\n     * unnecessary re-renders of the action menu when the reference is unchanged.\n     *\n     * @param actions The actions (and separators) to display in the menu\n     * @returns The same array instance that was previously seen, if unchanged\n     */\n    private getStableActions(\n        actions: Array<MenuItem | ListSeparator>\n    ): Array<MenuItem | ListSeparator> {\n        if (this.memoizedActions === actions) {\n            return this.memoizedActions;\n        }\n        this.memoizedActions = actions;\n        return actions;\n    }\n\n    private renderRadioButton = () => {\n        if (this.type !== 'radio') {\n            return;\n        }\n\n        return (\n            <RadioButtonTemplate\n                id={`radio_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private renderCheckbox = () => {\n        if (this.type !== 'checkbox') {\n            return;\n        }\n\n        return (\n            <CheckboxTemplate\n                id={`checkbox_${this.labelId}`}\n                checked={this.selected}\n                disabled={this.disabled}\n            />\n        );\n    };\n\n    private onClick = (event: MouseEvent) => {\n        if (this.disabled) {\n            // Ignore toggling, but don't block embedded controls\n            return;\n        }\n\n        const target = event.target as HTMLElement | null;\n        const cameFromActionTrigger = !!target?.closest('.action-menu-trigger');\n        const cameFromNoToggle = !!target?.closest('[data-no-toggle]');\n        const cameFromMenu = !!target?.closest('limel-menu');\n        if (cameFromActionTrigger || cameFromNoToggle || cameFromMenu) {\n            return;\n        }\n\n        if (this.isSelectableType()) {\n            this.handleInteraction();\n        }\n        // For non-selectable types (menuitem/listitem), allow native click to bubble\n    };\n\n    private onKeyDown = (event: KeyboardEvent) => {\n        if (this.disabled) {\n            return;\n        }\n\n        // Only handle keyboard when the host itself has focus.\n        // This avoids toggling when Space/Enter is pressed on inner controls\n        // like the action menu trigger or any primary component.\n        const shadowRoot = this.host.shadowRoot;\n        const activeElement = shadowRoot\n            ? (shadowRoot.activeElement as HTMLElement | null)\n            : null;\n        if (activeElement && activeElement !== this.host) {\n            return;\n        }\n\n        const isEnter = event.key === 'Enter';\n        const isSpace =\n            event.key === ' ' ||\n            event.key === 'Space' ||\n            event.key === 'Spacebar' ||\n            event.code === 'Space';\n\n        if (!isEnter && !isSpace) {\n            return;\n        }\n\n        // Avoid re-triggering while key is held down and auto-repeats\n        if (event.repeat) {\n            // Also prevent default scroll on Space when repeating\n            if (isSpace) {\n                event.preventDefault();\n            }\n            return;\n        }\n\n        // Prevent page scroll and default button behavior on Space\n        if (isSpace) {\n            event.preventDefault();\n        }\n\n        if (this.isSelectableType()) {\n            this.handleInteraction();\n            return;\n        }\n\n        // For non-selectable items, treat Enter and Space as activation (simulate click)\n        if (isEnter || isSpace) {\n            this.host.click();\n        }\n    };\n\n    private isSelectableType(): boolean {\n        return (\n            this.type === 'option' ||\n            this.type === 'radio' ||\n            this.type === 'checkbox'\n        );\n    }\n\n    private getHostRole(): string {\n        switch (this.type) {\n            case 'option': {\n                return 'option';\n            }\n            case 'radio': {\n                return 'radio';\n            }\n            case 'checkbox': {\n                return 'checkbox';\n            }\n            case 'menuitem': {\n                return 'menuitem';\n            }\n            default: {\n                return 'listitem';\n            }\n        }\n    }\n\n    private handleInteraction = () => {\n        const newSelected = !this.selected;\n\n        const item: ListItem = {\n            text: this.text,\n            secondaryText: this.secondaryText,\n            disabled: this.disabled,\n            icon: this.icon,\n            selected: newSelected,\n            value: this.value,\n            actions: this.actions,\n            primaryComponent: this.primaryComponent,\n            image: this.image,\n        };\n\n        this.interact.emit({\n            selected: newSelected,\n            item: item,\n        });\n    };\n\n    private actionMenuLabel = (): string => {\n        return translate.get('file-viewer.more-actions', this.language);\n    };\n}\n"],"mappings":"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"}