@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/styles/surface-scaffold.css

@@ -0,0 +1,425 @@
+.kui-dialog-surface > wa-dialog {
+  --_kui-dialog-surface-width: 35rem;
+  --_kui-dialog-surface-resolved-gutter: max(
+    0px,
+    var(--_kui-dialog-surface-gutter, 1rem)
+  );
+  --width: min(35rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-size="small"] > wa-dialog {
+  --_kui-dialog-surface-width: 25rem;
+  --width: min(25rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-size="large"] > wa-dialog {
+  --_kui-dialog-surface-width: 50rem;
+  --width: min(50rem, calc(100vw - 2rem));
+}
+.kui-dialog-surface[data-presentation="modal"][data-preferred-width]
+  > wa-dialog {
+  --width: min(
+    var(--_kui-dialog-surface-preferred-width),
+    calc(100vw - 2rem)
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog {
+  --width: min(
+    var(
+      --_kui-dialog-surface-preferred-width,
+      var(--_kui-dialog-surface-width)
+    ),
+    max(
+      0px,
+      calc(
+        100vw - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
+/* Web Awesome has a separate max-width clamp; setting --width alone cannot
+   provide an 8px phone gutter. Omitted props retain its legacy geometry. */
+.kui-dialog-surface[data-presentation="modal"][data-viewport-gutter]
+  > wa-dialog::part(dialog) {
+  max-width: max(
+    0px,
+    calc(
+      100vw - var(--_kui-dialog-surface-resolved-gutter) -
+        var(--_kui-dialog-surface-resolved-gutter)
+    )
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-max-height]
+  > wa-dialog::part(dialog) {
+  max-height: max(
+    0px,
+    min(
+      var(--_kui-dialog-surface-max-height, 100dvh),
+      calc(
+        100dvh - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+}
+.kui-dialog-surface[data-presentation="modal"][data-height]
+  > wa-dialog::part(dialog) {
+  --_kui-dialog-surface-resolved-height: max(
+    0px,
+    min(
+      var(--_kui-dialog-surface-height, 100dvh),
+      calc(
+        100dvh - var(--_kui-dialog-surface-resolved-gutter) -
+          var(--_kui-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+  height: var(--_kui-dialog-surface-resolved-height);
+  max-height: var(--_kui-dialog-surface-resolved-height);
+}
+/* One child owns the body: it gets the body's whole height and its own
+   scrolling (the body itself no longer scrolls). */
+.kui-dialog-surface[data-body-layout="fill"] > wa-dialog::part(body) {
+  display: grid;
+  overflow: hidden;
+  grid-template-rows: minmax(0, 1fr);
+}
+.kui-dialog-surface[data-body-inset="none"] > wa-dialog::part(body),
+.kui-dialog-surface[data-footer-inset="none"] > wa-dialog::part(footer) {
+  padding: 0;
+}
+.kui-dialog-surface[data-body-inset="compact"] > wa-dialog::part(body),
+.kui-dialog-surface[data-footer-inset="compact"] > wa-dialog::part(footer) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-dialog-surface[data-body-inset="comfortable"] > wa-dialog::part(body),
+.kui-dialog-surface[data-footer-inset="comfortable"] > wa-dialog::part(footer) {
+  padding: var(--kui-wa-container-inset, 1rem);
+}
+/* Fixed rows above one filling row: the leading children keep their natural
+   height and the last unslotted child (the light-DOM children are the body
+   slot's flex items) takes the rest and owns its scrolling. */
+.kui-dialog-surface[data-body-layout="fill-last"] > wa-dialog::part(body) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kui-dialog-surface[data-body-layout="fill-last"] > wa-dialog > :not([slot]) {
+  flex: none;
+}
+.kui-dialog-surface[data-body-layout="fill-last"]
+  > wa-dialog
+  > :nth-last-child(1 of :not([slot])) {
+  flex: 1 1 0;
+  min-block-size: 0;
+}
+/* A floating footer lies over the body's block end, inset from the panel's
+   inline and block-end edges; the top-layer panel is its positioning
+   context. The register publishes the footer's measured block size on the
+   panel, and the body reserves it (plus the offset) after its own inset, so
+   flowing content scrolls beneath the footer and a filling child's scrollport
+   ends above it: the last content is never hidden. */
+.kui-dialog-surface[data-footer-presentation="floating"] > wa-dialog {
+  --_kui-dialog-surface-footer-resolved-offset: max(
+    0px,
+    var(
+      --_kui-dialog-surface-footer-offset,
+      var(--kui-wa-container-inset, 1rem)
+    )
+  );
+}
+.kui-dialog-surface[data-footer-presentation="floating"]
+  > wa-dialog::part(footer) {
+  position: absolute;
+  inset-inline: var(--_kui-dialog-surface-footer-resolved-offset);
+  inset-block-end: var(--_kui-dialog-surface-footer-resolved-offset);
+  z-index: 1;
+  background: transparent;
+}
+.kui-dialog-surface[data-footer-presentation="floating"]
+  > wa-dialog::part(body) {
+  --_kui-dialog-surface-footer-clearance: calc(
+    var(--_kui-dialog-surface-footer-block-size, 0px) +
+      var(--_kui-dialog-surface-footer-resolved-offset)
+  );
+  scroll-padding-block-end: var(--_kui-dialog-surface-footer-clearance);
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="none"]
+  > wa-dialog::part(body) {
+  padding-block-end: var(--_kui-dialog-surface-footer-clearance);
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="compact"]
+  > wa-dialog::part(body) {
+  padding-block-end: calc(
+    var(--kui-wa-surface-inset, 0.5rem) +
+      var(--_kui-dialog-surface-footer-clearance)
+  );
+}
+.kui-dialog-surface[data-footer-presentation="floating"][data-body-inset="comfortable"]
+  > wa-dialog::part(body) {
+  padding-block-end: calc(
+    var(--kui-wa-container-inset, 1rem) +
+      var(--_kui-dialog-surface-footer-clearance)
+  );
+}
+/* Scroll clearance. A dialog body starts a new scroll context, so it clears
+   any `--kui-scroll-clearance-*` a page region published around the dialog.
+   With a floating footer over a filling child that opts into block-end
+   `scrollClearance` (a transcript List or Pane), the body stops reserving the
+   footer below that child: the child reaches the panel's block end, the body
+   publishes the footer's clearance for it, and the child adds it inside its
+   own scroll area, so content scrolls visibly beneath the transparent footer
+   while its last item still comes to rest above it. */
+.kui-dialog-surface > wa-dialog::part(body) {
+  --kui-scroll-clearance-block-start: 0px;
+  --kui-scroll-clearance-block-end: 0px;
+}
+.kui-dialog-surface[data-footer-presentation="floating"]:is(
+    [data-body-layout="fill"],
+    [data-body-layout="fill-last"]
+  )
+  > wa-dialog:has(
+    > :nth-last-child(1 of :not([slot])):is(
+        [data-scroll-clearance="block-end"],
+        [data-scroll-clearance="both"]
+      )
+  )::part(body) {
+  --kui-scroll-clearance-block-end: var(--_kui-dialog-surface-footer-clearance);
+  padding-block-end: 0;
+}
+/* A floating header lies over the body's block-start edge on the
+   translucent chrome material (opaque under reduced transparency, increased
+   contrast, or without backdrop-filter; a system surface in forced colors).
+   The register publishes the header's measured block size on the panel; the
+   header gives that height back as a negative block-end margin, so the body
+   starts at the panel's block-start edge beneath it, and the body reserves it
+   again before its own inset (with a matching scroll-padding): flowing
+   content rests below the title bar and scrolls beneath it. Unmeasured, the
+   size resolves to 0px and the header stays docked. */
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog::part(header) {
+  position: relative;
+  z-index: 1;
+  margin-block-end: calc(
+    -1 * var(--_kui-dialog-surface-header-block-size, 0px)
+  );
+  -webkit-backdrop-filter: var(--kui-chrome-material-filter);
+  backdrop-filter: var(--kui-chrome-material-filter);
+  background: var(--kui-chrome-material-raised);
+  box-shadow: inset 0 -1px
+    var(--_kui-dialog-surface-header-divider, transparent);
+}
+/* The floating header's divider is scroll state, as on a Pane's overlay
+   header: the register publishes `--_kui-dialog-surface-header-divider` on
+   the panel (as this color) only while the body, or a filling child that
+   reaches beneath the header, is scrolled away from its top. The line is an
+   inset shadow, so showing it never moves the header or the content. */
+.kui-dialog-surface[data-header-presentation="floating"] > wa-dialog {
+  --_kui-dialog-surface-header-divider-color: var(
+    --kui-color-neutral-border-normal
+  );
+}
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog::part(body) {
+  --_kui-dialog-surface-header-clearance: var(
+    --_kui-dialog-surface-header-block-size,
+    0px
+  );
+  scroll-padding-block-start: var(--_kui-dialog-surface-header-clearance);
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="none"]
+  > wa-dialog::part(body) {
+  padding-block-start: var(--_kui-dialog-surface-header-clearance);
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="compact"]
+  > wa-dialog::part(body) {
+  padding-block-start: calc(
+    var(--kui-wa-surface-inset, 0.5rem) +
+      var(--_kui-dialog-surface-header-clearance)
+  );
+}
+.kui-dialog-surface[data-header-presentation="floating"][data-body-inset="comfortable"]
+  > wa-dialog::part(body) {
+  padding-block-start: calc(
+    var(--kui-wa-container-inset, 1rem) +
+      var(--_kui-dialog-surface-header-clearance)
+  );
+}
+/* A filling child that is the body's only child and opts into block-start
+   `scrollClearance` reaches the panel's block-start edge beneath the floating
+   header: the body publishes the header's clearance for it, and the child
+   adds it inside its own scroll area, so content scrolls visibly beneath the
+   title bar while its first item still rests below it. Leading children of
+   `fill-last` keep the body's reservation instead. */
+.kui-dialog-surface[data-header-presentation="floating"]:is(
+    [data-body-layout="fill"],
+    [data-body-layout="fill-last"]
+  )
+  > wa-dialog:has(
+    > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])):is(
+        [data-scroll-clearance="block-start"],
+        [data-scroll-clearance="both"]
+      )
+  )::part(body) {
+  --kui-scroll-clearance-block-start: var(
+    --_kui-dialog-surface-header-clearance
+  );
+  padding-block-start: 0;
+}
+@media (forced-colors: active) {
+  .kui-dialog-surface[data-header-presentation="floating"]
+    > wa-dialog::part(header) {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    background: Canvas;
+    border-block-end: 1px solid CanvasText;
+  }
+}
+.kui-dialog-surface[data-presentation="side-sheet"] > wa-dialog::part(dialog) {
+  width: min(30rem, 100vw);
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  margin-inline-end: 0;
+  border-radius: var(--kui-radius-l) 0 0 var(--kui-radius-l);
+}
+.kui-dialog-surface[data-presentation="fullscreen"] > wa-dialog {
+  --width: 100vw;
+}
+.kui-dialog-surface[data-presentation="fullscreen"] > wa-dialog::part(dialog) {
+  width: 100vw;
+  max-width: 100vw;
+  height: 100dvh;
+  max-height: 100dvh;
+  border-radius: 0;
+}
+/* PopoverDialogSurface: the dialog chrome and bounded geometry for a native
+   popover="auto" surface (non-modal, light dismiss) or the same surface in
+   flow. The UA popover rules supply the centered top-layer placement. */
+.kui-popover-dialog-surface {
+  --_kui-popover-dialog-surface-width: 35rem;
+  --_kui-popover-dialog-surface-resolved-gutter: max(
+    0px,
+    var(--_kui-popover-dialog-surface-gutter, 1rem)
+  );
+  --_kui-popover-dialog-surface-available-height: calc(
+    100dvh - var(--_kui-popover-dialog-surface-resolved-gutter) -
+      var(--_kui-popover-dialog-surface-resolved-gutter)
+  );
+  box-sizing: border-box;
+  width: min(
+    var(
+      --_kui-popover-dialog-surface-preferred-width,
+      var(--_kui-popover-dialog-surface-width)
+    ),
+    max(
+      0px,
+      calc(
+        100vw - var(--_kui-popover-dialog-surface-resolved-gutter) -
+          var(--_kui-popover-dialog-surface-resolved-gutter)
+      )
+    )
+  );
+  max-height: max(0px, var(--_kui-popover-dialog-surface-available-height));
+  padding: 0;
+  overflow: auto;
+  color: var(--kui-color-text);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-l);
+  background: var(--kui-color-surface-raised);
+  box-shadow: var(--kui-shadow-l);
+}
+.kui-popover-dialog-surface[data-size="small"] {
+  --_kui-popover-dialog-surface-width: 25rem;
+}
+.kui-popover-dialog-surface[data-size="large"] {
+  --_kui-popover-dialog-surface-width: 50rem;
+}
+.kui-popover-dialog-surface[data-max-height] {
+  max-height: max(
+    0px,
+    min(
+      var(--_kui-popover-dialog-surface-max-height, 100dvh),
+      var(--_kui-popover-dialog-surface-available-height)
+    )
+  );
+}
+.kui-popover-dialog-surface[data-height] {
+  height: max(
+    0px,
+    min(
+      var(--_kui-popover-dialog-surface-height, 100dvh),
+      var(--_kui-popover-dialog-surface-available-height)
+    )
+  );
+  max-height: none;
+}
+/* Centered in the top layer whatever margins or item alignment the host
+   sets: an absolutely positioned box's auto self-alignment otherwise
+   follows its parent's justify-items. */
+.kui-popover-dialog-surface[data-presentation="overlay"]:popover-open {
+  inset: 0;
+  margin: auto;
+  place-self: center;
+}
+.kui-popover-dialog-surface::backdrop {
+  background: var(
+    --wa-color-overlay-modal,
+    light-dark(rgb(29 29 31 / 0.34), rgb(0 0 0 / 0.6))
+  );
+}
+/* Only an open overlay lays out, so a closed one stays hidden. One filling
+   child takes the whole surface and owns its scrolling. */
+.kui-popover-dialog-surface[data-body-layout="fill"]:is(
+    :popover-open,
+    [data-presentation="embedded"]
+  ) {
+  display: grid;
+  overflow: hidden;
+  grid-template-rows: minmax(0, 1fr);
+}
+/* Fixed rows above one filling last child, which owns its scrolling. */
+.kui-popover-dialog-surface[data-body-layout="fill-last"]:is(
+    :popover-open,
+    [data-presentation="embedded"]
+  ) {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.kui-popover-dialog-surface[data-body-layout="fill-last"] > * {
+  flex: none;
+}
+.kui-popover-dialog-surface[data-body-layout="fill-last"] > :last-child {
+  flex: 1 1 0;
+  min-block-size: 0;
+}
+/* In flow for a catalog or inline use: the same surface without the top
+   layer, never wider than its container. */
+.kui-popover-dialog-surface[data-presentation="embedded"] {
+  position: relative;
+  inset: auto;
+  /* The available inline space, after any margin the container gives it. */
+  max-width: 100%;
+  max-width: -webkit-fill-available;
+  max-width: -moz-available;
+  max-width: stretch;
+  margin: 0;
+}
+.kui-popup-surface {
+  display: inline-flex;
+}
+/* The surface insets the menu of a raw wa-dropdown it wraps. A PopupMenu
+   applies the surface's inset to itself (popup-menu.css). */
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: 0.25rem;
+}
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: 0;
+}

package/dist/styles/tab-bar.css

@@ -18,28 +18,180 @@
 .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)
+  );
   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. AppTab rounds its own outer corners
+   to match in this context (see app-tab.css); TabBar never styles AppTab. */
+.kui-tab-bar[data-presentation="segmented"]
+  .kui-tab-bar__tabs:has(> .kui-app-tab[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-app-tab[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-app-tab[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-app-tab[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-app-tab[data-pinned="true"])
+  ) {
+  border-right-color: var(
+    --kui-tab-bar-divider-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}