@kerfjs/ui 5.0.0-beta.7 → 5.0.0-beta.70

package/dist/styles/app-tab.css

@@ -13,6 +13,9 @@
     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);
   position: relative;
   display: flex;
   width: max-content;
@@ -26,6 +29,68 @@
   align-items: center;
   flex: none;
 }
+.kui-app-tab[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__tabs[data-snap-tabs="true"]
+  > .kui-app-tab:not([data-pinned="true"]) {
+  scroll-snap-align: start;
+}
+.kui-app-tab[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;
+  background: var(
+    --kui-app-tab-pinned-background,
+    var(--_kui-app-tab-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__tabs:dir(rtl)[data-scroll-overflow*="r"]
+  > .kui-app-tab[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-strip-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
+}
+.kui-app-tab[data-pinned="true"]:not([data-selected="true"]):hover {
+  background: var(
+    --kui-app-tab-pinned-hover-background,
+    var(--kui-color-neutral-fill-quiet)
+  );
+}
+.kui-app-tab[data-size="compact"] {
+  height: 2rem;
+}
+.kui-app-tab[data-presentation="segmented"] {
+  border-radius: var(--kui-radius-s);
+  box-shadow: none;
+}
 .kui-app-tab:hover {
   border-color: var(--kui-color-neutral-border-normal);
   background: var(--kui-app-tab-hover-background);
@@ -36,6 +101,11 @@
   background: var(--kui-app-tab-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-app-tab[data-tab-dragging="true"] {
   opacity: 0.55;
 }
@@ -92,12 +162,154 @@
   flex: none;
 }
 .kui-app-tab__name {
+  max-width: var(--kui-app-tab-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 {
+  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-app-tab[data-presentation="icon-only"] .kui-app-tab__select {
+  width: 100%;
+  justify-content: center;
+}
+.kui-app-tab[data-presentation="icon-only"] .kui-app-tab__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-app-tab[data-presentation="icon-only"] {
+  width: 2rem;
+  min-width: 2rem;
+}
+/* TabBar owns the tablist width query; AppTab 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"] {
+    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 {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="wide"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__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-app-tab[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 {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="narrow"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__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-app-tab[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 {
+    width: 100%;
+    justify-content: center;
+  }
+  .kui-tab-bar[data-icon-only-at="compact"]
+    .kui-app-tab[data-presentation="segmented"]
+    .kui-app-tab__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-app-tab: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 {
+  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 {
+  min-width: 0;
+  flex: 1 1 0;
+}
+.kui-tab-bar[data-allocation="fill"]
+  .kui-tab-bar__tabs
+  > .kui-app-tab
+  > .kui-app-tab__select {
+  width: 100%;
+  justify-content: center;
+}
 .kui-app-tab__trailing {
   display: grid;
   min-width: 1.275rem;
@@ -122,6 +334,15 @@
 .kui-app-tab__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 {
+  visibility: hidden;
+}
+.kui-app-tab[data-pending="true"] .kui-app-tab__name {
+  color: var(--kui-color-text-quiet);
+}
 .kui-app-tab__close-icon {
   display: grid;
   width: 0.6375rem;

package/dist/styles/badge.css

@@ -0,0 +1,118 @@
+.kui-badge {
+  --_kui-badge-fill-quiet: var(--kui-color-neutral-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-neutral-on-normal);
+  --_kui-badge-border: var(--kui-color-neutral-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-neutral-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+
+  display: inline-flex;
+  min-width: 0;
+  min-height: 1.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--_kui-badge-on-quiet);
+  background: var(--_kui-badge-fill-quiet);
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.kui-badge[data-tone="brand"] {
+  --_kui-badge-fill-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-brand-on-fill);
+  --_kui-badge-border: var(--kui-color-brand-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-brand-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="pop"] {
+  --_kui-badge-fill-quiet: var(--kui-color-pop-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-pop-on-fill);
+  --_kui-badge-border: var(--kui-color-pop-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-pop-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="success"] {
+  --_kui-badge-fill-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-success-on-fill);
+  --_kui-badge-border: var(--kui-color-success-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-success-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="warning"] {
+  --_kui-badge-fill-quiet: var(--kui-color-warning-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-warning-on-fill);
+  --_kui-badge-border: var(--kui-color-warning-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-warning-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="danger"] {
+  --_kui-badge-fill-quiet: var(--kui-color-danger-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-danger-on-fill);
+  --_kui-badge-border: var(--kui-color-danger-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-danger-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-appearance="solid"] {
+  color: var(--_kui-badge-on-solid);
+  background: var(--_kui-badge-fill-solid);
+}
+
+.kui-badge[data-appearance="outline"] {
+  border-color: var(--_kui-badge-border);
+  color: var(--_kui-badge-on-quiet);
+  background: transparent;
+}
+
+.kui-badge[data-shape="rounded"] {
+  border-radius: var(--kui-radius-s);
+}
+
+.kui-badge[data-size="compact"] {
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  padding-inline: 0.35rem;
+  font-size: var(--kui-font-2xs);
+}
+
+/* The text-free status dot (the iOS "new content" dot): a small solid circle
+   in the tone's solid fill, without the text box's padding or minimum size. */
+.kui-badge[data-size="dot"] {
+  width: 0.5rem;
+  min-width: 0.5rem;
+  height: 0.5rem;
+  min-height: 0.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--_kui-badge-fill-solid);
+}
+
+/* A multiple icon-only Select's count badge, in the trigger's end slot after
+   its fixed icon, sits 4px from the icon (the caret keeps its 12px after it).
+   The summary that ends the Select's label (and accessible name) stays inline
+   text, so a visible label reads "Labels: Bug, Docs" in place of the hidden
+   value. */
+.kui-select > .kui-badge[slot="end"] {
+  margin-inline-start: 0.25rem;
+}
+
+/* A StateBanner's badge follows its title inline and is taller than the
+   title's line. Negative block margins keep it out of the line-height
+   calculation, so a wrapped title's lines stay evenly spaced whichever line
+   the badge lands on. */
+.kui-state-banner__copy > .kui-badge {
+  margin-block: -0.5em;
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
+  vertical-align: baseline;
+}

package/dist/styles/catalog/components/catalog-example-stack.css

@@ -0,0 +1,9 @@
+.kui-catalog-example-stack {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 46rem;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 1rem;
+}

package/dist/styles/catalog/components/catalog-example.css

@@ -0,0 +1,168 @@
+.kui-catalog-example {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.kui-catalog-example__viewport {
+  position: relative;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.kui-catalog-example__viewport > * {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.kui-catalog-example__viewport[data-layout="grid"] {
+  display: grid;
+}
+
+.kui-catalog-example__viewport[data-layout="flex"] {
+  display: flex;
+}
+
+.kui-catalog-example__viewport[data-layout="flex-column"] {
+  display: flex;
+  flex-direction: column;
+}
+
+.kui-catalog-example__viewport[data-width="full"] {
+  width: 100%;
+}
+
+.kui-catalog-example__viewport[data-width="compact"] {
+  width: min(100%, 27.5rem);
+}
+
+.kui-catalog-example__viewport[data-width="medium"] {
+  width: min(100%, 40rem);
+}
+
+.kui-catalog-example__viewport[data-width="wide"] {
+  width: 100%;
+  max-width: 54rem;
+}
+
+.kui-catalog-example__viewport[data-width="text"] {
+  width: 17.5rem;
+}
+
+.kui-catalog-example__viewport[data-width="control"] {
+  min-width: min(24rem, 100%);
+}
+
+.kui-catalog-example__viewport[data-height="short"] {
+  height: 13.75rem;
+}
+
+.kui-catalog-example__viewport[data-height="reduced"] {
+  height: 17.5rem;
+}
+
+.kui-catalog-example__viewport[data-height="medium"] {
+  height: 20rem;
+}
+
+.kui-catalog-example__viewport[data-height="tall"] {
+  height: 22.5rem;
+}
+
+/* An application-sized frame for app shells and whole-screen layouts, which
+   read cramped in the component-sized heights above. The frame stands in for
+   the screen, so it is the containing block for screen-fixed chrome: a compact
+   CollapsiblePanel overlay, its backdrop, and restore controls dock to the
+   frame's edges instead of the page's, where the frame's inset and clip would
+   cut them off. An identity transform establishes that containing block.
+   `contain: layout` does too, but WebKit then mis-hit-tests any transformed
+   descendant of that fixed chrome once the frame also clips (every pressed
+   ListItem scales), so taps on an open overlay's items were lost. */
+.kui-catalog-example__viewport[data-height="app"] {
+  height: 37rem;
+  transform: translate(0);
+}
+
+.kui-catalog-example__viewport[data-min-height="short"] {
+  min-height: 16rem;
+}
+
+.kui-catalog-example__viewport[data-min-height="medium"] {
+  min-height: 20rem;
+}
+
+.kui-catalog-example__viewport[data-frame] {
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-m);
+}
+
+.kui-catalog-example__viewport[data-frame="dashed"] {
+  border-style: dashed;
+}
+
+.kui-catalog-example__viewport[data-surface="default"] {
+  background: var(--kui-color-surface);
+}
+
+.kui-catalog-example__viewport[data-surface="lowered"] {
+  background: var(--kui-color-surface-lowered);
+}
+
+.kui-catalog-example__viewport[data-overflow="hidden"] {
+  overflow: hidden;
+}
+
+.kui-catalog-example__viewport[data-overflow="auto-x"] {
+  overflow-x: auto;
+}
+
+.kui-catalog-example__viewport[data-shadow="true"] {
+  box-shadow: var(--kui-shadow-s);
+}
+
+.kui-catalog-example__compact-fallback {
+  display: none;
+}
+
+@media ((max-width: 52rem)) {
+  .kui-catalog-example__viewport[data-responsive="roomy-only"] {
+    display: none;
+  }
+
+  .kui-catalog-example__compact-fallback {
+    display: block;
+  }
+}
+
+@media ((max-width: 30rem)) {
+  .kui-catalog-example__viewport[data-min-height="medium"] {
+    min-height: 16rem;
+  }
+}
+
+@media ((forced-colors: active)) {
+  .kui-catalog-example__viewport[data-frame] {
+    forced-color-adjust: auto;
+  }
+}
+
+/* The published inset lets the geometry overlay exclude this authoring aid. */
+.kui-catalog-example[data-align="glyph"]
+  > :not([data-catalog-example-label]):not([data-catalog-example-note]) {
+  --kui-catalog-example-align: 1rem;
+  margin-inline-start: var(--kui-catalog-example-align);
+}
+
+.kui-catalog-example[data-align="inline-control"]
+  > :not([data-catalog-example-label]):not([data-catalog-example-note]) {
+  --kui-catalog-example-align: 0.5rem;
+  margin-inline-start: var(--kui-catalog-example-align);
+}
+
+.kui-catalog-example[data-align="text-trigger"] > wa-dropdown > wa-button {
+  margin-inline-start: 0.5rem;
+}

package/dist/styles/catalog/components/catalog-stage.css

@@ -0,0 +1,55 @@
+/* The preview stage fills the work area's scroller — and grows with a taller
+   specimen, never shrinking under it — behind a transparency checkerboard,
+   so a specimen's own surface (or lack of one) stays visible. */
+.kui-catalog__stage {
+  flex: 1 0 auto;
+  background-color: var(--kui-color-surface-lowered);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/svg%3E");
+  background-size: 1.5rem 1.5rem;
+}
+
+/* The centered specimen canvas, at the catalog's reading measure. */
+.kui-catalog__canvas {
+  position: relative;
+  display: grid;
+  width: min(100%, 70rem);
+  min-width: 0;
+  min-height: 100%;
+  margin-inline: auto;
+  padding: var(--kui-layout-content-gap);
+  box-sizing: border-box;
+  place-items: center;
+}
+
+/* `wireCatalogGeometryOverlay` appends the bound, border, and margin layers. */
+/* css-ownership: allow-root kui-catalog__geometry-bound -- The catalog wire appends measured specimen bound layers at runtime. */
+/* css-ownership: allow-root kui-catalog__geometry-border -- The catalog wire appends computed border layers at runtime. */
+/* css-ownership: allow-root kui-catalog__geometry-margin -- The catalog wire appends computed margin layers at runtime. */
+.kui-catalog__geometry-overlay {
+  position: absolute;
+  z-index: 3;
+  pointer-events: none;
+  inset: 0;
+}
+
+.kui-catalog__geometry-bound,
+.kui-catalog__geometry-border,
+.kui-catalog__geometry-margin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+}
+
+.kui-catalog__geometry-bound {
+  border: 1px dashed color-mix(in srgb, var(--kui-color-text) 40%, transparent);
+}
+
+.kui-catalog__geometry-border {
+  border: 0 solid
+    color-mix(in srgb, var(--kui-color-brand-on-quiet) 72%, transparent);
+}
+
+.kui-catalog__geometry-margin {
+  background: color-mix(in srgb, #f6a94c 55%, transparent);
+}

package/dist/styles/catalog/components/catalog.css

@@ -0,0 +1,12 @@
+/* The catalog fills its container, which must have a definite height (the
+   `document.css` baseline's `.kui-app-root`, as for any Workbench). */
+.kui-catalog {
+  height: 100%;
+}
+
+/* The brand mark, sized to sit inside a toolbar group. */
+.kui-catalog__mark {
+  display: block;
+  width: 2.125rem;
+  height: 2.125rem;
+}

package/dist/styles/catalog.css

@@ -0,0 +1,5 @@
+/* Public compatibility entrypoint. Each catalog component owns its styles. */
+@import "./catalog/components/catalog.css";
+@import "./catalog/components/catalog-stage.css";
+@import "./catalog/components/catalog-example.css";
+@import "./catalog/components/catalog-example-stack.css";