@nordcode/ui 2.1.9 → 2.2.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 2.2.0 (2026-01-03)
+
+### features
+
+- simplify dialog styles
+- use ch/lh in few select places (measures, tracking)
+- extend `nc-segmented-control` to be usable for button groups, tabgroups and horizontal controls
+
 ## 2.1.9 (2026-01-02)
 
 ### fixes

package/out/bundle.css

@@ -12,11 +12,11 @@
     --line-height-base: 1.55;
     --line-height-small: 1.1;
     --tracking-base: normal;
-    --tracking-tight: -.02em;
-    --tracking-wide: .03em;
-    --measure-large: 56em;
-    --measure-base: 44em;
-    --measure-small: 28em;
+    --tracking-tight: -.04ch;
+    --tracking-wide: .06ch;
+    --measure-large: 88ch;
+    --measure-base: 72ch;
+    --measure-small: 44ch;
     --font-size-smallest: max(.75rem, 12px);
     --font-size-small: max(.875rem, 14px);
     --font-size-base: 1rem;
@@ -468,7 +468,7 @@
       grid-column: 1 / 1;
       min-block-size: 100%;
       padding-block-end: 0;
-      padding-inline-end: 1em;
+      padding-inline-end: var(--control-spacing-base, 1em);
     }
 
     :where(dt):not(:last-of-type) {
@@ -966,11 +966,11 @@
   }
 
   :where(.nc-flow) > * {
-    max-inline-size: var(--flow-base-meassure, 44em);
+    max-inline-size: var(--flow-base-meassure, 72ch);
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
-    max-inline-size: var(--flow-headline-meassure, 22em);
+    max-inline-size: var(--flow-headline-meassure, 32ch);
     --flow-gap: 1.5lh;
   }
 

package/out/bundle_configless.css

@@ -252,7 +252,7 @@
       grid-column: 1 / 1;
       min-block-size: 100%;
       padding-block-end: 0;
-      padding-inline-end: 1em;
+      padding-inline-end: var(--control-spacing-base, 1em);
     }
 
     :where(dt):not(:last-of-type) {
@@ -750,11 +750,11 @@
   }
 
   :where(.nc-flow) > * {
-    max-inline-size: var(--flow-base-meassure, 44em);
+    max-inline-size: var(--flow-base-meassure, 72ch);
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
-    max-inline-size: var(--flow-headline-meassure, 22em);
+    max-inline-size: var(--flow-headline-meassure, 32ch);
     --flow-gap: 1.5lh;
   }
 

package/out/complete.css

@@ -12,11 +12,11 @@
     --line-height-base: 1.55;
     --line-height-small: 1.1;
     --tracking-base: normal;
-    --tracking-tight: -.02em;
-    --tracking-wide: .03em;
-    --measure-large: 56em;
-    --measure-base: 44em;
-    --measure-small: 28em;
+    --tracking-tight: -.04ch;
+    --tracking-wide: .06ch;
+    --measure-large: 88ch;
+    --measure-base: 72ch;
+    --measure-small: 44ch;
     --font-size-smallest: max(.75rem, 12px);
     --font-size-small: max(.875rem, 14px);
     --font-size-base: 1rem;
@@ -468,7 +468,7 @@
       grid-column: 1 / 1;
       min-block-size: 100%;
       padding-block-end: 0;
-      padding-inline-end: 1em;
+      padding-inline-end: var(--control-spacing-base, 1em);
     }
 
     :where(dt):not(:last-of-type) {
@@ -966,11 +966,11 @@
   }
 
   :where(.nc-flow) > * {
-    max-inline-size: var(--flow-base-meassure, 44em);
+    max-inline-size: var(--flow-base-meassure, 72ch);
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
-    max-inline-size: var(--flow-headline-meassure, 22em);
+    max-inline-size: var(--flow-headline-meassure, 32ch);
     --flow-gap: 1.5lh;
   }
 
@@ -1969,6 +1969,8 @@
   :where(.nc-dialog) :where(.dialog-content) {
     padding-inline: var(--_dialog-padding-inline);
     padding-block: var(--spacing-near);
+    overscroll-behavior: contain;
+    scroll-behavior: smooth;
     grid-area: content;
     overflow: auto;
   }
@@ -2457,86 +2459,145 @@
     outline-offset: 0;
   }
 
+  :where(.nc-segmented-control):focus-within:has( > button) {
+    outline: none;
+  }
+
   :where(.nc-segmented-control) input {
     opacity: 0;
     position: absolute;
   }
 
-  :where(.nc-segmented-control) label {
+  :where(.nc-segmented-control) > * {
     padding-inline: var(--_input-padding-inline);
     padding-block: var(--_input-padding-block);
     min-block-size: var(--segmented-control-min-height, var(--control-height-base));
     color: var(--_input-color);
     border: var(--_input-border);
+    cursor: pointer;
+    background: none;
     justify-content: center;
     align-items: center;
     display: flex;
   }
 
-  :where(.nc-segmented-control) label > .nc-input-label {
+  :where(.nc-segmented-control) > * > .nc-input-label {
     color: inherit;
   }
 
-  :where(.nc-segmented-control) label:hover {
+  button:is(:where(.nc-segmented-control) > *) {
+    box-shadow: none;
+    border-radius: 0;
+    transform: none;
+  }
+
+  button:is(:where(.nc-segmented-control) > *):active {
+    scale: 1;
+  }
+
+  button:is(:where(.nc-segmented-control) > *):focus-within {
+    outline-offset: 0;
+    outline: 1px auto;
+  }
+
+  :where(.nc-segmented-control) > *:hover {
     --current-background: var(--_input-hover-background);
     background-color: var(--_input-hover-background);
   }
 
-  :where(.nc-segmented-control) label:first-child {
+  :where(.nc-segmented-control) > *:first-child {
     border-radius: var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0 0;
   }
 
-  :where(.nc-segmented-control) label:last-child {
+  :where(.nc-segmented-control) > *:last-child {
     border-radius: 0 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius);
   }
 
-  :where(.nc-segmented-control) label:not(:last-child) {
+  :where(.nc-segmented-control) > *:not(:last-child) {
     border-block-end: var(--border-width-thin) solid var(--color-border-muted);
   }
 
-  :where(.nc-segmented-control) label:not(:first-child) {
+  :where(.nc-segmented-control) > *:not(:first-child) {
     border-block-start: none;
   }
 
-  :where(.nc-segmented-control) label:has(input:checked) {
+  :where(.nc-segmented-control) > *[aria-pressed="true"], :where(.nc-segmented-control) > *[aria-current] {
     background: var(--_segmented-control-checked-surface-color);
     color: var(--_segmented-control-checked-text-color);
     box-shadow: var(--shadow-near);
+    font-weight: var(--font-weight-default);
   }
 
-  :where(.nc-segmented-control) label:focus-within {
+  :where(.nc-segmented-control) > *:has(input:checked) {
+    background: var(--_segmented-control-checked-surface-color);
+    color: var(--_segmented-control-checked-text-color);
+    box-shadow: var(--shadow-near);
+    font-weight: var(--font-weight-default);
+  }
+
+  :where(.nc-segmented-control) > *:focus-within {
     outline: none;
   }
 
-  :where(.nc-segmented-control) label:has(input:disabled) {
+  :where(.nc-segmented-control) > *:disabled, :where(.nc-segmented-control) > *[aria-disabled="true"] {
+    filter: var(--_input-disabled-filter);
+    cursor: not-allowed;
+  }
+
+  :where(.nc-segmented-control) > *:has(input:disabled) {
     filter: var(--_input-disabled-filter);
     cursor: not-allowed;
   }
 
-  @container segmented-control (width >= 32rem) {
+  @container segmented-control (width >= 32rem) or style(--horizontal: true) {
     :where(.nc-segmented-control) {
       grid-auto-columns: 1fr;
       grid-auto-flow: column;
+      inline-size: auto;
     }
 
-    :where(.nc-segmented-control) > label:first-child {
+    :where(.nc-segmented-control) > *:first-child {
       border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
     }
 
-    :where(.nc-segmented-control) > label:last-child {
+    :where(.nc-segmented-control) > *:last-child {
       border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
     }
 
-    :where(.nc-segmented-control) > label:not(:last-child) {
+    :where(.nc-segmented-control) > *:not(:last-child) {
       border-block-end: var(--_input-border);
       border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
     }
 
-    :where(.nc-segmented-control) > label:not(:first-child) {
+    :where(.nc-segmented-control) > *:not(:first-child) {
       border-block-start: var(--_input-border);
       border-inline-start: none;
     }
   }
+
+  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) {
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    inline-size: auto;
+  }
+
+  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:first-child {
+    border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
+  }
+
+  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:last-child {
+    border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
+  }
+
+  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:not(:last-child) {
+    border-block-end: var(--_input-border);
+    border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
+  }
+
+  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:not(:first-child) {
+    border-block-start: var(--_input-border);
+    border-inline-start: none;
+  }
 }
 
 @layer components.input-switch {

package/out/complete_configless.css

@@ -252,7 +252,7 @@
       grid-column: 1 / 1;
       min-block-size: 100%;
       padding-block-end: 0;
-      padding-inline-end: 1em;
+      padding-inline-end: var(--control-spacing-base, 1em);
     }
 
     :where(dt):not(:last-of-type) {
@@ -750,11 +750,11 @@
   }
 
   :where(.nc-flow) > * {
-    max-inline-size: var(--flow-base-meassure, 44em);
+    max-inline-size: var(--flow-base-meassure, 72ch);
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
-    max-inline-size: var(--flow-headline-meassure, 22em);
+    max-inline-size: var(--flow-headline-meassure, 32ch);
     --flow-gap: 1.5lh;
   }
 
@@ -1753,6 +1753,8 @@
   :where(.nc-dialog) :where(.dialog-content) {
     padding-inline: var(--_dialog-padding-inline);
     padding-block: var(--spacing-near);
+    overscroll-behavior: contain;
+    scroll-behavior: smooth;
     grid-area: content;
     overflow: auto;
   }
@@ -2241,86 +2243,145 @@
     outline-offset: 0;
   }
 
+  :where(.nc-segmented-control):focus-within:has( > button) {
+    outline: none;
+  }
+
   :where(.nc-segmented-control) input {
     opacity: 0;
     position: absolute;
   }
 
-  :where(.nc-segmented-control) label {
+  :where(.nc-segmented-control) > * {
     padding-inline: var(--_input-padding-inline);
     padding-block: var(--_input-padding-block);
     min-block-size: var(--segmented-control-min-height, var(--control-height-base));
     color: var(--_input-color);
     border: var(--_input-border);
+    cursor: pointer;
+    background: none;
     justify-content: center;
     align-items: center;
     display: flex;
   }
 
-  :where(.nc-segmented-control) label > .nc-input-label {
+  :where(.nc-segmented-control) > * > .nc-input-label {
     color: inherit;
   }
 
-  :where(.nc-segmented-control) label:hover {
+  button:is(:where(.nc-segmented-control) > *) {
+    box-shadow: none;
+    border-radius: 0;
+    transform: none;
+  }
+
+  button:is(:where(.nc-segmented-control) > *):active {
+    scale: 1;
+  }
+
+  button:is(:where(.nc-segmented-control) > *):focus-within {
+    outline-offset: 0;
+    outline: 1px auto;
+  }
+
+  :where(.nc-segmented-control) > *:hover {
     --current-background: var(--_input-hover-background);
     background-color: var(--_input-hover-background);
   }
 
-  :where(.nc-segmented-control) label:first-child {
+  :where(.nc-segmented-control) > *:first-child {
     border-radius: var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0 0;
   }
 
-  :where(.nc-segmented-control) label:last-child {
+  :where(.nc-segmented-control) > *:last-child {
     border-radius: 0 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius);
   }
 
-  :where(.nc-segmented-control) label:not(:last-child) {
+  :where(.nc-segmented-control) > *:not(:last-child) {
     border-block-end: var(--border-width-thin) solid var(--color-border-muted);
   }
 
-  :where(.nc-segmented-control) label:not(:first-child) {
+  :where(.nc-segmented-control) > *:not(:first-child) {
     border-block-start: none;
   }
 
-  :where(.nc-segmented-control) label:has(input:checked) {
+  :where(.nc-segmented-control) > *[aria-pressed="true"], :where(.nc-segmented-control) > *[aria-current] {
     background: var(--_segmented-control-checked-surface-color);
     color: var(--_segmented-control-checked-text-color);
     box-shadow: var(--shadow-near);
+    font-weight: var(--font-weight-default);
   }
 
-  :where(.nc-segmented-control) label:focus-within {
+  :where(.nc-segmented-control) > *:has(input:checked) {
+    background: var(--_segmented-control-checked-surface-color);
+    color: var(--_segmented-control-checked-text-color);
+    box-shadow: var(--shadow-near);
+    font-weight: var(--font-weight-default);
+  }
+
+  :where(.nc-segmented-control) > *:focus-within {
     outline: none;
   }
 
-  :where(.nc-segmented-control) label:has(input:disabled) {
+  :where(.nc-segmented-control) > *:disabled, :where(.nc-segmented-control) > *[aria-disabled="true"] {
+    filter: var(--_input-disabled-filter);
+    cursor: not-allowed;
+  }
+
+  :where(.nc-segmented-control) > *:has(input:disabled) {
     filter: var(--_input-disabled-filter);
     cursor: not-allowed;
   }
 
-  @container segmented-control (width >= 32rem) {
+  @container segmented-control (width >= 32rem) or style(--horizontal: true) {
     :where(.nc-segmented-control) {
       grid-auto-columns: 1fr;
       grid-auto-flow: column;
+      inline-size: auto;
     }
 
-    :where(.nc-segmented-control) > label:first-child {
+    :where(.nc-segmented-control) > *:first-child {
       border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
     }
 
-    :where(.nc-segmented-control) > label:last-child {
+    :where(.nc-segmented-control) > *:last-child {
       border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
     }
 
-    :where(.nc-segmented-control) > label:not(:last-child) {
+    :where(.nc-segmented-control) > *:not(:last-child) {
       border-block-end: var(--_input-border);
       border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
     }
 
-    :where(.nc-segmented-control) > label:not(:first-child) {
+    :where(.nc-segmented-control) > *:not(:first-child) {
       border-block-start: var(--_input-border);
       border-inline-start: none;
     }
   }
+
+  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) {
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    inline-size: auto;
+  }
+
+  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:first-child {
+    border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
+  }
+
+  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:last-child {
+    border-radius: 0 var(--_segmented-control-border-radius) var(--_segmented-control-border-radius) 0;
+  }
+
+  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:not(:last-child) {
+    border-block-end: var(--_input-border);
+    border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
+  }
+
+  :where(.nc-segmented-control-group.-horizontal) :where(.nc-segmented-control) > *:not(:first-child) {
+    border-block-start: var(--_input-border);
+    border-inline-start: none;
+  }
 }
 
 @layer components.input-switch {

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
   },
-  "version": "2.1.9",
+  "version": "2.2.0",
   "publishConfig": {
     "access": "public"
   },

package/src/styles/components/dialogs.css

@@ -131,6 +131,8 @@
             padding-inline: var(--_dialog-padding-inline);
             padding-block: var(--spacing-near);
             overflow: auto;
+            overscroll-behavior: contain;
+            scroll-behavior: smooth;
         }
 
         :where(.dialog-actions) {

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

@@ -34,12 +34,16 @@
             outline-offset: 0;
         }
 
+        &:focus-within:has(> button) {
+            outline: none;
+        }
+
         & input {
             opacity: 0;
             position: absolute;
         }
 
-        & label {
+        & > * {
             display: flex;
             padding-inline: var(--_input-padding-inline);
             padding-block: var(--_input-padding-block);
@@ -48,11 +52,28 @@
             border: var(--_input-border);
             align-items: center;
             justify-content: center;
+            cursor: pointer;
+            background: none;
 
             > .nc-input-label {
                 color: inherit;
             }
 
+            &button {
+                transform: none;
+                box-shadow: none;
+                border-radius: 0;
+
+                &:active {
+                    scale: 1;
+                }
+
+                &:focus-within {
+                    outline-offset: 0;
+                    outline: 1px auto;
+                }
+            }
+
             &:hover {
                 --current-background: var(--_input-hover-background);
                 background-color: var(--_input-hover-background);
@@ -74,29 +95,60 @@
                 border-block-start: none;
             }
 
-            &:has(input:checked) {
+            &:has(input:checked), &[aria-pressed="true"], &[aria-current] {
                 background: var(--_segmented-control-checked-surface-color);
                 color: var(--_segmented-control-checked-text-color);
                 box-shadow: var(--shadow-near);
+                font-weight: var(--font-weight-default);
             }
 
             &:focus-within {
                 outline: none;
             }
 
-            &:has(input:disabled) {
+            &:has(input:disabled), &:disabled, &[aria-disabled="true"] {
                 filter: var(--_input-disabled-filter);
                 cursor: not-allowed;
             }
         }
     }
 
-    @container segmented-control (min-width: 32rem) {
+    @container segmented-control (min-width: 32rem) or style(--horizontal: true) {
+        :where(.nc-segmented-control) {
+            grid-auto-columns: 1fr;
+            grid-auto-flow: column;
+            inline-size: auto;
+
+            > * {
+                &:first-child {
+                    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;
+                }
+
+                &:not(:last-child) {
+                    border-block-end: var(--_input-border);
+                    border-inline-end: var(--border-width-thin) solid var(--color-border-muted);
+                }
+
+                &:not(:first-child) {
+                    border-block-start: var(--_input-border);
+                    border-inline-start: none;
+                }
+            }
+        }
+    }
+
+    /* @todo: remove once style container queries are widely supported */
+    :where(.nc-segmented-control-group.-horizontal) {
         :where(.nc-segmented-control) {
             grid-auto-columns: 1fr;
             grid-auto-flow: column;
+            inline-size: auto;
 
-            > label {
+            > * {
                 &:first-child {
                     border-radius: var(--_segmented-control-border-radius) 0 0 var(--_segmented-control-border-radius);
                 }

package/src/styles/config/config.css

@@ -17,12 +17,12 @@
         --line-height-small: 1.1;
 
         --tracking-base: normal;
-        --tracking-tight: -0.02em;
-        --tracking-wide: 0.03em;
+        --tracking-tight: -0.04ch;
+        --tracking-wide: 0.06ch;
 
-        --measure-large: 56em;
-        --measure-base: 44em;
-        --measure-small: 28em;
+        --measure-large: 88ch;
+        --measure-base: 72ch;
+        --measure-small: 44ch;
 
         --font-size-smallest: max(0.75rem, 12px);
         --font-size-small: max(0.875rem, 14px);
@@ -113,7 +113,6 @@
         --lightness-diff: calc(var(--lightness-max) - var(--lightness-min));
         --lightness-contrast-cutoff: calc(var(--lightness-min) + var(--lightness-diff) * 0.5 + 0.05);
         --neutral-chroma-scale: 0.95;
-        --transparency-weaker: 0.8;
         --c-brand-primary: 0.3;
         --h-brand-primary: 265;
         --l-brand-primary-light: 0.56;

package/src/styles/utils/base.css

@@ -39,7 +39,7 @@
     @container description-list (min-width: 30rem) {
         :where(dt) {
             grid-column: 1 / 1;
-            padding-inline-end: 1em;
+            padding-inline-end: var(--control-spacing-base, 1em);
             padding-block-end: 0;
             min-block-size: 100%;
 

package/src/styles/utils/layouts.css

@@ -58,11 +58,11 @@
         }
 
         > * {
-            max-inline-size: var(--flow-base-meassure, 44em);
+            max-inline-size: var(--flow-base-meassure, 72ch);
         }
 
         > *:is(h1, h2, h3, h4, h5, h6) {
-            max-inline-size: var(--flow-headline-meassure, 22em);
+            max-inline-size: var(--flow-headline-meassure, 32ch);
             --flow-gap: 1.5lh;
         }