@limetech/lime-elements 38.26.0 → 38.26.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [38.26.1](https://github.com/Lundalogik/lime-elements/compare/v38.26.0...v38.26.1) (2025-10-07)
+
+
+### Bug Fixes
+
+
+* **checkbox:** ensure correct rendering on iOS & macOS 26 ([0c3ef0e](https://github.com/Lundalogik/lime-elements/commit/0c3ef0eb5fd6894e01678e3d35472ea3a7bac583))
+
 ## [38.26.0](https://github.com/Lundalogik/lime-elements/compare/v38.25.0...v38.26.0) (2025-10-03)
 
 

package/dist/cjs/limel-checkbox.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-174a078a.js');
 const randomString = require('./random-string-27fb6c74.js');
 const checkbox_template = require('./checkbox.template-92ae2e60.js');
 
-const checkboxCss = "@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:has(input[type=checkbox]:checked) .box,.boolean-input:has(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):has(label.boolean-input-label:hover) .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):has(label.boolean-input-label: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:has(input[type=checkbox]:focus-visible) .box:before,.boolean-input:has(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):has(label.boolean-input-label: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):has(input[type=checkbox]:checked) svg.check-mark{opacity:1}.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) 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}";
+const checkboxCss = "@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}";
 
 const Checkbox = class {
   constructor(hostRef) {

package/dist/cjs/limel-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"limel-checkbox.entry.cjs.js","mappings":"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","names":["createRandomString","h","CheckboxTemplate"],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    &:not(.indeterminate):has(input[type='checkbox']:checked) {\n        svg.check-mark {\n            opacity: 1;\n\n            path {\n                stroke-dashoffset: 0;\n            }\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"version":3}
+{"file":"limel-checkbox.entry.cjs.js","mappings":"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","names":["createRandomString","h","CheckboxTemplate"],"sources":["./src/components/checkbox/checkbox.scss?tag=limel-checkbox&encapsulation=shadow","./src/components/checkbox/checkbox.tsx"],"sourcesContent":["/**\n* :::important\n* The `CheckboxTemplate` can be imported and used in the HTML of\n* other components, to render a non-functional and decorative checkbox in\n* their UI. An example of this is the list component.\n* This means the content of `CheckboxTemplate` will become a part of the\n* consumer's DOM structure.\n*\n* Additionally, the consumer components' also need to import the current `.scss`\n* file into their own styles file, for the checkbox to be rendered correctly!\n* This means, if the styles in this file are not \"specific\" enough,\n* there is a risk that the consumer component's styles are affected by\n* our styles here.\n*\n* For instance if the consumer has a `<label>` or `<svg>` element,\n* it might unintentionally inherit styles from the checkbox; unless we\n* make the such styles more specific here.\n*\n* Naturally, we cannot mitigate all sorts of potential styling problems.\n* The consumer component should be aware of this issue too.\n* But we can ensure that our styles here both make sense,\n* are readable, and are as specific as possible to avoid unintended side effects.\n* :::\n*/\n\n@use '../../style/mixins';\n\n/**\n* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.\n*/\n\n@forward '../../style/internal/boolean-input.scss';\n\n:host(limel-checkbox) {\n    min-height: var(--limel-checkbox-min-height, 2.5rem); // prevents flickering\n    // when switching between `readonly` and normal states in `limel-checkbox`,\n    // but not where `CheckboxTemplate` is imported & used.\n}\n\n.box {\n    &:after {\n        height: 0.125rem;\n        width: 0.25rem;\n\n        .indeterminate & {\n            opacity: 1;\n            width: calc(var(--limel-boolean-input-box-size) - 0.5rem);\n        }\n    }\n}\n\n.checkbox {\n    --limel-boolean-input-box-border-radius: 0.25rem;\n\n    svg.check-mark {\n        position: absolute;\n        z-index: 1;\n        inset: 0;\n\n        transform: translate3d(-0.125rem, -0.125rem, 0);\n\n        width: var(--limel-boolean-input-box-size);\n        height: var(--limel-boolean-input-box-size);\n\n        padding: 0.25rem;\n\n        color: rgb(var(--color-white));\n        opacity: 0;\n\n        stroke-width: 0.1875rem; // 3px\n        stroke: currentColor;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n\n        path {\n            stroke-dashoffset: 29.7833;\n            stroke-dasharray: 29.7833;\n            transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);\n        }\n    }\n\n    /*\n     * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have\n     * a rendering bug where transitions on descendants whose end state is triggered\n     * ONLY via a parent selector using `:has()` may not animate. Instead, Safari\n     * sometimes jumps directly to the final state (or never paints the transition)\n     * until a subsequent layout invalidation (e.g. tab switch, resize) happens.\n     *\n     * Workaround: provide an equivalent selector that does NOT rely on `:has()`,\n     * using the adjacency between the input and the visual box. This ensures the\n     * `stroke-dashoffset` transition for the check mark runs reliably in Safari\n     * while keeping the simpler `:has()` version commented for future re-implementation\n     * or cleanup.\n     *\n     * &:not(.indeterminate):has(input[type='checkbox']:checked) {\n     *     svg.check-mark {\n     *         opacity: 1;\n     *         path {\n     *             stroke-dashoffset: 0;\n     *         }\n     *     }\n     * }\n     * Using the `:has()` selector is more reliable, because it doesn't\n     * depend on the DOM structure (e.g. if the markup changes and the input is\n     * no longer adjacent to the box), but Safari support for `:has()` is still\n     * somewhat inconsistent.\n     */\n\n    &:not(.indeterminate)\n        > input[type='checkbox']:checked\n        + .box\n        svg.check-mark {\n        opacity: 1;\n\n        path {\n            stroke-dashoffset: 0;\n        }\n    }\n}\n\nlimel-dynamic-label {\n    margin-top: 0.375rem;\n    margin-left: -0.25rem;\n}\n\n@include mixins.hide-helper-line-when-not-needed(limel-checkbox);\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n    Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { CheckboxTemplate } from './checkbox.template';\nimport { Label } from '../dynamic-label/label.types';\n\n/**\n * The Checkbox component is a classic and essential element in UI design that allows\n * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to\n * select one or more items from a list of choices.\n *\n * ## States of a Checkbox\n * When a user clicks or taps on the box, it toggles between two states:\n * Checked and Unchecked.\n *\n * However, a Checkbox can visualize a third state called the \"Indeterminate\" state.\n * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\n *\n * The Indeterminate state is typically used when dealing with checkbox groups\n * that have hierarchical relationships or when the group contains sub-items.\n * This state is used to indicate that that some, but not all, of the items in a group are selected.\n *\n * :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n *\n * @exampleComponent limel-example-checkbox\n * @exampleComponent limel-example-checkbox-helper-text\n * @exampleComponent limel-example-checkbox-readonly\n */\n@Component({\n    tag: 'limel-checkbox',\n    shadow: true,\n    styleUrl: 'checkbox.scss',\n})\nexport class Checkbox {\n    /**\n     * Disables the checkbox when `true`. Works exactly the same as `readonly`.\n     * If either property is `true`, the checkbox will be disabled.\n     */\n    @Prop({ reflect: true })\n    public disabled = false;\n\n    /**\n     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\n     * But shows no visual sign indicating that the checkbox is disabled\n     * or can ever become interactable.\n     */\n    @Prop({ reflect: true })\n    public readonly = false;\n\n    /**\n     * Set to `true` to indicate that the current value is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid: boolean;\n\n    /**\n     * The checkbox label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Optional helper text to display below the checkbox\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * The value of the checkbox. Set to `true` to make the checkbox checked.\n     */\n    @Prop({ reflect: true })\n    public checked = false;\n\n    /**\n     * Enables indeterminate state. Set to `true` to signal indeterminate check.\n     */\n    @Prop({ reflect: true })\n    public indeterminate = false;\n\n    /**\n     * Set to `true` to indicate that the checkbox must be checked.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * The labels to use to clarify what kind of data is being visualized,\n     * when the component is `readonly`.\n     */\n    @Prop()\n    public readonlyLabels?: Array<Label<boolean>> = [];\n\n    @State()\n    private modified = false;\n    private shouldReinitialize = false;\n\n    /**\n     * Emitted when the input value is changed.\n     */\n    @Event()\n    private change: EventEmitter<boolean>;\n\n    @Element()\n    private limelCheckbox: HTMLLimelCheckboxElement;\n    private id: string = createRandomString();\n    private helperTextId: string = createRandomString();\n\n    @Watch('checked')\n    protected handleCheckedChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = newValue || this.indeterminate;\n    }\n\n    @Watch('indeterminate')\n    protected handleIndeterminateChange(newValue: boolean) {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.checked = this.checked || newValue;\n        input.indeterminate = newValue;\n    }\n\n    @Watch('readonly')\n    protected handleReadonlyChange() {\n        this.destroyMDCInstances();\n        this.shouldReinitialize = true;\n    }\n\n    componentDidRender() {\n        if (this.shouldReinitialize) {\n            this.initialize();\n            this.shouldReinitialize = false;\n        }\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private destroyMDCInstances = () => {\n        const input = this.getCheckboxElement();\n        if (input) {\n            delete input.dataset['indeterminate'];\n            input.indeterminate = false;\n        }\n    };\n\n    public disconnectedCallback() {\n        this.destroyMDCInstances();\n    }\n\n    public render() {\n        return (\n            <CheckboxTemplate\n                disabled={this.disabled || this.readonly}\n                label={this.label}\n                readonlyLabels={this.readonlyLabels}\n                helperText={this.helperText}\n                helperTextId={this.helperTextId}\n                checked={this.checked || this.indeterminate}\n                indeterminate={this.indeterminate}\n                required={this.required}\n                readonly={this.readonly}\n                invalid={this.isInvalid()}\n                onChange={this.onChange}\n                id={this.id}\n            />\n        );\n    }\n\n    private isInvalid = () => {\n        if (this.invalid) {\n            return true;\n        }\n\n        if (this.required && this.modified && !this.checked) {\n            return true;\n        }\n    };\n\n    private initialize = () => {\n        const input = this.getCheckboxElement();\n        if (!input) {\n            return;\n        }\n\n        input.indeterminate = this.indeterminate;\n        input.checked = this.checked || this.indeterminate;\n    };\n\n    private getCheckboxElement = (): HTMLInputElement | null => {\n        return (\n            this.limelCheckbox?.shadowRoot?.querySelector(\n                'input[type=\"checkbox\"]'\n            ) || null\n        );\n    };\n\n    private onChange = (event: Event) => {\n        event.stopPropagation();\n        const input = event.currentTarget as HTMLInputElement;\n        const isChecked = input?.checked ?? this.checked;\n        this.change.emit(isChecked);\n        this.modified = true;\n    };\n}\n"],"version":3}

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

@@ -20,7 +20,7 @@ const RadioButtonTemplate = (props) => {
     index.h("label", { class: "boolean-input-label", htmlFor: props.id }, props.label)));
 };
 
-const listItemCss = "@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:has(input[type=checkbox]:checked) .box,.boolean-input:has(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):has(label.boolean-input-label:hover) .box{will-change:box-shadow;box-shadow:var(--button-shadow-hovered)}.boolean-input:not(.disabled):has(label.boolean-input-label: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:has(input[type=checkbox]:focus-visible) .box:before,.boolean-input:has(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):has(label.boolean-input-label: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):has(input[type=checkbox]:checked) svg.check-mark{opacity:1}.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) 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 listItemCss = "@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 ListItemComponent = class {
   constructor(hostRef) {

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 {\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}

package/dist/collection/components/checkbox/checkbox.css

@@ -159,19 +159,48 @@ label.boolean-input-label {
   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)));
+  /*
+   * NOTE: Original selectors using `:has()` are commented out due to Safari
+   * rendering bugs where descendant transitions (e.g. SVG stroke animations)
+   * or box/background updates sometimes fail to animate or even repaint
+   * reliably when the state change is detected only via `:has()`.
+   *
+   * Original (kept for future re-implementation, or cleanup):
+   * .boolean-input:has(input[type='checkbox']:checked) &,
+   * .boolean-input:has(input[type='radio']:checked) & {
+   *   ...
+   * }
+   *
+   * Replacement uses adjacency: the markup places the `<input>` immediately
+   * before .box, so we can select the checked state with
+   * input:checked + .box. We retain the explicit `.checked` class pathway in
+   * case some templates toggle that class manually.
+   *
+   * Using the `:has()` selector is more reliable, because it doesn't
+   * depend on the DOM structure (e.g. if the markup changes and the input is
+   * no longer adjacent to the box), but Safari support for `:has()` is still
+   * somewhat inconsistent.
+   */
+  /*
+   * See previous comment about Safari rendering bugs ☝️.
+   *
+   * Original (kept for for future re-implementation, or cleanup):
+   * .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & { ... }
+   * .boolean-input:not(.disabled):has(label.boolean-input-label:active) & { ... }
+   */
 }
-.checked .box, .boolean-input:has(input[type=checkbox]:checked) .box, .boolean-input:has(input[type=radio]:checked) .box {
+.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):has(label.boolean-input-label:hover) .box {
+.boolean-input:not(.disabled):hover .box {
   will-change: box-shadow;
   box-shadow: var(--button-shadow-hovered);
 }
-.boolean-input:not(.disabled):has(label.boolean-input-label:active) .box {
+.boolean-input:not(.disabled):active .box {
   will-change: box-shadow;
   box-shadow: var(--button-shadow-pressed);
 }
@@ -181,8 +210,15 @@ label.boolean-input-label {
   position: absolute;
   inset: -0.1875rem;
   border-radius: inherit;
+  /*
+   * See previous comment about Safari rendering bugs ☝️.
+   *
+   * Original (kept for for future re-implementation, or cleanup):
+   * .boolean-input:has(input[type='checkbox']:focus-visible) &,
+   * .boolean-input:has(input[type='radio']:focus-visible) & { ...}
+   */
 }
-.boolean-input:has(input[type=checkbox]:focus-visible) .box:before, .boolean-input:has(input[type=radio]:focus-visible) .box:before {
+.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);
 }
@@ -195,8 +231,9 @@ label.boolean-input-label {
   border-radius: 1rem;
   opacity: 0;
   background-color: rgb(var(--color-white));
+  /* Hover fallback for pseudo-element (see explanation above). */
 }
-.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box:after {
+.boolean-input:not(.disabled):hover .box:after {
   will-change: opacity, box-shadow, transform, width;
 }
 
@@ -242,6 +279,32 @@ label.boolean-input-label {
 
 .checkbox {
   --limel-boolean-input-box-border-radius: 0.25rem;
+  /*
+   * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have
+   * a rendering bug where transitions on descendants whose end state is triggered
+   * ONLY via a parent selector using `:has()` may not animate. Instead, Safari
+   * sometimes jumps directly to the final state (or never paints the transition)
+   * until a subsequent layout invalidation (e.g. tab switch, resize) happens.
+   *
+   * Workaround: provide an equivalent selector that does NOT rely on `:has()`,
+   * using the adjacency between the input and the visual box. This ensures the
+   * `stroke-dashoffset` transition for the check mark runs reliably in Safari
+   * while keeping the simpler `:has()` version commented for future re-implementation
+   * or cleanup.
+   *
+   * &:not(.indeterminate):has(input[type='checkbox']:checked) {
+   *     svg.check-mark {
+   *         opacity: 1;
+   *         path {
+   *             stroke-dashoffset: 0;
+   *         }
+   *     }
+   * }
+   * Using the `:has()` selector is more reliable, because it doesn't
+   * depend on the DOM structure (e.g. if the markup changes and the input is
+   * no longer adjacent to the box), but Safari support for `:has()` is still
+   * somewhat inconsistent.
+   */
 }
 .checkbox svg.check-mark {
   position: absolute;
@@ -263,10 +326,10 @@ label.boolean-input-label {
   stroke-dasharray: 29.7833;
   transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);
 }
-.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark {
+.checkbox:not(.indeterminate) > input[type=checkbox]:checked + .box svg.check-mark {
   opacity: 1;
 }
-.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark path {
+.checkbox:not(.indeterminate) > input[type=checkbox]:checked + .box svg.check-mark path {
   stroke-dashoffset: 0;
 }
 

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

@@ -159,19 +159,48 @@ label.boolean-input-label {
   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:has(input[type=checkbox]:checked) .box, .boolean-input:has(input[type=radio]:checked) .box {
+  /*
+   * NOTE: Original selectors using `:has()` are commented out due to Safari
+   * rendering bugs where descendant transitions (e.g. SVG stroke animations)
+   * or box/background updates sometimes fail to animate or even repaint
+   * reliably when the state change is detected only via `:has()`.
+   *
+   * Original (kept for future re-implementation, or cleanup):
+   * .boolean-input:has(input[type='checkbox']:checked) &,
+   * .boolean-input:has(input[type='radio']:checked) & {
+   *   ...
+   * }
+   *
+   * Replacement uses adjacency: the markup places the `<input>` immediately
+   * before .box, so we can select the checked state with
+   * input:checked + .box. We retain the explicit `.checked` class pathway in
+   * case some templates toggle that class manually.
+   *
+   * Using the `:has()` selector is more reliable, because it doesn't
+   * depend on the DOM structure (e.g. if the markup changes and the input is
+   * no longer adjacent to the box), but Safari support for `:has()` is still
+   * somewhat inconsistent.
+   */
+  /*
+   * See previous comment about Safari rendering bugs ☝️.
+   *
+   * Original (kept for for future re-implementation, or cleanup):
+   * .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & { ... }
+   * .boolean-input:not(.disabled):has(label.boolean-input-label:active) & { ... }
+   */
+}
+.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):has(label.boolean-input-label:hover) .box {
+.boolean-input:not(.disabled):hover .box {
   will-change: box-shadow;
   box-shadow: var(--button-shadow-hovered);
 }
-.boolean-input:not(.disabled):has(label.boolean-input-label:active) .box {
+.boolean-input:not(.disabled):active .box {
   will-change: box-shadow;
   box-shadow: var(--button-shadow-pressed);
 }
@@ -181,8 +210,15 @@ label.boolean-input-label {
   position: absolute;
   inset: -0.1875rem;
   border-radius: inherit;
-}
-.boolean-input:has(input[type=checkbox]:focus-visible) .box:before, .boolean-input:has(input[type=radio]:focus-visible) .box:before {
+  /*
+   * See previous comment about Safari rendering bugs ☝️.
+   *
+   * Original (kept for for future re-implementation, or cleanup):
+   * .boolean-input:has(input[type='checkbox']:focus-visible) &,
+   * .boolean-input:has(input[type='radio']:focus-visible) & { ...}
+   */
+}
+.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);
 }
@@ -195,8 +231,9 @@ label.boolean-input-label {
   border-radius: 1rem;
   opacity: 0;
   background-color: rgb(var(--color-white));
+  /* Hover fallback for pseudo-element (see explanation above). */
 }
-.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box:after {
+.boolean-input:not(.disabled):hover .box:after {
   will-change: opacity, box-shadow, transform, width;
 }
 
@@ -242,6 +279,32 @@ label.boolean-input-label {
 
 .checkbox {
   --limel-boolean-input-box-border-radius: 0.25rem;
+  /*
+   * Safari (macOS & iOS, tested on Safari 26) & probably even earlier versions have
+   * a rendering bug where transitions on descendants whose end state is triggered
+   * ONLY via a parent selector using `:has()` may not animate. Instead, Safari
+   * sometimes jumps directly to the final state (or never paints the transition)
+   * until a subsequent layout invalidation (e.g. tab switch, resize) happens.
+   *
+   * Workaround: provide an equivalent selector that does NOT rely on `:has()`,
+   * using the adjacency between the input and the visual box. This ensures the
+   * `stroke-dashoffset` transition for the check mark runs reliably in Safari
+   * while keeping the simpler `:has()` version commented for future re-implementation
+   * or cleanup.
+   *
+   * &:not(.indeterminate):has(input[type='checkbox']:checked) {
+   *     svg.check-mark {
+   *         opacity: 1;
+   *         path {
+   *             stroke-dashoffset: 0;
+   *         }
+   *     }
+   * }
+   * Using the `:has()` selector is more reliable, because it doesn't
+   * depend on the DOM structure (e.g. if the markup changes and the input is
+   * no longer adjacent to the box), but Safari support for `:has()` is still
+   * somewhat inconsistent.
+   */
 }
 .checkbox svg.check-mark {
   position: absolute;
@@ -263,10 +326,10 @@ label.boolean-input-label {
   stroke-dasharray: 29.7833;
   transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);
 }
-.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark {
+.checkbox:not(.indeterminate) > input[type=checkbox]:checked + .box svg.check-mark {
   opacity: 1;
 }
-.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark path {
+.checkbox:not(.indeterminate) > input[type=checkbox]:checked + .box svg.check-mark path {
   stroke-dashoffset: 0;
 }