@kerfjs/ui 4.4.1 → 5.0.0-beta.11

package/dist/styles/token-search-field.css

@@ -0,0 +1,289 @@
+.kui-token-search {
+  --kui-token-search-background: var(--kui-color-surface);
+  --kui-token-search-border: var(--kui-color-border);
+  --kui-token-search-token-background: var(--kui-color-accent);
+  --kui-token-search-token-foreground: var(--kui-color-accent-text);
+  --kui-token-search-line-size: 2.125rem;
+
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.75rem;
+  padding: 0.25rem 0.5rem;
+  box-sizing: border-box;
+  border: 1px solid var(--kui-token-search-border);
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--kui-color-text);
+  background: var(--kui-token-search-background);
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: start;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+
+.kui-token-search:focus-within {
+  border-color: var(--kui-color-text-link);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
+.kui-token-search[data-disabled="true"] {
+  opacity: 0.55;
+}
+
+.kui-token-search__leading {
+  display: inline-flex;
+  grid-column: 1;
+  width: 1rem;
+  height: 1rem;
+  margin-block-start: calc(
+    (var(--kui-token-search-line-size) - 1rem) / 2
+  );
+  color: var(--kui-color-text-quiet);
+}
+
+.kui-token-search__leading svg {
+  width: 100%;
+  height: 100%;
+}
+
+.kui-token-search__editor {
+  grid-column: 2;
+  min-width: 5rem;
+  min-height: var(--kui-token-search-line-size);
+  padding-block: calc((var(--kui-token-search-line-size) - 1.35em) / 2) 0;
+  box-sizing: border-box;
+  outline: 0;
+  caret-color: var(--kui-color-accent-text);
+  font-size: var(--kui-font-s);
+  line-height: 1.35;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  cursor: text;
+}
+
+.kui-token-search__editor:empty::before {
+  color: var(--kui-color-text-quiet);
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
+.kui-token-search__token {
+  display: inline-flex;
+  height: 1.5em;
+  margin-inline: 0.125rem;
+  padding-inline-start: 0.45rem;
+  border-radius: var(--kui-radius-pill);
+  color: var(--kui-token-search-token-foreground);
+  background: var(--kui-token-search-token-background);
+  font-size: var(--kui-font-xs);
+  line-height: 1;
+  white-space: nowrap;
+  vertical-align: middle;
+  align-items: center;
+  gap: 0.1rem;
+}
+
+.kui-token-search__token button,
+.kui-token-search__clear {
+  appearance: none;
+  display: inline-grid;
+  padding: 0;
+  border: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+  place-items: center;
+}
+
+.kui-token-search__token-edit {
+  height: 100%;
+}
+
+.kui-token-search__token-remove {
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: var(--kui-radius-pill) !important;
+}
+
+.kui-token-search__token-remove:hover,
+.kui-token-search__token-remove:focus-visible,
+.kui-token-search__clear:hover,
+.kui-token-search__clear:focus-visible {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+.kui-token-search__token button:focus-visible,
+.kui-token-search__clear:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-token-search button:disabled {
+  cursor: default;
+}
+
+.kui-token-search__token svg {
+  width: 0.7rem;
+  height: 0.7rem;
+}
+
+.kui-token-search__clear,
+.kui-token-search__trailing {
+  display: inline-grid;
+  width: 1.5rem;
+  height: var(--kui-token-search-line-size);
+  color: var(--kui-color-text-quiet);
+  place-items: center;
+}
+
+.kui-token-search__clear {
+  grid-column: 3;
+}
+
+.kui-token-search__trailing {
+  grid-column: 4;
+}
+
+.kui-token-search[data-has-trailing="false"] .kui-token-search__clear {
+  grid-column: 4;
+}
+
+.kui-token-search__clear svg,
+.kui-token-search__trailing svg {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.kui-token-search[data-collapsible="true"] {
+  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
+  max-width: 100%;
+  overflow: hidden;
+  /* Size the inline axis through `width` only. A `flex-basis` of the expanded
+     width would drive the MAIN axis, which is the field's HEIGHT inside a flex
+     column — stretching the field tall (KF-EPEM88). `flex: 0 1 auto` keeps the
+     no-grow / may-shrink behavior a toolbar row wants without leaking the width
+     into the cross axis. */
+  flex: 0 1 auto;
+  transition:
+    width 0.25s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.kui-token-search[data-collapsible="true"][data-expanded="false"] {
+  width: 2.75rem;
+  min-width: 2.75rem;
+  height: 2.75rem;
+  padding: 1px;
+  grid-template-columns: minmax(0, 1fr);
+  flex: 0 0 auto;
+}
+
+.kui-token-search__expand {
+  appearance: none;
+  display: grid;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  color: var(--kui-color-text-quiet);
+  background: transparent;
+  cursor: pointer;
+  place-items: center;
+}
+
+.kui-token-search__expand:hover {
+  background: var(--kui-color-surface-lowered);
+}
+
+.kui-token-search__expand:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-token-search__expand svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.kui-token-search[data-collapsible="true"][data-expanded="true"]
+  .kui-token-search__leading {
+  margin-inline-start: 0.375rem;
+}
+
+.kui-toolbar-control-group:has(> .kui-token-search[data-collapsible="true"]) {
+  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
+  max-width: 100%;
+  height: auto;
+  min-width: 0;
+  overflow: hidden;
+  /* Same reason as the field above (KF-EPEM88): drive the inline size through
+     `width`, not `flex-basis`, so a group placed in a flex column is not
+     stretched to the expanded width in its cross axis. */
+  flex: 0 1 auto;
+  transition:
+    width 0.25s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.kui-toolbar-control-group[data-expanded="false"]:has(
+    > .kui-token-search[data-collapsible="true"]
+  ) {
+  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  flex: 0 0 auto;
+}
+
+.kui-toolbar-control-group > .kui-token-search[data-collapsible="true"] {
+  --kui-token-search-line-size: 2rem;
+
+  min-height: 2.5rem;
+  padding: 0.25rem 0.375rem;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.kui-toolbar-control-group
+  > .kui-token-search[data-collapsible="true"]:focus-within {
+  border-color: var(--kui-color-focus);
+  background: var(--kui-token-search-background);
+}
+
+.kui-toolbar-control-group
+  > .kui-token-search[data-collapsible="true"][data-expanded="false"] {
+  width: 2.5rem;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  min-height: 2.5rem;
+  padding: 0;
+}
+
+.kui-toolbar-control-group
+  > .kui-token-search[data-collapsible="true"][data-expanded="false"]
+  .kui-token-search__expand {
+  padding-inline: 0;
+}
+
+.kui-toolbar-control-group:has(
+    > .kui-token-search[data-collapsible="true"]
+  ):focus-within {
+  border-color: var(--kui-color-text-link);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-token-search[data-collapsible="true"],
+  .kui-toolbar-control-group:has(> .kui-token-search[data-collapsible="true"]) {
+    transition-duration: 0s;
+  }
+}
+
+@media (forced-colors: active) {
+  .kui-token-search__token {
+    border: 1px solid ButtonText;
+  }
+}

package/dist/styles/toolbar-control-group.css

@@ -0,0 +1,225 @@
+.kui-toolbar-control-group {
+  --kui-toolbar-control-background: var(--kui-color-neutral-fill-normal);
+  --kui-toolbar-control-border: var(--kui-color-neutral-border-normal);
+  --kui-toolbar-control-color: var(--kui-color-neutral-on-quiet);
+  --kui-toolbar-control-hover-background: var(--kui-color-surface);
+  --kui-toolbar-control-selected-background: var(--kui-color-surface);
+  --kui-toolbar-control-selected-border: var(--kui-color-neutral-border-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-brand-on-quiet);
+  --kui-toolbar-control-selected-shadow: var(--kui-shadow-s);
+  --kui-toolbar-control-pressed-background: var(--kui-color-neutral-fill-loud);
+  --kui-toolbar-control-pressed-border: var(--kui-color-neutral-border-loud);
+  --kui-toolbar-control-pressed-color: var(--kui-color-neutral-on-loud);
+  display: inline-flex;
+  height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  min-width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  padding: 1px;
+  box-sizing: border-box;
+  border: 1px solid var(--kui-toolbar-control-border);
+  border-radius: var(
+    --kui-toolbar-group-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+  color: var(--kui-toolbar-control-color);
+  background: var(--kui-toolbar-control-background);
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 0;
+}
+
+/* `shape="rounded"` swaps the default pill radius for the design system's softer
+   rounded-rectangle radius on both the group and its items (custom properties
+   inherit to the item rules that read them). */
+.kui-toolbar-control-group[data-shape="rounded"] {
+  --kui-toolbar-group-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+  --kui-toolbar-item-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+}
+
+.kui-toolbar-control-group[data-tone="dark"] {
+  --kui-toolbar-control-background: color-mix(
+    in srgb,
+    var(--kui-color-neutral-fill-loud) 72%,
+    transparent
+  );
+  --kui-toolbar-control-border: var(--kui-toolbar-control-dark-border, #353536);
+  --kui-toolbar-control-color: var(--kui-color-neutral-on-loud);
+  --kui-toolbar-control-hover-background: color-mix(
+    in srgb,
+    var(--kui-color-surface) 28%,
+    transparent
+  );
+}
+
+.kui-toolbar-control-group[data-appearance="borderless"] {
+  /* A borderless group has no base fill to lift from, so the default
+     surface-colored hover/selected background is invisible against the page.
+     Use a visible neutral tint so buttons still show hover/press feedback
+     (KF-WZDQS8). */
+  --kui-toolbar-control-hover-background: var(--kui-color-neutral-fill-normal);
+  --kui-toolbar-control-selected-background: var(
+    --kui-color-neutral-fill-normal
+  );
+  border-color: transparent;
+  background: transparent;
+}
+
+.kui-toolbar-control-group > :is(button, wa-button, wa-dropdown) {
+  flex: 0 0 auto;
+}
+
+.kui-toolbar-control-group > button {
+  appearance: none;
+  display: grid;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding: 0 var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  place-items: center;
+}
+
+.kui-toolbar-control-group > button:hover {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-control-group > button svg,
+.kui-toolbar-control-group wa-button > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+
+.kui-toolbar-control-group > wa-button,
+.kui-toolbar-control-group > wa-dropdown,
+.kui-toolbar-control-group > wa-dropdown > wa-button,
+.kui-toolbar-control-group > wa-dropdown > wa-button::part(base) {
+  min-width: 2.5rem;
+  height: 2.5rem;
+}
+
+.kui-toolbar-control-group[data-single="true"] > wa-dropdown,
+.kui-toolbar-control-group[data-single="true"] > wa-dropdown > wa-button,
+.kui-toolbar-control-group[data-single="true"]
+  > wa-dropdown
+  > wa-button::part(base) {
+  width: 3rem;
+}
+
+.kui-toolbar-control-group wa-button {
+  display: inline-flex;
+  line-height: 0;
+  align-items: center;
+  justify-content: center;
+  --wa-color-fill-quiet: transparent;
+}
+
+.kui-toolbar-control-group wa-button::part(base) {
+  /* Match min-width to the 40px height so an icon-only button's highlight is at
+     least a circle, not a vertical oval — the host is 40px wide but the base
+     part was sizing to its ~32px content. Text/caret buttons grow past it. */
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(
+    --kui-toolbar-item-radius,
+    var(--kui-layout-pill-radius, calc(1px + 1.3125rem))
+  );
+}
+
+.kui-toolbar-control-group wa-button:hover::part(base) {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-control-group[data-single="true"]:has(
+    > :is(button, wa-button, wa-dropdown)
+  ):hover {
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-control-group[data-single="true"] > :is(button, wa-button):hover,
+.kui-toolbar-control-group[data-single="true"] wa-button:hover::part(base) {
+  border-color: transparent;
+  background: transparent;
+}
+
+/* A group holding exactly one control behaves like `single` even without the
+   flag: the whole group background changes on hover instead of highlighting an
+   inner layer inset from the border (KF-J9P1ZD — a PanelHeader's lone Close/
+   Done action). */
+.kui-toolbar-control-group:not([data-single="true"]):has(
+    > :is(button, wa-button):only-child
+  ):hover {
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-control-group:not([data-single="true"]):has(
+    > :is(button, wa-button):only-child
+  )
+  > :is(button, wa-button):hover,
+.kui-toolbar-control-group:not([data-single="true"]):has(
+    > :is(button, wa-button):only-child
+  )
+  wa-button:hover::part(base) {
+  border-color: transparent;
+  background: transparent;
+}
+
+/* A plain <button> child paints its own box for the selected state. */
+.kui-toolbar-control-group[data-single="false"] > button[aria-pressed="true"] {
+  border-color: var(--kui-toolbar-control-selected-border);
+  color: var(--kui-toolbar-control-selected-color);
+  background: var(--kui-toolbar-control-selected-background);
+  box-shadow: var(--kui-toolbar-control-selected-shadow);
+}
+
+/* A wa-button's visual is ::part(base), not the outer 40px host box (which has no
+   pill radius). Paint the selected background/border/shadow on ::part(base) —
+   mirroring the hover rule — so the selected state matches the pill radius/size
+   and stays inside the group's border instead of overflowing it as an oversized
+   square (KF-5BDDQ9). The selected text color rides on the host and inherits in. */
+.kui-toolbar-control-group[data-single="false"]
+  > wa-button[aria-pressed="true"] {
+  color: var(--kui-toolbar-control-selected-color);
+}
+.kui-toolbar-control-group[data-single="false"]
+  > wa-button[aria-pressed="true"]::part(base) {
+  border-color: var(--kui-toolbar-control-selected-border);
+  background: var(--kui-toolbar-control-selected-background);
+  box-shadow: var(--kui-toolbar-control-selected-shadow);
+}
+
+.kui-toolbar-control-group > :is(button, wa-button):focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(
+    > :is(button, wa-button)[aria-pressed="true"]
+  ) {
+  --kui-toolbar-control-color: var(--kui-toolbar-control-pressed-color);
+  border-color: var(--kui-toolbar-control-pressed-border);
+  color: var(--kui-toolbar-control-pressed-color);
+  background: var(--kui-toolbar-control-pressed-background);
+}
+
+.kui-toolbar-control-group[data-button-appearance="push"][data-single="true"]
+  > :is(button, wa-button)[aria-pressed="true"] {
+  color: var(--kui-toolbar-control-pressed-color);
+}

package/dist/styles/toolbar-text.css

@@ -0,0 +1,40 @@
+.kui-toolbar-text {
+  display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  height: 2.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  overflow: hidden;
+  box-sizing: border-box;
+  color: var(--kui-color-neutral-on-quiet);
+  font-weight: 650;
+  line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  align-items: center;
+}
+
+.kui-toolbar-text[data-size="xlarge"] {
+  /* Matches the page/panel title: the same responsive clamp so a PanelHeader
+     title reads at the page-title scale without a bespoke override. Height grows
+     to the larger text (the fixed 40px would clip its ascenders). */
+  height: auto;
+  min-height: 2.75rem;
+  color: var(--kui-color-text);
+  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
+  letter-spacing: -0.025em;
+}
+
+.kui-toolbar-text[data-size="large"] {
+  font-size: var(--kui-font-m);
+  letter-spacing: -0.015em;
+}
+
+.kui-toolbar-text[data-size="default"] {
+  font-size: var(--kui-font-s);
+}
+
+.kui-toolbar-text[data-size="small"] {
+  font-family: var(--kui-font-mono);
+  font-size: var(--kui-font-xs);
+}

package/dist/styles/toolbar.css

@@ -0,0 +1,61 @@
+.kui-toolbar {
+  display: grid;
+  width: 100%;
+  min-height: calc(
+    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
+      (2 * var(--kui-toolbar-gap, 0.5rem))
+  );
+  padding: var(--kui-toolbar-gap, 0.5rem);
+  box-sizing: border-box;
+  color: var(--kui-color-text);
+  background: transparent;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--kui-toolbar-gap, 0.5rem);
+  container: kui-toolbar / inline-size;
+  font-family: var(--kui-font-sans);
+}
+
+.kui-toolbar[data-has-center="false"] {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.kui-toolbar[data-divider="true"] {
+  box-shadow: inset 0 -1px var(--kui-color-border);
+}
+
+.kui-toolbar__leading,
+.kui-toolbar__center,
+.kui-toolbar__trailing {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--kui-toolbar-gap, 0.5rem);
+}
+
+/* Pin each zone to its column so a display:none (empty) leading or center zone
+   doesn't let the trailing zone auto-place into the first column — which left an
+   extra gap + empty track to the trailing zone's right (KF-5BEF2M). The trailing
+   zone anchors to the last column via -2/-1, so it stays flush right for both
+   the 3- and 2-column layouts, and still stacks under the leading zone when a
+   consumer collapses the toolbar to a single column. */
+.kui-toolbar__leading {
+  grid-column: 1;
+  overflow: hidden;
+}
+
+.kui-toolbar__center {
+  justify-content: center;
+  grid-column: 2;
+}
+
+.kui-toolbar__trailing {
+  justify-content: flex-end;
+  grid-column: -2 / -1;
+}
+
+.kui-toolbar[data-has-center="false"] .kui-toolbar__center,
+.kui-toolbar__leading:empty,
+.kui-toolbar__trailing:empty {
+  display: none;
+}

package/dist/styles/value-table.css

@@ -0,0 +1,75 @@
+.kui-value-table {
+  --kui-value-table-background: var(--kui-color-surface-lowered);
+  --kui-value-table-border: var(--kui-color-border);
+  --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
+  display: grid;
+  margin-block: 0;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  overflow: hidden;
+  border: 1px solid var(--kui-value-table-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background: var(--kui-value-table-background);
+}
+.kui-value-table__row {
+  --_kui-value-table-inline-padding: var(
+    --kui-layout-item-padding,
+    0.5rem
+  );
+  --_kui-value-table-separator-start: var(--_kui-value-table-inline-padding);
+  position: relative;
+  display: grid;
+  min-height: 2.55rem;
+  padding-block: 0.5rem;
+  padding-inline: var(--_kui-value-table-inline-padding);
+  box-sizing: border-box;
+  grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.kui-value-table__row[data-has-icon="true"] {
+  --_kui-value-table-separator-start: calc(
+    var(--_kui-value-table-inline-padding) + var(--_kui-value-table-icon-size) +
+      var(--kui-layout-item-gap, 0.5rem)
+  );
+}
+.kui-value-table__row + .kui-value-table__row::before {
+  position: absolute;
+  top: 0;
+  right: var(--_kui-value-table-inline-padding);
+  left: var(--_kui-value-table-separator-start);
+  border-top: 1px solid var(--kui-value-table-border);
+  content: "";
+}
+.kui-value-table__row dt {
+  display: flex;
+  min-width: 0;
+  color: var(--kui-color-text-quiet);
+  align-items: center;
+  gap: var(--kui-layout-item-gap, 0.5rem);
+}
+.kui-value-table__icon {
+  display: grid;
+  width: var(--_kui-value-table-icon-size);
+  height: var(--_kui-value-table-icon-size);
+  flex: none;
+  place-items: center;
+}
+.kui-value-table__icon svg {
+  width: 100%;
+  height: 100%;
+}
+.kui-value-table__label {
+  min-width: 0;
+}
+.kui-value-table__row dd {
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--kui-color-text);
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--kui-space-2xs);
+  font-weight: var(--kui-font-weight-semibold);
+  text-align: end;
+}