@limetech/lime-elements 38.21.2 → 38.21.3

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

@@ -73,20 +73,15 @@
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
-/**
-* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.
-*/
-:host(limel-checkbox) {
-  min-height: var(--limel-checkbox-min-height, 2.5rem);
-}
-
 *,
 *:before,
 *:after {
   box-sizing: border-box;
 }
 
-.checkbox {
+.boolean-input {
+  --limel-boolean-input-box-size: 1.25rem;
+  --limel-boolean-input-gap-size: 0.5rem;
   position: relative;
   isolation: isolate;
   display: flex;
@@ -94,8 +89,8 @@
   min-height: var(--limel-checkbox-min-height, 2.5rem);
   width: 100%;
 }
-
-input[type=checkbox] {
+.boolean-input input[type=checkbox],
+.boolean-input input[type=radio] {
   position: absolute;
   width: 0;
   height: 0;
@@ -111,34 +106,34 @@ input[type=checkbox] {
   appearance: none;
 }
 
-label {
-  min-width: 1.25rem;
-  min-height: 1.25rem;
+label.boolean-input-label {
+  min-width: var(--limel-boolean-input-box-size);
+  min-height: var(--limel-boolean-input-box-size);
   padding-top: 0.125rem;
   cursor: pointer;
   position: relative;
   width: 100%;
   font-size: var(--limel-theme-default-small-font-size);
   color: var(--limel-theme-text-primary-on-background-color);
-  padding-left: 1.75rem;
+  padding-left: calc(var(--limel-boolean-input-box-size) + var(--limel-boolean-input-gap-size));
 }
-.disabled:not([readonly]):not([readonly=true]) label {
+.disabled:not([readonly]):not([readonly=true]) label.boolean-input-label {
   cursor: not-allowed;
   color: var(--limel-theme-text-disabled-color);
 }
-.required label:after {
+.required label.boolean-input-label:after {
   margin-left: 0.0625rem;
   content: "*";
 }
-.invalid:not(.readonly) label {
+.invalid:not(.readonly) label.boolean-input-label {
   color: var(--limel-theme-error-text-color);
 }
-:host(limel-checkbox.hide-label) label, .hide-label label {
+:host(limel-checkbox.hide-label) label.boolean-input-label, .hide-label label.boolean-input-label {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   opacity: 0;
-  width: 1.25rem;
+  width: var(--limel-boolean-input-box-size);
 }
 
 .box {
@@ -147,26 +142,26 @@ label {
   transition: border-color 0.4s ease 0.2s, background-color 0.2s ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;
   display: inline-block;
   vertical-align: middle;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-right: 0.5rem;
-  border-radius: 0.25rem;
+  width: var(--limel-boolean-input-box-size);
+  height: var(--limel-boolean-input-box-size);
+  margin-right: var(--limel-boolean-input-gap-size);
+  border-radius: var(--limel-boolean-input-box-border-radius);
   border: 0.125rem solid;
   border-color: var(--checkbox-unchecked-border-color, rgb(var(--contrast-900)));
   background-color: var(--limel-checkbox-background-color, rgb(var(--contrast-300)));
 }
-.checked .box, .checkbox:has(input[type=checkbox]:checked) .box {
+.checked .box, .boolean-input:has(input[type=checkbox]:checked) .box, .boolean-input:has(input[type=radio]:checked) .box {
   background-color: var(--lime-primary-color, var(--limel-theme-primary-color));
   border-color: var(--lime-primary-color, var(--limel-theme-primary-color));
 }
 .disabled .box {
   opacity: 0.4;
 }
-.checkbox:not(.disabled):has(label:hover) .box {
+.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box {
   will-change: box-shadow;
   box-shadow: var(--button-shadow-hovered);
 }
-.checkbox:not(.disabled):has(label:active) .box {
+.boolean-input:not(.disabled):has(label.boolean-input-label:active) .box {
   will-change: box-shadow;
   box-shadow: var(--button-shadow-pressed);
 }
@@ -177,34 +172,74 @@ label {
   inset: -0.1875rem;
   border-radius: inherit;
 }
-.checkbox:has(input[type=checkbox]:focus-visible) .box:before {
+.boolean-input:has(input[type=checkbox]:focus-visible) .box:before, .boolean-input:has(input[type=radio]:focus-visible) .box:before {
   will-change: box-shadow;
   box-shadow: var(--shadow-depth-8-focused);
 }
 .box:after {
-  transition: opacity 0.2s ease, width 0.4s ease;
+  transition: opacity 0.2s ease, width 0.4s ease, box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87), transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);
   content: "";
   position: absolute;
   inset: 0;
   margin: auto;
-  height: 0.125rem;
-  width: 0.25rem;
   border-radius: 1rem;
   opacity: 0;
   background-color: rgb(var(--color-white));
 }
+.boolean-input:not(.disabled):has(label.boolean-input-label:hover) .box:after {
+  will-change: opacity, box-shadow, transform, width;
+}
+
+/**
+* :::important
+* The `CheckboxTemplate` can be imported and used in the HTML of
+* other components, to render a non-functional and decorative checkbox in
+* their UI. An example of this is the list component.
+* This means the content of `CheckboxTemplate` will become a part of the
+* consumer's DOM structure.
+*
+* Additionally, the consumer components' also need to import the current `.scss`
+* file into their own styles file, for the checkbox to be rendered correctly!
+* This means, if the styles in this file are not "specific" enough,
+* there is a risk that the consumer component's styles are affected by
+* our styles here.
+*
+* For instance if the consumer has a `<label>` or `<svg>` element,
+* it might unintentionally inherit styles from the checkbox; unless we
+* make the such styles more specific here.
+*
+* Naturally, we cannot mitigate all sorts of potential styling problems.
+* The consumer component should be aware of this issue too.
+* But we can ensure that our styles here both make sense,
+* are readable, and are as specific as possible to avoid unintended side effects.
+* :::
+*/
+/**
+* @prop --checkbox-unchecked-border-color: Affects the border color of the default state of the checkbox (when it is not checked). Defaults to `--contrast-900`.
+*/
+:host(limel-checkbox) {
+  min-height: var(--limel-checkbox-min-height, 2.5rem);
+}
+
+.box:after {
+  height: 0.125rem;
+  width: 0.25rem;
+}
 .indeterminate .box:after {
   opacity: 1;
-  width: 0.75rem;
+  width: calc(var(--limel-boolean-input-box-size) - 0.5rem);
 }
 
-svg {
+.checkbox {
+  --limel-boolean-input-box-border-radius: 0.25rem;
+}
+.checkbox svg.check-mark {
   position: absolute;
   z-index: 1;
   inset: 0;
   transform: translate3d(-0.125rem, -0.125rem, 0);
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--limel-boolean-input-box-size);
+  height: var(--limel-boolean-input-box-size);
   padding: 0.25rem;
   color: rgb(var(--color-white));
   opacity: 0;
@@ -213,15 +248,15 @@ svg {
   stroke-linecap: round;
   stroke-linejoin: round;
 }
-svg path {
+.checkbox svg.check-mark path {
   stroke-dashoffset: 29.7833;
   stroke-dasharray: 29.7833;
   transition: stroke-dashoffset 180ms cubic-bezier(0.4, 0, 0.6, 1);
 }
-.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg {
+.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark {
   opacity: 1;
 }
-.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg path {
+.checkbox:not(.indeterminate):has(input[type=checkbox]:checked) svg.check-mark path {
   stroke-dashoffset: 0;
 }
 

package/dist/collection/components/checkbox/checkbox.template.js

@@ -21,6 +21,7 @@ export const CheckboxTemplate = (props) => {
     h("div", { class: {
         'mdc-form-field': true,
         'mdc-checkbox': true,
+        'boolean-input': true,
         checkbox: true,
         checked: props.checked,
         invalid: props.invalid,
@@ -30,7 +31,7 @@ export const CheckboxTemplate = (props) => {
         readonly: props.readonly,
       } }, 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)), h("div", { class: "box" }, h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, h("path", { fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))), h("label", { htmlFor: props.id }, props.label)),
+      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)), h("div", { class: "box" }, h("svg", { class: "check-mark", viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false" }, h("path", { fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))), h("label", { class: "boolean-input-label", htmlFor: props.id }, props.label)),
     h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
   ];
 };

package/dist/collection/components/checkbox/checkbox.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAmBvD,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CACxE,KAAK,EACP,EAAE;EACA,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;MACH,2BACI,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;MACF,EAAC,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;GAC7C;EAED,OAAO;IACH,WACI,KAAK,EAAE;QACH,gBAAgB,EAAE,IAAI;QACtB,cAAc,EAAE,IAAI;QACpB,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;MAED,2BACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,CAAC,0BAA0B;UAC/D,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;MACF,WAAK,KAAK,EAAC,KAAK;QACZ,WAAK,OAAO,EAAC,WAAW,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO;UACzD,YAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,kCAAkC,GAAG,CACvD,CACJ;MACN,aAAO,OAAO,EAAE,KAAK,CAAC,EAAE,IAAG,KAAK,CAAC,KAAK,CAAS,CAC7C;IACN,EAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;GACL,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK,EAAE,EAAE;EACX,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAO,CACH,yBACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,CACL,CAAC;AACN,CAAC,CAAC","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    }\n\n    return [\n        <div\n            class={{\n                'mdc-form-field': true, // required by MDC to work\n                'mdc-checkbox': true, // required by MDC to work\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                class=\"mdc-checkbox__native-control\" // required by MDC to work\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 viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">\n                    <path fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\n                </svg>\n            </div>\n            <label htmlFor={props.id}>{props.label}</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,"file":"checkbox.template.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAmBvD,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CACxE,KAAK,EACP,EAAE;EACA,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;MACH,2BACI,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;MACF,EAAC,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;GAC7C;EAED,OAAO;IACH,WACI,KAAK,EAAE;QACH,gBAAgB,EAAE,IAAI;QACtB,cAAc,EAAE,IAAI;QACpB,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;MAED,2BACI,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,8BAA8B,CAAC,0BAA0B;UAC/D,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;MACF,WAAK,KAAK,EAAC,KAAK;QACZ,WACI,KAAK,EAAC,YAAY,EAClB,OAAO,EAAC,WAAW,iBACP,MAAM,EAClB,SAAS,EAAC,OAAO;UAEjB,YAAM,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,kCAAkC,GAAG,CACvD,CACJ;MACN,aAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE,IAC/C,KAAK,CAAC,KAAK,CACR,CACN;IACN,EAAC,UAAU,IACP,IAAI,EAAE,KAAK,CAAC,UAAU,EACtB,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB;GACL,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK,EAAE,EAAE;EACX,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,OAAO,CACH,yBACI,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAC7B,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,OAAO,EAAE,KAAK,CAAC,OAAO,GACxB,CACL,CAAC;AACN,CAAC,CAAC","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    }\n\n    return [\n        <div\n            class={{\n                'mdc-form-field': true, // required by MDC to work\n                'mdc-checkbox': true, // required by MDC to work\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                class=\"mdc-checkbox__native-control\" // required by MDC to work\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"]}

package/dist/collection/components/chip-set/chip-set.css

@@ -1628,6 +1628,8 @@
 }
 .mdc-text-field .mdc-text-field__input::placeholder {
   color: rgb(var(--contrast-900)) !important;
+  font-size: var(--limel-theme-default-font-size) !important;
+  font-family: inherit !important;
 }
 .mdc-text-field .mdc-text-field__input.hidden {
   transition: all 0s;

package/dist/collection/components/input-field/input-field.css

@@ -107,6 +107,8 @@
 }
 :host([type=textarea]) .mdc-text-field.mdc-text-field--textarea .mdc-text-field__input::placeholder {
   color: rgb(var(--contrast-900)) !important;
+  font-size: var(--limel-theme-default-font-size) !important;
+  font-family: inherit !important;
 }
 
 :host(limel-input-field:focus),
@@ -1700,6 +1702,7 @@
   color: rgba(var(--contrast-1400), 1);
   font-size: var(--limel-theme-default-font-size);
   font-weight: 400;
+  font-family: inherit;
   letter-spacing: 0.009375em;
 }
 .mdc-text-field--disabled .lime-looks-like-input-value {
@@ -1773,6 +1776,10 @@ limel-notched-outline[has-value] .mdc-text-field__affix, limel-notched-outline:f
   cursor: pointer;
 }
 
+.mdc-text-field__input {
+  font-size: var(--limel-theme-default-font-size) !important;
+  font-family: inherit !important;
+}
 .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
   color: rgba(var(--contrast-1400), 1);
 }
@@ -1782,6 +1789,8 @@ limel-notched-outline[has-value] .mdc-text-field__affix, limel-notched-outline:f
 
 input.mdc-text-field__input::placeholder {
   color: rgb(var(--contrast-900)) !important;
+  font-size: var(--limel-theme-default-font-size) !important;
+  font-family: inherit !important;
 }
 input.mdc-text-field__input::-webkit-search-cancel-button {
   transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);