@mkbabb/glass-ui 6.0.0 → 7.0.0

package/dist/components/sortable-list/composables/touchGate.d.ts

@@ -5,7 +5,7 @@
  * constraint). `acquirePointerCapture` is the optimization layer: a successful
  * `setPointerCapture` routes move/up events to the captured element, but it is
  * NOT the drag's primary path — the document `pointermove`/`pointerup` listeners
- * carry the drag unconditionally (AV.W1.1b). Capture failure is SURFACED (not
+ * carry the drag unconditionally. Capture failure is surfaced rather than
  * swallowed) via the returned boolean + a once-per-process dev warning, so a
  * consumer can observe the degraded-but-correct path.
  */

package/dist/components/sortable-list/composables/transitionTiming.d.ts

@@ -21,7 +21,7 @@ export declare const SOURCE_DRAGGING_CLASS = "is-sortable-dragging";
  *   drop === length      → bottom of last row (DROP_BELOW on last)
  *
  * Two rows adjacent to the insertion line sharing the line visually equals one
- * drawn border (not two) — picking a single row eliminates the prior "doubled
+ * drawn border (not two) — picking a single row prevents a "doubled
  * and wrong" appearance.
  *
  * `rowIndex` is the row's current index in the list; pass `< 0` (not found) to

package/dist/components/status-dot/StatusDot.vue.d.ts

@@ -1,18 +1,15 @@
-import { type HTMLAttributes } from "vue";
-type Variant = "active" | "paused" | "idle" | "error" | "custom";
-type Size = "xs" | "sm" | "md";
+import type { HTMLAttributes } from "vue";
+import type { FeedbackSize, StatusDotState } from "../_shared/feedback";
 type __VLS_Props = {
-    variant?: Variant;
-    color?: string;
-    pulse?: boolean;
-    size?: Size;
+    state?: StatusDotState;
+    size?: FeedbackSize;
+    /** Accessible identity. Omit when adjacent text already names the state. */
     label?: string;
     class?: HTMLAttributes["class"];
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    size: Size;
-    variant: Variant;
-    pulse: boolean;
+    size: FeedbackSize;
+    state: StatusDotState;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/status-dot/index.d.ts

@@ -1 +1,2 @@
 export { default as StatusDot } from "./StatusDot.vue";
+export type { FeedbackSize as StatusDotSize, StatusDotState, } from "../_shared/feedback";

package/dist/components/surface/Surface.vue.d.ts

@@ -1,26 +1,17 @@
 import { type HTMLAttributes } from "vue";
-import { type PrimitiveProps } from "reka-ui";
-import { type Surface as SurfaceKind, type SurfaceTier } from "../_shared/useSurfaceAxis";
-export interface SurfaceProps extends PrimitiveProps {
-    /** The base glass-ladder rung the plate paints over. Default `resting`. */
+import type { Surface as SurfaceAxis, SurfaceTier } from "../_shared/axes";
+import type { PrimitiveProps } from "../_shared/primitive";
+export type SurfaceDecoration = SurfaceAxis;
+export type SurfaceMaterial = "content" | "elevated" | "functional" | "overlay";
+export type SurfaceSpecular = "off" | "subtle" | "full";
+export interface SurfaceProps extends Omit<PrimitiveProps, "asChild"> {
+    material?: SurfaceMaterial;
     tier?: SurfaceTier;
-    /** The surface-decoration rung (the ONE shared axis): `glass` (default, the
-     *  plain tier rung) · `veil` (borderless/rimless text-legibility plate) ·
-     *  `opaque` (the `--glass-level:0` solid-card escape) · `clear` (the
-     *  scrim-coupled maximally-translucent Apple-Clear plate). Resolved through
-     *  `decorationClass()` — the ONE decoration source. */
-    surface?: SurfaceKind;
-    /** The BB.W-DEEP-GLASS opt-in maximal iOS-27 tier (Apple saturate-1.5/blur-16px):
-     *  a `.glass-deep` decoration ON the `floating` base rung. Default `false` — a
-     *  bare plate rides the calm content default. */
+    surface?: SurfaceDecoration;
     deep?: boolean;
-    /** Surface drop shadow via `--shadow-card`. `veil` strips it by design (the
-     *  rimless plate is shadowless). Default `false` (the minimal bare plate). */
     shadow?: boolean;
-    /** The `::after` paper-grain overlay. Default `false`. When off, the grain
-     *  pseudo is hidden (`[&::after]:hidden`) — a scroll pane / cartoon plate opts
-     *  out (the grain conflicts with overflow:auto repaints / the cast). */
     grain?: boolean;
+    specular?: SurfaceSpecular;
     class?: HTMLAttributes["class"];
 }
 declare var __VLS_8: {};
@@ -29,11 +20,12 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<SurfaceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SurfaceProps> & Readonly<{}>, {
     shadow: boolean;
-    as: import("reka-ui").AsTag | import("vue").Component;
-    surface: SurfaceKind;
+    as: import("../_shared/primitive").AsTag | import("vue").Component;
+    surface: SurfaceDecoration;
     deep: boolean;
-    tier: SurfaceTier;
+    material: SurfaceMaterial;
     grain: boolean;
+    specular: SurfaceSpecular;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/surface/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Surface, type SurfaceProps } from "./Surface.vue";
-export { decorationClass, surfaceClass } from "../_shared/useSurfaceAxis";
+export { default as Surface, type SurfaceProps, type SurfaceDecoration, type SurfaceMaterial, type SurfaceSpecular, } from "./Surface.vue";
+export type { SurfaceTier } from "../_shared/axes";

package/dist/components/switch/Switch.vue.d.ts

@@ -1,14 +1,23 @@
-import { type HTMLAttributes } from 'vue';
-import { type SwitchRootProps } from 'reka-ui';
-import { type ControlSize } from '../_shared/useControlSize';
-type __VLS_Props = SwitchRootProps & {
-    class?: HTMLAttributes['class'];
+import { type HTMLAttributes } from "vue";
+import type { ControlSize } from "../_shared/control-size";
+import type { FormFieldProps } from "../_shared/primitive";
+export interface SwitchProps extends FormFieldProps {
+    modelValue?: boolean | null;
+    defaultValue?: boolean;
+    disabled?: boolean;
+    id?: string;
+    value?: string;
+    class?: HTMLAttributes["class"];
     size?: ControlSize;
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (payload: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((payload: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+    invalid?: boolean;
+}
+declare const __VLS_export: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: ControlSize;
+    invalid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/switch/index.d.ts

@@ -1 +1,2 @@
-export { default as Switch } from './Switch.vue';
+export { default as Switch } from "./Switch.vue";
+export type { SwitchProps } from "./Switch.vue";

package/dist/components/switch/styles.css

@@ -0,0 +1 @@
+@layer components { .switch { --switch-height: 1.5rem; --switch-width: 2.75rem; position: relative; display: inline-grid; flex: none; place-items: center; inline-size: var(--switch-width); block-size: var(--switch-height); min-inline-size: var(--touch-target, 2.75rem); min-block-size: var(--touch-target, 2.75rem); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; cursor: pointer; } .switch[data-size="sm"] { --switch-height: 1.25rem; --switch-width: 2.375rem; } .switch[data-size="lg"] { --switch-height: 1.75rem; --switch-width: 3.125rem; } .switch:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); } .switch:focus-visible { outline: none; } .switch__track { display: inline-flex; align-items: center; inline-size: var(--switch-width); block-size: var(--switch-height); padding: 0.0625rem; border-radius: var(--radius-pill); } .switch[data-state="checked"] .switch__track { background-color: var(--control-checked-bg); } .switch[data-invalid] .switch__track { box-shadow: var(--glass-material-rim), var(--glass-shadow-wash), var(--invalid-ring); } .switch:focus-visible .switch__track { box-shadow: var(--glass-material-rim), var(--glass-shadow-wash), var(--focus-ring-shadow); } .switch[data-invalid]:focus-visible .switch__track { box-shadow: var(--glass-material-rim), var(--glass-shadow-wash), var(--focus-ring-shadow), var(--invalid-ring); } .switch__thumb { display: block; inline-size: calc(var(--switch-height) - 0.25rem); block-size: calc(var(--switch-height) - 0.25rem); border-radius: var(--radius-pill); background-color: var(--card); box-shadow: var(--shadow-md), var(--glass-highlight); pointer-events: none; position: relative; z-index: 2; translate: 0; transition: translate var(--spring-snappy-duration) var(--spring-snappy); } .switch[data-state="checked"] .switch__thumb { translate: calc(var(--switch-width) - var(--switch-height)); } .switch:dir(rtl)[data-state="checked"] .switch__thumb { translate: calc(var(--switch-height) - var(--switch-width)); } @media (prefers-reduced-motion: reduce) { .switch__thumb { transition: none; } } @media (forced-colors: active) { .switch:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } } }

package/dist/components/table/Table.vue.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from "vue";
+import { type HTMLAttributes } from "vue";
 type __VLS_Props = {
     class?: HTMLAttributes["class"];
     role?: HTMLAttributes["role"];

package/dist/components/tabs/SegmentedTabs.vue.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes } from "vue";
+import { type TabActivation } from "./composables/useTabRovingFocus";
 import type { Motion } from "../_shared/axes";
 /** The canonical tab/option shape — one descriptor across both materials. */
 export interface SegmentedTabOption {
@@ -7,13 +8,21 @@ export interface SegmentedTabOption {
     icon?: string;
     disabled?: boolean;
     tooltip?: string;
+    /**
+     * The `id` of the tabpanel this option reveals. When set and semantics resolve to
+     * `tabs`, it is emitted as the tab's `aria-controls`, completing the APG
+     * tablist↔tabpanel linkage for consumers that own a panel. Ignored in `toggle`
+     * semantics (a toggle group mutates a shared surface, not a distinct panel).
+     */
+    controls?: string;
 }
-/** The two materials. `pill` (DEFAULT) = the glass-track slider (absorbs the
- *  retired `segmented`); `underline` = the paper ink-hairline rule. */
+/** The two materials: `pill` is the default glass-track slider; `underline` is the paper ink hairline. */
 export type SegmentedTabsVariant = "pill" | "underline";
 /** The interaction semantic, independent of material. `toggle` exposes a
  *  group of pressed buttons; `tabs` exposes a tablist with selected tabs. */
 export type SegmentedTabsSemantics = "toggle" | "tabs";
+/** Whether focus movement also selects. Manual activation waits for Enter/Space. */
+export type SegmentedTabsActivation = TabActivation;
 /** The orientation axis — `horizontal` (default) lays children in a row + tracks
  *  the indicator on the inline axis; `vertical` stacks a column + tracks the
  *  block axis (the vertical underline is the leading-edge ink rail). */
@@ -49,6 +58,8 @@ export interface SegmentedTabsProps {
      * historical mapping: `pill` → `toggle`, `underline` → `tabs`.
      */
     semantics?: SegmentedTabsSemantics;
+    /** Selection follows focus by default; manual mode activates with Enter/Space. */
+    activation?: SegmentedTabsActivation;
     /**
      * Orientation — `horizontal` (default) or `vertical`. Axis-derived on the
      * one indicator engine.
@@ -56,21 +67,17 @@ export interface SegmentedTabsProps {
     orientation?: SegmentedTabsOrientation;
     /**
      * Responsive collapse — below the breakpoint the strip becomes a `<Select>`.
-     * `true` uses defaults; an object tunes the breakpoint / desktop subset /
+     * `true` uses defaults; an object tunes the breakpoint, desktop subset, and
      * accessible name.
      */
     responsive?: boolean | SegmentedTabsResponsive;
     /**
-     * BH.W-MOTION-AXIS — the ONE motion-weight axis (the `draggable` boolean's
-     * clean-break successor). `full` (default) arms the LIQUID TAB: the `pill` indicator
-     * is a physical lozenge you can GRAB and PULL — it follows the finger ~1:1, squishes
-     * on drag velocity, and flings to the nearest tab on release (`useDragMorph`),
-     * ADDITIVE OVER the click/keyboard path (which stays byte-identical + fully operable
-     * — the drag is a pointer ENHANCEMENT, never the sole selection mechanism, WCAG
-     * 2.1.1). `reduced`/`off` opt DOWN to the click-only strip (the drag unbinds; the
-     * roving-tabindex keyboard contract stays — motion off, meaning never off). No-op on
-     * `underline` (the ink hairline has no indicator element to deform). PRM forces
-     * `full → reduced` regardless (a11y absolute).
+     * Motion weight. `full` (default) lets the pill indicator follow a pointer,
+     * squash with drag velocity, and settle to the nearest tab. Drag supplements the
+     * fully operable click and keyboard path; it is never the sole selection method.
+     * `reduced` and `off` use the click-only strip while preserving roving focus.
+     * Underline has no deformable indicator. Reduced-motion preference forces
+     * `full → reduced`.
      */
     motion?: Motion;
     class?: HTMLAttributes["class"];
@@ -100,6 +107,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     orientation: SegmentedTabsOrientation;
     variant: SegmentedTabsVariant;
     responsive: boolean | SegmentedTabsResponsive;
+    activation: SegmentedTabsActivation;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/tabs/composables/useTabDragMorph.d.ts

@@ -1,11 +1,11 @@
 import type { ComputedRef, Ref } from "vue";
-import { type UseDragMorphReturn } from "../../../composables/motion/useDragMorph";
+import { type UseDragMorphReturn } from "../../../composables/motion/morph/useDragMorph";
 import type { SegmentedTabOption } from "../SegmentedTabs.vue";
 /**
- * Package-private composable for `SegmentedTabs.vue` — BB.W-DRAG-MORPH, the LIQUID
- * TAB (the `:draggable` axis). Carved out of the SFC at BB.W-CARVE4 to hold the
- * no-god-module bound, mirroring the `useTabIndicator` colocation sibling; the SFC
- * IMPORTS it and binds `drag.dragStyle`/`drag.dragging` in its template.
+ * Package-private composable for `SegmentedTabs.vue` — the LIQUID
+ * TAB (the `:draggable` axis). A composable held under the
+ * no-god-module bound, beside the `useTabIndicator` colocation sibling; the SFC
+ * IMPORTS it and binds only its state; the shared morph owner writes geometry.
  *
  * When `:draggable`, the `pill` indicator is wired to `useDragMorph` with the snap
  * targets resolved off the CENTER-ANCHORED button geometry (the SAME measure
@@ -36,7 +36,7 @@ export interface UseTabDragMorphParams {
 export interface UseTabDragMorphReturn {
     /** True when the drag is live (the `pill` material + the `:draggable` prop). */
     dragEnabled: ComputedRef<boolean>;
-    /** The `useDragMorph` handle (the SFC binds `dragStyle`/`dragging`). */
+    /** The `useDragMorph` handle (the SFC binds its gesture state). */
     drag: UseDragMorphReturn;
 }
 export declare function useTabDragMorph(params: UseTabDragMorphParams): UseTabDragMorphReturn;

package/dist/components/tabs/composables/useTabResponsive.d.ts

@@ -1,18 +1,17 @@
 import type { ComputedRef, Ref } from "vue";
 import type { SegmentedTabOption, SegmentedTabsResponsive } from "../SegmentedTabs.vue";
 /**
- * Package-private composable for `SegmentedTabs.vue` — BG.W-COLOCATE (the WS4
- * roving-focus/responsive carve; ratchet-drain #13). The responsive-collapse concern
- * (the `<Select>`-below-the-breakpoint fold) lives here, carved out of the SFC to hold
+ * Package-private composable for `SegmentedTabs.vue` (the
+ * roving-focus/responsive carve). The responsive-collapse concern
+ * (the `<Select>`-below-the-breakpoint fold) lives here, held under
  * the no-god-module bound — the `useTabIndicator`/`useTabDragMorph` colocation-sibling
  * pattern. The SFC IMPORTS it and binds `stripValue`/`stripOptions`/`showMobileSelect`
  * in its template + feeds `stripValue`/`stripOptions` to the indicator/roving concerns.
  *
  * Owns the `matchMedia((min-width: <breakpoint>))` lifecycle END-TO-END (the
  * `onMounted`/`onBeforeUnmount` wiring lives HERE — a composable is a legitimate
- * lifecycle-hook owner), so the SFC never re-declares the `mql` listener. Byte-behaviour
- * identical to the prior inline block (the SSR/desktop-first default, the mobile-only
- * model fall-back, the accessible name resolution).
+ * lifecycle-hook owner), so the SFC never re-declares the `mql` listener. It owns the SSR/desktop-first
+ * default, the mobile-only model fall-back, and the accessible name resolution.
  */
 export interface UseTabResponsiveParams {
     /** The `:responsive` prop — `false` | `true` | a tuning object. */

package/dist/components/tabs/composables/useTabRovingFocus.d.ts

@@ -1,7 +1,7 @@
 import type { ComputedRef, Ref } from "vue";
 /**
- * The minimal roving option shape — the machine reads ONLY `value` + `disabled`
- * (BI.W-DOCK-CONTROLS decoupled it from `SegmentedTabOption` so the shared
+ * The minimal roving option shape reads only `value` + `disabled`, decoupling it
+ * from `SegmentedTabOption` so the shared
  * headless `useSelectionGroup` can compose it VERBATIM over its generic option
  * type). Any richer option (the tabs' `SegmentedTabOption`) is structurally
  * assignable.
@@ -10,23 +10,21 @@ export interface RovingSelectionOption {
     value: string;
     disabled?: boolean;
 }
+export type TabActivation = "automatic" | "manual";
 /**
- * Package-private composable for `SegmentedTabs.vue` — BG.W-COLOCATE (the WS4
- * roving-focus/responsive carve; ratchet-drain #13). The WAI-ARIA tablist/toolbar
- * roving-tabindex keyboard machine lives here, carved out of the SFC to hold the
- * no-god-module bound. BI.W-DOCK-CONTROLS composes it VERBATIM inside the shared
+ * Package-private composable for `SegmentedTabs.vue` (the
+ * roving-focus/responsive carve). The WAI-ARIA tablist/toolbar
+ * roving-tabindex keyboard machine lives here, held under the
+ * no-god-module bound. It is composed VERBATIM inside the shared
  * headless `useSelectionGroup` (the dock IS SegmentedTabs/ToggleGroup wearing
  * chrome — ONE roving machine, never re-forked). The SFC IMPORTS it and binds
  * `:tabindex="rovingTabindex(idx)"` + `@keydown="onStripKeydown"` in its template.
  *
- * EXACTLY ONE tab in the focus order (the active tab `tabindex="0"`, the rest `-1`);
- * the arrow keys move focus + activate (selection-follows-focus). The arrow AXIS is
- * derived off `isVertical` (ArrowRight/Left horizontal, ArrowDown/Up vertical),
- * Home/End jump, wrapping at the ends, skipping disabled. This is the keyboard contract
- * EVERY strip owes — NOT gated on `:draggable` (a draggable tab that is keyboard-broken
- * is the worse failure). The keyboard activation IS a selection → the SFC's `select(...)`
- * path (with its `squishOnTravel`), passed in as a callback (byte-behaviour identical to
- * the prior inline block).
+ * EXACTLY ONE tab remains in the focus order. Automatic activation keeps that tabstop
+ * on the selection; manual activation moves it independently and commits only on
+ * Enter/Space. The arrow axis derives from `isVertical`, Home/End jump, navigation
+ * wraps, and disabled options are skipped. This keyboard contract is never gated by
+ * pointer motion.
  */
 export interface UseTabRovingFocusParams {
     /** The options the strip renders (index-aligned to `buttonRefs`). */
@@ -35,15 +33,17 @@ export interface UseTabRovingFocusParams {
     stripValue: ComputedRef<string | undefined>;
     /** True for the vertical (block-axis) orientation — flips the arrow axis. */
     isVertical: ComputedRef<boolean>;
+    /** Automatic selection-follows-focus or manual Enter/Space activation. */
+    activation: ComputedRef<TabActivation>;
     /** Per-option button refs, index-aligned to `stripOptions`. */
     buttonRefs: Ref<HTMLElement[]>;
     /** The SFC's selection handler (focus-follows activation → model write + squish). */
     select: (value: string, idx: number) => void;
 }
 export interface UseTabRovingFocusReturn {
-    /** The active index in the rendered strip — the ONE tabstop. */
+    /** The selected index in the rendered strip. */
     activeIndex: ComputedRef<number>;
-    /** The roving tabindex for option `idx`: `0` for the active tab, `-1` otherwise. */
+    /** The roving tabindex for option `idx`: exactly one `0`, all others `-1`. */
     rovingTabindex: (idx: number) => number;
     /** The strip-root keydown handler (axis-derived arrows + Home/End). */
     onStripKeydown: (e: KeyboardEvent) => void;

package/dist/components/tabs/constants.d.ts

@@ -1 +1 @@
-export { DEFAULT_INDICATOR_MAX_STRETCH, DEFAULT_INDICATOR_BLOB_MAX, INDICATOR_RELEASE_AT_ARRIVAL, } from "../../composables/motion/useSelectionIndicator";
+export { DEFAULT_INDICATOR_MAX_STRETCH, DEFAULT_INDICATOR_BLOB_MAX, INDICATOR_RELEASE_AT_ARRIVAL, } from "../../composables/motion/morph/useSelectionIndicator";

package/dist/components/tabs/index.d.ts

@@ -1,2 +1,2 @@
 export { default as SegmentedTabs } from "./SegmentedTabs.vue";
-export type { SegmentedTabOption, SegmentedTabsVariant, SegmentedTabsSemantics, SegmentedTabsOrientation, SegmentedTabsProps, SegmentedTabsResponsive, } from "./SegmentedTabs.vue";
+export type { SegmentedTabOption, SegmentedTabsVariant, SegmentedTabsSemantics, SegmentedTabsActivation, SegmentedTabsOrientation, SegmentedTabsProps, SegmentedTabsResponsive, } from "./SegmentedTabs.vue";

package/dist/components/tabs/styles/drag.css

@@ -1 +1 @@
-.glass-drag-grabbable { cursor: grab; touch-action: none; } .glass-drag-lift { cursor: grabbing; will-change: transform; } .segmented-tabs:not(.segmented-tabs--underline):has( .segmented-indicator.glass-drag-grabbable ) .segmented-tab[aria-pressed="true"] { pointer-events: none; } .segmented-indicator.glass-drag-lift { z-index: 30; } .segmented-tabs[data-eyeglass] { --eyeglass-settled: 0.84; --eyeglass-proud: 1.12; --eyeglass-track-blur: var(--glass-blur-floating); -webkit-backdrop-filter: var(--eyeglass-track-blur); backdrop-filter: var(--eyeglass-track-blur); -webkit-backdrop-filter: var(--eyeglass-track-blur); } .segmented-tabs[data-eyeglass] .segmented-indicator__plate { --eyeglass-y: calc( var(--eyeglass-settled) + var(--eyeglass-live-t) * (var(--eyeglass-proud) - var(--eyeglass-settled)) ); } @media (prefers-reduced-motion: reduce) { .segmented-tabs[data-eyeglass] .segmented-indicator__plate { --eyeglass-y: 1; } } @supports (backdrop-filter: url("#glass-refract")) { .segmented-tabs[data-eyeglass] .segmented-indicator__plate.glass-lens { -webkit-backdrop-filter: var(--glass-blur-floating) var(--glass-refract-filter); backdrop-filter: var(--glass-blur-floating) var(--glass-refract-filter); } } .segmented-tabs[data-eyeglass] .segmented-tab[aria-pressed="true"] svg { color: var(--tab-selected-ink, var(--foreground)); }
+.glass-drag-grabbable { cursor: grab; touch-action: none; } .glass-drag-lift { cursor: grabbing; will-change: transform; } .segmented-tabs:not(.segmented-tabs--underline):has( .segmented-indicator.glass-drag-grabbable ) .segmented-tab[aria-pressed="true"] { pointer-events: none; } .segmented-indicator.glass-drag-lift { z-index: 30; }

package/dist/components/tabs/styles/segmented.css

@@ -1 +1 @@
-.segmented-tabs { --bouncy-track-trim: 0.1875rem; --bouncy-slider-radius: var(--radius-tab); --bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim)); --stretch: 1; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--bouncy-track-trim); border-radius: var(--bouncy-track-radius); } .segmented-tabs--vertical { display: inline-flex; flex-direction: column; grid-auto-flow: unset; grid-auto-columns: unset; align-items: stretch; --bouncy-slider-radius: var(--radius-strip); --radius-ctx: var(--bouncy-track-radius); --radius-inset: var(--bouncy-track-trim); } .segmented-tabs--vertical .segmented-indicator { border-radius: max( var(--radius-floor), calc(var(--radius-ctx) - var(--radius-inset)) ); } @media (min-width: 640px) { .segmented-tabs { --bouncy-track-trim: 0.25rem; } } .segmented-indicator { position: absolute; z-index: 0; inset-block: var(--bouncy-track-trim); border-radius: var(--bouncy-slider-radius); transform-origin: center; scale: calc(var(--tab-blob, 1) * var(--stretch)) calc(var(--tab-blob, 1) / var(--stretch)); } .segmented-indicator__plate { position: absolute; inset: 0; border-radius: inherit; transform-origin: center; transform: scaleY(var(--eyeglass-y, 1)); } .segmented-indicator { isolation: isolate; } @supports (mix-blend-mode: plus-lighter) { .segmented-indicator::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( 120% 140% at 50% 50%, color-mix(in srgb, var(--glass-accent, transparent) 55%, transparent), transparent 70% ); mix-blend-mode: plus-lighter; opacity: var(--tab-flood-t, 0); } } .segmented-tabs--vertical .segmented-indicator { inset-block: auto; inset-inline: var(--bouncy-track-trim); scale: calc(var(--tab-blob, 1) / var(--stretch)) calc(var(--tab-blob, 1) * var(--stretch)); } @media (prefers-reduced-motion: no-preference) { .segmented-indicator { transition: scale var(--tab-indicator-duration) var(--ease-cartoon-punch); } } .segmented-indicator--js { transition: transform var(--tab-indicator-duration) var(--spring-eyeglass), width var(--tab-indicator-duration) var(--spring-eyeglass), height var(--tab-indicator-duration) var(--spring-eyeglass), scale var(--tab-indicator-duration) var(--spring-eyeglass), opacity var(--duration-fast) ease; } @media (min-width: 640px) { .segmented-indicator { inset-block: 0.25rem; } .segmented-tabs--vertical .segmented-indicator { inset-block: auto; inset-inline: 0.25rem; } } .segmented-tab { position: relative; z-index: 10; border: none; background: none; font-weight: 500; cursor: pointer; white-space: nowrap; padding: 0.25rem 0.625rem; border-radius: 0.3125rem; font: inherit; font-size: 0.8125rem; color: var(--muted-foreground); transition: color var(--duration-fast) ease, scale var(--spring-snappy-duration) var(--spring-snappy) 60ms; scale: 1; translate: 0; } @media (min-width: 640px) { .segmented-tab { padding: 0.3125rem 0.75rem; font-size: 0.875rem; } } .segmented-tab[aria-pressed="true"], .segmented-tab[aria-selected="true"] { color: var(--foreground); } .segmented-tabs:not(.segmented-tabs--underline) .segmented-tab[aria-pressed="true"] { scale: calc(1 + 0.06 * var(--motion-weight)); } .segmented-tab.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; filter: blur(0.5px); } .segmented-tabs--underline { display: flex; grid-auto-flow: unset; grid-auto-columns: unset; gap: 0.25rem; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; --paper-ink-mark-weight: 2px; --paper-ink-mark-color: var(--foreground); } .segmented-tabs--underline.segmented-tabs--vertical { flex-direction: column; align-items: stretch; } .segmented-tabs--underline .segmented-tab[aria-selected="true"] { anchor-name: --gl-tab-active; } .segmented-tabs--underline::before { content: ""; position: absolute; position-anchor: --gl-tab-active; inset-block-start: calc(anchor(bottom) - var(--paper-ink-mark-weight, 2px)); inset-inline-start: anchor(left); inset-inline-end: anchor(right); block-size: var(--paper-ink-mark-weight, 2px); background: var(--paper-ink-mark-color, var(--foreground)); border-radius: var(--radius-sm); transform-origin: center; scale: var(--stretch) 1; } .segmented-tabs--underline.segmented-tabs--vertical::before { inset-block-start: anchor(top); inset-block-end: anchor(bottom); inset-inline-start: calc(anchor(left) - var(--paper-ink-mark-weight, 2px)); inset-inline-end: auto; block-size: auto; inline-size: var(--paper-ink-mark-weight, 2px); scale: 1 var(--stretch); } @media (prefers-reduced-motion: no-preference) { .segmented-tabs--underline::before { transition: inset var(--tab-indicator-duration) var(--spring-snappy), scale var(--tab-indicator-duration) var(--spring-snappy); } } @supports not (position-anchor: --x) { .segmented-tabs--underline::before { display: none; } .segmented-tabs--underline .segmented-tab[aria-selected="true"] { border-bottom: var(--paper-ink-mark-weight, 2px) solid var(--foreground); } .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab[aria-selected="true"] { border-bottom: none; border-inline-start: var(--paper-ink-mark-weight, 2px) solid var(--foreground); } } .segmented-tabs--underline .segmented-tab { padding: 0.375rem 0.75rem; font-size: var(--type-subheading); letter-spacing: var(--type-tracking-display); border-radius: 0.25rem; transition: color var(--duration-fast) ease; } .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab { text-align: start; } .segmented-tabs--underline .segmented-tab:hover { color: color-mix(in oklab, var(--foreground) 70%, transparent); }
+.segmented-tabs { --bouncy-track-trim: 0.1875rem; --bouncy-slider-radius: var(--radius-tab); --bouncy-track-radius: calc(var(--bouncy-slider-radius) + var(--bouncy-track-trim)); --stretch: 1; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--bouncy-track-trim); border-radius: var(--bouncy-track-radius); } .segmented-tabs--vertical { display: inline-flex; flex-direction: column; grid-auto-flow: unset; grid-auto-columns: unset; align-items: stretch; --bouncy-slider-radius: var(--radius-strip); --radius-ctx: var(--bouncy-track-radius); --radius-inset: var(--bouncy-track-trim); } .segmented-tabs--vertical .segmented-indicator { border-radius: max( var(--radius-floor), calc(var(--radius-ctx) - var(--radius-inset)) ); } @media (min-width: 640px) { .segmented-tabs { --bouncy-track-trim: 0.25rem; } } .segmented-indicator { position: absolute; z-index: 0; border-radius: var(--bouncy-slider-radius); transform-origin: center; scale: calc(var(--tab-blob, 1) * var(--stretch)) calc(var(--tab-blob, 1) / var(--stretch)); } .segmented-tabs--vertical .segmented-indicator { scale: calc(var(--tab-blob, 1) / var(--stretch)) calc(var(--tab-blob, 1) * var(--stretch)); } @media (prefers-reduced-motion: no-preference) { .segmented-indicator { transition: scale var(--tab-indicator-duration) var(--ease-cartoon-punch); } } .segmented-indicator--js { transition: translate var(--tab-indicator-duration) var(--spring-snappy), width var(--tab-indicator-duration) var(--spring-snappy), height var(--tab-indicator-duration) var(--spring-snappy), scale var(--tab-indicator-duration) var(--spring-snappy), opacity var(--duration-fast) ease; } .segmented-tab { position: relative; z-index: 10; border: none; background: none; font-weight: 500; cursor: pointer; white-space: nowrap; padding: 0.25rem 0.625rem; border-radius: 0.3125rem; font: inherit; font-size: 0.8125rem; color: var(--muted-foreground); transition: color var(--duration-fast) ease; scale: 1; translate: 0; } @media (min-width: 640px) { .segmented-tab { padding: 0.3125rem 0.75rem; font-size: 0.875rem; } } .segmented-tab[aria-pressed="true"], .segmented-tab[aria-selected="true"] { color: var(--foreground); } .segmented-tab.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; filter: blur(0.5px); } .segmented-tabs--underline { display: flex; grid-auto-flow: unset; grid-auto-columns: unset; gap: 0.25rem; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; --paper-ink-mark-weight: 2px; --paper-ink-mark-color: var(--foreground); } .segmented-tabs--underline.segmented-tabs--vertical { flex-direction: column; align-items: stretch; } .segmented-tabs--underline .segmented-tab[aria-selected="true"] { anchor-name: --gl-tab-active; } .segmented-tabs--underline::before { content: ""; position: absolute; position-anchor: --gl-tab-active; inset-block-start: calc(anchor(bottom) - var(--paper-ink-mark-weight, 2px)); inset-inline-start: anchor(left); inset-inline-end: anchor(right); block-size: var(--paper-ink-mark-weight, 2px); background: var(--paper-ink-mark-color, var(--foreground)); border-radius: var(--radius-sm); transform-origin: center; scale: var(--stretch) 1; } .segmented-tabs--underline.segmented-tabs--vertical::before { inset-block-start: anchor(top); inset-block-end: anchor(bottom); inset-inline-start: calc(anchor(left) - var(--paper-ink-mark-weight, 2px)); inset-inline-end: auto; block-size: auto; inline-size: var(--paper-ink-mark-weight, 2px); scale: 1 var(--stretch); } @media (prefers-reduced-motion: no-preference) { .segmented-tabs--underline::before { transition: inset var(--tab-indicator-duration) var(--spring-snappy), scale var(--tab-indicator-duration) var(--spring-snappy); } } @supports not (position-anchor: --x) { .segmented-tabs--underline::before { display: none; } .segmented-tabs--underline .segmented-tab[aria-selected="true"] { border-bottom: var(--paper-ink-mark-weight, 2px) solid var(--foreground); } .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab[aria-selected="true"] { border-bottom: none; border-inline-start: var(--paper-ink-mark-weight, 2px) solid var(--foreground); } } .segmented-tabs--underline .segmented-tab { padding: 0.375rem 0.75rem; font-size: var(--type-subheading); letter-spacing: var(--type-tracking-display); border-radius: 0.25rem; transition: color var(--duration-fast) ease; } .segmented-tabs--underline.segmented-tabs--vertical .segmented-tab { text-align: start; } .segmented-tabs--underline .segmented-tab:hover { color: color-mix(in oklab, var(--foreground) 70%, transparent); }

package/dist/components/tags-input/TagsInput.vue.d.ts

@@ -1,22 +1,35 @@
-import { type HTMLAttributes } from 'vue';
-import { type TagsInputRootProps } from 'reka-ui';
-type __VLS_Props = TagsInputRootProps & {
-    class?: HTMLAttributes['class'];
-};
+import { type HTMLAttributes } from "vue";
+import type { Direction, FormFieldProps } from "../_shared/primitive";
+export interface TagsInputProps extends FormFieldProps {
+    modelValue?: string[] | null;
+    defaultValue?: string[];
+    addOnPaste?: boolean;
+    addOnTab?: boolean;
+    addOnBlur?: boolean;
+    duplicate?: boolean;
+    disabled?: boolean;
+    delimiter?: string | RegExp;
+    dir?: Direction;
+    max?: number;
+    id?: string;
+    /** App-driven invalid state; duplicate attempts still use Reka's invalid event. */
+    invalid?: boolean;
+    class?: HTMLAttributes["class"];
+}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (payload: import("reka-ui").AcceptableInputValue[]) => any;
-    invalid: (payload: import("reka-ui").AcceptableInputValue) => any;
-    addTag: (payload: import("reka-ui").AcceptableInputValue) => any;
-    removeTag: (payload: import("reka-ui").AcceptableInputValue) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onUpdate:modelValue"?: ((payload: import("reka-ui").AcceptableInputValue[]) => any) | undefined;
-    onInvalid?: ((payload: import("reka-ui").AcceptableInputValue) => any) | undefined;
-    onAddTag?: ((payload: import("reka-ui").AcceptableInputValue) => any) | undefined;
-    onRemoveTag?: ((payload: import("reka-ui").AcceptableInputValue) => any) | undefined;
+declare const __VLS_base: import("vue").DefineComponent<TagsInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    invalid: (value: string) => any;
+    "update:modelValue": (value: string[]) => any;
+    addTag: (value: string) => any;
+    removeTag: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<TagsInputProps> & Readonly<{
+    onInvalid?: ((value: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    onAddTag?: ((value: string) => any) | undefined;
+    onRemoveTag?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/tags-input/TagsInputInput.vue.d.ts

@@ -1,8 +1,10 @@
-import { type HTMLAttributes } from 'vue';
-import { type TagsInputInputProps } from 'reka-ui';
-type __VLS_Props = TagsInputInputProps & {
-    class?: HTMLAttributes['class'];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import { type HTMLAttributes } from "vue";
+export interface TagsInputInputProps {
+    placeholder?: string;
+    autoFocus?: boolean;
+    maxLength?: number;
+    class?: HTMLAttributes["class"];
+}
+declare const __VLS_export: import("vue").DefineComponent<TagsInputInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagsInputInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tags-input/TagsInputItem.vue.d.ts

@@ -1,13 +1,14 @@
-import { type HTMLAttributes } from 'vue';
-import { type TagsInputItemProps } from 'reka-ui';
-type __VLS_Props = TagsInputItemProps & {
-    class?: HTMLAttributes['class'];
-};
-declare var __VLS_8: {};
+import type { HTMLAttributes } from "vue";
+export interface TagsInputItemProps {
+    value: string;
+    disabled?: boolean;
+    class?: HTMLAttributes["class"];
+}
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<TagsInputItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagsInputItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tags-input/TagsInputItemDelete.vue.d.ts

@@ -1,13 +1,12 @@
-import { type HTMLAttributes } from 'vue';
-import { type TagsInputItemDeleteProps } from 'reka-ui';
-type __VLS_Props = TagsInputItemDeleteProps & {
-    class?: HTMLAttributes['class'];
-};
+import { type HTMLAttributes } from "vue";
+export interface TagsInputItemDeleteProps {
+    class?: HTMLAttributes["class"];
+}
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<TagsInputItemDeleteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagsInputItemDeleteProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tags-input/TagsInputItemText.vue.d.ts

@@ -1,8 +1,7 @@
-import { type HTMLAttributes } from 'vue';
-import { type TagsInputItemTextProps } from 'reka-ui';
-type __VLS_Props = TagsInputItemTextProps & {
-    class?: HTMLAttributes['class'];
-};
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+import type { HTMLAttributes } from "vue";
+export interface TagsInputItemTextProps {
+    class?: HTMLAttributes["class"];
+}
+declare const __VLS_export: import("vue").DefineComponent<TagsInputItemTextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TagsInputItemTextProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/tags-input/context.d.ts

@@ -0,0 +1,5 @@
+import type { ComputedRef, InjectionKey } from "vue";
+export interface TagsInputContext {
+    invalid: ComputedRef<boolean>;
+}
+export declare const tagsInputContextKey: InjectionKey<TagsInputContext>;

package/dist/components/tags-input/index.d.ts

@@ -1,5 +1,5 @@
-export { default as TagsInput } from './TagsInput.vue';
-export { default as TagsInputInput } from './TagsInputInput.vue';
-export { default as TagsInputItem } from './TagsInputItem.vue';
-export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue';
-export { default as TagsInputItemText } from './TagsInputItemText.vue';
+export { default as TagsInput, type TagsInputProps } from "./TagsInput.vue";
+export { default as TagsInputInput, type TagsInputInputProps, } from "./TagsInputInput.vue";
+export { default as TagsInputItem, type TagsInputItemProps } from "./TagsInputItem.vue";
+export { default as TagsInputItemDelete, type TagsInputItemDeleteProps, } from "./TagsInputItemDelete.vue";
+export { default as TagsInputItemText, type TagsInputItemTextProps, } from "./TagsInputItemText.vue";

package/dist/components/tags-input/styles.css

@@ -0,0 +1 @@
+@layer components { .tags-input { display: flex; min-height: var(--control-h-md); flex-wrap: wrap; align-items: center; gap: 0.5rem; border-radius: var(--radius-field); padding: 0.5rem 0.75rem; font-size: var(--control-text); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .tags-input:where([aria-invalid="true"], [data-invalid]) { border-color: var(--destructive); box-shadow: var(--invalid-ring); } .tags-input:focus-within:not([aria-invalid="true"], [data-invalid]) { border-color: var(--color-accent-opaque, var(--focus-ring-color)); box-shadow: var(--focus-ring-shadow); } .tags-input__input { min-width: 8rem; min-height: 1.5rem; flex: 1; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; } .tags-input__input::placeholder { color: var(--surface-tint-35); } .tags-input__item { display: inline-flex; outline: none; } .tags-input__item[data-state="active"] .tags-input__chip { box-shadow: var(--focus-ring-shadow); } .tags-input__delete { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: 1.5rem; block-size: 1.5rem; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: inherit; cursor: pointer; } .tags-input__delete:disabled { cursor: not-allowed; } .tags-input__text { min-width: 0; } @media (pointer: coarse) { .tags-input__chip { min-block-size: var(--touch-target, 2.75rem); } .tags-input__chip::after { content: ""; flex: none; inline-size: var(--touch-target, 2.75rem); } .tags-input__delete { position: absolute; inset-block-start: 50%; inset-inline-end: 0; inline-size: var(--touch-target, 2.75rem); block-size: var(--touch-target, 2.75rem); translate: 0 -50%; } } }