@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/components/empty.ts

@@ -50,22 +50,22 @@
  */
 
 const MEDIA_BASE =
-  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0';
+  'cn-empty-media flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0';
 
 const MEDIA_VARIANTS = {
-  default: 'bg-transparent',
-  icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
+  default: 'cn-empty-media-default',
+  icon: 'cn-empty-media-icon',
 } as const;
 
 export type EmptyMediaVariant = keyof typeof MEDIA_VARIANTS;
 
 /** Empty root: centred column with generous padding. Add `border` for the dashed outline. */
 export const emptyClass = (): string =>
-  'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12';
+  'cn-empty flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance';
 
 /** Empty header: groups the media, title, and description. */
 export const emptyHeaderClass = (): string =>
-  'flex max-w-sm flex-col items-center gap-2 text-center';
+  'cn-empty-header flex max-w-sm flex-col items-center';
 
 /**
  * Empty media: the icon or illustration above the title. `icon` puts the icon
@@ -77,12 +77,12 @@ export function emptyMediaClass(opts: { variant?: EmptyMediaVariant } = {}): str
 }
 
 /** Empty title: what is missing, in a few words. */
-export const emptyTitleClass = (): string => 'text-lg font-medium tracking-tight';
+export const emptyTitleClass = (): string => 'cn-empty-title';
 
 /** Empty description: the muted line under the title, saying what to do next. */
 export const emptyDescriptionClass = (): string =>
-  'text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary';
+  'cn-empty-description text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary';
 
 /** Empty content: the row for the action button(s) or a small form. */
 export const emptyContentClass = (): string =>
-  'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance';
+  'cn-empty-content flex w-full max-w-sm min-w-0 flex-col items-center text-balance';

package/packages/registry/components/field.ts

@@ -89,21 +89,23 @@ export type FieldLegendVariant = 'legend' | 'label';
 export type FieldOrientation = 'vertical' | 'horizontal' | 'responsive';
 
 const LEGEND_VARIANTS = {
-  legend: 'text-base',
-  label: 'text-sm',
+  legend: 'cn-field-legend-variant-legend',
+  label: 'cn-field-legend-variant-label',
 } as const;
 
+// shadcn's `*:w-full` widens a field's control because the control is the
+// field's child. A `<ui-select>` host is `display: contents` and its trigger
+// (or, before it upgrades, the native select) sits two levels down, so the
+// same width reaches through the host to it.
 const ORIENTATIONS = {
-  vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
-  horizontal:
-    'flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[type=checkbox],[type=radio]]:mt-px',
-  responsive:
-    'flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[type=checkbox],[type=radio]]:mt-px',
+  vertical: 'cn-field-orientation-vertical flex-col *:w-full [&>.sr-only]:w-auto [&>ui-select_:is(select,[data-slot=select-trigger])]:w-full',
+  horizontal: 'cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+  responsive: 'cn-field-orientation-responsive flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px [&>ui-select_:is(select,[data-slot=select-trigger])]:w-full @md/field-group:[&>ui-select_:is(select,[data-slot=select-trigger])]:w-auto',
 } as const;
 
 /** Field set: a native `<fieldset>` holding a legend and a group of fields. */
 export const fieldSetClass = (): string =>
-  'flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3';
+  'cn-field-set flex flex-col';
 
 /**
  * Field legend: the `<legend>` naming a field set. `legend` is section-sized,
@@ -112,12 +114,12 @@ export const fieldSetClass = (): string =>
  * tightens its spacing.
  */
 export function fieldLegendClass(opts: { variant?: FieldLegendVariant } = {}): string {
-  return 'mb-3 font-medium ' + LEGEND_VARIANTS[opts.variant ?? 'legend'];
+  return 'cn-field-legend ' + LEGEND_VARIANTS[opts.variant ?? 'legend'];
 }
 
 /** Field group: stacks fields, and is the container `responsive` fields measure. */
 export const fieldGroupClass = (): string =>
-  'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4';
+  'cn-field-group group/field-group @container/field-group flex w-full flex-col';
 
 /**
  * Field: one label + control + text unit. `vertical` stacks them, `horizontal`
@@ -126,29 +128,29 @@ export const fieldGroupClass = (): string =>
  */
 export function fieldClass(opts: { orientation?: FieldOrientation } = {}): string {
   return (
-    'group/field flex w-full gap-3 data-[invalid=true]:text-destructive ' +
+    'cn-field group/field flex w-full ' +
     ORIENTATIONS[opts.orientation ?? 'vertical']
   );
 }
 
 /** Field content: wraps a label and description beside a horizontal control. */
 export const fieldContentClass = (): string =>
-  'group/field-content flex flex-1 flex-col gap-1.5 leading-snug';
+  'cn-field-content group/field-content flex flex-1 flex-col leading-snug';
 
 /** Field label: the `<label for>` of the control. Fades when the field is data-disabled. */
 export const fieldLabelClass = (): string =>
-  'group/field-label peer/field-label flex w-fit items-center gap-2 text-sm leading-snug font-medium select-none group-data-[disabled=true]/field:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 has-checked:border-primary has-checked:bg-primary/5 dark:has-checked:bg-primary/10';
+  'cn-label cn-field-label group/field-label peer/field-label flex w-fit items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col';
 
 /** Field title: label-styled text that is not a `<label>` (a choice card's heading). */
 export const fieldTitleClass = (): string =>
-  'flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50';
+  'cn-field-title flex w-fit items-center';
 
 /** Field description: the muted helper text under (or beside) the control. */
 export const fieldDescriptionClass = (): string =>
-  'text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5 [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary';
+  'cn-field-description leading-normal font-normal group-has-data-horizontal/field:text-balance last:mt-0 nth-last-2:-mt-1 [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary';
 
 /** Field error: the inline validation message. Give it an id the control's aria-describedby lists. */
-export const fieldErrorClass = (): string => 'text-sm font-normal text-destructive';
+export const fieldErrorClass = (): string => 'cn-field-error font-normal';
 
 /**
  * Field separator: a horizontal rule between fields, drawn by the element's own
@@ -156,8 +158,8 @@ export const fieldErrorClass = (): string => 'text-sm font-normal text-destructi
  * span.
  */
 export const fieldSeparatorClass = (): string =>
-  'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 before:absolute before:inset-x-0 before:top-1/2 before:h-px before:bg-border';
+  'cn-field-separator relative before:absolute before:inset-x-0 before:top-1/2 before:h-px before:bg-border';
 
 /** Field separator content: the text on the separator line (`or`, a section name). */
 export const fieldSeparatorContentClass = (): string =>
-  'relative mx-auto block w-fit bg-background px-2 text-muted-foreground';
+  'cn-field-separator-content relative mx-auto block w-fit bg-background';

package/packages/registry/components/floating.ts

@@ -0,0 +1,124 @@
+/**
+ * Floating placement: positions a panel beside the element that opened it.
+ * Tier-2 support module. The kit's overlays that measure their own placement
+ * (tooltip, hover card, the dropdown, context and menubar menus, select,
+ * combobox) import `positionFloating` from here, and so does a hand-built
+ * popover that wants measured placement.
+ *
+ * It is its own module because it reads the window and the elements' boxes,
+ * which is browser code. Kept beside the popover's class helpers, it would make
+ * every page importing `popoverContentClass` ship to the browser whole, the
+ * same reason `cn()` and the DOM helpers are separate modules.
+ */
+import type { PopoverSide, PopoverAlign } from './popover.ts';
+
+/**
+ * Places `content` beside `trigger`, flipping to the opposite side when it
+ * does not fit, and keeps it 8px inside the viewport.
+ *
+ * `radix` names the component the way Radix does (`dropdown-menu`,
+ * `tooltip`), and makes this set the variables Radix's positioner sets on the
+ * panel, which shadcn's classes read: `--radix-<name>-trigger-width` /
+ * `-height`, `--radix-<name>-content-available-width` / `-height` and
+ * `--radix-<name>-content-transform-origin`. Without them a class such as
+ * `w-(--radix-dropdown-menu-trigger-width)` resolves to nothing, and a fixed
+ * panel with no width stretches across the viewport.
+ */
+export function positionFloating(
+  trigger: HTMLElement,
+  content: HTMLElement,
+  opts: {
+    side?: PopoverSide;
+    align?: PopoverAlign;
+    sideOffset?: number;
+    alignOffset?: number;
+    radix?: string;
+  } = {},
+): void {
+  const side = opts.side ?? 'bottom';
+  const align = opts.align ?? 'center';
+  const sideOffset = opts.sideOffset ?? 4;
+  const alignOffset = opts.alignOffset ?? 0;
+  const tr = trigger.getBoundingClientRect();
+  const vars = opts.radix ? `--radix-${opts.radix}` : '';
+  // The trigger's size first: a panel sized from it can only be measured
+  // once it is set.
+  if (vars) {
+    content.style.setProperty(`${vars}-trigger-width`, `${tr.width}px`);
+    content.style.setProperty(`${vars}-trigger-height`, `${tr.height}px`);
+  }
+  const cr = content.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  let top = 0;
+  let left = 0;
+  let actualSide = side;
+
+  const fitsBottom = tr.bottom + sideOffset + cr.height <= vh;
+  const fitsTop = tr.top - sideOffset - cr.height >= 0;
+  const fitsRight = tr.right + sideOffset + cr.width <= vw;
+  const fitsLeft = tr.left - sideOffset - cr.width >= 0;
+
+  if (side === 'bottom' && !fitsBottom && fitsTop) actualSide = 'top';
+  else if (side === 'top' && !fitsTop && fitsBottom) actualSide = 'bottom';
+  else if (side === 'right' && !fitsRight && fitsLeft) actualSide = 'left';
+  else if (side === 'left' && !fitsLeft && fitsRight) actualSide = 'right';
+
+  if (actualSide === 'bottom') top = tr.bottom + sideOffset;
+  else if (actualSide === 'top') top = tr.top - sideOffset - cr.height;
+  else if (actualSide === 'right' || actualSide === 'left') {
+    if (align === 'start') top = tr.top;
+    else if (align === 'end') top = tr.bottom - cr.height;
+    else top = tr.top + (tr.height - cr.height) / 2;
+  }
+
+  if (actualSide === 'right') left = tr.right + sideOffset;
+  else if (actualSide === 'left') left = tr.left - sideOffset - cr.width;
+  else {
+    if (align === 'start') left = tr.left;
+    else if (align === 'end') left = tr.right - cr.width;
+    else left = tr.left + (tr.width - cr.width) / 2;
+  }
+
+  // alignOffset shifts the popover along the align axis. For align='start',
+  // positive shifts AWAY from the start edge; align='end' reverses; center
+  // is a no-op. Axis is perpendicular to the chosen side.
+  if (align !== 'center' && alignOffset !== 0) {
+    const dir = align === 'start' ? 1 : -1;
+    if (actualSide === 'top' || actualSide === 'bottom') {
+      left += dir * alignOffset;
+    } else {
+      top += dir * alignOffset;
+    }
+  }
+
+  left = Math.max(8, Math.min(left, vw - cr.width - 8));
+  top = Math.max(8, Math.min(top, vh - cr.height - 8));
+
+  content.style.top = `${top}px`;
+  content.style.left = `${left}px`;
+  if (vars) {
+    // What Radix's size and transform-origin middleware report, with no
+    // collision padding and no arrow.
+    const availableHeight =
+      actualSide === 'bottom' ? vh - tr.bottom - sideOffset
+        : actualSide === 'top' ? tr.top - sideOffset
+          : vh;
+    const availableWidth =
+      actualSide === 'right' ? vw - tr.right - sideOffset
+        : actualSide === 'left' ? tr.left - sideOffset
+          : vw;
+    const along = align === 'start' ? '0%' : align === 'end' ? '100%' : '50%';
+    const origin =
+      actualSide === 'bottom' ? `${along} 0px`
+        : actualSide === 'top' ? `${along} 100%`
+          : actualSide === 'right' ? `0px ${along}`
+            : `100% ${along}`;
+    content.style.setProperty(`${vars}-content-available-height`, `${Math.max(0, availableHeight)}px`);
+    content.style.setProperty(`${vars}-content-available-width`, `${Math.max(0, availableWidth)}px`);
+    content.style.setProperty(`${vars}-content-transform-origin`, origin);
+  }
+  content.setAttribute('data-side', actualSide);
+  content.setAttribute('data-align', align);
+}

package/packages/registry/components/hover-card.ts

@@ -21,8 +21,9 @@
  *   `side-offset`:  number, default 4. Pixels between trigger and content.
  *   `align-offset`: number, default 0. Pixels of cross-axis shift.
  *
- * Events: none dispatched at present; observe the reflected `open`
- * attribute from CSS or JS.
+ * Events:
+ *   `ui-open-change` on <ui-hover-card>: `{ detail: { open } }` on every open
+ *   and close, shadcn's `onOpenChange`. The `open` attribute is reflected too.
  *
  * Programmatic API on <ui-hover-card>: `.show()` · `.hide()`.
  *
@@ -70,16 +71,18 @@
  * ```
  */
 import { WebComponent, html, prop } from '@webjsdev/core';
-import { ensureId } from '../lib/utils.ts';
+import { cn, ensureId, takeAuthoredClass } from '../lib/utils.ts';
 import { onBeforeCache } from '../lib/dom.ts';
-import { positionFloating, type PopoverSide, type PopoverAlign } from './popover.ts';
+import { positionFloating } from './floating.ts';
+import type { PopoverSide, PopoverAlign } from './popover.ts';
 
 // `fixed m-0` opts out of the UA `[popover]` auto-centering margin so
 // JS-computed top/left from positionFloating lands correctly. shadcn's
-// visual layer sits on top. UA `[popover]:not(:popover-open) {
-// display: none }` handles closed-state hiding.
+// visual layer sits on top. `not-open:hidden` hides a closed panel, which
+// the UA `[popover]:not(:popover-open)` rule cannot do once any author
+// `display` applies (see popoverContentClass).
 export const hoverCardContentClass = (): string =>
-  'fixed z-50 w-64 m-0 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden';
+  'cn-hover-card-content z-50 origin-(--radix-hover-card-content-transform-origin) outline-hidden not-open:hidden';
 
 // --------------------------------------------------------------------------
 // <ui-hover-card>
@@ -314,6 +317,7 @@ export class UiHoverCard extends WebComponent({
     // engines with no Popover API: Escape has to work regardless of that.
     if (this.open) this._bindEscape();
     else this._unbindEscape();
+    this.dispatchEvent(new CustomEvent('ui-open-change', { detail: { open: this.open }, bubbles: true }));
     // Wait one microtask for <ui-hover-card-content>'s inner [popover]
     // element to commit; we drive its showPopover() / hidePopover() and
     // refresh the trigger's aria-expanded.
@@ -352,6 +356,7 @@ export class UiHoverCard extends WebComponent({
       align: (contentHost.getAttribute('align') ?? 'center') as PopoverAlign,
       sideOffset: Number(contentHost.getAttribute('side-offset') ?? 4),
       alignOffset: Number(contentHost.getAttribute('align-offset') ?? 0),
+      radix: this.localName.slice(3),
     });
   }
 }
@@ -419,12 +424,18 @@ UiHoverCardTrigger.register('ui-hover-card-trigger');
 // --------------------------------------------------------------------------
 
 export class UiHoverCardContent extends WebComponent {
+  _authored: string | null = null;
+
+  // shadcn's className on HoverCardContent lands on the card panel (a `w-80`,
+  // say), so the class written on this host moves there, read once at first
+  // render.
   render() {
+    this._authored = takeAuthoredClass(this, null);
     return html`<div
       data-slot="hover-card-content"
       role="dialog"
       popover="manual"
-      class=${hoverCardContentClass()}
+      class=${cn(hoverCardContentClass(), this._authored)}
       @mouseenter=${this._onEnter}
       @mouseleave=${this._onLeave}
       @focusin=${this._onEnter}

package/packages/registry/components/input-group.ts

@@ -0,0 +1,118 @@
+/**
+ * Input group: an input or textarea with addons inside its border (an icon, a
+ * prefix such as "https://", a button, a counter), sharing one focus ring.
+ * Tier-1 class helper; compose with a real `<input>` or `<textarea>`.
+ *
+ * shadcn parity:
+ *   InputGroup                 → inputGroupClass()
+ *   InputGroupAddon (align: inline-start | inline-end | block-start | block-end)
+ *                              → inputGroupAddonClass({ align }), alias inputGroupAddonVariants,
+ *                                plus the same `data-align` on the addon (the styles pad the
+ *                                control beside it by it)
+ *   InputGroupButton (size)    → inputGroupButtonClass({ size }) with buttonClass({ variant })
+ *   InputGroupText             → inputGroupTextClass()
+ *   InputGroupInput / InputGroupTextarea
+ *                              → inputGroupInputClass() / inputGroupTextareaClass()
+ *
+ * The group draws the border and the focus ring, so the control inside drops
+ * its own. Clicking an addon focuses the control through a `<label for>`, with
+ * no script: make the addon a `<label>` pointing at the control's id.
+ *
+ * A11y (required for accessible output): the control still needs its own
+ * accessible name, from a visible `<label for>` outside the group or an
+ * `aria-label` on the control; an addon's text is not its name. A decorative
+ * icon addon takes `aria-hidden="true"`. An addon button is a real
+ * `<button type="button">` with its own name.
+ *
+ * Design tokens used: --input, --ring, --muted-foreground, --destructive.
+ *
+ * @example
+ * ```html
+ * <div class=${inputGroupClass()} data-slot="input-group" role="group">
+ *   <label class=${inputGroupAddonClass()} data-slot="input-group-addon" data-align="inline-start" for="site">https://</label>
+ *   <input class=${inputGroupInputClass()} data-slot="input-group-control" id="site" name="site" aria-label="Website">
+ * </div>
+ * ```
+ */
+import { cn } from '../lib/utils.ts';
+import { inputClass } from './input.ts';
+import { textareaClass } from './textarea.ts';
+import { buttonClass, type ButtonVariant } from './button.ts';
+
+/** Set `data-slot="input-group"` on the element. */
+export function inputGroupClass(): string {
+  return 'group/input-group cn-input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto';
+}
+
+const INPUT_GROUP_ADDON_BASE =
+  'cn-input-group-addon flex cursor-text items-center justify-center select-none';
+
+const INPUT_GROUP_ADDON_ALIGNS = {
+  'inline-start': 'cn-input-group-addon-align-inline-start order-first',
+  'inline-end': 'cn-input-group-addon-align-inline-end order-last',
+  'block-start': 'cn-input-group-addon-align-block-start order-first w-full justify-start',
+  'block-end': 'cn-input-group-addon-align-block-end order-last w-full justify-start',
+} as const;
+
+/** The part, with its variant options. Set its `data-slot` and any `data-variant` / `data-size` to match. */
+export function inputGroupAddonClass(opts: { align?: keyof typeof INPUT_GROUP_ADDON_ALIGNS } = {}): string {
+  return cn(INPUT_GROUP_ADDON_BASE, INPUT_GROUP_ADDON_ALIGNS[opts.align ?? 'inline-start']);
+}
+
+/**
+ * shadcn's name for {@link inputGroupAddonClass}, so shadcn code ports verbatim. Like cva,
+ * it merges a `className` into the result.
+ */
+export function inputGroupAddonVariants(opts: { align?: keyof typeof INPUT_GROUP_ADDON_ALIGNS } & { className?: string } = {}): string {
+  return cn(inputGroupAddonClass(opts), opts.className);
+}
+
+const INPUT_GROUP_BUTTON_BASE =
+  'cn-input-group-button flex items-center shadow-none';
+
+const INPUT_GROUP_BUTTON_SIZES = {
+  xs: 'cn-input-group-button-size-xs',
+  sm: 'cn-input-group-button-size-sm',
+  'icon-xs': 'cn-input-group-button-size-icon-xs',
+  'icon-sm': 'cn-input-group-button-size-icon-sm',
+} as const;
+
+/**
+ * The part, with its variant options. Set its `data-slot` and any `data-variant` / `data-size` to match.
+ *
+ * shadcn's InputGroupButton IS its Button (`variant` defaulting to ghost)
+ * with these classes on top, so the button's own classes come first and the
+ * group's size wins a conflict.
+ */
+export function inputGroupButtonClass(opts: { size?: keyof typeof INPUT_GROUP_BUTTON_SIZES; variant?: ButtonVariant } = {}): string {
+  return cn(buttonClass({ variant: opts.variant ?? 'ghost' }), INPUT_GROUP_BUTTON_BASE, INPUT_GROUP_BUTTON_SIZES[opts.size ?? 'xs']);
+}
+
+/**
+ * shadcn's name for {@link inputGroupButtonClass}, so shadcn code ports verbatim. Like cva,
+ * it merges a `className` into the result.
+ */
+export function inputGroupButtonVariants(opts: { size?: keyof typeof INPUT_GROUP_BUTTON_SIZES; variant?: ButtonVariant } & { className?: string } = {}): string {
+  return cn(inputGroupButtonClass(opts), opts.className);
+}
+
+/** A part with no `data-slot` of its own. */
+export function inputGroupTextClass(): string {
+  return 'cn-input-group-text flex items-center [&_svg]:pointer-events-none';
+}
+
+/**
+ * Set `data-slot="input-group-control"` on the element. shadcn's
+ * InputGroupInput is its Input with these classes on top, so the input's own
+ * base (its `outline-none` and focus treatment included) comes first and the
+ * group's resets win a conflict. Without it a focused control shows the
+ * browser's own outline inside the group's ring.
+ */
+export function inputGroupInputClass(): string {
+  return cn(inputClass(), 'cn-input-group-input flex-1');
+}
+
+/** Set `data-slot="input-group-control"` on the element. The Textarea's classes, then the group's, as shadcn composes it. */
+export function inputGroupTextareaClass(): string {
+  return cn(textareaClass(), 'cn-input-group-textarea flex-1 resize-none');
+}