@kerfjs/ui 5.0.0-beta.6 → 5.0.0-beta.61

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

@@ -10,16 +10,35 @@
   --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);
+  --kui-toolbar-group-radius: var(
+    --kui-layout-pill-radius,
+    calc(1px + 1.3125rem)
+  );
+  --kui-control-highlight-radius: max(
+    0px,
+    calc(
+      var(--kui-toolbar-group-radius) - var(--kui-layout-highlight-inset, 2px)
+    )
+  );
+  --kui-toolbar-item-radius: var(--kui-control-highlight-radius);
+  /* Context the group provides to a composed child (an icon-only Select, in
+     select.css): the control slot the child fills so it is inset evenly on
+     every side and the group-owned focus ring stays concentric with the
+     visible control. The group sizes to the child's width. A default slot is
+     40px tall inside the 2px inset; a compact slot is the full 32px padding
+     box, and a lone compact child also overlaps the 1px inline padding. The
+     values are named after the group that provides them; the child reads
+     them from its own stylesheet. */
+  --_kui-toolbar-control-group-slot-height: 2.5rem;
+  --_kui-toolbar-control-group-slot-overlap: 0px;
+  --_kui-toolbar-control-group-slot-radius: var(--kui-toolbar-item-radius);
   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))
-  );
+  border-radius: var(--kui-toolbar-group-radius);
   color: var(--kui-toolbar-control-color);
   background: var(--kui-toolbar-control-background);
   align-items: center;
@@ -27,6 +46,43 @@
   gap: 0;
 }
 
+/* In a Toolbar zone, a group shorter than the toolbar's control band (the
+   `--_kui-toolbar-band` the Toolbar provides) takes half the difference as a
+   top margin, so it centers in the band by its own size. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-control-group {
+  margin-block-start: max(
+    0px,
+    calc(
+      (
+          var(--_kui-toolbar-band) -
+            var(--kui-toolbar-group-size, calc(2px + 2.625rem))
+        ) /
+        2
+    )
+  );
+}
+
+.kui-toolbar-control-group[data-visibility="compact-only"] {
+  display: none;
+}
+
+@container kui-toolbar (max-width: 44rem) {
+  .kui-toolbar-control-group[data-visibility="compact-only"] {
+    display: inline-flex;
+  }
+}
+
+/* `shape="rounded"` swaps the default pill radius for the design system's softer
+   rounded rectangle. The shared highlight contract derives every inner hover or
+   selected surface from this outer radius and the group's full inset. */
+.kui-toolbar-control-group[data-shape="rounded"] {
+  --kui-toolbar-group-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,
@@ -41,6 +97,99 @@
     transparent
   );
 }
+.kui-toolbar-control-group[data-size="compact"] {
+  --kui-toolbar-group-size: 2.125rem;
+  --_kui-toolbar-control-group-slot-height: 2rem;
+  --_kui-toolbar-control-group-slot-overlap: 1px;
+  --_kui-toolbar-control-group-slot-radius: max(
+    0px,
+    calc(var(--kui-toolbar-group-radius) - 1px)
+  );
+  gap: 4px; /* Compensating for -2px margins */
+}
+.kui-toolbar-control-group[data-density="tight"] {
+  --kui-layout-item-padding: 0.3125rem;
+}
+.kui-toolbar-control-group[data-overflow="scroll"] {
+  max-width: 100%;
+  overflow-x: auto;
+}
+.kui-toolbar-control-group[data-content="search"] {
+  width: min(var(--kui-token-search-expanded-width, 30rem), 100%);
+  max-width: 100%;
+  height: auto;
+  min-width: 0;
+  overflow: hidden;
+  flex: 0 1 auto;
+  transition:
+    width 0.25s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+.kui-toolbar-control-group[data-content="search"][data-expanded="false"] {
+  width: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
+  flex: 0 0 auto;
+}
+.kui-toolbar-control-group[data-content="text"]
+  > :is(button, wa-button, .kui-toolbar-action-link),
+.kui-toolbar-control-group[data-content="mixed"]
+  > :is(button, wa-button, .kui-toolbar-action-link) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"] > button {
+  display: flex;
+  gap: var(--kui-space-xs);
+}
+.kui-toolbar-control-group[data-content="mixed"]
+  wa-button:not(:where(.kui-popup-menu > *)) {
+  line-height: normal;
+}
+/* Toolbar controls never wrap. Web Awesome's label part is a plain block, so a
+   slotted icon (a block SVG) and its text would otherwise stack vertically —
+   lay them out on one row the way native mixed buttons already are. */
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *))::part(label) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kui-space-xs);
+  white-space: nowrap;
+}
+.kui-toolbar-control-group[data-content="avatar"][data-scrim="true"] {
+  --kui-toolbar-control-background: color-mix(
+    in srgb,
+    var(--kui-color-neutral-fill-loud) 64%,
+    transparent
+  );
+  --kui-toolbar-control-color: var(--kui-color-neutral-on-loud);
+}
+.kui-toolbar-control-group[data-selected-tone="neutral"] {
+  --kui-toolbar-control-selected-color: var(--kui-color-neutral-on-normal);
+  --kui-toolbar-control-selected-background: var(
+    --kui-color-neutral-fill-normal
+  );
+}
+.kui-toolbar-control-group[data-selected-tone="pop"] {
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-quiet);
+}
+.kui-toolbar-control-group[data-selected-chrome="filled"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-border: transparent;
+  --kui-toolbar-control-selected-background: var(--kui-color-brand-fill-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-brand-on-normal);
+}
+.kui-toolbar-control-group[data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-shadow: none;
+  --kui-toolbar-control-selected-background: transparent;
+  --kui-toolbar-control-selected-border: var(--kui-color-brand-border-normal);
+}
+.kui-toolbar-control-group[data-selected-tone="pop"][data-selected-chrome="filled"] {
+  --kui-toolbar-control-selected-background: var(--kui-color-pop-fill-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-normal);
+}
+.kui-toolbar-control-group[data-selected-tone="pop"][data-selected-chrome="outline"] {
+  --kui-toolbar-control-selected-border: var(--kui-color-pop-border-normal);
+  --kui-toolbar-control-selected-color: var(--kui-color-pop-on-quiet);
+}
 
 .kui-toolbar-control-group[data-appearance="borderless"] {
   /* A borderless group has no base fill to lift from, so the default
@@ -55,9 +204,17 @@
   background: transparent;
 }
 
-.kui-toolbar-control-group > :is(button, wa-button, wa-dropdown) {
+/* The group lays out its own native and raw Web Awesome children. A composed
+   PopupMenu (`wa-dropdown.kui-popup-menu`) or Select sizes itself in the
+   group's context from its own stylesheet (popup-menu.css, select.css); the
+   group names those children by class only to key its own state on them. */
+.kui-toolbar-control-group > :is(button, wa-button, .kui-toolbar-action-link),
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) {
   flex: 0 0 auto;
 }
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) {
+  display: inline-flex;
+}
 
 .kui-toolbar-control-group > button {
   appearance: none;
@@ -83,30 +240,182 @@
   background: var(--kui-toolbar-control-hover-background);
 }
 
+.kui-toolbar-control-group > .kui-toolbar-action-link {
+  position: relative;
+  display: inline-flex;
+  min-width: 2.5rem;
+  height: 2.5rem;
+  padding-inline: 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;
+  align-items: center;
+  justify-content: center;
+  gap: var(--kui-space-2xs);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.kui-toolbar-control-group > .kui-toolbar-action-link:hover {
+  border-color: var(--kui-toolbar-control-border);
+  background: var(--kui-toolbar-control-hover-background);
+}
+
+.kui-toolbar-action-link code {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* An icon tile: a non-interactive icon placed directly in a group (a panel
+   heading's identity glyph) takes the same 40px slot and 16px visual as an
+   icon button, so it centers in the group and lines up with button icons,
+   without a hover surface or a focusable control that does nothing. */
+.kui-toolbar-control-group > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  padding: 0.75rem;
+  box-sizing: content-box;
+  flex: 0 0 auto;
+}
+
 .kui-toolbar-control-group > button svg,
-.kui-toolbar-control-group wa-button > svg {
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) > svg,
+.kui-toolbar-control-group > .kui-toolbar-action-link svg {
   display: block;
   width: 1rem;
   height: 1rem;
 }
 
+/* Nested Web Awesome buttons take the group's control height, not the theme's
+   44px standalone control height. The group's `wa-button` rules style only raw
+   buttons: a composed PopupMenu's trigger (`.kui-popup-menu > wa-button`) is
+   excluded inside a zero-specificity `:where()` and takes the same metrics
+   from popup-menu.css. */
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
+  --wa-form-control-height: 2.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"]
+  wa-button:not(:where(.kui-popup-menu > *)) {
+  --wa-form-control-height: 2rem;
+}
+
 .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) {
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group > wa-dropdown:not(.kui-popup-menu) > wa-button,
+.kui-toolbar-control-group
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button::part(base) {
   min-width: 2.5rem;
   height: 2.5rem;
 }
+.kui-toolbar-control-group[data-size="compact"] > button,
+.kui-toolbar-control-group[data-size="compact"] > .kui-toolbar-action-link,
+.kui-toolbar-control-group[data-size="compact"] > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button::part(base),
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown:not(.kui-popup-menu)
+  wa-button,
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown:not(.kui-popup-menu)
+  wa-button::part(base) {
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+}
+
+/* A compact icon button is a 32px circle like its compact wa-button and
+   Select siblings; the default 8px inline padding around a 16px icon made its
+   selected highlight a 34x32 oval. */
+.kui-toolbar-control-group[data-size="compact"][data-content="icon"] > button {
+  padding-inline: 0;
+}
+
+/* `standard` keeps each menu's own standard inset: a raw wa-dropdown takes the
+   8px surface inset, while a PopupMenu keeps the Select listbox inset it
+   shares (popup-menu.css). The explicit compact and list-zero choices apply to
+   every nested menu; a PopupMenu applies them to itself (popup-menu.css). */
+.kui-toolbar-control-group[data-menu-inset="standard"]
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-toolbar-control-group[data-menu-inset="compact"]
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: 0.25rem;
+}
+.kui-toolbar-control-group[data-menu-inset="list-zero"]
+  wa-dropdown:not(.kui-popup-menu)::part(menu) {
+  padding: 0;
+}
+
+/* Compact mixed controls keep the default horizontal breathing room. Their
+   raised selection grows over the group's own border instead of becoming a
+   smaller inset lozenge, while negative margins keep the outer geometry and
+   neighboring trigger position stable. */
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"] {
+  --kui-layout-item-padding: 0.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > button[aria-pressed="true"] {
+  position: relative;
+  z-index: 1;
+  height: var(--kui-toolbar-group-size);
+  margin: -2px;
+  border-radius: var(--kui-toolbar-group-radius);
+}
+
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-dropdown:not(.kui-popup-menu),
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-button {
+  margin: -2px;
+}
+
+/* A compact icon-only trigger may stay square, but a mixed-content dropdown
+   trigger must grow for its slotted label plus Web Awesome's caret. Otherwise
+   the fixed 32px base centers both outside its host, painting the label across
+   the separator and the caret beyond the group border. */
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button,
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button::part(base) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown:not(.kui-popup-menu)
+  > wa-button::part(base) {
+  width: max-content;
+}
 
-.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-dropdown:not(.kui-popup-menu)
   > wa-button::part(base) {
-  width: 3rem;
+  width: max-content;
 }
 
-.kui-toolbar-control-group wa-button {
+.kui-toolbar-control-group wa-button:not(:where(.kui-popup-menu > *)) {
   display: inline-flex;
   line-height: 0;
   align-items: center;
@@ -114,7 +423,8 @@
   --wa-color-fill-quiet: transparent;
 }
 
-.kui-toolbar-control-group wa-button::part(base) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *))::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. */
@@ -128,45 +438,58 @@
   );
 }
 
-.kui-toolbar-control-group wa-button:hover::part(base) {
+.kui-toolbar-control-group
+  wa-button:not(:where(.kui-popup-menu > *)):hover::part(base) {
   border-color: var(--kui-toolbar-control-border);
-  background: var(--kui-toolbar-control-hover-background);
+  background-color: var(--kui-toolbar-control-hover-background);
 }
 
 .kui-toolbar-control-group[data-single="true"]:has(
-    > :is(button, wa-button, wa-dropdown)
+    > :is(
+      button,
+      wa-button,
+      .kui-popup-menu,
+      wa-dropdown:not(.kui-popup-menu),
+      .kui-select,
+      .kui-toolbar-action-link
+    )
   ):hover {
-  background: var(--kui-toolbar-control-hover-background);
+  background-color: 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) {
+.kui-toolbar-control-group[data-single="true"]
+  > :is(button, wa-button, .kui-toolbar-action-link):hover,
+.kui-toolbar-control-group[data-single="true"]
+  wa-button:not(:where(.kui-popup-menu > *)):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/
+   inner layer inset from the border (KF-J9P1ZD — a heading toolbar's lone Close/
    Done action). */
 .kui-toolbar-control-group:not([data-single="true"]):has(
-    > :is(button, wa-button):only-child
+    > :is(button, wa-button, .kui-select, .kui-toolbar-action-link):only-child
   ):hover {
-  background: var(--kui-toolbar-control-hover-background);
+  background-color: 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, .kui-toolbar-action-link):only-child
   )
-  > :is(button, wa-button):hover,
+  > :is(button, wa-button, .kui-toolbar-action-link):hover,
 .kui-toolbar-control-group:not([data-single="true"]):has(
     > :is(button, wa-button):only-child
   )
-  wa-button:hover::part(base) {
+  > wa-button:hover::part(base) {
   border-color: transparent;
   background: transparent;
 }
 
+/* A toolbar Select beside other controls highlights its own pill on hover
+   (select.css); a lone Select instead lifts the whole group (above). */
+
 /* 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);
@@ -191,11 +514,78 @@
   box-shadow: var(--kui-toolbar-control-selected-shadow);
 }
 
-.kui-toolbar-control-group > :is(button, wa-button):focus-visible {
+.kui-toolbar-control-group
+  > :is(button, wa-button, .kui-toolbar-action-link):focus-visible {
   outline: var(--kui-focus-ring);
   outline-offset: 1px;
 }
 
+/* With per-control rings, a composed Select paints its own ring (select.css). */
+
+.kui-toolbar-control-group[data-focus-ring="outline"]:focus-within:not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-toolbar-control-group[data-focus-ring="halo"]:focus-within:not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
+  border-color: var(--kui-color-text-link);
+  box-shadow: 0 0 0 3px
+    color-mix(in srgb, var(--kui-color-text-link) 22%, transparent);
+}
+
+/* A group-owned ring (outline or halo) is off while a Select listbox or a
+   PopupMenu inside the group is open: the open popup shows focus, as the
+   per-control Select and PopupMenu triggers already do, and the ring returns
+   when the popup closes with focus still in the group. The exclusion sits in
+   a forgiving :where(), so an engine without :has() keeps the ring.
+
+   Chromium and WebKit do not propagate :focus-within from a focused
+   light-DOM child through a host's popup shadow tree, so a focused light-DOM
+   descendant also owns the group ring. Kept as separate rules so an engine
+   without :has() keeps the :focus-within ring. */
+.kui-toolbar-control-group[data-focus-ring="outline"]:has(:focus):not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
+  outline: var(--kui-focus-ring);
+  outline-offset: 1px;
+}
+
+.kui-toolbar-control-group[data-focus-ring="halo"]:has(:focus):not(
+    :where(
+      :has(
+        .kui-select[open],
+        .kui-popup-menu[open],
+        wa-dropdown:not(.kui-popup-menu)[open]
+      )
+    )
+  ) {
+  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-toolbar-control-group[data-button-appearance="push"][data-single="true"]:has(
     > :is(button, wa-button)[aria-pressed="true"]
   ) {
@@ -209,3 +599,50 @@
   > :is(button, wa-button)[aria-pressed="true"] {
   color: var(--kui-toolbar-control-pressed-color);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-toolbar-control-group[data-content="search"] {
+    transition-duration: 0s;
+  }
+}
+
+/* Avatar controls paint the image as chrome rather than inserting a replaced
+   <img> into the control. `background-size: contain` is the background-image
+   equivalent of `object-fit: contain`: the whole avatar remains visible. A
+   lone control belongs to the outer group surface; in a group of choices the
+   image belongs only to the selected highlight. */
+.kui-toolbar-control-group[data-content="avatar"] {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.kui-toolbar-control-group[data-content="avatar"]:is(
+    [data-single="true"],
+    :has(> :is(button, wa-button):only-child)
+  ) {
+  background-image: var(--kui-toolbar-avatar-image);
+}
+
+.kui-toolbar-control-group[data-content="avatar"]:is(
+    [data-single="true"],
+    :has(> :is(button, wa-button):only-child)
+  )
+  > :is(button, wa-button) {
+  color: transparent;
+}
+
+.kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
+    :has(> :is(button, wa-button):only-child)
+  )
+  > button[aria-pressed="true"],
+.kui-toolbar-control-group[data-content="avatar"][data-single="false"]:not(
+    :has(> :is(button, wa-button):only-child)
+  )
+  > wa-button[aria-pressed="true"]::part(base) {
+  color: transparent;
+  background-image: var(--kui-toolbar-avatar-image);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}