@nordcode/ui 2.2.0 → 2.2.2

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

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

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

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

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

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

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