@vectoriox/iox-ui 5.40.0 → 5.41.0

package/design-core/index.d.ts

@@ -853,6 +853,66 @@ declare const SPEC_TIERS: {
         readonly name: "tab-mark-width";
         readonly type: "size";
         readonly default: "0px 0px 2px 0px";
+    }, {
+        readonly name: "segmented-track-bg";
+        readonly type: "color";
+        readonly default: "var(--iox-surface-2)";
+    }, {
+        readonly name: "segmented-track-border";
+        readonly type: "color";
+        readonly default: "var(--iox-line)";
+    }, {
+        readonly name: "segmented-track-border-width";
+        readonly type: "size";
+        readonly default: "var(--iox-border-width)";
+    }, {
+        readonly name: "segmented-track-backdrop";
+        readonly type: "effect";
+        readonly default: "none";
+    }, {
+        readonly name: "segmented-pad";
+        readonly type: "spacing";
+        readonly default: "4px";
+    }, {
+        readonly name: "segmented-gap";
+        readonly type: "spacing";
+        readonly default: "4px";
+    }, {
+        readonly name: "segmented-radius";
+        readonly type: "radius";
+        readonly default: "calc(var(--iox-button-radius) + var(--iox-segmented-pad))";
+    }, {
+        readonly name: "segmented-option-ink";
+        readonly type: "color";
+        readonly default: "var(--iox-text-muted)";
+    }, {
+        readonly name: "segmented-option-hover-ink";
+        readonly type: "color";
+        readonly default: "var(--iox-text)";
+    }, {
+        readonly name: "segmented-option-pad";
+        readonly type: "spacing";
+        readonly default: "10px 20px";
+    }, {
+        readonly name: "segmented-option-radius";
+        readonly type: "radius";
+        readonly default: "var(--iox-button-radius)";
+    }, {
+        readonly name: "segmented-option-min-height";
+        readonly type: "size";
+        readonly default: "44px";
+    }, {
+        readonly name: "segmented-on-bg";
+        readonly type: "color";
+        readonly default: "var(--iox-accent-text)";
+    }, {
+        readonly name: "segmented-on-ink";
+        readonly type: "color";
+        readonly default: "var(--iox-bg)";
+    }, {
+        readonly name: "segmented-on-shadow";
+        readonly type: "shadow";
+        readonly default: "var(--iox-shadow-sm)";
     }, {
         readonly name: "heading-color";
         readonly type: "color";
@@ -1683,6 +1743,66 @@ declare const SPEC_ELEMENT_STYLES: readonly [{
     readonly focus: {
         readonly boxShadow: "var(--iox-focus-ring)";
     };
+}, {
+    readonly id: "segmented";
+    readonly label: "Segmented control";
+    readonly group: "Layout";
+    readonly appliesTo: readonly ["Container"];
+    readonly base: {
+        readonly color: "inherit";
+        readonly backgroundColor: "var(--iox-segmented-track-bg)";
+        readonly borderStyle: "solid";
+        readonly borderWidth: "var(--iox-segmented-track-border-width)";
+        readonly borderColor: "var(--iox-segmented-track-border)";
+        readonly borderRadius: "var(--iox-segmented-radius)";
+        readonly padding: "var(--iox-segmented-pad)";
+        readonly backdropFilter: "var(--iox-segmented-track-backdrop)";
+    };
+}, {
+    readonly id: "segmented-option";
+    readonly label: "Segmented option";
+    readonly group: "Buttons";
+    readonly appliesTo: readonly ["ButtonBlock"];
+    readonly base: {
+        readonly color: "var(--iox-segmented-option-ink)";
+        readonly backgroundColor: "transparent";
+        readonly padding: "var(--iox-segmented-option-pad)";
+        readonly borderRadius: "var(--iox-segmented-option-radius)";
+        readonly minHeight: "var(--iox-segmented-option-min-height)";
+        readonly fontFamily: "var(--iox-button-font)";
+        readonly fontSize: "var(--iox-button-size)";
+        readonly fontWeight: "var(--iox-button-weight)";
+        readonly lineHeight: "var(--iox-button-leading)";
+        readonly letterSpacing: "var(--iox-button-tracking)";
+        readonly textTransform: "var(--iox-button-case)";
+        readonly transitionDuration: "var(--iox-dur-fast)";
+        readonly transitionTimingFunction: "var(--iox-ease-standard)";
+    };
+    readonly hover: {
+        readonly color: "var(--iox-segmented-option-hover-ink)";
+    };
+    readonly on: {
+        readonly backgroundColor: "var(--iox-segmented-on-bg)";
+        readonly color: "var(--iox-segmented-on-ink)";
+        readonly boxShadow: "var(--iox-segmented-on-shadow)";
+    };
+    readonly focus: {
+        readonly boxShadow: "var(--iox-focus-ring)";
+    };
+}, {
+    readonly id: "price";
+    readonly label: "Price";
+    readonly group: "Text";
+    readonly appliesTo: readonly ["Text"];
+    readonly base: {
+        readonly fontFamily: "var(--iox-font-display)";
+        readonly fontSize: "var(--iox-size-h2)";
+        readonly fontWeight: "var(--iox-weight-heading)";
+        readonly lineHeight: "var(--iox-leading-heading)";
+        readonly letterSpacing: "var(--iox-tracking-display)";
+        readonly color: "var(--iox-heading-color)";
+        readonly fontVariantNumeric: "tabular-nums";
+    };
 }, {
     readonly id: "media";
     readonly label: "Image";
@@ -3610,6 +3730,96 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "0px 0px 2px 0px";
+    }, {
+        readonly name: "segmented-track-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-2)";
+    }, {
+        readonly name: "segmented-track-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
+    }, {
+        readonly name: "segmented-track-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width)";
+    }, {
+        readonly name: "segmented-track-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "none";
+    }, {
+        readonly name: "segmented-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "4px";
+    }, {
+        readonly name: "segmented-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "4px";
+    }, {
+        readonly name: "segmented-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "calc(var(--iox-button-radius) + var(--iox-segmented-pad))";
+    }, {
+        readonly name: "segmented-option-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "segmented-option-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "segmented-option-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "10px 20px";
+    }, {
+        readonly name: "segmented-option-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-button-radius)";
+    }, {
+        readonly name: "segmented-option-min-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "44px";
+    }, {
+        readonly name: "segmented-on-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "segmented-on-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-bg)";
+    }, {
+        readonly name: "segmented-on-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "var(--iox-shadow-sm)";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -5052,6 +5262,101 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "0px 0px 2px 0px";
+    }, {
+        readonly name: "segmented-track-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-section-bg)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-track-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line-strong)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-track-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width)";
+    }, {
+        readonly name: "segmented-track-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "none";
+    }, {
+        readonly name: "segmented-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "4px";
+    }, {
+        readonly name: "segmented-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "4px";
+    }, {
+        readonly name: "segmented-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-button-radius)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-option-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "segmented-option-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "segmented-option-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "10px 20px";
+    }, {
+        readonly name: "segmented-option-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-button-radius)";
+    }, {
+        readonly name: "segmented-option-min-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "44px";
+    }, {
+        readonly name: "segmented-on-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-on-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-bg)";
+    }, {
+        readonly name: "segmented-on-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "none";
+        readonly overridden: true;
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -6487,45 +6792,136 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly group: "components";
         readonly value: "0px 0px 2px 0px";
     }, {
-        readonly name: "heading-color";
+        readonly name: "segmented-track-bg";
         readonly tier: "component";
         readonly type: "color";
         readonly group: "components";
-        readonly value: "var(--iox-text)";
+        readonly value: "var(--iox-surface)";
+        readonly overridden: true;
     }, {
-        readonly name: "eyebrow-color";
+        readonly name: "segmented-track-border";
         readonly tier: "component";
         readonly type: "color";
         readonly group: "components";
-        readonly value: "var(--iox-accent-text)";
+        readonly value: "var(--iox-line)";
     }, {
-        readonly name: "icon-color";
+        readonly name: "segmented-track-border-width";
         readonly tier: "component";
-        readonly type: "color";
+        readonly type: "size";
         readonly group: "components";
-        readonly value: "var(--iox-accent-text)";
+        readonly value: "var(--iox-border-width)";
     }, {
-        readonly name: "divider-color";
+        readonly name: "segmented-track-backdrop";
         readonly tier: "component";
-        readonly type: "color";
+        readonly type: "effect";
         readonly group: "components";
-        readonly value: "var(--iox-line)";
+        readonly value: "none";
     }, {
-        readonly name: "badge-radius";
+        readonly name: "segmented-pad";
         readonly tier: "component";
-        readonly type: "radius";
+        readonly type: "spacing";
         readonly group: "components";
-        readonly value: "var(--iox-radius-pill)";
+        readonly value: "4px";
     }, {
-        readonly name: "badge-pad";
+        readonly name: "segmented-gap";
         readonly tier: "component";
         readonly type: "spacing";
         readonly group: "components";
-        readonly value: "3px 10px";
+        readonly value: "4px";
     }, {
-        readonly name: "badge-size";
+        readonly name: "segmented-radius";
         readonly tier: "component";
-        readonly type: "size";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "calc(var(--iox-button-radius) + var(--iox-segmented-pad))";
+    }, {
+        readonly name: "segmented-option-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "segmented-option-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "segmented-option-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "10px 20px";
+    }, {
+        readonly name: "segmented-option-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-button-radius)";
+    }, {
+        readonly name: "segmented-option-min-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "44px";
+    }, {
+        readonly name: "segmented-on-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "segmented-on-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-bg)";
+    }, {
+        readonly name: "segmented-on-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "var(--iox-shadow-sm)";
+    }, {
+        readonly name: "heading-color";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "eyebrow-color";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "icon-color";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "divider-color";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
+    }, {
+        readonly name: "badge-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-radius-pill)";
+    }, {
+        readonly name: "badge-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "3px 10px";
+    }, {
+        readonly name: "badge-size";
+        readonly tier: "component";
+        readonly type: "size";
         readonly group: "components";
         readonly value: "var(--iox-size-label)";
     }, {
@@ -7962,6 +8358,99 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "0px 0px 2px 0px";
+    }, {
+        readonly name: "segmented-track-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-glass)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-track-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-glass-border)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-track-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width)";
+    }, {
+        readonly name: "segmented-track-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "var(--iox-blur-surface)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "4px";
+    }, {
+        readonly name: "segmented-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "4px";
+    }, {
+        readonly name: "segmented-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "calc(var(--iox-button-radius) + var(--iox-segmented-pad))";
+    }, {
+        readonly name: "segmented-option-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "segmented-option-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "segmented-option-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "10px 20px";
+    }, {
+        readonly name: "segmented-option-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-button-radius)";
+    }, {
+        readonly name: "segmented-option-min-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "44px";
+    }, {
+        readonly name: "segmented-on-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "segmented-on-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-bg)";
+    }, {
+        readonly name: "segmented-on-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "var(--iox-shadow-sm)";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -9402,6 +9891,99 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "0px 0px 2px 0px";
+    }, {
+        readonly name: "segmented-track-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-section-bg)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-track-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line-strong)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-track-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width)";
+    }, {
+        readonly name: "segmented-track-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "none";
+    }, {
+        readonly name: "segmented-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "4px";
+    }, {
+        readonly name: "segmented-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "4px";
+    }, {
+        readonly name: "segmented-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "calc(var(--iox-button-radius) + var(--iox-segmented-pad))";
+    }, {
+        readonly name: "segmented-option-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "segmented-option-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "segmented-option-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "10px 20px";
+    }, {
+        readonly name: "segmented-option-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-button-radius)";
+    }, {
+        readonly name: "segmented-option-min-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "44px";
+    }, {
+        readonly name: "segmented-on-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "segmented-on-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-bg)";
+    }, {
+        readonly name: "segmented-on-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "none";
+        readonly overridden: true;
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -10852,6 +11434,101 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "0px 0px 2px 0px";
+    }, {
+        readonly name: "segmented-track-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-track-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line-strong)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-track-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width)";
+    }, {
+        readonly name: "segmented-track-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "none";
+    }, {
+        readonly name: "segmented-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "4px";
+    }, {
+        readonly name: "segmented-gap";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "4px";
+    }, {
+        readonly name: "segmented-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "calc(var(--iox-button-radius) + var(--iox-segmented-pad))";
+    }, {
+        readonly name: "segmented-option-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "segmented-option-hover-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "segmented-option-pad";
+        readonly tier: "component";
+        readonly type: "spacing";
+        readonly group: "components";
+        readonly value: "10px 20px";
+    }, {
+        readonly name: "segmented-option-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-button-radius)";
+    }, {
+        readonly name: "segmented-option-min-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "44px";
+    }, {
+        readonly name: "segmented-on-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-on-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface)";
+        readonly overridden: true;
+    }, {
+        readonly name: "segmented-on-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "none";
+        readonly overridden: true;
     }, {
         readonly name: "heading-color";
         readonly tier: "component";