@moldable-ai/ui 0.2.29 → 0.2.32

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;
+}

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

@@ -0,0 +1,212 @@
+/*
+ * Complete compatibility surface for components that still consume the
+ * pre-platform Moldable/shadcn semantic contract.
+ *
+ * This adapter is intentionally part of the versioned platform pack. It
+ * prevents :root, .dark, Tailwind theme, and application defaults from
+ * leaking into the raw macOS 27 profile while components migrate to
+ * --m-ui-* roles.
+ */
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  /* Typography */
+  --font-family-ui: var(--m27-source-font-family-ui);
+  --type-display-size: var(--m27-source-type-large-title-size);
+  --type-display-line-height: var(--m27-source-type-large-title-line-height);
+  --type-display-weight: var(--m27-source-type-large-title-emphasized-weight);
+  --type-display-tracking: 0;
+  --type-heading-size: var(--m27-source-type-title-2-size);
+  --type-heading-line-height: var(--m27-source-type-title-2-line-height);
+  --type-heading-weight: var(--m27-source-type-title-2-emphasized-weight);
+  --type-heading-tracking: 0;
+  --type-title-size: var(--m27-source-type-title-3-size);
+  --type-title-line-height: var(--m27-source-type-title-3-line-height);
+  --type-title-weight: var(--m27-source-type-title-3-emphasized-weight);
+  --type-title-tracking: 0;
+  --type-body-size: var(--m27-source-type-body-size);
+  --type-body-line-height: var(--m27-source-type-body-line-height);
+  --type-label-size: var(--m27-source-type-headline-size);
+  --type-label-line-height: var(--m27-source-type-headline-line-height);
+  --type-caption-size: var(--m27-source-type-caption-1-size);
+  --type-caption-line-height: var(--m27-source-type-caption-1-line-height);
+  --type-badge-size: var(--m27-source-type-caption-1-size);
+  --type-badge-line-height: var(--m27-source-type-caption-1-line-height);
+
+  /* Density and geometry */
+  --density-control-height-xs: 16px;
+  --density-control-height-sm: 20px;
+  --density-control-height-md: 24px;
+  --density-control-height-lg: 28px;
+  --density-control-height-xl: 36px;
+  --density-control-gap: var(--m27-source-chrome-toolbar-control-group-gap);
+  --density-control-padding-inline: var(
+    --m27-source-size-button-padding-inline
+  );
+  --density-badge-height: 18px;
+  --density-badge-padding-inline: 6px;
+  --density-row-height: var(--m27-source-chrome-sidebar-medium-row-height);
+  --density-toolbar-height: var(--m27-source-chrome-toolbar-unified-height);
+  --density-pane-padding: var(--m27-source-chrome-menu-padding-inline);
+  --density-section-gap: var(--m27-source-chrome-toolbar-unified-padding-block);
+
+  --shape-control: var(--m27-source-size-control-radius);
+  --shape-checkbox: var(--m27-source-size-checkboxes-radius);
+  --shape-popover: var(--m27-source-popover-radius);
+  --shape-card: var(--m27-source-chrome-menu-radius);
+  --shape-group: var(--m27-source-chrome-menu-radius);
+  --shape-panel: var(--m27-source-chrome-window-radius);
+  --shape-dialog: var(--m27-source-dialog-radius);
+  --shape-pill: 9999px;
+  --shape-container: var(--shape-card);
+  --shape-overlay: var(--shape-popover);
+  --radius: var(--shape-card);
+
+  /* Foundational colors */
+  --background: var(--m27-source-color-window-background);
+  --foreground: var(--m27-source-color-label-primary);
+  --card: var(--m27-source-color-window-background);
+  --card-foreground: var(--m27-source-color-label-primary);
+  --popover: var(--m27-source-color-window-background);
+  --popover-foreground: var(--m27-source-color-label-primary);
+  --primary: var(--m27-source-color-accent-blue);
+  --primary-foreground: var(--m27-source-color-label-white);
+  --prominent: var(--m27-source-color-accent-blue);
+  --prominent-foreground: var(--m27-source-color-label-white);
+  --secondary: var(--m27-source-color-fill-secondary);
+  --secondary-foreground: var(--m27-source-color-label-primary);
+  --muted: var(--m27-source-color-fill-quinary);
+  --muted-foreground: var(--m27-source-color-label-secondary);
+  --accent: var(--m27-source-color-fill-primary);
+  --accent-foreground: var(--m27-source-color-label-primary);
+  --destructive: var(--m27-source-color-accent-red);
+  --destructive-foreground: var(--m27-source-color-label-white);
+  --border: var(--m27-source-color-fill-primary);
+  --input: var(--m27-source-color-fill-primary);
+  --ring: var(--m27-source-color-accent-blue);
+
+  --info: var(--m27-source-color-accent-blue);
+  --info-foreground: var(--m27-source-color-accent-blue);
+  --neutral: var(--m27-source-color-gray);
+  --neutral-foreground: var(--m27-source-color-label-secondary);
+  --pending: var(--m27-source-color-accent-yellow);
+  --pending-foreground: var(--m27-source-color-accent-yellow);
+  --warning: var(--m27-source-color-accent-orange);
+  --warning-foreground: var(--m27-source-color-accent-orange);
+  --success: var(--m27-source-color-accent-green);
+  --success-foreground: var(--m27-source-color-accent-green);
+  --status-running: var(--m27-source-color-accent-green);
+  --status-stopped: var(--m27-source-color-gray);
+  --status-pending: var(--m27-source-color-accent-yellow);
+  --status-error: var(--m27-source-color-accent-red);
+
+  /* Stable semantic roles */
+  --text-primary: var(--m27-source-color-label-primary);
+  --text-secondary: var(--m27-source-color-label-secondary);
+  --text-tertiary: var(--m27-source-color-label-tertiary);
+  --text-disabled: var(--m27-source-color-label-tertiary);
+  --surface-canvas: var(--m27-source-color-window-background);
+  --surface-raised: var(--m27-source-color-window-background);
+  --surface-recessed: var(--m27-source-color-fill-quinary);
+  --surface-sidebar: var(--m-ui-sidebar-material-fill);
+  --surface-toolbar: var(--m27-source-material-medium-fill);
+  --surface-overlay: var(--m27-source-material-medium-fill);
+  --surface-selected: var(--m27-source-color-fill-primary);
+  --separator: var(--m27-source-color-fill-primary);
+  --separator-strong: var(--m27-source-color-table-column-separator);
+  --control-hover: var(--m27-source-color-fill-quinary);
+  --control-pressed: var(--m27-source-color-fill-primary);
+  --control-selected: var(--m27-source-color-fill-primary);
+  --control-selected-foreground: var(--m27-source-color-label-primary);
+  --control-disabled: var(--m27-source-color-fill-quinary);
+  --control-focus: var(--m27-source-color-accent-blue);
+  --control-invalid: var(--m27-source-color-accent-red);
+
+  /* Sidebar and collection compatibility */
+  --sidebar: var(--m-ui-sidebar-material-fill);
+  --sidebar-foreground: var(--m27-source-color-label-primary);
+  --sidebar-primary: var(--m27-source-color-accent-blue);
+  --sidebar-primary-foreground: var(--m27-source-color-label-white);
+  --sidebar-accent: var(--m27-source-color-fill-primary);
+  --sidebar-accent-foreground: var(--m27-source-color-label-primary);
+  --sidebar-border: var(--m27-source-color-table-column-separator);
+  --sidebar-ring: var(--m27-source-color-accent-blue);
+
+  /* Toolbar and window chrome */
+  --toolbar-control-background: var(--m27-source-color-fill-quinary);
+  --toolbar-control-hover: var(--m27-source-color-fill-secondary);
+  --toolbar-control-pressed: var(--m27-source-color-fill-primary);
+  --toolbar-control-border: var(--m27-source-color-fill-primary);
+  --toolbar-control-shadow: none;
+  --window-corner-radius: var(--m27-source-chrome-window-radius);
+  --window-chrome-background: var(--m27-source-material-medium-fill);
+  --window-chrome-foreground: var(--m27-source-color-label-primary);
+  --window-chrome-muted-foreground: var(--m27-source-color-label-secondary);
+  --window-border: var(--m27-source-color-fill-primary);
+
+  /* Materials */
+  --material-blur-toolbar: var(--m27-source-material-standard-blur);
+  --material-blur-overlay: var(--m27-source-material-standard-blur);
+  --material-saturation: 1;
+  --material-ultra-thick-fill: var(--m27-source-material-ultra-thick-fill);
+  --material-thick-fill: var(--m27-source-material-thick-fill);
+  --material-medium-fill: var(--m27-source-material-medium-fill);
+  --material-thin-fill: var(--m27-source-material-thin-fill);
+  --material-ultra-thin-fill: var(--m27-source-material-ultra-thin-fill);
+  --material-ultra-thick-fallback: var(
+    --m27-source-material-ultra-thick-layer-1-color
+  );
+  --material-thick-fallback: var(--m27-source-material-thick-layer-1-color);
+  --material-medium-fallback: var(--m27-source-material-medium-layer-1-color);
+  --material-thin-fallback: var(--m27-source-material-thin-layer-1-color);
+  --material-ultra-thin-fallback: var(
+    --m27-source-material-ultra-thin-layer-1-color
+  );
+  --material-standard-blur: var(--m27-source-material-standard-blur);
+  --material-regular-fill: var(--m27-source-material-medium-fill);
+  --material-regular-fallback: var(--m27-source-material-medium-layer-1-color);
+  --material-regular-border: var(--m27-source-color-fill-primary);
+  --material-regular-highlight: var(--m27-source-color-label-quaternary);
+  --material-regular-blur: var(--m27-source-material-standard-blur);
+  --material-regular-saturation: 1;
+  --material-clear-fill: var(--m27-source-material-ultra-thin-fill);
+  --material-clear-fallback: var(
+    --m27-source-material-ultra-thin-layer-1-color
+  );
+  --material-clear-border: var(--m27-source-color-fill-primary);
+  --material-clear-highlight: var(--m27-source-color-label-quaternary);
+  --material-clear-blur: var(--m27-source-material-standard-blur);
+  --material-clear-saturation: 1;
+  /*
+   * Structural cards live in the content layer. They deliberately do not
+   * inherit the source Liquid Glass effects used by floating panels.
+  */
+  --material-shadow-card: 0 1px 2px rgb(0 0 0 / 8%);
+  --material-shadow-sidebar:
+    0 1px 2px rgb(0 0 0 / 5%), 0 3px 10px rgb(0 0 0 / 4%);
+  --material-shadow-panel: var(--m27-source-effect-liquid-glass-medium);
+  --material-shadow-overlay: var(--m27-source-effect-liquid-glass-large);
+  --material-shadow-dialog: var(--m-ui-dialog-shadow), var(--m-ui-dialog-halo);
+  --material-shadow-window: var(--m27-source-effect-window-active);
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27']
+  [data-ui-appearance='dark'],
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-ui-appearance='dark'] {
+  --material-shadow-card: 0 1px 2px rgb(0 0 0 / 28%);
+  --material-shadow-sidebar:
+    0 1px 2px rgb(0 0 0 / 20%), 0 3px 10px rgb(0 0 0 / 14%);
+}
+
+/*
+ * A component-level edge-to-edge override can live beneath a root using the
+ * Moldable floating-sidebar recipe. Reassert the joined-canvas contract at
+ * the sidebar boundary so floating brand colors and perimeter styling never
+ * leak into this anatomy.
+ */
+[data-ui-sidebar-style='edge-to-edge'][data-slot='sidebar'] {
+  --m-ui-sidebar-material-fill: transparent;
+  --m-ui-sidebar-border-width: 0px;
+  --m-ui-sidebar-border-color: transparent;
+  --sidebar: transparent;
+  --sidebar-border: transparent;
+  --surface-sidebar: transparent;
+}

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

@@ -0,0 +1,15 @@
+@import './source/colors.generated.css';
+@import './source/sizes.generated.css';
+@import './source/text-styles.generated.css';
+@import './source/paint-styles.generated.css';
+@import './source/kit.generated.css';
+@import './source/effects.generated.css';
+@import './source/context.generated.css';
+@import './source/chrome.generated.css';
+@import './source/controls.generated.css';
+@import './source/overlays-status.generated.css';
+@import './web-adaptations.css';
+@import './aliases.css';
+@import './compatibility.css';
+@import './recipes.css';
+@import './accessibility.css';

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

@@ -0,0 +1,23 @@
+[data-ui-platform='macos'][data-ui-platform-version='27'] {
+  --m-ui-window-radius: 16px;
+  --m-ui-window-shadow-active: var(--m27-source-effect-window-active);
+  --m-ui-window-shadow-inactive: var(--m27-source-effect-window-inactive);
+  --m-ui-toolbar-padding-block: 8px;
+  --m-ui-toolbar-padding-inline-start: 18px;
+  --m-ui-toolbar-padding-inline-end: 8px;
+  --m-ui-toolbar-gap: 8px;
+  --m-ui-toolbar-control-group-height: 24px;
+  --m-ui-toolbar-control-group-padding: 2px;
+  --m-ui-toolbar-control-group-gap: 4px;
+  --m-ui-toolbar-control-height: 20px;
+  --m-ui-toolbar-title-size: 13px;
+  --m-ui-toolbar-title-line-height: 15px;
+  --m-ui-toolbar-title-weight: 700;
+  --m-ui-traffic-light-size: 14px;
+  --m-ui-traffic-light-gap: 9px;
+}
+
+[data-ui-platform='macos'][data-ui-platform-version='27'][data-control-size='xl'] {
+  --m-ui-toolbar-control-group-height: 36px;
+  --m-ui-toolbar-control-height: 28px;
+}