@nordcode/ui 2.2.0 → 2.2.2

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

@@ -1,249 +0,0 @@
-@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

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

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

@@ -1,76 +0,0 @@
-@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

@@ -1,114 +0,0 @@
-@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

@@ -1,42 +0,0 @@
-@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

@@ -1,41 +0,0 @@
-@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

@@ -1,40 +0,0 @@
-@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

@@ -1,135 +0,0 @@
-@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;
-        }
-    }
-}