@oods/component-styles 0.4.1 → 0.4.2

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 (3) hide show
  1. package/README.md +1 -1
  2. package/dist/components.css +22 -2
  3. package/package.json +3 -3
package/README.md CHANGED
@@ -28,4 +28,4 @@ Use matching versions of the OODS packages. These packages are separate from the
28
28
 
29
29
  ## License
30
30
 
31
- Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.4.1/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.4.1/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.
31
+ Apache License 2.0. See [LICENSE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.4.2/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.4.2/NOTICE). Generated output belongs to its user; installed package dependencies retain their own licenses.
package/dist/components.css CHANGED
@@ -1213,7 +1213,25 @@
1213
1213
  .oods-tab { margin-block-end: -1px; padding: var(--oods-tabs-padding-block) var(--oods-tabs-padding-inline); border: 0; border-block-end: var(--cmp-tabs-indicator-width, 0.125rem) solid transparent; background: transparent; color: var(--sys-text-secondary, CanvasText); font: inherit; font-size: var(--oods-tabs-font-size); font-weight: var(--sys-text-scale-label-font-weight, 500); line-height: var(--oods-tabs-line-height); cursor: pointer; }
1214
1214
  .oods-tab:hover:not(:disabled) { color: var(--sys-text-primary, CanvasText); }
1215
1215
  .oods-tab:disabled { color: var(--sys-text-disabled, GrayText); cursor: not-allowed; }
1216
- :where(.oods-tabs-overflow-trigger, .tabs__overflow-trigger) { padding: var(--oods-tabs-padding-block) var(--oods-tabs-padding-inline); font: inherit; font-size: var(--oods-tabs-font-size); font-weight: var(--sys-text-scale-label-font-weight, 500); line-height: var(--oods-tabs-line-height); }
1216
+ /* s224-m01 (#2542 ruling 2): the "More" trigger and its menu's items are tabs, not browser buttons: no border but the
1217
+ * transparent indicator, no fill, the secondary text that hover raises to primary, and a pointer; the shared focus ring
1218
+ * above covers both. The open menu overlays the panel under the trigger instead of growing the row: a list that holds
1219
+ * the menu lets it out (its tabs were measured to fit), and a list without one still scrolls. */
1220
+ .tabs__overflow-trigger, .oods-tabs-overflow-trigger, :where(.oods-tabs__overflow, .oods-tabs-overflow) > [role='menu'] > [role='menuitem'] { padding: var(--oods-tabs-padding-block) var(--oods-tabs-padding-inline); border: 0; border-block-end: var(--cmp-tabs-indicator-width, 0.125rem) solid transparent; background: transparent; color: var(--sys-text-secondary, CanvasText); font: inherit; font-size: var(--oods-tabs-font-size); font-weight: var(--sys-text-scale-label-font-weight, 500); line-height: var(--oods-tabs-line-height); cursor: pointer; }
1221
+ .tabs__overflow-trigger, .oods-tabs-overflow-trigger { margin-block-end: -1px; }
1222
+ :where(.oods-tabs__overflow, .oods-tabs-overflow) > [role='menu'] > [role='menuitem'] { text-align: start; }
1223
+ :is(.tabs__overflow-trigger, .oods-tabs-overflow-trigger, :where(.oods-tabs__overflow, .oods-tabs-overflow) > [role='menu'] > [role='menuitem']):hover:not(:disabled) { color: var(--sys-text-primary, CanvasText); }
1224
+ :where(.oods-tabs__overflow, .oods-tabs-overflow) > [role='menu'] > [role='menuitem']:disabled { color: var(--sys-text-disabled, GrayText); cursor: not-allowed; }
1225
+ .oods-tab-list:has(> :is(.oods-tabs__overflow, .oods-tabs-overflow)) { overflow: visible; }
1226
+ :where(.oods-tabs__overflow, .oods-tabs-overflow) { position: relative; display: flex; flex: none; }
1227
+ :where(.oods-tabs__overflow, .oods-tabs-overflow) > [role='menu'] {
1228
+ position: absolute;
1229
+ inset-block-start: 100%;
1230
+ inset-inline-end: 0;
1231
+ z-index: var(--oods-z-overlay);
1232
+ min-inline-size: max-content;
1233
+ margin-block-start: var(--sys-control-gap-compact, 0.25rem);
1234
+ }
1217
1235
  .oods-tab[aria-selected='true'] { border-block-end-color: var(--sys-surface-interactive-primary-default, Highlight); color: var(--sys-text-primary, CanvasText); }
1218
1236
  .oods-tab-panel { padding-block: var(--cmp-spacing-stack-default, 1rem); }
1219
1237
 
@@ -1259,7 +1277,9 @@
1259
1277
  }
1260
1278
 
1261
1279
  @media (forced-colors: active) {
1262
- :where(.oods-badge, .oods-banner, .oods-button, .oods-card, .oods-field-control, .oods-tab, .oods-table) {
1280
+ /* s224-m01 (#2542 ruling 2): the "More" trigger and its menu's items keep the tab's colours, as the tab does. */
1281
+ :where(.oods-badge, .oods-banner, .oods-button, .oods-card, .oods-field-control, .oods-tab, .oods-table,
1282
+ .tabs__overflow-trigger, .oods-tabs-overflow-trigger, :is(.oods-tabs__overflow, .oods-tabs-overflow) > [role='menu'] > [role='menuitem']) {
1263
1283
  forced-color-adjust: none;
1264
1284
  }
1265
1285
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oods/component-styles",
3
- "version": "0.4.1",
3
+ "version": "0.4.2",
4
4
  "description": "Shared CSS for the OODS Foundry React and Vue components, driven by its design tokens.",
5
5
  "homepage": "https://oods-foundry.com/",
6
6
  "bugs": {
@@ -49,10 +49,10 @@
49
49
  "**/*.css"
50
50
  ],
51
51
  "dependencies": {
52
- "@oods/tokens": "0.4.1"
52
+ "@oods/tokens": "0.4.2"
53
53
  },
54
54
  "devDependencies": {
55
- "@oods/component-contracts": "0.4.1",
55
+ "@oods/component-contracts": "0.4.2",
56
56
  "playwright": "^1.56.1"
57
57
  },
58
58
  "packageManager": "pnpm@9.12.2",