@nordcode/ui 1.1.6 → 1.2.0

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

@@ -0,0 +1,260 @@
+@layer components.buttons {
+    .buttonReset {
+        padding: 0;
+        border: none;
+        background: none;
+    }
+
+    :where(button:not([class]),
+        button[type]:not([class]),
+        input[type='button']:not([class]),
+        input[type='submit']:not([class]),
+        input[type='reset']:not([class]),
+        input[type='file']:not([class]),
+        input[type='file']:not([class])::-webkit-file-upload-button,
+        input[type='file']:not([class])::file-selector-button,
+        .nc-button) {
+        --_button-background: var(--button-background, var(--surface-hover));
+        --_button-color: var(--button-color, var(--text-hover));
+        --_button-border-color: var(--button-border-color, var(--surface-hover));
+        --_button-border-radius: var(--button-border-radius, var(--border-radius-medium));
+
+        --_button-background-hover: var(--button-background-hover, var(--surface));
+        --_button-background-hover-light: var(--button-background-hover-light,
+                color-mix(in oklch,
+                    currentColor calc(var(--transparency-weaker) * 10%),
+                    transparent));
+        --_button-color-hover: var(--button-color-hover, var(--text));
+        --_button-border-color-hover: var(--button-border-color-hover,
+                var(--border));
+
+        --_button-box-shadow: var(--button-box-shadow, var(--shadow-near));
+        --_button-hover-shadow: var(--button-hover-shadow, var(--shadow-nearest));
+
+        --_button-padding-inline: var(--button-padding-inline, 1ch);
+
+        background-color: var(--_button-background);
+        color: var(--_button-color);
+        border: var(--border-width-thin) solid var(--_button-border-color);
+        border-radius: var(--_button-border-radius);
+        padding-inline: var(--_button-padding-inline);
+        min-block-size: var(--button-height-base);
+        padding-block: 0;
+        font-family: var(--font-family-button);
+        letter-spacing: var(--tracking-tight);
+        font-weight: var(--font-weight-default);
+        font-size: inherit;
+        cursor: pointer;
+        display: inline-flex;
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        position: relative;
+        transition: var(--transition-duration-base) var(--ease-2);
+        transition-property: box-shadow, transform;
+        text-decoration: unset;
+        box-shadow: var(--_button-box-shadow);
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        -webkit-touch-callout: none;
+
+        line-height: var(--line-height-base);
+    }
+
+    :where(button:not([class]),
+        button[type]:not([class]),
+        input[type='button']:not([class]),
+        input[type='submit']:not([class]),
+        input[type='reset']:not([class]),
+        .nc-button) {
+        &:hover {
+            background: var(--_button-background-hover);
+            color: var(--_button-color-hover);
+            border-color: var(--_button-border-color-hover);
+            box-shadow: var(--_button-hover-shadow);
+        }
+
+        &[aria-pressed='true'] {
+            box-shadow: none;
+            transform: none;
+            font-weight: var(--font-weight-active);
+        }
+
+        &:active {
+            box-shadow: none;
+            transform: none;
+        }
+
+        &[disabled] {
+            --_button-background: none !important;
+            --_button-background-hover: none !important;
+            --_button-color: var(--color-text-subtle) !important;
+            --_button-color-hover: var(--_button-color) !important;
+            --_button-border-color: var(--color-text-subtle) !important;
+            --_button-border-color-hover: var(--_button-border-color);
+
+            box-shadow: none !important;
+            transform: none !important;
+            filter: contrast(0.72) opacity(0.72);
+            cursor: not-allowed;
+        }
+
+        &.-active {
+            background-color: var(--_button-background-hover);
+            color: var(--_button-color-hover);
+            border-color: var(--_button-border-color-hover);
+
+            box-shadow: none;
+            transform: none;
+        }
+
+        &.-outline {
+            background-color: transparent;
+            color: var(--text);
+            border-color: var(--border);
+
+            &:hover {
+                background-color: var(--_button-background-hover-light);
+                color: var(--text);
+                border-color: var(--border-hover);
+            }
+        }
+
+        &.-stealth {
+            background-color: transparent;
+            border-color: transparent;
+            color: var(--text);
+
+            &:hover {
+                background-color: var(--_button-background-hover-light);
+                color: var(--text);
+                border-color: transparent;
+            }
+
+            box-shadow: none !important;
+            transform: none !important;
+        }
+
+        &.-small {
+            --_button-padding-inline: 1ch;
+            min-block-size: var(--button-height-small);
+        }
+
+        &.-round {
+            --_button-border-radius: var(--border-radius-round);
+        }
+
+        &.-offset {
+            --_button-offset-distance: var(--button-offset-distance, -0.1lh);
+            --_button-offset-distance-hover: var(--button-offset-distance-hover, -0.05lh);
+
+            --_button-transform: translate(var(--_button-offset-distance),
+                    var(--_button-offset-distance));
+            --_button-hover-transform: translate(var(--_button-offset-distance-hover),
+                    var(--_button-offset-distance-hover));
+
+            --button-box-shadow: calc(var(--_button-offset-distance) / -2) calc(var(--_button-offset-distance) / -2) 0 0 var(--shadow-color),
+                calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) 0 0 var(--shadow-color),
+                calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -1) calc(var(--_button-offset-distance) * -2) 0 var(--shadow-color);
+
+            --button-hover-shadow: calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) * -1) 0 0 var(--shadow-color),
+                calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) * -1) calc(var(--_button-offset-distance-hover) / -2) 0 var(--shadow-color);
+
+            inset-block-start: calc(var(--_button-offset-distance) * -1);
+            inset-inline-start: calc(var(--_button-offset-distance) * -1);
+            transform: var(--_button-transform);
+
+            &:hover {
+                transform: var(--_button-hover-transform);
+            }
+        }
+
+        /*
+         * for inline icons
+         */
+
+        &:has(svg) {
+            gap: 0.5ch;
+        }
+
+        /*
+             * If there is no text node for the button,
+             * it is assumed that an `aria-label` is that
+             * and the button will be styled as an icon button.
+             */
+
+        &[aria-label],
+        &.-icon {
+            --_button-border-radius: var(--border-radius-round);
+            padding: 0;
+            aspect-ratio: 1;
+            fill: currentColor;
+
+            &:after {
+                content: '';
+                inline-size: max(var(--button-height-base), 100%);
+                block-size: max(var(--button-height-base), 100%);
+                aspect-ratio: 1;
+                border-radius: 100%;
+                inset-inline-start: calc(-0.5 * (var(--button-height-base) - 100%));
+                inset-block-start: calc(-0.5 * (var(--button-height-base) - 100%));
+                position: absolute;
+                z-index: -1;
+                pointer-events: all;
+            }
+
+            &>svg {
+                pointer-events: none;
+            }
+        }
+
+        &.-icon.-small {
+            padding: 0;
+        }
+
+        &.-aligned {
+            margin-inline: calc(-1 * var(--_button-padding-inline));
+        }
+    }
+
+    :where(input[type='file']:not([class])) {
+        color: var(--_input-color);
+        background-color: var(--_input-background);
+        border: var(--_input-border);
+        min-block-size: var(--button-height-base);
+        padding-inline-end: 1ch;
+        padding-inline-start: 0;
+        border-radius: var(--_input-border-radius);
+    }
+
+    :where(input[type='file']:not([class]))::-webkit-file-upload-button,
+    :where(input[type='file']:not([class]))::file-selector-button {
+        background-color: var(--_button-background);
+        color: var(--_button-color);
+        padding-inline: var(--_button-padding-inline);
+        margin-inline-end: 1ch;
+        cursor: pointer;
+        box-shadow: none;
+        min-block-size: calc(var(--button-height-base) - var(--border-width-thin));
+        border: none;
+        border-inline-end: var(--border-width-thin) solid var(--color-border-base);
+        transform: none;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+    }
+
+    :where(button[type='reset']:not([class]), .nc-button.-destructive) {
+        --text: var(--color-status-danger-emphasis);
+        --color: var(--color-status-danger-base);
+        --surface: var(--color-status-danger-surface);
+        --border: var(--color-status-danger-base);
+
+        --text-hover: var(--color-status-danger-contrast);
+        --color-hover: var(--color-status-danger-contrast);
+        --surface-hover: var(--color-status-danger-base);
+        --border-hover: var(--color-status-danger-base);
+    }
+}

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

@@ -0,0 +1,55 @@
+@layer components.cards {
+    :where(.nc-card) {
+        --_card-background-color: var(--card-background-color, var(--color-surface-base));
+        --_card-color: var(--card-color, var(--color-text-base));
+        --_card-border-color: var(--card-border-color, var(--color-border-base));
+        --_card-shadow: var(--card-shadow, var(--shadow-medium));
+        --_card-padding-inline: var(--card-padding-inline, var(--spacing-base));
+        --_card-padding-block: var(--card-padding-block, var(--spacing-far));
+        --_card-border-radius: var(--card-border-radius, var(--border-radius-large));
+
+        &[data-size="xs"] {
+            --_card-padding-inline: var(--card-padding-inline, var(--spacing-nearest));
+            --_card-padding-block: var(--card-padding-block, var(--spacing-near));
+            --_card-border-radius: var(--card-border-radius, var(--border-radius-medium));
+        }
+
+        &[data-size="sm"] {
+            --_card-padding-inline: var(--card-padding-inline, var(--spacing-near));
+            --_card-padding-block: var(--card-padding-block, var(--spacing-base));
+        }
+
+        inline-size: 100%;
+        display: inline-block;
+        box-sizing: border-box;
+        padding-inline: var(--_card-padding-inline);
+        padding-block: var(--_card-padding-block);
+        color: var(--_card-color);
+        overflow: hidden;
+
+        appearance: none;
+        border: 1px solid var(--_card-border-color);
+
+        background-color: var(--_card-background-color);
+        border-radius: var(--_card-border-radius);
+        box-shadow: var(--_card-shadow);
+
+        transition: border-color var(--transition-duration-base) var(--ease-2);
+
+        @media (width >= 480px) {
+            --_card-padding-inline: var(--card-padding-inline, var(--spacing-far));
+        }
+
+        @media (width >= 1024px) {
+            --_card-padding-inline: var(--card-padding-inline, var(--spacing-farthest));
+        }
+
+        &:is([href], button) {
+            text-decoration: none;
+
+            &:hover {
+                border-color: var(--color-brand-primary-base);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,138 @@
+@layer components.dialogs {
+    :where(.nc-dialog) {
+        --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
+        --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
+        --_dialog-close-size: var(--dialog-close-size, var(--button-height-base));
+        --_dialog-transition-duration: var(--dialog-transition-duration,
+                var(--transition-duration-base));
+        --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
+        --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
+
+        --_dialog-radius: 0;
+        display: block;
+        z-index: var(--layer-important);
+        animation: close-dialog var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1) forwards;
+        transition: opacity var(--_dialog-transition-duration) cubic-bezier(0.7, 0, 1, 1);
+        position: fixed;
+        inset: 0;
+        border: var(--border-width-thin) solid var(--color-border-base);
+        inline-size: 100dvw;
+        block-size: max-content;
+        max-inline-size: var(--_dialog-max-inline-size);
+        max-block-size: 100dvh;
+        background: var(--color-surface-base);
+        margin: auto 0;
+        padding: 0;
+        border-radius: var(--_dialog-radius);
+        overflow: clip;
+        overflow-clip-margin: 1rem;
+        pointer-events: all;
+
+        @media (min-width: 36rem) {
+            --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
+            inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
+            max-block-size: var(--_dialog-max-block-size);
+            margin-inline: auto;
+            box-shadow: var(--shadow-medium);
+        }
+
+        &[open] {
+            animation: open-dialog var(--_dialog-transition-duration) cubic-bezier(0, 0.6, 0.58, 1);
+        }
+
+        &:not([open]) {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        &::backdrop {
+            background: rgba(0, 0, 0, 0.05);
+            backdrop-filter: blur(3px);
+        }
+
+        :where(.dialog-container) {
+            display: grid;
+            grid-template:
+                "header header" auto
+                "content content" 1fr
+                "footer footer" auto / 1fr 1fr;
+            inline-size: 100%;
+            block-size: max-content;
+            max-block-size: var(--_dialog-max-block-size);
+            overflow: clip;
+            overflow-clip-margin: 1rem;
+
+            &>*:first-child {
+                border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;
+            }
+
+            &>*:last-child {
+                border-radius: 0 0 var(--_dialog-radius) var(--_dialog-radius);
+            }
+        }
+
+        :where(.dialog-header) {
+            grid-area: header;
+            border-block-end: var(--border-width-thin) solid var(--color-border-muted);
+            background-color: var(--color-surface-subtle);
+            padding-inline: var(--_dialog-padding-inline);
+            display: grid;
+            grid-template: "title close" / 1fr var(--_dialog-close-size);
+            align-items: flex-start;
+            padding-block: var(--spacing-near);
+            min-inline-size: calc(2 * var(--spacing-near) + var(--_dialog-close-size));
+        }
+
+        :where(.dialog-header)>button[data-closes-dialog] {
+            grid-area: close;
+            inline-size: var(--_dialog-close-size);
+            block-size: var(--_dialog-close-size);
+        }
+
+        :where(.dialog-title) {
+            font-size: var(--font-size-large);
+            margin: 0;
+            padding: 0;
+            line-height: var(--_dialog-close-size);
+            overflow-wrap: anywhere;
+        }
+
+        :where(.dialog-content) {
+            grid-area: content;
+            padding-inline: var(--_dialog-padding-inline);
+            padding-block: var(--spacing-near);
+            overflow: auto;
+        }
+
+        :where(.dialog-actions) {
+            grid-area: footer;
+            padding-inline: var(--_dialog-padding-inline);
+            padding-block: var(--spacing-near);
+            display: flex;
+            justify-content: flex-end;
+            align-items: flex-start;
+            border-block-start: var(--border-width-thin) solid var(--color-border-muted);
+            background-color: var(--color-surface-subtle);
+        }
+    }
+
+    @keyframes open-dialog {
+        from {
+            transform: translate(0%, 100dvh) rotate(0deg);
+        }
+
+        to {
+            transform: translate(0dvh, 0%) rotate(0deg);
+        }
+    }
+
+    @keyframes close-dialog {
+        from {
+            transform: translate(0dvh, 0%) rotate(0deg);
+        }
+
+        to {
+            transform: translate(0%, 100dvh) rotate(10deg);
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+@layer components.forms {
+    :where(.nc-form) {
+        inline-size: min(100%, var(--nc-form-max-inline-size, var(--measure-base)));
+    }
+
+    :where(.nc-form-title) {
+        font-size: var(--font-size-largest);
+        font-weight: var(--font-weight-heading);
+        line-height: var(--line-height-small);
+        color: var(--color-text-base);
+    }
+
+    :where(.nc-form-hint) {
+        margin-block: 0.5lh;
+        font-size: var(--font-size-large);
+        color: var(--color-text-muted);
+    }
+
+    :where(fieldset:not([class]), .nc-fieldset) {
+        border: none;
+        margin: 0;
+        padding: 0;
+        min-inline-size: 0;
+    }
+
+    :where(legend:not([class]), .nc-legend) {
+        padding: 0;
+        border: none;
+        border-radius: 0;
+        inline-size: 100%;
+
+        &+* {
+            margin-block-start: var(--nc-legend-spacing, 0.8lh);
+        }
+    }
+
+    :where(:is(fieldset:not([class]), .nc-fieldset):has( :is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend) + .nc-hint) {
+        --nc-legend-spacing: .125lh;
+        margin-block-end: 0.5lh;
+    }
+}

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

@@ -0,0 +1,66 @@
+@layer components.gallery {
+    /**
+     * A horizontal stacked gallery that is scrollable when it overflows.
+     *
+     * @example ```html
+     *  <ul class="nc-gallery">
+     *    <li>First</li>
+     *    <li>Second</li>
+     *    <li>Third</li>
+     *  </ul>
+     * ```
+     */
+    :where(.nc-gallery) {
+        display: flex;
+        flex-direction: row;
+        gap: var(--gallery-gap, var(--spacing-base));
+        margin: 0;
+        max-inline-size: 100%;
+        block-size: var(--gallery-size, auto);
+        padding-block-end: var(--gallery-scrollbar-padding, var(--spacing-base));
+        overflow-x: auto;
+        overscroll-behavior-inline: contain;
+        scroll-snap-type: inline mandatory;
+        scroll-snap-stop: normal;
+        scroll-padding-inline: var(--gallery-scroll-padding-inline, var(--spacing-base));
+        list-style: none;
+
+        @media (prefers-reduced-motion: no-preference) {
+            scroll-behavior: smooth;
+        }
+
+        & > * {
+            display: inline-block;
+            scroll-snap-align: start;
+            flex: 0 0 var(--gallery-item-size, auto);
+        }
+
+        &.-custom-scrollbar {
+            scrollbar-color: var(--gallery-scrollbar-fg, var(--color-text-on-emphasis))
+                var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
+
+            &::-webkit-scrollbar {
+                block-size: var(--gallery-scrollbar-height, var(--spacing-base));
+            }
+
+            &::-webkit-scrollbar-track {
+                background-color: var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background-color: var(--gallery-scrollbar-bg, var(--color-surface-emphasis));
+                background-image: linear-gradient(
+                    var(--gallery-scrollbar-bg, var(--color-surface-emphasis)) 0,
+                    var(--gallery-scrollbar-bg, var(--color-surface-emphasis))
+                        calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.25),
+                    var(--gallery-scrollbar-fg, var(--color-text-on-emphasis))
+                        calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.25),
+                    var(--gallery-scrollbar-fg, var(--color-text-on-emphasis))
+                        calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.75),
+                    var(--gallery-scrollbar-bg, var(--color-surface-emphasis))
+                        calc(var(--gallery-scrollbar-height, var(--spacing-base)) * 0.75)
+                );
+            }
+        }
+    }
+}

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

@@ -0,0 +1,60 @@
+@layer components.icons {
+    :where(.nc-icon) {
+        --icon-size: 2ex;
+
+        display: block;
+        flex-shrink: 0;
+        inline-size: var(--icon-size);
+        block-size: var(--icon-size);
+
+        &[data-flip="true"] {
+            transform: scaleX(-1);
+        }
+
+        &[data-size="xs"] {
+            --icon-size: 1ex;
+        }
+
+        &[data-size="sm"] {
+            --icon-size: 1.5ex;
+        }
+
+        &[data-size="md"] {
+            --icon-size: 2ex;
+        }
+
+        &[data-size="lg"] {
+            --icon-size: 3ex;
+        }
+
+        &[data-size="xl"] {
+            --icon-size: 4ex;
+        }
+
+        &[data-size="inline"] {
+            --icon-size: 0.75lh;
+        }
+
+        &[data-size="button"] {
+            --icon-size: var(--button-height-base);
+        }
+
+        &[data-animation="spinning"] {
+            animation: spinning 1s infinite linear;
+        }
+    }
+
+    :where(button, .nc-button)>.nc-icon {
+        --icon-size: 2ex;
+    }
+
+    @keyframes spinning {
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(360deg);
+        }
+    }
+}