@kerfjs/ui 5.0.0-beta.10 → 5.0.0-beta.101

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

@@ -0,0 +1,269 @@
+.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;
+  align-items: center;
+}
+
+button.kui-toolbar-text {
+  appearance: none;
+  border: 0;
+  border-radius: 0.375rem;
+  background: transparent;
+  font-family: inherit;
+  text-align: start;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+
+button.kui-toolbar-text:hover {
+  background: var(--kui-color-neutral-fill-normal);
+}
+
+button.kui-toolbar-text:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: 0.125rem;
+}
+
+/* In a Toolbar zone, a title fills the toolbar's control band (the
+   `--_kui-toolbar-band` the Toolbar provides) and centers its first line in
+   it; further lines of a wrapped title continue below the band. These rules
+   precede the size and wrap rules below, which keep their own minimum
+   heights. */
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-text {
+  align-self: flex-start;
+  height: auto;
+  min-height: var(--_kui-toolbar-band);
+}
+
+:is(.kui-toolbar__leading, .kui-toolbar__center, .kui-toolbar__trailing)
+  > .kui-toolbar-text[data-wrap="true"] {
+  padding-block: max(0px, calc((var(--_kui-toolbar-band) - 1.25em) / 2));
+}
+
+/* A title with supporting copy stacks the two lines and centers them together
+   in the control band (growing past it only when they do not fit), so
+   trailing groups stay on the band and both lines start at the same edge. */
+.kui-toolbar-text[data-has-description="true"] {
+  height: auto;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 0.125rem;
+}
+
+.kui-toolbar-text__description {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-xs);
+  font-weight: 400;
+  letter-spacing: normal;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A filling title grows into its row's free space and truncates there. */
+.kui-toolbar-text[data-fill="true"] {
+  flex: 1 1 auto;
+}
+
+/* The text lives in a block child, not directly in the flex box, so
+   `text-overflow: ellipsis` actually applies (it is a no-op on a flex item). */
+.kui-toolbar-text__text {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  /* Keep the line box larger than the font's em square. Glyph ink can extend
+     below a 1em line box, so clipping for ellipsis must not also shave off
+     descenders such as g, j, p, q, and y. */
+  line-height: 1.2;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.kui-toolbar-text:is([data-size="xlarge"], [data-size="xlarge-fixed"]) {
+  /* Both title sizes keep page/panel title color and geometry. Height grows to
+     their text instead of clipping ascenders in the default 40px box. */
+  height: auto;
+  min-height: 2.75rem;
+  color: var(--kui-color-text);
+  letter-spacing: -0.025em;
+}
+
+.kui-toolbar-text[data-size="xlarge"] {
+  font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
+}
+
+.kui-toolbar-text[data-size="xlarge-fixed"] {
+  font-size: var(--kui-font-l);
+}
+
+.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);
+}
+
+/* Every size keeps the inherited UI sans stack: compact identity text is a
+   label, not code. (A monospace role here resolved through Web Awesome's
+   `ui-monospace, monospace` code stack; Chromium does not
+   recognize `ui-monospace`, so small labels fell back to generic monospace.) */
+.kui-toolbar-text[data-size="small"] {
+  font-size: var(--kui-font-xs);
+}
+
+.kui-toolbar-text[data-size="xsmall"] {
+  font-size: var(--kui-font-2xs);
+}
+
+/* A lone title in a balanced center is a navigation bar's title (a NavStack
+   view beside its back control): it keeps the page-title color it had leading
+   at the root, at whatever size, so the title does not dim as it centers. */
+.kui-toolbar[data-center-align="balanced"]
+  > .kui-toolbar__center
+  > .kui-toolbar-text:only-child:not([data-tone]) {
+  color: var(--kui-color-text);
+}
+
+/* In an overlay Pane header (`headerPresentation="overlay"`), overlay
+   NavStack chrome (`chromePresentation="overlay"`), or an overlay NavStack
+   bottom toolbar (`bottomToolbarPresentation="overlay"`), cross-fading
+   copies included, the title sits on the translucent chrome material with
+   arbitrary content scrolling beneath it. Quiet colors fall below AA there
+   over the worst-case backdrop (the material over black in light, white in
+   dark): the default title color
+   measures about 3.8:1 (light) and the description about 3.2:1 (light) and
+   4.1:1 (dark). The title takes the normal text color (about 10.5:1 and
+   8.3:1), and the description lifts halfway toward it (about 5.9:1 in both
+   themes), so it still reads as secondary but keeps AA. A ToolbarText in a
+   DialogSurface floating header (`headerPresentation="floating"`), slotted
+   as the dialog's label or into its header actions, sits on the raised chrome
+   material and takes the same lift. See docs/accessibility.md "Chrome
+   material". */
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-text:not([data-tone]),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > .kui-toolbar-text:is([slot="label"], [slot="header-actions"]):not(
+    [data-tone]
+  ),
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > :is([slot="label"], [slot="header-actions"])
+  .kui-toolbar-text:not([data-tone]),
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-text:not([data-tone]),
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-text:not([data-tone]) {
+  color: var(--kui-color-text);
+}
+
+.kui-pane[data-header-presentation="overlay"]
+  > .kui-pane__header
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > .kui-toolbar-text:is([slot="label"], [slot="header-actions"]):not(
+    [data-tone]
+  )
+  .kui-toolbar-text__description,
+.kui-dialog-surface[data-header-presentation="floating"]
+  > wa-dialog
+  > :is([slot="label"], [slot="header-actions"])
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-nav-stack[data-chrome-presentation="overlay"]
+  > .kui-nav-stack__chrome
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description,
+.kui-nav-stack[data-bottom-toolbar-presentation="overlay"]
+  > .kui-nav-stack__bottom
+  .kui-toolbar-text:not([data-tone])
+  .kui-toolbar-text__description {
+  color: color-mix(
+    in srgb,
+    var(--kui-color-text-quiet),
+    var(--kui-color-text) 50%
+  );
+}
+
+.kui-toolbar-text[data-tone="dark"] {
+  color: var(--kui-color-neutral-on-loud);
+}
+
+button.kui-toolbar-text[data-tone="dark"]:hover {
+  background: color-mix(in srgb, var(--kui-color-surface) 28%, transparent);
+}
+
+/* Single line, no ellipsis: hard-clip the overflow instead of showing …. */
+.kui-toolbar-text[data-ellipsis="false"] .kui-toolbar-text__text {
+  text-overflow: clip;
+}
+
+/* Wrap onto multiple lines. The box grows to fit and switches from the centered
+   single-line row to a top-aligned block with readable leading; a min-height keeps
+   a one-line label at the toolbar row height. */
+.kui-toolbar-text[data-wrap="true"] {
+  align-items: flex-start;
+  height: auto;
+  min-height: 2.5rem;
+}
+
+.kui-toolbar-text:is(
+    [data-size="xlarge"],
+    [data-size="xlarge-fixed"]
+  )[data-wrap="true"] {
+  min-height: 2.75rem;
+}
+
+.kui-toolbar-text[data-wrap="true"] .kui-toolbar-text__text {
+  white-space: normal;
+  line-height: 1.25;
+}
+
+/* Wrap capped to N lines with an ellipsis at the cut. `-webkit-line-clamp` needs
+   the box display and emits the … itself; the unprefixed `line-clamp` follows for
+   engines that ship it. */
+.kui-toolbar-text[data-wrap="true"][data-max-lines] .kui-toolbar-text__text {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--kui-toolbar-text-max-lines);
+  line-clamp: var(--kui-toolbar-text-max-lines);
+  overflow: hidden;
+}
+
+/* Wrap capped to N lines without an ellipsis: clip at a max-height instead of
+   line-clamp (which always ellipsizes). */
+.kui-toolbar-text[data-wrap="true"][data-max-lines][data-ellipsis="false"]
+  .kui-toolbar-text__text {
+  display: block;
+  -webkit-line-clamp: none;
+  line-clamp: none;
+  max-height: calc(var(--kui-toolbar-text-max-lines) * 1.25em);
+}
+.kui-toolbar-text[data-toolbar-width-hidden="true"],
+.kui-toolbar-text:has(
+  > [data-toolbar-visibility-state][data-toolbar-width-hidden="true"]
+) {
+  display: none;
+}
+.kui-toolbar-text > [data-toolbar-visibility-state] {
+  display: none;
+}

package/dist/styles/components/collections/framed-list/framed-list.css

@@ -0,0 +1,47 @@
+/* The same frame as ValueTable: content-item margin, a real 1px border, the
+   rounded radius, and a lowered (or base) fill. Rows clip to its corners. */
+.kui-framed-list {
+  --kui-framed-list-border: var(--kui-color-neutral-border-normal);
+  display: flex;
+  flex-direction: column;
+  margin-block: 0;
+  margin-inline: var(--kui-layout-inline-margin, 0.5rem);
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--kui-framed-list-border);
+  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
+  background: var(--kui-color-surface-lowered);
+  list-style: none;
+}
+
+.kui-framed-list[data-surface="base"] {
+  background: var(--kui-color-surface);
+}
+
+/* Each row owns the content inset and the 1px divider above it, inset to the
+   row's padding like ValueTable's separators. Its margin is reset because a
+   document or Web Awesome native stylesheet indents list items. */
+.kui-framed-list__row {
+  --_kui-framed-list-row-padding: var(--kui-layout-item-padding, 0.5rem);
+  position: relative;
+  display: grid;
+  min-width: 0;
+  margin: 0;
+  min-height: 2.75rem;
+  padding: var(--_kui-framed-list-row-padding);
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.kui-framed-list__row + .kui-framed-list__row::before {
+  position: absolute;
+  top: 0;
+  right: var(--_kui-framed-list-row-padding);
+  left: var(--_kui-framed-list-row-padding);
+  border-top: 1px solid var(--kui-framed-list-border);
+  content: "";
+}
+
+.kui-framed-list__row[data-highlighted="true"] {
+  background: var(--kui-color-brand-fill-quiet);
+}

package/dist/styles/components/collections/list/list.css

@@ -0,0 +1,250 @@
+.kui-list {
+  --kui-list-divider-color: var(--kui-color-neutral-border-normal);
+  --kui-list-gap: var(--kui-layout-item-gap, 0.5rem);
+  /* Private per-instance values are reset on every List so a nested List that
+     omits `gap` or `flex` never inherits its ancestor's; the component's inline
+     style overrides these defaults for the props it does set. */
+  --_kui-list-gap: 0;
+  --_kui-list-column-gap: var(--_kui-list-gap);
+  --_kui-list-row-gap: var(--_kui-list-gap);
+  --_kui-list-flex: 0 1 auto;
+  --_kui-list-inset-top: 0px;
+  --_kui-list-inset-right: 0px;
+  --_kui-list-inset-bottom: 0px;
+  --_kui-list-inset-left: 0px;
+  --_kui-list-clearance-start: 0px;
+  --_kui-list-clearance-end: 0px;
+  --_kui-list-ring-room: 0px;
+  --_kui-list-max-height: none;
+  --_kui-list-min-height: 0px;
+  --_kui-list-divider-top: transparent;
+  --_kui-list-divider-right: transparent;
+  --_kui-list-divider-bottom: transparent;
+  --_kui-list-divider-left: transparent;
+
+  display: flex;
+  min-width: 0;
+  min-height: var(--_kui-list-min-height);
+  max-height: var(--_kui-list-max-height);
+  box-sizing: border-box;
+  padding: calc(
+      var(--_kui-list-inset-top, 0px) + var(--_kui-list-clearance-start)
+    )
+    var(--_kui-list-inset-right, 0)
+    calc(var(--_kui-list-inset-bottom, 0px) + var(--_kui-list-clearance-end))
+    var(--_kui-list-inset-left, 0);
+  flex: var(--_kui-list-flex, initial);
+  flex-direction: column;
+  align-items: stretch;
+  align-content: space-between;
+  justify-content: flex-start;
+  column-gap: var(--_kui-list-column-gap);
+  row-gap: var(--_kui-list-row-gap);
+  box-shadow:
+    inset 0 1px var(--_kui-list-divider-top),
+    inset -1px 0 var(--_kui-list-divider-right),
+    inset 0 -1px var(--_kui-list-divider-bottom),
+    inset 1px 0 var(--_kui-list-divider-left);
+}
+
+.kui-list[data-control-insets*="t"] {
+  --_kui-list-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-control-insets*="r"] {
+  --_kui-list-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-control-insets*="b"] {
+  --_kui-list-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-control-insets*="l"] {
+  --_kui-list-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-list[data-text-insets*="t"] {
+  --_kui-list-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[data-text-insets*="r"] {
+  --_kui-list-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[data-text-insets*="b"] {
+  --_kui-list-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-list[data-text-insets*="l"] {
+  --_kui-list-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+/* `inset="document"`: a reading inset on all four sides that replaces any
+   side-selected text or control inset. */
+.kui-list[data-inset="document"] {
+  --_kui-list-inset-top: var(--kui-space-l);
+  --_kui-list-inset-right: var(--kui-space-xl);
+  --_kui-list-inset-bottom: var(--kui-space-l);
+  --_kui-list-inset-left: var(--kui-space-xl);
+}
+
+@media (max-width: 36rem) {
+  .kui-list[data-inset="document"] {
+    --_kui-list-inset-right: var(--kui-space-m);
+    --_kui-list-inset-left: var(--kui-space-m);
+  }
+}
+
+/* `frame`: a bordered, rounded stack (a result picker). Its 4px inset on
+   every side replaces any side-selected or document inset, and is exactly
+   the reach of a row's focus ring (3px ring, 1px offset), so the first and
+   last rows' rings stay inside a scrolling frame's clip at the scroll
+   extremes. (The ring-room scroll padding every scrollable List carries
+   handles a row stopped mid-scroll.) */
+.kui-list[data-frame="true"] {
+  --_kui-list-inset-top: var(--kui-space-2xs);
+  --_kui-list-inset-right: var(--kui-space-2xs);
+  --_kui-list-inset-bottom: var(--kui-space-2xs);
+  --_kui-list-inset-left: var(--kui-space-2xs);
+  border: 1px solid var(--kui-color-neutral-border-normal);
+  border-radius: var(--kui-radius-m);
+}
+
+.kui-list[data-h-align="left"] {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+.kui-list[data-h-align="center"] {
+  align-items: center;
+  align-content: space-around;
+}
+
+.kui-list[data-h-align="right"] {
+  align-items: flex-end;
+  align-content: flex-end;
+}
+
+.kui-list[data-v-align="middle"] {
+  justify-content: space-around;
+}
+
+.kui-list[data-v-align="bottom"] {
+  justify-content: flex-end;
+}
+
+.kui-list[data-v-align="full"] {
+  justify-content: space-between;
+}
+
+/* A scrollable List's scroll padding is a row's focus-ring reach (3px ring,
+   1px offset) plus 2px of slack, so a row focused or scrolled into view stops
+   with its ring inside the clip rather than flush against it: Chromium's
+   focus scroll stops 1px short of the padded target, and a row's fractional
+   position can cost another 0.3px. Scroll padding moves nothing at rest; at
+   the scroll extremes an unframed List's first and last rows still meet the
+   clip, which is what `frame`'s 4px inset is for. */
+.kui-list[data-scrollable="true"] {
+  --_kui-list-ring-room: calc(var(--kui-space-2xs) + 2px);
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+/* `scrollClearance`: chrome lying over the List's block edge (a dialog's
+   floating footer) publishes how far it covers that edge through the
+   inherited `--kui-scroll-clearance-block-*` context. The List adds it to its
+   own block padding and scroll padding, so rows scroll visibly beneath the
+   chrome while the first and last rows, and anything focused or scrolled into
+   view, still come to rest clear of it. */
+.kui-list:is(
+  [data-scroll-clearance="block-start"],
+  [data-scroll-clearance="both"]
+) {
+  --_kui-list-clearance-start: var(--kui-scroll-clearance-block-start, 0px);
+}
+
+.kui-list:is(
+  [data-scroll-clearance="block-end"],
+  [data-scroll-clearance="both"]
+) {
+  --_kui-list-clearance-end: var(--kui-scroll-clearance-block-end, 0px);
+}
+
+.kui-list:is([data-scroll-clearance], [data-scrollable="true"]) {
+  scroll-padding-block: calc(
+      var(--_kui-list-clearance-start) + var(--_kui-list-ring-room)
+    )
+    calc(var(--_kui-list-clearance-end) + var(--_kui-list-ring-room));
+}
+
+/* In a Pane's scrolling content, a List that does not scroll itself keeps
+   its full height rather than shrinking to the content box. A shrunken List
+   lets its rows overflow its own box, and the scroller's block-end padding
+   (a bottom safe area, an overlay NavStack bottom toolbar's clearance)
+   follows the List's box, not those rows, so the last row could never
+   scroll clear of the edge. A `flex` basis still grows the List to fill. */
+.kui-pane > .kui-pane__content > .kui-list:not([data-scrollable="true"]) {
+  flex-shrink: 0;
+}
+
+/* A scrollable List owns the overflow, so its rows keep their natural height
+   and scroll rather than shrink. Items that clip their own overflow (a
+   ListItem) have a zero automatic minimum height, so the default
+   `flex-shrink: 1` compressed multiline rows into one another once the List
+   was bounded by a max-height ancestor. */
+.kui-list[data-scrollable="true"] > * {
+  flex-shrink: 0;
+}
+
+/* A scrollable List is a keyboard-focusable scroller: Chromium focuses it on
+   Tab when it holds no focusable rows, and a dialog may pick it as its first
+   focusable area. Its ring sits inside its box, so a rounded or clipping
+   parent cannot cut it off, and rounds with the standard control radius. */
+.kui-list[data-scrollable="true"]:focus-visible {
+  border-radius: var(--kui-radius-m);
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+.kui-list:is([divider-sides*="t"], [data-scroll-divider*="t"]) {
+  --_kui-list-divider-top: var(--kui-list-divider-color);
+}
+
+.kui-list:is([divider-sides*="r"], [data-scroll-divider*="r"]) {
+  --_kui-list-divider-right: var(--kui-list-divider-color);
+}
+
+.kui-list:is([divider-sides*="b"], [data-scroll-divider*="b"]) {
+  --_kui-list-divider-bottom: var(--kui-list-divider-color);
+}
+
+.kui-list:is([divider-sides*="l"], [data-scroll-divider*="l"]) {
+  --_kui-list-divider-left: var(--kui-list-divider-color);
+}
+
+/* `surface`: a solid background behind the stack and its insets. */
+.kui-list[data-surface="base"] {
+  background: var(--kui-color-surface);
+}
+
+.kui-list[data-surface="raised"] {
+  background: var(--kui-color-surface-raised);
+}
+
+/* `fill`: the layout root of a definite-height parent (an app root or a
+   fixed-height frame) takes its full height. Inside a flex layout use `flex`. */
+.kui-list[data-fill="true"] {
+  height: 100%;
+}