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

package/dist/styles/pane.css

@@ -0,0 +1,229 @@
+.kui-pane {
+  --kui-pane-separator-block-start-width: 0;
+  --kui-pane-separator-block-end-width: 0;
+  --kui-pane-separator-inline-start-width: 0;
+  --kui-pane-separator-inline-end-width: 0;
+
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  box-sizing: border-box;
+  border: 0 solid
+    var(--kui-pane-separator-color, var(--kui-color-neutral-border-normal));
+  border-block-start-width: var(--kui-pane-separator-block-start-width);
+  border-block-end-width: var(--kui-pane-separator-block-end-width);
+  border-inline-start-width: var(--kui-pane-separator-inline-start-width);
+  border-inline-end-width: var(--kui-pane-separator-inline-end-width);
+  grid-template-areas:
+    "header"
+    "content"
+    "footer";
+  grid-template-rows: auto minmax(0, 1fr) auto;
+}
+
+/* Safe areas. The pane root never pads, so its background and separators paint
+   through an unsafe area; its slots compensate on the edges the pane still
+   touches. The inherited `--kui-edge-inset-*` context says how far each edge
+   still reaches into an unsafe area: layouts clear an edge a region does not
+   reach, and an unset edge means the full device inset. Every slot clears the
+   context once it has applied it, so nested content never double-insets. */
+.kui-pane {
+  --_kui-pane-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-pane-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-pane-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-pane-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+.kui-pane[data-safe-area-block-start="false"] {
+  --_kui-pane-safe-block-start: 0px;
+}
+
+.kui-pane[data-safe-area-block-end="false"] {
+  --_kui-pane-safe-block-end: 0px;
+}
+
+.kui-pane[data-safe-area-inline-start="false"] {
+  --_kui-pane-safe-inline-start: 0px;
+}
+
+.kui-pane[data-safe-area-inline-end="false"] {
+  --_kui-pane-safe-inline-end: 0px;
+}
+
+.kui-pane[data-separator-block-start="true"] {
+  --kui-pane-separator-block-start-width: var(--kui-pane-separator-width, 1px);
+}
+
+.kui-pane[data-separator-block-end="true"] {
+  --kui-pane-separator-block-end-width: var(--kui-pane-separator-width, 1px);
+}
+
+.kui-pane[data-separator-inline-start="true"] {
+  --kui-pane-separator-inline-start-width: var(--kui-pane-separator-width, 1px);
+}
+
+.kui-pane[data-separator-inline-end="true"] {
+  --kui-pane-separator-inline-end-width: var(--kui-pane-separator-width, 1px);
+}
+
+/* Child selectors outrank the `.kui-content` reset the content slot also carries. */
+.kui-pane > :is(.kui-pane__header, .kui-pane__content, .kui-pane__footer) {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+  padding-inline: var(--_kui-pane-safe-inline-start)
+    var(--_kui-pane-safe-inline-end);
+}
+
+.kui-pane__header,
+.kui-pane__toolbar {
+  display: flex;
+  min-width: 0;
+  padding-block-start: var(--_kui-pane-safe-block-start);
+  flex-direction: column;
+  grid-area: header;
+}
+
+/* A header or footer holding only a Toolbar hands the toolbar its inline edges
+   instead of padding around it, so the toolbar's dividers still reach the
+   pane edge while its controls clear the unsafe area. */
+.kui-pane
+  > :is(.kui-pane__header, .kui-pane__footer):has(
+    > [data-component="toolbar"]:only-child
+  ) {
+  --kui-edge-inset-inline-start: var(--_kui-pane-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-pane-safe-inline-end);
+  padding-inline: 0;
+}
+
+/* The scrolling content takes the block insets as padding inside the scroller
+   (and matching scroll padding), so content scrolls under an unsafe edge yet
+   its first and last items can always be scrolled clear of it. A header or
+   footer already owns that edge. */
+.kui-pane__content {
+  --_kui-pane-content-block-start: var(--_kui-pane-safe-block-start);
+  --_kui-pane-content-block-end: var(--_kui-pane-safe-block-end);
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  grid-area: content;
+  overscroll-behavior: contain;
+  scroll-padding-block: var(--_kui-pane-content-block-start)
+    var(--_kui-pane-content-block-end);
+}
+
+.kui-pane > .kui-pane__content {
+  padding-block: var(--_kui-pane-content-block-start)
+    var(--_kui-pane-content-block-end);
+}
+
+.kui-pane__header ~ .kui-pane__content {
+  --_kui-pane-content-block-start: 0px;
+}
+
+.kui-pane__content:has(~ .kui-pane__footer) {
+  --_kui-pane-content-block-end: 0px;
+}
+
+.kui-pane__footer {
+  display: flex;
+  min-width: 0;
+  padding-block-end: var(--_kui-pane-safe-block-end);
+  flex-direction: column;
+  grid-area: footer;
+}
+
+/* Chrome dividers: one line under the header and one over the footer, where
+   the pinned chrome meets the scrolling content, whatever the chrome holds.
+   `chromeDividers="scroll"` (the default, no attribute) draws each only while
+   `wireScrollDividers` reports content scrolled away beneath it through
+   `data-scroll-divider` on the slot; `always` draws both; `none` neither. The
+   line is an inset shadow inside the slot, so showing or hiding it never
+   moves the chrome or the content. */
+.kui-pane > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
+  --_kui-pane-chrome-divider: transparent;
+}
+
+.kui-pane > :is(.kui-pane__header, .kui-pane__toolbar) {
+  box-shadow: inset 0 -1px var(--_kui-pane-chrome-divider);
+}
+
+.kui-pane > .kui-pane__footer {
+  box-shadow: inset 0 1px var(--_kui-pane-chrome-divider);
+}
+
+.kui-pane:not([data-chrome-dividers])
+  > :is(.kui-pane__header, .kui-pane__toolbar)[data-scroll-divider*="b"],
+.kui-pane:not([data-chrome-dividers])
+  > .kui-pane__footer[data-scroll-divider*="t"],
+.kui-pane[data-chrome-dividers="always"]
+  > :is(.kui-pane__header, .kui-pane__toolbar, .kui-pane__footer) {
+  --_kui-pane-chrome-divider: var(
+    --kui-pane-separator-color,
+    var(--kui-color-neutral-border-normal)
+  );
+}
+
+/* `chromePlacement="auto"`: the header and footer stay pinned while the pane
+   is tall enough; below 480px of height (30rem, so it scales with the text
+   size) the whole pane scrolls as one column instead, so tall chrome can never
+   squeeze the content to nothing. The pane is its own size container and lays
+   its slots out as a column: while tall, the content fills the space between
+   the chrome and scrolls itself, and the pane never scrolls; while short, the
+   content takes its natural height and the pane scrolls. */
+.kui-pane[data-chrome-placement="auto"] {
+  container: kui-pane / size;
+  display: flex;
+  overflow-y: auto;
+  flex-direction: column;
+  overscroll-behavior: contain;
+}
+
+.kui-pane[data-chrome-placement="auto"]
+  > :is(.kui-pane__header, .kui-pane__footer) {
+  flex: none;
+}
+
+.kui-pane[data-chrome-placement="auto"] > .kui-pane__content {
+  flex: 1 1 0;
+}
+
+@container kui-pane (max-height: 30rem) {
+  .kui-pane[data-chrome-placement="auto"] > .kui-pane__content {
+    flex: none;
+    overflow: visible;
+  }
+}
+
+/* As the only child of a Workbench region (its main area or a panel's
+   content, which the Workbench marks with `data-workbench-main` /
+   `data-workbench-panel-content`), a Pane fills the region, so a
+   composed toolbar's footer (or the app's own) sits at the region's bottom
+   edge rather than under short content. */
+:is([data-workbench-main], [data-workbench-panel-content])
+  > [data-component="pane"]:only-child {
+  height: 100%;
+}
+
+/* As the only child of a NavStack view or a TabScaffold scene, a Pane fills
+   it too, so its content owns the scroll and its header and footer stay
+   pinned; the view or scene then never scrolls (it hands the Pane its
+   safe-area edge context, which the Pane's slots apply). */
+:is(.kui-nav-stack__view, .kui-tab-scaffold__scene)
+  > [data-component="pane"]:only-child {
+  height: 100%;
+}

package/dist/styles/popup-menu.css

@@ -0,0 +1,271 @@
+/* An icon-only trigger's accessible name: Web Awesome names its button from the
+   slotted content, so the label is present but visually hidden. */
+.kui-popup-menu__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+/* A PopupMenu draws exactly the Select's popup: the same caret motion, surface
+   inset, row geometry, reserved check column, current-row fill, and group
+   titles, all read from the private popup-choice contract in foundation.css
+   (select.css reads the same values). */
+
+/* The trigger caret turns to face the open menu, like the Select's. */
+.kui-popup-menu > wa-button::part(caret) {
+  rotate: 0deg;
+  transition: var(--_kui-popup-caret-transition);
+}
+.kui-popup-menu[open] > wa-button::part(caret) {
+  rotate: var(--_kui-popup-caret-open-rotation);
+}
+
+/* The Select's popup fades in place; Web Awesome's dropdown also scales from
+   90%. Holding the scale leaves the shared fade. */
+.kui-popup-menu::part(menu) {
+  padding: var(--_kui-popup-inset);
+  gap: var(--_kui-popup-row-gap);
+  scale: none !important;
+}
+
+.kui-popup-menu wa-dropdown-item {
+  /* Leading inset plus the Select's check column, so item icons and labels
+     start where a Select option's do. */
+  padding: var(--_kui-popup-row-padding-block)
+    var(--_kui-popup-row-padding-inline-end) var(--_kui-popup-row-padding-block)
+    calc(
+      var(--_kui-popup-row-padding-inline-start) +
+        var(--_kui-popup-row-check-width)
+    );
+}
+.kui-popup-menu wa-dropdown-item::part(label) {
+  padding-block: var(--_kui-popup-row-label-padding-block);
+  line-height: var(--_kui-popup-row-label-line-height);
+}
+/* A keyboard-focused item is the menu's current row: the Select's brand fill,
+   with no second focus ring inside the open popup. */
+.kui-popup-menu wa-dropdown-item:focus-visible {
+  outline: none;
+  color: var(--_kui-popup-row-current-color);
+  background-color: var(--_kui-popup-row-current-background);
+}
+.kui-popup-menu > wa-divider,
+.kui-popup-menu wa-divider[slot="submenu"] {
+  --spacing: 0.5em;
+}
+
+/* Center the icon on the label's line, like the Select's start slot. */
+.kui-popup-menu wa-dropdown-item::part(icon) {
+  display: flex;
+  align-self: center;
+}
+.kui-popup-menu__icon {
+  display: inline-flex;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
+  flex: none;
+  /* Web Awesome spaces a slotted item icon 0.75em from its label (an
+     !important shadow rule). Sizing that em makes the gap the Select's. */
+  font-size: calc(var(--_kui-popup-row-icon-gap) / 0.75);
+}
+.kui-popup-menu__icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.kui-popup-menu__details {
+  display: inline-flex;
+  align-items: center;
+}
+
+.kui-popup-menu__details svg {
+  display: block;
+  width: var(--_kui-popup-row-icon-size);
+  height: var(--_kui-popup-row-icon-size);
+}
+
+.kui-popup-menu[data-trigger="context"] {
+  display: inline-block;
+  width: 0;
+  height: 0;
+}
+
+.kui-popup-menu__context-anchor {
+  position: fixed;
+  top: var(--kui-popup-menu-context-y, 0px);
+  left: var(--kui-popup-menu-context-x, 0px);
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* A group title matches the Select's group title. It is a styled element
+   rather than a slotted heading, whose Web Awesome metrics are !important. */
+.kui-popup-menu__heading {
+  padding: var(--_kui-popup-group-title-padding);
+  color: var(--kui-color-neutral-on-quiet);
+  font-size: var(--kui-font-2xs);
+  font-weight: var(--_kui-popup-group-title-font-weight);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* In a ToolbarControlGroup a PopupMenu sizes itself in the group's context:
+   the group lays out its own native and raw Web Awesome children and names a
+   PopupMenu only to key its own state on it. The trigger takes the group's
+   control height (40px, or 32px in a compact group). A mixed-content trigger
+   in a nested-dropdown group grows for its label plus the caret; a fixed 32px
+   base would center both outside its host, painting the label across the
+   separator and the caret beyond the group border. */
+/* The trigger button takes the group's control metrics, as the group's own
+   raw wa-button children do (toolbar-control-group.css excludes this
+   trigger). The PopupMenu ancestor sits in `:where()` so each rule keeps the
+   specificity of the group's matching raw-child rule and resolves against the
+   group's attribute-keyed variants exactly as they do. */
+.kui-toolbar-control-group :where(wa-dropdown.kui-popup-menu) > wa-button {
+  --wa-form-control-height: 2.5rem;
+  display: inline-flex;
+  line-height: 0;
+  align-items: center;
+  justify-content: center;
+  --wa-color-fill-quiet: transparent;
+}
+.kui-toolbar-control-group[data-size="compact"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button {
+  --wa-form-control-height: 2rem;
+}
+.kui-toolbar-control-group[data-content="mixed"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button {
+  line-height: normal;
+}
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button
+  > svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+/* Toolbar controls never wrap: a slotted icon and its label share one row. */
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button::part(label) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kui-space-xs);
+  white-space: nowrap;
+}
+/* At least a circle around an icon-only trigger, with the group's item radius;
+   hover lifts the trigger like a group button, except in a `single` group,
+   whose whole surface shows the hover (toolbar-control-group.css). */
+.kui-toolbar-control-group
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button::part(base) {
+  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
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button:hover::part(base) {
+  border-color: var(--kui-toolbar-control-border);
+  background-color: var(--kui-toolbar-control-hover-background);
+}
+.kui-toolbar-control-group[data-single="true"]
+  :where(wa-dropdown.kui-popup-menu)
+  > wa-button:hover::part(base) {
+  border-color: transparent;
+  background: transparent;
+}
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu {
+  display: inline-flex;
+  flex: 0 0 auto;
+}
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu,
+.kui-toolbar-control-group > wa-dropdown.kui-popup-menu > wa-button,
+.kui-toolbar-control-group
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  min-width: 2.5rem;
+  height: 2.5rem;
+}
+.kui-toolbar-control-group[data-size="compact"] > wa-dropdown.kui-popup-menu,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button,
+.kui-toolbar-control-group[data-size="compact"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base),
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown.kui-popup-menu
+  wa-button,
+.kui-toolbar-control-group[data-size="compact"][data-nested-dropdown="true"]
+  wa-dropdown.kui-popup-menu
+  wa-button::part(base) {
+  min-width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+}
+.kui-toolbar-control-group[data-size="compact"][data-content="mixed"]
+  > wa-dropdown.kui-popup-menu {
+  margin: -2px;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button,
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  min-width: max-content;
+}
+.kui-toolbar-control-group[data-content="mixed"][data-nested-dropdown="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  width: max-content;
+}
+.kui-toolbar-control-group[data-single="true"]
+  > wa-dropdown.kui-popup-menu
+  > wa-button::part(base) {
+  width: max-content;
+}
+
+/* The menu insets a composing parent asks for. A PopupMenu applies them to
+   itself; its default is the Select listbox inset above, which a
+   ToolbarControlGroup's `standard` inset keeps. A PopupSurface's inset follows
+   the group's, so a surface wins when both apply. */
+.kui-toolbar-control-group[data-menu-inset="compact"]
+  wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0.25rem;
+}
+.kui-toolbar-control-group[data-menu-inset="list-zero"]
+  wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0;
+}
+.kui-popup-surface[data-inset="standard"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: var(--kui-wa-surface-inset, 0.5rem);
+}
+.kui-popup-surface[data-inset="compact"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0.25rem;
+}
+.kui-popup-surface[data-inset="list-zero"]
+  > wa-dropdown.kui-popup-menu::part(menu) {
+  padding: 0;
+}