@moldable-ai/ui 0.2.29 → 0.2.31

package/src/tokens/macos-26/aliases.css

@@ -0,0 +1,53 @@
+/*
+ * Stable component adapter for the macOS 26 floating sidebar.
+ *
+ * This selector is intentionally independent from the base platform/version
+ * selector so Moldable can use a macOS 27 base pack with macOS 26 sidebar
+ * anatomy.
+ */
+[data-ui-platform='macos'][data-ui-platform-version='26'],
+[data-ui-sidebar-style='floating'] {
+  --m-ui-sidebar-width: var(--m26-source-sidebar-width-reference);
+  --m-ui-sidebar-window-inset: var(--m26-source-sidebar-window-inset);
+  --m-ui-sidebar-shell-radius: var(--m26-source-sidebar-radius-shell);
+  --m-ui-sidebar-item-radius: var(--m26-source-sidebar-radius-item);
+  --m-ui-sidebar-selection-radius: var(--m26-source-sidebar-radius-selection);
+  --m-ui-sidebar-corner-smoothing: var(--m26-source-sidebar-corner-smoothing);
+  --m-ui-sidebar-border-width: var(--m26-source-sidebar-border-width);
+  --m-ui-sidebar-divider-width: 0px;
+  --m-ui-sidebar-divider-color: transparent;
+  --m-ui-sidebar-shadow: var(--m26-source-sidebar-shadow);
+  --m-ui-sidebar-glass-effect-radius: var(
+    --m26-source-sidebar-glass-effect-radius
+  );
+  --m-ui-sidebar-padding-block: var(--m26-source-sidebar-padding-block);
+  --m-ui-sidebar-row-inset-inline: var(--m26-source-sidebar-row-inset-inline);
+  --m-ui-sidebar-row-height-small: var(--m26-source-sidebar-row-height-small);
+  --m-ui-sidebar-row-height-medium: var(--m26-source-sidebar-row-height-medium);
+  --m-ui-sidebar-row-height-large: var(--m26-source-sidebar-row-height-large);
+  --m-ui-sidebar-section-height-small: var(
+    --m26-source-sidebar-section-height-small
+  );
+  --m-ui-sidebar-section-height-medium: var(
+    --m26-source-sidebar-section-height-medium
+  );
+  --m-ui-sidebar-section-height-large: var(
+    --m26-source-sidebar-section-height-large
+  );
+  --m-ui-sidebar-selection-fill: var(--m26-source-sidebar-selection-light);
+  --m-ui-sidebar-material-fill: var(--m-ui-material-medium-fill);
+}
+
+/*
+ * @m26-divergence M26-WEB-COLOR-001
+ * The extracted light selection uses Multiply. Browser compositing the whole
+ * row with mix-blend-mode also blends its text and icons, so dark appearance
+ * uses a semantic alpha fill derived from the resolved platform text color.
+ */
+[data-ui-sidebar-style='floating'][data-ui-appearance='dark'] {
+  --m-ui-sidebar-selection-fill: color-mix(
+    in srgb,
+    var(--m-ui-color-text-primary) 10%,
+    transparent
+  );
+}

package/src/tokens/macos-26/compatibility.css

@@ -0,0 +1,7 @@
+[data-ui-platform='macos'][data-ui-platform-version='26'],
+[data-ui-sidebar-style='floating'] {
+  --sidebar: var(--m-ui-sidebar-material-fill);
+  --sidebar-accent: var(--m-ui-sidebar-selection-fill);
+  --density-row-height: var(--m-ui-sidebar-row-height-medium);
+  --material-shadow-sidebar: var(--m-ui-sidebar-shadow);
+}

package/src/tokens/macos-26/index.css

@@ -0,0 +1,3 @@
+@import './source/sidebar.generated.css';
+@import './aliases.css';
+@import './compatibility.css';

package/src/tokens/macos-26/source/provenance.generated.json

@@ -0,0 +1,28 @@
+{
+  "source": "macOS 26",
+  "schemaVersion": 1,
+  "scope": {
+    "platform": "macos",
+    "platformVersion": "26",
+    "publicTheme": false,
+    "immutableSourcePack": true
+  },
+  "coverage": ["floating-sidebar"],
+  "inventory": {
+    "variables": {
+      "total": 19,
+      "byType": {
+        "COLOR": 1,
+        "DIMENSION": 15,
+        "EFFECT": 1,
+        "PERCENT": 1,
+        "STRING": 1
+      }
+    }
+  },
+  "notes": [
+    "This initial source module covers the macOS 26 floating sidebar only.",
+    "It can be selected independently from the application's base platform pack.",
+    "No source artwork, symbols, vectors, image assets, or font files are included."
+  ]
+}

package/src/tokens/macos-26/source/sidebar.generated.css

@@ -0,0 +1,29 @@
+/*
+ * Generated from the macOS 26 sidebar source specification.
+ * Values only. No source artwork, symbols, vectors, or image assets.
+ *
+ * The second selector exposes this immutable source to applications that
+ * deliberately compose the macOS 26 sidebar with another base platform pack.
+ */
+[data-ui-platform='macos'][data-ui-platform-version='26'],
+[data-ui-sidebar-style='floating'] {
+  --m26-source-sidebar-width-reference: 240px;
+  --m26-source-sidebar-window-inset: 8px;
+  --m26-source-sidebar-radius-shell: 18px;
+  --m26-source-sidebar-radius-item: 5px;
+  --m26-source-sidebar-radius-selection: 8px;
+  --m26-source-sidebar-corner-smoothing: 60%;
+  --m26-source-sidebar-shadow: 0 8px 40px rgb(0 0 0 / 12%);
+  --m26-source-sidebar-glass-effect-radius: 12px;
+  --m26-source-sidebar-border-width: 0px;
+  --m26-source-sidebar-padding-block: 10px;
+  --m26-source-sidebar-row-inset-inline: 10px;
+  --m26-source-sidebar-row-height-small: 24px;
+  --m26-source-sidebar-row-height-medium: 32px;
+  --m26-source-sidebar-row-height-large: 40px;
+  --m26-source-sidebar-section-height-small: 34px;
+  --m26-source-sidebar-section-height-medium: 39px;
+  --m26-source-sidebar-section-height-large: 43px;
+  --m26-source-sidebar-selection-light: rgb(0 0 0 / 11%);
+  --m26-source-sidebar-selection-blend-mode: multiply;
+}

package/src/tokens/macos-26/source.css

@@ -0,0 +1,7 @@
+/*
+ * Immutable macOS 26 source specification.
+ *
+ * This initial entry point contains the floating-sidebar source module only.
+ * It intentionally excludes Moldable aliases and web compatibility mappings.
+ */
+@import './source/sidebar.generated.css';

package/src/tokens/macos-26/web-adaptations.json

@@ -0,0 +1,25 @@
+{
+  "source": "macOS 26",
+  "target": "web",
+  "schemaVersion": 1,
+  "idConvention": "M26-WEB-{AREA}-{NNN}",
+  "adaptations": [
+    {
+      "id": "M26-WEB-COLOR-001",
+      "area": "color",
+      "status": "intentional-divergence",
+      "summary": "Use a semantic alpha selection fill in dark appearance.",
+      "reason": "The extracted light selection uses Multiply. Applying mix-blend-mode to a browser row would also blend its text and icons, and a dark source selection value has not yet been added to this partial source module.",
+      "sourceBehavior": "An 11% black selection fill composited with Multiply in light appearance.",
+      "webBehavior": "The source fill remains exact in light appearance; dark appearance derives a 10% alpha fill from the resolved platform text color.",
+      "overrides": [
+        {
+          "appearance": "dark",
+          "token": "--m-ui-sidebar-selection-fill",
+          "sourceValue": "not-present-in-partial-source",
+          "adaptedValue": "color-mix(in srgb, var(--m-ui-color-text-primary) 10%, transparent)"
+        }
+      ]
+    }
+  ]
+}

package/src/tokens/macos-26/web-adaptations.md

@@ -0,0 +1,15 @@
+# macOS 26 web adaptations
+
+The immutable macOS 26 values live in `source/`. Effective browser behavior is
+kept in the adapter layer and identified with stable `M26-WEB-*` IDs.
+
+## M26-WEB-COLOR-001
+
+The currently extracted sidebar selection is the light-appearance value:
+11% black composited with Multiply. Applying `mix-blend-mode` to the entire
+browser row also blends its label and icon, so the light value remains exact
+while dark appearance uses a semantic 10% alpha fill derived from the resolved
+platform text color.
+
+When a dark macOS 26 source selection is added, this adaptation should be
+re-evaluated rather than silently replacing the source.

package/src/tokens/macos-27/accessibility.css

@@ -0,0 +1,11 @@
+@media (prefers-reduced-transparency: reduce) {
+  :root {
+    --m-ui-material-blur: 0px;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --m-ui-color-text-secondary: var(--m-ui-color-text-primary);
+  }
+}

package/src/tokens/macos-27/aliases.css

@@ -0,0 +1,304 @@
+[data-ui-platform='macos'][data-ui-platform-version='27'],
+[data-ui-sidebar-style='edge-to-edge'] {
+  --m-ui-font-family: var(--m27-source-font-family-ui);
+  --m-ui-color-text-primary: var(--m27-source-color-label-primary);
+  --m-ui-color-text-secondary: var(--m27-source-color-label-secondary);
+  --m-ui-color-text-tertiary: var(--m27-source-color-label-tertiary);
+  --m-ui-color-text-quaternary: var(--m27-source-color-label-quaternary);
+  --m-ui-color-text-quinary: var(--m27-source-color-label-quinary);
+  --m-ui-color-fill-primary: var(--m27-source-color-fill-primary);
+  --m-ui-color-fill-secondary: var(--m27-source-color-fill-secondary);
+  --m-ui-color-fill-tertiary: var(--m27-source-color-fill-tertiary);
+  --m-ui-color-fill-quaternary: var(--m27-source-color-fill-quaternary);
+  --m-ui-color-fill-quinary: var(--m27-source-color-fill-quinary);
+  --m-ui-color-accent: var(--m27-source-color-accent-blue);
+  --m-ui-color-destructive: var(--m27-source-color-accent-red);
+  --m-ui-surface-window: var(--m27-source-color-window-background);
+  --m-ui-surface-content: var(--m27-source-color-window-background);
+
+  --m-ui-control-height: var(--m27-source-size-control-height);
+  --m-ui-control-font-size: var(--m27-source-size-global-font-size);
+  --m-ui-control-line-height: 16px;
+  --m-ui-control-padding-inline: var(--m27-source-size-button-padding-inline);
+  --m-ui-control-radius: var(--m27-source-size-control-radius);
+  --m-ui-button-radius: var(--m27-source-size-button-radius);
+  --m-ui-button-font-weight: var(--m27-source-font-weight-medium);
+  --m-ui-button-bordered-fill: var(--m27-source-button-bordered-fill-idle);
+  --m-ui-button-bordered-fill-pressed: var(
+    --m27-source-button-bordered-fill-pressed
+  );
+  --m-ui-button-bordered-fill-disabled: var(
+    --m27-source-button-bordered-fill-disabled
+  );
+  --m-ui-button-bordered-label: var(--m27-source-button-bordered-label-idle);
+  --m-ui-button-bordered-label-disabled: var(
+    --m27-source-button-bordered-label-disabled
+  );
+  --m-ui-button-tinted-fill: var(--m27-source-button-tinted-fill-idle);
+  --m-ui-button-tinted-fill-pressed: var(
+    --m27-source-button-tinted-fill-pressed
+  );
+  --m-ui-button-tinted-fill-disabled: var(
+    --m27-source-button-tinted-fill-disabled
+  );
+  --m-ui-button-tinted-label: var(--m27-source-button-tinted-label);
+  --m-ui-button-tinted-label-disabled: var(
+    --m27-source-button-tinted-label-disabled
+  );
+  --m-ui-button-prominent-fill: var(--m27-source-button-prominent-fill-idle);
+  --m-ui-button-prominent-fill-pressed: var(
+    --m27-source-button-prominent-fill-pressed
+  );
+  --m-ui-button-prominent-fill-disabled: var(
+    --m27-source-button-prominent-fill-disabled
+  );
+  --m-ui-button-prominent-label: var(--m27-source-button-prominent-label-idle);
+  --m-ui-button-prominent-label-disabled: var(
+    --m27-source-button-prominent-label-disabled
+  );
+  --m-ui-button-destructive-fill: var(
+    --m27-source-button-destructive-fill-idle
+  );
+  --m-ui-button-destructive-fill-pressed: var(
+    --m27-source-button-destructive-fill-pressed
+  );
+  --m-ui-button-destructive-fill-disabled: var(
+    --m27-source-button-destructive-fill-disabled
+  );
+  --m-ui-button-destructive-label: var(
+    --m27-source-button-destructive-label-idle
+  );
+  --m-ui-button-destructive-label-disabled: var(
+    --m27-source-button-destructive-label-disabled
+  );
+  --m-ui-button-destructive-tinted-fill: var(
+    --m27-source-button-destructive-tinted-fill-idle
+  );
+  --m-ui-button-destructive-tinted-fill-pressed: var(
+    --m27-source-button-destructive-tinted-fill-pressed
+  );
+  --m-ui-button-destructive-tinted-fill-disabled: var(
+    --m27-source-button-destructive-tinted-fill-disabled
+  );
+  --m-ui-button-destructive-tinted-label: var(
+    --m27-source-button-destructive-tinted-label
+  );
+  --m-ui-button-destructive-tinted-label-disabled: var(
+    --m27-source-button-destructive-tinted-label-disabled
+  );
+  --m-ui-button-borderless-label: var(
+    --m27-source-button-borderless-label-idle
+  );
+  --m-ui-button-borderless-label-pressed: var(
+    --m27-source-button-borderless-label-pressed
+  );
+  --m-ui-button-borderless-label-disabled: var(
+    --m27-source-button-borderless-label-disabled
+  );
+  --m-ui-field-inset-inline: var(--m27-source-size-fields-inset-left);
+  --m-ui-checkbox-size: var(--m27-source-size-checkboxes-width);
+  --m-ui-checkbox-radius: var(--m27-source-size-checkboxes-radius);
+  --m-ui-checkbox-checkmark-width: var(
+    --m27-source-size-checkboxes-width-checkmark
+  );
+  --m-ui-checkbox-checkmark-height: var(
+    --m27-source-size-checkboxes-height-checkmark
+  );
+  --m-ui-radio-size: var(--m27-source-size-radio-button-width);
+  --m-ui-radio-dash-width: var(--m27-source-size-radio-button-width-dash);
+  --m-ui-segment-margin: var(--m27-source-size-segmented-control-margins);
+  --m-ui-switch-track-width: var(--m27-source-size-toggle-track-width);
+  --m-ui-switch-track-height: var(--m27-source-size-toggle-track-height);
+  --m-ui-switch-knob-width: var(--m27-source-size-toggle-knob-width);
+  --m-ui-switch-knob-height: var(--m27-source-size-toggle-knob-height);
+  --m-ui-switch-knob-pressed-width: var(
+    --m27-source-size-toggle-knob-clicked-width
+  );
+  --m-ui-switch-knob-pressed-height: var(
+    --m27-source-size-toggle-knob-clicked-height
+  );
+
+  --m-ui-type-large-title-size: var(--m27-source-type-large-title-size);
+  --m-ui-type-large-title-line-height: var(
+    --m27-source-type-large-title-line-height
+  );
+  --m-ui-type-title-1-size: var(--m27-source-type-title-1-size);
+  --m-ui-type-title-1-line-height: var(--m27-source-type-title-1-line-height);
+  --m-ui-type-title-2-size: var(--m27-source-type-title-2-size);
+  --m-ui-type-title-2-line-height: var(--m27-source-type-title-2-line-height);
+  --m-ui-type-title-3-size: var(--m27-source-type-title-3-size);
+  --m-ui-type-title-3-line-height: var(--m27-source-type-title-3-line-height);
+  --m-ui-type-headline-size: var(--m27-source-type-headline-size);
+  --m-ui-type-headline-line-height: var(--m27-source-type-headline-line-height);
+  --m-ui-type-body-size: var(--m27-source-type-body-size);
+  --m-ui-type-body-line-height: var(--m27-source-type-body-line-height);
+  --m-ui-type-callout-size: var(--m27-source-type-callout-size);
+  --m-ui-type-callout-line-height: var(--m27-source-type-callout-line-height);
+  --m-ui-type-subheadline-size: var(--m27-source-type-subheadline-size);
+  --m-ui-type-subheadline-line-height: var(
+    --m27-source-type-subheadline-line-height
+  );
+  --m-ui-type-footnote-size: var(--m27-source-type-footnote-size);
+  --m-ui-type-footnote-line-height: var(--m27-source-type-footnote-line-height);
+  --m-ui-type-caption-1-size: var(--m27-source-type-caption-1-size);
+  --m-ui-type-caption-1-line-height: var(
+    --m27-source-type-caption-1-line-height
+  );
+
+  --m-ui-material-ultra-thick-fill: var(--m27-source-material-ultra-thick-fill);
+  --m-ui-material-thick-fill: var(--m27-source-material-thick-fill);
+  --m-ui-material-medium-fill: var(--m27-source-material-medium-fill);
+  --m-ui-material-thin-fill: var(--m27-source-material-thin-fill);
+  --m-ui-material-ultra-thin-fill: var(--m27-source-material-ultra-thin-fill);
+  --m-ui-material-blur: var(--m27-source-material-standard-blur);
+
+  --m-ui-window-radius: var(--m27-source-chrome-window-radius);
+  --m-ui-window-border-width: 1px;
+  --m-ui-window-border-color: var(--m27-source-chrome-window-border);
+  --m-ui-window-shadow-active: var(--m27-source-chrome-window-active-shadow);
+  --m-ui-window-shadow-inactive: var(
+    --m27-source-chrome-window-inactive-shadow
+  );
+  --m-ui-toolbar-gap: var(--m27-source-chrome-toolbar-gap);
+  --m-ui-toolbar-control-group-height: var(
+    --m27-source-chrome-toolbar-medium-control-height
+  );
+  --m-ui-toolbar-control-group-padding: var(
+    --m27-source-chrome-toolbar-medium-inset
+  );
+  --m-ui-toolbar-control-group-gap: var(
+    --m27-source-chrome-toolbar-control-group-gap
+  );
+  --m-ui-toolbar-control-height: var(
+    --m27-source-chrome-toolbar-medium-icon-content-height
+  );
+  --m-ui-toolbar-action-padding-inline: var(
+    --m27-source-size-segmented-control-margins
+  );
+  --m-ui-toolbar-action-gap: var(--m27-source-chrome-toolbar-control-group-gap);
+  --m-ui-toolbar-action-icon-size: var(--m27-source-size-menu-font-size-symbol);
+  --m-ui-toolbar-title-size: var(--m27-source-chrome-window-title-font-size);
+  --m-ui-toolbar-title-line-height: var(
+    --m27-source-chrome-window-title-line-height
+  );
+  --m-ui-toolbar-title-weight: var(
+    --m27-source-chrome-window-title-font-weight
+  );
+  --m-ui-traffic-light-size: var(--m27-source-chrome-stoplight-size);
+  --m-ui-traffic-light-gap: var(--m27-source-chrome-stoplight-gap);
+  --m-ui-menu-radius: var(--m27-source-chrome-menu-radius);
+  --m-ui-menu-padding-block: var(--m27-source-chrome-menu-padding-block);
+  --m-ui-menu-item-height: var(--m27-source-chrome-menu-item-height);
+  --m-ui-menu-item-radius: var(--m27-source-chrome-menu-item-radius);
+  --m-ui-sidebar-width: var(--m27-source-chrome-sidebar-width);
+  --m-ui-sidebar-window-inset: 0px;
+  --m-ui-sidebar-shell-radius: 0px;
+  --m-ui-sidebar-item-radius: var(
+    --m27-source-chrome-sidebar-medium-selection-radius
+  );
+  --m-ui-sidebar-selection-radius: var(
+    --m27-source-chrome-sidebar-medium-selection-radius
+  );
+  --m-ui-sidebar-border-width: 0px;
+  /*
+   * Edge-to-edge sidebars terminate through their material transition.
+   * The visible hairline belongs to the outer window perimeter, not this
+   * internal seam.
+   */
+  --m-ui-sidebar-divider-width: 0px;
+  --m-ui-sidebar-divider-color: transparent;
+  --m-ui-sidebar-shadow: none;
+  /*
+   * The macOS 27 edge-to-edge sidebar does not own a material fill. It reveals
+   * the app/window canvas beneath it; product-specific color and imagery stay
+   * the responsibility of that canvas.
+   */
+  --m-ui-sidebar-glass-effect-radius: 0px;
+  --m-ui-sidebar-padding-block: 0px;
+  --m-ui-sidebar-row-inset-inline: 8px;
+  --m-ui-sidebar-row-height-small: var(
+    --m27-source-chrome-sidebar-small-row-height
+  );
+  --m-ui-sidebar-row-height-medium: var(
+    --m27-source-chrome-sidebar-medium-row-height
+  );
+  --m-ui-sidebar-row-height-large: var(
+    --m27-source-chrome-sidebar-large-row-height
+  );
+  --m-ui-sidebar-selection-fill: var(--m27-source-color-fill-primary);
+  --m-ui-sidebar-material-fill: transparent;
+  --m-ui-table-row-height: var(--m27-source-chrome-table-row-height);
+  --m-ui-scrollbar-width: var(--m27-source-chrome-scrollbar-cross-size);
+
+  --m-ui-alert-width: var(--m27-source-alert-width);
+  --m-ui-alert-radius: var(--m27-source-alert-radius);
+  --m-ui-alert-padding-block-start: var(--m27-source-alert-padding-block-start);
+  --m-ui-alert-padding-inline: var(--m27-source-alert-padding-inline-start);
+  --m-ui-alert-padding-block-end: var(--m27-source-alert-padding-block-end);
+  --m-ui-alert-gap: var(--m27-source-alert-major-gap);
+  --m-ui-alert-action-height-stacked: var(
+    --m27-source-alert-stacked-action-height
+  );
+  --m-ui-alert-action-height-inline: var(
+    --m27-source-alert-side-by-side-action-height
+  );
+  --m-ui-alert-action-gap-stacked: var(--m27-source-alert-stacked-action-gap);
+  --m-ui-alert-action-gap-inline: var(
+    --m27-source-alert-side-by-side-action-gap
+  );
+  --m-ui-dialog-radius: var(--m27-source-dialog-radius);
+  --m-ui-dialog-shadow: var(--m27-source-dialog-shadow-offset-x)
+    var(--m27-source-dialog-shadow-offset-y)
+    var(--m27-source-dialog-shadow-blur) var(--m27-source-dialog-shadow-spread)
+    var(--m27-source-dialog-shadow-color);
+  --m-ui-dialog-halo: var(--m27-source-dialog-halo-offset-x)
+    var(--m27-source-dialog-halo-offset-y) var(--m27-source-dialog-halo-blur)
+    var(--m27-source-dialog-halo-spread) var(--m27-source-dialog-halo-color);
+  --m-ui-notification-width: var(--m27-source-notification-width);
+  --m-ui-notification-min-height: var(--m27-source-notification-min-height);
+  --m-ui-notification-radius: var(--m27-source-notification-radius);
+  --m-ui-notification-stack-peek: var(--m27-source-notification-stack-peek);
+  --m-ui-notification-stack-inset: var(
+    --m27-source-notification-stack-inset-inline
+  );
+  --m-ui-popover-radius: var(--m27-source-popover-radius);
+  --m-ui-popover-protrusion-depth: var(--m27-source-popover-protrusion-depth);
+  --m-ui-progress-small-height: var(--m27-source-progress-linear-small-height);
+  --m-ui-progress-medium-height: var(
+    --m27-source-progress-linear-medium-height
+  );
+  --m-ui-progress-radius: var(--m27-source-progress-linear-radius);
+  --m-ui-progress-ring-small-size: var(
+    --m27-source-progress-circular-small-size
+  );
+  --m-ui-progress-ring-large-size: var(
+    --m27-source-progress-circular-large-size
+  );
+  --m-ui-progress-ring-thickness: var(
+    --m27-source-progress-circular-ring-thickness
+  );
+  --m-ui-sheet-radius: var(--m27-source-sheet-radius);
+  --m-ui-tooltip-padding: var(--m27-source-tooltip-padding-block-start)
+    var(--m27-source-tooltip-padding-inline)
+    var(--m27-source-tooltip-padding-block-end);
+  --m-ui-tooltip-radius: var(--m27-source-tooltip-radius);
+  --m-ui-tooltip-inner-stroke-width: var(
+    --m27-source-tooltip-inner-stroke-width
+  );
+  --m-ui-group-box-radius: var(--m27-source-group-box-radius);
+  --m-ui-group-box-background-alpha: var(
+    --m27-source-group-box-effective-background-opacity
+  );
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='mini'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-control-size='mini'] {
+  --m-ui-control-line-height: 13px;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='small'],
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-control-size='small'] {
+  --m-ui-control-line-height: 14px;
+}