@e-burgos/tucu-ui 2.7.2 → 2.8.0

package/macos/tahoe/macos-navigation.css

@@ -0,0 +1,191 @@
+/* ============================================================
+   macOS Tahoe 26 — Navigation Overrides
+
+   Targets: Tabs, ParamTab, CollapsibleMenu, NavLink
+   Selectors: html.macos-tahoe [data-tucu="tabs"], etc.
+
+   References:
+   - macOS Tahoe segmented control: 24pt height, 8-10pt radius
+   - Tab bar: bottom border, semibold active tab
+   - macOS Finder sidebar groups, glass materials
+   ============================================================ */
+
+/* ── Tabs container ──────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='tabs'] {
+  border-bottom: 1px solid var(--macos-separator);
+  gap: 0;
+  font-family: var(--macos-font-family);
+}
+
+/* ── Tab item ────────────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='tab'] {
+  padding: var(--macos-space-2) var(--macos-space-4);
+  font-size: var(--macos-font-size-body);
+  font-weight: var(--macos-font-weight-regular);
+  color: var(--macos-secondary-label);
+  border-bottom: 2px solid transparent;
+  transition: all var(--macos-transition-fast);
+  border-radius: 0;
+  background: transparent;
+}
+
+html.macos-tahoe [data-tucu='tab']:hover {
+  color: var(--macos-label);
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+html.macos-tahoe.dark [data-tucu='tab']:hover {
+  background-color: rgba(255, 255, 255, 0.04);
+}
+
+html.macos-tahoe [data-tucu='tab'][data-active='true'] {
+  color: var(--macos-control-accent);
+  font-weight: var(--macos-font-weight-medium);
+  border-bottom-color: var(--macos-control-accent);
+}
+
+html.macos-tahoe [data-tucu='tab']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+/* ── Segmented Control style (ParamTab) ──────────────────────── */
+html.macos-tahoe [data-tucu='segmented-control'] {
+  display: inline-flex;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: var(--macos-radius-small-control);
+  padding: 2px;
+  gap: 1px;
+}
+
+html.macos-tahoe.dark [data-tucu='segmented-control'] {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+html.macos-tahoe [data-tucu='segmented-item'] {
+  height: calc(var(--macos-segmented-height) - 4px);
+  padding: 0 var(--macos-space-3);
+  border-radius: 7px;
+  font-size: var(--macos-font-size-callout);
+  font-weight: var(--macos-font-weight-medium);
+  color: var(--macos-secondary-label);
+  background: transparent;
+  transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
+}
+
+html.macos-tahoe [data-tucu='segmented-item'][data-active='true'] {
+  background-color: var(--macos-control-bg);
+  color: var(--macos-label);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0.5px 1px rgba(0, 0, 0, 0.08);
+  font-weight: var(--macos-font-weight-medium);
+}
+
+html.macos-tahoe.dark [data-tucu='segmented-item'][data-active='true'] {
+  background-color: rgba(99, 99, 102, 0.7);
+  color: var(--macos-label);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+}
+
+html.macos-tahoe [data-tucu='segmented-item']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+/* ── Collapsible Menu ────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='collapsible-menu'] {
+  font-family: var(--macos-font-family);
+}
+
+html.macos-tahoe [data-tucu='collapsible-header'] {
+  font-size: var(--macos-font-size-subheadline);
+  font-weight: var(--macos-font-weight-semibold);
+  color: var(--macos-secondary-label);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: var(--macos-space-3) var(--macos-space-3) var(--macos-space-1);
+}
+
+html.macos-tahoe [data-tucu='collapsible-item'] {
+  height: var(--macos-sidebar-row-height);
+  padding: 0 var(--macos-space-3);
+  border-radius: var(--macos-radius-md);
+  font-size: var(--macos-font-size-body);
+  transition: background-color var(--macos-transition-fast);
+}
+
+html.macos-tahoe [data-tucu='collapsible-item']:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+html.macos-tahoe.dark [data-tucu='collapsible-item']:hover {
+  background-color: rgba(255, 255, 255, 0.06);
+}
+
+html.macos-tahoe [data-tucu='collapsible-item'][data-active='true'] {
+  background-color: var(--macos-selected-content-bg);
+  color: #ffffff;
+}
+
+/* ── NavLink ─────────────────────────────────────────────────── */
+html.macos-tahoe [data-tucu='nav-link'] {
+  color: var(--macos-link);
+  text-decoration: none;
+  font-weight: var(--macos-font-weight-regular);
+  transition: color var(--macos-transition-fast);
+}
+
+html.macos-tahoe [data-tucu='nav-link']:hover {
+  text-decoration: underline;
+}
+
+html.macos-tahoe [data-tucu='nav-link'][data-active='true'] {
+  font-weight: var(--macos-font-weight-medium);
+}
+
+/* ============================================================
+   macOS Tahoe 26 — Navigation & Toolbar (Liquid Glass)
+   ============================================================ */
+
+/* Toolbars & Sidebars */
+html.macos-tahoe [data-tucu='macos-toolbar'],
+html.macos-tahoe [data-tucu='macos-sidebar'] {
+  background: var(--macos-glass-regular-bg);
+  backdrop-filter: blur(var(--macos-glass-regular-blur)) saturate(150%);
+  -webkit-backdrop-filter: blur(var(--macos-glass-regular-blur)) saturate(150%);
+  border-bottom: 1px solid var(--macos-glass-regular-border);
+}
+
+html.macos-tahoe [data-tucu='macos-sidebar'] {
+  border-bottom: none;
+  border-right: 1px solid var(--macos-glass-regular-border);
+}
+
+/* Tabs & Segmented Controls */
+html.macos-tahoe [data-tucu='segmented-control'] {
+  background: var(--macos-glass-dim-layer);
+  border: 1px solid var(--macos-glass-clear-border);
+  border-radius: var(--macos-radius-md);
+  padding: 2px;
+}
+
+html.macos-tahoe [data-tucu='segmented-control-item'][data-state='active'] {
+  background: var(--macos-glass-prominent-bg);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), var(--macos-glass-highlight);
+  border-radius: calc(var(--macos-radius-md) - 2px);
+  color: var(--macos-label);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  html.macos-tahoe [data-tucu='macos-toolbar'],
+  html.macos-tahoe [data-tucu='macos-sidebar'],
+  html.macos-tahoe [data-tucu='segmented-control'],
+  html.macos-tahoe [data-tucu='segmented-control-item'][data-state='active'] {
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+  }
+
+  html.macos-tahoe [data-tucu='macos-toolbar'],
+  html.macos-tahoe [data-tucu='macos-sidebar'] {
+    background: var(--color-semantic-elevation-2);
+  }
+}

package/macos/tahoe/macos-selection.css

@@ -0,0 +1,237 @@
+/* ============================================================
+   macOS Tahoe 26 — Selection & Numeric Input Overrides
+
+   Targets: SegmentedControl, Slider, Stepper, RangeInput
+   Selector: html.macos-tahoe [data-tucu="..."]
+
+   References:
+   - Apple HIG > Segmented Controls: 8pt radius, 22pt height
+   - Apple HIG > Sliders: thumb 22pt, track 4pt, accent color
+   - Apple HIG > Steppers: 19pt height, paired +/- buttons
+   ============================================================ */
+
+/* ── Segmented Control ───────────────────────────────────────── */
+
+html.macos-tahoe [data-tucu='segmented-control'] {
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: var(--macos-radius-small-control);
+  font-family: var(--macos-font-family);
+  padding: 2px;
+}
+
+html.macos-tahoe.dark [data-tucu='segmented-control'] {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+html.macos-tahoe [data-tucu='segmented-item'] {
+  font-family: var(--macos-font-family);
+  font-size: var(--macos-font-size-callout);
+  font-weight: var(--macos-font-weight-medium);
+  letter-spacing: var(--macos-tracking-12);
+  border-radius: 7px;
+  transition: background-color 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
+  color: var(--macos-secondary-label);
+}
+
+html.macos-tahoe [data-tucu='segmented-item'][data-active='true'],
+html.macos-tahoe [data-tucu='segmented-item'][aria-checked='true'] {
+  background-color: var(--macos-control-bg);
+  color: var(--macos-label);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.08);
+}
+
+html.macos-tahoe.dark [data-tucu='segmented-item'][data-active='true'],
+html.macos-tahoe.dark [data-tucu='segmented-item'][aria-checked='true'] {
+  background-color: rgba(99, 99, 102, 0.7);
+  color: var(--macos-label);
+}
+
+html.macos-tahoe
+  [data-tucu='segmented-item']:not([data-active='true']):not(
+    [aria-checked='true']
+  ):hover {
+  color: var(--macos-label);
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+html.macos-tahoe.dark
+  [data-tucu='segmented-item']:not([data-active='true']):not(
+    [aria-checked='true']
+  ):hover {
+  background-color: rgba(255, 255, 255, 0.04);
+}
+
+html.macos-tahoe [data-tucu='segmented-item']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+/* ── Slider ──────────────────────────────────────────────────── */
+
+html.macos-tahoe [data-tucu='slider'] {
+  font-family: var(--macos-font-family);
+}
+
+html.macos-tahoe [data-tucu='slider-track'] {
+  height: 4px;
+  border-radius: 2px;
+  background-color: var(--macos-separator);
+}
+
+html.macos-tahoe [data-tucu='slider-fill'] {
+  background-color: var(--macos-control-accent);
+  border-radius: 2px;
+}
+
+html.macos-tahoe [data-tucu='slider-thumb'] {
+  width: 20px;
+  height: 20px;
+  border-radius: var(--macos-radius-pill);
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0.5px 1px rgba(0, 0, 0, 0.12);
+  transition: box-shadow 0.1s ease, transform 0.1s ease;
+  cursor: pointer;
+}
+
+html.macos-tahoe [data-tucu='slider-thumb']:hover {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22), 0 0.5px 1px rgba(0, 0, 0, 0.12);
+}
+
+html.macos-tahoe [data-tucu='slider-thumb']:active {
+  transform: scale(1.1);
+}
+
+html.macos-tahoe [data-tucu='slider-thumb']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+html.macos-tahoe.dark [data-tucu='slider-track'] {
+  background-color: rgba(255, 255, 255, 0.16);
+}
+
+/* ── Native range input (if used) ───────────────────────────── */
+
+html.macos-tahoe input[type='range'] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: var(--macos-separator);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+html.macos-tahoe input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0.5px 1px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+  transition: box-shadow 0.1s ease;
+}
+
+html.macos-tahoe input[type='range']::-webkit-slider-thumb:hover {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22), 0 0.5px 1px rgba(0, 0, 0, 0.12);
+}
+
+html.macos-tahoe input[type='range']:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+html.macos-tahoe input[type='range']::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0.5px 1px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
+}
+
+/* ── Stepper ─────────────────────────────────────────────────── */
+
+html.macos-tahoe [data-tucu='stepper'] {
+  font-family: var(--macos-font-family);
+  display: inline-flex;
+  align-items: stretch;
+  border-radius: var(--macos-radius-control);
+  border: 0.5px solid var(--macos-separator);
+  overflow: hidden;
+  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.1);
+}
+
+html.macos-tahoe [data-tucu='stepper-button'] {
+  background-color: var(--macos-control-bg);
+  color: var(--macos-label);
+  border: none;
+  width: 22px;
+  min-height: var(--macos-control-height);
+  font-size: 14px;
+  font-weight: var(--macos-font-weight-medium);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+html.macos-tahoe [data-tucu='stepper-button']:hover {
+  background-color: var(--macos-control-bg-hover);
+}
+
+html.macos-tahoe [data-tucu='stepper-button']:active {
+  background-color: var(--macos-control-bg-active);
+}
+
+html.macos-tahoe [data-tucu='stepper-button']:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+html.macos-tahoe [data-tucu='stepper-button']:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 var(--macos-focus-ring-width) var(--macos-focus-ring);
+}
+
+html.macos-tahoe [data-tucu='stepper-value'] {
+  font-size: var(--macos-font-size-body);
+  font-family: var(--macos-font-family);
+  color: var(--macos-label);
+  border-left: 0.5px solid var(--macos-separator);
+  border-right: 0.5px solid var(--macos-separator);
+  padding: 0 10px;
+  min-width: 44px;
+  text-align: center;
+  background-color: var(--macos-control-bg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+html.macos-tahoe.dark [data-tucu='stepper'],
+html.macos-tahoe.dark [data-tucu='stepper-button'],
+html.macos-tahoe.dark [data-tucu='stepper-value'] {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+html.macos-tahoe.dark [data-tucu='stepper-button'],
+html.macos-tahoe.dark [data-tucu='stepper-value'] {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+html.macos-tahoe.dark [data-tucu='stepper-button']:hover {
+  background-color: rgba(255, 255, 255, 0.14);
+}
+
+/* ── Reduced motion ──────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+  html.macos-tahoe [data-tucu='segmented-item'],
+  html.macos-tahoe [data-tucu='slider-thumb'],
+  html.macos-tahoe [data-tucu='stepper-button'] {
+    transition: none;
+  }
+}