@oods/component-styles 0.11.0 → 0.11.2

package/README.md

@@ -24,8 +24,8 @@ The stylesheet expects OODS component markup and classes. Applying it to an unre
 
 ## Limits
 
-Use one version of the OODS packages together. Apps that `@oods/foundry` generates pin the tested 0.6.2 set; keep those pins unless you upgrade all of them together. These packages are separate from the local MCP server, `@oods/foundry`. <!-- history -->
+Generated apps pin the OODS release that generated them; to upgrade, regenerate the app or move all four pins together. These packages are separate from the local MCP server, `@oods/foundry`.
 
 ## License
 
-Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.11.0/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.11.0/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.
+Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.11.2/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.11.2/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.

package/dist/components.css

@@ -537,25 +537,25 @@
 }
 :where([data-viz-svg]) { min-inline-size: 0; }
 :where([data-viz-svg]) > svg { display: block; inline-size: 100%; max-inline-size: var(--oods-viz-width, 100%); block-size: auto; }
-/* A placed chart carries a narrow render beside the design-size one; the figure measures its own inline size and shows the narrow render at 600px or less, so axis text keeps its size on a phone column instead of scaling with the SVG (Sprint 202 m01). */
+/* A placed chart carries a narrow render beside the design-size one; the figure measures its own inline size and shows the narrow render below the design SVG's intrinsic 730px width, so axis text keeps its size on a phone column instead of scaling with the SVG (Sprint 202 m01). */
 :where([data-viz-rendered='true'][data-viz-narrow='true']) { container-type: inline-size; }
 :where([data-viz-svg-narrow]) { display: none; min-inline-size: 0; }
-:where([data-viz-svg-narrow]) > svg { display: block; inline-size: 100%; block-size: auto; }
-@container (max-width: 600px) {
+:where([data-viz-svg-narrow]) > svg { display: block; inline-size: 100%; max-inline-size: calc(302px * 1.25); margin-inline: auto; block-size: auto; }
+@container (max-width: 729px) {
   :where([data-viz-narrow='true']) > [data-viz-svg] { display: none; }
   :where([data-viz-narrow='true']) > [data-viz-svg-narrow] { display: block; }
 }
 /* s213-m01 (Sprint 212 review finding 5): a figure with a wide render fills its column. The design render grows until
- * the figure is 900px wide, then the render drawn for a desktop column takes over, so the chart spans the screen near
+ * the figure is 1130px wide, then the render drawn for a desktop column takes over, so the chart spans the screen near
  * design scale; it used to stop at its design width, half of a 1440 detail screen. */
 :where([data-viz-rendered='true'][data-viz-wide='true']) { container-type: inline-size; }
 :where([data-viz-svg-wide]) { display: none; min-inline-size: 0; }
 :where([data-viz-svg-wide]) > svg { display: block; inline-size: 100%; block-size: auto; }
 /* Each render is drawn at most 1.25 times its own size, so a 10px axis label never passes 12.5px (#2347): the design
- * render reaches about 1.23 times before the wide one takes over, and the wide render, 1130px wide, stops growing here. */
+ * render stops at 1.25 times while waiting for the wide render to fit, and the wide render, 1130px wide, stops growing here. */
 :where([data-viz-svg-wide]) > svg { max-inline-size: calc(1130px * 1.25); }
-:where([data-viz-wide='true']) > [data-viz-svg] > svg { max-inline-size: none; }
-@container (min-width: 900px) {
+:where([data-viz-wide='true']) > [data-viz-svg] > svg { max-inline-size: calc(730px * 1.25); margin-inline: auto; }
+@container (min-width: 1130px) {
   :where([data-viz-wide='true']) > [data-viz-svg] { display: none; }
   :where([data-viz-wide='true']) > [data-viz-svg-wide] { display: block; }
 }
@@ -2029,6 +2029,10 @@ div.oods-field[data-oods-component='Checkbox'] { display: grid; grid-template-co
 
 /* A record's events read as one timeline: each event sits on a rail at the left instead of in a card of its own. */
 [data-oods-collection='events'] > .oods-collection { gap: 0; }
+/* Vue's mapped Card wraps the team's surface. Match React's inset only for event entries. */
+[data-oods-collection='events'] > .oods-collection > li > [data-oods-adapter='Card'] > [data-oods-card-surface] {
+  padding-inline: var(--sys-inset-md, 1rem);
+}
 [data-oods-collection='events'] > .oods-collection > li > :is(.oods-card, [data-oods-component='Card']) {
   gap: var(--sys-control-gap-compact, 0.25rem);
   padding: 0 0 var(--sys-stack-md, 1rem) var(--sys-inset-md, 1rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oods/component-styles",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "Shared CSS for the OODS Foundry React and Vue components, driven by its design tokens.",
   "homepage": "https://oods-foundry.com/",
   "bugs": {
@@ -50,10 +50,10 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@oods/tokens": "0.11.0"
+    "@oods/tokens": "0.11.2"
   },
   "devDependencies": {
-    "@oods/component-contracts": "0.11.0",
+    "@oods/component-contracts": "0.11.2",
     "playwright": "^1.56.1"
   },
   "packageManager": "pnpm@9.12.2",