@maggioli-design-system/styles 17.4.0 → 17.5.0

package/dist/tailwind/consumption.json

@@ -1,6 +1,6 @@
 {
   "description": "How the global tokens of Magma are consumed through Tailwind 4. tokens: by the custom property dist/dtcg names them with, the @theme variable that publishes each one, its namespace and key, the @theme variables that republish it for the utilities of another namespace (aliases), and where a class or variant of that namespace reads another variable instead. keywords: the @theme variables that hold a CSS keyword, no token. namespaces: the utility roots (<root>-<key>) and variant patterns (* is the key) that read the namespace. Generated from the Tailwind design system of the entry point below; do not edit.",
-  "tailwind": "4.3.3",
+  "tailwind": "4.3.4",
   "entry": [
     "@import 'tailwindcss/theme.css' layer(theme);",
     "@import 'tailwindcss/utilities.css' layer(utilities);",
@@ -2282,6 +2282,121 @@
       "key": "size-code-hack",
       "property": "line-height"
     },
+    "--text-size-title-page": {
+      "theme": "--text-size-title-page",
+      "namespace": "--text",
+      "key": "size-title-page"
+    },
+    "--text-size-title-page--font-weight": {
+      "theme": "--text-size-title-page--font-weight",
+      "namespace": "--text",
+      "key": "size-title-page",
+      "property": "font-weight"
+    },
+    "--text-size-title-page--letter-spacing": {
+      "theme": "--text-size-title-page--letter-spacing",
+      "namespace": "--text",
+      "key": "size-title-page",
+      "property": "letter-spacing"
+    },
+    "--text-size-title-page--line-height": {
+      "theme": "--text-size-title-page--line-height",
+      "namespace": "--text",
+      "key": "size-title-page",
+      "property": "line-height"
+    },
+    "--text-size-title-section": {
+      "theme": "--text-size-title-section",
+      "namespace": "--text",
+      "key": "size-title-section"
+    },
+    "--text-size-title-section--font-weight": {
+      "theme": "--text-size-title-section--font-weight",
+      "namespace": "--text",
+      "key": "size-title-section",
+      "property": "font-weight"
+    },
+    "--text-size-title-section--letter-spacing": {
+      "theme": "--text-size-title-section--letter-spacing",
+      "namespace": "--text",
+      "key": "size-title-section",
+      "property": "letter-spacing"
+    },
+    "--text-size-title-section--line-height": {
+      "theme": "--text-size-title-section--line-height",
+      "namespace": "--text",
+      "key": "size-title-section",
+      "property": "line-height"
+    },
+    "--text-size-title-dialog": {
+      "theme": "--text-size-title-dialog",
+      "namespace": "--text",
+      "key": "size-title-dialog"
+    },
+    "--text-size-title-dialog--font-weight": {
+      "theme": "--text-size-title-dialog--font-weight",
+      "namespace": "--text",
+      "key": "size-title-dialog",
+      "property": "font-weight"
+    },
+    "--text-size-title-dialog--letter-spacing": {
+      "theme": "--text-size-title-dialog--letter-spacing",
+      "namespace": "--text",
+      "key": "size-title-dialog",
+      "property": "letter-spacing"
+    },
+    "--text-size-title-dialog--line-height": {
+      "theme": "--text-size-title-dialog--line-height",
+      "namespace": "--text",
+      "key": "size-title-dialog",
+      "property": "line-height"
+    },
+    "--text-size-title-part": {
+      "theme": "--text-size-title-part",
+      "namespace": "--text",
+      "key": "size-title-part"
+    },
+    "--text-size-title-part--font-weight": {
+      "theme": "--text-size-title-part--font-weight",
+      "namespace": "--text",
+      "key": "size-title-part",
+      "property": "font-weight"
+    },
+    "--text-size-title-part--letter-spacing": {
+      "theme": "--text-size-title-part--letter-spacing",
+      "namespace": "--text",
+      "key": "size-title-part",
+      "property": "letter-spacing"
+    },
+    "--text-size-title-part--line-height": {
+      "theme": "--text-size-title-part--line-height",
+      "namespace": "--text",
+      "key": "size-title-part",
+      "property": "line-height"
+    },
+    "--text-size-title-group": {
+      "theme": "--text-size-title-group",
+      "namespace": "--text",
+      "key": "size-title-group"
+    },
+    "--text-size-title-group--font-weight": {
+      "theme": "--text-size-title-group--font-weight",
+      "namespace": "--text",
+      "key": "size-title-group",
+      "property": "font-weight"
+    },
+    "--text-size-title-group--letter-spacing": {
+      "theme": "--text-size-title-group--letter-spacing",
+      "namespace": "--text",
+      "key": "size-title-group",
+      "property": "letter-spacing"
+    },
+    "--text-size-title-group--line-height": {
+      "theme": "--text-size-title-group--line-height",
+      "namespace": "--text",
+      "key": "size-title-group",
+      "property": "line-height"
+    },
     "--leading-2xs": {
       "theme": "--leading-2xs",
       "namespace": "--leading",
@@ -2617,6 +2732,77 @@
       "namespace": "--container",
       "key": "7xl"
     },
+    "--magma-rhythm-inline": {
+      "theme": "--spacing-inline",
+      "description": "rhythm/inline: between elements side by side, such as the actions of a row (gap-inline).",
+      "namespace": "--spacing",
+      "key": "inline"
+    },
+    "--magma-rhythm-title-content": {
+      "theme": "--spacing-title-content",
+      "description": "rhythm/title-content: between a title and its content (gap-title-content).",
+      "namespace": "--spacing",
+      "key": "title-content"
+    },
+    "--magma-rhythm-label-control": {
+      "theme": "--spacing-label-control",
+      "description": "rhythm/label-control: between the label of a field and its control (gap-label-control).",
+      "namespace": "--spacing",
+      "key": "label-control"
+    },
+    "--magma-rhythm-between-containers": {
+      "theme": "--spacing-between-containers",
+      "description": "rhythm/between-containers: between containers with a boundary, such as the cards of a set (gap-between-containers).",
+      "namespace": "--spacing",
+      "key": "between-containers"
+    },
+    "--magma-rhythm-between-fields": {
+      "theme": "--spacing-between-fields",
+      "description": "rhythm/between-fields: between the fields of a form (gap-between-fields).",
+      "namespace": "--spacing",
+      "key": "between-fields"
+    },
+    "--magma-rhythm-content-actions": {
+      "theme": "--spacing-content-actions",
+      "description": "rhythm/content-actions: between the content of a container and the row of actions that closes it, such as the footer of a card (gap-content-actions).",
+      "namespace": "--spacing",
+      "key": "content-actions"
+    },
+    "--magma-rhythm-inset": {
+      "theme": "--spacing-inset",
+      "description": "rhythm/inset: inside a container of a part, such as a card or a banner, shared by its regions (p-inset).",
+      "namespace": "--spacing",
+      "key": "inset"
+    },
+    "--magma-rhythm-between-groups": {
+      "theme": "--spacing-between-groups",
+      "description": "rhythm/between-groups: between the groups of fields of a form (gap-between-groups).",
+      "namespace": "--spacing",
+      "key": "between-groups"
+    },
+    "--magma-rhythm-between-sections": {
+      "theme": "--spacing-between-sections",
+      "description": "rhythm/between-sections: between the sections of a page (gap-between-sections).",
+      "namespace": "--spacing",
+      "key": "between-sections"
+    },
+    "--magma-width-form": {
+      "theme": "--container-form",
+      "description": "widths/form: the column of a form, the measure of the text around it (max-w-form).",
+      "namespace": "--container",
+      "key": "form",
+      "shadowed": {
+        "@*": null,
+        "@max-*": null,
+        "@min-*": null
+      }
+    },
+    "--magma-container-actions": {
+      "theme": "--container-actions",
+      "description": "actions/stacked: the width of its container under which a row of actions stacks (@max-actions:).",
+      "namespace": "--container",
+      "key": "actions"
+    },
     "--breakpoint-mobile": {
       "theme": "--breakpoint-mobile",
       "namespace": "--breakpoint",
@@ -3198,7 +3384,7 @@
     },
     "--magma-surface-muted": {
       "theme": "--color-surface-muted",
-      "description": "Same-plane grouping on the page: zebra rows, a subtle section.",
+      "description": "Same-plane grouping inside a component: zebra rows; never the background of a section.",
       "namespace": "--color",
       "key": "surface-muted"
     },
@@ -4297,7 +4483,16 @@
       "phrase",
       "prose",
       "text",
-      "title"
+      "title",
+      "inline",
+      "title-content",
+      "label-control",
+      "between-containers",
+      "between-fields",
+      "content-actions",
+      "inset",
+      "between-groups",
+      "between-sections"
     ],
     "steps": []
   },
@@ -4321,7 +4516,7 @@
       "theme": [
         "--font-weight-black"
       ],
-      "css": ".text-title-h1 {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h1);\n  line-height: var(--tw-leading, var(--text-size-title-h1--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h1--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h1--font-weight));\n  --tw-font-weight: var(--font-weight-black);\n  font-weight: var(--font-weight-black);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-title-h1 {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h1);\n  line-height: var(--tw-leading, var(--text-size-title-h1--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h1--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h1--font-weight));\n  --tw-font-weight: var(--font-weight-black);\n  font-weight: var(--font-weight-black);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-title-h2": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4342,7 +4537,7 @@
       "theme": [
         "--font-weight-black"
       ],
-      "css": ".text-title-h2 {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h2);\n  line-height: var(--tw-leading, var(--text-size-title-h2--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h2--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h2--font-weight));\n  --tw-font-weight: var(--font-weight-black);\n  font-weight: var(--font-weight-black);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-title-h2 {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h2);\n  line-height: var(--tw-leading, var(--text-size-title-h2--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h2--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h2--font-weight));\n  --tw-font-weight: var(--font-weight-black);\n  font-weight: var(--font-weight-black);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-title-h3": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4363,7 +4558,7 @@
       "theme": [
         "--font-weight-black"
       ],
-      "css": ".text-title-h3 {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h3);\n  line-height: var(--tw-leading, var(--text-size-title-h3--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h3--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h3--font-weight));\n  --tw-font-weight: var(--font-weight-black);\n  font-weight: var(--font-weight-black);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-title-h3 {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h3);\n  line-height: var(--tw-leading, var(--text-size-title-h3--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h3--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h3--font-weight));\n  --tw-font-weight: var(--font-weight-black);\n  font-weight: var(--font-weight-black);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-title-h4": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4384,7 +4579,7 @@
       "theme": [
         "--font-weight-black"
       ],
-      "css": ".text-title-h4 {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h4);\n  line-height: var(--tw-leading, var(--text-size-title-h4--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h4--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h4--font-weight));\n  --tw-font-weight: var(--font-weight-black);\n  font-weight: var(--font-weight-black);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-title-h4 {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h4);\n  line-height: var(--tw-leading, var(--text-size-title-h4--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h4--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h4--font-weight));\n  --tw-font-weight: var(--font-weight-black);\n  font-weight: var(--font-weight-black);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-title-h5": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4405,7 +4600,7 @@
       "theme": [
         "--font-weight-black"
       ],
-      "css": ".text-title-h5 {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h5);\n  line-height: var(--tw-leading, var(--text-size-title-h5--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h5--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h5--font-weight));\n  --tw-font-weight: var(--font-weight-black);\n  font-weight: var(--font-weight-black);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-title-h5 {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h5);\n  line-height: var(--tw-leading, var(--text-size-title-h5--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h5--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h5--font-weight));\n  --tw-font-weight: var(--font-weight-black);\n  font-weight: var(--font-weight-black);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-title-h6": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4426,7 +4621,7 @@
       "theme": [
         "--font-weight-bold"
       ],
-      "css": ".text-title-h6 {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h6);\n  line-height: var(--tw-leading, var(--text-size-title-h6--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h6--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h6--font-weight));\n  --tw-font-weight: var(--font-weight-bold);\n  font-weight: var(--font-weight-bold);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-title-h6 {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-h6);\n  line-height: var(--tw-leading, var(--text-size-title-h6--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-h6--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-h6--font-weight));\n  --tw-font-weight: var(--font-weight-bold);\n  font-weight: var(--font-weight-bold);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-title-action": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4446,7 +4641,97 @@
       "theme": [
         "--font-weight-medium"
       ],
-      "css": ".text-title-action {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-action);\n  line-height: var(--tw-leading, var(--text-size-title-action--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-title-action--font-weight));\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-title-action {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-action);\n  line-height: var(--tw-leading, var(--text-size-title-action--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-title-action--font-weight));\n  --tw-font-weight: var(--font-weight-medium);\n  font-weight: var(--font-weight-medium);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+    },
+    "text-title-page": {
+      "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
+      "apply": [
+        "antialiased",
+        "font-title",
+        "text-box-vertical-margin",
+        "text-size-title-page"
+      ],
+      "tokens": [
+        "--font-title",
+        "--text-size-title-page",
+        "--text-size-title-page--line-height",
+        "--text-size-title-page--letter-spacing",
+        "--text-size-title-page--font-weight"
+      ],
+      "theme": [],
+      "css": ".text-title-page {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-page);\n  line-height: var(--tw-leading, var(--text-size-title-page--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-page--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-page--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+    },
+    "text-title-section": {
+      "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
+      "apply": [
+        "antialiased",
+        "font-title",
+        "text-box-vertical-margin",
+        "text-size-title-section"
+      ],
+      "tokens": [
+        "--font-title",
+        "--text-size-title-section",
+        "--text-size-title-section--line-height",
+        "--text-size-title-section--letter-spacing",
+        "--text-size-title-section--font-weight"
+      ],
+      "theme": [],
+      "css": ".text-title-section {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-section);\n  line-height: var(--tw-leading, var(--text-size-title-section--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-section--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-section--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+    },
+    "text-title-dialog": {
+      "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
+      "apply": [
+        "antialiased",
+        "font-title",
+        "text-box-vertical-margin",
+        "text-size-title-dialog"
+      ],
+      "tokens": [
+        "--font-title",
+        "--text-size-title-dialog",
+        "--text-size-title-dialog--line-height",
+        "--text-size-title-dialog--letter-spacing",
+        "--text-size-title-dialog--font-weight"
+      ],
+      "theme": [],
+      "css": ".text-title-dialog {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-dialog);\n  line-height: var(--tw-leading, var(--text-size-title-dialog--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-dialog--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-dialog--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+    },
+    "text-title-part": {
+      "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
+      "apply": [
+        "antialiased",
+        "font-title",
+        "text-box-vertical-margin",
+        "text-size-title-part"
+      ],
+      "tokens": [
+        "--font-title",
+        "--text-size-title-part",
+        "--text-size-title-part--line-height",
+        "--text-size-title-part--letter-spacing",
+        "--text-size-title-part--font-weight"
+      ],
+      "theme": [],
+      "css": ".text-title-part {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-part);\n  line-height: var(--tw-leading, var(--text-size-title-part--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-part--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-part--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+    },
+    "text-title-group": {
+      "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
+      "apply": [
+        "antialiased",
+        "font-title",
+        "text-box-vertical-margin",
+        "text-size-title-group"
+      ],
+      "tokens": [
+        "--font-title",
+        "--text-size-title-group",
+        "--text-size-title-group--line-height",
+        "--text-size-title-group--letter-spacing",
+        "--text-size-title-group--font-weight"
+      ],
+      "theme": [],
+      "css": ".text-title-group {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-title);\n  font-size: var(--text-size-title-group);\n  line-height: var(--tw-leading, var(--text-size-title-group--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-title-group--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-title-group--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-info-paragraph": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4463,7 +4748,7 @@
         "--text-size-info-paragraph--font-weight"
       ],
       "theme": [],
-      "css": ".text-info-paragraph {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-paragraph);\n  line-height: var(--tw-leading, var(--text-size-info-paragraph--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-info-paragraph--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-info-paragraph {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-paragraph);\n  line-height: var(--tw-leading, var(--text-size-info-paragraph--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-info-paragraph--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-info-detail": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4480,7 +4765,7 @@
         "--text-size-info-detail--font-weight"
       ],
       "theme": [],
-      "css": ".text-info-detail {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-detail);\n  line-height: var(--tw-leading, var(--text-size-info-detail--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-info-detail--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-info-detail {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-detail);\n  line-height: var(--tw-leading, var(--text-size-info-detail--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-info-detail--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-info-caption": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4497,7 +4782,7 @@
         "--text-size-info-caption--font-weight"
       ],
       "theme": [],
-      "css": ".text-info-caption {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-caption);\n  line-height: var(--tw-leading, var(--text-size-info-caption--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-info-caption--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-info-caption {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-caption);\n  line-height: var(--tw-leading, var(--text-size-info-caption--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-info-caption--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-info-label": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4518,7 +4803,7 @@
       "theme": [
         "--font-weight-bold"
       ],
-      "css": ".text-info-label {\n  min-height: auto;\n  text-box: trim-both cap alphabetic;\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-label);\n  line-height: var(--tw-leading, var(--text-size-info-label--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-info-label--font-weight));\n  --tw-font-weight: var(--font-weight-bold);\n  font-weight: var(--font-weight-bold);\n  text-transform: uppercase;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-info-label {\n  min-height: auto;\n  text-box: trim-both cap alphabetic;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-label);\n  line-height: var(--tw-leading, var(--text-size-info-label--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-info-label--font-weight));\n  --tw-font-weight: var(--font-weight-bold);\n  font-weight: var(--font-weight-bold);\n  text-transform: uppercase;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-info-option": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4540,7 +4825,7 @@
       "theme": [
         "--font-weight-bold"
       ],
-      "css": ".text-info-option {\n  min-height: auto;\n  text-box: trim-both cap alphabetic;\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-option);\n  line-height: var(--tw-leading, var(--text-size-info-option--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-info-option--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-info-option--font-weight));\n  --tw-font-weight: var(--font-weight-bold);\n  font-weight: var(--font-weight-bold);\n  text-transform: uppercase;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-info-option {\n  min-height: auto;\n  text-box: trim-both cap alphabetic;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-option);\n  line-height: var(--tw-leading, var(--text-size-info-option--line-height));\n  letter-spacing: var(--tw-tracking, var(--text-size-info-option--letter-spacing));\n  font-weight: var(--tw-font-weight, var(--text-size-info-option--font-weight));\n  --tw-font-weight: var(--font-weight-bold);\n  font-weight: var(--font-weight-bold);\n  text-transform: uppercase;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-info-tip": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4557,7 +4842,7 @@
         "--text-size-info-tip--font-weight"
       ],
       "theme": [],
-      "css": ".text-info-tip {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-tip);\n  line-height: var(--tw-leading, var(--text-size-info-tip--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-info-tip--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-info-tip {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-info);\n  font-size: var(--text-size-info-tip);\n  line-height: var(--tw-leading, var(--text-size-info-tip--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-info-tip--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-read-paragraph": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4577,7 +4862,7 @@
       "theme": [
         "--font-weight-light"
       ],
-      "css": ".text-read-paragraph {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-read);\n  font-size: var(--text-size-read-paragraph);\n  line-height: var(--tw-leading, var(--text-size-read-paragraph--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-read-paragraph--font-weight));\n  --tw-font-weight: var(--font-weight-light);\n  font-weight: var(--font-weight-light);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-read-paragraph {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-read);\n  font-size: var(--text-size-read-paragraph);\n  line-height: var(--tw-leading, var(--text-size-read-paragraph--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-read-paragraph--font-weight));\n  --tw-font-weight: var(--font-weight-light);\n  font-weight: var(--font-weight-light);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-read-detail": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4597,7 +4882,7 @@
       "theme": [
         "--font-weight-light"
       ],
-      "css": ".text-read-detail {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-read);\n  font-size: var(--text-size-read-detail);\n  line-height: var(--tw-leading, var(--text-size-read-detail--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-read-detail--font-weight));\n  --tw-font-weight: var(--font-weight-light);\n  font-weight: var(--font-weight-light);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-read-detail {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-read);\n  font-size: var(--text-size-read-detail);\n  line-height: var(--tw-leading, var(--text-size-read-detail--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-read-detail--font-weight));\n  --tw-font-weight: var(--font-weight-light);\n  font-weight: var(--font-weight-light);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-read-caption": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4614,7 +4899,7 @@
         "--text-size-read-caption--font-weight"
       ],
       "theme": [],
-      "css": ".text-read-caption {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-read);\n  font-size: var(--text-size-read-caption);\n  line-height: var(--tw-leading, var(--text-size-read-caption--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-read-caption--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-read-caption {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-read);\n  font-size: var(--text-size-read-caption);\n  line-height: var(--tw-leading, var(--text-size-read-caption--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-read-caption--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-code-snippet": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4631,7 +4916,7 @@
         "--text-size-code-snippet--font-weight"
       ],
       "theme": [],
-      "css": ".text-code-snippet {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-code);\n  font-size: var(--text-size-code-snippet);\n  line-height: var(--tw-leading, var(--text-size-code-snippet--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-code-snippet--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-code-snippet {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-code);\n  font-size: var(--text-size-code-snippet);\n  line-height: var(--tw-leading, var(--text-size-code-snippet--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-code-snippet--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "text-code-hack": {
       "source": "@maggioli-design-system/styles/dist/tailwind/typography.css",
@@ -4648,7 +4933,7 @@
         "--text-size-code-hack--font-weight"
       ],
       "theme": [],
-      "css": ".text-code-hack {\n  min-height: auto;\n  text-box: trim-both text;\n  font-family: var(--font-code);\n  font-size: var(--text-size-code-hack);\n  line-height: var(--tw-leading, var(--text-size-code-hack--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-code-hack--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
+      "css": ".text-code-hack {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n  font-family: var(--font-code);\n  font-size: var(--text-size-code-hack);\n  line-height: var(--tw-leading, var(--text-size-code-hack--line-height));\n  font-weight: var(--tw-font-weight, var(--text-size-code-hack--font-weight));\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}"
     },
     "transition-cosmetic": {
       "source": "@maggioli-design-system/design-tokens/dist/css/tailwind-theme-typography.css",
@@ -4729,19 +5014,19 @@
       "source": "@maggioli-design-system/styles/dist/tailwind/utilities.css",
       "tokens": [],
       "theme": [],
-      "css": ".text-box-uppercase {\n  min-height: auto;\n  text-box: trim-both cap alphabetic;\n}"
+      "css": ".text-box-uppercase {\n  min-height: auto;\n  text-box: trim-both cap alphabetic;\n  &:where(input) {\n    text-box: normal;\n  }\n}"
     },
     "text-box-vertical-margin": {
       "source": "@maggioli-design-system/styles/dist/tailwind/utilities.css",
       "tokens": [],
       "theme": [],
-      "css": ".text-box-vertical-margin {\n  min-height: auto;\n  text-box: trim-both text;\n}"
+      "css": ".text-box-vertical-margin {\n  min-height: auto;\n  text-box: trim-both text;\n  &:where(input) {\n    text-box: normal;\n  }\n}"
     },
     "text-box-vertical-align": {
       "source": "@maggioli-design-system/styles/dist/tailwind/utilities.css",
       "tokens": [],
       "theme": [],
-      "css": ".text-box-vertical-align {\n  min-height: auto;\n  text-box: trim-both cap alphabetic;\n}"
+      "css": ".text-box-vertical-align {\n  min-height: auto;\n  text-box: trim-both cap alphabetic;\n  &:where(input) {\n    text-box: normal;\n  }\n}"
     },
     "hide-scrollbar": {
       "source": "@maggioli-design-system/styles/dist/tailwind/utilities.css",
@@ -4754,6 +5039,32 @@
       "tokens": [],
       "theme": [],
       "css": ".not-hydrated {\n  animation-duration: 0s;\n  opacity: 0;\n  transition-delay: 0.1s;\n  transition-duration: 0s;\n  visibility: hidden;\n}"
+    },
+    "page-frame": {
+      "source": "@maggioli-design-system/styles/dist/tailwind/utilities.css",
+      "tokens": [
+        "--magma-width-page",
+        "--magma-width-page-gutter"
+      ],
+      "theme": [],
+      "css": ".page-frame {\n  box-sizing: content-box;\n  margin-inline: auto;\n  max-width: var(--magma-width-page, 1280px);\n  padding-inline: var(--magma-width-page-gutter, 24px);\n}"
+    },
+    "field-group": {
+      "source": "@maggioli-design-system/styles/dist/tailwind/utilities.css",
+      "apply": [
+        "text-title-group"
+      ],
+      "tokens": [
+        "--magma-rhythm-between-fields",
+        "--font-title",
+        "--text-size-title-group",
+        "--text-size-title-group--line-height",
+        "--text-size-title-group--letter-spacing",
+        "--text-size-title-group--font-weight",
+        "--magma-rhythm-title-content"
+      ],
+      "theme": [],
+      "css": ".field-group {\n  align-items: start;\n  border: 0;\n  display: grid;\n  gap: var(--magma-rhythm-between-fields, 24px);\n  grid-template-columns: repeat( auto-fill, minmax( min( 100%, max( 14rem - var(--magma-rhythm-between-fields, 24px) / 2, (100% - var(--magma-rhythm-between-fields, 24px)) / 2 - 1px ) ), 1fr ) );\n  margin: 0;\n  min-inline-size: 0;\n  padding: 0;\n  & > :not([short], legend) {\n    grid-column: 1 / -1;\n  }\n  & > legend {\n    min-height: auto;\n    text-box: trim-both text;\n    &:where(input) {\n      text-box: normal;\n    }\n    font-family: var(--font-title);\n    font-size: var(--text-size-title-group);\n    line-height: var(--tw-leading, var(--text-size-title-group--line-height));\n    letter-spacing: var(--tw-tracking, var(--text-size-title-group--letter-spacing));\n    font-weight: var(--tw-font-weight, var(--text-size-title-group--font-weight));\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    margin-block-end: var(--magma-rhythm-title-content, 12px);\n    padding: 0;\n  }\n}"
     }
   }
 }

package/dist/tailwind/typography.css

@@ -54,6 +54,45 @@
     text-size-title-action;
 }
 
+/* Titles by role (#1189): what the title is, not its level. Each reads the tokens of its role,
+ * --text-size-title-<role>, which point at the level the role is styled as (page h3, section and
+ * dialog h5, part and group h6), weight included: a theme moves a role in one place. */
+
+@utility text-title-page {
+  @apply antialiased
+    font-title
+    text-box-vertical-margin
+    text-size-title-page;
+}
+
+@utility text-title-section {
+  @apply antialiased
+    font-title
+    text-box-vertical-margin
+    text-size-title-section;
+}
+
+@utility text-title-dialog {
+  @apply antialiased
+    font-title
+    text-box-vertical-margin
+    text-size-title-dialog;
+}
+
+@utility text-title-part {
+  @apply antialiased
+    font-title
+    text-box-vertical-margin
+    text-size-title-part;
+}
+
+@utility text-title-group {
+  @apply antialiased
+    font-title
+    text-box-vertical-margin
+    text-size-title-group;
+}
+
 @utility text-info-paragraph {
   @apply antialiased
     font-info