@maggioli-design-system/styles 17.4.0 → 17.5.0

package/dist/css/typography.css

@@ -1,8 +1,8 @@
 /*
-@magma-design-system/design-tokens v15.3.0
+@magma-design-system/design-tokens v15.4.0
 Generated by Style Dictionary
 Do not edit directly
-Generated at Sat, 24 Oct 2026 12:12:55 GMT
+Generated at Wed, 04 Nov 2026 07:17:20 GMT
 */
 
 :root {
@@ -73,6 +73,27 @@ Generated at Sat, 24 Oct 2026 12:12:55 GMT
   --text-size-code-hack--font-weight: 400;
   --text-size-code-hack--line-height: 1.25rem;
 
+  --text-size-title-page: var(--text-size-title-h3);
+  --text-size-title-page--font-weight: var(--text-size-title-h3--font-weight);
+  --text-size-title-page--letter-spacing: var(--text-size-title-h3--letter-spacing);
+  --text-size-title-page--line-height: var(--text-size-title-h3--line-height);
+  --text-size-title-section: var(--text-size-title-h5);
+  --text-size-title-section--font-weight: var(--text-size-title-h5--font-weight);
+  --text-size-title-section--letter-spacing: var(--text-size-title-h5--letter-spacing);
+  --text-size-title-section--line-height: var(--text-size-title-h5--line-height);
+  --text-size-title-dialog: var(--text-size-title-h5);
+  --text-size-title-dialog--font-weight: var(--text-size-title-h5--font-weight);
+  --text-size-title-dialog--letter-spacing: var(--text-size-title-h5--letter-spacing);
+  --text-size-title-dialog--line-height: var(--text-size-title-h5--line-height);
+  --text-size-title-part: var(--text-size-title-h6);
+  --text-size-title-part--font-weight: var(--text-size-title-h6--font-weight);
+  --text-size-title-part--letter-spacing: var(--text-size-title-h6--letter-spacing);
+  --text-size-title-part--line-height: var(--text-size-title-h6--line-height);
+  --text-size-title-group: var(--text-size-title-h6);
+  --text-size-title-group--font-weight: var(--text-size-title-h6--font-weight);
+  --text-size-title-group--letter-spacing: var(--text-size-title-h6--letter-spacing);
+  --text-size-title-group--line-height: var(--text-size-title-h6--line-height);
+
   --leading-2xs: 0.625rem;
   --leading-xs: 1rem;
   --leading-sm: 1.25rem;
@@ -95,7 +116,7 @@ Generated at Sat, 24 Oct 2026 12:12:55 GMT
   --spacing-4xl: 96px;
   --spacing-phrase: 50ch;
   --spacing-prose: 65ch;
-  --spacing-text: 75ch;
+  --spacing-text: var(--magma-width-reading, 56ch);
   --spacing-title: 30ch;
 
   --container-4xs: 128px;
@@ -113,6 +134,22 @@ Generated at Sat, 24 Oct 2026 12:12:55 GMT
   --container-6xl: 1152px;
   --container-7xl: 1280px;
 
+  --magma-rhythm-inline: 12px;
+  --magma-rhythm-title-content: 12px;
+  --magma-rhythm-label-control: 12px;
+  --magma-rhythm-between-containers: 16px;
+  --magma-rhythm-between-fields: 24px;
+  --magma-rhythm-content-actions: 24px;
+  --magma-rhythm-inset: 24px;
+  --magma-rhythm-between-groups: 40px;
+  --magma-rhythm-between-sections: 64px;
+  --magma-width-reading: 56ch;
+  --magma-width-form: var(--magma-width-reading);
+  --magma-width-page: 1280px;
+  --magma-width-page-gutter: 24px;
+  --magma-width-dialog: calc(var(--magma-width-form) + 2 * var(--magma-rhythm-inset));
+  --magma-container-actions: 23.75rem;
+
   --breakpoint-mobile: 480px;
   --breakpoint-tablet: 768px;
   --breakpoint-desktop: 1024px;

package/dist/css/utility-typography.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer utilities {
   .focus-zoom {
@@ -23,6 +23,9 @@
 .typography-title-h1 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h1, 3rem);
   line-height: var(--tw-leading, var(--text-size-title-h1--line-height, 3rem));
@@ -36,6 +39,9 @@
 .typography-title-h2 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h2, 2.25rem);
   line-height: var(--tw-leading, var(--text-size-title-h2--line-height, 2.5rem));
@@ -49,6 +55,9 @@
 .typography-title-h3 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h3, 1.875rem);
   line-height: var(--tw-leading, var(--text-size-title-h3--line-height, 2.25rem));
@@ -62,6 +71,9 @@
 .typography-title-h4 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h4, 1.5rem);
   line-height: var(--tw-leading, var(--text-size-title-h4--line-height, 2rem));
@@ -75,6 +87,9 @@
 .typography-title-h5 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h5, 1.25rem);
   line-height: var(--tw-leading, var(--text-size-title-h5--line-height, 1.75rem));
@@ -88,6 +103,9 @@
 .typography-title-h6 {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-h6, 1rem);
   line-height: var(--tw-leading, var(--text-size-title-h6--line-height, 1.5rem));
@@ -101,6 +119,9 @@
 .typography-title-action {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-title-action, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-title-action--line-height, 1.5rem));
@@ -110,9 +131,82 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.typography-title-page {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-page, var(--text-size-title-h3, 1.875rem));
+  line-height: var(--tw-leading, var(--text-size-title-page--line-height, var(--text-size-title-h3--line-height, 2.25rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-page--letter-spacing, var(--text-size-title-h3--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-page--font-weight, var(--text-size-title-h3--font-weight, 900)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-section {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-section, var(--text-size-title-h5, 1.25rem));
+  line-height: var(--tw-leading, var(--text-size-title-section--line-height, var(--text-size-title-h5--line-height, 1.75rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-section--letter-spacing, var(--text-size-title-h5--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-section--font-weight, var(--text-size-title-h5--font-weight, 900)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-dialog {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-dialog, var(--text-size-title-h5, 1.25rem));
+  line-height: var(--tw-leading, var(--text-size-title-dialog--line-height, var(--text-size-title-h5--line-height, 1.75rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-dialog--letter-spacing, var(--text-size-title-h5--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-dialog--font-weight, var(--text-size-title-h5--font-weight, 900)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-part {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-part, var(--text-size-title-h6, 1rem));
+  line-height: var(--tw-leading, var(--text-size-title-part--line-height, var(--text-size-title-h6--line-height, 1.5rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-part--letter-spacing, var(--text-size-title-h6--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-part--font-weight, var(--text-size-title-h6--font-weight, 700)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.typography-title-group {
+  min-height: auto;
+  text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
+  font-family: var(--font-title, Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
+  font-size: var(--text-size-title-group, var(--text-size-title-h6, 1rem));
+  line-height: var(--tw-leading, var(--text-size-title-group--line-height, var(--text-size-title-h6--line-height, 1.5rem)));
+  letter-spacing: var(--tw-tracking, var(--text-size-title-group--letter-spacing, var(--text-size-title-h6--letter-spacing, -0.025em)));
+  font-weight: var(--tw-font-weight, var(--text-size-title-group--font-weight, var(--text-size-title-h6--font-weight, 700)));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 .typography-info-paragraph {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-paragraph, 1.25rem);
   line-height: var(--tw-leading, var(--text-size-info-paragraph--line-height, 2rem));
@@ -123,6 +217,9 @@
 .typography-info-detail {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-detail, 1rem);
   line-height: var(--tw-leading, var(--text-size-info-detail--line-height, 1.5rem));
@@ -133,6 +230,9 @@
 .typography-info-caption {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-caption, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-info-caption--line-height, 1.25rem));
@@ -143,6 +243,9 @@
 .typography-info-label {
   min-height: auto;
   text-box: trim-both cap alphabetic;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-label, 0.75rem);
   line-height: var(--tw-leading, var(--text-size-info-label--line-height, 1rem));
@@ -156,6 +259,9 @@
 .typography-info-option {
   min-height: auto;
   text-box: trim-both cap alphabetic;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-option, 0.625rem);
   line-height: var(--tw-leading, var(--text-size-info-option--line-height, 0.625rem));
@@ -170,6 +276,9 @@
 .typography-info-tip {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-info, Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
   font-size: var(--text-size-info-tip, 0.75rem);
   line-height: var(--tw-leading, var(--text-size-info-tip--line-height, 1rem));
@@ -180,6 +289,9 @@
 .typography-read-paragraph {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
   font-size: var(--text-size-read-paragraph, 1.25rem);
   line-height: var(--tw-leading, var(--text-size-read-paragraph--line-height, 2rem));
@@ -192,6 +304,9 @@
 .typography-read-detail {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
   font-size: var(--text-size-read-detail, 1rem);
   line-height: var(--tw-leading, var(--text-size-read-detail--line-height, 1.5rem));
@@ -204,6 +319,9 @@
 .typography-read-caption {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-read, 'Merriweather', Times, 'Times New Roman', serif);
   font-size: var(--text-size-read-caption, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-read-caption--line-height, 1.25rem));
@@ -214,6 +332,9 @@
 .typography-code-snippet {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
   font-size: var(--text-size-code-snippet, 1rem);
   line-height: var(--tw-leading, var(--text-size-code-snippet--line-height, 1.5rem));
@@ -224,6 +345,9 @@
 .typography-code-hack {
   min-height: auto;
   text-box: trim-both text;
+  &:where(input) {
+    text-box: normal;
+  }
   font-family: var(--font-code, 'Roboto Mono', 'Courier New', monospace);
   font-size: var(--text-size-code-hack, 0.875rem);
   line-height: var(--tw-leading, var(--text-size-code-hack--line-height, 1.25rem));
@@ -244,7 +368,7 @@
   inherits: false;
 }
 @layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: block))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
       --tw-duration: initial;
       --tw-ease: initial;

package/dist/dtcg/globals.tokens.json

@@ -1,6 +1,6 @@
 {
   "magma": {
-    "$description": "The semantic layer: the roles UI code paints with, which follow the mode, the named theme and the contrast preference.",
+    "$description": "The semantic layer: the roles UI code paints with. The colour roles follow the mode, the named theme and the contrast preference; rhythm and width are the spaces and the widths of the design language.",
     "pref": {
       "$description": "The preferences the mds-pref components write on the html element: read them to adapt, never set them by hand.",
       "$extensions": {

package/dist/tailwind/base.css

@@ -88,8 +88,81 @@
     @apply max-w-title;
   }
 
-  p {
-    @apply max-w-title;
+  /* p takes the cap of the reset, max-w-text (the reading measure, #1204): a cap written
+   * here, in a later layer, would win over it. */
+
+  /* The room of mds-status-bar (#1203): while a bar is visible at the end of the window, the page
+   * ends that far above it, and a field reached with Tab stops above it too (WCAG 2.4.11). No
+   * script measures the bar: the room is its tallest for its content, from its own sheet, plus
+   * rhythm/between-fields. It is a box after the body, not a padding of html: a page that zeroes
+   * the padding of html out of any layer, as many resets do, wins over every layer and would drop
+   * it. A page that scrolls in a box of its own reads the same room from --magma-status-bar-room.
+   * A shorter bar leaves the rest empty, never covered.
+   *
+   * The tallest bar: the margin of its area (800), the inset of the bar (600 twice), the
+   * description on a line of its own (one line of caption, the limit of its content), the gap to
+   * the actions (400) and their row (a button, 900). Up to 480px the bar takes the width of the
+   * window and its actions stack (actions/stacked): each action after the first adds a button and
+   * rhythm/inline, up to three (actions/at-most-three). */
+
+  html:has(mds-status-bar[visible]) {
+    --magma-status-bar-room: calc(
+      --spacing(800) + 2 * --spacing(600) + var(--text-size-info-caption--line-height) +
+        --spacing(400) + --spacing(900) + var(--magma-rhythm-between-fields)
+    );
+
+    scroll-padding-bottom: var(--magma-status-bar-room);
+  }
+
+  html:has(mds-status-bar[visible])::after {
+    content: '';
+    display: block;
+    height: var(--magma-status-bar-room);
+  }
+
+  @media (width <= 480px) {
+    html:has(mds-status-bar[visible] > :nth-child(2)) {
+      --magma-status-bar-room: calc(
+        --spacing(800) + 2 * --spacing(600) + var(--text-size-info-caption--line-height) +
+          --spacing(400) + 2 * --spacing(900) + var(--magma-rhythm-inline) +
+          var(--magma-rhythm-between-fields)
+      );
+    }
+
+    html:has(mds-status-bar[visible] > :nth-child(3)) {
+      --magma-status-bar-room: calc(
+        --spacing(800) + 2 * --spacing(600) + var(--text-size-info-caption--line-height) +
+          --spacing(400) + 3 * --spacing(900) + 2 * var(--magma-rhythm-inline) +
+          var(--magma-rhythm-between-fields)
+      );
+    }
+  }
+
+  /* The bar of mds-header (#1189, surfaces/band): the header stands in the flow, sticky, so the
+   * page starts under it by itself; while it stays put it covers the top of the window, and a
+   * field reached with Shift+Tab stops under it (WCAG 2.4.11), rhythm/between-fields lower, as at
+   * the bar of mds-status-bar. No script measures the bar: it is one row, its inset (400 twice) and
+   * a button (900); the floating bar (`inline`) stands its margin lower, 600, and 400 up to 767px
+   * (--mds-header-inline-margin, -mobile). */
+
+  html:has(mds-header) {
+    scroll-padding-top: calc(
+      2 * --spacing(400) + --spacing(900) + var(--magma-rhythm-between-fields)
+    );
+  }
+
+  html:has(mds-header[appearance='inline']) {
+    scroll-padding-top: calc(
+      --spacing(600) + 2 * --spacing(400) + --spacing(900) + var(--magma-rhythm-between-fields)
+    );
+  }
+
+  @media (width <= 767px) {
+    html:has(mds-header[appearance='inline']) {
+      scroll-padding-top: calc(
+        --spacing(400) + 2 * --spacing(400) + --spacing(900) + var(--magma-rhythm-between-fields)
+      );
+    }
   }
 
   /* The box of the hydrated components (against Tailwind's preflight) is kept by