@moldable-ai/ui 0.2.20 → 0.2.22

package/src/components/ui/toolbar.md

@@ -19,3 +19,8 @@ Compact pane chrome for context and actions.
 Use one toolbar per pane. Put the current context before actions and keep one
 clear primary action. Toolbars are not marketing headers. Icon-only actions
 need labels and tooltips.
+
+The default toolbar uses `material="regular"`. The `plain` and `panel` variants
+default to `material="none"`; pass a material explicitly only when the toolbar
+actually floats over content. Reserve `material="clear"` for compact controls
+over media or a richly colored canvas.

package/src/components/ui/tooltip.md

@@ -0,0 +1,31 @@
+# Tooltip
+
+Tooltips provide short, non-interactive clarification for an already named
+control. They are not a replacement for an accessible name or visible
+instructions.
+
+`ThemeProvider` installs one shared `TooltipProvider`, giving neighboring
+tooltips a consistent delay and grace period:
+
+```tsx
+<Tooltip>
+  <TooltipTrigger asChild>
+    <IconButton label="Search" variant="ghost">
+      <Search />
+    </IconButton>
+  </TooltipTrigger>
+  <TooltipContent>
+    Search
+    <TooltipShortcut>⌘F</TooltipShortcut>
+  </TooltipContent>
+</Tooltip>
+```
+
+Use a local `TooltipProvider` only when a bounded region needs a deliberate
+delay override. Do not put links, buttons, forms, or paragraphs of help inside
+a tooltip; use `Popover` instead.
+
+A disabled button does not emit pointer events. When it needs an explanation,
+wrap it in a focusable neutral element and use that wrapper as the trigger.
+Give the wrapper an accessible description without making the tooltip its only
+name.

package/src/styles/index.css

@@ -823,6 +823,42 @@
   --material-blur-toolbar: 16px;
   --material-blur-overlay: 20px;
   --material-saturation: 1.12;
+  --material-regular-fill: color-mix(
+    in oklch,
+    var(--background) 76%,
+    transparent
+  );
+  --material-regular-fallback: color-mix(
+    in oklch,
+    var(--background) 94%,
+    var(--foreground) 6%
+  );
+  --material-regular-border: color-mix(
+    in oklch,
+    var(--foreground) 10%,
+    transparent
+  );
+  --material-regular-highlight: oklch(1 0 0 / 42%);
+  --material-regular-blur: 20px;
+  --material-regular-saturation: 1.18;
+  --material-clear-fill: color-mix(
+    in oklch,
+    var(--background) 24%,
+    transparent
+  );
+  --material-clear-fallback: color-mix(
+    in oklch,
+    var(--background) 88%,
+    var(--foreground) 12%
+  );
+  --material-clear-border: color-mix(
+    in oklch,
+    var(--foreground) 14%,
+    transparent
+  );
+  --material-clear-highlight: oklch(1 0 0 / 28%);
+  --material-clear-blur: 12px;
+  --material-clear-saturation: 1.24;
   --material-shadow-panel:
     0 1px 2px oklch(0.15 0.005 285 / 6%), 0 4px 12px oklch(0.15 0.005 285 / 4%);
   --material-shadow-overlay:
@@ -943,6 +979,30 @@
   --status-stopped: oklch(0.705 0.015 286.067);
   --status-pending: oklch(0.8 0.12 75);
   --status-error: oklch(0.704 0.191 22.216);
+  --material-regular-fill: color-mix(
+    in oklch,
+    var(--background) 68%,
+    transparent
+  );
+  --material-regular-fallback: color-mix(
+    in oklch,
+    var(--background) 88%,
+    var(--foreground) 12%
+  );
+  --material-regular-border: oklch(1 0 0 / 14%);
+  --material-regular-highlight: oklch(1 0 0 / 12%);
+  --material-clear-fill: color-mix(
+    in oklch,
+    var(--background) 20%,
+    transparent
+  );
+  --material-clear-fallback: color-mix(
+    in oklch,
+    var(--background) 78%,
+    var(--foreground) 22%
+  );
+  --material-clear-border: oklch(1 0 0 / 18%);
+  --material-clear-highlight: oklch(1 0 0 / 10%);
   --material-shadow-panel:
     0 1px 2px oklch(0 0 0 / 24%), 0 6px 16px oklch(0 0 0 / 16%);
   --material-shadow-overlay:
@@ -976,10 +1036,52 @@
     --separator-strong: color-mix(in oklch, var(--foreground) 54%, transparent);
     --control-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
     --control-pressed: color-mix(in oklch, var(--foreground) 18%, transparent);
+    --material-regular-fill: color-mix(
+      in oklch,
+      var(--material-regular-fallback) 92%,
+      transparent
+    );
+    --material-regular-border: var(--separator-strong);
+    --material-clear-fill: color-mix(
+      in oklch,
+      var(--material-clear-fallback) 84%,
+      transparent
+    );
+    --material-clear-border: var(--separator-strong);
     --window-border: var(--separator-strong);
   }
 }
 
+:where([data-contrast='increased']) {
+  --text-tertiary: color-mix(
+    in oklch,
+    var(--muted-foreground) 92%,
+    var(--foreground)
+  );
+  --text-disabled: color-mix(
+    in oklch,
+    var(--muted-foreground) 72%,
+    transparent
+  );
+  --separator: color-mix(in oklch, var(--foreground) 32%, transparent);
+  --separator-strong: color-mix(in oklch, var(--foreground) 54%, transparent);
+  --control-hover: color-mix(in oklch, var(--foreground) 12%, transparent);
+  --control-pressed: color-mix(in oklch, var(--foreground) 18%, transparent);
+  --material-regular-fill: color-mix(
+    in oklch,
+    var(--material-regular-fallback) 92%,
+    transparent
+  );
+  --material-regular-border: var(--separator-strong);
+  --material-clear-fill: color-mix(
+    in oklch,
+    var(--material-clear-fallback) 84%,
+    transparent
+  );
+  --material-clear-border: var(--separator-strong);
+  --window-border: var(--separator-strong);
+}
+
 @media (forced-colors: active) {
   :root {
     --text-primary: CanvasText;
@@ -1002,6 +1104,18 @@
     --control-disabled: transparent;
     --control-focus: Highlight;
     --control-invalid: Mark;
+    --material-regular-fill: Canvas;
+    --material-regular-fallback: Canvas;
+    --material-regular-border: ButtonBorder;
+    --material-regular-highlight: transparent;
+    --material-regular-blur: 0px;
+    --material-regular-saturation: 1;
+    --material-clear-fill: Canvas;
+    --material-clear-fallback: Canvas;
+    --material-clear-border: ButtonBorder;
+    --material-clear-highlight: transparent;
+    --material-clear-blur: 0px;
+    --material-clear-saturation: 1;
     --material-blur-toolbar: 0px;
     --material-blur-overlay: 0px;
     --material-saturation: 1;
@@ -1014,6 +1128,12 @@
 :where([data-transparency='reduced']) {
   --surface-toolbar: var(--background);
   --surface-overlay: var(--popover);
+  --material-regular-fill: var(--material-regular-fallback);
+  --material-regular-blur: 0px;
+  --material-regular-saturation: 1;
+  --material-clear-fill: var(--material-clear-fallback);
+  --material-clear-blur: 0px;
+  --material-clear-saturation: 1;
   --material-blur-toolbar: 0px;
   --material-blur-overlay: 0px;
   --material-saturation: 1;
@@ -1023,6 +1143,12 @@
   :root {
     --surface-toolbar: var(--background);
     --surface-overlay: var(--popover);
+    --material-regular-fill: var(--material-regular-fallback);
+    --material-regular-blur: 0px;
+    --material-regular-saturation: 1;
+    --material-clear-fill: var(--material-clear-fallback);
+    --material-clear-blur: 0px;
+    --material-clear-saturation: 1;
     --material-blur-toolbar: 0px;
     --material-blur-overlay: 0px;
     --material-saturation: 1;
@@ -1042,6 +1168,84 @@
   }
 }
 
+@layer components {
+  /*
+   * Adaptive material is reserved for navigation and control chrome. The
+   * opaque background is the baseline; capable renderers opt into backdrop
+   * sampling below.
+   */
+  .moldable-material {
+    --material-active-fill: var(--material-regular-fill);
+    --material-active-fallback: var(--material-regular-fallback);
+    --material-active-border: var(--material-regular-border);
+    --material-active-highlight: var(--material-regular-highlight);
+    --material-active-blur: var(--material-regular-blur);
+    --material-active-saturation: var(--material-regular-saturation);
+    --material-active-shadow: none;
+
+    position: relative;
+    isolation: isolate;
+    background-color: var(--material-active-fallback);
+    border-color: var(--material-active-border);
+    box-shadow:
+      inset 0 1px 0 var(--material-active-highlight),
+      var(--material-active-shadow);
+  }
+
+  .moldable-material[data-material='clear'] {
+    --material-active-fill: var(--material-clear-fill);
+    --material-active-fallback: var(--material-clear-fallback);
+    --material-active-border: var(--material-clear-border);
+    --material-active-highlight: var(--material-clear-highlight);
+    --material-active-blur: var(--material-clear-blur);
+    --material-active-saturation: var(--material-clear-saturation);
+  }
+
+  .moldable-material[data-material-elevation='panel'] {
+    --material-active-shadow: var(--material-shadow-panel);
+  }
+
+  .moldable-material[data-material-elevation='overlay'] {
+    --material-active-shadow: var(--material-shadow-overlay);
+  }
+
+  .moldable-material[data-material-interactive='true'] {
+    transition:
+      transform var(--motion-duration-fast) var(--motion-ease-standard),
+      background-color var(--motion-duration-fast) var(--motion-ease-standard),
+      border-color var(--motion-duration-fast) var(--motion-ease-standard);
+  }
+
+  .moldable-material[data-material-interactive='true']:hover {
+    background-color: color-mix(
+      in oklch,
+      var(--material-active-fill),
+      var(--control-hover)
+    );
+  }
+
+  .moldable-material[data-material-interactive='true']:active {
+    background-color: color-mix(
+      in oklch,
+      var(--material-active-fill),
+      var(--control-pressed)
+    );
+    transform: scale(0.98);
+  }
+
+  @supports (
+    (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+  ) {
+    .moldable-material {
+      background-color: var(--material-active-fill);
+      -webkit-backdrop-filter: blur(var(--material-active-blur))
+        saturate(var(--material-active-saturation));
+      backdrop-filter: blur(var(--material-active-blur))
+        saturate(var(--material-active-saturation));
+    }
+  }
+}
+
 @layer utilities {
   .scrollbar-hide {
     &::-webkit-scrollbar {
@@ -1075,6 +1279,10 @@
   .model-effort-max-burst {
     display: none;
   }
+
+  .moldable-material[data-material-interactive='true']:active {
+    transform: none;
+  }
 }
 
 :where([data-motion='reduced']) {
@@ -1088,6 +1296,11 @@
   --motion-ease-spring: linear;
 }
 
+:where([data-motion='reduced'])
+  .moldable-material[data-material-interactive='true']:active {
+  transform: none;
+}
+
 /* Shiki dual-theme support: override inline styles in dark mode */
 .dark .shiki,
 .dark .shiki span {