@kerfjs/ui 5.0.0-beta.95 → 5.0.0-beta.96

package/dist/styles/components/actions/icon-toggle-button/icon-toggle-button.css

@@ -0,0 +1,83 @@
+/* The single contained ToolbarControlGroup's geometry, standalone: a 44px
+   filled, bordered control whose 2px-inset face lifts to the raised surface
+   on hover and stays raised, in the brand foreground, while pressed. */
+.kui-icon-toggle-button {
+  --_kui-icon-toggle-button-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+  --_kui-icon-toggle-button-inset: var(
+    --kui-layout-highlight-inset,
+    0.125rem
+  );
+  /* One full-size track for the face. The button sets its own track and
+     alignment because native or document button styles center content,
+     which would shrink the face to the icon. */
+  display: inline-grid;
+  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+  place-content: stretch;
+  place-items: stretch;
+  width: 2.75rem;
+  height: 2.75rem;
+  margin: 0;
+  padding: var(--_kui-icon-toggle-button-inset);
+  box-sizing: border-box;
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--_kui-icon-toggle-button-radius);
+  color: var(--kui-color-neutral-on-quiet);
+  background: var(--kui-color-neutral-fill-normal);
+  cursor: pointer;
+  flex: none;
+  font: inherit;
+}
+
+.kui-icon-toggle-button[data-shape="rounded"] {
+  --_kui-icon-toggle-button-radius: var(
+    --kui-layout-rounded-radius,
+    calc(1px + 0.6875rem)
+  );
+}
+
+.kui-icon-toggle-button__face {
+  display: grid;
+  border-radius: max(
+    0px,
+    calc(
+      var(--_kui-icon-toggle-button-radius) -
+        var(--_kui-icon-toggle-button-inset) - 1px
+    )
+  );
+  place-items: center;
+  transition:
+    background-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.kui-icon-toggle-button:hover:not(:disabled) > .kui-icon-toggle-button__face {
+  background: var(--kui-color-surface);
+}
+
+.kui-icon-toggle-button[aria-pressed="true"] {
+  color: var(--kui-color-brand-on-quiet);
+}
+
+.kui-icon-toggle-button[aria-pressed="true"] > .kui-icon-toggle-button__face {
+  background: var(--kui-color-surface);
+  box-shadow: var(--kui-shadow-s);
+}
+
+.kui-icon-toggle-button:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-icon-toggle-button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-icon-toggle-button__face {
+    transition: none;
+  }
+}

package/dist/styles/components/actions/popup-menu/popup-menu.css

@@ -104,8 +104,14 @@
   height: var(--_kui-popup-row-icon-size);
 }
 
+/* A context menu takes no space where it is rendered: out of flow, it adds no
+   line box in block layout and no gap slot in a flex or grid container. Its
+   fixed anchor opens the menu at the recorded viewport point. */
 .kui-popup-menu[data-trigger="context"] {
-  display: inline-block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: block;
   width: 0;
   height: 0;
 }
@@ -283,3 +289,65 @@
   > wa-dropdown.kui-popup-menu::part(menu) {
   padding: 0;
 }
+
+/* As a ListActionRow's trailing menu, the PopupMenu styles its trigger in the
+   row's context like the row's trailing button: a full-height 44px pill (36px
+   in a compact row) on the row's trailing-hover fill, with a 16px icon. */
+.kui-list-action-row > .kui-popup-menu {
+  display: flex;
+  flex: none;
+}
+.kui-list-action-row > .kui-popup-menu > wa-button {
+  display: flex;
+  min-height: 2.75rem;
+  color: inherit;
+}
+.kui-list-action-row[data-density="compact"] > .kui-popup-menu > wa-button {
+  min-height: 2.25rem;
+}
+.kui-list-action-row > .kui-popup-menu > wa-button::part(base) {
+  width: 2.75rem;
+  min-width: 2.75rem;
+  height: 100%;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--kui-radius-pill);
+  color: inherit;
+  background: transparent;
+}
+.kui-list-action-row
+  > .kui-popup-menu
+  > wa-button:not([disabled]):hover::part(base) {
+  background: var(--kui-list-action-row-trailing-hover-background);
+}
+.kui-list-action-row > .kui-popup-menu > wa-button::part(base):focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+.kui-list-action-row > .kui-popup-menu > wa-button > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+/* The row's interaction visibility reveals the trigger on hover or focus, and
+   keeps it visible while its menu is open. A placeholder row reveals nothing. */
+.kui-list-action-row[data-trailing-visibility="interaction"]
+  > .kui-popup-menu:not([open])
+  > wa-button {
+  opacity: 0;
+}
+.kui-list-action-row[data-trailing-visibility="interaction"]:not(
+    [data-placeholder="true"]
+  ):is(:hover, :focus-within)
+  > .kui-popup-menu
+  > wa-button {
+  opacity: 1;
+}
+@media (hover: none) {
+  .kui-list-action-row[data-trailing-visibility="interaction"]
+    > .kui-popup-menu
+    > wa-button {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,95 @@
+/* One loud semantic fill split into a primary half and a narrow options
+   trigger, with a hairline divider in the foreground color. Both halves are
+   native buttons on the shared fill; each brightens on its own hover. */
+.kui-split-button {
+  --_kui-split-button-fill: var(--kui-color-brand-fill-loud);
+  --_kui-split-button-on: var(--kui-color-brand-on-loud);
+  display: inline-grid;
+  min-width: 0;
+  min-height: 2.75rem;
+  overflow: hidden;
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  color: var(--_kui-split-button-on);
+  background: var(--_kui-split-button-fill);
+  grid-template-columns: minmax(0, auto) 2.5rem;
+  font-weight: var(--kui-font-weight-semibold);
+}
+
+.kui-split-button[data-tone="neutral"] {
+  --_kui-split-button-fill: var(--kui-color-neutral-fill-loud);
+  --_kui-split-button-on: var(--kui-color-neutral-on-loud);
+}
+
+.kui-split-button[data-tone="success"] {
+  --_kui-split-button-fill: var(--kui-color-success-fill-loud);
+  --_kui-split-button-on: var(--kui-color-success-on-loud);
+}
+
+.kui-split-button[data-tone="warning"] {
+  --_kui-split-button-fill: var(--kui-color-warning-fill-loud);
+  --_kui-split-button-on: var(--kui-color-warning-on-loud);
+}
+
+.kui-split-button[data-tone="danger"] {
+  --_kui-split-button-fill: var(--kui-color-danger-fill-loud);
+  --_kui-split-button-on: var(--kui-color-danger-on-loud);
+}
+
+.kui-split-button[data-fill="true"] {
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) 2.5rem;
+}
+
+.kui-split-button > button {
+  display: flex;
+  min-width: 0;
+  min-height: 2.75rem;
+  margin: 0;
+  padding-block: var(--kui-space-xs);
+  padding-inline: var(--kui-space-s);
+  border: 0;
+  border-radius: 0;
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kui-space-xs);
+  font: inherit;
+}
+
+.kui-split-button > .kui-split-button__options {
+  padding-inline: 0;
+  border-inline-start: 1px solid
+    color-mix(in srgb, currentColor 28%, transparent);
+}
+
+.kui-split-button > button:hover:not(:disabled) {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+
+/* The group clips outer outlines at its rounded corners, so the ring sits
+   inside each half. */
+.kui-split-button > button:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+.kui-split-button > button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.kui-split-button__icon {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+}
+
+.kui-split-button__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -34,18 +34,13 @@
   /* The minimum height grows by any claimed block inset, so a toolbar a flex
      column shrinks still keeps a whole control row clear of the unsafe area. */
   min-height: calc(
-    var(--kui-toolbar-group-size, calc(2px + 2.625rem)) +
-      (2 * var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem))) +
+    var(--_kui-toolbar-band) + (2 * var(--_kui-toolbar-block-inset)) +
       var(--_kui-toolbar-safe-block-start) + var(--_kui-toolbar-safe-block-end)
   );
   padding-block: calc(
-      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
-        var(--_kui-toolbar-safe-block-start)
+      var(--_kui-toolbar-block-inset) + var(--_kui-toolbar-safe-block-start)
     )
-    calc(
-      var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
-        var(--_kui-toolbar-safe-block-end)
-    );
+    calc(var(--_kui-toolbar-block-inset) + var(--_kui-toolbar-safe-block-end));
   padding-inline: calc(
       var(--kui-toolbar-inset, var(--kui-toolbar-gap, 0.5rem)) +
         var(--_kui-toolbar-safe-inline-start)
@@ -157,6 +152,18 @@
    `--_kui-toolbar-band` is context those components use for that placement. */
 .kui-toolbar {
   --_kui-toolbar-band: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  --_kui-toolbar-block-inset: var(
+    --kui-toolbar-inset,
+    var(--kui-toolbar-gap, 0.5rem)
+  );
+}
+
+/* Compact density: a 34px band (the compact ToolbarControlGroup's size) with
+   3px block insets makes a 40px header for an embedded panel or card. The
+   inline insets and zone gap keep the standard 8px. */
+.kui-toolbar[data-density="compact"] {
+  --_kui-toolbar-band: 2.125rem;
+  --_kui-toolbar-block-inset: var(--kui-toolbar-inset, 0.1875rem);
 }
 
 .kui-toolbar__leading,
@@ -230,7 +237,7 @@
   flex-wrap: wrap;
 }
 
-.kui-toolbar__trailing > wa-button {
+.kui-toolbar__trailing > wa-button:not(:where(.kui-icon-button)) {
   margin-block-start: max(
     0px,
     calc((var(--_kui-toolbar-band) - var(--wa-form-control-height)) / 2)