@nordcode/ui 1.0.0 → 1.0.2

package/README.md

@@ -10,14 +10,14 @@ You can use this browserlist config to target the Baseline Widely Adapted standa
 
 ```json
 [
-    "Chrome > 0 and last 2.5 years"",
-    "ChromeAndroid > 0 and last 2.5 years"",
-    "Edge > 0 and last 2.5 years"",
-    "Firefox > 0 and last 2.5 years"",
-    "FirefoxAndroid > 0 and last 2.5 years"",
-    "Safari > 0 and last 2.5 years"",
-    "iOS > 0 and last 2.5 years"",
-    "not dead""
+    "Chrome > 0 and last 2.5 years",
+    "ChromeAndroid > 0 and last 2.5 years",
+    "Edge > 0 and last 2.5 years",
+    "Firefox > 0 and last 2.5 years",
+    "FirefoxAndroid > 0 and last 2.5 years",
+    "Safari > 0 and last 2.5 years",
+    "iOS > 0 and last 2.5 years",
+    "not dead"
 ]
 ```
 

package/out/bundle.css

@@ -910,10 +910,6 @@
     display: flex;
   }
 
-  :where(.nc-stack).-inherit {
-    gap: var(--stack-gap, var(--spacing-base));
-  }
-
   :where(.nc-stack).-stretched {
     inline-size: 100%;
   }
@@ -975,10 +971,6 @@
     display: flex;
   }
 
-  :where(.nc-cluster).-inherit {
-    gap: var(--cluster-gap, var(--spacing-base));
-  }
-
   :where(.nc-cluster).-centered {
     align-items: center;
   }
@@ -1061,49 +1053,48 @@
     grid-area: pile;
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-inherit {
+  :where(.nc-ram-grid) {
+    --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
+    --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
+    --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
+    --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
+    --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
+    gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
+    grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
+    display: grid;
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
     gap: inherit;
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-tiny {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
     gap: var(--spacing-tiny);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nearest {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
     gap: var(--spacing-nearest);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-near {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
     gap: var(--spacing-near);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-base {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
     gap: var(--spacing-base);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-far {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
     gap: var(--spacing-far);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-farthest {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
     gap: var(--spacing-farthest);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nogap {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
     gap: 0;
   }
-
-  :where(.nc-ram-grid) {
-    --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
-    --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
-    --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
-    --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
-    --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
-    row-gap: var(--_nc-ram-grid-gap-row);
-    column-gap: var(--_nc-ram-grid-gap-column);
-    grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
-    display: grid;
-  }
 }
 
 @layer components, helpers;

package/out/bundle_configless.css

@@ -645,10 +645,6 @@
     display: flex;
   }
 
-  :where(.nc-stack).-inherit {
-    gap: var(--stack-gap, var(--spacing-base));
-  }
-
   :where(.nc-stack).-stretched {
     inline-size: 100%;
   }
@@ -710,10 +706,6 @@
     display: flex;
   }
 
-  :where(.nc-cluster).-inherit {
-    gap: var(--cluster-gap, var(--spacing-base));
-  }
-
   :where(.nc-cluster).-centered {
     align-items: center;
   }
@@ -796,49 +788,48 @@
     grid-area: pile;
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-inherit {
+  :where(.nc-ram-grid) {
+    --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
+    --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
+    --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
+    --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
+    --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
+    gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
+    grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
+    display: grid;
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
     gap: inherit;
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-tiny {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
     gap: var(--spacing-tiny);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nearest {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
     gap: var(--spacing-nearest);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-near {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
     gap: var(--spacing-near);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-base {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
     gap: var(--spacing-base);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-far {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
     gap: var(--spacing-far);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-farthest {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
     gap: var(--spacing-farthest);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nogap {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
     gap: 0;
   }
-
-  :where(.nc-ram-grid) {
-    --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
-    --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
-    --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
-    --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
-    --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
-    row-gap: var(--_nc-ram-grid-gap-row);
-    column-gap: var(--_nc-ram-grid-gap-column);
-    grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
-    display: grid;
-  }
 }
 
 @layer components, helpers;

package/out/complete.css

@@ -910,10 +910,6 @@
     display: flex;
   }
 
-  :where(.nc-stack).-inherit {
-    gap: var(--stack-gap, var(--spacing-base));
-  }
-
   :where(.nc-stack).-stretched {
     inline-size: 100%;
   }
@@ -975,10 +971,6 @@
     display: flex;
   }
 
-  :where(.nc-cluster).-inherit {
-    gap: var(--cluster-gap, var(--spacing-base));
-  }
-
   :where(.nc-cluster).-centered {
     align-items: center;
   }
@@ -1061,49 +1053,48 @@
     grid-area: pile;
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-inherit {
+  :where(.nc-ram-grid) {
+    --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
+    --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
+    --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
+    --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
+    --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
+    gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
+    grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
+    display: grid;
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
     gap: inherit;
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-tiny {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
     gap: var(--spacing-tiny);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nearest {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
     gap: var(--spacing-nearest);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-near {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
     gap: var(--spacing-near);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-base {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
     gap: var(--spacing-base);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-far {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
     gap: var(--spacing-far);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-farthest {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
     gap: var(--spacing-farthest);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nogap {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
     gap: 0;
   }
-
-  :where(.nc-ram-grid) {
-    --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
-    --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
-    --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
-    --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
-    --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
-    row-gap: var(--_nc-ram-grid-gap-row);
-    column-gap: var(--_nc-ram-grid-gap-column);
-    grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
-    display: grid;
-  }
 }
 
 @layer components, helpers;
@@ -2381,7 +2372,7 @@
     --_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, oklch(var(--color-surface-subtle) / .05));
+    --_notification-center-background: var(--notification-center-background, color-mix(in oklch, var(---color-surface-subtle), transparent 95%) ;);
   }
 
   :where(.nc-notification-center, .nc-notification-output) {
@@ -2395,7 +2386,7 @@
     inset-inline-end: 0;
   }
 
-  .nc-notification-center {
+  :where(.nc-notification-center) {
     -webkit-backdrop-filter: blur(3px);
     backdrop-filter: blur(3px);
     background-color: var(--_notification-center-background);

package/out/complete_configless.css

@@ -645,10 +645,6 @@
     display: flex;
   }
 
-  :where(.nc-stack).-inherit {
-    gap: var(--stack-gap, var(--spacing-base));
-  }
-
   :where(.nc-stack).-stretched {
     inline-size: 100%;
   }
@@ -710,10 +706,6 @@
     display: flex;
   }
 
-  :where(.nc-cluster).-inherit {
-    gap: var(--cluster-gap, var(--spacing-base));
-  }
-
   :where(.nc-cluster).-centered {
     align-items: center;
   }
@@ -796,49 +788,48 @@
     grid-area: pile;
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-inherit {
+  :where(.nc-ram-grid) {
+    --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
+    --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
+    --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
+    --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
+    --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
+    gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
+    grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
+    display: grid;
+  }
+
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-inherit {
     gap: inherit;
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-tiny {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-tiny {
     gap: var(--spacing-tiny);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nearest {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nearest {
     gap: var(--spacing-nearest);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-near {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-near {
     gap: var(--spacing-near);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-base {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-base {
     gap: var(--spacing-base);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-far {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-far {
     gap: var(--spacing-far);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-farthest {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-farthest {
     gap: var(--spacing-farthest);
   }
 
-  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher).-nogap {
+  :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid).-nogap {
     gap: 0;
   }
-
-  :where(.nc-ram-grid) {
-    --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
-    --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
-    --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
-    --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
-    --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
-    row-gap: var(--_nc-ram-grid-gap-row);
-    column-gap: var(--_nc-ram-grid-gap-column);
-    grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count), minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
-    display: grid;
-  }
 }
 
 @layer components, helpers;
@@ -2116,7 +2107,7 @@
     --_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, oklch(var(--color-surface-subtle) / .05));
+    --_notification-center-background: var(--notification-center-background, color-mix(in oklch, var(---color-surface-subtle), transparent 95%) ;);
   }
 
   :where(.nc-notification-center, .nc-notification-output) {
@@ -2130,7 +2121,7 @@
     inset-inline-end: 0;
   }
 
-  .nc-notification-center {
+  :where(.nc-notification-center) {
     -webkit-backdrop-filter: blur(3px);
     backdrop-filter: blur(3px);
     background-color: var(--_notification-center-background);

package/package.json

@@ -8,7 +8,11 @@
     "Boneless UI"
   ],
   "license": "AGPL-3.0-or-later",
-  "version": "1.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
+  },
+  "version": "1.0.2",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/components/notifications.css

@@ -3,10 +3,9 @@
         --_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,
-            oklch(var(--color-surface-subtle) / 0.05)
-        );
+        --_notification-center-background: var(--notification-center-background,
+                color-mix(in oklch, var(---color-surface-subtle), transparent 95%);
+            );
     }
 
     :where(.nc-notification-center, .nc-notification-output) {
@@ -21,7 +20,7 @@
         pointer-events: none;
     }
 
-    .nc-notification-center {
+    :where(.nc-notification-center) {
         block-size: 100%;
         backdrop-filter: blur(3px);
         background-color: var(--_notification-center-background);
@@ -108,8 +107,7 @@
     }
 
     :where(.nc-notification.-closing) {
-        animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1)
-            forwards;
+        animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1) forwards;
     }
 
     @keyframes pop-in {

package/src/styles/utils/layouts.css

@@ -1,4 +1,5 @@
 @layer utils {
+
     /* Layout classes that handle 80% of the layout*/
     :where(.nc-box) {
         padding: var(--spacing-base);
@@ -39,46 +40,42 @@
         gap: var(--spacing-base);
         align-items: flex-start;
 
-        &.-inherit {
-            gap: var(--stack-gap, var(--spacing-base));
-        }
-
         &.-stretched {
             inline-size: 100%;
 
-            & > * {
+            &>* {
                 inline-size: 100%;
             }
         }
 
-        &.-contained > * {
+        &.-contained>* {
             max-inline-size: 100%;
         }
     }
 
     :where(.nc-flow) {
-        > * + * {
+        >*+* {
             margin-block-start: var(--flow-gap, 0.6lh);
         }
 
-        > * {
+        >* {
             max-inline-size: var(--flow-base-meassure, 72ch);
         }
 
-        > *:is(h1, h2, h3, h4, h5, h6) {
+        >*:is(h1, h2, h3, h4, h5, h6) {
             max-inline-size: var(--flow-headline-meassure, 32ch);
             --flow-gap: 1.3lh;
         }
 
-        > *:is(h1, h2, h3, h4, h5, h6) + p {
+        >*:is(h1, h2, h3, h4, h5, h6)+p {
             --flow-gap: 0.5lh;
         }
 
-        > p + p {
+        >p+p {
             --flow-gap: 0.8lh;
         }
 
-        > figure {
+        >figure {
             margin-inline: 0;
             margin-block: 1lh;
         }
@@ -114,10 +111,6 @@
         gap: var(--spacing-base);
         align-items: flex-start;
 
-        &.-inherit {
-            gap: var(--cluster-gap, var(--spacing-base));
-        }
-
         &.-centered {
             align-items: center;
         }
@@ -138,13 +131,13 @@
         align-items: flex-start;
         gap: var(--with-sidebar-gap, var(--spacing-far));
 
-        & > [data-aside] {
+        &>[data-aside] {
             flex-grow: 1;
             min-width: min-content;
             flex-basis: var(--with-sidebar-target-width, 20rem);
         }
 
-        & > [data-grow] {
+        &>[data-grow] {
             flex-basis: 0;
             flex-grow: 999;
             min-width: var(--with-sidebar-min-size, 50%);
@@ -177,10 +170,8 @@
     */
     :where(.nc-grid) {
         display: grid;
-        grid-template-columns: repeat(
-                var(--grid-placement, auto-fill),
-                minmax(var(--grid-min-item-size, 16rem), 1fr)
-            );
+        grid-template-columns: repeat(var(--grid-placement, auto-fill),
+                minmax(var(--grid-min-item-size, 16rem), 1fr));
         gap: var(--grid-gap, var(--spacing-base));
 
         /* A split 50/50 layout */
@@ -220,7 +211,7 @@
         gap: var(--switcher-gap, var(--spacing-base));
         align-items: var(--switcher-vertical-alignment, flex-start);
 
-        & > * {
+        &>* {
             flex-grow: 1;
             flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
         }
@@ -228,7 +219,7 @@
         /* Max 2 items,
         so anything greater than 2 is ful width */
 
-        & > :nth-child(n + 4) {
+        &> :nth-child(n + 4) {
             flex-basis: 100%;
         }
     }
@@ -241,12 +232,25 @@
         place-items: center;
         grid: [pile] 1fr / [pile] 1fr;
 
-        & > * {
+        &>* {
             grid-area: pile;
         }
     }
 
-    :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher) {
+    :where(.nc-ram-grid) {
+        --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
+        --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
+        --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
+        --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
+        --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
+
+        display: grid;
+        gap: var(--_nc-ram-grid-gap-column) var(--_nc-ram-grid-gap-row);
+        grid-template-columns: repeat(var(--_nc-ram-grid-repeat-count),
+                minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr));
+    }
+
+    :where(.nc-stack, .nc-cluster, .nc-with-sidebar, .nc-grid, .nc-gallery, .nc-switcher, .nc-ram-grid) {
         &.-inherit {
             gap: inherit;
         }
@@ -279,20 +283,4 @@
             gap: 0;
         }
     }
-
-    :where(.nc-ram-grid) {
-        --_nc-ram-grid-gap-row: var(--nc-ram-grid-gap-row, var(--_nc-ram-grid-gap));
-        --_nc-ram-grid-gap-column: var(--nc-ram-grid-gap-column, var(--_nc-ram-grid-gap));
-        --_nc-ram-grid-gap: var(--nc-ram-grid-gap, var(--spacing-near));
-        --_nc-ram-grid-min-width: var(--nc-ram-grid-min-width, 150px);
-        --_nc-ram-grid-repeat-count: var(--nc-ram-grid-repeat-count, auto-fit);
-
-        display: grid;
-        row-gap: var(--_nc-ram-grid-gap-row);
-        column-gap: var(--_nc-ram-grid-gap-column);
-        grid-template-columns: repeat(
-                var(--_nc-ram-grid-repeat-count),
-                minmax(min(var(--_nc-ram-grid-min-width), 100%), 1fr)
-            );
-    }
 }

package/CHANGELOG.md

@@ -1,157 +0,0 @@
-# @nordcode/ui
-
-## 2.3.0
-
-### Minor Changes
-
--   ## Add default shadows to UI elements & tweaks
-
-    -   apply heading font weight to headings
-    -   tweak button design
-        -   add slight shadow to default buttons
-        -   make offset button a variant
-    -   add inset shadow to inputs by default
-    -   style input range thumb
-    -   add shadow to switch thumb
-
-## 2.2.0
-
-### Minor Changes
-
--   ## Small tweaks and additions
-
-    -   add all font sizes as utility classes
-    -   add sr-only as screen-reader class too
-    -   make details more clickable by adding the padding to the summary instead
-    -   add badges variants for primary & secondary
-    -   make breadcrumbs and buttons more consistent
-
-## 2.1.0
-
-### Minor Changes
-
--   ## Tweaks to base styles
-
-    -   Add missing style: `var`
-    -   Add text-rendering: optimizeSpeed;
-    -   Fix Metalist styles
-    -   Increase details default padding
-    -   Simplify and improve blockquote styles
-    -   Make em and i serif for improved italics
-    -   Add font-smoothing to base
-    -   Use `ex` in nc-flow for improved vertical rhythm
-    -   Update line-height calculations after switching to `ex`-based line-heights in the generator
-
-## 2.0.0
-
-### Major Changes
-
--   Change most spacings to use lh,ch and ex
-
-    ## What changed
-
-    -   Most components now have their spacings based on lh, ch and ex instead of the spacings
-
-    ## Why we did it
-
-    -   We keep a consistent and flexible UI like this
-    -   AND we can be more flexible in the spacing scale without creating UI issues in the components
-
-    ## How to migrate
-
-    Probably just use it and make sure, your styles are not broken
-
-## 1.2.0
-
-### Minor Changes
-
--   Lots of small tweaks and new layouts
--   feat(ui): extend styles for kbd and code and at scroll-margin to :target
--   feat(ui): remove padding on small icon buttons
--   feat(ui): simplify .text-assistive style
--   feat(ui): add more layout utilities
-    -   .nc-region for page sections
-    -   .nc-grid for common grid layouts (50:50 / thirds)
-    -   .nc-switcher for items that go beneath each other automatically
-    -   add -between to cluster to provide for spacing-between
--   feat(ui): add style for <del>
-
-## 1.1.2
-
-### Patch Changes
-
--   Feat: use primary contrast color in checkboxes
-
-## 1.1.1
-
-### Patch Changes
-
--   Fix generated dark theme
-
-## 1.1.0
-
-### Minor Changes
-
--   Fix dark theme, tweak styles, add easings
--   ab524dd: Fix Icon Button and remove rlh support checks
-
-## 1.0.0
-
-### Major Changes
-
--   First proper release
-
-    ## 2023-12-17: Chroma-js & color renames
-
-    **Includes Breaking Changes**
-
-    -   switched to chroma-js to generate all colors based on a scale
-    -   renamed `color-brand-primary-subtle` to `color-brand-primary-surface` to better reflect its
-        purpose
-    -   renamed `color-brand-surface-subtle` to `color-brand-surface-surface` to better reflect its
-        purpose
-    -   renamed `color-info-subtle` to `color-info-surface` to better reflect its purpose
-    -   renamed `color-warning-subtle` to `color-warning-surface` to better reflect its purpose
-    -   renamed `color-success-subtle` to `color-success-surface` to better reflect its purpose
-    -   renamed `color-danger-subtle` to `color-danger-surface` to better reflect its purpose
-
-    _Notes: Needs tweaking for some of the values_
-
-    ## 2023-12-18: Tweak presets
-
-    Tweak preset and color generations a little bit.
-
-    ## 2023-12-19: Tweak presets, design improvements
-
-    -   Tweak preset values for `brutalist`
-    -   Change default text-underline-offset to `0.25lh`
-    -   Fix description-list style
-
-    ## 2023-12-22: Fix shadow generation
-
-    ## 2023-12-25: Extend color possibilities
-
-    -   Split Neutral Chroma into 3 for FG, BG and Borders
-    -   Allow secondary brand color to be used in generating FG and BG neutral colors
-
-    ## 2023-12-27: More color tweaks
-
-    -   tweak button colors and fix base button hover
-    -   use base chroma and hue in generation of scales when generating colors
-
-### Minor Changes
-
--   d829e99: added --gallery-scroll-snap-stop css prop to gallery
--   6025a83: add first batch of css component styles
--   c42d1f3: add new export /media for css @custom-media
-
-### Patch Changes
-
--   a59822e: fixed border-radius-round typo (1e5px)
--   bcae962: add icons and assets exports
-
-## 0.0.1
-
-### Patch Changes
-
--   65eca97: first try of changesets