@nordcode/ui 1.0.0

package/src/styles/components/inputs/base.css

@@ -0,0 +1,258 @@
+@layer components.inputs {
+    :where(label:not([class]), .nc-input-label) {
+        font-family: var(--font-family-default);
+        letter-spacing: var(--tracking-tight);
+        font-weight: var(--font-weight-active);
+        color: var(--color-text-base);
+        display: inline-flex;
+        font-size: inherit;
+        cursor: pointer;
+        gap: 0.15lh;
+        align-items: center;
+    }
+
+    :where(
+            input[type="text"],
+            input[type="email"],
+            input[type="password"],
+            input[type="number"],
+            input[type="url"],
+            input[type="search"],
+            input[type="date"],
+            input[type="month"],
+            input[type="week"],
+            input[type="text"],
+            input[type="datetime"],
+            input[type="datetime-local"],
+            input[type="time"],
+            input[type="tel"],
+            input[type="color"],
+            input[type="file"],
+            input[type="checkbox"],
+            input[type="radio"],
+            textarea,
+            select,
+            .nc-input,
+            .nc-select,
+            .nc-textarea,
+            .nc-input-checkbox,
+            .nc-input-radio,
+            .nc-input-label,
+            .nc-input-color,
+            .nc-input-field,
+            .nc-input-error,
+            .nc-checkbox-wrapper,
+            .nc-input-switch,
+            .nc-radio-field,
+            .nc-checkbox-field
+        ) {
+        --_input-background: var(--input-background, var(--color-surface-subtle));
+        --_input-background-active: var(--input-background-active, var(--color-surface-base));
+        --_input-color: var(--input-color, var(--color-text-base));
+        --_input-border: var(
+            --input-border,
+            var(--border-width-thin) solid var(--color-border-base)
+        );
+        --_input-border-radius: var(--input-border-radius, var(--border-radius-medium));
+
+        --_input-box-shadow: var(--input-box-shadow, var(--shadow-inset));
+        --_input-outline: var(
+            --input-outline,
+            var(--border-width-thick) solid var(--color-brand-primary-base)
+        );
+        --_input-disabled-filter: var(--input-disabled-filter, contrast(0.72) opacity(0.72));
+
+        --_input-padding-block: var(--input-padding-block, 0.125lh);
+        --_input-padding-inline: var(--input-padding-inline, 1ch);
+        --_input-hover-background: var(--input-hover-background, var(--color-brand-primary-hover));
+    }
+
+    :where(
+            input[type="text"],
+            input[type="email"],
+            input[type="password"],
+            input[type="number"],
+            input[type="url"],
+            input[type="search"],
+            input[type="date"],
+            input[type="month"],
+            input[type="week"],
+            input[type="text"],
+            input[type="datetime"],
+            input[type="datetime-local"],
+            input[type="time"],
+            input[type="tel"],
+            input[type="color"],
+            input[type="file"],
+            textarea,
+            select,
+            .nc-input
+        ) {
+        font: inherit;
+        letter-spacing: inherit;
+        word-spacing: inherit;
+        appearance: none;
+
+        color: var(--_input-color);
+        background-color: var(--_input-background);
+        border: var(--_input-border);
+        border-radius: var(--_input-border-radius);
+        block-size: var(--button-height-base);
+        padding-inline: var(--_input-padding-inline);
+        box-shadow: var(--_input-box-shadow);
+        inline-size: var(--input-inline-size, auto);
+        line-height: var(--line-height-base);
+
+        &:focus,
+        &:hover:focus {
+            --current-background: var(--_input-background-active);
+            outline: var(--_input-outline);
+            outline-offset: 0;
+            background-color: var(--_input-background-active);
+        }
+
+        &:disabled {
+            filter: var(--_input-disabled-filter);
+            cursor: not-allowed;
+        }
+
+        &:hover {
+            --current-background: var(--_input-hover-background);
+            background-color: var(--_input-hover-background);
+        }
+
+        &[required] {
+            border-inline-start-width: var(--border-width-thick);
+        }
+
+        &::placeholder {
+            color: var(--color-text-subtle);
+        }
+    }
+
+    :where(select:not([class]), .nc-select) {
+        padding-inline-end: 3.5ch;
+        background-image: var(--triangle-down-url);
+        background-position: right 1ch top 50%;
+        background-size: 1.5ch 1.25ch;
+    }
+
+    :where(textarea:not([class]), .nc-textarea) {
+        min-block-size: calc(5lh + 2 * var(--_input-padding-block));
+        min-inline-size: var(--input-inline-size, 100%);
+        max-inline-size: 100%;
+        padding-block: var(--_input-padding-block);
+    }
+
+    :where(
+            input[type="checkbox"]:not([class]),
+            input[type="radio"]:not([class]),
+            .nc-input-checkbox,
+            .nc-input-radio,
+            .nc-input-switch
+        ) {
+        inline-size: 1lh;
+        block-size: 1lh;
+        margin: 0;
+        padding: 0;
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: var(--_input-border);
+        --current-background: var(--_input-background);
+        background: var(--current-background);
+        cursor: pointer;
+        transition: var(--transition-duration-short) background var(--ease-2);
+        box-shadow: var(--_input-box-shadow);
+    }
+
+    :where(input[type="checkbox"]:not([class]), .nc-input-checkbox) {
+        --_transition-duration: 0ms;
+        overflow: hidden;
+        border-radius: var(--_input-border-radius);
+
+        &:before {
+            content: "";
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            inline-size: 0.75lh;
+            block-size: 0.75lh;
+            background-color: var(--color-brand-primary-contrast);
+            transform: scale(0.8) translateY(2em);
+            transition: transform var(--ease-out-2) var(--transition-duration-short);
+            font-family: var(--font-family-sans);
+            --font-weight: var(--font-weight-active);
+            line-height: 1;
+            color: var(--_input-background);
+            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+        }
+
+        &:checked {
+            --current-background: var(--color-brand-primary-base);
+
+            &:before {
+                transform: scale(1) translateY(0%);
+            }
+        }
+    }
+
+    :where(input[type="radio"], .nc-input-radio) {
+        border-radius: var(--border-radius-round);
+        overflow: hidden;
+
+        &:before {
+            content: "";
+            display: inline-flex;
+            block-size: 50%;
+            inline-size: 50%;
+            border-radius: var(--border-radius-round);
+            transform: scale(0.8) translateY(2em);
+            background-color: var(--color-brand-primary-contrast);
+            transition: transform var(--ease-out-2) var(--transition-duration-short);
+        }
+
+        &:checked {
+            --current-background: var(--color-brand-primary-base);
+
+            &:before {
+                transform: scale(1) translateY(0%);
+            }
+        }
+    }
+
+    :where(input[type="color"], .nc-input-color) {
+        aspect-ratio: 1;
+        inline-size: auto;
+        padding: calc(var(--button-height-base) / 12);
+    }
+
+    :where(input[type="date"], .nc-input-date) {
+        flex-flow: row nowrap;
+    }
+
+    :where(input[type="range"], .nc-input-range) {
+        & > .nc-hint {
+            margin-inline-start: auto;
+        }
+
+        &::-webkit-slider-thumb,
+        &::-moz-range-thumb {
+            appearance: none;
+            inline-size: 1lh;
+            block-size: 1lh;
+            border-radius: var(--_input-border-radius);
+            border: var(--_input-border);
+            border-color: var(--color-text-base);
+            background-color: var(--color-text-base);
+            box-shadow: var(--shadow-near);
+            cursor: pointer;
+
+            &:hover {
+                background-color: var(--color-brand-primary-base);
+                border-color: var(--color-brand-primary-base);
+            }
+        }
+    }
+}

package/src/styles/components/inputs/bundle.css

@@ -0,0 +1,5 @@
+@import "./base.css";
+@import "./fields.css";
+@import "./segmented.css";
+@import "./switch.css";
+@import "./tag-select.css";

package/src/styles/components/inputs/fields.css

@@ -0,0 +1,79 @@
+@layer components.input-fields {
+    :where(.nc-input-field) {
+        display: grid;
+        gap: 0.25lh;
+        grid-template-columns: minmax(0, 1fr);
+        inline-size: 100%;
+        min-inline-size: var(--input-field-min-inline-size);
+        max-inline-size: var(--input-field-max-inline-size);
+        place-items: start;
+
+        & > label,
+        & > .nc-stack {
+            gap: 0.125lh;
+            line-height: var(--line-height-small);
+        }
+
+        & > .nc-cluster {
+            gap: 1ch;
+        }
+    }
+
+    :where(.nc-input-error) {
+        --color-base: var(--color-status-danger-emphasis);
+        color: var(--color-base);
+        font-size: var(--font-size-small);
+
+        &:before {
+            content: "!";
+            font-family: var(--font-family-default);
+            letter-spacing: var(--tracking-tight);
+            font-weight: var(--font-weight-default);
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            background-color: var(--color-base);
+            color: var(--color-surface-subtle);
+            margin-inline-end: 1ch;
+            inline-size: 1em;
+            block-size: 1em;
+            flex-shrink: 0;
+        }
+    }
+
+    :where(.nc-checkbox-wrapper) {
+        display: grid;
+        grid-template:
+            "checkbox label" 1fr
+            / auto 1fr;
+        place-items: start;
+        gap: 0;
+
+        & > [data-label] {
+            grid-area: label;
+            padding-inline-start: 1ch;
+        }
+
+        & .nc-input-label {
+            min-block-size: var(--line-height-base);
+        }
+
+        & > [data-input] {
+            grid-area: checkbox;
+        }
+
+        &:hover:not(:has(input:checked)) input {
+            background: var(--_input-hover-background);
+        }
+    }
+
+    :where(.nc-radio-field, .nc-checkbox-field) {
+        & fieldset {
+            margin-block-start: 0.6lh;
+        }
+
+        & fieldset > *:not(:first-child) {
+            margin-block-start: 0.6lh;
+        }
+    }
+}

package/src/styles/components/inputs/segmented.css

@@ -0,0 +1,123 @@
+@layer components.inputs-segmented {
+    :where(.nc-segmented-control-group) {
+        container: segmented-control / inline-size;
+    }
+
+    :where(.nc-segmented-control) {
+        --_segmented-control-border-radius: var(
+            --segmented-control-border-radius,
+            var(--_input-border-radius)
+        );
+        --_segmented-control-checked-text-color: var(
+            --segmented-control-checked-text-color,
+            var(--color-brand-primary-contrast)
+        );
+        --_segmented-control-checked-surface-color: var(
+            --segmented-control-checked-surface-color,
+            var(--color-brand-primary-base)
+        );
+        display: grid;
+        grid-auto-rows: 1fr;
+        grid-auto-flow: row;
+        padding: 0;
+        margin: 0;
+        border: none;
+        box-shadow: var(--_input-box-shadow);
+        border-radius: var(--_segmented-control-border-radius);
+        background: var(--_input-background);
+        block-size: auto;
+        inline-size: 100%;
+
+        & input {
+            opacity: 0;
+            position: absolute;
+        }
+
+        &:focus-within {
+            outline: var(--_input-outline);
+            outline-offset: 0;
+        }
+
+        & label {
+            display: flex;
+            padding-inline: var(--_input-padding-inline);
+            padding-block: var(--_input-padding-block);
+            min-block-size: var(--segmented-control-min-height, var(--button-height-base));
+            color: var(--_input-color);
+            border: var(--_input-border);
+            align-items: center;
+            justify-content: center;
+
+            > .nc-input-label {
+                color: inherit;
+            }
+
+            &:hover {
+                --current-background: var(--_input-hover-background);
+                background-color: var(--_input-hover-background);
+            }
+
+            &:first-child {
+                border-radius: var(--_segmented-control-border-radius)
+                    var(--_segmented-control-border-radius) 0 0;
+            }
+
+            &:last-child {
+                border-radius: 0 0 var(--_segmented-control-border-radius)
+                    var(--_segmented-control-border-radius);
+            }
+
+            &:not(:last-child) {
+                border-block-end: var(--border-width-thin) solid var(--color-border-muted);
+            }
+
+            &:not(:first-child) {
+                border-block-start: none;
+            }
+
+            &:has(input:checked) {
+                background: var(--_segmented-control-checked-surface-color);
+                color: var(--_segmented-control-checked-text-color);
+                box-shadow: var(--shadow-near);
+            }
+
+            &:focus-within {
+                outline: none;
+            }
+
+            &:has(input:disabled) {
+                filter: var(--_input-disabled-filter);
+                cursor: not-allowed;
+            }
+        }
+    }
+
+    @container segmented-control (min-width: 32rem) {
+        :where(.nc-segmented-control) {
+            grid-auto-columns: 1fr;
+            grid-auto-flow: column;
+
+            > label {
+                &:first-child {
+                    border-radius: var(--_segmented-control-border-radius) 0 0
+                        var(--_segmented-control-border-radius);
+                }
+
+                &:last-child {
+                    border-radius: 0 var(--_segmented-control-border-radius)
+                        var(--_segmented-control-border-radius) 0;
+                }
+
+                &:not(:last-child) {
+                    border-block-end: var(--_input-border);
+                    border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
+                }
+
+                &:not(:first-child) {
+                    border-block-start: var(--_input-border);
+                    border-inline-start: none;
+                }
+            }
+        }
+    }
+}

package/src/styles/components/inputs/switch.css

@@ -0,0 +1,42 @@
+@layer components.input-switch {
+    :where(.nc-input-switch) {
+        --_switch-width: var(--switch-width, calc(var(--line-height-base) * 2));
+        --_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
+        --_switch-color: var(--switch-color, var(--_input-background));
+        --_switch-color-checked: var(--switch-color-checked, var(--color-brand-primary-base));
+        --_thumb-margin: var(--thumb-margin, calc(var(--_switch-width) / 12));
+        --_thumb-color: var(--thumb-color, var(--_input-color));
+
+        vertical-align: var(--_thumb-margin);
+        inline-size: var(--_switch-width);
+        block-size: var(--_switch-height);
+        border-radius: var(--_input-border-radius);
+        --current-background: var(--_switch-color);
+        justify-content: flex-start;
+
+        &:before {
+            content: "";
+            display: block;
+            aspect-ratio: 1;
+            margin-block: var(--_thumb-margin);
+            transform: translateX(var(--_thumb-margin));
+            block-size: calc(100% - 2 * var(--_thumb-margin));
+            background-color: var(--_thumb-color);
+            border-radius: var(--_input-border-radius);
+            box-shadow: var(--shadow-near);
+            transition: transform, background-color;
+            transition-duration: var(--transition-duration-base);
+            transition-timing-function: var(--ease-2);
+        }
+
+        &:checked {
+            --current-background: var(--_switch-color-checked);
+        }
+
+        &:checked:before {
+            transform: translateX(
+                calc(var(--_switch-width) - var(--_switch-height) + var(--_thumb-margin))
+            );
+        }
+    }
+}

package/src/styles/components/inputs/tag-select.css

@@ -0,0 +1,44 @@
+@layer components.inputs {
+    :where(.nc-tag-select-field) {
+        --_tag-select-checked-text-color: var(
+            --tag-select-checked-text-color,
+            var(--color-brand-primary-contrast)
+        );
+        --_tag-select-checked-surface-color: var(
+            --tag-select-checked-surface-color,
+            var(--color-brand-primary-base)
+        );
+        --_tag-select-border-radius: var(--tag-select-border-radius, var(--_input-border-radius));
+
+        &:focus-within:has(:focus-visible) {
+            outline-offset: 1ch;
+            outline: var(--_input-outline);
+            border-radius: var(--_tag-select-border-radius);
+        }
+
+        & input {
+            opacity: 0;
+            position: absolute;
+        }
+
+        & label {
+            display: grid;
+
+            &:hover,
+            &:focus-within {
+                background-color: var(--_input-hover-background);
+            }
+
+            &:has(input:checked) {
+                background: var(--_tag-select-checked-surface-color);
+                color: var(--_tag-select-checked-text-color);
+                box-shadow: var(--shadow-near);
+            }
+
+            &:has(input:disabled) {
+                filter: var(--_input-disabled-filter);
+                cursor: not-allowed;
+            }
+        }
+    }
+}

package/src/styles/components/lists.css

@@ -0,0 +1,40 @@
+@layer components.lists {
+    :where(.nc-meta-list) {
+        inline-size: 100%;
+        container: metalist / inline-size;
+    }
+
+    :where(.nc-meta-list-item) {
+        overflow-wrap: break-word;
+        max-inline-size: 100%;
+        hyphens: auto;
+        inline-size: 100%;
+
+        &:not(:last-child) {
+            margin-block-end: 1ch;
+        }
+    }
+
+    @container metalist (min-width: 20rem) {
+        :where(.nc-meta-list-item) {
+            inline-size: auto;
+
+            &:not(:last-child):after {
+                content: '';
+                border-right: var(--border-width-medium) solid var(--color-border-muted);
+                margin: 0 1ch;
+                transform: calc(var(--border-width-medium) / 2);
+            }
+        }
+    }
+
+    :where(.nc-list-reset) {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        & li {
+            margin: 0;
+        }
+    }
+}