@limetech/lime-elements 38.21.2 → 38.21.3

package/dist/collection/components/notched-outline/notched-outline.css

@@ -172,6 +172,7 @@ limel-notched-outline {
   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 .limel-notched-outline--empty-readonly-value .lime-looks-like-input-value {

package/dist/collection/style/internal/boolean-input.scss

@@ -0,0 +1,178 @@
+@use '../mixins';
+
+*,
+*:before,
+*:after {
+    box-sizing: border-box;
+}
+
+.boolean-input {
+    --limel-boolean-input-box-size: 1.25rem;
+    --limel-boolean-input-gap-size: 0.5rem;
+    position: relative;
+    isolation: isolate;
+
+    display: flex;
+    align-items: center;
+
+    min-height: var(
+        --limel-checkbox-min-height,
+        2.5rem
+    ); // helps align with other fields in the form, or within table rows
+    width: 100%;
+
+    input[type='checkbox'],
+    input[type='radio'] {
+        // Hide the native checkbox
+        @include mixins.visually-hidden;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+    }
+}
+
+label.boolean-input-label {
+    // Ensure the label is always clickable, even when empty
+    min-width: var(--limel-boolean-input-box-size);
+    min-height: var(--limel-boolean-input-box-size);
+    padding-top: 0.125rem;
+    // ====
+
+    cursor: pointer;
+    position: relative;
+    width: 100%;
+
+    font-size: var(--limel-theme-default-small-font-size);
+    color: var(--limel-theme-text-primary-on-background-color);
+
+    padding-left: calc(
+        var(--limel-boolean-input-box-size) +
+            var(--limel-boolean-input-gap-size)
+    );
+
+    .disabled:not([readonly]):not([readonly='true']) & {
+        cursor: not-allowed;
+        color: var(--limel-theme-text-disabled-color);
+    }
+
+    .required & {
+        &:after {
+            margin-left: 0.0625rem;
+            content: '*';
+        }
+    }
+
+    .invalid:not(.readonly) & {
+        color: var(--limel-theme-error-text-color);
+    }
+
+    :host(limel-checkbox.hide-label) &,
+    .hide-label & {
+        // this helper class of `hide-label` can be added for example to the `host` element,
+        // or if the `CheckboxTemplate` is imported to other components, the class can be
+        // added to the `checkbox` element itself
+        // and be used internally by other components such as `limel-table`
+        // to hide the `<label>`, while still keeping the checkbox
+        // both clickable for the users, and accessible for screen readers
+        @include mixins.truncate-text();
+        opacity: 0;
+        width: var(--limel-boolean-input-box-size);
+    }
+}
+
+.box {
+    position: absolute; // since `label` is the clickable part,
+    // and thus needs to
+    // stretch below the checkbox
+    pointer-events: none;
+
+    transition:
+        border-color 0.4s ease 0.2s,
+        background-color 0.2s ease,
+        box-shadow var(--limel-clickable-transform-speed, 0.4s) ease;
+
+    display: inline-block;
+    vertical-align: middle;
+
+    width: var(--limel-boolean-input-box-size);
+    height: var(--limel-boolean-input-box-size);
+
+    margin-right: var(--limel-boolean-input-gap-size);
+    border-radius: var(--limel-boolean-input-box-border-radius);
+    border: 0.125rem solid;
+
+    border-color: var(
+        --checkbox-unchecked-border-color,
+        rgb(var(--contrast-900))
+    );
+    background-color: var(
+        --limel-checkbox-background-color,
+        rgb(var(--contrast-300))
+    );
+
+    .checked &,
+    .boolean-input:has(input[type='checkbox']:checked) &,
+    .boolean-input:has(input[type='radio']:checked) & {
+        background-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+        border-color: var(
+            --lime-primary-color,
+            var(--limel-theme-primary-color)
+        );
+    }
+
+    .disabled & {
+        opacity: 0.4;
+    }
+
+    .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & {
+        will-change: box-shadow;
+        box-shadow: var(--button-shadow-hovered);
+    }
+
+    .boolean-input:not(.disabled):has(label.boolean-input-label:active) & {
+        will-change: box-shadow;
+        box-shadow: var(--button-shadow-pressed);
+    }
+
+    &:before {
+        // For indicating the hover or focused state
+        transition: mixins.$clickable-normal-state-transitions;
+        content: '';
+        position: absolute;
+        inset: -0.1875rem; // 3px
+        border-radius: inherit;
+
+        .boolean-input:has(input[type='checkbox']:focus-visible) &,
+        .boolean-input:has(input[type='radio']:focus-visible) & {
+            will-change: box-shadow;
+
+            box-shadow: var(--shadow-depth-8-focused);
+        }
+    }
+
+    &:after {
+        // For indicating the indeterminate state in checkbox
+        // For indicating the the checked state in radio
+        transition:
+            opacity 0.2s ease,
+            width 0.4s ease,
+            box-shadow 0.6s cubic-bezier(0.68, -0.55, 0, 1.87),
+            transform 0.6s cubic-bezier(0.68, -0.55, 0, 1.87);
+        content: '';
+        position: absolute;
+        inset: 0;
+        margin: auto;
+
+        border-radius: 1rem;
+        opacity: 0;
+
+        background-color: rgb(var(--color-white));
+
+        .boolean-input:not(.disabled):has(label.boolean-input-label:hover) & {
+            will-change: opacity, box-shadow, transform, width;
+        }
+    }
+}

package/dist/collection/style/internal/shared_input-select-picker.scss

@@ -28,29 +28,12 @@ $input-text-color-disabled: rgba(var(--contrast-1400), 0.5);
 $helper-text-color: $label-color;
 
 $height-of-mdc-text-field: 2.5rem; //This is written directly in `rem`, becurse the variable used to calculate things elsewhere
-$height-of-mdc-helper-text-block: 0.9375rem;
-
-$mdc-chip-background-color: rgb(var(--contrast-100));
-
-$height-of-helper-text-pseudo-before: 0.75rem; // There is strange a pseudo before in MD's helper texts, which sets their distance to the element on top of it. Originally in MD, this value is 1rem. In Lime Elements, we need to make it less due to our layout needs.
-$cropped-label-hack--font-size: var(--limel-theme-default-font-size); //14px
 
 @mixin looks-disabled() {
     cursor: not-allowed;
     opacity: 0.4;
 }
 
-@mixin looks-like-input-label() {
-    line-height: functions.pxToRem(28);
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-
-    font-size: var(--limel-theme-default-font-size);
-    font-weight: 400;
-    letter-spacing: 0.009375em;
-    color: $label-color;
-}
-
 @mixin looks-like-input-value() {
     line-height: functions.pxToRem(28);
     -moz-osx-font-smoothing: grayscale;
@@ -59,157 +42,15 @@ $cropped-label-hack--font-size: var(--limel-theme-default-font-size); //14px
     color: $input-text-color;
     font-size: var(--limel-theme-default-font-size);
     font-weight: 400;
+    font-family: inherit;
     letter-spacing: 0.009375em;
 }
 
-@mixin cropped-label-hack {
-    // Some font size applied to `label--float-above` causes the labels to get cut off
-    // when an empty field gets focused
-    .mdc-text-field--outlined.mdc-text-field--with-leading-icon.mdc-notched-outline--upgraded,
-    .mdc-text-field--outlined.mdc-text-field--with-leading-icon
-        .mdc-notched-outline--upgraded,
-    .mdc-text-field--outlined.mdc-text-field--textarea.mdc-notched-outline--upgraded,
-    .mdc-text-field--outlined.mdc-text-field--textarea
-        .mdc-notched-outline--upgraded,
-    .mdc-text-field--outlined.mdc-notched-outline--upgraded,
-    .mdc-text-field--outlined .mdc-notched-outline--upgraded {
-        .mdc-floating-label--float-above {
-            //font-size: 1rem; This is what we get from MD now, which causes the miscalculations
-            font-size: $cropped-label-hack--font-size;
-            // of course this is `14px` and the other one is `16px`.
-            // Unfortunately MD scales the floating label down, by applying a
-            // `transform` & `scale(0.75)` which is probably why they had to increase
-            // the font-size, to make it more readable.
-            // This is why I don't like this hack.
-        }
-    }
-}
-
 @mixin input-field-placeholder {
     &::placeholder {
         color: $input-placeholder-color !important;
-    }
-}
-
-@mixin floating-label-overrides {
-    .mdc-text-field__input,
-    .mdc-floating-label {
-        // As long as this component is depended on MDC,
-        // we need to force it to be font-agnostic.
-        // When MDC-dependency is removed, this block can also be removed.
-        // However, on removal of MDC-dependency, we should also make sure to check
-        // other font-related styles that might be set by MDC,
-        // such as `letter-spacing` or `font-size`.
-        font-family: inherit;
-    }
-
-    .mdc-text-field {
-        &:not(.mdc-text-field--disabled) {
-            .mdc-floating-label {
-                color: $label-color;
-            }
-            .mdc-text-field__input {
-                color: $input-text-color;
-            }
-        }
-        &.mdc-text-field--disabled {
-            .mdc-floating-label {
-                color: $label-color-disabled;
-            }
-            .mdc-text-field__input {
-                color: $input-text-color-disabled;
-            }
-        }
-    }
-
-    .mdc-floating-label--float-above {
-        transform: translateY(#{functions.pxToRem(-27)}) scale(0.75) !important;
-
-        .mdc-text-field--with-leading-icon & {
-            transform: translateY(#{functions.pxToRem(-25)})
-                translateX(#{functions.pxToRem(-20)}) scale(0.75) !important;
-        }
-    }
-}
-
-@mixin outlined-style-overrides {
-    .mdc-text-field.mdc-text-field--outlined {
-        transition: background-color 0.2s ease;
-        border-radius: functions.pxToRem(4);
-
-        .mdc-notched-outline__leading,
-        .mdc-notched-outline__notch,
-        .mdc-notched-outline__trailing {
-            transition: border-color 0.2s ease;
-        }
-
-        &:not(.mdc-text-field--disabled) {
-            background-color: $background-color-normal;
-
-            &:hover {
-                background-color: $background-color-hovered;
-            }
-        }
-
-        &.mdc-text-field--focused {
-            background-color: $background-color-focused;
-        }
-
-        &.mdc-text-field--disabled {
-            background-color: $background-color-disabled;
-        }
-
-        &:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(
-                .force-invalid
-            ) {
-            .mdc-notched-outline__leading,
-            .mdc-notched-outline__notch,
-            .mdc-notched-outline__trailing {
-                border-color: $lime-text-field-outline-color;
-            }
-
-            &:not(.mdc-text-field--focused):not(.mdc-text-field--invalid):not(
-                    .force-invalid
-                ) {
-                &:hover .mdc-notched-outline {
-                    .mdc-notched-outline__leading,
-                    .mdc-notched-outline__notch,
-                    .mdc-notched-outline__trailing {
-                        border-color: $lime-text-field-outline-color--hovered;
-                    }
-                }
-            }
-
-            &.mdc-text-field--focused {
-                .mdc-notched-outline__leading,
-                .mdc-notched-outline__notch,
-                .mdc-notched-outline__trailing {
-                    border-color: $lime-text-field-outline-color--focused;
-                }
-            }
-        }
-    }
-
-    .mdc-text-field,
-    .mdc-text-field.mdc-text-field--focused {
-        .mdc-notched-outline__leading,
-        .mdc-notched-outline__notch,
-        .mdc-notched-outline__trailing {
-            border-width: 1px;
-        }
-    }
-
-    .mdc-text-field.mdc-text-field--focused.mdc-text-field--outlined {
-        .mdc-notched-outline--notched {
-            .mdc-notched-outline__notch {
-                padding-top: 0;
-            }
-        }
-    }
-
-    .mdc-text-field__icon {
-        color: $input-text-leading-icon-color;
-        flex-shrink: 0;
+        font-size: var(--limel-theme-default-font-size) !important;
+        font-family: inherit !important;
     }
 }
 
@@ -345,12 +186,6 @@ $cropped-label-hack--font-size: var(--limel-theme-default-font-size); //14px
     }
 }
 
-@mixin disabled-overrides {
-    .mdc-text-field--disabled {
-        background-color: transparent;
-    }
-}
-
 @mixin lime-empty-value-for-readonly {
     .lime-empty-value-for-readonly {
         z-index: z-index.$input-field--formatted-value;

package/dist/esm/{checkbox.template-0a54ff6e.js → checkbox.template-04a31caa.js}

@@ -22,6 +22,7 @@ const CheckboxTemplate = (props) => {
     h("div", { class: {
         'mdc-form-field': true,
         'mdc-checkbox': true,
+        'boolean-input': true,
         checkbox: true,
         checked: props.checked,
         invalid: props.invalid,
@@ -33,9 +34,9 @@ const CheckboxTemplate = (props) => {
       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("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", { htmlFor: props.id }, props.label)),
+      h("label", { class: "boolean-input-label", htmlFor: props.id }, props.label)),
     h(HelperText, { text: props.helperText, helperTextId: props.helperTextId, invalid: props.invalid }),
   ];
 };
@@ -48,4 +49,4 @@ const HelperText = (props) => {
 
 export { CheckboxTemplate as C };
 
-//# sourceMappingURL=checkbox.template-0a54ff6e.js.map
+//# sourceMappingURL=checkbox.template-04a31caa.js.map

package/dist/esm/checkbox.template-04a31caa.js.map

@@ -0,0 +1 @@
+{"file":"checkbox.template-04a31caa.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;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;UACpC,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,EAAE;AAEF,MAAM,UAAU,GAIX,CAAC,KAAK;EACP,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;IAChC,OAAO;GACV;EAED,QACI,yBACI,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":[],"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    }\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"],"version":3}