@adea-ai/ui 0.94.0 → 0.95.1

package/src/components/ui/toggle/toggle.tsx

@@ -34,12 +34,14 @@ export const toggleVariants = cva(
         md: `${controlSize.md} [&_svg]:size-4`,
         lg: `${controlSize.lg} [&_svg]:size-4`,
         xl: `${controlSize.xl} [&_svg]:size-5`,
+        '2xl': `${controlSize['2xl']} [&_svg]:size-6`,
         'icon-2xs': 'size-control-2xs p-0 [&_svg]:size-3',
         'icon-xs': 'size-control-xs p-0 [&_svg]:size-3.5',
         'icon-sm': 'size-control-sm p-0 [&_svg]:size-3.5',
         'icon-md': 'size-control-md p-0 [&_svg]:size-4',
         'icon-lg': 'size-control-lg p-0 [&_svg]:size-4',
         'icon-xl': 'size-control-xl p-0 [&_svg]:size-5',
+        'icon-2xl': 'size-control-2xl p-0 [&_svg]:size-6',
       },
     },
     defaultVariants: { variant: 'default', size: 'md' },

package/src/components/ui/toggle-group/toggle-group.tsx

@@ -54,12 +54,29 @@ export function ToggleGroup(props: ToggleGroupProps) {
 export type ToggleGroupItemProps = ComponentProps<typeof KobalteToggleGroup.Item> &
   VariantProps<typeof toggleVariants>
 
+function invokeEventHandler(handler: unknown, event: Event) {
+  if (Array.isArray(handler)) {
+    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]
+    callback(data, event)
+  } else if (typeof handler === 'function') {
+    ;(handler as (event: Event) => void)(event)
+  }
+}
+
 export function ToggleGroupItem(props: ToggleGroupItemProps) {
-  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
+  const [local, rest] = splitProps(props, ['class', 'variant', 'size', 'onKeyDown'])
 
   return (
     <KobalteToggleGroup.Item
       class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}
+      onKeyDown={(event) => {
+        invokeEventHandler(local.onKeyDown, event)
+        // The group root's selection collection clears the selection and marks
+        // Escape handled, which starves an enclosing dialog or drawer of the
+        // Escape it needs to dismiss. Stopping at the focused item is the only
+        // point before that handler, so pass Escape through from here.
+        if (event.key === 'Escape') event.stopPropagation()
+      }}
       {...rest}
     />
   )

package/src/index.ts

@@ -104,6 +104,7 @@ export * from './components/composites/catalog-browser'
 export * from './components/composites/list-row'
 export * from './components/composites/tree'
 export * from './components/composites/settings'
+export * from './components/composites/scene-controls'
 export * from './components/composites/stat'
 export * from './components/composites/appearance-editor'
 export * from './components/composites/update-dialog'

package/src/lib/tokens.ts

@@ -480,6 +480,11 @@ export const densityTokens: TokenDefinition[] = [
     kind: 'dimension',
     description: '40px — a hero control in an empty state.',
   },
+  {
+    name: 'control-height-2xl',
+    kind: 'dimension',
+    description: '48px — a stable touch target, unchanged by compact density.',
+  },
   {
     name: 'control-padding-2xs',
     kind: 'dimension',
@@ -510,6 +515,11 @@ export const densityTokens: TokenDefinition[] = [
     kind: 'dimension',
     description: 'Inline padding that pairs with the 40px control.',
   },
+  {
+    name: 'control-padding-2xl',
+    kind: 'dimension',
+    description: 'Inline padding that pairs with the stable 48px touch target.',
+  },
   { name: 'row-height-sm', kind: 'dimension', description: '28px — a dense list row.' },
   { name: 'row-height-md', kind: 'dimension', description: '32px — the default list row.' },
   { name: 'row-height-lg', kind: 'dimension', description: '36px — a two-line list row.' },

package/src/lib/utils.ts

@@ -36,6 +36,7 @@ export const cn: CnFunction = createCn({
             'control-md',
             'control-lg',
             'control-xl',
+            'control-2xl',
             'row-sm',
             'row-md',
             'row-lg',
@@ -61,6 +62,7 @@ export const cn: CnFunction = createCn({
             'control-md',
             'control-lg',
             'control-xl',
+            'control-2xl',
             'rail-item',
           ],
         },

package/src/lib/variants.ts

@@ -11,7 +11,7 @@
  * rather than inventing synonyms:
  *
  *   variant  what the control *is for*  — primary, secondary, destructive, …
- *   size     how much room it takes     — 2xs, xs, sm, md, lg, xl
+ *   size     how much room it takes     — 2xs, xs, sm, md, lg, xl, 2xl
  *   tone     what it *communicates*     — neutral, success, warning, …
  *
  * A component that needs a fourth axis is usually two components.
@@ -32,6 +32,8 @@ export const controlSize = {
   md: 'h-control-md px-control-md text-sm gap-2',
   lg: 'h-control-lg px-control-lg text-sm gap-2',
   xl: 'h-control-xl px-control-xl text-base gap-2.5',
+  /** A stable 48px touch target; compact density intentionally leaves it alone. */
+  '2xl': 'h-control-2xl px-control-2xl text-lg gap-3',
 } as const
 
 /** Square counterparts for icon-only controls: the height, with equal width. */
@@ -42,9 +44,10 @@ export const controlSizeIcon = {
   md: 'size-control-md p-0',
   lg: 'size-control-lg p-0',
   xl: 'size-control-xl p-0',
+  '2xl': 'size-control-2xl p-0',
 } as const
 
-export const controlSizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] as const
+export const controlSizes = ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const
 export type ControlSize = (typeof controlSizes)[number]
 
 /**

package/src/lint/index.ts

@@ -460,6 +460,7 @@ const ICON_BUTTON_SIZES: ReadonlySet<string> = new Set([
   'icon-md',
   'icon-lg',
   'icon-xl',
+  'icon-2xl',
 ])
 
 const staticJsxValues = (value: any): any[] =>

package/src/styles/base.css

@@ -250,6 +250,18 @@
   }
 }
 
+/**
+ * Opt into the stable 2xl control rung only when a coarse pointer is available.
+ * `any-pointer` intentionally includes hybrid devices without changing the
+ * glyph or desktop density of the selected Button size.
+ */
+@utility touch-target-comfortable {
+  @media (any-pointer: coarse) {
+    min-inline-size: var(--control-height-2xl);
+    min-block-size: var(--control-height-2xl);
+  }
+}
+
 /**
  * The drag region of a frameless desktop window.
  *
@@ -422,9 +434,9 @@
   }
 }
 
-/* The glass treatment used by the top bar, the rail, and floating overlays.
-   `--glass-*` are private: a consumer chooses *whether* to be glassy through
-   the component prop, not by reaching for these. */
+/* Glass treatments used by the top bar, rail, scene-control groups and floating
+   overlays. Consumers use the owning component; shared composites use the
+   named utility instead of restyling a primitive. */
 @utility glass-panel {
   background: color-mix(in oklch, var(--chrome) calc(var(--chrome-alpha) * 100%), transparent);
   backdrop-filter: blur(18px) saturate(1.6);
@@ -438,6 +450,12 @@
   -webkit-backdrop-filter: blur(12px) saturate(1.4);
 }
 
+@utility glass-scrim {
+  background: color-mix(in oklch, var(--scrim) 20%, transparent);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
 /* The focus ring. Applied by components that cannot use the global outline
    because they need the ring to follow their own radius. */
 @utility focus-ring {
@@ -657,7 +675,8 @@
 
 @media (prefers-reduced-transparency: reduce) {
   .glass-panel,
-  .glass-surface {
+  .glass-surface,
+  .glass-scrim {
     backdrop-filter: none !important;
     -webkit-backdrop-filter: none !important;
     background: var(--background) !important;
@@ -670,18 +689,19 @@
   }
 
   .glass-panel,
-  .glass-surface {
+  .glass-surface,
+  .glass-scrim {
     background: var(--background) !important;
     border: 1px solid var(--foreground) !important;
   }
 }
 
-/* An engine without backdrop-filter would render the glass tint alone, which
-   is 3-8% alpha — effectively a transparent panel. Fall back to a solid
-   surface instead, keeping borders and shadows so panels stay delimited. */
+/* Without backdrop-filter there is no blurred context behind a glass surface.
+   Fall back to a solid surface so glass panels and scrim groups stay legible. */
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .glass-panel,
-  .glass-surface {
+  .glass-surface,
+  .glass-scrim {
     background: var(--background) !important;
   }
 }

package/src/styles/theme.css

@@ -582,6 +582,7 @@
   --control-height-md: 2rem; /* 32px — form default */
   --control-height-lg: 2.25rem; /* 36px */
   --control-height-xl: 2.5rem; /* 40px */
+  --control-height-2xl: 3rem; /* 48px — stable touch target */
 
   --control-padding-2xs: 0.375rem;
   --control-padding-xs: 0.5rem;
@@ -589,6 +590,7 @@
   --control-padding-md: 0.75rem;
   --control-padding-lg: 0.875rem;
   --control-padding-xl: 1rem;
+  --control-padding-2xl: 1.125rem;
 
   --row-height-sm: 1.75rem;
   --row-height-md: 2rem;
@@ -646,14 +648,15 @@
   --z-toast: 180;
 }
 
-/* Compact density: the whole control ladder one rung tighter.
+/* Compact density: the standard control ladder one rung tighter.
  *
  * It is a *shift* rather than a second set of numbers chosen by eye, so the
  * relationship between the rungs is identical at either density and a control keeps
  * its place in the ladder. Height moves by 4px per rung and padding by 2px, which is
  * the step each already uses, and the row heights move by the same 4px. A `sm`
  * control goes from 28px to 24px — the `xs` control's comfortable height. That is the
- * intended meaning, not an oversight.
+ * intended meaning, not an oversight. The `2xl` touch target is intentionally
+ * omitted here so it stays at least 48px at either density.
  *
  * 16px at `2xs` is the floor. One rung below it would be 12px, under the minimum
  * comfortable touch target, so the ladder compresses from the bottom rather than
@@ -833,6 +836,7 @@
   --height-control-md: var(--control-height-md);
   --height-control-lg: var(--control-height-lg);
   --height-control-xl: var(--control-height-xl);
+  --height-control-2xl: var(--control-height-2xl);
   /* Tailwind `size-*` prefers --size-* and then --spacing-*. Without this
      bridge, square icon controls use the padding ladder below for both axes.
      Height, square size and inline padding remain distinct semantic contracts. */
@@ -842,6 +846,7 @@
   --size-control-md: var(--control-height-md);
   --size-control-lg: var(--control-height-lg);
   --size-control-xl: var(--control-height-xl);
+  --size-control-2xl: var(--control-height-2xl);
   --height-row-sm: var(--row-height-sm);
   --height-row-md: var(--row-height-md);
   --height-row-lg: var(--row-height-lg);
@@ -855,6 +860,7 @@
   --spacing-control-md: var(--control-padding-md);
   --spacing-control-lg: var(--control-padding-lg);
   --spacing-control-xl: var(--control-padding-xl);
+  --spacing-control-2xl: var(--control-padding-2xl);
 
   --width-rail: var(--rail-width);
   --width-rail-expanded: var(--rail-width-expanded);