@nordcode/ui 1.0.3 → 1.0.4

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,54 @@
   }
 }
 
+@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;
+  }
+}
+
 @layer components.gallery {
   :where(.nc-gallery) {
     gap: var(--gallery-gap, var(--spacing-base));
@@ -2103,6 +2214,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 +2397,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.4",
   "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])) {