@nordcode/ui 1.1.6 → 1.2.0

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

@@ -0,0 +1,249 @@
+@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;
+        gap: 0;
+        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-medium) 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));
+        max-block-size: 80svh;
+        min-inline-size: var(--input-inline-size, 100%);
+        max-inline-size: 100%;
+        padding-block: var(--_input-padding-block);
+
+        resize: block;
+        field-sizing: content;
+    }
+
+    :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;
+        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);
+        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: calc(var(--button-height-base) * 0.7);
+            block-size: calc(var(--button-height-base) * 0.7);
+            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/out/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/out/src/styles/components/inputs/fields.css

@@ -0,0 +1,76 @@
+@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;
+        }
+
+        &>.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) {
+        gap: 0;
+
+        >*:not(:first-child) {
+            margin-block-start: 0.6lh;
+        }
+    }
+}

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

@@ -0,0 +1,114 @@
+@layer components.inputs-segmented {
+    :where(.nc-segmented-control-group) {
+        --_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));
+
+        container: segmented-control / inline-size;
+
+        --nc-legend-spacing: 0.25lh;
+    }
+
+    :where(.nc-segmented-control) {
+        display: grid;
+        grid-auto-rows: 1fr;
+        grid-auto-flow: row;
+
+        block-size: auto;
+        inline-size: 100%;
+        background: var(--_input-background);
+        box-shadow: var(--_input-box-shadow);
+        border-radius: var(--_segmented-control-border-radius);
+
+        &:focus-within {
+            outline: var(--_input-outline);
+            outline-offset: 0;
+        }
+
+        & input {
+            opacity: 0;
+            position: absolute;
+        }
+
+        & 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/out/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) * 2rem));
+        --_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/out/src/styles/components/inputs/tag-select.css

@@ -0,0 +1,41 @@
+@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));
+        --nc-legend-spacing: 0.25lh;
+
+        &: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/out/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;
+        }
+    }
+}

package/out/src/styles/components/notifications.css

@@ -0,0 +1,135 @@
+@layer components.notifications {
+    :root {
+        --_notification-max-width: var(--notifications-max-width, 20rem);
+        --_notification-gap: var(--notification-gap, var(--spacing-base));
+        --_notification-border-color: var(--notification-border-color, var(--color-border-base));
+        --_notification-center-background: var(--notification-center-background,
+                color-mix(in oklch, var(---color-surface-subtle), transparent 95%);
+            );
+    }
+
+    :where(.nc-notification-center, .nc-notification-output) {
+        position: fixed;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
+        inline-size: 100%;
+        block-size: 100%;
+        max-inline-size: var(--_notification-max-width);
+        padding-block: var(--_notification-gap);
+        pointer-events: none;
+    }
+
+    :where(.nc-notification-center) {
+        block-size: 100%;
+        backdrop-filter: blur(3px);
+        background-color: var(--_notification-center-background);
+        transform: translate(100%, 0);
+        transition: transform var(--transition-duration-base) ease-in-out;
+    }
+
+    :where(.nc-notification-output, .nc-notification-center-container) {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: var(--_notification-gap);
+        inline-size: 100%;
+        overflow-y: scroll;
+        max-block-size: 100%;
+        padding-inline: var(--_notification-gap);
+        min-inline-size: 0;
+        min-block-size: 100%;
+        flex-grow: 1;
+    }
+
+    :where(.nc-notification-center.-open) {
+        pointer-events: all;
+        transform: translate(0, 0);
+    }
+
+    :where(.nc-notification-center.-open:has(+ .nc-notification-output > .nc-notification)) {
+        opacity: 0.5;
+        filter: contrast(0.5);
+    }
+
+    :where(.nc-notification-center-header) {
+        display: flex;
+        align-items: center;
+        gap: var(--_notification-gap);
+        padding-inline: var(--_notification-gap);
+        margin-block-end: var(--_notification-gap);
+    }
+
+    :where(.nc-notification) {
+        padding: 0.5lh 2ch;
+        background: var(--color-surface-base);
+        border: var(--border-width-thin) solid var(--_notification-border-color);
+        display: flex;
+        flex-direction: column;
+        inline-size: 100%;
+        border-radius: var(--border-radius-small);
+        box-shadow: var(--shadow-far);
+        animation: pop-in var(--transition-duration-base) cubic-bezier(0, 0.6, 0.58, 1);
+        color: var(--color-text-base);
+        pointer-events: all;
+    }
+
+    :where(.nc-notification) p {
+        margin: 0;
+        padding: 0;
+    }
+
+    :where(.nc-notification-title) {
+        font-size: var(--font-size-base);
+        font-weight: var(--font-weight-heading);
+    }
+
+    :where(.nc-notification-description) {
+        font-size: var(--font-size-small);
+    }
+
+    :where(.nc-notification-time) {
+        font-size: var(--font-size-small);
+        color: var(--color-text-subtle);
+    }
+
+    :where(.nc-notification-footer) {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        inline-size: 100%;
+        margin-block-start: 0.5ch;
+    }
+
+    :where(.nc-notification .nc-button, .nc-notification-center .nc-button) {
+        --button-height-base: 1em;
+        font-size: var(--font-size-small);
+    }
+
+    :where(.nc-notification.-closing) {
+        animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1) forwards;
+    }
+
+    @keyframes pop-in {
+        0% {
+            transform: translate(3vmin, -2vmin) scale(0.98);
+            opacity: 0;
+        }
+
+        50% {
+            transform: translate(0, -1vmin) scale(0.98);
+        }
+
+        100% {
+            transform: translate(0, 0) scale(1);
+            opacity: 1;
+        }
+    }
+
+    @keyframes remove-notification {
+        to {
+            transform: translate(0, 4vmin) scale(0.98);
+            opacity: 0;
+        }
+    }
+}