@limetech/lime-elements 38.21.2 → 38.21.4

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [38.21.4](https://github.com/Lundalogik/lime-elements/compare/v38.21.3...v38.21.4) (2025-08-18)
+
+
+### Bug Fixes
+
+
+* **checkbox:** improve accessibility by better handling indeterminate state ([7b8308b](https://github.com/Lundalogik/lime-elements/commit/7b8308b0b3c70547ce5d8bc208dd16db52486176))
+* **checkbox:** prevent early lifecycle crashes ([710a954](https://github.com/Lundalogik/lime-elements/commit/710a954164cf6a9fafab0619e59cb4534fe97d20))
+
+## [38.21.3](https://github.com/Lundalogik/lime-elements/compare/v38.21.2...v38.21.3) (2025-08-14)
+
+
+### Bug Fixes
+
+
+* **input-field:** ensure font is correctly rendered ([31961cb](https://github.com/Lundalogik/lime-elements/commit/31961cb9dbbf9f837b793a1c3211fe62cd2a236f))
+
 ## [38.21.2](https://github.com/Lundalogik/lime-elements/compare/v38.21.1...v38.21.2) (2025-08-08)
 
 

package/dist/cjs/{checkbox.template-882253c2.js → checkbox.template-f624966b.js}

@@ -19,11 +19,17 @@ const CheckboxTemplate = (props) => {
   }
   if (props.indeterminate) {
     inputProps['data-indeterminate'] = 'true';
+    inputProps['aria-checked'] = 'mixed';
+  }
+  else {
+    inputProps['data-indeterminate'] = 'false';
+    if (typeof props.checked === 'boolean') {
+      inputProps['aria-checked'] = String(props.checked);
+    }
   }
   return [
     index.h("div", { class: {
-        'mdc-form-field': true,
-        'mdc-checkbox': true,
+        'boolean-input': true,
         checkbox: true,
         checked: props.checked,
         invalid: props.invalid,
@@ -32,12 +38,11 @@ const CheckboxTemplate = (props) => {
         indeterminate: props.indeterminate,
         readonly: props.readonly,
       } },
-      index.h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control" // required by MDC to work
-        , id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange, "aria-controls": props.helperTextId, "aria-describedby": props.helperTextId }, inputProps)),
+      index.h("input", Object.assign({ type: "checkbox", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange, "aria-controls": props.helperTextId, "aria-describedby": props.helperTextId }, inputProps)),
       index.h("div", { class: "box" },
-        index.h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" },
+        index.h("svg", { class: "check-mark", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" },
           index.h("path", { fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))),
-      index.h("label", { htmlFor: props.id }, props.label)),
+      index.h("label", { class: "boolean-input-label", htmlFor: props.id }, props.label)),
     index.h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
   ];
 };
@@ -50,4 +55,4 @@ const HelperText = (props) => {
 
 exports.CheckboxTemplate = CheckboxTemplate;
 
-//# sourceMappingURL=checkbox.template-882253c2.js.map
+//# sourceMappingURL=checkbox.template-f624966b.js.map

package/dist/cjs/checkbox.template-f624966b.js.map

@@ -0,0 +1 @@
+{"file":"checkbox.template-f624966b.js","mappings":";;;;MAmBa,gBAAgB,GAA+C,CACxE,KAAK;EAEL,MAAM,UAAU,GAAG,EAAE,CAAC;EACtB,IAAI,KAAK,CAAC,QAAQ,EAAE;IAChB,IAAI,IAAI,GAAkB,OAAO,CAAC;IAClC,IAAI,KAAK,CAAC,OAAO,EAAE;MACf,IAAI,GAAG;QACH,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,6DAA6D;OACvE,CAAC;KACL;IAED,OAAO;MACHA,iCACI,KAAK,EAAE,KAAK,CAAC,OAAO,mBACL,KAAK,CAAC,YAAY,EACjC,YAAY,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAC/C,MAAM,EAAE,KAAK,CAAC,cAAc,GAC9B;MACFA,QAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;KACL,CAAC;GACL;EAED,IAAI,KAAK,CAAC,aAAa,EAAE;IACrB,UAAU,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;IAC1C,UAAU,CAAC,cAAc,CAAC,GAAG,OAAO,CAAC;GACxC;OAAM;IACH,UAAU,CAAC,oBAAoB,CAAC,GAAG,OAAO,CAAC;IAC3C,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE;MACpC,UAAU,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;KACtD;GACJ;EAED,OAAO;IACHA,iBACI,KAAK,EAAE;QACH,eAAe,EAAE,IAAI;QACrB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,OAAO,EAAE,KAAK,CAAC,OAAO;QACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,aAAa,EAAE,KAAK,CAAC,aAAa;QAClC,QAAQ,EAAE,KAAK,CAAC,QAAQ;OAC3B;MAEDA,iCACI,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAC1C,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACT,KAAK,CAAC,YAAY,sBACf,KAAK,CAAC,YAAY,IAChC,UAAU,EAChB;MACFA,iBAAK,KAAK,EAAC,KAAK;QACZA,iBACI,KAAK,EAAC,YAAY,EAClB,OAAO,EAAC,WAAW,iBACP,MAAM,EAClB,SAAS,EAAC,OAAO;UAEjBA,kBAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,kCAAkC,GAAG,CACvD,CACJ;MACNA,mBAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,IAC/C,KAAK,CAAC,KAAK,CACR,CACN;IACNA,QAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;GACL,CAAC;AACN,EAAE;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK;EACP,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,QACIA,+BACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,EACJ;AACN,CAAC;;;;","names":["h"],"sources":["./src/components/checkbox/checkbox.template.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\ninterface CheckboxTemplateProps {\n    disabled?: boolean;\n    id: string;\n    checked?: boolean;\n    readonly?: boolean;\n    indeterminate?: boolean;\n    required?: boolean;\n    invalid?: boolean;\n    onChange?: (event: Event) => void;\n    label?: string;\n    helperText?: string;\n    helperTextId?: string;\n    readonlyLabels?: Array<Label<boolean>>;\n}\n\nexport const CheckboxTemplate: FunctionalComponent<CheckboxTemplateProps> = (\n    props\n) => {\n    const inputProps = {};\n    if (props.readonly) {\n        let icon: string | Icon = 'minus';\n        if (props.checked) {\n            icon = {\n                name: 'ok',\n                color: 'var(--lime-primary-color, var(--limel-theme-primary-color))',\n            };\n        }\n\n        return [\n            <limel-dynamic-label\n                value={props.checked}\n                aria-controls={props.helperTextId}\n                defaultLabel={{ text: props.label, icon: icon }}\n                labels={props.readonlyLabels}\n            />,\n            <HelperText\n                text={props.helperText}\n                helperTextId={props.helperTextId}\n                invalid={props.invalid}\n            />,\n        ];\n    }\n\n    if (props.indeterminate) {\n        inputProps['data-indeterminate'] = 'true';\n        inputProps['aria-checked'] = 'mixed';\n    } else {\n        inputProps['data-indeterminate'] = 'false';\n        if (typeof props.checked === 'boolean') {\n            inputProps['aria-checked'] = String(props.checked);\n        }\n    }\n\n    return [\n        <div\n            class={{\n                'boolean-input': true,\n                checkbox: true,\n                checked: props.checked,\n                invalid: props.invalid,\n                disabled: props.disabled,\n                required: props.required,\n                indeterminate: props.indeterminate,\n                readonly: props.readonly,\n            }}\n        >\n            <input\n                type=\"checkbox\"\n                id={props.id}\n                checked={props.checked}\n                disabled={props.disabled || props.readonly}\n                required={props.required}\n                onChange={props.onChange}\n                aria-controls={props.helperTextId}\n                aria-describedby={props.helperTextId}\n                {...inputProps}\n            />\n            <div class=\"box\">\n                <svg\n                    class=\"check-mark\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                >\n                    <path fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n            </div>\n            <label class=\"boolean-input-label\" htmlFor={props.id}>\n                {props.label}\n            </label>\n        </div>,\n        <HelperText\n            text={props.helperText}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />,\n    ];\n};\n\nconst HelperText: FunctionalComponent<{\n    helperTextId: string;\n    text: string;\n    invalid?: boolean;\n}> = (props) => {\n    if (typeof props.text !== 'string') {\n        return;\n    }\n\n    return (\n        <limel-helper-line\n            helperText={props.text.trim()}\n            helperTextId={props.helperTextId}\n            invalid={props.invalid}\n        />\n    );\n};\n"],"version":3}