@ttoss/fsl-ui 0.2.6 → 0.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/AppShell/AppShell.cjs +8 -4
  2. package/dist/components/AppShell/AppShell.mjs +8 -4
  3. package/dist/components/Container/Container.cjs +2 -1
  4. package/dist/components/Container/Container.mjs +2 -1
  5. package/dist/components/Grid/Grid.cjs +20 -1
  6. package/dist/components/Grid/Grid.d.cts +5 -0
  7. package/dist/components/Grid/Grid.d.mts +5 -0
  8. package/dist/components/Grid/Grid.mjs +18 -1
  9. package/llms.txt +7 -3
  10. package/package.json +2 -2
package/dist/components/AppShell/AppShell.cjs CHANGED
@@ -71,7 +71,8 @@ var AppShell = ({
71
71
  "data-scope": "app-shell",
72
72
  "data-part": "header",
73
73
  style: {
74
- borderBlockEnd: HAIRLINE
74
+ borderBlockEnd: HAIRLINE,
75
+ containerType: "inline-size"
75
76
  },
76
77
  children: header
77
78
  }) : null, /* @__PURE__ */(0, react_jsx_runtime.jsxs)("div", {
@@ -93,7 +94,8 @@ var AppShell = ({
93
94
  "aria-label": sidebarLabel,
94
95
  style: {
95
96
  overflowY: "auto",
96
- borderInlineEnd: HAIRLINE
97
+ borderInlineEnd: HAIRLINE,
98
+ containerType: "inline-size"
97
99
  },
98
100
  children: sidebar
99
101
  }) : null, /* @__PURE__ */(0, react_jsx_runtime.jsx)("main", {
@@ -101,7 +103,8 @@ var AppShell = ({
101
103
  "data-part": "main",
102
104
  style: {
103
105
  overflow: "auto",
104
- minInlineSize: 0
106
+ minInlineSize: 0,
107
+ containerType: "inline-size"
105
108
  },
106
109
  children
107
110
  }), hasAside ? /* @__PURE__ */(0, react_jsx_runtime.jsx)("aside", {
@@ -110,7 +113,8 @@ var AppShell = ({
110
113
  "aria-label": asideLabel,
111
114
  style: {
112
115
  overflowY: "auto",
113
- borderInlineStart: HAIRLINE
116
+ borderInlineStart: HAIRLINE,
117
+ containerType: "inline-size"
114
118
  },
115
119
  children: aside
116
120
  }) : null]
package/dist/components/AppShell/AppShell.mjs CHANGED
@@ -71,7 +71,8 @@ var AppShell = ({
71
71
  "data-scope": "app-shell",
72
72
  "data-part": "header",
73
73
  style: {
74
- borderBlockEnd: HAIRLINE
74
+ borderBlockEnd: HAIRLINE,
75
+ containerType: "inline-size"
75
76
  },
76
77
  children: header
77
78
  }) : null, /* @__PURE__ */jsxs("div", {
@@ -93,7 +94,8 @@ var AppShell = ({
93
94
  "aria-label": sidebarLabel,
94
95
  style: {
95
96
  overflowY: "auto",
96
- borderInlineEnd: HAIRLINE
97
+ borderInlineEnd: HAIRLINE,
98
+ containerType: "inline-size"
97
99
  },
98
100
  children: sidebar
99
101
  }) : null, /* @__PURE__ */jsx("main", {
@@ -101,7 +103,8 @@ var AppShell = ({
101
103
  "data-part": "main",
102
104
  style: {
103
105
  overflow: "auto",
104
- minInlineSize: 0
106
+ minInlineSize: 0,
107
+ containerType: "inline-size"
105
108
  },
106
109
  children
107
110
  }), hasAside ? /* @__PURE__ */jsx("aside", {
@@ -110,7 +113,8 @@ var AppShell = ({
110
113
  "aria-label": asideLabel,
111
114
  style: {
112
115
  overflowY: "auto",
113
- borderInlineStart: HAIRLINE
116
+ borderInlineStart: HAIRLINE,
117
+ containerType: "inline-size"
114
118
  },
115
119
  children: aside
116
120
  }) : null]
package/dist/components/Container/Container.cjs CHANGED
@@ -53,7 +53,8 @@ var Container = ({
53
53
  marginInline: "auto",
54
54
  width: "100%",
55
55
  maxWidth: MAX_WIDTH[size],
56
- paddingInline: GUTTER[gutter]
56
+ paddingInline: GUTTER[gutter],
57
+ containerType: "inline-size"
57
58
  },
58
59
  children
59
60
  });
package/dist/components/Container/Container.mjs CHANGED
@@ -53,7 +53,8 @@ var Container = ({
53
53
  marginInline: "auto",
54
54
  width: "100%",
55
55
  maxWidth: MAX_WIDTH[size],
56
- paddingInline: GUTTER[gutter]
56
+ paddingInline: GUTTER[gutter],
57
+ containerType: "inline-size"
57
58
  },
58
59
  children
59
60
  });
package/dist/components/Grid/Grid.cjs CHANGED
@@ -1,6 +1,9 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
+ const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
2
3
  let _ttoss_fsl_theme_vars = require("@ttoss/fsl-theme/vars");
3
4
  let react_jsx_runtime = require("react/jsx-runtime");
5
+ let react = require("react");
6
+ react = require_runtime.__toESM(react);
4
7
 
5
8
  //#region src/components/Grid/Grid.tsx
6
9
  /** Formal semantic identity — Grid root (Structure entity, 2D layout). */
@@ -45,6 +48,11 @@ var autoTracks = min => {
45
48
  * named scale, so grid rhythm stays consistent across a product. For a single
46
49
  * axis of flow, reach for `Stack` instead.
47
50
  *
51
+ * Each child is hosted in a `data-part="item"` wrapper that establishes
52
+ * `container-type: inline-size` (ADR-011): the theme's container-fluid
53
+ * scales (`cqi` clamps) resolve against the item's track width, so type and
54
+ * spacing inside a narrow tile scale down instead of overflowing.
55
+ *
48
56
  * @example
49
57
  * ```tsx
50
58
  * // Fixed columns
@@ -78,7 +86,18 @@ var Grid = ({
78
86
  alignItems: ALIGN[align],
79
87
  justifyItems: ALIGN[justify]
80
88
  },
81
- children
89
+ children: react.Children.map(children, child => {
90
+ if (child === null || child === void 0) return child;
91
+ return /* @__PURE__ */(0, react_jsx_runtime.jsx)("div", {
92
+ "data-scope": "grid",
93
+ "data-part": "item",
94
+ style: {
95
+ display: "grid",
96
+ containerType: "inline-size"
97
+ },
98
+ children: child
99
+ });
100
+ })
82
101
  });
83
102
  };
84
103
  Grid.displayName = gridMeta.displayName;
package/dist/components/Grid/Grid.d.cts CHANGED
@@ -62,6 +62,11 @@ interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' |
62
62
  * named scale, so grid rhythm stays consistent across a product. For a single
63
63
  * axis of flow, reach for `Stack` instead.
64
64
  *
65
+ * Each child is hosted in a `data-part="item"` wrapper that establishes
66
+ * `container-type: inline-size` (ADR-011): the theme's container-fluid
67
+ * scales (`cqi` clamps) resolve against the item's track width, so type and
68
+ * spacing inside a narrow tile scale down instead of overflowing.
69
+ *
65
70
  * @example
66
71
  * ```tsx
67
72
  * // Fixed columns
package/dist/components/Grid/Grid.d.mts CHANGED
@@ -62,6 +62,11 @@ interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' |
62
62
  * named scale, so grid rhythm stays consistent across a product. For a single
63
63
  * axis of flow, reach for `Stack` instead.
64
64
  *
65
+ * Each child is hosted in a `data-part="item"` wrapper that establishes
66
+ * `container-type: inline-size` (ADR-011): the theme's container-fluid
67
+ * scales (`cqi` clamps) resolve against the item's track width, so type and
68
+ * spacing inside a narrow tile scale down instead of overflowing.
69
+ *
65
70
  * @example
66
71
  * ```tsx
67
72
  * // Fixed columns
package/dist/components/Grid/Grid.mjs CHANGED
@@ -1,6 +1,7 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
2
  import { vars } from "@ttoss/fsl-theme/vars";
3
3
  import { jsx } from "react/jsx-runtime";
4
+ import * as React from "react";
4
5
 
5
6
  //#region src/components/Grid/Grid.tsx
6
7
  /** Formal semantic identity — Grid root (Structure entity, 2D layout). */
@@ -45,6 +46,11 @@ var autoTracks = min => {
45
46
  * named scale, so grid rhythm stays consistent across a product. For a single
46
47
  * axis of flow, reach for `Stack` instead.
47
48
  *
49
+ * Each child is hosted in a `data-part="item"` wrapper that establishes
50
+ * `container-type: inline-size` (ADR-011): the theme's container-fluid
51
+ * scales (`cqi` clamps) resolve against the item's track width, so type and
52
+ * spacing inside a narrow tile scale down instead of overflowing.
53
+ *
48
54
  * @example
49
55
  * ```tsx
50
56
  * // Fixed columns
@@ -78,7 +84,18 @@ var Grid = ({
78
84
  alignItems: ALIGN[align],
79
85
  justifyItems: ALIGN[justify]
80
86
  },
81
- children
87
+ children: React.Children.map(children, child => {
88
+ if (child === null || child === void 0) return child;
89
+ return /* @__PURE__ */jsx("div", {
90
+ "data-scope": "grid",
91
+ "data-part": "item",
92
+ style: {
93
+ display: "grid",
94
+ containerType: "inline-size"
95
+ },
96
+ children: child
97
+ });
98
+ })
82
99
  });
83
100
  };
84
101
  Grid.displayName = gridMeta.displayName;
package/llms.txt CHANGED
@@ -111,13 +111,17 @@ Structure: Form, FormActions, Wizard, WizardStep, WizardSummary,
111
111
  never a free style/className),
112
112
  Grid (2D layout: columns=N or minColumnWidth=xs|sm|md|lg for
113
113
  responsive auto-fit, rows, gap=xs..xl, align, justify — never a
114
- raw track template),
114
+ raw track template; each child gets a data-part="item" wrapper
115
+ that is a size container, so theme cqi scales resolve to the
116
+ track width),
115
117
  Container (centered page column: size=surface|reading,
116
- gutter=page|section|none — instead of max-width + margin auto),
118
+ gutter=page|section|none — instead of max-width + margin auto;
119
+ the column is a size container for theme cqi scales),
117
120
  AppShell (full-viewport app frame: header?, sidebar?, aside?,
118
121
  sidebarWidth/asideWidth=sm|md|lg, sidebarLabel/asideLabel for the
119
122
  landmark names; main content as children — instead of a
120
- hand-rolled viewport grid),
123
+ hand-rolled viewport grid; every region is a size container for
124
+ theme cqi scales),
121
125
  Code (code text: block=true scrollable <pre> surface, block=false
122
126
  inline <code> run)
123
127
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/fsl-ui",
3
- "version": "0.2.6",
3
+ "version": "0.2.7",
4
4
  "description": "Semantic, token-native component library for the ttoss ecosystem. Built on React Aria Components with @ttoss/fsl-theme tokens.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,7 +33,7 @@
33
33
  "@iconify-icon/react": "^2.2.0",
34
34
  "@iconify/icons-lucide": "^1.2.135",
35
35
  "react-aria-components": "~1.19.0",
36
- "@ttoss/fsl-theme": "^2.1.3"
36
+ "@ttoss/fsl-theme": "^2.1.4"
37
37
  },
38
38
  "devDependencies": {
39
39
  "@testing-library/react": "^16.3.2",