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

package/dist/styles/components/actions/button/button.css

@@ -0,0 +1,293 @@
+/* Button: a native button (or link) at the 44px control height. The tone
+   picks the color family and the emphasis how loudly it asks; both resolve
+   to the private fill, text, and border colors below. */
+.kui-button {
+  --_kui-button-fill: var(--kui-color-neutral-fill-loud);
+  --_kui-button-text: var(--kui-color-neutral-on-loud);
+  --_kui-button-border: transparent;
+  --_kui-button-quiet: var(--kui-color-neutral-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-neutral-on-quiet);
+  --_kui-button-outline: var(--kui-color-neutral-border-loud);
+  --_kui-button-height: round(2.75em, 1px);
+  position: relative;
+  display: inline-flex;
+  box-sizing: border-box;
+  height: var(--_kui-button-height);
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0 0.5rem;
+  margin: 0;
+  /* Never the platform's native button drawing, like the other Kerf controls. */
+  appearance: none;
+  color: var(--_kui-button-text);
+  font: inherit;
+  font-size: var(--kui-font-m, 1rem);
+  font-weight: 500;
+  line-height: normal;
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: 1px solid var(--_kui-button-border);
+  /* The shared control radius native controls, fields, and Select follow. */
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background-color: var(--_kui-button-fill);
+  cursor: pointer;
+  transition:
+    background-color 75ms,
+    border-color 75ms,
+    color 75ms;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.kui-button[data-tone="brand"] {
+  --_kui-button-fill: var(--kui-color-brand-fill-loud);
+  --_kui-button-text: var(--kui-color-brand-on-loud);
+  --_kui-button-quiet: var(--kui-color-brand-fill-quiet);
+  /* A quiet hover fill can be stronger than the page (including app-owned
+     palettes), so darken the brand label enough for text on that fill. */
+  --_kui-button-on-quiet: light-dark(
+    oklch(from var(--kui-color-brand-on-quiet) min(l, 0.38) c h),
+    var(--kui-color-brand-on-quiet)
+  );
+  --_kui-button-outline: var(--kui-color-brand-border-loud);
+}
+.kui-button[data-tone="success"] {
+  --_kui-button-fill: var(--kui-color-success-fill-loud);
+  --_kui-button-text: var(--kui-color-success-on-loud);
+  --_kui-button-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-success-on-fill);
+  --_kui-button-outline: var(--kui-color-success-border-loud);
+}
+.kui-button[data-tone="danger"] {
+  --_kui-button-fill: var(--kui-color-danger-fill-loud);
+  --_kui-button-text: var(--kui-color-danger-on-loud);
+  --_kui-button-quiet: var(--kui-color-danger-fill-quiet);
+  --_kui-button-on-quiet: var(--kui-color-danger-on-quiet);
+  --_kui-button-outline: var(--kui-color-danger-border-loud);
+}
+/* A secondary button is outlined in its tone; a plain one shows only its
+   text. Both take a quiet tone fill under the pointer. */
+.kui-button[data-emphasis="secondary"],
+.kui-button[data-emphasis="plain"] {
+  --_kui-button-fill: transparent;
+  --_kui-button-text: var(--_kui-button-on-quiet);
+}
+.kui-button[data-emphasis="secondary"] {
+  --_kui-button-border: var(--_kui-button-outline);
+}
+.kui-button[data-size="compact"] {
+  --_kui-button-height: round(calc(1rem + 1.2em), 1px);
+  font-size: var(--kui-font-s, 0.875rem);
+}
+/* An icon-only button is a square one control height on each side, which a
+   tight row never squeezes. */
+.kui-button[data-icon-only] {
+  width: var(--_kui-button-height);
+  flex-shrink: 0;
+  padding: 0;
+}
+/* fill: the button spans its parent's available inline width, as a filled
+   SplitButton does. The label stays centered and ellipsizes once it no longer
+   fits; an icon-only button that fills spans too. */
+.kui-button[data-fill="true"] {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+}
+.kui-button[data-fill="true"] > .kui-button__label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/* A pill: fully round ends (a circle when icon-only). */
+.kui-button[data-shape="pill"] {
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+}
+/* A pressed neutral toggle takes the brand accent, as a pressed toolbar group
+   control and a selected chip do; semantic tones keep their own color. */
+.kui-button[aria-pressed="true"]:not(
+    [data-tone="brand"],
+    [data-tone="success"],
+    [data-tone="danger"]
+  ) {
+  --_kui-button-fill: var(--kui-color-brand-fill-loud);
+  --_kui-button-text: var(--kui-color-brand-on-loud);
+  --_kui-button-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-button-on-quiet: light-dark(
+    oklch(from var(--kui-color-brand-on-quiet) min(l, 0.38) c h),
+    var(--kui-color-brand-on-quiet)
+  );
+  --_kui-button-outline: var(--kui-color-brand-border-loud);
+}
+/* A pressed toggle draws on top of its tone and emphasis. Secondary and plain
+   take the tone's quiet fill with a doubled tone outline; primary keeps its
+   loud fill (darkened for semantic tones) with an inset ring. The second pixel of outline marks
+   the state without relying on hue. */
+.kui-button[aria-pressed="true"]:is(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: var(--_kui-button-quiet);
+  --_kui-button-text: var(--_kui-button-on-quiet);
+  --_kui-button-border: var(--_kui-button-outline);
+  box-shadow: inset 0 0 0 1px var(--_kui-button-outline);
+}
+.kui-button[aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  box-shadow: inset 0 0 0 2px
+    color-mix(in oklab, var(--_kui-button-text) 45%, transparent);
+}
+.kui-button[data-tone="brand"][aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: color-mix(
+    in oklab,
+    var(--kui-color-brand-fill-loud),
+    light-dark(#000, #fff) 18%
+  );
+}
+.kui-button[data-tone="success"][aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: color-mix(
+    in oklab,
+    var(--kui-color-success-fill-loud),
+    light-dark(#000, #fff) 18%
+  );
+}
+.kui-button[data-tone="danger"][aria-pressed="true"]:not(
+    [data-emphasis="secondary"],
+    [data-emphasis="plain"]
+  ) {
+  --_kui-button-fill: color-mix(
+    in oklab,
+    var(--kui-color-danger-fill-loud),
+    light-dark(#000, #fff) 18%
+  );
+}
+@media (hover: hover) {
+  .kui-button[aria-pressed="true"]:is(
+      [data-emphasis="secondary"],
+      [data-emphasis="plain"]
+    ):not(:disabled, [aria-disabled="true"], [data-loading]):hover {
+    background-color: color-mix(
+      in oklab,
+      var(--_kui-button-quiet),
+      var(--_kui-button-outline) 12%
+    );
+  }
+}
+@media (forced-colors: active) {
+  .kui-button[aria-pressed="true"] {
+    border-color: Highlight;
+    color: HighlightText;
+    background: Highlight;
+  }
+}
+/* In a Toolbar's trailing zone, a standalone Button keeps the first control
+   band's axis, as a ToolbarControlGroup does, so taller siblings never move
+   it. `--_kui-toolbar-band` is the context the Toolbar provides. */
+.kui-toolbar__trailing > .kui-button {
+  flex: 0 0 auto;
+  align-self: flex-start;
+  margin-block-start: max(
+    0px,
+    calc((var(--_kui-toolbar-band) - var(--_kui-button-height)) / 2)
+  );
+}
+/* Beside a field in a ListInsetControl, the square keeps its size instead of
+   growing to share the row, and lines up with the field below its label. */
+.kui-list-inset-control > .kui-button[data-icon-only] {
+  flex: none;
+  align-self: flex-end;
+}
+@media (hover: hover) {
+  .kui-button:not(:disabled, [aria-disabled="true"], [data-loading]):hover {
+    background-color: color-mix(
+      in oklab,
+      var(--_kui-button-fill),
+      oklch(from currentColor calc(1 - l) c h) 10%
+    );
+  }
+  .kui-button:is([data-emphasis="secondary"], [data-emphasis="plain"]):not(
+      :disabled,
+      [aria-disabled="true"],
+      [data-loading]
+    ):hover {
+    background-color: var(--_kui-button-quiet);
+  }
+}
+.kui-button:not(:disabled, [aria-disabled="true"], [data-loading]):active {
+  background-color: color-mix(
+    in oklab,
+    var(--_kui-button-fill),
+    light-dark(#fff, #1c1c1e) 10%
+  );
+}
+.kui-button:focus {
+  outline: none;
+}
+.kui-button:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+/* focusRingInset: inside an ancestor that clips overflow, the ring moves
+   inside the box. On a loud fill the ring can share the fill's hue (brand),
+   so a surface-colored line runs inside it: the ring then meets the surface
+   on both edges, as the outside ring does, whatever the fill. The line is an
+   inset shadow from the padding edge (inside the 1px border) to 3px past the
+   ring, wide enough to stay solid at a fractional position; a pressed
+   toggle's inset ring lies under the focus ring meanwhile. The line paints
+   the surface the button sits on: the surface context's opaque color with
+   its translucent tint (a sunken or quiet fill) layered over it
+   (foundation.css), so it reads as a cut through the fill, not a halo. */
+.kui-button[data-focus-ring-inset="true"]:focus-visible {
+  outline-offset: -3px;
+  box-shadow:
+    inset 0 0 0 5px var(--kui-color-surface-current-tint, transparent),
+    inset 0 0 0 5px var(--kui-color-surface-current-region, transparent),
+    inset 0 0 0 5px var(--kui-color-surface-current, var(--kui-color-surface));
+}
+.kui-button:is(:disabled, [aria-disabled="true"]) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+/* Keep a disabled positive action quiet without fading its label below text
+   contrast. The subdued fill and border mark it unavailable. */
+.kui-button[data-tone="success"]:is(:disabled, [aria-disabled="true"]) {
+  --_kui-button-fill: var(--kui-color-success-fill-quiet);
+  --_kui-button-text: var(--kui-color-success-on-fill);
+  --_kui-button-border: var(--kui-color-success-border-quiet);
+  opacity: 1;
+}
+.kui-button__icon {
+  display: inline-flex;
+  flex: none;
+}
+.kui-button__label {
+  min-width: 0;
+}
+/* Busy: the spinner takes the label's place. The label keeps the width and
+   is only transparent, not hidden, so it still names the button. */
+.kui-button[data-loading] {
+  cursor: wait;
+}
+.kui-button[data-loading] > :is(.kui-button__label, .kui-button__icon) {
+  opacity: 0;
+}
+.kui-button__spinner {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+}
+@media (forced-colors: active) {
+  .kui-button {
+    border-color: ButtonText;
+  }
+}

package/dist/styles/components/actions/floating-toolbar/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;
+}