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

package/dist/styles/components/typography/text/text.css

@@ -0,0 +1,232 @@
+.kui-text {
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  margin: 0;
+  white-space: normal;
+  overflow-wrap: normal;
+}
+
+/* Match every Kerf form control's label (TextField, Select) without
+   introducing a native <label> that would falsely point at a non-form
+   preview. */
+.kui-text__field-label {
+  box-sizing: border-box;
+  min-width: 0;
+  padding-inline: calc(1px + var(--kui-layout-item-padding, 0.5rem));
+  margin: 0 0 0.5em;
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+  text-transform: uppercase;
+}
+
+.kui-text[data-wrap="anywhere"] {
+  overflow-wrap: anywhere;
+}
+
+.kui-text[data-wrap="nowrap"] {
+  white-space: nowrap;
+}
+
+.kui-text[data-wrap="truncate"] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+span.kui-text[data-wrap="truncate"] {
+  display: inline-block;
+  max-width: 100%;
+}
+
+/* Tail-preserving truncation: the clip box runs right to left so its ellipsis
+   lands at the start, while the isolated left-to-right run keeps the text's
+   own order and punctuation. Short text that fits stays left-aligned. */
+.kui-text__truncate-start {
+  display: block;
+  overflow: hidden;
+  direction: rtl;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Middle truncation: the head shrinks to an ellipsis while the kept suffix
+   (the last path segment) stays whole. Pre keeps a space at the split. */
+.kui-text__truncate-middle {
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.kui-text__truncate-head,
+.kui-text__truncate-tail {
+  white-space: pre;
+}
+
+.kui-text__truncate-head {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kui-text__truncate-tail {
+  flex: 0 0 auto;
+}
+
+.kui-text__clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_kui-text-max-lines);
+}
+
+.kui-text[data-tone="quiet"] {
+  color: var(--kui-color-text-quiet);
+}
+
+.kui-text[data-tone="danger"] {
+  color: var(--kui-color-danger-on-quiet);
+}
+
+.kui-text[data-size="compact"] {
+  font-size: var(--kui-font-xs);
+}
+
+.kui-text[data-size="medium"] {
+  font-size: var(--kui-font-m);
+}
+
+.kui-text[data-size="large"] {
+  font-size: var(--kui-font-l);
+}
+
+.kui-text[data-size="xlarge"] {
+  font-size: var(--kui-font-2xl);
+}
+
+.kui-text[data-font="monospace"] {
+  font-family: var(--kui-font-mono);
+}
+
+.kui-text[data-border="none"] {
+  border: 0;
+}
+
+.kui-text[data-flush="true"] {
+  padding: 0;
+  border: 0;
+}
+
+.kui-text[data-line-height="tight"] {
+  line-height: 1.2;
+}
+
+/* Inline alignment. The truncation boxes carry their own direction or flex
+   layout, so each aligns its single line explicitly. */
+.kui-text[data-align="center"] {
+  text-align: center;
+}
+
+.kui-text[data-align="end"] {
+  text-align: end;
+}
+
+.kui-text[data-align="center"] > .kui-text__truncate-start {
+  text-align: center;
+}
+
+.kui-text[data-align="end"] > .kui-text__truncate-start {
+  text-align: right;
+}
+
+.kui-text[data-align="center"] > .kui-text__truncate-middle {
+  justify-content: center;
+}
+
+.kui-text[data-align="end"] > .kui-text__truncate-middle {
+  justify-content: flex-end;
+}
+
+span.kui-text {
+  margin: 0;
+  border: 0;
+  padding: 0;
+}
+
+/* A ListHeader's label: the title's single text child, set as a compact,
+   uppercase, single-line label that truncates with an ellipsis. The title is
+   a div around a heading or, for a toggle header, the toggle button around
+   an inline span. */
+.kui-list-header__title > .kui-text {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/* A wrapping header keeps the whole label: it breaks onto further lines
+   instead of ellipsizing, and `anywhere` lets a single long word break too, so
+   the label's minimum width never pushes the header past its column. */
+.kui-list-header[data-wrap="true"] .kui-list-header__title > .kui-text {
+  overflow: visible;
+  overflow-wrap: anywhere;
+  text-overflow: clip;
+  white-space: normal;
+}
+
+.kui-list-header[data-size="xs"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-2xs);
+  text-transform: capitalize;
+}
+
+.kui-list-header:is([data-size="m"], [data-size="l"], [data-size="xl"])
+  .kui-list-header__title
+  > .kui-text {
+  font-family: var(--kui-font-sans);
+  font-weight: 600;
+  letter-spacing: normal;
+  line-height: 1.2;
+  text-transform: none;
+}
+
+.kui-list-header[data-size="m"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-m);
+}
+
+.kui-list-header[data-size="l"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-l);
+}
+
+.kui-list-header[data-size="xl"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-xl);
+}
+
+/* Exterior control gutters preserve the Text-owned border and padding.
+   These rules follow inline/context resets so an explicit prop also works there. */
+
+.kui-text[data-control-margins*="t"] {
+  margin-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="r"] {
+  margin-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="b"] {
+  margin-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="l"] {
+  margin-left: var(--kui-layout-inline-margin, 0.5rem);
+}

package/dist/styles/content-item.css

@@ -0,0 +1,168 @@
+/* One self-contained content-item: 8px inline margin, a real 1px border
+   (transparent unless framed), 8px padding, and a rounded or pill radius.
+   Rendered by ContentItem; the classes stay public for other elements. */
+
+.kui-content-item {
+  min-width: 0;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: var(--kui-layout-item-border-width, 1px) solid
+    var(--kui-content-item-border, transparent);
+  border-radius: var(
+    --kui-content-item-radius,
+    var(--kui-layout-rounded-radius, calc(1px + 0.6875rem))
+  );
+  color: var(--kui-content-item-foreground, inherit);
+  background: var(--kui-content-item-background, transparent);
+}
+
+.kui-content-item--pill {
+  --kui-content-item-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+}
+
+.kui-content-item--flush {
+  padding-block: 0;
+  border-block-width: 0;
+}
+
+/* A visible frame for a content item that marks a real distinction: the
+   standard neutral border, same geometry (the border is always reserved). */
+.kui-content-item--framed {
+  --kui-content-item-border: var(--kui-color-neutral-border-normal);
+}
+
+.kui-content-item[data-appearance="surface"] {
+  --kui-content-item-border: var(--kui-color-neutral-border-normal);
+  --kui-content-item-background: var(--kui-color-surface);
+  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
+}
+
+.kui-content-item[data-appearance="neutral"] {
+  --kui-content-item-border: var(--kui-color-neutral-border-normal);
+  --kui-content-item-background: var(--kui-color-neutral-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
+}
+
+.kui-content-item[data-appearance="info"] {
+  --kui-content-item-border: var(--kui-color-brand-border-quiet);
+  --kui-content-item-background: var(--kui-color-brand-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-brand-on-fill);
+}
+
+.kui-content-item[data-appearance="pop"] {
+  --kui-content-item-border: var(--kui-color-pop-border-normal);
+  --kui-content-item-background: var(--kui-color-pop-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-pop-on-fill);
+}
+
+.kui-content-item[data-appearance="success"] {
+  --kui-content-item-border: var(--kui-color-success-border-normal);
+  --kui-content-item-background: var(--kui-color-success-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-success-on-fill);
+}
+
+.kui-content-item[data-appearance="warning"] {
+  --kui-content-item-border: var(--kui-color-warning-border-normal);
+  --kui-content-item-background: var(--kui-color-warning-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-warning-on-fill);
+}
+
+.kui-content-item[data-appearance="brand-loud"] {
+  --kui-content-item-border: var(--kui-color-brand-border-loud);
+  --kui-content-item-background: var(--kui-color-brand-fill-loud);
+  --kui-content-item-foreground: var(--kui-color-brand-on-loud);
+}
+
+/* Chat bubble: the item shrinks to its content up to 80% of the row and sits
+   at the start or end of the line; long unbroken text wraps inside it. */
+.kui-content-item[data-bubble] {
+  width: fit-content;
+  max-width: 80%;
+  overflow-wrap: anywhere;
+}
+
+.kui-content-item[data-bubble="end"] {
+  margin-inline-start: auto;
+}
+
+.kui-content-item[data-appearance="danger"] {
+  --kui-content-item-border: var(--kui-color-danger-border-quiet);
+  --kui-content-item-background: var(--kui-color-danger-fill-quiet);
+  --kui-content-item-foreground: var(--kui-color-danger-on-fill);
+}
+
+.kui-content-item[data-interactive="true"] {
+  color: var(--kui-content-item-foreground, var(--kui-color-neutral-on-normal));
+  cursor: pointer;
+}
+
+.kui-content-item[data-interactive="true"]:hover:not(
+    [data-disabled="true"],
+    [data-selected="true"]
+  ),
+.kui-content-item[data-interactive="true"][data-kui-pressed="true"]:not(
+    [data-selected="true"]
+  ) {
+  --kui-content-item-border: var(--kui-color-neutral-border-normal);
+  --kui-content-item-background: var(--kui-color-neutral-fill-normal);
+  --kui-content-item-foreground: var(--kui-color-neutral-on-normal);
+}
+
+.kui-content-item[data-interactive="true"]:active:not([data-disabled="true"]) {
+  --kui-content-item-background: color-mix(
+    in srgb,
+    var(--kui-color-neutral-fill-normal) 75%,
+    var(--kui-color-neutral-fill-loud)
+  );
+}
+
+.kui-content-item[data-interactive="true"][data-selected="true"] {
+  --kui-content-item-border: var(--kui-color-brand-border-quiet);
+  --kui-content-item-background: var(--kui-color-brand-fill-normal);
+  --kui-content-item-foreground: var(--kui-color-brand-on-fill);
+}
+
+/* The surface context follows the fill an item paints: a quiet appearance,
+   a hover, press, or selection. A transparent item keeps its parent's
+   context; a brand-loud fill shares the focus ring's hue, so a control on it
+   keeps the surface line. A surface appearance is opaque, so it resets. */
+.kui-content-item:is(
+  [data-appearance]:not(
+    [data-appearance="transparent"],
+    [data-appearance="brand-loud"]
+  ),
+  [data-interactive="true"]:hover:not([data-disabled="true"]),
+  [data-interactive="true"]:is(
+    [data-kui-pressed="true"],
+    [data-selected="true"]
+  )
+) {
+  --kui-color-surface-current-tint: var(--kui-content-item-background);
+}
+
+.kui-content-item[data-appearance="surface"]:not(
+    [data-interactive="true"]:is(
+      :hover,
+      [data-kui-pressed="true"],
+      [data-selected="true"]
+    )
+  ) {
+  --kui-color-surface-current: var(--kui-color-surface);
+  --kui-color-surface-current-region: transparent;
+  --kui-color-surface-current-tint: transparent;
+}
+
+.kui-content-item:is(:focus-visible, [data-outlined="true"]) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-content-item[data-interactive="true"][data-disabled="true"] {
+  color: var(--kui-color-neutral-on-quiet);
+  opacity: 0.58;
+  cursor: not-allowed;
+}

package/dist/styles/content-swap.css

@@ -0,0 +1,154 @@
+/* Both sides share one grid cell, so the region keeps the active side's
+   height; the inactive side is taken out of flow, clipped, and hidden once its
+   exit animation ends (each keyframe keeps it visible while it runs). */
+.kui-content-swap {
+  --_kui-content-swap-dir: 1;
+  --_kui-content-swap-duration: 280ms;
+  position: relative;
+  display: grid;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.kui-content-swap:dir(rtl) {
+  --_kui-content-swap-dir: -1;
+}
+
+.kui-content-swap[data-fill="true"] {
+  width: 100%;
+}
+
+.kui-content-swap__side {
+  min-width: 0;
+  grid-area: 1 / 1;
+}
+
+.kui-content-swap__side[data-active="false"] {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Motion runs only when the viewer has not asked for reduced motion. */
+@media (prefers-reduced-motion: no-preference) {
+  /* Push forward: a leaves toward the start, b arrives from the end. */
+  .kui-content-swap[data-transition="push"][data-active-side="b"][data-direction="forward"]
+    > [data-side="a"],
+  .kui-content-swap[data-transition="push"][data-active-side="a"][data-direction="forward"]
+    > [data-side="b"] {
+    animation: kui-content-swap-out-start var(--_kui-content-swap-duration)
+      cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  .kui-content-swap[data-transition="push"][data-active-side="b"][data-direction="forward"]
+    > [data-side="b"],
+  .kui-content-swap[data-transition="push"][data-active-side="a"][data-direction="forward"]
+    > [data-side="a"] {
+    animation: kui-content-swap-in-end var(--_kui-content-swap-duration)
+      cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  /* Push backward: the mirror image. */
+  .kui-content-swap[data-transition="push"][data-active-side="a"][data-direction="backward"]
+    > [data-side="b"],
+  .kui-content-swap[data-transition="push"][data-active-side="b"][data-direction="backward"]
+    > [data-side="a"] {
+    animation: kui-content-swap-out-end var(--_kui-content-swap-duration)
+      cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  .kui-content-swap[data-transition="push"][data-active-side="a"][data-direction="backward"]
+    > [data-side="a"],
+  .kui-content-swap[data-transition="push"][data-active-side="b"][data-direction="backward"]
+    > [data-side="b"] {
+    animation: kui-content-swap-in-start var(--_kui-content-swap-duration)
+      cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .kui-content-swap[data-transition="crossfade"]
+    > .kui-content-swap__side[data-active="true"] {
+    animation: kui-content-swap-fade-in 200ms ease-out;
+  }
+  .kui-content-swap[data-transition="crossfade"]
+    > .kui-content-swap__side[data-active="false"] {
+    animation: kui-content-swap-fade-out 200ms ease-out;
+  }
+}
+
+@keyframes kui-content-swap-in-end {
+  from {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(calc(100% * var(--_kui-content-swap-dir)));
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes kui-content-swap-in-start {
+  from {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(calc(-100% * var(--_kui-content-swap-dir)));
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes kui-content-swap-out-start {
+  from {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(calc(-100% * var(--_kui-content-swap-dir)));
+  }
+}
+@keyframes kui-content-swap-out-end {
+  from {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(calc(100% * var(--_kui-content-swap-dir)));
+  }
+}
+@keyframes kui-content-swap-fade-in {
+  from {
+    visibility: visible;
+    opacity: 0;
+  }
+  to {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+@keyframes kui-content-swap-fade-out {
+  from {
+    visibility: visible;
+    opacity: 1;
+  }
+  to {
+    visibility: visible;
+    opacity: 0;
+  }
+}
+
+/* Reduced motion: no slide; a push or crossfade swaps with a short fade. */
+@media (prefers-reduced-motion: reduce) {
+  .kui-content-swap:is([data-transition="push"], [data-transition="crossfade"])
+    > .kui-content-swap__side[data-active="true"] {
+    animation: kui-content-swap-fade-in 120ms ease-out;
+  }
+}

package/dist/styles/corner-status.css

@@ -0,0 +1,60 @@
+/* The host only places the stack: the composed banners own their fill,
+   border, and padding. A native popover's UA box (inset 0, auto margin,
+   border, padding, Canvas background, scrolling) is reset so the stack sizes
+   to its banners in the chosen corner. Stacked banners share the widest
+   banner's width, so a stack reads as one aligned column. */
+.kui-corner-status {
+  --_kui-corner-status-gutter: var(
+    --kui-corner-status-gutter,
+    var(--kui-space-m)
+  );
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: var(--kui-space-xs);
+  width: max-content;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  color: inherit;
+  background: transparent;
+}
+.kui-corner-status[data-presentation="overlay"] {
+  position: fixed;
+  z-index: var(--kui-corner-status-z-index, 1000);
+  inset: auto;
+  max-width: calc(
+    100vw - 2 * var(--_kui-corner-status-gutter) -
+      var(--kui-safe-area-inline-start) - var(--kui-safe-area-inline-end)
+  );
+}
+/* A browser with the Popover API hides the host until wireCornerStatus opens
+   it; without the API the fixed host simply shows. */
+.kui-corner-status[data-presentation="overlay"][popover]:not(:popover-open) {
+  display: none;
+}
+.kui-corner-status[data-placement^="top"] {
+  inset-block-start: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-block-start)
+  );
+}
+.kui-corner-status[data-placement^="bottom"] {
+  inset-block-end: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-block-end)
+  );
+}
+.kui-corner-status[data-placement$="-start"] {
+  inset-inline-start: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-inline-start)
+  );
+}
+.kui-corner-status[data-placement$="-end"] {
+  inset-inline-end: calc(
+    var(--_kui-corner-status-gutter) + var(--kui-safe-area-inline-end)
+  );
+}
+.kui-corner-status[data-presentation="embedded"] {
+  position: static;
+}

package/dist/styles/disclosure-arrow.css

@@ -16,6 +16,26 @@
   height: 100%;
 }
 
+/* In a Disclosure the native <details> owns the open state, so the arrow
+   follows its live [open] rather than the render-time rotation. */
+.kui-disclosure > .kui-disclosure__summary > .kui-disclosure-arrow {
+  transform: rotate(0deg);
+}
+
+.kui-disclosure[open] > .kui-disclosure__summary > .kui-disclosure-arrow {
+  transform: rotate(90deg);
+}
+
+.kui-disclosure:dir(rtl) > .kui-disclosure__summary > .kui-disclosure-arrow {
+  transform: rotate(180deg);
+}
+
+.kui-disclosure[open]:dir(rtl)
+  > .kui-disclosure__summary
+  > .kui-disclosure-arrow {
+  transform: rotate(90deg);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .kui-disclosure-arrow {
     transition-duration: 0s;