@tangible/ui 0.0.1 → 0.0.3

package/styles/components/_bundle.scss

@@ -2,24 +2,35 @@
 @use "../../components/Avatar/styles"           as avatar;
 @use "../../components/Button/styles"           as button;
 @use "../../components/Card/styles"             as card;
+@use "../../components/Checkbox/styles"         as checkbox;
 @use "../../components/Chip/styles"             as chip;
+@use "../../components/ChipGroup/styles"        as chipgroup;
+@use "../../components/Combobox/styles"         as combobox;
 @use "../../components/ContentIndicator/styles" as contentindicator;
 @use "../../components/Dropdown/styles"         as dropdown;
+@use "../../components/Field/styles"            as field;
+@use "../../components/MultiSelect/styles"      as multiselect;
+@use "../../components/Select/styles"           as select;
 @use "./input/index"                            as input;
 @use "../../components/Icon/styles"             as icon;
 @use "../../components/IconButton/styles"       as iconbutton;
 @use "../../components/Modal/styles"            as modal;
+@use "../../components/MoveHandle/styles"       as movehandle;
 @use "../../components/Notice/styles"           as notice;
 @use "../../components/OverlapStack/styles"     as overlapstack;
 @use "../../components/Pager/styles"            as pager;
+@use "../../components/Radio/styles"            as radio;
 @use "../../components/Rating/styles"           as rating;
 @use "../../components/Progress/styles"         as progress;
 @use "../../components/SegmentedControl/styles" as segmentedcontrol;
+@use "../../components/Switch/styles"           as switch;
 @use "../../components/Sidebar/styles"          as sidebar;
 @use "../../components/StepIndicator/styles"    as stepindicator;
 @use "../../components/StepList/styles"         as steplist;
 @use "../../components/Table/styles"            as table;
 @use "../../components/Tabs/styles"             as tabs;
+@use "../../components/Textarea/styles"         as textarea;
+@use "../../components/TextInput/styles"        as textinput;
 @use "../../components/Toolbar/styles"          as toolbar;
 @use "../../components/Tooltip/styles"          as tooltip;
 
@@ -28,24 +39,35 @@
   @include avatar.styles();
   @include button.styles();
   @include card.styles();
+  @include checkbox.styles();
   @include chip.styles();
+  @include chipgroup.styles();
+  @include combobox.styles();
   @include contentindicator.styles();
   @include dropdown.styles();
+  @include field.styles();
+  @include multiselect.styles();
+  @include select.styles();
   @include input.styles();
   @include icon.styles();
   @include iconbutton.styles();
   @include modal.styles();
+  @include movehandle.styles();
   @include notice.styles();
   @include overlapstack.styles();
   @include pager.styles();
+  @include radio.styles();
   @include rating.styles();
   @include progress.styles();
   @include segmentedcontrol.styles();
+  @include switch.styles();
   @include sidebar.styles();
   @include stepindicator.styles();
   @include steplist.styles();
   @include table.styles();
   @include tabs.styles();
+  @include textarea.styles();
+  @include textinput.styles();
   @include toolbar.styles();
   @include tooltip.styles();
 }

package/styles/components/input/index.scss

@@ -22,7 +22,6 @@
 
   // Structural (not tokenised)
   $_spacing-inline: 0.5em;
-  $_height: calc(2em - (2 * var(--#{sys.$prefix}border-width)));
 
   // ---------------------------------------------------------------------------
   // Labels
@@ -65,17 +64,15 @@
     --_border-invalid: var(--#{sys.$prefix}input-border-invalid, var(--#{sys.$prefix}theme-danger-base));
     --_radius: var(--#{sys.$prefix}input-radius, var(--#{sys.$prefix}radius-md));
 
-    font-size: var(--#{sys.$prefix}typography-size-sm);
+    @include sys.control-sizing(sys.$prefix);
+
     font-family: inherit;
-    box-sizing: content-box;
     border: var(--#{sys.$prefix}border-width) solid var(--_border);
     border-radius: var(--_radius);
     appearance: none;
     background-color: var(--_bg);
     color: var(--_fg);
-    height: $_height;
     padding-inline: $_spacing-inline;
-    padding-block: 0;
     min-width: 1px;
 
     transition-duration: var(--#{sys.$prefix}motion-duration);
@@ -93,22 +90,11 @@
       cursor: not-allowed;
     }
 
-    &:invalid {
+    &:invalid,
+    &[aria-invalid="true"] {
       --_border: var(--_border-invalid);
     }
   }
-
-  // ---------------------------------------------------------------------------
-  // Search input with icon
-  // ---------------------------------------------------------------------------
-  :where(.#{sys.$prefix}interface) :is(input[type="search"], input[type="search"].#{sys.$prefix}input) {
-    padding-inline-start: 2.5em !important;
-    background-image: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8ZM8 2a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6ZM19 20a1 1 0 0 1-.707-.293l-4-4a1 1 0 0 1 1.414-1.414l4 4A1 1 0 0 1 19 20Z" fill="%231F2A37"/></svg>');
-    background-repeat: no-repeat;
-    background-position: 0.75em 50%;
-    background-size: 1em;
-  }
-
   // ---------------------------------------------------------------------------
   // Select with dropdown arrow
   // ---------------------------------------------------------------------------
@@ -157,7 +143,7 @@
   :where(.#{sys.$prefix}interface) .#{sys.$prefix}toggle {
     // Internal tokens
     --_accent: var(--#{sys.$prefix}input-accent, var(--#{sys.$prefix}theme-primary-base));
-    --_track-off: var(--#{sys.$prefix}palette-color-gray-300);
+    --_track-off: var(--#{sys.$prefix}theme-secondary-soft);
 
     input[type="checkbox"] {
       position: absolute;
@@ -236,7 +222,6 @@
 
     font-size: var(--#{sys.$prefix}typography-size-sm);
     font-family: inherit;
-    box-sizing: content-box;
     border: var(--#{sys.$prefix}border-width) solid var(--_border);
     border-radius: var(--_radius);
     background-color: var(--_bg);

package/styles/index.scss

@@ -10,6 +10,18 @@
 @include sys.emit-color-roles-dark(sys.$prefix);
 @include sys.emit-color-roles-auto(sys.$prefix);
 
+@include sys.emit-accent-roles(sys.$prefix);
+@include sys.emit-accent-roles-dark(sys.$prefix);
+@include sys.emit-accent-roles-auto(sys.$prefix);
+
+// Reduced motion: kill all token-driven transitions/animations globally.
+// Components using --tui-motion-duration get instant transitions for free.
+@media (prefers-reduced-motion: reduce) {
+  :where(.#{sys.$prefix}interface) {
+    --#{sys.$prefix}motion-duration: 0ms;
+  }
+}
+
 .#{sys.$prefix}interface {
   --#{sys.$prefix}spacing-base: 4px;
   @include sys.emit-spacing-primitives(#{sys.$prefix});
@@ -39,6 +51,7 @@
                     0 2px 4px rgba(var(--#{sys.$prefix}shadow-color), 0.06);
   --#{sys.$prefix}shadow-lg: 0 10px 15px rgba(var(--#{sys.$prefix}shadow-color), 0.1),
                     0 4px 6px rgba(var(--#{sys.$prefix}shadow-color), 0.05);
+  --#{sys.$prefix}shadow-dropdown: 0 4px 12px rgba(var(--#{sys.$prefix}shadow-color), 0.15);
 }
 @layer resets {
   .#{sys.$prefix}interface {
@@ -52,6 +65,14 @@
       color: var(--#{sys.$prefix}color-fg);
     }
 
+    // Universal border-box — all TUI elements use border-box sizing.
+    &,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     // Button element reset — kill common theme button styling
     button,
     [type="button"],

package/styles/system/_control.scss

@@ -0,0 +1,49 @@
+@use "constants" as sys;
+
+// =============================================================================
+// Control Sizing Mixin
+// =============================================================================
+//
+// Unified height formula for all form controls (TextInput, Select, MultiSelect,
+// Combobox). Include on the element that owns the control's visible box.
+//
+// Sets font-size, padding-block, and min-height. The consumer handles
+// padding-inline, border, and everything else.
+// Assumes border-box (set globally in the resets layer).
+//
+// Resulting heights (spacing-xxs = 4px):
+//   sm  → 14px font → 36px
+//   md  → 16px font → 40px (default)
+//   lg  → 20px font → 48px
+//
+// Override from consuming context (e.g. Fields for WordPress):
+//   .my-context .tui-interface {
+//     --tui-control-height-sm: 32px;
+//     --tui-control-height-md: 36px;
+//     --tui-control-height-lg: 44px;
+//   }
+//
+// Usage:
+//   .tui-select__trigger { @include sys.control-sizing(sys.$prefix); }
+//
+// =============================================================================
+
+@mixin control-sizing($prefix) {
+  --_fs: var(--#{$prefix}typography-size-md);
+  --_py: var(--#{$prefix}spacing-xxs);
+  --_height: calc(2em + 2 * var(--_py));
+
+  font-size: var(--_fs);
+  padding-block: var(--_py);
+  min-height: var(--#{$prefix}control-height-md, var(--_height));
+
+  &.is-size-sm {
+    --_fs: var(--#{$prefix}typography-size-sm);
+    min-height: var(--#{$prefix}control-height-sm, var(--_height));
+  }
+
+  &.is-size-lg {
+    --_fs: var(--#{$prefix}typography-size-lg);
+    min-height: var(--#{$prefix}control-height-lg, var(--_height));
+  }
+}

package/styles/system/_tokens.scss

@@ -26,6 +26,9 @@ $brand: 'blue';
 }
 @mixin emit-color-roles($prefix:'#{$prefix}', $brand:'blue', $neutral:'gray') {
   :where(.#{$prefix}interface) {
+    /* UA chrome: native controls, scrollbars render in light mode */
+    color-scheme: light;
+
     /* ========================
        PRIMITIVES
        ======================== */
@@ -59,13 +62,15 @@ $brand: 'blue';
 
     /* Neutral: surfaces */
     --#{$prefix}color-bg:             #fff;
-    --#{$prefix}color-bg-surface:      #{pf.tone($neutral, 25)};
+    --#{$prefix}color-bg-surface:     #{pf.tone($neutral, 25)};
+    --#{$prefix}color-bg-muted:       #{pf.tone($neutral, 100)};
     --#{$prefix}color-bg-elevated:    #fff;
     --#{$prefix}color-bg-inverted:    #{pf.tone($neutral, 900)};
     --#{$prefix}color-bg-overlay:     rgba(0, 0, 0, var(--#{$prefix}opacity-backdrop));
 
     /* Neutral: text */
     --#{$prefix}color-fg:             #{pf.tone($neutral, 900)};
+    --#{$prefix}color-fg-secondary:   #{pf.tone($neutral, 600)};
     --#{$prefix}color-fg-muted:       #{pf.tone($neutral, 500)};
     --#{$prefix}color-fg-on-accent:   #fff;
     --#{$prefix}color-fg-inverted:    #{pf.tone($neutral, 25)};
@@ -139,15 +144,20 @@ $brand: 'blue';
 
 // Private: actual dark override declarations
 @mixin _dark-overrides($prefix:'tui-', $brand:'blue', $neutral:'gray') {
+  /* UA chrome: native controls, scrollbars render in dark mode */
+  color-scheme: dark;
+
   /* Backgrounds */
   --#{$prefix}color-bg:             #{pf.tone($neutral, 900)};
   --#{$prefix}color-bg-surface:     #{pf.tone($neutral, 800)};
-  --#{$prefix}color-bg-elevated:    #{pf.tone($neutral, 700)};
+  --#{$prefix}color-bg-muted:       #{pf.tone($neutral, 700)};
+  --#{$prefix}color-bg-elevated:    #{pf.tone($neutral, 900)};
   --#{$prefix}color-bg-inverted:    #{pf.tone($neutral, 50)};
   --#{$prefix}color-bg-overlay:     rgba(0, 0, 0, 0.7);
 
   /* Text */
   --#{$prefix}color-fg:             #{pf.tone($neutral, 50)};
+  --#{$prefix}color-fg-secondary:   #{pf.tone($neutral, 300)};
   --#{$prefix}color-fg-muted:       #{pf.tone($neutral, 400)};
   --#{$prefix}color-fg-on-accent:   #fff;
   --#{$prefix}color-fg-inverted:    #{pf.tone($neutral, 900)};
@@ -213,6 +223,118 @@ $brand: 'blue';
   }
 }
 
+// ==========================================================================
+// Accent Roles (compact, OKLCH-derived)
+// ==========================================================================
+//
+// For concepts that need their own colour identity but don't warrant a full
+// 7-step scale (section, page, step, or any future accent slot).
+//
+// Public API per accent (component-safe):
+//   --tui-theme-{name}-base      Primary fill (buttons, active states)
+//   --tui-theme-{name}-soft      Tinted surface (chips, badges, subtle panels)
+//   --tui-theme-{name}-border    Border for soft surfaces
+//   --tui-theme-{name}-on-base   Foreground on base
+//   --tui-theme-{name}-on-soft   Foreground on soft
+//
+// Components must only consume these role tokens, not the palette anchors.
+//
+// Primitives (swizzlable by consumers, OKLCH path only):
+//   --tui-palette-{name}-c       OKLCH chroma (cap at ≤ 0.20)
+//   --tui-palette-{name}-h       OKLCH hue (0–360)
+//
+// Two strategies for defining accents:
+//
+//   Path A — map from existing core families (no OKLCH needed):
+//     .my-context {
+//       --tui-theme-section-base:    var(--tui-theme-warning-base);
+//       --tui-theme-section-soft:    var(--tui-theme-warning-subtle);
+//       --tui-theme-section-border:  var(--tui-theme-warning-soft);
+//       --tui-theme-section-on-base: var(--tui-color-fg-on-accent);
+//       --tui-theme-section-on-soft: var(--tui-color-fg);
+//     }
+//
+//   Path B — derive from OKLCH anchors (true custom accent):
+//     Uses @supports guard with Path A fallback. No silent failures.
+//
+// ==========================================================================
+
+// Each accent: OKLCH anchors (c, h) + fallback core family for @supports guard
+$accent-defaults: (
+  section: (c: 0.17, h: 55,  fallback: warning),  // warm orange/amber
+  page:    (c: 0.15, h: 280, fallback: primary),   // purple
+  step:    (c: 0.14, h: 200, fallback: info),       // teal-blue
+) !default;
+
+// Emit accent role tokens with @supports progressive enhancement.
+// Fallback (all browsers): maps role tokens from core family scales.
+// Enhancement (oklch browsers): overrides with OKLCH-derived values.
+@mixin emit-accent-roles($prefix, $accents: $accent-defaults) {
+  // --- Fallback: map from core families (works everywhere) ---
+  :where(.#{$prefix}interface) {
+    @each $name, $values in $accents {
+      $family: map.get($values, fallback);
+
+      /* Accent: #{$name} (fallback → #{$family}) */
+      --#{$prefix}theme-#{$name}-base:    var(--#{$prefix}theme-#{$family}-base);
+      --#{$prefix}theme-#{$name}-soft:    var(--#{$prefix}theme-#{$family}-subtle);
+      --#{$prefix}theme-#{$name}-border:  var(--#{$prefix}theme-#{$family}-soft);
+      --#{$prefix}theme-#{$name}-on-base: var(--#{$prefix}color-fg-on-accent);
+      --#{$prefix}theme-#{$name}-on-soft: var(--#{$prefix}color-fg);
+    }
+  }
+
+  // --- Enhancement: OKLCH-derived (modern browsers) ---
+  @supports (color: oklch(0.5 0.1 0)) {
+    :where(.#{$prefix}interface) {
+      @each $name, $values in $accents {
+        $c: map.get($values, c);
+        $h: map.get($values, h);
+
+        /* Accent: #{$name} (OKLCH c=#{$c} h=#{$h}) */
+        --#{$prefix}palette-#{$name}-c: #{$c};
+        --#{$prefix}palette-#{$name}-h: #{$h};
+
+        --#{$prefix}theme-#{$name}-base:    oklch(0.62 var(--#{$prefix}palette-#{$name}-c) var(--#{$prefix}palette-#{$name}-h));
+        --#{$prefix}theme-#{$name}-soft:    oklch(0.92 calc(var(--#{$prefix}palette-#{$name}-c) * 0.55) var(--#{$prefix}palette-#{$name}-h));
+        --#{$prefix}theme-#{$name}-border:  oklch(0.80 calc(var(--#{$prefix}palette-#{$name}-c) * 0.45) var(--#{$prefix}palette-#{$name}-h));
+        --#{$prefix}theme-#{$name}-on-base: oklch(0.98 0 0);
+        --#{$prefix}theme-#{$name}-on-soft: var(--#{$prefix}color-fg);
+      }
+    }
+  }
+}
+
+// Private: dark mode accent OKLCH overrides (swap L values, tighten chroma).
+// Fallback path needs no dark override — core family vars already handle it.
+@mixin _accent-dark-overrides($prefix, $accents: $accent-defaults) {
+  @supports (color: oklch(0.5 0.1 0)) {
+    @each $name, $_ in $accents {
+      --#{$prefix}theme-#{$name}-base:    oklch(0.72 var(--#{$prefix}palette-#{$name}-c) var(--#{$prefix}palette-#{$name}-h));
+      --#{$prefix}theme-#{$name}-soft:    oklch(0.30 calc(var(--#{$prefix}palette-#{$name}-c) * 0.35) var(--#{$prefix}palette-#{$name}-h));
+      --#{$prefix}theme-#{$name}-border:  oklch(0.38 calc(var(--#{$prefix}palette-#{$name}-c) * 0.30) var(--#{$prefix}palette-#{$name}-h));
+      --#{$prefix}theme-#{$name}-on-base: oklch(0.18 0 0);
+      --#{$prefix}theme-#{$name}-on-soft: var(--#{$prefix}color-fg);
+    }
+  }
+}
+
+// Public: explicit dark mode (data-theme="dark")
+@mixin emit-accent-roles-dark($prefix, $accents: $accent-defaults) {
+  :where(.#{$prefix}interface)[data-theme="dark"] {
+    @include _accent-dark-overrides($prefix, $accents);
+  }
+}
+
+// Public: auto mode - respects system preference (data-theme="auto")
+@mixin emit-accent-roles-auto($prefix, $accents: $accent-defaults) {
+  @media (prefers-color-scheme: dark) {
+    :where(.#{$prefix}interface)[data-theme="auto"] {
+      @include _accent-dark-overrides($prefix, $accents);
+    }
+  }
+}
+
 @mixin emit-spacing-primitives($prefix, $steps: $spacing-steps) {
   @each $n in $steps {
     --#{$prefix}palette-spacing-#{$n}: calc(var(--#{$prefix}spacing-base) * #{$n});

package/styles/system/index.scss

@@ -1,4 +1,5 @@
 @forward "constants";
 @forward "palettes";
 @forward "tokens";
-@forward "motion";
+@forward "motion";
+@forward "control";

package/styles/utilities/_index.scss

@@ -343,6 +343,56 @@
       border-right-style: solid !important;
     }
 
+    // ---------------------------
+    // Input reset — strip browser-specific pseudo-elements
+    // ---------------------------
+    // Opt-in: apply when you're replacing native chrome with your own UI.
+    // Works on the input directly or on a wrapper (e.g. tui-input-group).
+    .#{sys.$prefix}input-reset {
+      // Search: cancel button, results decorations
+      &::-webkit-search-decoration,
+      &::-webkit-search-cancel-button,
+      &::-webkit-search-results-button,
+      &::-webkit-search-results-decoration,
+      input::-webkit-search-decoration,
+      input::-webkit-search-cancel-button,
+      input::-webkit-search-results-button,
+      input::-webkit-search-results-decoration {
+        display: none !important;
+        -webkit-appearance: none !important;
+      }
+
+      // Number: spinner buttons
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button,
+      input::-webkit-outer-spin-button {
+        -webkit-appearance: none !important;
+        margin: 0 !important;
+      }
+      &[type="number"],
+      input[type="number"] {
+        -moz-appearance: textfield !important;
+      }
+
+      // Date/time: picker indicator
+      &::-webkit-calendar-picker-indicator,
+      input::-webkit-calendar-picker-indicator {
+        display: none !important;
+        -webkit-appearance: none !important;
+      }
+
+      // Color: swatch
+      &::-webkit-color-swatch-wrapper,
+      input::-webkit-color-swatch-wrapper {
+        padding: 0 !important;
+      }
+      &::-webkit-color-swatch,
+      input::-webkit-color-swatch {
+        border: none !important;
+      }
+    }
+
     // ---------------------------
     // Border color utilities (semantic-only)
     // ---------------------------