@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

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

@@ -0,0 +1,119 @@
+.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,
+     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: 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: 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: 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: 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. */
+.kui-floating-toolbar[data-position="bottom"],
+.kui-floating-toolbar[data-position="top"] {
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+}
+
+.kui-floating-toolbar[data-placement="inline"] {
+  position: static;
+  transform: none;
+}