@tangible/ui 0.0.1 → 0.0.2

package/styles/components/_bundle.scss

@@ -2,9 +2,15 @@
 @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;
@@ -12,14 +18,18 @@
 @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,9 +38,15 @@
   @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();
@@ -38,14 +54,18 @@
   @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,14 @@
 @include sys.emit-color-roles-dark(sys.$prefix);
 @include sys.emit-color-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});
@@ -52,6 +60,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,34 @@
+@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
+//
+// 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);
+
+  font-size: var(--_fs);
+  padding-block: var(--_py);
+  min-height: calc(2em + 2 * var(--_py));
+
+  &.is-size-sm { --_fs: var(--#{$prefix}typography-size-sm); }
+  &.is-size-lg { --_fs: var(--#{$prefix}typography-size-lg); }
+}

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
        ======================== */
@@ -66,6 +69,7 @@ $brand: 'blue';
 
     /* 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,6 +143,9 @@ $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)};
@@ -148,6 +155,7 @@ $brand: 'blue';
 
   /* 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)};

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)
     // ---------------------------