@nordcode/ui 1.0.11 → 1.1.0

package/out/complete_configless.css

@@ -26,7 +26,7 @@
     color-scheme: dark;
   }
 
-  :where(*) {
+  :where(:root) {
     --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
     --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
     --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
@@ -86,10 +86,6 @@
 @layer reset {
   *, :after, :before {
     box-sizing: border-box;
-    accent-color: var(--color-brand-primary-base);
-    font-kerning: normal;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
   }
 
   :where(:not(dialog)) {
@@ -103,11 +99,17 @@
     border-width: 0;
   }
 
-  :where(:focus-visible) {
-    transition: outline-offset var(--transition-duration-short) var(--ease-2);
+  @media (prefers-reduced-motion: no-preference) {
+    :where(:focus-visible) {
+      transition: outline-offset var(--transition-duration-short) var(--ease-2);
+    }
+
+    :where(:not(:active):focus-visible) {
+      transition-duration: var(--transition-duration-base);
+    }
   }
 
-  :where(:focus-visible, :focus) {
+  :where(:not(:active):focus-visible) {
     outline: var(--border-width-medium) solid var(--color-brand-primary-base);
     outline-offset: 1ch;
   }
@@ -116,28 +118,25 @@
     outline: none;
   }
 
-  :where(html) {
+  :where(:root) {
     -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
     text-size-adjust: none;
-    inline-size: 100%;
-    text-rendering: optimizeSpeed;
     block-size: 100%;
-    min-block-size: 100vh;
-  }
-
-  :where(body) {
-    font-weight: var(--font-weight-default);
     color: var(--color-text-base);
     background-color: var(--color-surface-muted);
     font-family: var(--font-family-default);
     line-height: var(--line-height-base);
-    min-block-size: 100%;
-    font-style: normal;
+    font-weight: var(--font-weight-default);
+    font-size-adjust: from-font;
+    interpolate-size: allow-keywords;
+    font-kerning: normal;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
   }
 
-  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
-    margin: 0;
+  :where(body) {
+    min-block-size: 100vh;
   }
 
   :where(ul[role="list"], ol[role="list"]) {
@@ -164,13 +163,17 @@
   }
 
   :where(figure) {
-    place-items: center;
+    grid-template-rows: 1fr auto;
+    place-content: center;
     gap: 0;
     display: grid;
   }
 
-  :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
+  :where(a[href], area, button, input:not([type="text"], [type="email"], [type="number"], [type="password"], [type=""], [type="tel"], [type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"], pre)) {
     cursor: pointer;
+  }
+
+  :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
   }
@@ -187,19 +190,10 @@
     letter-spacing: inherit;
   }
 
-  :where(label:not(class) + input, label:not(class) + select, label:not(class) + textarea) {
-    display: block;
-  }
-
-  :where(p, summary) {
-    max-inline-size: var(--measure-base);
-    font-size: inherit;
-    line-height: var(--line-height-base);
-    margin: 0;
-  }
-
   :where(p) {
+    text-wrap: balance;
     text-wrap: pretty;
+    max-inline-size: var(--measure-base);
   }
 
   :where(html):has(dialog:modal) {
@@ -209,6 +203,12 @@
 }
 
 @layer base {
+  :where(:root) {
+    accent-color: var(--color-brand-primary-base);
+    caret-color: var(--color-brand-primary-base);
+    scrollbar-color: var(--color-text-subtle) transparent;
+  }
+
   :where(dt) {
     font-weight: var(--font-weight-active);
     color: var(--color-text-base);
@@ -278,9 +278,6 @@
   }
 
   :where(figcaption) {
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-default);
-    line-height: var(--line-height-base);
     color: var(--color-surface-subtle);
     background-color: var(--color-text-base);
     padding: .3lh 1ch;
@@ -289,33 +286,26 @@
 
   :where(details) {
     --p-x-details: 2ch;
-    --p-y-details: .75lh;
-    background-color: var(--color-surface-subtle);
+    --p-y-details: .8lh;
+    background-color: var(--color-surface-muted);
     border-radius: var(--border-radius-medium);
     border: var(--border-width-thin) solid var(--color-border-base);
-    inline-size: 100%;
-  }
-
-  :where(details) > * {
-    padding-inline: var(--p-x-details);
-  }
-
-  :where(details) > :last-child {
-    padding-block-end: var(--p-y-details);
-  }
-
-  :where(details) > summary::-webkit-details-marker {
-    display: none;
+    padding: var(--p-y-details) var(--p-x-details);
   }
 
   :where(details) > summary {
-    cursor: pointer;
     color: var(--color-text-base);
-    inline-size: 100%;
-    font-weight: var(--font-weight-strong);
-    padding-inline: var(--p-x-details);
-    padding-block: var(--p-y-details);
-    list-style: none;
+    background: var(--color-surface-subtle);
+    border-radius: var(--border-radius-medium);
+    font-weight: var(--font-weight-heading);
+    padding: var(--p-y-details) var(--p-x-details);
+    margin: calc(-1 * var(--p-y-details)) calc(-1 * var(--p-x-details)  + var(--border-width-thin));
+  }
+
+  :where(details)[open] > summary {
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    margin-block-end: var(--p-y-details);
   }
 
   .note, blockquote {
@@ -362,9 +352,10 @@
   }
 
   :where(hr) {
-    border-top: var(--border-width-medium) solid var(--color-border-base);
-    block-size: 0;
     inline-size: 100%;
+    block-size: var(--border-width-medium);
+    background: var(--color-border-base);
+    border-block-start: 0;
   }
 
   :where(h1, h2, h3, h4, h5, h6) {
@@ -446,6 +437,11 @@
     font-weight: var(--font-weight-default);
   }
 
+  :where(abbr) {
+    -webkit-text-decoration-color: var(--color-brand-primary-base);
+    text-decoration-color: var(--color-brand-primary-base);
+  }
+
   :where([aria-disabled="true"], .disabled, :disabled) {
     color: inherit;
     opacity: 1;
@@ -610,8 +606,12 @@
     padding-inline-start: 2ch;
   }
 
-  :where(li + li), :where(li > :is(ul, ol)) {
-    margin-top: .5lh;
+  :where(li + li) {
+    margin-block-start: .5lh;
+  }
+
+  :where(li > :is(ul, ol)) {
+    margin-block-start: .3lh;
   }
 }
 
@@ -669,7 +669,7 @@
   }
 
   :where(.nc-flow) > * + * {
-    margin-block-start: var(--flow-gap, .6lh);
+    margin-block-start: var(--flow-gap, .8lh);
   }
 
   :where(.nc-flow) > * {
@@ -681,16 +681,11 @@
     --flow-gap: 1.3lh;
   }
 
-  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + p {
-    --flow-gap: .5lh;
-  }
-
-  :where(.nc-flow) > p + p {
-    --flow-gap: .8lh;
+  :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
+    --flow-gap: .3lh;
   }
 
   :where(.nc-flow) > figure {
-    margin-block: 1lh;
     margin-inline: 0;
   }
 
@@ -1516,7 +1511,7 @@
     border-radius: var(--_dialog-radius);
     overflow-clip-margin: 1rem;
     pointer-events: all;
-    max-block-size: 100dvw;
+    max-block-size: 100dvh;
     margin: auto 0;
     padding: 0;
     display: block;
@@ -1669,12 +1664,12 @@
   }
 
   :where(legend:not([class]), .nc-legend) + * {
-    margin-block-start: var(--nc-legend-spacing, .75lh);
+    margin-block-start: var(--nc-legend-spacing, .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: 0;
-    margin-block-end: .6lh;
+    --nc-legend-spacing: .125lh;
+    margin-block-end: .5lh;
   }
 }
 
@@ -1759,7 +1754,7 @@
   }
 
   :where(.nc-icon)[data-size="inline"] {
-    --icon-size: .75lh;
+    --icon-size: .8lh;
   }
 
   :where(.nc-icon)[data-size="button"] {
@@ -1792,7 +1787,6 @@
     font-weight: var(--font-weight-active);
     color: var(--color-text-base);
     font-size: inherit;
-    cursor: pointer;
     align-items: center;
     gap: .15lh;
     display: inline-flex;
@@ -1862,9 +1856,12 @@
 
   :where(textarea:not([class]), .nc-textarea) {
     min-block-size: calc(5lh + 2 * var(--_input-padding-block));
+    max-block-size: 80svh;
     min-inline-size: var(--input-inline-size, 100%);
     max-inline-size: 100%;
     padding-block: var(--_input-padding-block);
+    resize: block;
+    field-sizing: content;
   }
 
   :where(input[type="checkbox"]:not([class]), input[type="radio"]:not([class]), .nc-input-checkbox, .nc-input-radio, .nc-input-switch) {
@@ -1872,14 +1869,12 @@
     border: var(--_input-border);
     --current-background: var(--_input-background);
     background: var(--current-background);
-    cursor: pointer;
     block-size: 1lh;
     inline-size: 1lh;
     transition: var(--transition-duration-short) background var(--ease-2);
     box-shadow: var(--_input-box-shadow);
     justify-content: center;
     align-items: center;
-    margin: 0;
     padding: 0;
     display: inline-flex;
   }
@@ -1955,12 +1950,12 @@
 
   :where(input[type="range"], .nc-input-range)::-webkit-slider-thumb {
     appearance: none;
+    inline-size: calc(var(--button-height-base) * .7);
+    block-size: calc(var(--button-height-base) * .7);
     border-radius: var(--_input-border-radius);
     border: var(--_input-border);
     border-color: var(--color-text-base);
     background-color: var(--color-text-base);
-    block-size: 1lh;
-    inline-size: 1lh;
     box-shadow: var(--shadow-near);
     cursor: pointer;
   }
@@ -1972,12 +1967,12 @@
 
   :where(input[type="range"], .nc-input-range)::-moz-range-thumb {
     appearance: none;
+    inline-size: calc(var(--button-height-base) * .7);
+    block-size: calc(var(--button-height-base) * .7);
     border-radius: var(--_input-border-radius);
     border: var(--_input-border);
     border-color: var(--color-text-base);
     background-color: var(--color-text-base);
-    block-size: 1lh;
-    inline-size: 1lh;
     box-shadow: var(--shadow-near);
     cursor: pointer;
   }
@@ -1991,7 +1986,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;
+    --nc-legend-spacing: .3lh;
   }
 
   :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
@@ -2032,13 +2027,12 @@
     max-inline-size: var(--input-field-max-inline-size);
     grid-template-columns: minmax(0, 1fr);
     place-items: start;
-    gap: .25lh;
+    gap: .3lh;
     display: grid;
   }
 
   :where(.nc-input-field) > label, :where(.nc-input-field) > .nc-stack {
-    line-height: var(--line-height-small);
-    gap: .125lh;
+    gap: .15lh;
   }
 
   :where(.nc-input-field) > .nc-cluster {
@@ -2106,7 +2100,7 @@
     --_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;
+    --nc-legend-spacing: .3lh;
     container: segmented-control / inline-size;
   }
 

package/package.json

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

package/src/styles/components/forms.css

@@ -30,12 +30,12 @@
         inline-size: 100%;
 
         &+* {
-            margin-block-start: var(--nc-legend-spacing, 0.75lh);
+            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: 0;
-        margin-block-end: 0.6lh;
+        --nc-legend-spacing: .125lh;
+        margin-block-end: 0.5lh;
     }
 }

package/src/styles/components/icons.css

@@ -32,7 +32,7 @@
         }
 
         &[data-size="inline"] {
-            --icon-size: 0.75lh;
+            --icon-size: 0.8lh;
         }
 
         &[data-size="button"] {
@@ -44,7 +44,7 @@
         }
     }
 
-    :where(button, .nc-button) > .nc-icon {
+    :where(button, .nc-button)>.nc-icon {
         --icon-size: 2ex;
     }
 

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

@@ -6,7 +6,6 @@
         color: var(--color-text-base);
         display: inline-flex;
         font-size: inherit;
-        cursor: pointer;
         gap: 0.15lh;
         align-items: center;
     }
@@ -131,9 +130,13 @@
 
     :where(textarea:not([class]), .nc-textarea) {
         min-block-size: calc(5lh + 2 * var(--_input-padding-block));
+        max-block-size: 80svh;
         min-inline-size: var(--input-inline-size, 100%);
         max-inline-size: 100%;
         padding-block: var(--_input-padding-block);
+
+        resize: block;
+        field-sizing: content;
     }
 
     :where(input[type="checkbox"]:not([class]),
@@ -143,7 +146,6 @@
         .nc-input-switch) {
         inline-size: 1lh;
         block-size: 1lh;
-        margin: 0;
         padding: 0;
         appearance: none;
         display: inline-flex;
@@ -152,7 +154,6 @@
         border: var(--_input-border);
         --current-background: var(--_input-background);
         background: var(--current-background);
-        cursor: pointer;
         transition: var(--transition-duration-short) background var(--ease-2);
         box-shadow: var(--_input-box-shadow);
     }
@@ -230,8 +231,8 @@
         &::-webkit-slider-thumb,
         &::-moz-range-thumb {
             appearance: none;
-            inline-size: 1lh;
-            block-size: 1lh;
+            inline-size: calc(var(--button-height-base) * 0.7);
+            block-size: calc(var(--button-height-base) * 0.7);
             border-radius: var(--_input-border-radius);
             border: var(--_input-border);
             border-color: var(--color-text-base);

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

@@ -1,7 +1,7 @@
 @layer components.input-fields {
     :where(.nc-input-field) {
         display: grid;
-        gap: 0.25lh;
+        gap: 0.3lh;
         grid-template-columns: minmax(0, 1fr);
         inline-size: 100%;
         min-inline-size: var(--input-field-min-inline-size);
@@ -10,8 +10,7 @@
 
         &>label,
         &>.nc-stack {
-            gap: 0.125lh;
-            line-height: var(--line-height-small);
+            gap: 0.15lh;
         }
 
         &>.nc-cluster {

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

@@ -9,7 +9,7 @@
 
         container: segmented-control / inline-size;
 
-        --nc-legend-spacing: 0.25lh;
+        --nc-legend-spacing: 0.3lh;
     }
 
     :where(.nc-segmented-control) {

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

@@ -5,7 +5,7 @@
         --_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;
+        --nc-legend-spacing: 0.3lh;
 
         &:focus-within:has(:focus-visible) {
             outline-offset: 1ch;