npm - @limetech/lime-elements - Versions diffs - 38.25.0 → 38.26.1 - Mend

@limetech/lime-elements 38.25.0 → 38.26.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

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

	@@ -1 +1 @@
1	- {"file":"limel-list-item.entry.cjs.js","mappings":";;;;;;;;;;AAsCO,MAAM,mBAAmB,GAE5B,CAAC,KAAK;EACN,QACIA,iBACI,KAAK,EAAE;MACH,eAAe,EAAE,IAAI;MACrB,cAAc,EAAE,IAAI;MACpB,OAAO,EAAE,KAAK,CAAC,OAAO;MACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;KAC3B;IAEDA,mBACI,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B;IACFA,iBAAK,KAAK,EAAC,KAAK,GAAG;IACnBA,mBAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,IAC/C,KAAK,CAAC,KAAK,CACR,CACN,EACR;AACN,CAAC;;AC/DD,MAAM,WAAW,GAAG,s8QAAs8Q;;MC2D78Q,iBAAiB;EA+G1B;;;IA+CQ,gBAAW,GAAG;MAClB,QACIA,kBAAM,KAAK,EAAC,OAAO,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,IAC/B,IAAI,CAAC,IAAI,CACP,EACT;KACL,CAAC;IAEM,sBAAiB,GAAG;MACxB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;QACrB,OAAO;OACV;MAED,QACIA,kBAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,aAAa,IAC3C,IAAI,CAAC,aAAa,CAChB,EACT;KACL,CAAC;IAEM,eAAU,GAAG;MACjB,MAAM,QAAQ,GAAGC,wBAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;MACxC,IAAI,CAAC,QAAQ,EAAE;QACX,OAAO;OACV;MAED,IAAI,SAA6B,CAAC;MAClC,IAAI,mBAAuC,CAAC;MAC5C,IAAI,KAAyB,CAAC;MAE9B,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC/B,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QAC5B,mBAAmB,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;QAChD,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;OAC3B;MAED,MAAM,SAAS,GAAG;QACd,YAAY,EAAE,KAAK;QACnB,aAAa,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM;QACpC,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE;UACH,KAAK,EAAE,SAAS;UAChB,kBAAkB,EAAE,mBAAmB;SAC1C;QACD,KAAK,EAAE,IAAI,CAAC,SAAS;QACrB,IAAI,EAAE,IAAI,CAAC,QAAQ;OACtB,CAAC;MAEF,OAAOD,wCAAgB,SAAS,EAAI,CAAC;KACxC,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;MACtC,IAAI,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA,EAAE;QAChB,OAAO;OACV;MAED,MAAM,gBAAgB,GAAQ,OAAO,CAAC,IAAI,CAAC;MAC3C,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC;MAElC,OAAOA,QAAC,gBAAgB,oBAAK,KAAK,EAAI,CAAC;KAC1C,CAAC;IAEM,gBAAW,GAAG;MAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;QACb,OAAO;OACV;MAED,OAAOA,iBAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,EAAC,MAAM,GAAG,CAAC;KAC3E,CAAC;IAEM,qBAAgB,GAAG,CAAC,OAAwC;MAChE,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;QAClC,OAAO;OACV;MAED,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;MACrD,QACIA,wBACI,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE,aAAa,EACpB,aAAa,EAAC,YAAY,IAE1BA,+BACI,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,GAC/B,CACO,EACf;KACL,CAAC;IAmBM,sBAAiB,GAAG;MACxB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;QACvB,OAAO;OACV;MAED,QACIA,QAAC,mBAAmB,IAChB,EAAE,EAAE,SAAS,IAAI,CAAC,OAAO,EAAE,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACJ;KACL,CAAC;IAEM,mBAAc,GAAG;MACrB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;QAC1B,OAAO;OACV;MAED,QACIA,QAACE,kCAAgB,IACb,EAAE,EAAE,YAAY,IAAI,CAAC,OAAO,EAAE,EAC9B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACzB,EACJ;KACL,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAChC,IAAI,IAAI,CAAC,QAAQ,EAAE;;QAEf,OAAO;OACV;MAED,MAAM,MAAM,GAAG,KAAK,CAAC,MAA4B,CAAC;MAClD,MAAM,qBAAqB,GAAG,CAAC,EAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA,CAAC;MACxE,MAAM,gBAAgB,GAAG,CAAC,EAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,kBAAkB,CAAC,CAAA,CAAC;MAC/D,MAAM,YAAY,GAAG,CAAC,EAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,CAAC,YAAY,CAAC,CAAA,CAAC;MACrD,IAAI,qBAAqB,IAAI,gBAAgB,IAAI,YAAY,EAAE;QAC3D,OAAO;OACV;MAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;QACzB,IAAI,CAAC,iBAAiB,EAAE,CAAC;OAC5B;;KAEJ,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB;MACrC,IAAI,IAAI,CAAC,QAAQ,EAAE;QACf,OAAO;OACV;;;;MAKD,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;MACxC,MAAM,aAAa,GAAG,UAAU;UACzB,UAAU,CAAC,aAAoC;UAChD,IAAI,CAAC;MACX,IAAI,aAAa,IAAI,aAAa,KAAK,IAAI,CAAC,IAAI,EAAE;QAC9C,OAAO;OACV;MAED,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,KAAK,OAAO,CAAC;MACtC,MAAM,OAAO,GACT,KAAK,CAAC,GAAG,KAAK,GAAG;QACjB,KAAK,CAAC,GAAG,KAAK,OAAO;QACrB,KAAK,CAAC,GAAG,KAAK,UAAU;QACxB,KAAK,CAAC,IAAI,KAAK,OAAO,CAAC;MAE3B,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE;QACtB,OAAO;OACV;;MAGD,IAAI,KAAK,CAAC,MAAM,EAAE;;QAEd,IAAI,OAAO,EAAE;UACT,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;QACD,OAAO;OACV;;MAGD,IAAI,OAAO,EAAE;QACT,KAAK,CAAC,cAAc,EAAE,CAAC;OAC1B;MAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;QACzB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,OAAO;OACV;;MAGD,IAAI,OAAO,IAAI,OAAO,EAAE;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;OACrB;KACJ,CAAC;IA8BM,sBAAiB,GAAG;MACxB,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;MAEnC,MAAM,IAAI,GAAa;QACnB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,aAAa,EAAE,IAAI,CAAC,aAAa;QACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;QACvC,KAAK,EAAE,IAAI,CAAC,KAAK;OACpB,CAAC;MAEF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACf,QAAQ,EAAE,WAAW;QACrB,IAAI,EAAE,IAAI;OACb,CAAC,CAAC;KACN,CAAC;IAEM,oBAAe,GAAG;MACtB,OAAOC,sBAAS,CAAC,GAAG,CAAC,0BAA0B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KACnE,CAAC;oBA7Z2B,IAAI;;;;oBAwBf,KAAK;;oBAYK,OAAO;qBAMhB,KAAK;oBAMN,KAAK;;;;gBA8BnB,UAAU;IA4BV,IAAI,CAAC,OAAO,GAAGC,+BAAkB,EAAE,CAAC;IACpC,IAAI,CAAC,aAAa,GAAGA,+BAAkB,EAAE,CAAC;GAC7C;EAEM,MAAM;;IACT,MAAM,SAAS,GAAQ;MACnB,iBAAiB,EAAE,IAAI,CAAC,OAAO;MAC/B,kBAAkB,EAAE,IAAI,CAAC,aAAa;UAChC,IAAI,CAAC,aAAa;UAClB,SAAS;MACf,eAAe,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO;KACpD,CAAC;;IAGF,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;MACnD,SAAS,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;KAChE;SAAM,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;;;MAG3D,SAAS,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;KACjE;IAED,QACIJ,QAACK,UAAI,kBACD,IAAI,EAAE,IAAI,CAAC,WAAW,EAAE,EACxB,KAAK,EAAE;QACH,uBAAuB,EAAE,CAAC,EAAC,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAA;OACzD,IACG,SAAS,IACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,KAExB,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,cAAc,EAAE,EACrB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,sBAAsB,EAAE,EAC9BL,iBAAK,KAAK,EAAC,MAAM,IACZ,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,iBAAiB,EAAE,CACvB,EACL,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,CACjC,EACT;GACL;;;;;;;;EAsGO,gBAAgB,CACpB,OAAwC;IAExC,IAAI,IAAI,CAAC,eAAe,KAAK,OAAO,EAAE;MAClC,OAAO,IAAI,CAAC,eAAe,CAAC;KAC/B;IACD,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;IAC/B,OAAO,OAAO,CAAC;GAClB;EAsGO,gBAAgB;IACpB,QACI,IAAI,CAAC,IAAI,KAAK,QAAQ;MACtB,IAAI,CAAC,IAAI,KAAK,OAAO;MACrB,IAAI,CAAC,IAAI,KAAK,UAAU,EAC1B;GACL;EAEO,WAAW;IACf,QAAQ,IAAI,CAAC,IAAI;MACb,KAAK,QAAQ,EAAE;QACX,OAAO,QAAQ,CAAC;OACnB;MACD,KAAK,OAAO,EAAE;QACV,OAAO,OAAO,CAAC;OAClB;MACD,KAAK,UAAU,EAAE;QACb,OAAO,UAAU,CAAC;OACrB;MACD,KAAK,UAAU,EAAE;QACb,OAAO,UAAU,CAAC;OACrB;MACD,SAAS;QACL,OAAO,UAAU,CAAC;OACrB;KACJ;GACJ;;;;;;;","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}
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}

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16],\"language\":[513]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-helper-line.cjs\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-breadcrumbs_8.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"size\":[513],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"limel-text-editor.cjs\",[[17,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-card.cjs\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-file.cjs\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker.cjs\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"allItems\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-list-item.cjs\",[[0,\"limel-list-item\",{\"language\":[513],\"value\":[8],\"text\":[513],\"secondaryText\":[513,\"secondary-text\"],\"disabled\":[516],\"icon\":[1],\"iconSize\":[513,\"icon-size\"],\"badgeIcon\":[516,\"badge-icon\"],\"selected\":[516],\"actions\":[16],\"primaryComponent\":[16],\"image\":[16],\"type\":[513]}]]],[\"limel-split-button.cjs\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer.cjs\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker.cjs\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"placeholder\":[513],\"palette\":[16],\"paletteColumnCount\":[514,\"palette-column-count\"],\"isOpen\":[32]}]]],[\"limel-profile-picture.cjs\",[[1,\"limel-profile-picture\",{\"language\":[513],\"label\":[513],\"icon\":[1],\"helperText\":[1,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"required\":[516],\"invalid\":[516],\"loading\":[516],\"value\":[1],\"imageFit\":[513,\"image-fit\"],\"accept\":[513],\"resize\":[16],\"objectUrl\":[32],\"imageError\":[32],\"isErrorMessagePopoverOpen\":[32]}]]],[\"limel-date-picker.cjs\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock.cjs\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar.cjs\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-select.cjs\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group.cjs\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart.cjs\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section.cjs\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"icon\":[1],\"invalid\":[516],\"actions\":[16],\"language\":[513]}]]],[\"limel-help.cjs\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-info-tile.cjs\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16],\"hasPrimarySlot\":[32]}]]],[\"limel-table.cjs\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16],\"language\":[513]}]]],[\"limel-shortcut.cjs\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-switch.cjs\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-tab-panel.cjs\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-dialog.cjs\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow.cjs\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-slider.cjs\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"invalid\":[516],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-banner.cjs\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-menu-item-meta.cjs\",[[1,\"limel-menu-item-meta\",{\"commandText\":[1,\"command-text\"],\"badge\":[8],\"showChevron\":[4,\"show-chevron\"]}]]],[\"limel-radio-button-group.cjs\",[[0,\"limel-radio-button-group\",{\"items\":[16],\"selectedItem\":[16],\"disabled\":[516],\"badgeIcons\":[516,\"badge-icons\"],\"maxLinesSecondaryText\":[514,\"max-lines-secondary-text\"]}]]],[\"limel-ai-avatar.cjs\",[[1,\"limel-ai-avatar\",{\"isThinking\":[516,\"is-thinking\"],\"language\":[513]}]]],[\"limel-code-editor.cjs\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config.cjs\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container.cjs\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form.cjs\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid.cjs\",[[1,\"limel-grid\"]]],[\"limel-prosemirror-adapter.cjs\",[[17,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"disabled\":[516],\"customElements\":[16],\"triggerCharacters\":[16],\"ui\":[1],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette.cjs\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"required\":[516],\"invalid\":[516],\"columnCount\":[514,\"column-count\"],\"palette\":[16]}]]],[\"limel-dock-button.cjs\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-checkbox.cjs\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-tab-bar.cjs\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-callout.cjs\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-header.cjs\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content.cjs\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item.cjs\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress.cjs\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter.cjs\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-3d-hover-effect-glow.cjs\",[[1,\"limel-3d-hover-effect-glow\"]]],[\"limel-icon-button.cjs\",[[17,\"limel-icon-button\",{\"icon\":[1],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-file-dropzone_2.cjs\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-dynamic-label.cjs\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}]]],[\"limel-markdown.cjs\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16],\"lazyLoadImages\":[4,\"lazy-load-images\"]}]]],[\"limel-badge.cjs\",[[1,\"limel-badge\",{\"label\":[520]}]]],[\"limel-helper-line.cjs\",[[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-icon.cjs\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-portal_3.cjs\",[[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}],[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-breadcrumbs_8.cjs\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[4,\"limel-notched-outline\",{\"required\":[516],\"readonly\":[516],\"invalid\":[516],\"disabled\":[516],\"label\":[513],\"labelId\":[513,\"label-id\"],\"hasValue\":[516,\"has-value\"],\"hasLeadingIcon\":[516,\"has-leading-icon\"],\"hasFloatingLabel\":[516,\"has-floating-label\"]}]]],[\"limel-chip_2.cjs\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"size\":[513],\"menuItems\":[16]}]]],[\"limel-button.cjs\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-action-bar-item_2.cjs\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"],\"overFlowIcon\":[16]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2.cjs\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"collapsible\":[516],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32],\"actionBarIsShrunk\":[32]}]]],[\"limel-linear-progress.cjs\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-popover_2.cjs\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
   });
 };

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

@@ -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/color-picker/color-picker-palette.js CHANGED Viewed

@@ -29,7 +29,9 @@ export class Palette {
     this.value = undefined;
     this.label = undefined;
     this.helperText = undefined;
+    this.placeholder = undefined;
     this.required = undefined;
+    this.invalid = false;
     this.columnCount = undefined;
     this.palette = undefined;
   }
@@ -39,7 +41,7 @@ export class Palette {
       h("div", { class: "color-picker-palette", style: {
           '--color-picker-column-count': `${this.getColumnCount()}`,
         } }, this.renderSwatches()),
-      h("div", { class: "chosen-color-name" }, h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required }), h("div", { class: "chosen-color-preview", style: background })),
+      h("div", { class: "chosen-color-name" }, h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder }), h("div", { class: "chosen-color-preview", style: background })),
     ];
   }
   getPalette() {
@@ -152,6 +154,23 @@ export class Palette {
         "attribute": "helper-text",
         "reflect": true
       },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder text shown inside the input field,\nwhen the field is focused and empty."
+        },
+        "attribute": "placeholder",
+        "reflect": true
+      },
       "required": {
         "type": "boolean",
         "mutable": false,
@@ -169,6 +188,24 @@ export class Palette {
         "attribute": "required",
         "reflect": true
       },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the current value of the input field is\ninvalid."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "columnCount": {
         "type": "number",
         "mutable": false,

package/dist/collection/components/color-picker/color-picker-palette.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAU,MAAM,YAAY,CAAC;AAGxE;;GAEG;AAMH,MAAM,OAAO,OAAO;;~~IAqER~~,mBAAc,GAAG,GAAG,EAAE;MAC1B,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC1D,CAAC,CAAC;IA0BM,uBAAkB,GAAG,CAAC,MAAc,EAAE,KAAa,EAAE,EAAE;MAC3D,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,CAAC;MAC/C,MAAM,SAAS,GAAG;QACd,MAAM,EAAE,IAAI;QACZ,kBAAkB,EAAE,UAAU;QAC9B,eAAe,EAAE,IAAI,CAAC,iBAAiB,EAAE;OAC5C,CAAC;MAEF,OAAO,CACH,cACI,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,EAAE,mCAAmC,EAAE,MAAM,CAAC,KAAK,EAAE,EAC5D,KAAK,EAAE,MAAM,CAAC,IAAI,EAClB,QAAQ,EAAE,MAAM,CAAC,QAAQ,gBACb,KAAK,EACjB,GAAG,EAAE,KAAK,EACV,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,KAAK,CAAC,GAC/C,CACL,CAAC;IACN,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;MAClD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEM,sBAAiB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,KAAiB,EAAE,EAAE;MACjE,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;MACnD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC,CAAC~~;;;;;;;;EAnFK~~,MAAM;IACT,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpE,OAAO;MACH,WACI,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAE;UACH,6BAA6B,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE;SAC5D,IAEA,IAAI,CAAC,cAAc,EAAE,CACpB;MACN,WAAK,KAAK,EAAC,mBAAmB;QAC1B,yBACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,~~GACzB~~;QACF,WAAK,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,UAAU,GAAI,CACrD;KACT,CAAC;EACN,CAAC;EAMO,UAAU;IACd,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE;MAC1B,OAAO,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QACtC,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO;UACH,IAAI,EAAE,UAAU,CAAC,IAAI,IAAI,UAAU,CAAC,KAAK;UACzC,KAAK,EAAE,UAAU,CAAC,KAAK;UACvB,QAAQ,EAAE,UAAU,CAAC,QAAQ;SAChC,CAAC;MACN,CAAC,CAAC,CAAC;KACN;IAED,6DAA6D;IAC7D,yDAAyD;IACzD,yCAAyC;IACzC,MAAM,QAAQ,GAAa,EAAE,CAAC;IAC9B,KAAK,MAAM,CAAC,IAAI,YAAY,EAAE;MAC1B,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE;QACxB,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;OACzC;KACJ;IACD,OAAO,QAAQ,CAAC;EACpB,CAAC;EAkCO,cAAc,CAClB,KAAiC;IAEjC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;MAC3B,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;KAC3B;IACD,OAAO,KAAK,CAAC;EACjB,CAAC;EAEO,iBAAiB;;IACrB,OAAO,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,IAAG,CAAC,CAAC;EACpC,CAAC;EAEO,cAAc;IAClB,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;MACtB,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;IAED,yDAAyD;IACzD,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE;MAC3B,OAAO,EAAE,CAAC;KACb;IAED,0DAA0D;IAC1D,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAClC,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;EACnD,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACJ","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, createSwatch, Swatch } from './swatches';\nimport type { CustomPalette, CustomColorSwatch } from './color-picker.types';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: { delegatesFocus: true },\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /\n Color value that is manually typed by the user\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Defines the number of columns in the color swatch grid.\n * If not provided, it will default to the number of colors in the palette.\n /\n @Prop({ reflect: true })\n public columnCount?: number;\n\n /\n Custom color palette to use instead of Lime palette. Internal prop passed from parent.\n /\n @Prop()\n public palette?: CustomPalette;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div\n class=\"color-picker-palette\"\n style={{\n '--color-picker-column-count': `${this.getColumnCount()}`,\n }}\n >\n {this.renderSwatches()}\n </div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return this.getPalette().map(this.renderSwatchButton);\n };\n\n private getPalette(): Swatch[] {\n if (this.usesCustomPalette()) {\n return (this.palette \|\| []).map((entry) => {\n const normalized = this.normalizeEntry(entry);\n return {\n name: normalized.name \|\| normalized.value,\n value: normalized.value,\n disabled: normalized.disabled,\n };\n });\n }\n\n // Order default swatches by brightness first, then by color.\n // This gives a more intuitive CSS grid layout logic, and\n // enables adding the `columnCount` prop.\n const swatches: Swatch[] = [];\n for (const b of brightnesses) {\n for (const color of colors) {\n swatches.push(createSwatch(color, b));\n }\n }\n return swatches;\n }\n\n private renderSwatchButton = (swatch: Swatch, index: number) => {\n const isSelected = this.value === swatch.value;\n const classList = {\n swatch: true,\n 'swatch--selected': isSelected,\n 'custom-swatch': this.usesCustomPalette(),\n };\n\n return (\n <button\n class={classList}\n style={{ '--limel-color-picker-swatch-color': swatch.value }}\n title={swatch.name}\n disabled={swatch.disabled}\n data-index={index}\n key={index}\n onClick={this.handleSwatchClick(swatch.value)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleSwatchClick = (value: string) => (event: MouseEvent) => {\n event.stopPropagation();\n const newValue = this.value === value ? '' : value;\n this.change.emit(newValue);\n };\n\n private normalizeEntry(\n entry: string \| CustomColorSwatch\n ): CustomColorSwatch {\n if (typeof entry === 'string') {\n return { value: entry };\n }\n return entry;\n }\n\n private usesCustomPalette(): boolean {\n return this.palette?.length > 0;\n }\n\n private getColumnCount(): number {\n if (this.columnCount > 0) {\n return this.columnCount;\n }\n\n // Default palette: fixed 20 columns (one per base color)\n if (!this.usesCustomPalette()) {\n return 20;\n }\n\n // Custom palette: span all provided swatches unless empty\n const palette = this.getPalette();\n return palette.length > 0 ? palette.length : 1;\n }\n}\n"]}
1	+ {"version":3,"file":"color-picker-palette.js","sourceRoot":"","sources":["../../../src/components/color-picker/color-picker-palette.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, createSwatch, Swatch } from './swatches';\nimport type { CustomPalette, CustomColorSwatch } from './color-picker.types';\n\n/*\n @private\n /\n@Component({\n tag: 'limel-color-picker-palette',\n shadow: { delegatesFocus: true },\n styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n /\n Color value that is manually typed by the user\n /\n @Prop({ reflect: true })\n public value: string;\n\n /\n Label of the input field\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Helper text of the input field\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n The placeholder text shown inside the input field,\n * when the field is focused and empty.\n /\n @Prop({ reflect: true })\n public placeholder: string;\n\n /\n Set to `true` if a value is required\n /\n @Prop({ reflect: true })\n public required: boolean;\n\n /\n Set to `true` to indicate that the current value of the input field is\n * invalid.\n /\n @Prop({ reflect: true })\n public invalid = false;\n\n /\n Defines the number of columns in the color swatch grid.\n * If not provided, it will default to the number of colors in the palette.\n /\n @Prop({ reflect: true })\n public columnCount?: number;\n\n /\n Custom color palette to use instead of Lime palette. Internal prop passed from parent.\n /\n @Prop()\n public palette?: CustomPalette;\n\n /\n Emits chosen value to the parent component\n */\n @Event()\n public change: EventEmitter<string>;\n\n public render() {\n const background = this.value ? { '--background': this.value } : {};\n\n return [\n <div\n class=\"color-picker-palette\"\n style={{\n '--color-picker-column-count': `${this.getColumnCount()}`,\n }}\n >\n {this.renderSwatches()}\n </div>,\n <div class=\"chosen-color-name\">\n <limel-input-field\n label={this.label}\n helperText={this.helperText}\n value={this.value}\n onChange={this.handleChange}\n required={this.required}\n invalid={this.invalid}\n placeholder={this.placeholder}\n />\n <div class=\"chosen-color-preview\" style={background} />\n </div>,\n ];\n }\n\n private renderSwatches = () => {\n return this.getPalette().map(this.renderSwatchButton);\n };\n\n private getPalette(): Swatch[] {\n if (this.usesCustomPalette()) {\n return (this.palette \|\| []).map((entry) => {\n const normalized = this.normalizeEntry(entry);\n return {\n name: normalized.name \|\| normalized.value,\n value: normalized.value,\n disabled: normalized.disabled,\n };\n });\n }\n\n // Order default swatches by brightness first, then by color.\n // This gives a more intuitive CSS grid layout logic, and\n // enables adding the `columnCount` prop.\n const swatches: Swatch[] = [];\n for (const b of brightnesses) {\n for (const color of colors) {\n swatches.push(createSwatch(color, b));\n }\n }\n return swatches;\n }\n\n private renderSwatchButton = (swatch: Swatch, index: number) => {\n const isSelected = this.value === swatch.value;\n const classList = {\n swatch: true,\n 'swatch--selected': isSelected,\n 'custom-swatch': this.usesCustomPalette(),\n };\n\n return (\n <button\n class={classList}\n style={{ '--limel-color-picker-swatch-color': swatch.value }}\n title={swatch.name}\n disabled={swatch.disabled}\n data-index={index}\n key={index}\n onClick={this.handleSwatchClick(swatch.value)}\n />\n );\n };\n\n private handleChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n this.change.emit(event.detail);\n };\n\n private handleSwatchClick = (value: string) => (event: MouseEvent) => {\n event.stopPropagation();\n const newValue = this.value === value ? '' : value;\n this.change.emit(newValue);\n };\n\n private normalizeEntry(\n entry: string \| CustomColorSwatch\n ): CustomColorSwatch {\n if (typeof entry === 'string') {\n return { value: entry };\n }\n return entry;\n }\n\n private usesCustomPalette(): boolean {\n return this.palette?.length > 0;\n }\n\n private getColumnCount(): number {\n if (this.columnCount > 0) {\n return this.columnCount;\n }\n\n // Default palette: fixed 20 columns (one per base color)\n if (!this.usesCustomPalette()) {\n return 20;\n }\n\n // Custom palette: span all provided swatches unless empty\n const palette = this.getPalette();\n return palette.length > 0 ? palette.length : 1;\n }\n}\n"]}

package/dist/collection/components/color-picker/color-picker.css CHANGED Viewed

@@ -198,6 +198,8 @@ button[slot=trigger]:after {
 :host([readonly]:not([readonly=false])) limel-input-field {
   transform: translateX(calc( 2.5rem / 4 * -1 )) translateY(calc( 2.5rem / 4 ));
 }
-:host([readonly]:not([readonly=false])) button[slot=trigger] {
+:host([readonly]:not([readonly=false])) button[slot=trigger],
+:host([disabled]:not([disabled=false])) button[slot=trigger] {
   border: 1px solid rgba(var(--contrast-700), 0.65);
 }

package/dist/collection/components/color-picker/color-picker.js CHANGED Viewed

@@ -26,11 +26,11 @@ export class ColorPicker {
       if (this.readonly) {
         return this.renderPickerTrigger();
       }
-      return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, onChange: this.handleChange, required: this.required, palette: this.palette, columnCount: this.paletteColumnCount })));
+      return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, placeholder: this.placeholder, invalid: this.invalid, onChange: this.handleChange, required: this.required, palette: this.palette, columnCount: this.paletteColumnCount })));
     };
     this.renderPickerTrigger = () => {
       const background = this.value ? { '--background': this.value } : {};
-      return (h("button", { slot: "trigger", style: background, role: "button", onClick: this.openPopover, id: "tooltip-button", disabled: this.readonly }));
+      return (h("button", { slot: "trigger", style: background, role: "button", onClick: this.openPopover, id: "tooltip-button", disabled: this.readonly || this.disabled }));
     };
     this.setColorPickerPaletteElement = (element) => {
       this.contentElement = element;
@@ -53,7 +53,10 @@ export class ColorPicker {
     this.helperText = undefined;
     this.tooltipLabel = undefined;
     this.required = undefined;
-    this.readonly = undefined;
+    this.disabled = false;
+    this.readonly = false;
+    this.invalid = false;
+    this.placeholder = undefined;
     this.palette = undefined;
     this.paletteColumnCount = undefined;
     this.isOpen = false;
@@ -66,7 +69,7 @@ export class ColorPicker {
     }
   }
   render() {
-    return (h(Host, null, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly })));
+    return (h(Host, null, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled, invalid: this.invalid, placeholder: this.placeholder })));
   }
   static get is() { return "limel-color-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -167,6 +170,24 @@ export class ColorPicker {
         "attribute": "required",
         "reflect": true
       },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to disable the field.\nUse `disabled` to indicate that the field can normally be interacted\nwith, but is currently disabled. This tells the user that if certain\nrequirements are met, the field may become enabled again."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
       "readonly": {
         "type": "boolean",
         "mutable": false,
@@ -179,9 +200,45 @@ export class ColorPicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set to `true` if a value is readonly. This makes the component un-interactive."
+          "text": "Set to `true` to make the field read-only.\nUse `readonly` when the field is only there to present the data it holds,\nand will not become possible for the current user to edit."
         },
         "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to `true` to indicate that the current value of the input field is\ninvalid."
+        },
+        "attribute": "invalid",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder text shown inside the input field,\nwhen the field is focused and empty."
+        },
+        "attribute": "placeholder",
         "reflect": true
       },
       "palette": {