@oods/component-styles 0.4.0 → 0.4.1

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](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.4.0/LICENSE) and [NOTICE](https://cdn.jsdelivr.net/npm/@oods/component-styles@0.4.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.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.

package/dist/{chunk-T5I3FGSQ.js → chunk-PGAP2D2D.js}

@@ -115,7 +115,11 @@ var COMPONENT_STYLE_IDS = [
   "VizSizeSummary",
   // s222-m02 (#2502 ruling 11): styled in components-overlay.css, which components.css imports.
   "Dialog",
-  "Switch"
+  "Switch",
+  // s223-m02 (#2527 ruling 11): styled in components-combobox.css, which components.css imports.
+  "Combobox",
+  // s223-m02 (#2527 ruling 10): styled in components-segmented-control.css, which components.css imports.
+  "SegmentedControl"
 ];
 var SUPPORTED_COMPONENT_THEME_CELLS = Object.freeze(brands.flatMap((brand) => ["light", "dark", "hc"].map((theme) => Object.freeze({ brand, theme }))));
 var COMPONENT_DATA_ATTRIBUTE = "data-oods-component";

package/dist/components-combobox.css

@@ -0,0 +1,189 @@
+/* s223-m02 (#2527 ruling 11): Combobox. components.css imports this sheet ahead of its own rules and the HTML renderer
+ * inlines it in the same place, so the three renderers paint one markup from the same rules. The input is a field control
+ * (.oods-field-control), so it takes the field's border, fill, hover, invalid and disabled looks, and the shared focus rule
+ * in components.css paints its focus; nothing here does. */
+
+/* The size sets the control's block size, side padding and type, as Button, Input and Select have them at each size:
+ * xs 24 (12/16), sm 28 (14/20), md 32 (14/20) and lg 40 (16/24). An option in the list is the same height. */
+:where(.oods-combobox, [data-oods-component='Combobox']) {
+  --oods-combobox-block-size: var(--sys-control-height-md);
+  --oods-combobox-padding-inline: var(--cmp-input-padding-inline);
+  --oods-combobox-font-size: var(--sys-text-scale-body-sm-font-size);
+  --oods-combobox-line-height: var(--sys-text-scale-body-sm-line-height);
+}
+
+:where(.oods-combobox, [data-oods-component='Combobox'])[data-size='xs'] {
+  --oods-combobox-block-size: var(--sys-control-height-xs);
+  --oods-combobox-padding-inline: var(--sys-control-padding-inline-xs);
+  --oods-combobox-font-size: var(--sys-text-scale-caption-font-size);
+  --oods-combobox-line-height: var(--sys-text-scale-caption-line-height);
+}
+
+:where(.oods-combobox, [data-oods-component='Combobox'])[data-size='sm'] {
+  --oods-combobox-block-size: var(--sys-control-height-sm);
+  --oods-combobox-padding-inline: var(--sys-control-padding-inline-sm);
+}
+
+:where(.oods-combobox, [data-oods-component='Combobox'])[data-size='lg'] {
+  --oods-combobox-block-size: var(--sys-control-height-lg);
+  --oods-combobox-padding-inline: var(--sys-control-padding-inline-lg);
+  --oods-combobox-font-size: var(--sys-text-scale-body-md-font-size);
+  --oods-combobox-line-height: var(--sys-text-scale-body-md-line-height);
+}
+
+/* The popup is placed against the control, so it opens under the input at the input's width. */
+.oods-combobox__control {
+  position: relative;
+  min-inline-size: 0;
+}
+
+/* Two classes, so the size wins over the field control rule that components.css writes after this sheet. The text stops
+ * short of the chevron. */
+.oods-combobox .oods-combobox__input {
+  min-block-size: var(--oods-combobox-block-size);
+  padding-inline: var(--oods-combobox-padding-inline) calc(var(--oods-combobox-padding-inline) + var(--sys-control-icon-size) + var(--sys-control-gap-compact));
+  font-size: var(--oods-combobox-font-size);
+  line-height: var(--oods-combobox-line-height);
+  text-overflow: ellipsis;
+}
+
+/* The chevron is the shared 16px mark in the muted text colour; it turns over while the list is open and lets a click
+ * through to the input. */
+.oods-combobox__chevron {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: var(--oods-combobox-padding-inline);
+  display: flex;
+  align-items: center;
+  color: var(--sys-text-muted);
+  pointer-events: none;
+}
+
+.oods-combobox__chevron > svg {
+  display: block;
+  inline-size: var(--sys-control-icon-size);
+  block-size: var(--sys-control-icon-size);
+  transition: transform var(--oods-motion-duration-fast) var(--oods-motion-easing-standard);
+}
+
+.oods-combobox__input[aria-expanded='true'] + .oods-combobox__chevron > svg { transform: rotate(180deg); }
+.oods-combobox__input:disabled + .oods-combobox__chevron { color: var(--sys-text-disabled); }
+
+/* The popup takes the overlay elevation (#2502 ruling 10): the raised surface with a 1px ring and the overlay drop (a ring
+ * in dark), the large control radius, and at most eight md rows (16rem) before it scrolls. */
+.oods-combobox__popup {
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline: 0;
+  z-index: var(--oods-z-overlay);
+  box-sizing: border-box;
+  max-block-size: calc(8 * var(--sys-control-height-md));
+  margin-block-start: var(--sys-control-gap-compact);
+  padding: var(--sys-control-gap-compact);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--sys-border-subtle);
+  border-radius: var(--sys-radius-control-lg);
+  background: var(--sys-surface-raised);
+  color: var(--sys-text-primary);
+  box-shadow: var(--cmp-shadow-overlay-offset-x) var(--cmp-shadow-overlay-offset-y) var(--cmp-shadow-overlay-blur) var(--cmp-shadow-overlay-spread) var(--cmp-shadow-overlay-color);
+}
+
+.oods-combobox__listbox {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* An option is the control height; its text lines up with the input's text, and the check mark sits at its end. */
+.oods-combobox__option {
+  display: flex;
+  align-items: center;
+  gap: var(--sys-control-gap);
+  box-sizing: border-box;
+  min-block-size: var(--oods-combobox-block-size);
+  padding-inline: calc(var(--oods-combobox-padding-inline) - var(--sys-control-gap-compact));
+  border-radius: var(--sys-radius-control);
+  font-size: var(--oods-combobox-font-size);
+  line-height: var(--oods-combobox-line-height);
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  user-select: none;
+}
+
+.oods-combobox__option[hidden] { display: none; }
+
+.oods-combobox__option-label {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+/* The active option is on the hover fill. */
+.oods-combobox__option[data-active='true'] { background: var(--sys-surface-interactive-secondary-default); }
+
+.oods-combobox__option[aria-disabled='true'] {
+  color: var(--sys-text-disabled);
+  cursor: not-allowed;
+}
+
+/* The chosen option shows the shared check mark in its text colour; the others keep its room, so no label moves. */
+.oods-combobox__check {
+  display: flex;
+  flex: none;
+  visibility: hidden;
+}
+
+.oods-combobox__check > svg {
+  display: block;
+  inline-size: var(--sys-control-icon-size);
+  block-size: var(--sys-control-icon-size);
+}
+
+.oods-combobox__option[aria-selected='true'] > .oods-combobox__check { visibility: visible; }
+
+/* No matches is muted text in an option's place; it is not an option, and it takes no room while it is empty. */
+.oods-combobox__empty {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--oods-combobox-block-size);
+  margin: 0;
+  padding-inline: calc(var(--oods-combobox-padding-inline) - var(--sys-control-gap-compact));
+  color: var(--sys-text-muted);
+  font-size: var(--oods-combobox-font-size);
+  line-height: var(--oods-combobox-line-height);
+}
+
+.oods-combobox__empty:empty { display: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oods-combobox__chevron > svg { transition: none; }
+}
+
+/* In high contrast the popup is Canvas with a CanvasText ring and no drop, the active option is Highlight on
+ * HighlightText, and a disabled option is GrayText. */
+[data-theme='hc'] .oods-combobox__popup:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  border-color: CanvasText;
+  background: Canvas;
+  color: CanvasText;
+  box-shadow: none;
+}
+
+[data-theme='hc'] .oods-combobox__option[data-active='true']:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  forced-color-adjust: none;
+  background: Highlight;
+  color: HighlightText;
+}
+
+[data-theme='hc'] .oods-combobox__option[aria-disabled='true']:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  color: GrayText;
+}
+
+@media (forced-colors: active) {
+  .oods-combobox__popup { border-color: CanvasText; }
+  .oods-combobox__option[data-active='true'] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+  .oods-combobox__option[aria-disabled='true'] { color: GrayText; }
+}

package/dist/components-segmented-control.css

@@ -0,0 +1,130 @@
+/* s223-m02 (#2527 ruling 10): SegmentedControl, one choice from two to five options shown as joined segments. React, Vue
+ * and the HTML renderer write one markup: a radiogroup track of segments, each a label holding its native radio and its
+ * text. components.css imports this sheet ahead of its own rules and the HTML renderer inlines it in the same place.
+ *
+ * The track is the subtle fill at the control height of each size (xs 24, sm 28, md 32, lg 40: the button, input and
+ * select heights, #2502 ruling 9), inset 2px around its segments. The checked segment is the raised surface with a
+ * hairline ring and its label in the primary text colour; the others are muted. Every label is the control weight (500),
+ * so no segment's width moves with the selection. Each radio is transparent over its whole segment: it takes the clicks,
+ * and the shared focus rule in components.css draws its ring there, so nothing here paints focus. */
+:where(.oods-segmented-control, [data-oods-component='SegmentedControl']) {
+  --oods-segmented-control-block-size: var(--sys-control-height-md);
+  --oods-segmented-control-padding-inline: var(--sys-control-padding-inline);
+  --oods-segmented-control-font-size: var(--sys-text-scale-label-font-size);
+  --oods-segmented-control-line-height: var(--sys-text-scale-label-line-height);
+}
+
+/* The button's type and side padding at each size: caption 12/16 and 8px at xs, label 14/20 and 10px at sm, 12px at
+ * md, body-md 16/24 and 16px at lg. */
+:where(.oods-segmented-control, [data-oods-component='SegmentedControl'])[data-size='xs'] {
+  --oods-segmented-control-block-size: var(--sys-control-height-xs);
+  --oods-segmented-control-padding-inline: var(--sys-control-padding-inline-xs);
+  --oods-segmented-control-font-size: var(--sys-text-scale-caption-font-size);
+  --oods-segmented-control-line-height: var(--sys-text-scale-caption-line-height);
+}
+
+:where(.oods-segmented-control, [data-oods-component='SegmentedControl'])[data-size='sm'] {
+  --oods-segmented-control-block-size: var(--sys-control-height-sm);
+  --oods-segmented-control-padding-inline: var(--sys-control-padding-inline-sm);
+}
+
+:where(.oods-segmented-control, [data-oods-component='SegmentedControl'])[data-size='lg'] {
+  --oods-segmented-control-block-size: var(--sys-control-height-lg);
+  --oods-segmented-control-padding-inline: var(--sys-control-padding-inline-lg);
+  --oods-segmented-control-font-size: var(--sys-text-scale-body-md-font-size);
+  --oods-segmented-control-line-height: var(--sys-text-scale-body-md-line-height);
+}
+
+/* Equal segments, each as wide as the widest label, while the field has room for that. In a narrower field every segment
+ * keeps its whole label and only the shorter ones give up width; a label is never cut. A field too narrow for the labels
+ * themselves (five options at lg need about 380px) is outgrown, so on a phone use md or smaller for five. */
+.oods-segmented-control__track {
+  display: inline-grid;
+  grid-auto-columns: minmax(max-content, 1fr);
+  grid-auto-flow: column;
+  justify-self: start;
+  box-sizing: border-box;
+  block-size: var(--oods-segmented-control-block-size);
+  padding: var(--ref-space-ramp-050);
+  border-radius: var(--sys-radius-control);
+  background: var(--sys-surface-interactive-secondary-default);
+}
+
+.oods-segmented-control__option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-inline: var(--oods-segmented-control-padding-inline);
+  border: 1px solid transparent;
+  border-radius: var(--sys-radius-control-sm);
+  color: var(--sys-text-muted);
+  font-size: var(--oods-segmented-control-font-size);
+  font-weight: var(--sys-text-scale-label-font-weight);
+  line-height: var(--oods-segmented-control-line-height);
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+/* The radio fills its segment and paints nothing of its own, so its focus ring is drawn on the segment. The selector
+ * outranks the rule in components.css that sizes every radio in a component at 16px. */
+.oods-segmented-control__option > input.oods-segmented-control__input[type='radio'] {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  appearance: none;
+  cursor: inherit;
+}
+
+/* A hovered unchecked segment reads in the primary text colour; the :where() keeps it below the high-contrast rules. */
+.oods-segmented-control__option:where(:hover:not(:has(> :checked, > :disabled))) { color: var(--sys-text-primary); }
+
+.oods-segmented-control__option:has(> .oods-segmented-control__input:checked) {
+  border-color: var(--sys-border-subtle);
+  background: var(--sys-surface-raised);
+  color: var(--sys-text-primary);
+}
+
+.oods-segmented-control__option:has(> .oods-segmented-control__input:disabled) {
+  color: var(--sys-text-disabled);
+  cursor: not-allowed;
+}
+
+/* s223-m02 (#2527 ruling 10, after #2502 ruling 6): in high contrast the checked segment is Highlight with HighlightText,
+ * and every other segment is Canvas and CanvasText with a 1px CanvasText border. A disabled segment is GrayText, and a
+ * disabled checked one GrayText with Canvas text, so the choice still shows. */
+[data-theme='hc'] .oods-segmented-control__option:not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  forced-color-adjust: none;
+  border-color: CanvasText;
+  background: Canvas;
+  color: CanvasText;
+}
+
+[data-theme='hc'] .oods-segmented-control__option:has(> .oods-segmented-control__input:checked):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  border-color: Highlight;
+  background: Highlight;
+  color: HighlightText;
+}
+
+[data-theme='hc'] .oods-segmented-control__option:has(> .oods-segmented-control__input:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  border-color: GrayText;
+  color: GrayText;
+}
+
+[data-theme='hc'] .oods-segmented-control__option:has(> .oods-segmented-control__input:checked:disabled):not(:where([data-theme='hc'] [data-theme]:not([data-theme='hc']) *)) {
+  background: GrayText;
+  color: Canvas;
+}
+
+@media (forced-colors: active) {
+  .oods-segmented-control__option { forced-color-adjust: none; border-color: CanvasText; background: Canvas; color: CanvasText; }
+  .oods-segmented-control__option:has(> .oods-segmented-control__input:checked) { border-color: Highlight; background: Highlight; color: HighlightText; }
+  .oods-segmented-control__option:has(> .oods-segmented-control__input:disabled) { border-color: GrayText; color: GrayText; }
+  .oods-segmented-control__option:has(> .oods-segmented-control__input:checked:disabled) { background: GrayText; color: Canvas; }
+}

package/dist/components.css

@@ -1,6 +1,8 @@
 @import "@oods/tokens/css";
 @import "./statusables.css";
 @import "./components-overlay.css";
+@import "./components-combobox.css";
+@import "./components-segmented-control.css";
 
 /* Legacy unprefixed geometry used by billing recipes. Values come from the
  * semantic layer; preserve these names until their authored callers migrate. */

package/dist/index.cjs

@@ -117,7 +117,11 @@ var COMPONENT_STYLE_IDS = [
   "VizSizeSummary",
   // s222-m02 (#2502 ruling 11): styled in components-overlay.css, which components.css imports.
   "Dialog",
-  "Switch"
+  "Switch",
+  // s223-m02 (#2527 ruling 11): styled in components-combobox.css, which components.css imports.
+  "Combobox",
+  // s223-m02 (#2527 ruling 10): styled in components-segmented-control.css, which components.css imports.
+  "SegmentedControl"
 ];
 var SUPPORTED_COMPONENT_THEME_CELLS = Object.freeze(brands.brands.flatMap((brand) => ["light", "dark", "hc"].map((theme) => Object.freeze({ brand, theme }))));
 var COMPONENT_DATA_ATTRIBUTE = "data-oods-component";

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 declare const COMPONENT_STYLE_VERSION: "1.0.0";
-declare const COMPONENT_STYLE_IDS: readonly ["AddressCollectionPanel", "AddressEditor", "AddressSummaryBadge", "AddressValidationTimeline", "ArchivePill", "ArchiveSummary", "AuditEvent", "AuditTimeline", "Badge", "Banner", "ArchivedRowOverlay", "BillingSummaryBadge", "BillingAmountInput", "BillingIntervalSelector", "BillingCardMeta", "AuditSummaryCard", "SortIndicator", "TimelineEntryLabel", "CycleProgressCard", "PaymentTimeline", "PaymentEventTimeline", "Button", "CancellationBadge", "CancellationForm", "CancellationSummary", "Card", "CardHeader", "Checkbox", "ClassificationBadge", "ClassificationEditor", "ClassificationPanel", "ColorSwatch", "ColorizedBadge", "DatePicker", "DetailHeader", "FilterPanel", "FormLabelGroup", "Grid", "InlineLabel", "Input", "LabelCell", "MembershipAuditTimeline", "MembershipPanel", "MessageEventTimeline", "MessageStatusBadge", "OwnerBadge", "OwnershipMeta", "OwnershipSummary", "PaginationBar", "PreferenceEditor", "PreferencePanel", "PreferenceSummaryBadge", "PreferenceTimeline", "PriceBadge", "PriceCardMeta", "PriceSummary", "RelativeTimestamp", "RoleAssignmentForm", "RoleBadgeList", "SearchInput", "Select", "Stack", "StatusBadge", "StatusSelector", "StatusTimeline", "Table", "Tabs", "TagInput", "TagManager", "TagPills", "TagSummary", "TemplatePicker", "Text", "Textarea", "VizAreaPreview", "ArchiveEvent", "CancellationEvent", "ColorStatePicker", "CommunicationDetailPanel", "GeoFieldMappingForm", "GeoResolutionBadge", "GeocodablePreview", "StateTransitionEvent", "StatusColorLegend", "VizAreaControls", "VizAxisControls", "VizAxisSummary", "VizColorControls", "VizColorLegendConfig", "VizEncodingBadge", "VizGraphPreview", "VizHeatmapControls", "VizHeatmapPreview", "VizLineControls", "VizLinePreview", "VizMarkControls", "VizMarkPreview", "VizOpacityControls", "VizOpacitySummary", "VizPointControls", "VizPointPreview", "VizRoleBadge", "VizScaleControls", "VizScaleSummary", "VizScatterControls", "VizScatterPreview", "VizShapeControls", "VizShapeLegend", "VizSizeControls", "VizSizeSummary", "Dialog", "Switch"];
+declare const COMPONENT_STYLE_IDS: readonly ["AddressCollectionPanel", "AddressEditor", "AddressSummaryBadge", "AddressValidationTimeline", "ArchivePill", "ArchiveSummary", "AuditEvent", "AuditTimeline", "Badge", "Banner", "ArchivedRowOverlay", "BillingSummaryBadge", "BillingAmountInput", "BillingIntervalSelector", "BillingCardMeta", "AuditSummaryCard", "SortIndicator", "TimelineEntryLabel", "CycleProgressCard", "PaymentTimeline", "PaymentEventTimeline", "Button", "CancellationBadge", "CancellationForm", "CancellationSummary", "Card", "CardHeader", "Checkbox", "ClassificationBadge", "ClassificationEditor", "ClassificationPanel", "ColorSwatch", "ColorizedBadge", "DatePicker", "DetailHeader", "FilterPanel", "FormLabelGroup", "Grid", "InlineLabel", "Input", "LabelCell", "MembershipAuditTimeline", "MembershipPanel", "MessageEventTimeline", "MessageStatusBadge", "OwnerBadge", "OwnershipMeta", "OwnershipSummary", "PaginationBar", "PreferenceEditor", "PreferencePanel", "PreferenceSummaryBadge", "PreferenceTimeline", "PriceBadge", "PriceCardMeta", "PriceSummary", "RelativeTimestamp", "RoleAssignmentForm", "RoleBadgeList", "SearchInput", "Select", "Stack", "StatusBadge", "StatusSelector", "StatusTimeline", "Table", "Tabs", "TagInput", "TagManager", "TagPills", "TagSummary", "TemplatePicker", "Text", "Textarea", "VizAreaPreview", "ArchiveEvent", "CancellationEvent", "ColorStatePicker", "CommunicationDetailPanel", "GeoFieldMappingForm", "GeoResolutionBadge", "GeocodablePreview", "StateTransitionEvent", "StatusColorLegend", "VizAreaControls", "VizAxisControls", "VizAxisSummary", "VizColorControls", "VizColorLegendConfig", "VizEncodingBadge", "VizGraphPreview", "VizHeatmapControls", "VizHeatmapPreview", "VizLineControls", "VizLinePreview", "VizMarkControls", "VizMarkPreview", "VizOpacityControls", "VizOpacitySummary", "VizPointControls", "VizPointPreview", "VizRoleBadge", "VizScaleControls", "VizScaleSummary", "VizScatterControls", "VizScatterPreview", "VizShapeControls", "VizShapeLegend", "VizSizeControls", "VizSizeSummary", "Dialog", "Switch", "Combobox", "SegmentedControl"];
 /**
  * Every brand × theme cell the component styles serve. Components read only brand-independent variables, so each
  * brand the token build carries is a cell in each theme (s213-m04: the list comes from the brand registry).

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 declare const COMPONENT_STYLE_VERSION: "1.0.0";
-declare const COMPONENT_STYLE_IDS: readonly ["AddressCollectionPanel", "AddressEditor", "AddressSummaryBadge", "AddressValidationTimeline", "ArchivePill", "ArchiveSummary", "AuditEvent", "AuditTimeline", "Badge", "Banner", "ArchivedRowOverlay", "BillingSummaryBadge", "BillingAmountInput", "BillingIntervalSelector", "BillingCardMeta", "AuditSummaryCard", "SortIndicator", "TimelineEntryLabel", "CycleProgressCard", "PaymentTimeline", "PaymentEventTimeline", "Button", "CancellationBadge", "CancellationForm", "CancellationSummary", "Card", "CardHeader", "Checkbox", "ClassificationBadge", "ClassificationEditor", "ClassificationPanel", "ColorSwatch", "ColorizedBadge", "DatePicker", "DetailHeader", "FilterPanel", "FormLabelGroup", "Grid", "InlineLabel", "Input", "LabelCell", "MembershipAuditTimeline", "MembershipPanel", "MessageEventTimeline", "MessageStatusBadge", "OwnerBadge", "OwnershipMeta", "OwnershipSummary", "PaginationBar", "PreferenceEditor", "PreferencePanel", "PreferenceSummaryBadge", "PreferenceTimeline", "PriceBadge", "PriceCardMeta", "PriceSummary", "RelativeTimestamp", "RoleAssignmentForm", "RoleBadgeList", "SearchInput", "Select", "Stack", "StatusBadge", "StatusSelector", "StatusTimeline", "Table", "Tabs", "TagInput", "TagManager", "TagPills", "TagSummary", "TemplatePicker", "Text", "Textarea", "VizAreaPreview", "ArchiveEvent", "CancellationEvent", "ColorStatePicker", "CommunicationDetailPanel", "GeoFieldMappingForm", "GeoResolutionBadge", "GeocodablePreview", "StateTransitionEvent", "StatusColorLegend", "VizAreaControls", "VizAxisControls", "VizAxisSummary", "VizColorControls", "VizColorLegendConfig", "VizEncodingBadge", "VizGraphPreview", "VizHeatmapControls", "VizHeatmapPreview", "VizLineControls", "VizLinePreview", "VizMarkControls", "VizMarkPreview", "VizOpacityControls", "VizOpacitySummary", "VizPointControls", "VizPointPreview", "VizRoleBadge", "VizScaleControls", "VizScaleSummary", "VizScatterControls", "VizScatterPreview", "VizShapeControls", "VizShapeLegend", "VizSizeControls", "VizSizeSummary", "Dialog", "Switch"];
+declare const COMPONENT_STYLE_IDS: readonly ["AddressCollectionPanel", "AddressEditor", "AddressSummaryBadge", "AddressValidationTimeline", "ArchivePill", "ArchiveSummary", "AuditEvent", "AuditTimeline", "Badge", "Banner", "ArchivedRowOverlay", "BillingSummaryBadge", "BillingAmountInput", "BillingIntervalSelector", "BillingCardMeta", "AuditSummaryCard", "SortIndicator", "TimelineEntryLabel", "CycleProgressCard", "PaymentTimeline", "PaymentEventTimeline", "Button", "CancellationBadge", "CancellationForm", "CancellationSummary", "Card", "CardHeader", "Checkbox", "ClassificationBadge", "ClassificationEditor", "ClassificationPanel", "ColorSwatch", "ColorizedBadge", "DatePicker", "DetailHeader", "FilterPanel", "FormLabelGroup", "Grid", "InlineLabel", "Input", "LabelCell", "MembershipAuditTimeline", "MembershipPanel", "MessageEventTimeline", "MessageStatusBadge", "OwnerBadge", "OwnershipMeta", "OwnershipSummary", "PaginationBar", "PreferenceEditor", "PreferencePanel", "PreferenceSummaryBadge", "PreferenceTimeline", "PriceBadge", "PriceCardMeta", "PriceSummary", "RelativeTimestamp", "RoleAssignmentForm", "RoleBadgeList", "SearchInput", "Select", "Stack", "StatusBadge", "StatusSelector", "StatusTimeline", "Table", "Tabs", "TagInput", "TagManager", "TagPills", "TagSummary", "TemplatePicker", "Text", "Textarea", "VizAreaPreview", "ArchiveEvent", "CancellationEvent", "ColorStatePicker", "CommunicationDetailPanel", "GeoFieldMappingForm", "GeoResolutionBadge", "GeocodablePreview", "StateTransitionEvent", "StatusColorLegend", "VizAreaControls", "VizAxisControls", "VizAxisSummary", "VizColorControls", "VizColorLegendConfig", "VizEncodingBadge", "VizGraphPreview", "VizHeatmapControls", "VizHeatmapPreview", "VizLineControls", "VizLinePreview", "VizMarkControls", "VizMarkPreview", "VizOpacityControls", "VizOpacitySummary", "VizPointControls", "VizPointPreview", "VizRoleBadge", "VizScaleControls", "VizScaleSummary", "VizScatterControls", "VizScatterPreview", "VizShapeControls", "VizShapeLegend", "VizSizeControls", "VizSizeSummary", "Dialog", "Switch", "Combobox", "SegmentedControl"];
 /**
  * Every brand × theme cell the component styles serve. Components read only brand-independent variables, so each
  * brand the token build carries is a cell in each theme (s213-m04: the list comes from the brand registry).

package/dist/index.js

@@ -1 +1 @@
-export { COMPONENT_DATA_ATTRIBUTE, COMPONENT_STYLE_IDS, COMPONENT_STYLE_VERSION, SUPPORTED_COMPONENT_THEME_CELLS } from './chunk-T5I3FGSQ.js';
+export { COMPONENT_DATA_ATTRIBUTE, COMPONENT_STYLE_IDS, COMPONENT_STYLE_VERSION, SUPPORTED_COMPONENT_THEME_CELLS } from './chunk-PGAP2D2D.js';

package/dist/ported.cjs

@@ -117,7 +117,11 @@ var COMPONENT_STYLE_IDS = [
   "VizSizeSummary",
   // s222-m02 (#2502 ruling 11): styled in components-overlay.css, which components.css imports.
   "Dialog",
-  "Switch"
+  "Switch",
+  // s223-m02 (#2527 ruling 11): styled in components-combobox.css, which components.css imports.
+  "Combobox",
+  // s223-m02 (#2527 ruling 10): styled in components-segmented-control.css, which components.css imports.
+  "SegmentedControl"
 ];
 Object.freeze(brands.brands.flatMap((brand) => ["light", "dark", "hc"].map((theme) => Object.freeze({ brand, theme }))));
 

package/dist/ported.js

@@ -1,4 +1,4 @@
-import { COMPONENT_STYLE_IDS, COMPONENT_STYLE_VERSION } from './chunk-T5I3FGSQ.js';
+import { COMPONENT_STYLE_IDS, COMPONENT_STYLE_VERSION } from './chunk-PGAP2D2D.js';
 
 // src/ported.ts
 var PORTED_COMPONENT_STYLE_VERSION = COMPONENT_STYLE_VERSION;

package/package.json

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