@maggioli-design-system/styles 17.3.0 → 17.5.0

package/dist/tailwind/utilities.css

@@ -18,19 +18,36 @@
   animation-play-state: running;
 }
 
+/* The text-box utilities trim nothing in an <input>: its line scrolls inside a box exactly as
+ * tall as the line, the trim leaves the glyphs taller than that box, and a drag that selects the
+ * text scrolls it up and down by the trimmed half-leading. The field sets its own height, so the
+ * trim gains nothing there. A <textarea> or a <select> keeps it: it adds no scroll to them. */
+
 @utility text-box-uppercase {
   min-height: auto;
   text-box: trim-both cap alphabetic;
+
+  &:where(input) {
+    text-box: normal;
+  }
 }
 
 @utility text-box-vertical-margin {
   min-height: auto;
   text-box: trim-both text;
+
+  &:where(input) {
+    text-box: normal;
+  }
 }
 
 @utility text-box-vertical-align {
   min-height: auto;
   text-box: trim-both cap alphabetic;
+
+  &:where(input) {
+    text-box: normal;
+  }
 }
 
 @utility hide-scrollbar {
@@ -59,6 +76,59 @@
   visibility: hidden;
 }
 
+/* The frame of a page (widths/page, #1189): the content stops at --magma-width-page and the
+ * gutter stays outside it, so the edge of the page is the edge of the content of mds-header-bar
+ * at every width. One element: the frame is the gutter and the width together. */
+@utility page-frame {
+  box-sizing: content-box;
+  margin-inline: auto;
+  max-width: var(--magma-width-page, 1280px);
+  padding-inline: var(--magma-width-page-gutter, 24px);
+}
+
+/* A group of fields (widths/field and titles/group, #1189): the fieldset of a form, with no
+ * border and no inset of its own, its legend in the style of a group title, the fields
+ * --magma-rhythm-between-fields apart. From 28rem up it lays out two tracks: a short field
+ * (mds-input-field short) takes one, so two short fields in a row share it and a lone one is
+ * half; every other child spans both. A track is never narrower than half of 28rem less half
+ * the gap, so the threshold is measured on the group itself, with no container query to place,
+ * and min(100%) keeps a track inside a narrow window. 28rem stays a literal: it is where the
+ * longest short answer mds-input knows, the tax code (16 characters), still fits a half. The
+ * rendered legend is no item of the grid: its space is a margin under it. */
+@utility field-group {
+  align-items: start;
+  border: 0;
+  display: grid;
+  gap: var(--magma-rhythm-between-fields, 24px);
+  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
+    )
+  );
+  margin: 0;
+  min-inline-size: 0;
+  padding: 0;
+
+  & > :not([short], legend) {
+    grid-column: 1 / -1;
+  }
+
+  & > legend {
+    @apply text-title-group;
+
+    margin-block-end: var(--magma-rhythm-title-content, 12px);
+    padding: 0;
+  }
+}
+
 @layer utilities {
   /* .focus-bounce:focus-visible {
     --magma-outline-blur: var(--magma-outline-focus);

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@maggioli-design-system/styles",
-  "version": "17.3.0",
+  "version": "17.5.0",
   "description": "This module contains SCSS and CSS styles used by Maggioli Design System, it also makes available a Tailwind config based on Maggioli design tokens.",
   "main": "./tailwind.config.js",
   "scripts": {
-    "build": "npm run clean && npm run semantic && npm run corner && npm run properties && npm run editor.tokens && npm run copy && npm run hydrated && npm run dtcg && npm run consumption && npm run tailwind.build",
+    "build": "npm run clean && npm run semantic && npm run dark.variant && npm run corner && npm run properties && npm run editor.tokens && npm run copy && npm run hydrated && npm run dtcg && npm run consumption && npm run tailwind.build",
     "clean": "tsx scripts/clean.ts",
     "semantic": "tsx scripts/semantic.ts",
+    "dark.variant": "tsx scripts/dark-variant.ts",
     "properties": "tsx scripts/properties.ts",
     "corner": "tsx scripts/corner.ts",
     "editor.tokens": "tsx scripts/editor-tokens.ts",
@@ -57,22 +58,22 @@
       "role": "Software Engineer"
     }
   ],
-  "license": "ISC",
+  "license": "MIT",
   "dependencies": {
     "@fontsource/karla": "5.3.0",
     "@fontsource/merriweather": "5.3.0",
     "@fontsource/roboto": "5.3.0",
     "@fontsource/roboto-mono": "5.3.0",
-    "@maggioli-design-system/design-tokens": "^15.2.2",
+    "@maggioli-design-system/design-tokens": "^15.4.0",
     "normalize.css": "8.0.1"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "4.3.3",
-    "autoprefixer": "10.6.1",
+    "@tailwindcss/postcss": "4.3.4",
+    "autoprefixer": "10.6.2",
     "handlebars": "4.7.10",
     "postcss-cli": "11.0.1",
-    "postcss": "8.5.31",
+    "postcss": "8.5.32",
     "postcss-import": "16.2.0",
-    "tailwindcss": "4.3.3"
+    "tailwindcss": "4.3.4"
   }
 }