@nordcode/ui 1.1.6 → 1.2.0

package/CHANGELOG.md

@@ -101,3 +101,9 @@ Lots of spring cleaning
 ### Improvements
 
 - Small changes to spacings.
+
+## 1.2.0 (2025-04-03)
+
+### Improvements
+
+- Add clickable card class

package/out/bundle.css

@@ -355,6 +355,10 @@
   }
 
   :where(body) {
+    -webkit-text-decoration-skip-ink: auto;
+    text-decoration-skip-ink: auto;
+    font-optical-sizing: auto;
+    font-kerning: normal;
     min-block-size: 100vh;
   }
 
@@ -367,8 +371,6 @@
   }
 
   :where(a:not([class])) {
-    -webkit-text-decoration-skip-ink: auto;
-    text-decoration-skip-ink: auto;
     color: currentColor;
   }
 
@@ -409,11 +411,6 @@
     letter-spacing: inherit;
   }
 
-  :where(p) {
-    text-wrap: pretty;
-    max-inline-size: var(--measure-base);
-  }
-
   :where(html):has(dialog:modal) {
     scrollbar-gutter: stable;
     overflow: hidden;
@@ -443,7 +440,7 @@
   }
 
   :where(dl:not([class]), .nc-description-list) {
-    word-break: break-word;
+    overflow-wrap: anywhere;
     grid-template-columns: .25fr .75fr;
     align-items: flex-start;
     row-gap: .5lh;
@@ -499,13 +496,13 @@
   :where(figcaption) {
     color: var(--color-surface-subtle);
     background-color: var(--color-text-base);
-    padding: .3lh 1ch;
+    padding: .25lh 1ch;
     display: block;
   }
 
   :where(details) {
     --p-x-details: 2ch;
-    --p-y-details: .8lh;
+    --p-y-details: .75lh;
     --b-r-details: var(--border-radius-medium);
     background-color: var(--color-surface-muted);
     border-radius: var(--b-r-details);
@@ -661,6 +658,9 @@
   :where(abbr) {
     -webkit-text-decoration-color: var(--color-brand-primary-base);
     text-decoration-color: var(--color-brand-primary-base);
+    font-variant-numeric: oldstyle-nums;
+    font-size: 110%;
+    font-variant-caps: all-small-caps;
   }
 
   :where([aria-disabled="true"], .disabled, :disabled) {
@@ -687,8 +687,7 @@
     tab-size: 4;
     text-align: left;
     word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
+    overflow-wrap: normal;
     max-inline-size: fit-content;
     padding-block: .125lh;
     font-style: normal;
@@ -800,6 +799,10 @@
     background-color: var(--color-surface-muted);
   }
 
+  :where(td, math, time[datetime*=":"]) {
+    font-variant-numeric: tabular-nums lining-nums slashed-zero;
+  }
+
   :target {
     scroll-margin-block-start: 2ex;
   }
@@ -832,7 +835,72 @@
   }
 
   :where(li > :is(ul, ol)) {
-    margin-block-start: .3lh;
+    margin-block-start: .25lh;
+  }
+
+  @supports (font-variant-position: sub) {
+    :where(sub) {
+      vertical-align: baseline;
+      font-size: 100%;
+      line-height: inherit;
+      font-variant-position: sub;
+    }
+  }
+
+  @supports (font-variant-position: super) {
+    :where(sup) {
+      vertical-align: baseline;
+      font-size: 100%;
+      line-height: inherit;
+      font-variant-position: super;
+    }
+  }
+
+  :lang(en) > * {
+    quotes: "“" "”" "‘" "’";
+  }
+
+  :lang(de) > * {
+    quotes: "„" "“" "‚" "‘";
+  }
+
+  :where() {
+    content: open-quote;
+    content: close-quote;
+    content: "“";
+    content: "”";
+    margin-inline-start: -.87ch;
+  }
+
+  :where(.quoted p) {
+    hanging-punctuation: first last;
+  }
+
+  @supports (hanging-punctuation: first last) {
+    :where() {
+      margin-inline-start: 0;
+    }
+  }
+
+  :where(.prose) {
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    hyphenate-limit-chars: 7 4 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-zone: 8%;
+    hyphenate-limit-last: always;
+    text-wrap: pretty;
+  }
+
+  :where(.prose p) {
+    text-wrap: pretty;
+    font-variant-numeric: oldstyle-nums proportional-nums;
+    max-inline-size: var(--measure-base);
+  }
+
+  :where(.prose pre, .prose code, .prose var, .prose samp, .prose kbd, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
+    -webkit-hyphens: manual;
+    hyphens: manual;
   }
 }
 
@@ -890,7 +958,7 @@
   }
 
   :where(.nc-flow) > * + * {
-    margin-block-start: var(--flow-gap, .8lh);
+    margin-block-start: var(--flow-gap, 1lh);
   }
 
   :where(.nc-flow) > * {
@@ -899,11 +967,11 @@
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
     max-inline-size: var(--flow-headline-meassure, 32ch);
-    --flow-gap: 1.3lh;
+    --flow-gap: 1.5lh;
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
-    --flow-gap: .3lh;
+    --flow-gap: .5lh;
   }
 
   :where(.nc-flow) > figure {
@@ -1301,6 +1369,21 @@
   text-transform: capitalize;
 }
 
+.centered {
+  text-align: center;
+  text-wrap: balance;
+}
+
+.uppercase {
+  text-transform: uppercase;
+  --opentype-case: on;
+}
+
+.smallcaps {
+  font-variant-numeric: oldstyle-nums;
+  font-variant-caps: all-small-caps;
+}
+
 .strong {
   font-weight: var(--font-weight-strong);
 }

package/out/bundle_configless.css

@@ -136,6 +136,10 @@
   }
 
   :where(body) {
+    -webkit-text-decoration-skip-ink: auto;
+    text-decoration-skip-ink: auto;
+    font-optical-sizing: auto;
+    font-kerning: normal;
     min-block-size: 100vh;
   }
 
@@ -148,8 +152,6 @@
   }
 
   :where(a:not([class])) {
-    -webkit-text-decoration-skip-ink: auto;
-    text-decoration-skip-ink: auto;
     color: currentColor;
   }
 
@@ -190,11 +192,6 @@
     letter-spacing: inherit;
   }
 
-  :where(p) {
-    text-wrap: pretty;
-    max-inline-size: var(--measure-base);
-  }
-
   :where(html):has(dialog:modal) {
     scrollbar-gutter: stable;
     overflow: hidden;
@@ -224,7 +221,7 @@
   }
 
   :where(dl:not([class]), .nc-description-list) {
-    word-break: break-word;
+    overflow-wrap: anywhere;
     grid-template-columns: .25fr .75fr;
     align-items: flex-start;
     row-gap: .5lh;
@@ -280,13 +277,13 @@
   :where(figcaption) {
     color: var(--color-surface-subtle);
     background-color: var(--color-text-base);
-    padding: .3lh 1ch;
+    padding: .25lh 1ch;
     display: block;
   }
 
   :where(details) {
     --p-x-details: 2ch;
-    --p-y-details: .8lh;
+    --p-y-details: .75lh;
     --b-r-details: var(--border-radius-medium);
     background-color: var(--color-surface-muted);
     border-radius: var(--b-r-details);
@@ -442,6 +439,9 @@
   :where(abbr) {
     -webkit-text-decoration-color: var(--color-brand-primary-base);
     text-decoration-color: var(--color-brand-primary-base);
+    font-variant-numeric: oldstyle-nums;
+    font-size: 110%;
+    font-variant-caps: all-small-caps;
   }
 
   :where([aria-disabled="true"], .disabled, :disabled) {
@@ -468,8 +468,7 @@
     tab-size: 4;
     text-align: left;
     word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
+    overflow-wrap: normal;
     max-inline-size: fit-content;
     padding-block: .125lh;
     font-style: normal;
@@ -581,6 +580,10 @@
     background-color: var(--color-surface-muted);
   }
 
+  :where(td, math, time[datetime*=":"]) {
+    font-variant-numeric: tabular-nums lining-nums slashed-zero;
+  }
+
   :target {
     scroll-margin-block-start: 2ex;
   }
@@ -613,7 +616,72 @@
   }
 
   :where(li > :is(ul, ol)) {
-    margin-block-start: .3lh;
+    margin-block-start: .25lh;
+  }
+
+  @supports (font-variant-position: sub) {
+    :where(sub) {
+      vertical-align: baseline;
+      font-size: 100%;
+      line-height: inherit;
+      font-variant-position: sub;
+    }
+  }
+
+  @supports (font-variant-position: super) {
+    :where(sup) {
+      vertical-align: baseline;
+      font-size: 100%;
+      line-height: inherit;
+      font-variant-position: super;
+    }
+  }
+
+  :lang(en) > * {
+    quotes: "“" "”" "‘" "’";
+  }
+
+  :lang(de) > * {
+    quotes: "„" "“" "‚" "‘";
+  }
+
+  :where() {
+    content: open-quote;
+    content: close-quote;
+    content: "“";
+    content: "”";
+    margin-inline-start: -.87ch;
+  }
+
+  :where(.quoted p) {
+    hanging-punctuation: first last;
+  }
+
+  @supports (hanging-punctuation: first last) {
+    :where() {
+      margin-inline-start: 0;
+    }
+  }
+
+  :where(.prose) {
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    hyphenate-limit-chars: 7 4 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-zone: 8%;
+    hyphenate-limit-last: always;
+    text-wrap: pretty;
+  }
+
+  :where(.prose p) {
+    text-wrap: pretty;
+    font-variant-numeric: oldstyle-nums proportional-nums;
+    max-inline-size: var(--measure-base);
+  }
+
+  :where(.prose pre, .prose code, .prose var, .prose samp, .prose kbd, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
+    -webkit-hyphens: manual;
+    hyphens: manual;
   }
 }
 
@@ -671,7 +739,7 @@
   }
 
   :where(.nc-flow) > * + * {
-    margin-block-start: var(--flow-gap, .8lh);
+    margin-block-start: var(--flow-gap, 1lh);
   }
 
   :where(.nc-flow) > * {
@@ -680,11 +748,11 @@
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
     max-inline-size: var(--flow-headline-meassure, 32ch);
-    --flow-gap: 1.3lh;
+    --flow-gap: 1.5lh;
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
-    --flow-gap: .3lh;
+    --flow-gap: .5lh;
   }
 
   :where(.nc-flow) > figure {
@@ -1082,6 +1150,21 @@
   text-transform: capitalize;
 }
 
+.centered {
+  text-align: center;
+  text-wrap: balance;
+}
+
+.uppercase {
+  text-transform: uppercase;
+  --opentype-case: on;
+}
+
+.smallcaps {
+  font-variant-numeric: oldstyle-nums;
+  font-variant-caps: all-small-caps;
+}
+
 .strong {
   font-weight: var(--font-weight-strong);
 }

package/out/complete.css

@@ -355,6 +355,10 @@
   }
 
   :where(body) {
+    -webkit-text-decoration-skip-ink: auto;
+    text-decoration-skip-ink: auto;
+    font-optical-sizing: auto;
+    font-kerning: normal;
     min-block-size: 100vh;
   }
 
@@ -367,8 +371,6 @@
   }
 
   :where(a:not([class])) {
-    -webkit-text-decoration-skip-ink: auto;
-    text-decoration-skip-ink: auto;
     color: currentColor;
   }
 
@@ -409,11 +411,6 @@
     letter-spacing: inherit;
   }
 
-  :where(p) {
-    text-wrap: pretty;
-    max-inline-size: var(--measure-base);
-  }
-
   :where(html):has(dialog:modal) {
     scrollbar-gutter: stable;
     overflow: hidden;
@@ -443,7 +440,7 @@
   }
 
   :where(dl:not([class]), .nc-description-list) {
-    word-break: break-word;
+    overflow-wrap: anywhere;
     grid-template-columns: .25fr .75fr;
     align-items: flex-start;
     row-gap: .5lh;
@@ -499,13 +496,13 @@
   :where(figcaption) {
     color: var(--color-surface-subtle);
     background-color: var(--color-text-base);
-    padding: .3lh 1ch;
+    padding: .25lh 1ch;
     display: block;
   }
 
   :where(details) {
     --p-x-details: 2ch;
-    --p-y-details: .8lh;
+    --p-y-details: .75lh;
     --b-r-details: var(--border-radius-medium);
     background-color: var(--color-surface-muted);
     border-radius: var(--b-r-details);
@@ -661,6 +658,9 @@
   :where(abbr) {
     -webkit-text-decoration-color: var(--color-brand-primary-base);
     text-decoration-color: var(--color-brand-primary-base);
+    font-variant-numeric: oldstyle-nums;
+    font-size: 110%;
+    font-variant-caps: all-small-caps;
   }
 
   :where([aria-disabled="true"], .disabled, :disabled) {
@@ -687,8 +687,7 @@
     tab-size: 4;
     text-align: left;
     word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
+    overflow-wrap: normal;
     max-inline-size: fit-content;
     padding-block: .125lh;
     font-style: normal;
@@ -800,6 +799,10 @@
     background-color: var(--color-surface-muted);
   }
 
+  :where(td, math, time[datetime*=":"]) {
+    font-variant-numeric: tabular-nums lining-nums slashed-zero;
+  }
+
   :target {
     scroll-margin-block-start: 2ex;
   }
@@ -832,7 +835,72 @@
   }
 
   :where(li > :is(ul, ol)) {
-    margin-block-start: .3lh;
+    margin-block-start: .25lh;
+  }
+
+  @supports (font-variant-position: sub) {
+    :where(sub) {
+      vertical-align: baseline;
+      font-size: 100%;
+      line-height: inherit;
+      font-variant-position: sub;
+    }
+  }
+
+  @supports (font-variant-position: super) {
+    :where(sup) {
+      vertical-align: baseline;
+      font-size: 100%;
+      line-height: inherit;
+      font-variant-position: super;
+    }
+  }
+
+  :lang(en) > * {
+    quotes: "“" "”" "‘" "’";
+  }
+
+  :lang(de) > * {
+    quotes: "„" "“" "‚" "‘";
+  }
+
+  :where() {
+    content: open-quote;
+    content: close-quote;
+    content: "“";
+    content: "”";
+    margin-inline-start: -.87ch;
+  }
+
+  :where(.quoted p) {
+    hanging-punctuation: first last;
+  }
+
+  @supports (hanging-punctuation: first last) {
+    :where() {
+      margin-inline-start: 0;
+    }
+  }
+
+  :where(.prose) {
+    -webkit-hyphens: auto;
+    hyphens: auto;
+    hyphenate-limit-chars: 7 4 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-zone: 8%;
+    hyphenate-limit-last: always;
+    text-wrap: pretty;
+  }
+
+  :where(.prose p) {
+    text-wrap: pretty;
+    font-variant-numeric: oldstyle-nums proportional-nums;
+    max-inline-size: var(--measure-base);
+  }
+
+  :where(.prose pre, .prose code, .prose var, .prose samp, .prose kbd, .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6) {
+    -webkit-hyphens: manual;
+    hyphens: manual;
   }
 }
 
@@ -890,7 +958,7 @@
   }
 
   :where(.nc-flow) > * + * {
-    margin-block-start: var(--flow-gap, .8lh);
+    margin-block-start: var(--flow-gap, 1lh);
   }
 
   :where(.nc-flow) > * {
@@ -899,11 +967,11 @@
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) {
     max-inline-size: var(--flow-headline-meassure, 32ch);
-    --flow-gap: 1.3lh;
+    --flow-gap: 1.5lh;
   }
 
   :where(.nc-flow) > :is(h1, h2, h3, h4, h5, h6) + :not([class]) {
-    --flow-gap: .3lh;
+    --flow-gap: .5lh;
   }
 
   :where(.nc-flow) > figure {
@@ -1301,6 +1369,21 @@
   text-transform: capitalize;
 }
 
+.centered {
+  text-align: center;
+  text-wrap: balance;
+}
+
+.uppercase {
+  text-transform: uppercase;
+  --opentype-case: on;
+}
+
+.smallcaps {
+  font-variant-numeric: oldstyle-nums;
+  font-variant-caps: all-small-caps;
+}
+
 .strong {
   font-weight: var(--font-weight-strong);
 }
@@ -1715,6 +1798,33 @@
   :where(.nc-card):is([href], button):hover {
     border-color: var(--color-brand-primary-base);
   }
+
+  :where(.nc-clickable-card) {
+    cursor: pointer;
+    position: relative;
+  }
+
+  :where(.nc-clickable-card):focus-within, :where(.nc-clickable-card):hover {
+    outline: var(--border-width-medium) solid var(--color-brand-primary-base);
+  }
+
+  :where(.nc-clickable-card) a[data-link="main"] {
+    text-decoration: none;
+  }
+
+  :where(.nc-clickable-card) a[data-link="main"]:focus-within:focus-visible, :where(.nc-clickable-card) a[data-link="main"]:hover {
+    outline: none;
+  }
+
+  :where(.nc-clickable-card) a[data-link="main"]:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.nc-clickable-card) a[data-link="extra"] {
+    position: relative;
+  }
 }
 
 @layer components.dialogs {
@@ -1980,7 +2090,7 @@
   }
 
   :where(.nc-icon)[data-size="inline"] {
-    --icon-size: .8lh;
+    --icon-size: .75lh;
   }
 
   :where(.nc-icon)[data-size="button"] {
@@ -2014,7 +2124,7 @@
     color: var(--color-text-base);
     font-size: inherit;
     align-items: center;
-    gap: .15lh;
+    gap: 0;
     display: inline-flex;
   }
 
@@ -2212,7 +2322,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: .3lh;
+    --nc-legend-spacing: .25lh;
   }
 
   :where(.nc-tag-select-field):focus-within:has(:focus-visible) {
@@ -2253,12 +2363,12 @@
     max-inline-size: var(--input-field-max-inline-size);
     grid-template-columns: minmax(0, 1fr);
     place-items: start;
-    gap: .3lh;
+    gap: .25lh;
     display: grid;
   }
 
   :where(.nc-input-field) > label, :where(.nc-input-field) > .nc-stack {
-    gap: .15lh;
+    gap: 0;
   }
 
   :where(.nc-input-field) > .nc-cluster {
@@ -2326,7 +2436,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: .3lh;
+    --nc-legend-spacing: .25lh;
     container: segmented-control / inline-size;
   }