@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/styles/components/navigation/{app-tab/app-tab.css → tab-bar-item/tab-bar-item.css}

@@ -1,21 +1,21 @@
-.kui-app-tab {
-  --kui-app-tab-color: var(--kui-color-neutral-on-quiet);
-  --kui-app-tab-hover-background: color-mix(
+.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-app-tab-selected-color: var(--kui-color-brand-on-quiet);
-  --kui-app-tab-selected-background: var(--kui-color-surface);
-  --kui-app-tab-selected-border: color-mix(
+  --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-app-tab-drop-indicator: var(--kui-color-brand-border-normal);
-  --kui-app-tab-drop-target-background: var(--kui-color-brand-fill-quiet);
-  --kui-app-tab-drop-target-ring: var(--kui-color-brand-border-normal);
-  --kui-app-tab-drop-target-color: var(--kui-color-brand-on-quiet);
+  --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;
@@ -24,25 +24,25 @@
   box-sizing: border-box;
   border: 1px solid transparent;
   border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
-  color: var(--kui-app-tab-color);
+  color: var(--kui-tab-bar-item-color);
   background: transparent;
   align-items: center;
   flex: none;
 }
-.kui-app-tab[data-pinned="true"] {
+.kui-tab-bar-item[data-pinned="true"] {
   position: sticky;
   z-index: 1;
   inset-inline-start: 0;
   background: var(
-    --kui-app-tab-pinned-background,
-    var(--_kui-app-tab-pinned-default-background, var(--kui-color-surface))
+    --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-app-tab:not([data-pinned="true"]) {
+  > .kui-tab-bar-item:not([data-pinned="true"]) {
   scroll-snap-align: start;
 }
-.kui-app-tab[data-pinned="true"]::before {
+.kui-tab-bar-item[data-pinned="true"]::before {
   content: "";
   position: absolute;
   z-index: -1;
@@ -59,85 +59,87 @@
      cannot square off a selected tab's trailing corner and shadow. */
   border-radius: inherit;
   background: var(
-    --kui-app-tab-pinned-background,
-    var(--_kui-app-tab-pinned-default-background, var(--kui-color-surface))
+    --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-app-tab[data-pinned="true"]::before,
+  > .kui-tab-bar-item[data-pinned="true"]::before,
 .kui-tab-bar__tabs:dir(rtl)[data-scroll-overflow*="r"]
-  > .kui-app-tab[data-pinned="true"]::before {
+  > .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-app-tab[data-pinned="true"],
-.kui-tab-bar[data-presentation="inspector"] .kui-app-tab[data-pinned="true"] {
-  --_kui-app-tab-pinned-default-background: var(
+.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-app-tab[data-pinned="true"]:not([data-selected="true"]):hover {
+.kui-tab-bar-item[data-pinned="true"]:not([data-selected="true"]):hover {
   background: var(
-    --kui-app-tab-pinned-hover-background,
+    --kui-tab-bar-item-pinned-hover-background,
     var(--kui-color-neutral-fill-quiet)
   );
 }
-.kui-app-tab[data-size="compact"] {
+.kui-tab-bar-item[data-size="compact"] {
   height: 2rem;
 }
-.kui-app-tab[data-presentation="segmented"] {
+.kui-tab-bar-item[data-presentation="segmented"] {
   border-radius: var(--kui-radius-s);
   box-shadow: none;
 }
 .kui-tab-bar[data-presentation="inspector"]
-  .kui-app-tab[data-presentation="segmented"] {
+  .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-app-tab:hover {
+.kui-tab-bar-item:hover {
   border-color: var(--kui-color-neutral-border-normal);
-  background: var(--kui-app-tab-hover-background);
+  background: var(--kui-tab-bar-item-hover-background);
 }
-.kui-app-tab[data-selected="true"] {
-  border-color: var(--kui-app-tab-selected-border);
-  color: var(--kui-app-tab-selected-color);
-  background: var(--kui-app-tab-selected-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-app-tab[data-drop-target="true"] {
-  color: var(--kui-app-tab-drop-target-color);
-  background: var(--kui-app-tab-drop-target-background);
-  box-shadow: inset 0 0 0 2px var(--kui-app-tab-drop-target-ring);
+.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-app-tab[data-tab-dragging="true"] {
+.kui-tab-bar-item[data-tab-dragging="true"] {
   opacity: 0.55;
 }
-.kui-app-tab[data-tab-drop-position]::after {
+.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-app-tab-drop-indicator);
+  background: var(--kui-tab-bar-item-drop-indicator);
   content: "";
   pointer-events: none;
 }
-.kui-app-tab[data-tab-drop-position="before"]::after {
+.kui-tab-bar-item[data-tab-drop-position="before"]::after {
   inset-inline-start: calc(var(--kui-space-2xs) * -1);
 }
-.kui-app-tab[data-tab-drop-position="after"]::after {
+.kui-tab-bar-item[data-tab-drop-position="after"]::after {
   inset-inline-end: calc(var(--kui-space-2xs) * -1);
 }
-.kui-app-tab__select {
+.kui-tab-bar-item__select {
   display: flex;
   min-width: 0;
   height: 100%;
@@ -152,47 +154,50 @@
   gap: var(--kui-layout-item-gap, 0.5rem);
   text-align: start;
 }
-.kui-app-tab:has(.kui-app-tab__close) .kui-app-tab__select {
+.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-app-tab:has(.kui-app-tab__select:focus-visible) {
+.kui-tab-bar-item:has(.kui-tab-bar-item__select:focus-visible) {
   outline: var(--kui-focus-ring);
   outline-offset: -2px;
 }
-.kui-app-tab__select:focus-visible {
+.kui-tab-bar-item__select:focus-visible {
   outline: none;
 }
-.kui-app-tab__close:focus-visible {
+.kui-tab-bar-item__close:focus-visible {
   border-radius: var(--kui-radius-pill);
   outline: var(--kui-focus-ring);
   outline-offset: -2px;
 }
-.kui-app-tab__select > svg {
+.kui-tab-bar-item__select > svg {
   width: 1rem;
   height: 1rem;
   flex: none;
 }
-.kui-app-tab__name {
-  max-width: var(--kui-app-tab-label-max-width, 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-app-tab[data-name-overflow="visible"] .kui-app-tab__name {
+.kui-tab-bar-item[data-name-overflow="visible"] .kui-tab-bar-item__name {
   max-width: none;
   overflow: visible;
   text-overflow: clip;
 }
-.kui-app-tab[data-attention="true"] .kui-app-tab__name {
-  color: var(--kui-app-tab-attention-color, var(--kui-color-warning-on-quiet));
+.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-app-tab[data-presentation="icon-only"] .kui-app-tab__select {
+.kui-tab-bar-item[data-presentation="icon-only"] .kui-tab-bar-item__select {
   width: 100%;
   justify-content: center;
 }
-.kui-app-tab[data-presentation="icon-only"] .kui-app-tab__name {
+.kui-tab-bar-item[data-presentation="icon-only"] .kui-tab-bar-item__name {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -202,30 +207,30 @@
   white-space: nowrap;
   clip-path: inset(50%);
 }
-.kui-app-tab[data-presentation="icon-only"] {
+.kui-tab-bar-item[data-presentation="icon-only"] {
   width: 2rem;
   min-width: 2rem;
 }
-/* TabBar owns the tablist width query; AppTab owns its own responsive
+/* 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-app-tab[data-presentation="segmented"] {
+    > .kui-tab-bar-item[data-presentation="segmented"] {
     width: 2rem;
     min-width: 2rem;
     flex: none;
   }
   .kui-tab-bar[data-icon-only-at="wide"]
-    .kui-app-tab[data-presentation="segmented"]
-    .kui-app-tab__select {
+    .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-app-tab[data-presentation="segmented"]
-    .kui-app-tab__name {
+    .kui-tab-bar-item[data-presentation="segmented"]
+    .kui-tab-bar-item__name {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -239,20 +244,20 @@
 @container kui-tab-bar-tabs (max-width: 44rem) {
   .kui-tab-bar[data-icon-only-at="narrow"]
     .kui-tab-bar__tabs
-    > .kui-app-tab[data-presentation="segmented"] {
+    > .kui-tab-bar-item[data-presentation="segmented"] {
     width: 2rem;
     min-width: 2rem;
     flex: none;
   }
   .kui-tab-bar[data-icon-only-at="narrow"]
-    .kui-app-tab[data-presentation="segmented"]
-    .kui-app-tab__select {
+    .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-app-tab[data-presentation="segmented"]
-    .kui-app-tab__name {
+    .kui-tab-bar-item[data-presentation="segmented"]
+    .kui-tab-bar-item__name {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -266,20 +271,20 @@
 @container kui-tab-bar-tabs (max-width: 28rem) {
   .kui-tab-bar[data-icon-only-at="compact"]
     .kui-tab-bar__tabs
-    > .kui-app-tab[data-presentation="segmented"] {
+    > .kui-tab-bar-item[data-presentation="segmented"] {
     width: 2rem;
     min-width: 2rem;
     flex: none;
   }
   .kui-tab-bar[data-icon-only-at="compact"]
-    .kui-app-tab[data-presentation="segmented"]
-    .kui-app-tab__select {
+    .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-app-tab[data-presentation="segmented"]
-    .kui-app-tab__name {
+    .kui-tab-bar-item[data-presentation="segmented"]
+    .kui-tab-bar-item__name {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -299,36 +304,36 @@
    segment radius, as do the corners between tabs. */
 .kui-tab-bar[data-presentation="segmented"]
   .kui-tab-bar__tabs
-  > .kui-app-tab:first-child {
+  > .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-app-tab:last-child {
+  > .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-app-tab {
+.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-app-tab
-  > .kui-app-tab__select {
+  > .kui-tab-bar-item
+  > .kui-tab-bar-item__select {
   width: 100%;
   justify-content: center;
 }
-.kui-app-tab__trailing {
+.kui-tab-bar-item__trailing {
   display: grid;
   min-width: 1.275rem;
   min-height: 1.275rem;
   flex: none;
   place-items: center;
 }
-.kui-app-tab__close {
+.kui-tab-bar-item__close {
   display: grid;
   width: 1.275rem;
   height: 1.275rem;
@@ -342,43 +347,43 @@
   flex: none;
   place-items: center;
 }
-.kui-app-tab__close:hover {
+.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-app-tab:is([data-placeholder="true"], [data-pending="true"])
-  .kui-app-tab__close {
+.kui-tab-bar-item:is([data-placeholder="true"], [data-pending="true"])
+  .kui-tab-bar-item__close {
   visibility: hidden;
 }
-.kui-app-tab[data-pending="true"] .kui-app-tab__name {
+.kui-tab-bar-item[data-pending="true"] .kui-tab-bar-item__name {
   color: var(--kui-color-text-quiet);
 }
-.kui-app-tab__close-icon {
+.kui-tab-bar-item__close-icon {
   display: grid;
   width: 0.6375rem;
   height: 0.6375rem;
   pointer-events: none;
   place-items: center;
 }
-.kui-app-tab__close-icon > svg {
+.kui-tab-bar-item__close-icon > svg {
   width: 100%;
   height: 100%;
 }
 @media (hover: hover) and (pointer: fine) {
-  .kui-app-tab__close {
+  .kui-tab-bar-item__close {
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.12s ease;
   }
-  .kui-app-tab:hover .kui-app-tab__close,
-  .kui-app-tab:focus-within .kui-app-tab__close {
+  .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-app-tab__close {
+  .kui-tab-bar-item__close {
     transition: none;
   }
 }

package/dist/styles/components/surfaces/disclosure/disclosure.css

@@ -0,0 +1,98 @@
+/* A native <details> on the shared content-item geometry: the summary row and
+   the content share one 8px inset inside the item's 1px border, so the title
+   and the first content line up on the text column. */
+.kui-disclosure {
+  --_kui-disclosure-border: transparent;
+  --_kui-disclosure-background: transparent;
+
+  display: block;
+  min-width: 0;
+  margin: 0 var(--kui-layout-inline-margin, 0.5rem);
+  padding: 0;
+  box-sizing: border-box;
+  border: var(--kui-layout-item-border-width, 1px) solid
+    var(--_kui-disclosure-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: inherit;
+  background: var(--_kui-disclosure-background);
+}
+
+.kui-disclosure[data-appearance="framed"] {
+  --_kui-disclosure-border: var(--kui-color-neutral-border-normal);
+}
+
+.kui-disclosure[data-appearance="sunken"] {
+  --_kui-disclosure-border: var(--kui-color-neutral-border-normal);
+  --_kui-disclosure-background: var(--kui-sunken-surface);
+}
+
+.kui-disclosure__summary {
+  display: flex;
+  min-height: 2.625rem;
+  box-sizing: border-box;
+  margin: 0;
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--kui-space-xs);
+  border-radius: inherit;
+  font-weight: var(--kui-font-weight-semibold, 500);
+  list-style: none;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* The DisclosureArrow is the marker; drop the platform's, and any marker a
+   page-wide details stylesheet (such as Web Awesome's native.css) adds. */
+.kui-disclosure__summary::after {
+  content: none;
+}
+
+.kui-disclosure__summary::-webkit-details-marker {
+  display: none;
+}
+
+.kui-disclosure__summary::marker {
+  content: "";
+}
+
+.kui-disclosure__summary:hover {
+  background: var(--kui-color-neutral-fill-quiet);
+}
+
+.kui-disclosure__summary:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+.kui-disclosure__title {
+  min-width: 0;
+  flex: 1;
+  overflow-wrap: anywhere;
+}
+
+.kui-disclosure__detail {
+  flex: none;
+  color: var(--kui-color-text-quiet);
+  font-weight: normal;
+}
+
+/* Kerf block content (Text, a List, a ValueTable) brings the shared 1px +
+   8px inset, so the content area adds only what puts that inset on the
+   title's text column: the arrow and the summary gap, less the 1px border
+   the content draws. Its own bottom inset closes the item. */
+.kui-disclosure__content {
+  padding-inline: calc(
+      var(--kui-disclosure-arrow-size, 1.125rem) + var(--kui-space-xs) -
+        var(--kui-layout-item-border-width, 1px)
+    )
+    0;
+}
+
+@media (forced-colors: active) {
+  .kui-disclosure[data-appearance="framed"],
+  .kui-disclosure[data-appearance="sunken"] {
+    border-color: CanvasText;
+  }
+}