@oods/component-styles 0.3.1 → 0.3.3

package/README.md

@@ -28,4 +28,4 @@ Use matching versions of the OODS packages. These packages are separate from the
 
 ## License
 
-Apache License 2.0. See [LICENSE](LICENSE) and [NOTICE](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.3.3/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.3.3/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.

package/dist/components.css

@@ -35,7 +35,10 @@
   text-transform: none;
   gap: var(--cmp-badge-gap, 0.25rem);
 }
-.oods-badge__label { line-height: inherit; }
+/* s221-m02 (#2482 ruling 2): React and Vue render one Badge markup, an icon slot and a label span, styled here; React's
+ * former statusable-badge classes no longer apply. */
+.oods-badge__label { display: inline-flex; align-items: center; line-height: inherit; }
+.oods-badge__icon { display: inline-flex; align-items: center; font-size: 0.85em; }
 
 /* Solid reverses the already contrast-checked status surface/text pair. */
 :where(.oods-badge, [data-oods-component='Badge'])[data-emphasis='solid'] {
@@ -61,10 +64,15 @@
   color: var(--cmp-banner-text, var(--cmp-text-body, currentColor));
 }
 
-.oods-banner__title,
-.oods-banner-title {
-  font-weight: var(--ref-typography-weights-bold, 700);
-}
+/* s221-m02 (#2482 ruling 2): the one Banner markup React and Vue share. A status icon takes its own column; the content
+ * stacks the title, detail, body and actions without paragraph margins. React's former statusable-banner classes, which
+ * gave React alone a three-column grid, no longer apply. */
+:where(.oods-banner:has(> .oods-banner__icon)) { grid-template-columns: auto 1fr auto; }
+.oods-banner__icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.25em; }
+.oods-banner__content { display: grid; align-content: start; gap: var(--sys-control-gap-compact, 0.25rem); min-inline-size: 0; }
+.oods-banner__title { font-weight: var(--ref-typography-weights-bold, 700); }
+:is(.oods-banner__detail, .oods-banner__body) { margin: 0; }
+.oods-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-spacing-inline-sm, 0.75rem); margin-block-start: var(--sys-control-gap-compact, 0.25rem); }
 
 :where(.oods-button, [data-oods-component='Button']) {
   --oods-button-min-block-size: var(--cmp-button-height, 2.5rem);
@@ -851,6 +859,9 @@
   text-align: start;
 }
 
+/* A row's action is the browser's own button, which otherwise takes the platform's font. */
+:where(.oods-table-row-action) { font: inherit; }
+
 :where(.oods-tabs, [data-oods-component='Tabs']) {
   --oods-tabs-font-size: var(--sys-text-size-md, 1rem);
   --oods-tabs-padding-block: var(--cmp-tabs-padding-block, 0.625rem);
@@ -951,14 +962,16 @@
   }
 }
 
-[data-theme='hc'] :where([data-oods-component='ColorSwatch'], [data-oods-component='ColorizedBadge'], [data-oods-component='ArchivePill'], [data-oods-component='CancellationBadge'], [data-oods-component='OwnerBadge'], [data-oods-component='ClassificationBadge'], [data-oods-component='AddressSummaryBadge'], [data-oods-component='MessageStatusBadge'], [data-oods-component='PreferenceSummaryBadge'], [data-oods-component='RoleBadgeList'], [data-oods-component='TagPills']) {
+/* s221-m02 (#2482 ruling 4): a theme works in any element, so an hc rule reaches only what hc themes most closely:
+ * never the inside of a panel that sets another theme within an hc page. The :where() adds no specificity. */
+[data-theme='hc'] :where([data-oods-component='ColorSwatch'], [data-oods-component='ColorizedBadge'], [data-oods-component='ArchivePill'], [data-oods-component='CancellationBadge'], [data-oods-component='OwnerBadge'], [data-oods-component='ClassificationBadge'], [data-oods-component='AddressSummaryBadge'], [data-oods-component='MessageStatusBadge'], [data-oods-component='PreferenceSummaryBadge'], [data-oods-component='RoleBadgeList'], [data-oods-component='TagPills']):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   border-color: CanvasText;
   background: Canvas;
   color: CanvasText;
 }
 
-[data-theme='hc'] :where([data-oods-component='ColorSwatch']) > [data-oods-swatch-chip],
-[data-theme='hc'] :where([data-oods-component='ColorizedBadge']) [data-oods-badge-marker] {
+[data-theme='hc'] :where([data-oods-component='ColorSwatch']) > [data-oods-swatch-chip]:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)),
+[data-theme='hc'] :where([data-oods-component='ColorizedBadge']) [data-oods-badge-marker]:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   border-color: CanvasText;
   background: CanvasText;
 }
@@ -973,23 +986,23 @@
   [data-oods-component='Badge'],
   .oods-banner,
   [data-oods-component='Banner']
-) {
+):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   border-color: Highlight;
   background: Canvas;
   color: CanvasText;
 }
 
-[data-theme='hc'] .oods-field-error {
+[data-theme='hc'] .oods-field-error:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   color: CanvasText;
 }
 
-[data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):not(:disabled) {
+[data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   border-color: Highlight;
   background: Highlight;
   color: HighlightText;
 }
 
-[data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):disabled {
+[data-theme='hc'] :where(.oods-button, [data-oods-component='Button']):disabled:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   border-color: GrayText;
   background: Canvas;
   color: GrayText;
@@ -1004,7 +1017,7 @@
   }
 }
 
-[data-theme='hc'] :where([data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel'], [data-oods-component='FilterPanel'], [data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary'], [data-oods-component='TagManager'], [data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline'], [data-oods-component='AuditEvent'], [data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='StatusSelector'], [data-oods-component='TagInput'], [data-oods-component='TemplatePicker']) {
+[data-theme='hc'] :where([data-oods-component='AddressCollectionPanel'], [data-oods-component='ClassificationPanel'], [data-oods-component='MembershipPanel'], [data-oods-component='PreferencePanel'], [data-oods-component='FilterPanel'], [data-oods-component='ArchiveSummary'], [data-oods-component='OwnershipSummary'], [data-oods-component='TagSummary'], [data-oods-component='PriceSummary'], [data-oods-component='TagManager'], [data-oods-component='AddressValidationTimeline'], [data-oods-component='MembershipAuditTimeline'], [data-oods-component='MessageEventTimeline'], [data-oods-component='PreferenceTimeline'], [data-oods-component='AuditEvent'], [data-oods-component='AddressEditor'], [data-oods-component='CancellationForm'], [data-oods-component='ClassificationEditor'], [data-oods-component='PreferenceEditor'], [data-oods-component='RoleAssignmentForm'], [data-oods-component='StatusSelector'], [data-oods-component='TagInput'], [data-oods-component='TemplatePicker']):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   border-color: CanvasText;
   background: Canvas;
   color: CanvasText;
@@ -1364,7 +1377,7 @@
 [data-oods-collection-toolbar] select { width: 100%; box-sizing: border-box; }
 [data-oods-component='Stack']:has(> [data-oods-collection-toolbar]) { font-family: var(--ref-typography-families-sans, system-ui, sans-serif); }
 .oods-collection-row { --oods-button-background: var(--sys-surface-raised); --oods-button-background-hover: var(--sys-surface-subtle); --oods-button-border: var(--sys-border-subtle); --oods-button-text: var(--sys-text-primary); width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--cmp-spacing-inline-sm, 0.75rem); text-align: left; padding: var(--cmp-spacing-inset-default, 1rem); }
-[data-theme='hc'] .oods-collection-row:not(:disabled) { background: var(--sys-surface-raised); color: var(--sys-text-primary); }
+[data-theme='hc'] .oods-collection-row:not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) { background: var(--sys-surface-raised); color: var(--sys-text-primary); }
 .oods-collection-row > :first-child { min-width: 0; flex: 1 1 140px; font-weight: var(--ref-typography-weights-semibold, 600); }
 .oods-collection-row .oods-badge { max-width: 100%; width: fit-content; flex: 0 0 auto; text-transform: none; letter-spacing: normal; }
 [data-oods-collection="events"] time { display: block; margin-top: var(--cmp-spacing-stack-xs, 0.5rem); font-size: var(--sys-text-size-sm, 0.875rem); }
@@ -1376,7 +1389,7 @@
 .oods-audit-summary dl { display: grid; grid-template-columns: auto 1fr; gap: var(--cmp-spacing-inline-sm); }
 .oods-audit-summary dd { margin: 0; }
 :where(.oods-sort-indicator, [data-oods-component='SortIndicator']) { border-collapse: collapse; color: var(--cmp-text-body); }
-.oods-sort-indicator button { padding: var(--cmp-spacing-inline-sm); background: var(--cmp-surface-panel); color: var(--cmp-text-body); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-input-radius); cursor: pointer; }
+.oods-sort-indicator button { padding: var(--cmp-spacing-inline-sm); background: var(--cmp-surface-panel); color: var(--cmp-text-body); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-input-radius); font: inherit; cursor: pointer; }
 [data-oods-component='TimelineEntryLabel'] { color: var(--cmp-text-body); }
 
 .oods-trait-recipe, :where([data-oods-component='ArchiveEvent'], [data-oods-component='CancellationEvent'], [data-oods-component='ColorStatePicker'], [data-oods-component='CommunicationDetailPanel'], [data-oods-component='GeoFieldMappingForm'], [data-oods-component='GeocodablePreview'], [data-oods-component='StateTransitionEvent'], [data-oods-component='StatusColorLegend'], [data-oods-component='VizAreaControls'], [data-oods-component='VizAxisControls'], [data-oods-component='VizAxisSummary'], [data-oods-component='VizColorControls'], [data-oods-component='VizColorLegendConfig'], [data-oods-component='VizHeatmapControls'], [data-oods-component='VizLineControls'], [data-oods-component='VizMarkControls'], [data-oods-component='VizOpacityControls'], [data-oods-component='VizOpacitySummary'], [data-oods-component='VizPointControls'], [data-oods-component='VizScaleControls'], [data-oods-component='VizScaleSummary'], [data-oods-component='VizScatterControls'], [data-oods-component='VizShapeControls'], [data-oods-component='VizShapeLegend'], [data-oods-component='VizSizeControls'], [data-oods-component='VizSizeSummary']) { min-width: 0; margin: 0; padding: var(--cmp-spacing-inset-default); border: 1px solid var(--cmp-border-default); border-radius: var(--cmp-input-radius); background: var(--cmp-surface-panel); color: var(--cmp-text-body); overflow-wrap: anywhere; }
@@ -1397,6 +1410,17 @@
 /* s213-m03: a declared major-unit amount reads through PriceBadge in a detail row; its pill hugs the amount instead of
    stretching across the row. */
 [data-oods-component='Stack'][id$='-read-field'] > [data-oods-component='PriceBadge'] { align-self: flex-start; }
+/* s221-m02 (#2482 ruling 7; the website's Warehouse, message dfc707d1): at desktop width a panel of read-only rows uses
+ * the room, in two columns. The panel's stack layout is inline in the generated source, so display is overridden here
+ * and the generated source does not move. */
+@media (min-width: 48rem) {
+  [data-oods-component='Stack']:has(> [data-oods-component='Stack'][id$='-read-field']):not([id$='-read-fields']) {
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
+  }
+  [data-oods-component='Stack']:has(> [data-oods-component='Stack'][id$='-read-field']):not([id$='-read-fields']) > :not([id$='-read-field']) { grid-column: 1 / -1; }
+}
 [data-oods-component='StatusBadge'] { text-transform: none; letter-spacing: normal; width: fit-content; }
 
 /* Keep the frozen ported block intact; current recipe roles follow semantic fallbacks. */
@@ -1479,11 +1503,11 @@ input[data-oods-component='Checkbox'], .oods-field input[type='checkbox'] { marg
 
 /* A destructive action remains distinguishable when every action uses the
  * user's HC system colors: shape and a warning glyph carry the distinction. */
-[data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']:not(:disabled) {
+[data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']:not(:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
   border: 3px double CanvasText;
   background: Canvas;
   color: CanvasText;
 }
-[data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']::before {
+[data-theme='hc'] :where(.oods-button, [data-oods-component='Button'])[data-intent='danger']:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *))::before {
   content: "⚠" / "";
 }

package/package.json

@@ -1,11 +1,22 @@
 {
   "name": "@oods/component-styles",
-  "version": "0.3.1",
-  "description": "Token-driven shared CSS contract for OODS React and Vue components.",
+  "version": "0.3.3",
+  "description": "Shared CSS for the OODS Foundry React and Vue components, driven by its design tokens.",
+  "homepage": "https://oods-foundry.com/",
+  "bugs": {
+    "email": "derek@derekn.com"
+  },
+  "keywords": [
+    "oods",
+    "oods-foundry",
+    "css",
+    "design-tokens",
+    "design-system"
+  ],
   "type": "module",
   "license": "Apache-2.0",
   "engines": {
-    "node": ">=20.11.1"
+    "node": ">=22.0.0"
   },
   "files": [
     "dist",
@@ -38,10 +49,10 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@oods/tokens": "0.3.1"
+    "@oods/tokens": "0.3.3"
   },
   "devDependencies": {
-    "@oods/component-contracts": "0.3.1",
+    "@oods/component-contracts": "0.3.3",
     "playwright": "^1.56.1"
   },
   "packageManager": "pnpm@9.12.2",