mac-human-design 0.1.3 → 0.1.6

package/src/styles/macosBaseUi.css

@@ -0,0 +1,1158 @@
+:root {
+  --hd-mac-font:
+    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
+    "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --hd-mac-blue: #0a84ff;
+  --hd-mac-blue-active: #006edb;
+  --hd-mac-red: #ff453a;
+  --hd-mac-green: #32d74b;
+  --hd-mac-text: #1d1d1f;
+  --hd-mac-secondary-text: #5f6068;
+  --hd-mac-muted-text: #7d7f89;
+  --hd-mac-surface: rgba(255, 255, 255, 0.78);
+  --hd-mac-panel: rgba(246, 247, 251, 0.72);
+  --hd-mac-raised: rgba(255, 255, 255, 0.94);
+  --hd-mac-fill: rgba(118, 118, 128, 0.12);
+  --hd-mac-fill-hover: rgba(118, 118, 128, 0.18);
+  --hd-mac-fill-pressed: rgba(118, 118, 128, 0.24);
+  --hd-mac-border: rgba(60, 60, 67, 0.22);
+  --hd-mac-border-strong: rgba(60, 60, 67, 0.34);
+  --hd-mac-shadow:
+    0 18px 48px rgba(15, 23, 42, 0.16),
+    0 1px 0 rgba(255, 255, 255, 0.7) inset;
+  --hd-mac-control-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.86) inset,
+    0 1px 1px rgba(15, 23, 42, 0.08);
+  --hd-mac-focus-ring: 0 0 0 3px color-mix(in srgb, var(--hd-mac-blue) 28%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --hd-mac-blue: #0a84ff;
+    --hd-mac-blue-active: #409cff;
+    --hd-mac-red: #ff6961;
+    --hd-mac-green: #30d158;
+    --hd-mac-text: #f5f5f7;
+    --hd-mac-secondary-text: #d0d1d7;
+    --hd-mac-muted-text: #9a9ca6;
+    --hd-mac-surface: rgba(36, 38, 46, 0.78);
+    --hd-mac-panel: rgba(48, 50, 59, 0.68);
+    --hd-mac-raised: rgba(58, 60, 70, 0.92);
+    --hd-mac-fill: rgba(255, 255, 255, 0.09);
+    --hd-mac-fill-hover: rgba(255, 255, 255, 0.13);
+    --hd-mac-fill-pressed: rgba(255, 255, 255, 0.18);
+    --hd-mac-border: rgba(255, 255, 255, 0.16);
+    --hd-mac-border-strong: rgba(255, 255, 255, 0.28);
+    --hd-mac-shadow:
+      0 22px 56px rgba(0, 0, 0, 0.48),
+      0 1px 0 rgba(255, 255, 255, 0.08) inset;
+    --hd-mac-control-shadow:
+      0 1px 0 rgba(255, 255, 255, 0.09) inset,
+      0 1px 2px rgba(0, 0, 0, 0.32);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hd-mac *,
+  .hd-mac-button,
+  .hd-mac-select-trigger,
+  .hd-mac-toggle,
+  .hd-mac-toolbar-button,
+  .hd-mac-stepper-button,
+  .hd-mac-switch,
+  .hd-mac-switch-thumb,
+  .hd-mac-slider-thumb {
+    transition-duration: 1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+.hd-mac,
+.hd-mac-button,
+.hd-mac-input,
+.hd-mac-select-trigger,
+.hd-mac-toggle,
+.hd-mac-toolbar,
+.hd-mac-tooltip,
+.hd-mac-popup,
+.hd-mac-dialog {
+  box-sizing: border-box;
+  font-family: var(--hd-mac-font);
+  letter-spacing: 0;
+  color: var(--hd-mac-text);
+}
+
+.hd-mac-stack,
+.hd-mac-form,
+.hd-mac-fieldset,
+.hd-mac-choice-group {
+  display: grid;
+  gap: 8px;
+}
+
+.hd-mac-window {
+  min-height: 100vh;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: var(--hd-mac-panel);
+  color: var(--hd-mac-text);
+  font-family: var(--hd-mac-font);
+}
+
+.hd-mac-window-content {
+  min-height: 0;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.hd-mac-panel {
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 12px;
+  background: var(--hd-mac-panel);
+}
+
+.hd-mac-status-message {
+  margin-top: 12px;
+  border: 1px solid color-mix(in srgb, var(--hd-mac-blue) 28%, transparent);
+  border-radius: 10px;
+  padding: 8px 12px;
+  background: color-mix(in srgb, var(--hd-mac-blue) 10%, transparent);
+  color: var(--hd-mac-blue-active);
+  font: 400 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-status-message[data-intent="error"] {
+  border-color: color-mix(in srgb, var(--hd-mac-red) 34%, transparent);
+  background: color-mix(in srgb, var(--hd-mac-red) 12%, transparent);
+  color: var(--hd-mac-red);
+}
+
+.hd-mac-status-message[data-intent="success"] {
+  border-color: color-mix(in srgb, var(--hd-mac-green) 30%, transparent);
+  background: color-mix(in srgb, var(--hd-mac-green) 12%, transparent);
+  color: var(--hd-mac-green);
+}
+
+.hd-mac-button,
+.hd-mac-select-trigger,
+.hd-mac-toggle,
+.hd-mac-toolbar-button,
+.hd-mac-stepper-button {
+  appearance: none;
+  min-height: 28px;
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 7px;
+  padding: 4px 12px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)),
+    var(--hd-mac-raised);
+  box-shadow: var(--hd-mac-control-shadow);
+  color: var(--hd-mac-text);
+  font: 590 13px/18px var(--hd-mac-font);
+  cursor: default;
+  user-select: none;
+  white-space: nowrap;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease,
+    filter 120ms ease,
+    transform 80ms ease;
+}
+
+.hd-mac-button:hover,
+.hd-mac-select-trigger:hover,
+.hd-mac-toggle:hover,
+.hd-mac-toolbar-button:hover,
+.hd-mac-stepper-button:hover {
+  filter: brightness(1.035);
+}
+
+.hd-mac-button:active,
+.hd-mac-select-trigger:active,
+.hd-mac-toggle:active,
+.hd-mac-toolbar-button:active,
+.hd-mac-stepper-button:active {
+  transform: translateY(1px);
+  filter: brightness(0.98);
+}
+
+.hd-mac-button:focus-visible,
+.hd-mac-select-trigger:focus-visible,
+.hd-mac-toggle:focus-visible,
+.hd-mac-toolbar-button:focus-visible,
+.hd-mac-stepper-button:focus-visible,
+.hd-mac-input:focus-visible,
+.hd-mac-checkbox:focus-visible,
+.hd-mac-radio:focus-visible,
+.hd-mac-switch:focus-visible,
+.hd-mac-slider-thumb:focus-visible,
+.hd-mac-tab:focus-visible,
+.hd-mac-menu-item:focus-visible {
+  outline: none;
+  box-shadow: var(--hd-mac-focus-ring), var(--hd-mac-control-shadow);
+}
+
+.hd-mac-button[data-variant="primary"],
+.hd-mac-button-primary {
+  border-color: transparent;
+  color: #fff;
+  background: linear-gradient(180deg, #2994ff 0%, var(--hd-mac-blue) 100%);
+}
+
+.hd-mac-button[data-variant="secondary"],
+.hd-mac-button-secondary {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.02)),
+    var(--hd-mac-fill-hover);
+}
+
+.hd-mac-button[data-variant="destructive"],
+.hd-mac-button-destructive {
+  border-color: transparent;
+  color: #fff;
+  background: linear-gradient(180deg, #ff6961 0%, var(--hd-mac-red) 100%);
+}
+
+.hd-mac-button-plain,
+.hd-mac-clear-button,
+.hd-mac-disclosure-trigger {
+  min-height: 24px;
+  padding: 2px 7px;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.hd-mac-icon-button {
+  display: inline-grid;
+  width: 28px;
+  min-width: 28px;
+  height: 28px;
+  min-height: 28px;
+  place-items: center;
+  padding: 0;
+}
+
+.hd-mac-help-button {
+  display: inline-grid;
+  width: 18px;
+  min-width: 18px;
+  height: 18px;
+  min-height: 18px;
+  place-items: center;
+  border-radius: 999px;
+  padding: 0;
+  color: var(--hd-mac-secondary-text);
+  font: 700 12px/18px var(--hd-mac-font);
+}
+
+.hd-mac-button[disabled],
+.hd-mac-select-trigger[disabled],
+.hd-mac-toggle[disabled],
+.hd-mac-input[disabled],
+.hd-mac-stepper-button[disabled],
+.hd-mac-toolbar-button[disabled],
+[data-disabled].hd-mac-menu-item,
+[data-disabled].hd-mac-tab {
+  opacity: 0.48;
+  pointer-events: none;
+}
+
+.hd-mac-field,
+.hd-mac-number-field {
+  display: grid;
+  gap: 5px;
+}
+
+.hd-mac-field-control {
+  min-width: 0;
+}
+
+.hd-mac-field-item {
+  display: grid;
+  gap: 5px;
+}
+
+.hd-mac-number-field {
+  width: 240px;
+}
+
+.hd-mac-label,
+.hd-mac-fieldset-legend {
+  color: var(--hd-mac-secondary-text);
+  font: 590 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-help-text,
+.hd-mac-status-text,
+.hd-mac-error-text,
+.hd-mac-validity {
+  color: var(--hd-mac-muted-text);
+  font: 400 12px/16px var(--hd-mac-font);
+}
+
+.hd-mac-error-text {
+  color: var(--hd-mac-red);
+}
+
+.hd-mac-input,
+.hd-mac-input-group {
+  min-height: 28px;
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 7px;
+  background: var(--hd-mac-raised);
+  box-shadow: var(--hd-mac-control-shadow);
+  color: var(--hd-mac-text);
+  font: 400 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-input {
+  width: 100%;
+  padding: 4px 8px;
+}
+
+.hd-mac-input-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 6px;
+}
+
+.hd-mac-input-group > .hd-mac-input {
+  min-height: 26px;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  padding-inline: 2px;
+}
+
+.hd-mac-input::placeholder {
+  color: var(--hd-mac-muted-text);
+}
+
+.hd-mac-search-field {
+  min-height: 26px;
+  border-radius: 7px;
+  padding-left: 28px;
+  background:
+    linear-gradient(90deg, transparent 0 8px, color-mix(in srgb, var(--hd-mac-muted-text) 70%, transparent) 8px 9px, transparent 9px 100%),
+    radial-gradient(circle at 15px 12px, transparent 0 4px, color-mix(in srgb, var(--hd-mac-muted-text) 70%, transparent) 4px 5px, transparent 5px),
+    var(--hd-mac-raised);
+  background-repeat: no-repeat;
+}
+
+.hd-mac-select-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 128px;
+  text-align: left;
+}
+
+.hd-mac-pop-up-button {
+  min-width: 150px;
+}
+
+.hd-mac-pull-down-button::after,
+.hd-mac-pop-up-button::after {
+  content: "⌄";
+  margin-left: auto;
+  color: var(--hd-mac-muted-text);
+  font-size: 11px;
+}
+
+.hd-mac-number-field > .hd-mac-input-group {
+  gap: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.hd-mac-number-input {
+  min-width: 48px;
+  flex: 1;
+  text-align: center;
+}
+
+.hd-mac-stepper-button {
+  width: 32px;
+  min-width: 32px;
+  border-top: 0;
+  border-bottom: 0;
+  border-radius: 0;
+  padding: 0;
+}
+
+.hd-mac-stepper-button:first-child {
+  border-left: 0;
+}
+
+.hd-mac-stepper-button:last-child {
+  border-right: 0;
+}
+
+.hd-mac-scrub-area {
+  cursor: ew-resize;
+  user-select: none;
+}
+
+.hd-mac-scrub-cursor {
+  width: 1px;
+  height: 18px;
+  background: var(--hd-mac-blue);
+}
+
+.hd-mac-otp-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.hd-mac-otp-input {
+  width: 42px;
+  min-width: 42px;
+  text-align: center;
+}
+
+.hd-mac-otp-separator {
+  color: var(--hd-mac-muted-text);
+  font: 590 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-control-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hd-mac-control-icon {
+  display: inline-flex;
+  color: var(--hd-mac-muted-text);
+}
+
+.hd-mac-context-trigger,
+.hd-mac-preview-trigger,
+.hd-mac-tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
+}
+
+.hd-mac-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.18);
+}
+
+.hd-mac-viewport {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.hd-mac-viewport > * {
+  pointer-events: auto;
+}
+
+.hd-mac-positioner {
+  z-index: 1000;
+}
+
+.hd-mac-popup,
+.hd-mac-popover,
+.hd-mac-preview-card,
+.hd-mac-menu,
+.hd-mac-dialog,
+.hd-mac-drawer,
+.hd-mac-tooltip,
+.hd-mac-toast {
+  border: 1px solid var(--hd-mac-border);
+  background: var(--hd-mac-surface);
+  box-shadow: var(--hd-mac-shadow);
+  backdrop-filter: saturate(180%) blur(28px);
+  -webkit-backdrop-filter: saturate(180%) blur(28px);
+}
+
+.hd-mac-popup,
+.hd-mac-popover,
+.hd-mac-preview-card,
+.hd-mac-menu {
+  min-width: 180px;
+  border-radius: 10px;
+  padding: 5px;
+}
+
+.hd-mac-tooltip {
+  max-width: 260px;
+  border-radius: 7px;
+  padding: 5px 8px;
+  color: var(--hd-mac-text);
+  font: 400 12px/16px var(--hd-mac-font);
+}
+
+.hd-mac-popup-arrow,
+.hd-mac-tooltip-arrow {
+  fill: var(--hd-mac-surface);
+}
+
+.hd-mac-listbox,
+.hd-mac-menu-collection {
+  display: grid;
+  gap: 1px;
+  margin: 0;
+  padding: 0;
+}
+
+.hd-mac-menu-group {
+  display: grid;
+  gap: 1px;
+}
+
+.hd-mac-menu-group-label {
+  padding: 5px 9px 2px;
+  color: var(--hd-mac-muted-text);
+  font: 590 11px/14px var(--hd-mac-font);
+}
+
+.hd-mac-menu-item,
+.hd-mac-menu-row,
+.hd-mac-navigation-link {
+  display: flex;
+  min-height: 24px;
+  align-items: center;
+  gap: 8px;
+  border-radius: 5px;
+  padding: 3px 9px;
+  color: var(--hd-mac-text);
+  font: 400 13px/18px var(--hd-mac-font);
+  text-decoration: none;
+  user-select: none;
+}
+
+.hd-mac-menu-item[data-highlighted],
+.hd-mac-menu-item[data-selected],
+.hd-mac-menu-item:hover,
+.hd-mac-navigation-link:hover {
+  background: var(--hd-mac-blue);
+  color: #fff;
+}
+
+.hd-mac-menu-item-indicator {
+  width: 14px;
+  display: inline-flex;
+  justify-content: center;
+  color: currentColor;
+  font-size: 0;
+}
+
+.hd-mac-menu-item-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.hd-mac-menu-checkmark-indicator::before {
+  content: "✓";
+  font: 700 12px/1 var(--hd-mac-font);
+}
+
+.hd-mac-menu-dot-indicator::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  margin-top: 1px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.hd-mac-submenu-trigger::after {
+  content: "›";
+  margin-left: auto;
+}
+
+.hd-mac-separator {
+  border: 0;
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--hd-mac-border);
+}
+
+.hd-mac-empty-state {
+  padding: 10px;
+  color: var(--hd-mac-muted-text);
+  font: 400 13px/18px var(--hd-mac-font);
+  text-align: center;
+}
+
+.hd-mac-dialog {
+  width: min(420px, calc(100vw - 32px));
+  border-radius: 14px;
+  padding: 18px;
+}
+
+.hd-mac-sheet-dialog {
+  border-radius: 0 0 14px 14px;
+  border-top-color: transparent;
+  box-shadow:
+    0 18px 42px rgba(0, 0, 0, 0.28),
+    0 1px 0 rgba(255, 255, 255, 0.1) inset;
+}
+
+.hd-mac-alert-dialog {
+  width: min(380px, calc(100vw - 32px));
+}
+
+.hd-mac-dialog-title,
+.hd-mac-toast-title {
+  margin: 0;
+  color: var(--hd-mac-text);
+  font: 700 17px/22px var(--hd-mac-font);
+}
+
+.hd-mac-dialog-description,
+.hd-mac-toast-description {
+  margin: 6px 0 0;
+  color: var(--hd-mac-secondary-text);
+  font: 400 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-drawer {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: 16px 16px 0 0;
+  padding: 14px;
+}
+
+.hd-mac-sidebar-drawer {
+  top: 0;
+  right: auto;
+  width: min(320px, 82vw);
+  border-radius: 0;
+  border-top: 0;
+  border-bottom: 0;
+}
+
+.hd-mac-drawer-content {
+  display: grid;
+  gap: 10px;
+}
+
+.hd-mac-drawer-swipe-area {
+  height: 20px;
+}
+
+.hd-mac-drawer-indent {
+  padding-inline-start: 16px;
+}
+
+.hd-mac-drawer-indent-background {
+  background: color-mix(in srgb, var(--hd-mac-fill) 72%, transparent);
+}
+
+.hd-mac-checkbox,
+.hd-mac-radio {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--hd-mac-border-strong);
+  background: var(--hd-mac-raised);
+  box-shadow: var(--hd-mac-control-shadow);
+  color: #fff;
+}
+
+.hd-mac-checkbox {
+  border-radius: 4px;
+}
+
+.hd-mac-radio {
+  border-radius: 999px;
+}
+
+.hd-mac-checkbox[data-checked],
+.hd-mac-checkbox[data-indeterminate],
+.hd-mac-radio[data-checked] {
+  border-color: transparent;
+  background: var(--hd-mac-blue);
+}
+
+.hd-mac-checkbox-indicator,
+.hd-mac-radio-indicator {
+  color: currentColor;
+}
+
+.hd-mac-checkbox-indicator::before {
+  content: "✓";
+  font: 800 11px/1 var(--hd-mac-font);
+}
+
+.hd-mac-checkbox[data-indeterminate] .hd-mac-checkbox-indicator::before {
+  content: "";
+  width: 8px;
+  height: 2px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.hd-mac-radio-indicator {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: currentColor;
+}
+
+.hd-mac-switch {
+  position: relative;
+  display: inline-flex;
+  width: 38px;
+  height: 22px;
+  align-items: center;
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 999px;
+  padding: 2px;
+  background: var(--hd-mac-fill-pressed);
+  transition: background-color 140ms ease;
+}
+
+.hd-mac-switch[data-checked] {
+  background: var(--hd-mac-green);
+}
+
+.hd-mac-switch-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
+  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.hd-mac-switch[data-checked] .hd-mac-switch-thumb {
+  transform: translateX(16px);
+}
+
+.hd-mac-toggle-group {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  gap: 2px;
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 8px;
+  padding: 2px;
+  background: var(--hd-mac-fill);
+  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.45) inset;
+}
+
+.hd-mac-segmented-toggle-group {
+  min-height: 28px;
+}
+
+.hd-mac-separated-segmented-toggle-group {
+  gap: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.hd-mac-separated-segmented-toggle-group > .hd-mac-toggle {
+  min-height: 28px;
+  border-radius: 0;
+  border-right: 1px solid var(--hd-mac-border);
+}
+
+.hd-mac-separated-segmented-toggle-group > .hd-mac-toggle:last-child {
+  border-right: 0;
+}
+
+.hd-mac-segmented-control-full-width {
+  width: 100%;
+}
+
+.hd-mac-segmented-control-full-width > .hd-mac-toggle {
+  flex: 1;
+}
+
+.hd-mac-toggle {
+  min-height: 24px;
+  border-color: transparent;
+  border-radius: 6px;
+  background: transparent;
+  box-shadow: none;
+  padding: 2px 10px;
+}
+
+.hd-mac-symbol-icon-button[data-loading] {
+  opacity: 0.62;
+}
+
+.hd-mac-toggle[data-pressed] {
+  border-color: var(--hd-mac-border);
+  background: var(--hd-mac-raised);
+  box-shadow: var(--hd-mac-control-shadow);
+}
+
+.hd-mac-tabs {
+  display: grid;
+  gap: 10px;
+}
+
+.hd-mac-tab-list,
+.hd-mac-menubar,
+.hd-mac-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 8px;
+  padding: 3px;
+  background: var(--hd-mac-fill);
+}
+
+.hd-mac-navigation-menu,
+.hd-mac-navigation-list {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.hd-mac-navigation-item {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.hd-mac-navigation-trigger {
+  min-height: 28px;
+}
+
+.hd-mac-tab {
+  min-height: 24px;
+  border: 0;
+  border-radius: 6px;
+  padding: 2px 10px;
+  background: transparent;
+  color: var(--hd-mac-secondary-text);
+  font: 590 12px/16px var(--hd-mac-font);
+}
+
+.hd-mac-tab[data-selected] {
+  background: var(--hd-mac-raised);
+  box-shadow: var(--hd-mac-control-shadow);
+  color: var(--hd-mac-text);
+}
+
+.hd-mac-tab-panel {
+  color: var(--hd-mac-text);
+  font: 400 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-tab-indicator {
+  height: 2px;
+  border-radius: 999px;
+  background: var(--hd-mac-blue);
+}
+
+.hd-mac-slider {
+  display: grid;
+  gap: 6px;
+  min-width: 160px;
+}
+
+.hd-mac-slider-control {
+  position: relative;
+  display: flex;
+  height: 18px;
+  align-items: center;
+}
+
+.hd-mac-slider-track,
+.hd-mac-progress-track,
+.hd-mac-meter-track {
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--hd-mac-fill-pressed);
+}
+
+.hd-mac-slider-track {
+  height: 4px;
+  width: 100%;
+}
+
+.hd-mac-slider-indicator,
+.hd-mac-progress-indicator,
+.hd-mac-meter-indicator {
+  background: var(--hd-mac-blue);
+}
+
+.hd-mac-slider-indicator {
+  height: 100%;
+}
+
+.hd-mac-slider-thumb {
+  width: 17px;
+  height: 17px;
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.34);
+}
+
+.hd-mac-progress,
+.hd-mac-meter {
+  display: grid;
+  gap: 5px;
+}
+
+.hd-mac-progress-track,
+.hd-mac-meter-track {
+  height: 6px;
+}
+
+.hd-mac-progress-value,
+.hd-mac-meter-value,
+.hd-mac-slider-value {
+  color: var(--hd-mac-muted-text);
+  font: 400 12px/16px var(--hd-mac-font);
+}
+
+.hd-mac-accordion {
+  overflow: hidden;
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 10px;
+  background: var(--hd-mac-panel);
+}
+
+.hd-mac-accordion-item + .hd-mac-accordion-item {
+  border-top: 1px solid var(--hd-mac-border);
+}
+
+.hd-mac-accordion-header {
+  margin: 0;
+}
+
+.hd-mac-accordion-trigger {
+  width: 100%;
+  justify-content: flex-start;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.hd-mac-accordion-panel,
+.hd-mac-collapsible-panel,
+.hd-mac-navigation-content {
+  padding: 8px 10px;
+  color: var(--hd-mac-secondary-text);
+  font: 400 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-avatar {
+  display: inline-grid;
+  width: 32px;
+  height: 32px;
+  overflow: hidden;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--hd-mac-fill-pressed);
+  color: var(--hd-mac-secondary-text);
+  font: 590 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hd-mac-avatar-fallback {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+}
+
+.hd-mac-collapsible {
+  display: grid;
+  gap: 6px;
+}
+
+.hd-mac-chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.hd-mac-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 20px;
+  border-radius: 999px;
+  padding: 1px 7px;
+  background: var(--hd-mac-fill);
+  color: var(--hd-mac-text);
+  font: 400 12px/16px var(--hd-mac-font);
+}
+
+.hd-mac-chip-remove {
+  border: 0;
+  background: transparent;
+  color: var(--hd-mac-muted-text);
+}
+
+.hd-mac-scroll-area {
+  position: relative;
+  overflow: hidden;
+}
+
+.hd-mac-scroll-viewport {
+  width: 100%;
+  height: 100%;
+}
+
+.hd-mac-scroll-content {
+  padding: 8px;
+  color: var(--hd-mac-text);
+  font: 400 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-scrollbar {
+  display: flex;
+  width: 10px;
+  padding: 2px;
+  background: transparent;
+}
+
+.hd-mac-scroll-thumb {
+  flex: 1;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--hd-mac-muted-text) 42%, transparent);
+}
+
+.hd-mac-scroll-corner {
+  background: transparent;
+}
+
+.hd-mac-scroll-arrow {
+  display: grid;
+  place-items: center;
+  min-height: 16px;
+  color: var(--hd-mac-muted-text);
+}
+
+.hd-mac-toast-viewport {
+  position: fixed;
+  right: 16px;
+  bottom: 16px;
+  z-index: 2000;
+  display: grid;
+  gap: 8px;
+  width: min(360px, calc(100vw - 32px));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.hd-mac-toast {
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.hd-mac-toast-positioner {
+  z-index: 2000;
+}
+
+.hd-mac-toast-content {
+  display: grid;
+  gap: 2px;
+}
+
+.hd-mac-toolbar-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.hd-mac-toolbar-button,
+.hd-mac-toolbar-link {
+  min-height: 24px;
+  border-radius: 6px;
+  padding: 2px 7px;
+  text-decoration: none;
+}
+
+.hd-mac-toolbar-input {
+  min-height: 24px;
+}
+
+.hd-mac-toolbar-separator {
+  width: 1px;
+  height: 18px;
+  margin: 0 3px;
+  background: var(--hd-mac-border);
+}
+
+.hd-mac-gallery {
+  display: grid;
+  gap: 14px;
+  max-width: 980px;
+  padding: 18px;
+  background: var(--hd-mac-panel);
+}
+
+.hd-mac-gallery-section {
+  display: grid;
+  gap: 8px;
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 12px;
+  padding: 12px;
+  background: color-mix(in srgb, var(--hd-mac-raised) 72%, transparent);
+}
+
+.hd-mac-gallery-section > h2 {
+  margin: 0;
+  color: var(--hd-mac-secondary-text);
+  font: 700 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-gallery-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.hd-mac-gallery-inline-choice {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--hd-mac-text);
+  font: 400 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-gallery-context-target {
+  min-height: 28px;
+  border: 1px dashed var(--hd-mac-border-strong);
+  border-radius: 7px;
+  padding: 4px 10px;
+  color: var(--hd-mac-secondary-text);
+  font: 400 13px/18px var(--hd-mac-font);
+}
+
+.hd-mac-gallery-scroll {
+  width: 190px;
+  height: 48px;
+  border: 1px solid var(--hd-mac-border);
+  border-radius: 8px;
+}