@fluixi-ui/tokens 0.4.0-alpha.10 → 0.4.0-alpha.12

package/dist/css/base.css

@@ -1,4 +1,4 @@
-@layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin;
+@layer flx.reset, flx.base, flx.tokens, flx.components, flx.skin, flx.fx;
 
 @layer flx.components {
 

package/dist/css/carousel.css

@@ -64,13 +64,133 @@
     box-shadow: var(--flx-ui-ctl-ring);
   }
 
+  /* Controls row. Inset from the carousel's edges on purpose: laid out flush
+     (the obvious `justify-content: space-between` a consumer writes by hand) the
+     arrows sit hard against the container's left, right and bottom lines. */
+  :where([data-carousel-controls]) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--flx-ui-space-3);
+    /* Inset on both axes: without the block padding the arrows sit hard against
+       the carousel container's bottom line. */
+    padding-inline: var(--flx-ui-space-2);
+    padding-block: var(--flx-ui-space-2);
+    margin-top: var(--flx-ui-space-3);
+  }
+  /* The dots take the middle so the arrows stay pinned to either end even when
+     there is no third child. */
+  :where([data-carousel-controls] > [data-carousel-dots]) {
+    flex: 1;
+    margin-top: 0;
+  }
+
+  /* ── overlay mode ──────────────────────────────────────────────────────────
+     Controls sit over the slides, so the carousel is exactly as tall as its
+     images. The layer itself takes no pointer events — otherwise it would cover
+     the viewport and swallow the drag that starts a swipe — and each control
+     opts back in. */
+  :where([data-carousel][data-overlay] [data-carousel-controls]) {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    display: block;
+    pointer-events: none;
+  }
+  :where([data-carousel][data-overlay] [data-carousel-controls] > *) {
+    pointer-events: auto;
+  }
+
+  :where([data-carousel][data-overlay] [data-carousel-prev]),
+  :where([data-carousel][data-overlay] [data-carousel-next]) {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    /* Inset rather than flush: an arrow touching the frame reads as clipped. */
+    background: color-mix(in oklab, var(--flx-ui-color-bg) 72%, transparent);
+    border-color: color-mix(in oklab, var(--flx-ui-color-fg) 12%, transparent);
+    backdrop-filter: blur(6px);
+  }
+  :where([data-carousel][data-overlay] [data-carousel-prev]) {
+    inset-inline-start: var(--flx-ui-space-3);
+  }
+  :where([data-carousel][data-overlay] [data-carousel-next]) {
+    inset-inline-end: var(--flx-ui-space-3);
+  }
+  :where([data-carousel][data-overlay] [data-carousel-prev]:hover),
+  :where([data-carousel][data-overlay] [data-carousel-next]:hover) {
+    background: color-mix(in oklab, var(--flx-ui-color-bg) 90%, transparent);
+  }
+
+  :where([data-carousel][data-overlay] [data-carousel-dots]) {
+    position: absolute;
+    inset-inline: 0;
+    bottom: var(--flx-ui-space-3);
+    margin: 0;
+  }
+  /* Over an arbitrary image a border-coloured dot can vanish, so the inactive
+     state gets its own contrast rather than inheriting the page's. */
+  :where([data-carousel][data-overlay] [data-carousel-dot]) {
+    background: color-mix(in oklab, var(--flx-ui-color-bg) 55%, transparent);
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--flx-ui-color-fg) 18%, transparent);
+  }
+  :where([data-carousel][data-overlay] [data-carousel-dot][data-active]) {
+    background: var(--flx-ui-color-bg);
+  }
+
+  /* The arrows ship a default glyph and sit in normal flow (the consumer places
+     them), so they need a real control appearance — without it they fell back to
+     the UA button look while the dots beside them were fully styled.
+
+     A pill rather than a circle: the same control has to hold a bare `‹` and a
+     labelled "‹ Prev". Self-contained like the dots, so carousel needs no
+     dependency on the button slice. */
   :where([data-carousel-prev], [data-carousel-next]) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--flx-ui-space-1);
+    min-inline-size: var(--flx-ui-size-md);
+    block-size: var(--flx-ui-size-md);
+    padding-inline: var(--flx-ui-space-2);
+    border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+    border-radius: var(--flx-ui-radius-full);
+    background: var(--flx-ui-color-bg);
+    color: var(--flx-ui-color-fg);
+    font: inherit;
+    line-height: 1;
     cursor: pointer;
+    transition:
+      background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+      color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+  :where([data-carousel-prev]:hover, [data-carousel-next]:hover) {
+    background: var(--flx-ui-color-bg-muted);
+    border-color: var(--flx-ui-color-border-strong);
+  }
+  :where([data-carousel-prev]:active, [data-carousel-next]:active) {
+    background: var(--flx-ui-color-bg-subtle);
+  }
+  :where([data-carousel-prev]:focus-visible, [data-carousel-next]:focus-visible) {
+    outline: none;
+    box-shadow: var(--flx-ui-ctl-ring);
+    border-color: var(--flx-ui-color-focus-ring);
+  }
+  :where([data-carousel-prev] svg, [data-carousel-next] svg) {
+    inline-size: 20px;
+    block-size: 20px;
   }
   :where([data-carousel-prev][disabled], [data-carousel-next][disabled]) {
     opacity: var(--flx-ui-opacity-disabled);
     cursor: not-allowed;
   }
+  /* Hover must not repaint a disabled control. */
+  :where([data-carousel-prev][disabled]:hover, [data-carousel-next][disabled]:hover) {
+    background: var(--flx-ui-color-bg);
+    border-color: var(--flx-ui-color-border);
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/css/chip.css

@@ -0,0 +1,175 @@
+@layer flx.components {
+/* Chip (from @fluixi-ui/chip). An interactive pill: a `data-variant` fill style
+   crossed with a semantic `data-tone`, like Badge — but taller, with room for a
+   checkbox, media slot and remove button. Tone sets four custom props and the
+   variants consume them, so tone × variant needs no per-combo rules. */
+:where([data-chip]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--flx-ui-space-1);
+  max-width: 100%;
+  min-width: 0;
+  padding-inline: var(--flx-ui-space-2);
+  border-radius: var(--flx-ui-radius-full);
+  font-size: var(--flx-ui-font-size-sm);
+  font-weight: var(--flx-ui-font-weight-medium);
+  line-height: 1.35;
+  border: var(--flx-ui-border-width-thin) solid transparent;
+  vertical-align: middle;
+
+  /* neutral defaults; each tone overrides these four. */
+  --flx-ui-chip-color: var(--flx-ui-color-fg-muted);
+  --flx-ui-chip-text: var(--flx-ui-color-fg-muted);
+  --flx-ui-chip-bg: var(--flx-ui-color-bg-muted);
+  --flx-ui-chip-on: var(--flx-ui-color-bg);
+}
+
+:where([data-chip][data-size='md']) { block-size: var(--flx-ui-space-8); }
+:where([data-chip][data-size='sm']) {
+  block-size: var(--flx-ui-space-6);
+  font-size: var(--flx-ui-font-size-xs);
+  padding-inline: var(--flx-ui-space-1-5, var(--flx-ui-space-1));
+}
+
+:where([data-chip][data-tone='primary']),
+:where([data-chip][data-tone='info']) {
+  --flx-ui-chip-color: var(--flx-ui-color-primary);
+  --flx-ui-chip-text: var(--flx-ui-color-primary-text);
+  --flx-ui-chip-bg: var(--flx-ui-color-primary-subtle);
+  --flx-ui-chip-on: var(--flx-ui-color-primary-fg);
+}
+:where([data-chip][data-tone='success']) {
+  --flx-ui-chip-color: var(--flx-ui-color-success);
+  --flx-ui-chip-text: var(--flx-ui-color-success-text);
+  --flx-ui-chip-bg: var(--flx-ui-color-success-subtle);
+  --flx-ui-chip-on: var(--flx-ui-color-success-fg);
+}
+:where([data-chip][data-tone='warning']) {
+  --flx-ui-chip-color: var(--flx-ui-color-warning);
+  --flx-ui-chip-text: var(--flx-ui-color-warning-text);
+  --flx-ui-chip-bg: var(--flx-ui-color-warning-subtle);
+  --flx-ui-chip-on: var(--flx-ui-color-warning-fg);
+}
+:where([data-chip][data-tone='danger']) {
+  --flx-ui-chip-color: var(--flx-ui-color-danger);
+  --flx-ui-chip-text: var(--flx-ui-color-danger-text);
+  --flx-ui-chip-bg: var(--flx-ui-color-danger-subtle);
+  --flx-ui-chip-on: var(--flx-ui-color-danger-fg);
+}
+
+:where([data-chip][data-variant='soft']) {
+  background: var(--flx-ui-chip-bg);
+  color: var(--flx-ui-chip-text);
+}
+:where([data-chip][data-variant='solid']) {
+  background: var(--flx-ui-chip-color);
+  color: var(--flx-ui-chip-on);
+}
+:where([data-chip][data-variant='outline']) {
+  background: transparent;
+  color: var(--flx-ui-chip-text);
+  border-color: var(--flx-ui-chip-color);
+}
+
+/* A selected filter chip reads as "on" regardless of variant. */
+:where([data-chip][data-selected]) {
+  background: var(--flx-ui-chip-color);
+  color: var(--flx-ui-chip-on);
+  border-color: var(--flx-ui-chip-color);
+}
+
+:where([data-chip][data-interactive]:not([data-disabled])) { cursor: pointer; }
+
+:where([data-chip][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+
+/* The label truncates rather than pushing the remove button out of the pill —
+   a chip sits in a row of chips and must not grow unbounded. */
+:where([data-chip-label]),
+:where([data-chip-action]) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The action is a real <button>; strip its chrome so it reads as the chip's label. */
+:where([data-chip-action]) {
+  appearance: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: inherit;
+}
+
+:where([data-chip-media]) {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  margin-inline-start: calc(var(--flx-ui-space-1) * -1);
+}
+:where([data-chip-media]) :where(img, [data-avatar]) {
+  block-size: 1.5em;
+  inline-size: 1.5em;
+  border-radius: var(--flx-ui-radius-full);
+  object-fit: cover;
+}
+
+:where([data-chip-remove]) {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  margin-inline-end: calc(var(--flx-ui-space-1) * -1);
+  /* A comfortable target that still fits the pill: the glyph is small, the
+     hit area is not. */
+  block-size: 1.5em;
+  inline-size: 1.5em;
+  border-radius: var(--flx-ui-radius-full);
+  font: inherit;
+  line-height: 1;
+  color: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+  transition: opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-chip-remove]:hover) {
+  opacity: 1;
+  background: color-mix(in oklab, currentColor 15%, transparent);
+}
+:where([data-chip-remove]:disabled) { cursor: not-allowed; }
+
+:where([data-chip-action]:focus-visible),
+:where([data-chip-remove]:focus-visible),
+:where([data-chip-checkbox]:focus-visible) {
+  outline: var(--flx-ui-border-width-thick) solid var(--flx-ui-color-focus-ring);
+  outline-offset: 2px;
+}
+
+/* Shrink the checkbox to chip scale without touching the checkbox component. */
+:where([data-chip-checkbox]) {
+  flex: none;
+  block-size: 1.15em;
+  inline-size: 1.15em;
+  margin-inline-start: calc(var(--flx-ui-space-1) * -1);
+}
+
+:where([data-chip-group]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--flx-ui-space-2);
+  min-width: 0;
+}
+:where([data-chip-group][data-size='sm']) { gap: var(--flx-ui-space-1); }
+}

package/dist/css/dnd.css

@@ -0,0 +1,68 @@
+@layer flx.components {
+/* Sortable (from @fluixi-ui/dnd). A reorderable list: the container owns the
+   axis, items carry the drag state as `data-dragging`.
+
+   The container hook is `data-sortable-list`, not `data-sortable`: Table already
+   marks a sortable header cell with `data-sortable`, so the bare attribute
+   matched every `<th>` and laid the header row out as a flex column. Component
+   hooks have to be specific enough not to collide across packages. */
+:where([data-sortable-list]) {
+  display: flex;
+  min-width: 0;
+  gap: var(--flx-ui-space-2);
+}
+:where([data-sortable-list][data-orientation='vertical']) { flex-direction: column; }
+:where([data-sortable-list][data-orientation='horizontal']) {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+:where([data-sortable-item]) {
+  min-width: 0;
+  /* The pointer owns the gesture once a drag starts: no text selection, and no
+     browser scroll/pan stealing the move on touch. */
+  touch-action: none;
+  border-radius: var(--flx-ui-radius-md);
+  transition:
+    box-shadow var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    opacity var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+
+/* The item under the pointer/keyboard lifts off the list. Deliberately not a
+   transform: the list reorders live, so the element is already where it belongs
+   and moving it again would double the offset. */
+:where([data-sortable-item][data-dragging]) {
+  position: relative;
+  z-index: 1;
+  box-shadow: var(--flx-ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.18));
+  cursor: grabbing;
+}
+
+:where([data-sortable-list][data-dragging]) { user-select: none; }
+
+:where([data-sortable-item]:focus-visible) {
+  outline: var(--flx-ui-border-width-thick) solid var(--flx-ui-color-focus-ring);
+  outline-offset: 2px;
+}
+
+:where([data-sortable-item][data-disabled]) {
+  opacity: var(--flx-ui-opacity-disabled, 0.5);
+  cursor: not-allowed;
+}
+
+:where([data-sortable-handle]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  /* A grip needs a real target, not just a glyph. */
+  min-inline-size: var(--flx-ui-space-6);
+  min-block-size: var(--flx-ui-space-6);
+  color: var(--flx-ui-color-fg-muted);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+:where([data-sortable-item][data-dragging]) :where([data-sortable-handle]) { cursor: grabbing; }
+:where([data-sortable-item][data-disabled]) :where([data-sortable-handle]) { cursor: not-allowed; }
+}

package/dist/css/file-upload.css

@@ -37,4 +37,41 @@
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+/* The trigger renders a plain `<button>`; without an appearance here it fell back
+   to the browser's default button next to a fully styled dropzone. */
+:where([data-file-upload-trigger]) {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--flx-ui-space-2);
+  min-inline-size: var(--flx-ui-size-md);
+  block-size: var(--flx-ui-size-md);
+  padding-inline: var(--flx-ui-space-3);
+  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+  border-radius: var(--flx-ui-radius-md);
+  background: var(--flx-ui-color-bg);
+  color: var(--flx-ui-color-fg);
+  font: inherit;
+  font-size: var(--flx-ui-font-size-sm);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
+    border-color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+}
+:where([data-file-upload-trigger]:hover:not([disabled])) {
+  background: var(--flx-ui-color-bg-muted);
+  border-color: var(--flx-ui-color-border-strong);
+}
+:where([data-file-upload-trigger]:focus-visible) {
+  outline: none;
+  box-shadow: var(--flx-ui-ctl-ring);
+  border-color: var(--flx-ui-color-focus-ring);
+}
+:where([data-file-upload-trigger][disabled]) {
+  opacity: var(--flx-ui-opacity-disabled);
+  cursor: not-allowed;
+}
 }

package/dist/css/page.css

@@ -0,0 +1,138 @@
+@layer flx.components {
+  /*
+   * The page shell. Structure only: a bounded column whose middle scrolls.
+   *
+   * `min-height: 0` on the body is the load-bearing rule — without it a flex item
+   * refuses to shrink below its content, so a long page pushes the footer out of
+   * view instead of scrolling.
+   */
+  :where([data-page]) {
+    --flx-ui-page-gutter: var(--flx-ui-space-6);
+    --flx-ui-page-header-gap: var(--flx-ui-space-3);
+
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+  }
+
+  :where([data-page-header]) {
+    display: flex;
+    align-items: center;
+    gap: var(--flx-ui-page-header-gap);
+    padding: var(--flx-ui-space-4) var(--flx-ui-page-gutter);
+    border-bottom: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+    background: var(--flx-ui-color-bg);
+  }
+
+  :where([data-page-header][data-sticky]) {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  :where([data-page-heading-group]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--flx-ui-space-1);
+    min-width: 0;
+  }
+
+  :where([data-page-heading]) {
+    margin: 0;
+    font-size: var(--flx-ui-font-size-xl);
+    font-weight: var(--flx-ui-font-weight-semibold);
+    line-height: var(--flx-ui-line-height-tight);
+    color: var(--flx-ui-color-fg);
+    /* Long titles truncate rather than pushing the actions off the row. */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where([data-page-subtitle]) {
+    margin: 0;
+    font-size: var(--flx-ui-font-size-sm);
+    line-height: var(--flx-ui-line-height-normal);
+    color: var(--flx-ui-color-fg-muted);
+  }
+
+  /* Actions sit at the end of the row whatever precedes them. */
+  :where([data-page-actions]) {
+    display: flex;
+    align-items: center;
+    gap: var(--flx-ui-space-2);
+    margin-inline-start: auto;
+  }
+
+  :where([data-page-body]) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--flx-ui-space-4);
+    padding: var(--flx-ui-space-5) var(--flx-ui-page-gutter);
+    flex: 1;
+    min-height: 0;
+  }
+
+  /* Only the body scrolls; the header and footer stay put. */
+  :where([data-page-body][data-scroll='body']) {
+    overflow-y: auto;
+  }
+
+  /* The whole page scrolls, so the body must not create a second scroll context. */
+  :where([data-page-body][data-scroll='page']) {
+    overflow: visible;
+  }
+
+  :where([data-page][data-scroll='page']) {
+    overflow-y: auto;
+  }
+
+  :where([data-page-footer]) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--flx-ui-space-3);
+    padding: var(--flx-ui-space-4) var(--flx-ui-page-gutter);
+    border-top: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
+    background: var(--flx-ui-color-bg);
+  }
+
+  /*
+   * The back affordance carries `data-variant`, so the button rules and each
+   * skin's state layer/ripple already apply. Only the square geometry is left —
+   * and the anchor form needs the button's own resets, which it doesn't inherit.
+   */
+  :where([data-page-back]) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: var(--flx-ui-size-sm);
+    padding: 0;
+    text-decoration: none;
+  }
+
+  /* A CSS chevron, so the back button needs no icon library. */
+  :where([data-page-back])::before {
+    content: '';
+    width: 0.5rem;
+    height: 0.5rem;
+    border-inline-start: 2px solid currentColor;
+    border-block-start: 2px solid currentColor;
+    transform: rotate(-45deg);
+    /* Optical centring: the glyph's mass sits right of its box. */
+    margin-inline-start: 0.15em;
+  }
+
+  /* A supplied icon replaces the drawn chevron. */
+  :where([data-page-back]:has(> *))::before {
+    content: none;
+  }
+
+  :where([dir='rtl']) :where([data-page-back])::before {
+    transform: rotate(135deg);
+    margin-inline-start: 0;
+    margin-inline-end: 0.15em;
+  }
+}

package/dist/css/splitter.css

@@ -0,0 +1,81 @@
+@layer flx.components {
+  :where([data-splitter]) {
+    --flx-ui-splitter-thickness: 1px;
+    --flx-ui-splitter-hit-area: var(--flx-ui-space-2);
+
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  :where([data-splitter][data-orientation='horizontal']) { flex-direction: row; }
+  :where([data-splitter][data-orientation='vertical']) { flex-direction: column; }
+
+  /* `min-*: 0` lets a panel shrink below its content instead of forcing the
+     splitter wider than its container — the same rule the page body needs. */
+  :where([data-splitter-panel]) {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  /*
+   * The divider is a hairline, but the grab area is wider — a 1px target is
+   * unusable with a mouse and impossible with a finger. The line is drawn by a
+   * pseudo-element so the hit area can be generous without looking heavy.
+   */
+  :where([data-splitter-handle]) {
+    position: relative;
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 0;
+    padding: 0;
+  }
+
+  :where([data-splitter-handle])::before {
+    content: '';
+    position: absolute;
+    background: var(--flx-ui-color-border);
+    transition: background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
+  }
+
+  :where([data-splitter-handle][data-orientation='horizontal']) {
+    width: var(--flx-ui-splitter-hit-area);
+    cursor: col-resize;
+  }
+  :where([data-splitter-handle][data-orientation='horizontal'])::before {
+    inset-block: 0;
+    width: var(--flx-ui-splitter-thickness);
+  }
+
+  :where([data-splitter-handle][data-orientation='vertical']) {
+    height: var(--flx-ui-splitter-hit-area);
+    cursor: row-resize;
+  }
+  :where([data-splitter-handle][data-orientation='vertical'])::before {
+    inset-inline: 0;
+    height: var(--flx-ui-splitter-thickness);
+  }
+
+  :where([data-splitter-handle]:hover)::before,
+  :where([data-splitter-handle][data-dragging])::before {
+    background: var(--flx-ui-color-primary);
+  }
+
+  :where([data-splitter-handle]:focus-visible) {
+    outline: var(--flx-ui-border-width-thick) solid var(--flx-ui-color-focus-ring);
+    outline-offset: -2px;
+  }
+
+  /* While dragging, the pointer owns the whole splitter: no text selection, and
+     no panel swallowing the pointer as the cursor crosses it. */
+  :where([data-splitter][data-dragging]) {
+    user-select: none;
+  }
+  :where([data-splitter][data-dragging]) :where([data-splitter-panel]) {
+    pointer-events: none;
+  }
+}

package/dist/css/tags-input.css

@@ -48,43 +48,13 @@
   color: var(--flx-ui-color-fg-muted);
 }
 
-/* A committed tag chip. */
-:where([data-tags-input-tag]) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--flx-ui-space-1);
-  padding: 0 var(--flx-ui-space-1) 0 var(--flx-ui-space-2);
-  height: calc(var(--flx-ui-size-md) - 2 * var(--flx-ui-space-2));
-  font-size: var(--flx-ui-font-size-sm);
-  color: var(--flx-ui-color-fg);
-  background: var(--flx-ui-color-bg-subtle);
-  border: var(--flx-ui-border-width-thin) solid var(--flx-ui-color-border);
-  border-radius: var(--flx-ui-radius-sm);
-  white-space: nowrap;
-}
-:where([data-tags-input-tag-remove]) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.3em;
-  height: 1.3em;
-  padding: 0;
-  font: inherit;
-  line-height: 1;
-  color: var(--flx-ui-color-fg-muted);
-  background: none;
-  border: none;
-  border-radius: var(--flx-ui-radius-sm);
-  cursor: pointer;
-  transition:
-    color var(--flx-ui-duration-fast) var(--flx-ui-ease-standard),
-    background var(--flx-ui-duration-fast) var(--flx-ui-ease-standard);
-}
-:where([data-tags-input-tag-remove]:hover) {
-  color: var(--flx-ui-color-fg);
-  background: color-mix(in oklab, var(--flx-ui-color-fg) 10%, transparent);
+/* A committed tag is a Chip (see chip.css); only the field-specific bits live
+   here — it must not stretch the row, and the field owns the focus ring. */
+:where([data-tags-input] [data-tags-input-tag]) {
+  flex: none;
+  max-width: 100%;
 }
-:where([data-tags-input-tag-remove]:focus-visible) {
+:where([data-tags-input] [data-tags-input-tag] [data-chip-remove]:focus-visible) {
   outline: none;
   box-shadow: var(--flx-ui-ctl-ring);
 }