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

package/dist/styles/disclosure.css

@@ -0,0 +1,136 @@
+/* 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-color-surface-current-tint: var(--kui-color-surface-lowered);
+}
+
+.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;
+}
+
+/* Embedded: inside owner chrome, such as a ContentItem, that already draws
+   the margin, border, and padding. The root adds none of its own, so the
+   arrow sits on the owner's content inset (icons align to icons), and the
+   summary is a compact inline row. The content expects no inset of its own
+   (a flush Text, inline copy) and starts on the title's text column, one
+   item gap below the summary. A hover fill would touch the arrow and text at
+   the owner's content edge, so the embedded summary keeps only its pointer
+   cursor and draws its focus ring just outside the row. */
+.kui-disclosure[data-appearance="embedded"] {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+}
+
+.kui-disclosure[data-appearance="embedded"] > .kui-disclosure__summary {
+  min-height: 1.5rem;
+  padding: 0;
+  border-radius: var(--kui-radius-s, 0.1875rem);
+}
+
+.kui-disclosure[data-appearance="embedded"] > .kui-disclosure__summary:hover {
+  background: none;
+}
+
+.kui-disclosure[data-appearance="embedded"]
+  > .kui-disclosure__summary:focus-visible {
+  outline-offset: 0.125rem;
+}
+
+.kui-disclosure[data-appearance="embedded"] > .kui-disclosure__content {
+  padding-block: var(--kui-layout-item-gap, 0.5rem) 0;
+  padding-inline: calc(
+      var(--kui-disclosure-arrow-size, 1.125rem) + var(--kui-space-xs)
+    )
+    0;
+}
+
+@media (forced-colors: active) {
+  .kui-disclosure[data-appearance="framed"],
+  .kui-disclosure[data-appearance="sunken"] {
+    border-color: CanvasText;
+  }
+}

package/dist/styles/document.css

@@ -0,0 +1,98 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+.kui-app-root {
+  height: 100%;
+}
+
+html {
+  background: var(--kui-color-surface);
+}
+
+body {
+  margin: 0;
+  color: var(--kui-color-text);
+  background: var(--kui-color-surface-lowered);
+  font-family: var(--kui-font-sans);
+  line-height: 1.45;
+}
+
+/* Opt-in viewport lock for a full-viewport application shell: the dynamic
+   viewport height keeps mobile browser toolbars and the on-screen keyboard
+   from leaving the root taller than the visible area, and clipping (not
+   hidden overflow) leaves the document with no scroll container, so only the
+   shell's Panes scroll. The mount container must be a direct child of body. */
+html:has(> body > .kui-app-root[data-viewport="locked"]),
+body:has(> .kui-app-root[data-viewport="locked"]),
+body > .kui-app-root[data-viewport="locked"] {
+  height: 100dvh;
+  overflow: clip;
+}
+
+:where(button, input, select, textarea, th, td) {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+:where(a) {
+  color: var(--kui-color-text-link);
+}
+
+/* Semantic cursors for native controls, which browsers draw with the default
+   arrow. Zero specificity keeps component and application cursors in charge. */
+:where(
+  button:enabled,
+  a[href],
+  [role="button"]:not([aria-disabled="true"]),
+  summary,
+  label:has(> input:is([type="checkbox"], [type="radio"]):enabled),
+  select:enabled,
+  input:is(
+      [type="button"],
+      [type="checkbox"],
+      [type="color"],
+      [type="file"],
+      [type="radio"],
+      [type="reset"],
+      [type="submit"]
+    ):enabled
+) {
+  cursor: pointer;
+}
+
+:where(
+  button:disabled,
+  input:disabled,
+  select:disabled,
+  textarea:disabled,
+  [role="button"][aria-disabled="true"]
+) {
+  cursor: not-allowed;
+}
+
+:where(
+  textarea:enabled,
+  input:is(
+      :not([type]),
+      [type="email"],
+      [type="number"],
+      [type="password"],
+      [type="search"],
+      [type="tel"],
+      [type="text"],
+      [type="url"]
+    ):enabled
+) {
+  cursor: text;
+}
+
+/* Web Awesome keeps a pointer on a disabled button's base part. */
+:where(wa-button[disabled])::part(base) {
+  cursor: not-allowed;
+}

package/dist/styles/edge-activity-indicator.css

@@ -0,0 +1,127 @@
+/* A fixed, layout-free host at the top edge: it allocates no space and never
+   takes the pointer. Its strip and pill scale in from the edge while busy. */
+.kui-edge-activity-indicator {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-brand-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-brand-on-loud);
+  position: fixed;
+  z-index: var(--kui-edge-activity-indicator-z-index, 2147483000);
+  inset: var(--kui-safe-area-block-start, 0px) 0 auto 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.kui-edge-activity-indicator[data-inset="none"] {
+  inset-block-start: 0;
+}
+
+.kui-edge-activity-indicator[data-tone="neutral"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-neutral-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-neutral-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="pop"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-pop-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-pop-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="success"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-success-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-success-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="warning"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-warning-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-warning-on-loud);
+}
+.kui-edge-activity-indicator[data-tone="danger"] {
+  --_kui-edge-activity-indicator-fill: var(--kui-color-danger-fill-loud);
+  --_kui-edge-activity-indicator-on: var(--kui-color-danger-on-loud);
+}
+
+/* 3px bars on a 5px pitch, drawn by one gradient. A repeating wave mask (1px
+   to 4px tall, hanging from the edge) slides across them, so each bar grows
+   and shrinks slightly out of phase with its neighbor. */
+.kui-edge-activity-indicator__strip,
+.kui-edge-activity-indicator__message {
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: top center;
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease;
+}
+
+.kui-edge-activity-indicator__strip {
+  height: 0.25rem;
+  background: repeating-linear-gradient(
+    90deg,
+    var(--_kui-edge-activity-indicator-fill) 0 0.1875rem,
+    transparent 0.1875rem 0.3125rem
+  );
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='4' viewBox='0 0 100 4'%3E%3Cpath d='M0 0H100L100 1.00 L98 1.01 L96 1.05 L94 1.11 L92 1.19 L90 1.29 L88 1.41 L86 1.54 L84 1.70 L82 1.86 L80 2.04 L78 2.22 L76 2.41 L74 2.59 L72 2.78 L70 2.96 L68 3.14 L66 3.30 L64 3.46 L62 3.59 L60 3.71 L58 3.81 L56 3.89 L54 3.95 L52 3.99 L50 4.00 L48 3.99 L46 3.95 L44 3.89 L42 3.81 L40 3.71 L38 3.59 L36 3.46 L34 3.30 L32 3.14 L30 2.96 L28 2.78 L26 2.59 L24 2.41 L22 2.22 L20 2.04 L18 1.86 L16 1.70 L14 1.54 L12 1.41 L10 1.29 L8 1.19 L6 1.11 L4 1.05 L2 1.01 L0 1.00Z'/%3E%3C/svg%3E")
+    0 0 / 6.25rem 100% repeat-x;
+  animation: kui-edge-activity-indicator-wave 1s linear infinite paused;
+}
+
+.kui-edge-activity-indicator[data-busy="true"]
+  > .kui-edge-activity-indicator__strip {
+  opacity: 1;
+  transform: scaleY(1);
+  animation-play-state: running;
+}
+
+@keyframes kui-edge-activity-indicator-wave {
+  to {
+    mask-position: 6.25rem 0;
+  }
+}
+
+/* The status pill hangs centered from the edge, over the strip. */
+.kui-edge-activity-indicator__message {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  max-width: calc(100vw - 2 * var(--kui-space-m));
+  padding: 0.125rem var(--kui-space-s);
+  overflow: hidden;
+  border-radius: 0 0 0.5rem 0.5rem;
+  color: var(--_kui-edge-activity-indicator-on);
+  background: var(--_kui-edge-activity-indicator-fill);
+  font-size: var(--kui-font-2xs);
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translateX(-50%) scaleY(0);
+}
+
+.kui-edge-activity-indicator__message[data-visible="true"] {
+  opacity: 1;
+  transform: translateX(-50%) scaleY(1);
+}
+
+:dir(rtl) .kui-edge-activity-indicator__message {
+  transform: translateX(50%) scaleY(0);
+}
+:dir(rtl) .kui-edge-activity-indicator__message[data-visible="true"] {
+  transform: translateX(50%) scaleY(1);
+}
+
+/* Reduced motion: no wave and no scale; the strip and pill only fade. */
+@media (prefers-reduced-motion: reduce) {
+  .kui-edge-activity-indicator__strip,
+  .kui-edge-activity-indicator__message {
+    transition: opacity 200ms ease;
+  }
+  .kui-edge-activity-indicator__strip,
+  .kui-edge-activity-indicator[data-busy="true"]
+    > .kui-edge-activity-indicator__strip {
+    mask: none;
+    transform: none;
+    animation: none;
+  }
+  .kui-edge-activity-indicator__message,
+  .kui-edge-activity-indicator__message[data-visible="true"] {
+    transform: translateX(-50%);
+  }
+  :dir(rtl) .kui-edge-activity-indicator__message,
+  :dir(rtl) .kui-edge-activity-indicator__message[data-visible="true"] {
+    transform: translateX(50%);
+  }
+}

package/dist/styles/file-picker.css

@@ -0,0 +1,81 @@
+/* The native file input stays inside each label for activation, keyboard
+   focus, and form submission, visually hidden but accessible. */
+.kui-file-picker__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.kui-file-picker__icon {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+}
+
+/* A compact, link-toned browse trigger. */
+.kui-file-picker[data-presentation="trigger"] {
+  position: relative;
+  display: inline-flex;
+  min-height: 2rem;
+  padding: 0 var(--kui-space-xs);
+  border-radius: var(--kui-radius-pill);
+  color: var(--kui-color-text-link);
+  cursor: pointer;
+  align-items: center;
+  gap: var(--kui-space-2xs);
+  font-size: var(--kui-font-xs);
+  font-weight: var(--kui-font-weight-semibold);
+}
+
+.kui-file-picker[data-presentation="trigger"]:hover {
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+/* A dashed drop target with content-item margins, highlighted on hover and
+   while files are dragged over it. */
+.kui-file-picker[data-presentation="drop-zone"] {
+  position: relative;
+  display: grid;
+  min-height: 5rem;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: var(--kui-space-s);
+  box-sizing: border-box;
+  border: 1px dashed var(--kui-color-neutral-border-loud);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--kui-color-neutral-on-quiet);
+  cursor: pointer;
+  place-items: center;
+  align-content: center;
+  gap: var(--kui-space-2xs);
+  font-size: var(--kui-font-xs);
+  text-align: center;
+}
+
+.kui-file-picker[data-presentation="drop-zone"]:hover,
+.kui-file-picker[data-presentation="drop-zone"][data-dragging="true"] {
+  border-color: var(--kui-color-text-link);
+  background: var(--kui-color-brand-fill-quiet);
+}
+
+.kui-file-picker__title {
+  color: var(--kui-color-text);
+}
+
+.kui-file-picker__detail {
+  font-size: var(--kui-font-2xs);
+}
+
+/* Keyboard focus lands on the hidden input; the visible control shows it. */
+.kui-file-picker:has(> .kui-file-picker__input:focus-visible) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 2px;
+}
+
+.kui-file-picker[data-disabled="true"] {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}

package/dist/styles/floating-toolbar.css

@@ -1,33 +1,109 @@
 .kui-floating-toolbar {
   /* Inset from the container edges: a top toolbar sits 8px in, so this floats an
-     extra 8px past that (--kui-space-m = 16px). Override the token to reposition. */
-  --kui-floating-toolbar-inset: var(--kui-space-m, 1rem);
+     extra 8px past that (--kui-space-m = 16px). Override the token to reposition,
+     on the toolbar or on an ancestor composition boundary. */
+  --_kui-floating-toolbar-inset: var(
+    --kui-floating-toolbar-inset,
+    var(--kui-space-m, 1rem)
+  );
+  --_kui-floating-toolbar-safe-block-start: 0px;
+  --_kui-floating-toolbar-safe-block-end: 0px;
+  --_kui-floating-toolbar-safe-inline-start: 0px;
+  --_kui-floating-toolbar-safe-inline-end: 0px;
 
   /* Floats above the main content of its nearest positioned ancestor. z-index
      stays low so it never covers dialogs/overlays (it is not top-layer). Forced
      dark so the controls read as one distinct floating layer over any theme. */
   position: absolute;
   z-index: 4;
+  /* A layout whose open side overlay covers this toolbar's region (a
+     Workbench rail, a CollapsiblePanel, a ResizableRegion) provides its own
+     covered context to that region, and the toolbar hides — out of the tab
+     order and the accessibility tree — rather than risk painting over the
+     overlay. Any enclosing layout's covered context hides it. */
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
   display: flex;
   color-scheme: dark;
   align-items: center;
   gap: var(--kui-space-xs, 0.5rem);
 }
 
+.kui-floating-toolbar[data-safe-area-insets="true"] {
+  --_kui-floating-toolbar-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-floating-toolbar-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-floating-toolbar-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-floating-toolbar-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+/* In a layout's restore corner the corner already owns the inset, so the
+   toolbar floats from the corner itself. Zero specificity: the toolbar's own
+   `inset` (or an app rule on the toolbar) still wins, while a token inherited
+   from outside the corner does not. */
+:where(
+    .kui-workbench__restore,
+    .kui-collapsible-panel__restore,
+    .kui-resizable-region__restore
+  )
+  :where(.kui-floating-toolbar) {
+  --kui-floating-toolbar-inset: 0px;
+}
+
 .kui-floating-toolbar[data-position^="bottom"] {
-  inset-block-end: var(--kui-floating-toolbar-inset);
+  inset-block-end: calc(
+    var(
+        --kui-floating-toolbar-inset-block-end,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-block-end)
+  );
 }
 
 .kui-floating-toolbar[data-position^="top"] {
-  inset-block-start: var(--kui-floating-toolbar-inset);
+  inset-block-start: calc(
+    var(
+        --kui-floating-toolbar-inset-block-start,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-block-start)
+  );
 }
 
 .kui-floating-toolbar[data-position$="-end"] {
-  inset-inline-end: var(--kui-floating-toolbar-inset);
+  inset-inline-end: calc(
+    var(
+        --kui-floating-toolbar-inset-inline-end,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-inline-end)
+  );
 }
 
 .kui-floating-toolbar[data-position$="-start"] {
-  inset-inline-start: var(--kui-floating-toolbar-inset);
+  inset-inline-start: calc(
+    var(
+        --kui-floating-toolbar-inset-inline-start,
+        var(--_kui-floating-toolbar-inset)
+      ) +
+      var(--_kui-floating-toolbar-safe-inline-start)
+  );
 }
 
 /* The centered edges span from the middle rather than an inline edge. */
@@ -36,3 +112,8 @@
   inset-inline-start: 50%;
   transform: translateX(-50%);
 }
+
+.kui-floating-toolbar[data-placement="inline"] {
+  position: static;
+  transform: none;
+}