@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.111

package/dist/styles/switch.css

@@ -0,0 +1,132 @@
+/* Switch: a track and thumb beside its label, with a hint directly under
+   the label on its column, as a Checkbox hint sits. The native input sits
+   invisibly over the track. */
+.kui-switch {
+  --_kui-switch-height: 1.25rem;
+  --_kui-switch-gap: 0.5rem;
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 400;
+  line-height: 1.25;
+}
+.kui-switch[data-size="compact"] {
+  --_kui-switch-height: 1.125rem;
+  --_kui-switch-gap: 0.4375rem;
+  font-size: var(--kui-font-s, 0.875rem);
+}
+.kui-switch__row {
+  display: inline-flex;
+  width: fit-content;
+  align-items: flex-start;
+  gap: var(--_kui-switch-gap);
+  color: var(--kui-color-text);
+  cursor: pointer;
+}
+.kui-switch__control {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+}
+.kui-switch__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  opacity: 0;
+  cursor: inherit;
+  appearance: none;
+}
+.kui-switch__track {
+  --_kui-switch-thumb: calc(var(--_kui-switch-height) * 0.6);
+  --_kui-switch-inset: calc(
+    (var(--_kui-switch-height) - var(--_kui-switch-thumb)) / 2
+  );
+  display: inline-flex;
+  box-sizing: border-box;
+  width: calc(var(--_kui-switch-height) * 1.75);
+  height: var(--_kui-switch-height);
+  align-items: center;
+  padding-inline: calc(var(--_kui-switch-inset) - 1px);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--_kui-switch-height);
+  background-color: var(--kui-color-surface);
+}
+.kui-switch__thumb {
+  width: var(--_kui-switch-thumb);
+  height: var(--_kui-switch-thumb);
+  border-radius: 50%;
+  background-color: var(--kui-color-neutral-border-normal);
+  transition: translate 150ms ease;
+}
+.kui-switch__input:checked + .kui-switch__track {
+  border-color: var(--kui-color-brand-fill-loud);
+  background-color: var(--kui-color-brand-fill-loud);
+}
+.kui-switch__input:checked + .kui-switch__track > .kui-switch__thumb {
+  background-color: var(--kui-color-surface);
+  translate: calc(
+      var(--_kui-switch-height) * 1.75 - var(--_kui-switch-thumb) - 2 *
+        var(--_kui-switch-inset)
+    )
+    0;
+}
+.kui-switch__input:dir(rtl):checked + .kui-switch__track > .kui-switch__thumb {
+  translate: calc(
+      -1 *
+        (
+          var(--_kui-switch-height) * 1.75 - var(--_kui-switch-thumb) - 2 *
+            var(--_kui-switch-inset)
+        )
+    )
+    0;
+}
+.kui-switch__input:focus-visible + .kui-switch__track {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+.kui-switch__label {
+  min-width: 0;
+  padding-block-start: calc((var(--_kui-switch-height) - 1lh) / 2);
+  overflow-wrap: anywhere;
+}
+.kui-switch:has(.kui-switch__input:disabled) .kui-switch__row {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.kui-switch__hint {
+  display: block;
+  padding-inline-start: calc(
+    var(--_kui-switch-height) * 1.75 + var(--_kui-switch-gap)
+  );
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s, 0.875rem);
+  line-height: 1.6;
+}
+.kui-switch[data-size="compact"] .kui-switch__hint {
+  font-size: var(--kui-font-xs, 0.75rem);
+}
+@media (prefers-reduced-motion: reduce) {
+  .kui-switch__thumb {
+    transition: none;
+  }
+}
+@media (forced-colors: active) {
+  .kui-switch__track {
+    border-color: CanvasText;
+  }
+  .kui-switch__thumb {
+    background-color: CanvasText;
+  }
+  .kui-switch__input:checked + .kui-switch__track {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+  .kui-switch__input:checked + .kui-switch__track > .kui-switch__thumb {
+    background-color: HighlightText;
+  }
+}

package/dist/styles/tab-bar-item.css

@@ -0,0 +1,389 @@
+.kui-tab-bar-item {
+  --kui-tab-bar-item-color: var(--kui-color-neutral-on-quiet);
+  --kui-tab-bar-item-hover-background: color-mix(
+    in srgb,
+    var(--kui-color-surface) 72%,
+    transparent
+  );
+  --kui-tab-bar-item-selected-color: var(--kui-color-brand-on-quiet);
+  --kui-tab-bar-item-selected-background: var(--kui-color-surface);
+  --kui-tab-bar-item-selected-border: color-mix(
+    in srgb,
+    var(--kui-color-neutral-border-normal) 80%,
+    transparent
+  );
+  --kui-tab-bar-item-drop-indicator: var(--kui-color-brand-border-normal);
+  --kui-tab-bar-item-drop-target-background: var(--kui-color-brand-fill-quiet);
+  --kui-tab-bar-item-drop-target-ring: var(--kui-color-brand-border-normal);
+  --kui-tab-bar-item-drop-target-color: var(--kui-color-brand-on-quiet);
+  position: relative;
+  display: flex;
+  width: max-content;
+  min-width: max-content;
+  height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--kui-tab-bar-item-color);
+  background: transparent;
+  align-items: center;
+  flex: none;
+}
+.kui-tab-bar-item[data-pinned="true"] {
+  position: sticky;
+  z-index: 1;
+  inset-inline-start: 0;
+  background: var(
+    --kui-tab-bar-item-pinned-background,
+    var(--_kui-tab-bar-item-pinned-default-background, var(--kui-color-surface))
+  );
+}
+.kui-tab-bar__tabs[data-snap-tabs="true"]
+  > .kui-tab-bar-item:not([data-pinned="true"]) {
+  scroll-snap-align: start;
+}
+.kui-tab-bar-item[data-pinned="true"]::before {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset-block: 0;
+  inset-inline-start: calc(
+    -1 *
+      (
+        var(--kui-tab-bar-strip-padding, 1px) +
+          var(--kui-tab-bar-strip-border-width, 1px)
+      )
+  );
+  inset-inline-end: 0;
+  /* Keep the opaque scroll backing inside the tab's pill silhouette so it
+     cannot square off a selected tab's trailing corner and shadow. */
+  border-radius: inherit;
+  background: var(
+    --kui-tab-bar-item-pinned-background,
+    var(--_kui-tab-bar-item-pinned-default-background, var(--kui-color-surface))
+  );
+}
+/* The leading overflow line belongs after the pinned tab, where its scrolling
+   peers disappear. Reuse the opaque backing so drag indicators can still use
+   ::after. */
+.kui-tab-bar__tabs:dir(ltr)[data-scroll-overflow*="l"]
+  > .kui-tab-bar-item[data-pinned="true"]::before,
+.kui-tab-bar__tabs:dir(rtl)[data-scroll-overflow*="r"]
+  > .kui-tab-bar-item[data-pinned="true"]::before {
+  inset-inline-end: -1px;
+  border-inline-end: 1px solid
+    var(--kui-tab-bar-divider-color, var(--kui-color-neutral-border-normal));
+}
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar-item[data-pinned="true"],
+.kui-tab-bar[data-presentation="inspector"]
+  .kui-tab-bar-item[data-pinned="true"] {
+  --_kui-tab-bar-item-pinned-default-background: var(
+    --kui-tab-bar-strip-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
+}
+.kui-tab-bar-item[data-pinned="true"]:not([data-selected="true"]):hover {
+  background: var(
+    --kui-tab-bar-item-pinned-hover-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
+}
+.kui-tab-bar-item[data-size="compact"] {
+  height: 2rem;
+}
+.kui-tab-bar-item[data-presentation="segmented"] {
+  border-radius: var(--kui-radius-s);
+  box-shadow: none;
+}
+.kui-tab-bar[data-presentation="inspector"]
+  .kui-tab-bar-item[data-presentation="segmented"] {
+  border-radius: calc(
+    var(--kui-tab-bar-strip-radius, var(--kui-layout-rounded-radius)) -
+      var(--kui-tab-bar-strip-padding, 1px) -
+      var(--kui-tab-bar-strip-border-width, 1px)
+  );
+}
+.kui-tab-bar-item:hover {
+  border-color: var(--kui-color-neutral-border-normal);
+  background: var(--kui-tab-bar-item-hover-background);
+}
+.kui-tab-bar-item[data-selected="true"] {
+  border-color: var(--kui-tab-bar-item-selected-border);
+  color: var(--kui-tab-bar-item-selected-color);
+  background: var(--kui-tab-bar-item-selected-background);
+  box-shadow: var(--kui-shadow-s);
+}
+.kui-tab-bar-item[data-drop-target="true"] {
+  color: var(--kui-tab-bar-item-drop-target-color);
+  background: var(--kui-tab-bar-item-drop-target-background);
+  box-shadow: inset 0 0 0 2px var(--kui-tab-bar-item-drop-target-ring);
+}
+.kui-tab-bar-item[data-tab-dragging="true"] {
+  opacity: 0.55;
+}
+.kui-tab-bar-item[data-tab-drop-position]::after {
+  position: absolute;
+  z-index: 2;
+  top: 0.2rem;
+  bottom: 0.2rem;
+  width: 2px;
+  border-radius: var(--kui-radius-pill);
+  background: var(--kui-tab-bar-item-drop-indicator);
+  content: "";
+  pointer-events: none;
+}
+.kui-tab-bar-item[data-tab-drop-position="before"]::after {
+  inset-inline-start: calc(var(--kui-space-2xs) * -1);
+}
+.kui-tab-bar-item[data-tab-drop-position="after"]::after {
+  inset-inline-end: calc(var(--kui-space-2xs) * -1);
+}
+.kui-tab-bar-item__select {
+  display: flex;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--kui-layout-item-padding, 0.5rem);
+  border: 0;
+  appearance: none;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+  text-align: start;
+}
+.kui-tab-bar-item:has(.kui-tab-bar-item__close) .kui-tab-bar-item__select {
+  padding-inline-start: var(--kui-layout-item-padding, 0.5rem);
+}
+.kui-tab-bar-item:has(.kui-tab-bar-item__select:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+.kui-tab-bar-item__select:focus-visible {
+  outline: none;
+}
+.kui-tab-bar-item__close:focus-visible {
+  border-radius: var(--kui-radius-pill);
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+.kui-tab-bar-item__select > svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+.kui-tab-bar-item__name {
+  max-width: var(--kui-tab-bar-item-label-max-width, none);
+  overflow: hidden;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.kui-tab-bar-item[data-name-overflow="visible"] .kui-tab-bar-item__name {
+  max-width: none;
+  overflow: visible;
+  text-overflow: clip;
+}
+.kui-tab-bar-item[data-attention="true"] .kui-tab-bar-item__name {
+  color: var(
+    --kui-tab-bar-item-attention-color,
+    var(--kui-color-warning-on-quiet)
+  );
+}
+.kui-tab-bar-item[data-presentation="icon-only"] .kui-tab-bar-item__select {
+  width: 100%;
+  justify-content: center;
+}
+.kui-tab-bar-item[data-presentation="icon-only"] .kui-tab-bar-item__name {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+.kui-tab-bar-item[data-presentation="icon-only"] {
+  width: 2rem;
+  min-width: 2rem;
+}
+/* TabBar owns the tablist width query; TabBarItem owns its own responsive
+   geometry and visually hidden name. The name remains in the accessibility
+   tree, so the tab keeps its accessible name without a rerender. */
+@container kui-tab-bar-tabs (max-width: 52rem) {
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-tab-bar__tabs
+    > .kui-tab-bar-item[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-tab-bar-item[data-presentation="segmented"]
+    .kui-tab-bar-item__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-tab-bar-item[data-presentation="segmented"]
+    .kui-tab-bar-item__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+@container kui-tab-bar-tabs (max-width: 44rem) {
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-tab-bar__tabs
+    > .kui-tab-bar-item[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-tab-bar-item[data-presentation="segmented"]
+    .kui-tab-bar-item__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-tab-bar-item[data-presentation="segmented"]
+    .kui-tab-bar-item__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+@container kui-tab-bar-tabs (max-width: 28rem) {
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-tab-bar__tabs
+    > .kui-tab-bar-item[data-presentation="segmented"] {
+    width: 2rem;
+    min-width: 2rem;
+    flex: none;
+  }
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-tab-bar-item[data-presentation="segmented"]
+    .kui-tab-bar-item__select {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-tab-bar-item[data-presentation="segmented"]
+    .kui-tab-bar-item__name {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    clip-path: inset(50%);
+  }
+}
+/* In a TabBar, the tab styles itself in the context of its parent strip. A
+   segmented strip's outer ends follow the pill track: the first tab's leading
+   corners, and a filled strip's last tab's trailing corners, are pill-rounded
+   so each end is concentric with the track (TabBar insets a compact strip's
+   tabs to match). Only fill allocation carries the last tab to the track's
+   trailing end; an intrinsic strip's last tab stops short of it and keeps the
+   segment radius, as do the corners between tabs. */
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs
+  > .kui-tab-bar-item:first-child {
+  border-start-start-radius: var(--kui-radius-pill);
+  border-end-start-radius: var(--kui-radius-pill);
+}
+.kui-tab-bar[data-presentation="segmented"][data-allocation="fill"]
+  .kui-tab-bar__tabs
+  > .kui-tab-bar-item:last-child {
+  border-start-end-radius: var(--kui-radius-pill);
+  border-end-end-radius: var(--kui-radius-pill);
+}
+/* Fill allocation shares the strip equally and centers each tab's content. */
+.kui-tab-bar[data-allocation="fill"] .kui-tab-bar__tabs > .kui-tab-bar-item {
+  min-width: 0;
+  flex: 1 1 0;
+}
+.kui-tab-bar[data-allocation="fill"]
+  .kui-tab-bar__tabs
+  > .kui-tab-bar-item
+  > .kui-tab-bar-item__select {
+  width: 100%;
+  justify-content: center;
+}
+.kui-tab-bar-item__trailing {
+  display: grid;
+  min-width: 1.275rem;
+  min-height: 1.275rem;
+  flex: none;
+  place-items: center;
+}
+.kui-tab-bar-item__close {
+  display: grid;
+  width: 1.275rem;
+  height: 1.275rem;
+  margin-inline-start: var(--kui-space-xs);
+  padding: 0;
+  border: 0;
+  appearance: none;
+  color: var(--kui-color-neutral-on-quiet);
+  background: transparent;
+  cursor: pointer;
+  flex: none;
+  place-items: center;
+}
+.kui-tab-bar-item__close:hover {
+  color: var(--kui-color-text);
+}
+/* A dormant tab keeps its close button's space, so it matches the live tab's
+   geometry, but never shows a control it has disabled. */
+.kui-tab-bar-item:is([data-placeholder="true"], [data-pending="true"])
+  .kui-tab-bar-item__close {
+  visibility: hidden;
+}
+.kui-tab-bar-item[data-pending="true"] .kui-tab-bar-item__name {
+  color: var(--kui-color-text-quiet);
+}
+.kui-tab-bar-item__close-icon {
+  display: grid;
+  width: 0.6375rem;
+  height: 0.6375rem;
+  pointer-events: none;
+  place-items: center;
+}
+.kui-tab-bar-item__close-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+@media (hover: hover) and (pointer: fine) {
+  .kui-tab-bar-item__close {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.12s ease;
+  }
+  .kui-tab-bar-item:hover .kui-tab-bar-item__close,
+  .kui-tab-bar-item:focus-within .kui-tab-bar-item__close {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kui-tab-bar-item__close {
+    transition: none;
+  }
+}

package/dist/styles/tab-bar.css

@@ -18,28 +18,186 @@
 .kui-tab-bar__tabs {
   display: flex;
   min-width: 0;
-  height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
-  padding: 1px;
-  overflow-x: auto;
+  min-height: var(
+    --kui-tab-bar-strip-min-height,
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+  );
+  margin-block: var(--kui-tab-bar-strip-margin-block, 0);
+  padding: var(--kui-tab-bar-strip-padding, 1px);
+  /* Scroll along the strip only: overflow-x alone computes overflow-y to auto,
+     so any vertical excess would let the strip scroll vertically on touch. */
+  overflow: auto var(--kui-tab-bar-strip-overflow-block, hidden);
   box-sizing: border-box;
-  border: 1px solid var(--kui-tab-bar-border);
-  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
-  background: var(--kui-tab-bar-background);
+  border: var(--kui-tab-bar-strip-border-width, 1px) solid
+    var(--kui-tab-bar-border);
+  border-radius: var(
+    --kui-tab-bar-strip-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+  background: var(
+    --kui-tab-bar-strip-background,
+    var(--kui-tab-bar-background)
+  );
+  /* The surface context (foundation.css): the strip's fill is a tint over
+     whatever the bar sits on. */
+  --kui-color-surface-current-tint: var(
+    --kui-tab-bar-strip-background,
+    var(--kui-tab-bar-background)
+  );
   scrollbar-width: none;
   align-items: center;
-  flex: 1 1 auto;
-  gap: 0;
+  flex: var(--kui-tab-bar-strip-flex, 1 1 auto);
+  gap: var(--kui-tab-bar-strip-gap, 0);
+  scroll-padding-inline: var(--kui-tab-bar-strip-scroll-padding-inline, 0);
   overscroll-behavior-inline: contain;
 }
+.kui-tab-bar__tabs[data-snap-tabs="true"] {
+  scroll-snap-type: x mandatory;
+  scroll-padding-inline-start: var(--kui-tab-bar-snap-inset, 0px);
+}
+/* The snap end room is scrollable content after the last tab, not padding on
+   the strip: padding is part of the strip's box, which a flex item cannot
+   shrink below, so a room measured at one width would hold the strip open
+   past its allocation when it narrows and push the trailing and end zones out
+   of the bar. As content it lengthens only the scroll range, and the strip
+   still shrinks to its allocation. The start margin gives back the strip gap,
+   so an empty room adds no width. */
+.kui-tab-bar__tabs[data-snap-tabs="true"]::after {
+  content: "";
+  inline-size: var(--kui-tab-bar-snap-end-extra, 0px);
+  margin-inline-start: calc(-1 * var(--kui-tab-bar-strip-gap, 0px));
+  pointer-events: none;
+  align-self: stretch;
+  flex: none;
+}
+.kui-tab-bar[data-icon-only-at] .kui-tab-bar__tabs {
+  container: kui-tab-bar-tabs / inline-size;
+}
+.kui-tab-bar[data-presentation="segmented"],
+.kui-tab-bar[data-presentation="inspector"] {
+  --kui-tab-bar-background: var(--kui-color-neutral-fill-quiet);
+  --kui-tab-bar-border: var(--kui-color-neutral-border-quiet);
+}
+/* A segmented strip's outer ends follow the pill track: a compact tab is inset
+   from the track's ends by the same distance as from its top and bottom, so
+   each end is concentric with the track. TabBarItem rounds its own outer corners
+   to match in this context (see tab-bar-item.css); TabBar never styles TabBarItem. */
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs:has(> .kui-tab-bar-item[data-size="compact"]) {
+  padding-inline: calc(
+    (var(--kui-toolbar-group-size, calc(2px + 2.625rem)) - 2rem) /
+      2 - 1px
+  );
+}
+.kui-tab-bar[data-presentation="inspector"] {
+  min-height: 2.125rem;
+  padding: 0;
+}
+.kui-tab-bar[data-presentation="inspector"] .kui-tab-bar__tabs {
+  min-height: var(--kui-tab-bar-strip-min-height, 2.125rem);
+  border-radius: var(
+    --kui-tab-bar-strip-radius,
+    var(--kui-layout-rounded-radius)
+  );
+}
+.kui-tab-bar[data-trailing-placement="adjacent"] .kui-tab-bar__tabs {
+  flex: 0 1 auto;
+}
 
 .kui-tab-bar__tabs::-webkit-scrollbar {
   display: none;
 }
 
 .kui-tab-bar__leading,
-.kui-tab-bar__trailing {
+.kui-tab-bar__trailing,
+.kui-tab-bar__end {
   display: flex;
   min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
   align-items: center;
   flex: none;
 }
+.kui-tab-bar__trailing {
+  flex: var(--kui-tab-bar-trailing-flex, none);
+}
+
+.kui-tab-bar__end {
+  margin-inline-start: auto;
+}
+
+/* Overflow dividers: a line on each side of the tab strip beyond which tabs
+   are scrolled out of view, as `wireScrollDividers` reports through the
+   strip's `data-scroll-overflow` (physical sides). A rail strip has no
+   visible track, so the bar draws the line with its own pseudo-elements,
+   ordered onto the strip's edges: `::before` between the leading zone and the
+   strip, `::after` between the strip and the trailing zone. Each is 1px wide
+   and gives back its width and one gap through a negative margin, so it
+   overlaps the strip's edge and never moves a tab or an action; hidden, it is
+   transparent. A segmented or inspector strip already draws a bordered track,
+   so its overflowing side takes the divider color on that border instead of
+   a straight line across its rounded end. */
+.kui-tab-bar > .kui-tab-bar__leading {
+  order: -2;
+}
+
+.kui-tab-bar > :is(.kui-tab-bar__trailing, .kui-tab-bar__end) {
+  order: 1;
+}
+
+.kui-tab-bar::before,
+.kui-tab-bar::after {
+  content: "";
+  position: relative;
+  z-index: 1;
+  width: 1px;
+  background: transparent;
+  pointer-events: none;
+  align-self: stretch;
+  flex: none;
+}
+
+.kui-tab-bar::before {
+  order: -1;
+  margin-inline-end: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
+}
+
+.kui-tab-bar::after {
+  margin-inline-start: calc(-1px - var(--kui-toolbar-gap, 0.5rem));
+}
+
+.kui-tab-bar[data-presentation="rail"]:dir(ltr):not(
+    :has(> .kui-tab-bar__tabs > .kui-tab-bar-item[data-pinned="true"])
+  ):has(> .kui-tab-bar__tabs[data-scroll-overflow*="l"])::before,
+.kui-tab-bar[data-presentation="rail"]:dir(rtl):not(
+    :has(> .kui-tab-bar__tabs > .kui-tab-bar-item[data-pinned="true"])
+  ):has(> .kui-tab-bar__tabs[data-scroll-overflow*="r"])::before,
+.kui-tab-bar[data-presentation="rail"]:dir(ltr):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="r"]
+  )::after,
+.kui-tab-bar[data-presentation="rail"]:dir(rtl):has(
+    > .kui-tab-bar__tabs[data-scroll-overflow*="l"]
+  )::after {
+  background: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+.kui-tab-bar:not([data-presentation="rail"])
+  > .kui-tab-bar__tabs[data-scroll-overflow*="l"]:not(
+    :dir(ltr):has(> .kui-tab-bar-item[data-pinned="true"])
+  ) {
+  border-left-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+.kui-tab-bar:not([data-presentation="rail"])
+  > .kui-tab-bar__tabs[data-scroll-overflow*="r"]:not(
+    :dir(rtl):has(> .kui-tab-bar-item[data-pinned="true"])
+  ) {
+  border-right-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}