@nordcode/ui 1.0.3 → 1.0.5

package/out/complete_configless.css

@@ -78,11 +78,6 @@
     --color-status-danger-contrast-lightness: var(--lightningcss-light, var(--color-status-danger-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-lightness-dark));
     --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
     --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
-    --shadow-inset: var(--lightningcss-light, var(--shadow-inset-light)) var(--lightningcss-dark, var(--shadow-inset-dark));
-    --shadow-nearest: var(--lightningcss-light, var(--shadow-nearest-light)) var(--lightningcss-dark, var(--shadow-nearest-dark));
-    --shadow-near: var(--lightningcss-light, var(--shadow-near-light)) var(--lightningcss-dark, var(--shadow-near-dark));
-    --shadow-medium: var(--lightningcss-light, var(--shadow-medium-light)) var(--lightningcss-dark, var(--shadow-medium-dark));
-    --shadow-far: var(--lightningcss-light, var(--shadow-far-light)) var(--lightningcss-dark, var(--shadow-far-dark));
     --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
     --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
   }
@@ -304,6 +299,10 @@
     padding-block-end: var(--p-y-details);
   }
 
+  :where(details) > summary::-webkit-details-marker {
+    display: none;
+  }
+
   :where(details) > summary {
     cursor: pointer;
     color: var(--color-text-base);
@@ -311,6 +310,7 @@
     font-weight: var(--font-weight-strong);
     padding-inline: var(--p-x-details);
     padding-block: var(--p-y-details);
+    list-style: none;
   }
 
   .note, blockquote {
@@ -1126,6 +1126,27 @@
   margin-inline-end: auto;
 }
 
+@layer components.alerts {
+  :where(.nc-alert) {
+    background: var(--surface);
+    color: var(--text);
+    gap: 1ch;
+  }
+
+  :where(.nc-alert) > .nc-icon {
+    margin-block: calc((var(--line-height-base)  - var(--icon-size)) / 2);
+  }
+
+  :where(.nc-alert-title) {
+    font-weight: var(--font-weight-heading);
+  }
+
+  :where(.nc-alert.-filled) {
+    background: var(--surface-hover);
+    color: var(--text-hover);
+  }
+}
+
 @layer components.badge {
   :where(.badge) {
     font-family: var(--font-family-mono);
@@ -1141,6 +1162,44 @@
   }
 }
 
+@layer components.breadcrumbs {
+  :where(.nc-breadcrumbs) {
+    background-color: var(--nc-breadcrumbs-surface, transparent);
+    inline-size: max-content;
+    max-inline-size: 100%;
+    color: var(--nc-breadcrumbs-text, --color-text-muted);
+  }
+
+  :where(.nc-breadcrumb-item) {
+    color: inherit;
+  }
+
+  :where(.nc-breadcrumb-item):last-child {
+    color: var(--color-brand-primary-base);
+  }
+
+  :where(.nc-breadcrumb-item):not(:last-child):after {
+    color: inherit;
+    content: "›";
+    font-size: inherit;
+    padding-inline: 1ch;
+  }
+
+  :where(.nc-breadcrumb-link) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :where(.nc-breadcrumb-link):hover {
+    text-decoration: underline;
+  }
+
+  :where(.nc-breadcrumb-link)[aria-current="page"] {
+    pointer-events: none;
+    color: var(--nc-breadcrumbs-text-active, --color-text-base);
+  }
+}
+
 @layer components.buttons {
   .buttonReset {
     background: none;
@@ -1312,6 +1371,10 @@
     padding: 0;
   }
 
+  :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).-aligned {
+    margin-inline: calc(-1 * var(--_button-padding-inline));
+  }
+
   :where(input[type="file"]:not([class])) {
     color: var(--_input-color);
     background-color: var(--_input-background);
@@ -1536,6 +1599,48 @@
   }
 }
 
+@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) {
+    font-size: var(--font-size-large);
+    color: var(--color-text-muted);
+    margin-block: .5lh;
+  }
+
+  :where(fieldset:not([class]), .nc-fieldset) {
+    border: none;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(legend:not([class]), .nc-legend) {
+    border: none;
+    border-radius: 0;
+    inline-size: 100%;
+    padding: 0;
+  }
+
+  :where(legend:not([class]), .nc-legend) + * {
+    margin-block-start: var(--nc-legend-spacing, .75lh);
+  }
+
+  :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: 0;
+    margin-block-end: .6lh;
+  }
+}
+
 @layer components.gallery {
   :where(.nc-gallery) {
     gap: var(--gallery-gap, var(--spacing-base));
@@ -1849,6 +1954,7 @@
     --_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: .25lh;
   }
 
   :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
@@ -1949,43 +2055,45 @@
     background: var(--_input-hover-background);
   }
 
-  :where(.nc-radio-field, .nc-checkbox-field) fieldset, :where(.nc-radio-field, .nc-checkbox-field) fieldset > :not(:first-child) {
+  :where(.nc-radio-field, .nc-checkbox-field) {
+    gap: 0;
+  }
+
+  :where(.nc-radio-field, .nc-checkbox-field) > :not(:first-child) {
     margin-block-start: .6lh;
   }
 }
 
 @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));
+    --nc-legend-spacing: .25lh;
     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));
+    background: var(--_input-background);
+    block-size: auto;
+    inline-size: 100%;
     box-shadow: var(--_input-box-shadow);
     border-radius: var(--_segmented-control-border-radius);
-    background: var(--_input-background);
-    border: none;
     grid-auto-rows: 1fr;
     grid-auto-flow: row;
-    block-size: auto;
-    inline-size: 100%;
-    margin: 0;
-    padding: 0;
     display: grid;
   }
 
-  :where(.nc-segmented-control) input {
-    opacity: 0;
-    position: absolute;
-  }
-
   :where(.nc-segmented-control):focus-within {
     outline: var(--_input-outline);
     outline-offset: 0;
   }
 
+  :where(.nc-segmented-control) input {
+    opacity: 0;
+    position: absolute;
+  }
+
   :where(.nc-segmented-control) label {
     padding-inline: var(--_input-padding-inline);
     padding-block: var(--_input-padding-block);
@@ -2103,6 +2211,48 @@
   }
 }
 
+@layer components.lists {
+  :where(.nc-meta-list) {
+    inline-size: 100%;
+    container: metalist / inline-size;
+  }
+
+  :where(.nc-meta-list-item) {
+    overflow-wrap: break-word;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  :where(.nc-meta-list-item):not(:last-child) {
+    margin-block-end: 1ch;
+  }
+
+  @container metalist (width >= 20rem) {
+    :where(.nc-meta-list-item) {
+      inline-size: auto;
+    }
+
+    :where(.nc-meta-list-item):not(:last-child):after {
+      content: "";
+      border-right: var(--border-width-medium) solid var(--color-border-muted);
+      transform: calc(var(--border-width-medium) / 2);
+      margin: 0 1ch;
+    }
+  }
+
+  :where(.nc-list-reset) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  :where(.nc-list-reset) li {
+    margin: 0;
+  }
+}
+
 @layer components.notifications {
   :root {
     --_notification-max-width: var(--notifications-max-width, 20rem);
@@ -2244,131 +2394,3 @@
     overflow-x: auto;
   }
 }
-
-@layer components.lists {
-  :where(.nc-meta-list) {
-    inline-size: 100%;
-    container: metalist / inline-size;
-  }
-
-  :where(.nc-meta-list-item) {
-    overflow-wrap: break-word;
-    -webkit-hyphens: auto;
-    hyphens: auto;
-    inline-size: 100%;
-    max-inline-size: 100%;
-  }
-
-  :where(.nc-meta-list-item):not(:last-child) {
-    margin-block-end: 1ch;
-  }
-
-  @container metalist (width >= 20rem) {
-    :where(.nc-meta-list-item) {
-      inline-size: auto;
-    }
-
-    :where(.nc-meta-list-item):not(:last-child):after {
-      content: "";
-      border-right: var(--border-width-medium) solid var(--color-border-muted);
-      transform: calc(var(--border-width-medium) / 2);
-      margin: 0 1ch;
-    }
-  }
-
-  :where(.nc-list-reset) {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  :where(.nc-list-reset) li {
-    margin: 0;
-  }
-}
-
-@layer components.breadcrumbs {
-  :where(.nc-breadcrumbs) {
-    background-color: var(--nc-breadcrumbs-surface, transparent);
-    inline-size: max-content;
-    max-inline-size: 100%;
-    color: var(--nc-breadcrumbs-text, --color-text-muted);
-  }
-
-  :where(.nc-breadcrumb-item) {
-    color: inherit;
-  }
-
-  :where(.nc-breadcrumb-item):last-child {
-    color: var(--color-brand-primary-base);
-  }
-
-  :where(.nc-breadcrumb-item):not(:last-child):after {
-    color: inherit;
-    content: "›";
-    font-size: inherit;
-    padding-inline: 1ch;
-  }
-
-  :where(.nc-breadcrumb-link) {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  :where(.nc-breadcrumb-link):hover {
-    text-decoration: underline;
-  }
-
-  :where(.nc-breadcrumb-link)[aria-current="page"] {
-    pointer-events: none;
-    color: var(--nc-breadcrumbs-text-active, --color-text-base);
-  }
-}
-
-@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) {
-    font-size: var(--font-size-large);
-    color: var(--color-text-muted);
-    margin-block: .5lh;
-  }
-
-  :where(fieldset:not([class]), .nc-fieldset) {
-    border: none;
-    min-inline-size: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  :where(legend:not([class]), .nc-legend) {
-    font-family: var(--font-family-default);
-    letter-spacing: var(--tracking-tight);
-    font-weight: var(--font-weight-active);
-    color: var(--text, var(--color-text-base));
-    font-size: var(--font-size-base);
-    border: none;
-    border-radius: 0;
-    inline-size: 100%;
-    margin-block-end: .75lh;
-    padding: 0;
-    display: block;
-  }
-
-  :where(:is(fieldset:not([class]), .nc-fieldset):has(:is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) {
-    margin-block-end: 0;
-  }
-
-  :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 {
-    margin-block-end: .6lh;
-  }
-}

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
   },
-  "version": "1.0.3",
+  "version": "1.0.5",
   "publishConfig": {
     "access": "public"
   },
@@ -35,6 +35,7 @@
     "./utils/layouts": "./src/styles/utils/layouts.css",
     "./utils/theme": "./src/styles/utils/theme.css",
     "./components": "./src/styles/components/bundle.css",
+    "./components/alerts": "./src/styles/components/alerts.css",
     "./components/badges": "./src/styles/components/badges.css",
     "./components/breadcrumbs": "./src/styles/components/breadcrumbs.css",
     "./components/buttons": "./src/styles/components/buttons.css",

package/src/styles/components/alerts.css

@@ -0,0 +1,20 @@
+@layer components.alerts {
+    :where(.nc-alert) {
+        background: var(--surface);
+        color: var(--text);
+        gap: 1ch;
+    }
+
+    :where(.nc-alert)>.nc-icon {
+        margin-block: calc((var(--line-height-base) - var(--icon-size)) / 2);
+    }
+
+    :where(.nc-alert-title) {
+        font-weight: var(--font-weight-heading);
+    }
+
+    :where(.nc-alert.-filled) {
+        background: var(--surface-hover);
+        color: var(--text-hover);
+    }
+}

package/src/styles/components/bundle.css

@@ -1,12 +1,13 @@
+@import "./alerts.css";
 @import "./badges.css";
+@import "./breadcrumbs.css";
 @import "./buttons.css";
 @import "./card.css";
 @import "./dialogs.css";
+@import "./forms.css";
 @import "./gallery.css";
 @import "./icons.css";
 @import "./inputs/bundle.css";
+@import "./lists.css";
 @import "./notifications.css";
 @import "./tables.css";
-@import "./lists.css";
-@import "./breadcrumbs.css";
-@import "./forms.css";

package/src/styles/components/buttons.css

@@ -212,6 +212,10 @@
         &.-icon.-small {
             padding: 0;
         }
+
+        &.-aligned {
+            margin-inline: calc(-1 * var(--_button-padding-inline));
+        }
     }
 
     :where(input[type='file']:not([class])) {

package/src/styles/components/forms.css

@@ -24,23 +24,19 @@
     }
 
     :where(legend:not([class]), .nc-legend) {
-        font-family: var(--font-family-default);
-        letter-spacing: var(--tracking-tight);
-        font-weight: var(--font-weight-active);
-        color: var(--text, var(--color-text-base));
-        display: block;
-        font-size: var(--font-size-base);
         padding: 0;
         border: none;
         border-radius: 0;
         inline-size: 100%;
-        margin-block-end: 0.75lh;
+
+        &+* {
+            margin-block-start: var(--nc-legend-spacing, 0.75lh);
+        }
     }
 
     :where( :is(fieldset:not([class]), .nc-fieldset):has( :is(.nc-legend + .nc-hint, legend:not([class]) + .nc-hint)) > :is(legend:not([class]), .nc-legend)) {
-        margin-block-end: 0;
-
         &+.nc-hint {
+            --nc-legend-spacing: 0;
             margin-block-end: 0.6lh;
         }
     }

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

@@ -8,13 +8,13 @@
         max-inline-size: var(--input-field-max-inline-size);
         place-items: start;
 
-        & > label,
-        & > .nc-stack {
+        &>label,
+        &>.nc-stack {
             gap: 0.125lh;
             line-height: var(--line-height-small);
         }
 
-        & > .nc-cluster {
+        &>.nc-cluster {
             gap: 1ch;
         }
     }
@@ -49,7 +49,7 @@
         place-items: start;
         gap: 0;
 
-        & > [data-label] {
+        &>[data-label] {
             grid-area: label;
             padding-inline-start: 1ch;
         }
@@ -58,7 +58,7 @@
             min-block-size: var(--line-height-base);
         }
 
-        & > [data-input] {
+        &>[data-input] {
             grid-area: checkbox;
         }
 
@@ -68,12 +68,9 @@
     }
 
     :where(.nc-radio-field, .nc-checkbox-field) {
-        & fieldset {
-            margin-block-start: 0.6lh;
-        }
+        gap: 0;
 
-        & fieldset > *:not(:first-child) {
+        >*:not(:first-child) {
             margin-block-start: 0.6lh;
         }
     }
-}

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

@@ -1,43 +1,38 @@
 @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) {
-        --_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;
-        }
+        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);
@@ -48,7 +43,7 @@
             align-items: center;
             justify-content: center;
 
-            > .nc-input-label {
+            >.nc-input-label {
                 color: inherit;
             }
 
@@ -58,13 +53,11 @@
             }
 
             &:first-child {
-                border-radius: var(--_segmented-control-border-radius)
-                    var(--_segmented-control-border-radius) 0 0;
+                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);
+                border-radius: 0 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius);
             }
 
             &:not(:last-child) {
@@ -97,15 +90,13 @@
             grid-auto-columns: 1fr;
             grid-auto-flow: column;
 
-            > label {
+            >label {
                 &:first-child {
-                    border-radius: var(--_segmented-control-border-radius) 0 0
-                        var(--_segmented-control-border-radius);
+                    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;
+                    border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
                 }
 
                 &:not(:last-child) {

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

@@ -1,14 +1,11 @@
 @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-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;