@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

package/dist/styles/badge.css

@@ -0,0 +1,145 @@
+.kui-badge {
+  --_kui-badge-fill-quiet: var(--kui-color-neutral-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-neutral-on-normal);
+  --_kui-badge-border: var(--kui-color-neutral-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-neutral-on-quiet);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+
+  display: inline-flex;
+  min-width: 0;
+  min-height: 1.5rem;
+  padding-inline: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: var(--kui-layout-pill-radius, calc(1px + 1.3125rem));
+  color: var(--_kui-badge-on-quiet);
+  background: var(--_kui-badge-fill-quiet);
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* A leading icon sits 4px before the text and inherits the badge's color. */
+.kui-badge[data-has-icon="true"] {
+  gap: 0.25rem;
+}
+
+/* maxWidth caps the badge; the label truncates with an ellipsis and the
+   badge may shrink below the cap in a tight flex row. */
+.kui-badge[data-truncate="true"] {
+  max-width: var(--_kui-badge-max-width);
+  flex: 0 1 auto;
+}
+
+.kui-badge__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.kui-badge__icon {
+  display: inline-grid;
+  width: 1em;
+  height: 1em;
+  color: inherit;
+  place-items: center;
+  flex: none;
+}
+
+.kui-badge[data-tone="info"] {
+  --_kui-badge-fill-quiet: var(--kui-color-brand-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-brand-on-fill);
+  --_kui-badge-border: var(--kui-color-brand-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-brand-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="pop"] {
+  --_kui-badge-fill-quiet: var(--kui-color-pop-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-pop-on-fill);
+  --_kui-badge-border: var(--kui-color-pop-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-pop-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="success"] {
+  --_kui-badge-fill-quiet: var(--kui-color-success-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-success-on-fill);
+  --_kui-badge-border: var(--kui-color-success-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-success-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="warning"] {
+  --_kui-badge-fill-quiet: var(--kui-color-warning-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-warning-on-fill);
+  --_kui-badge-border: var(--kui-color-warning-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-warning-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-tone="danger"] {
+  --_kui-badge-fill-quiet: var(--kui-color-danger-fill-quiet);
+  --_kui-badge-fill-solid: var(--kui-color-danger-on-fill);
+  --_kui-badge-border: var(--kui-color-danger-border-normal);
+  --_kui-badge-on-quiet: var(--kui-color-danger-on-fill);
+  --_kui-badge-on-solid: var(--kui-color-surface);
+}
+
+.kui-badge[data-appearance="solid"] {
+  color: var(--_kui-badge-on-solid);
+  background: var(--_kui-badge-fill-solid);
+}
+
+.kui-badge[data-appearance="outline"] {
+  border-color: var(--_kui-badge-border);
+  color: var(--_kui-badge-on-quiet);
+  background: transparent;
+}
+
+.kui-badge[data-shape="rounded"] {
+  border-radius: var(--kui-radius-s);
+}
+
+.kui-badge[data-size="compact"] {
+  min-width: 1.25rem;
+  min-height: 1.25rem;
+  padding-inline: 0.35rem;
+  font-size: var(--kui-font-2xs);
+}
+
+/* The text-free status dot (the iOS "new content" dot): a small solid circle
+   in the tone's solid fill, without the text box's padding or minimum size. */
+.kui-badge[data-size="dot"] {
+  width: 0.5rem;
+  min-width: 0.5rem;
+  height: 0.5rem;
+  min-height: 0.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--_kui-badge-fill-solid);
+}
+
+/* A multiple icon-only Select's count badge, in the trigger's end slot after
+   its fixed icon, sits 4px from the icon (the caret keeps its 12px after it).
+   The summary that ends the Select's label (and accessible name) stays inline
+   text, so a visible label reads "Labels: Bug, Docs" in place of the hidden
+   value. */
+.kui-select > .kui-badge[slot="end"] {
+  margin-inline-start: 0.25rem;
+}
+
+/* A StateBanner's badge follows its title inline and is taller than the
+   title's line. Negative block margins keep it out of the line-height
+   calculation, so a wrapped title's lines stay evenly spaced whichever line
+   the badge lands on. */
+.kui-state-banner__copy > .kui-badge {
+  margin-block: -0.5em;
+  margin-inline-end: var(--kui-layout-item-gap, 0.5rem);
+  vertical-align: baseline;
+}

package/dist/styles/catalog/components/catalog-example-stack.css

@@ -0,0 +1,14 @@
+.kui-catalog-example-stack {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 46rem;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Application-width compositions span the stage instead of a reading measure. */
+.kui-catalog-example-stack[data-width="full"] {
+  max-width: none;
+}

package/dist/styles/catalog/components/catalog-example.css

@@ -0,0 +1,204 @@
+.kui-catalog-example {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.kui-catalog-example__viewport {
+  position: relative;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.kui-catalog-example__viewport > * {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.kui-catalog-example__viewport[data-layout="grid"] {
+  display: grid;
+}
+
+.kui-catalog-example__viewport[data-layout="flex"] {
+  display: flex;
+}
+
+.kui-catalog-example__viewport[data-layout="flex-column"] {
+  display: flex;
+  flex-direction: column;
+}
+
+.kui-catalog-example__viewport[data-width="full"] {
+  width: 100%;
+}
+
+/* A production sidebar rail's width, for sidebar-pane specimens. */
+.kui-catalog-example__viewport[data-width="sidebar"] {
+  width: min(100%, 17rem);
+}
+
+.kui-catalog-example__viewport[data-width="compact"] {
+  width: min(100%, 27.5rem);
+}
+
+.kui-catalog-example__viewport[data-width="medium"] {
+  width: min(100%, 40rem);
+}
+
+.kui-catalog-example__viewport[data-width="wide"] {
+  width: 100%;
+  max-width: 54rem;
+}
+
+.kui-catalog-example__viewport[data-width="text"] {
+  width: 17.5rem;
+}
+
+.kui-catalog-example__viewport[data-width="control"] {
+  min-width: min(24rem, 100%);
+}
+
+.kui-catalog-example__viewport[data-height="short"] {
+  height: 13.75rem;
+}
+
+.kui-catalog-example__viewport[data-height="reduced"] {
+  height: 17.5rem;
+}
+
+.kui-catalog-example__viewport[data-height="medium"] {
+  height: 20rem;
+}
+
+.kui-catalog-example__viewport[data-height="tall"] {
+  height: 22.5rem;
+}
+
+/* An application-sized frame for app shells and whole-screen layouts, which
+   read cramped in the component-sized heights above. The frame stands in for
+   the screen, so it is the containing block for screen-fixed chrome: a compact
+   CollapsiblePanel overlay, its backdrop, and restore controls dock to the
+   frame's edges instead of the page's, where the frame's inset and clip would
+   cut them off. An identity transform establishes that containing block.
+   `contain: layout` does too, but WebKit then mis-hit-tests any transformed
+   descendant of that fixed chrome once the frame also clips (every pressed
+   ListItem scales), so taps on an open overlay's items were lost. */
+.kui-catalog-example__viewport[data-height="app"] {
+  height: 37rem;
+  transform: translate(0);
+}
+
+.kui-catalog-example__viewport[data-min-height="short"] {
+  min-height: 16rem;
+}
+
+.kui-catalog-example__viewport[data-min-height="medium"] {
+  min-height: 20rem;
+}
+
+.kui-catalog-example__viewport[data-min-height="app"] {
+  min-height: 37rem;
+}
+
+/* A content column: each in-flow child fills a capped measure, at the start
+   or centered. Top-layer `[popover]` specimens keep their own geometry (they
+   position against the viewport or a named anchor, not this column). */
+.kui-catalog-example__viewport[data-content-width] > :not([popover]) {
+  width: min(100%, var(--_kui-catalog-example-content-width));
+}
+
+.kui-catalog-example__viewport[data-content-width="compact"] {
+  --_kui-catalog-example-content-width: 27.5rem;
+}
+
+.kui-catalog-example__viewport[data-content-width="medium"] {
+  --_kui-catalog-example-content-width: 40rem;
+}
+
+.kui-catalog-example__viewport[data-content-width="wide"] {
+  --_kui-catalog-example-content-width: 54rem;
+}
+
+.kui-catalog-example__viewport[data-content-width][data-content-align="center"]
+  > :not([popover]) {
+  margin-inline: auto;
+}
+
+.kui-catalog-example__viewport[data-frame] {
+  border: 1px solid var(--kui-color-neutral-border-normal);
+}
+
+.kui-catalog-example__viewport[data-frame="dashed"] {
+  border-style: dashed;
+}
+
+.kui-catalog-example__viewport[data-surface="default"] {
+  background: var(--kui-color-surface);
+}
+
+.kui-catalog-example__viewport[data-surface="lowered"] {
+  background: var(--kui-sunken-surface);
+}
+
+.kui-catalog-example__viewport[data-overflow="hidden"] {
+  overflow: hidden;
+}
+
+.kui-catalog-example__viewport[data-overflow="auto-x"] {
+  overflow-x: auto;
+}
+
+.kui-catalog-example__viewport[data-shadow="true"] {
+  box-shadow: var(--kui-shadow-s);
+}
+
+.kui-catalog-example__compact-fallback {
+  display: none;
+}
+
+@media ((max-width: 52rem)) {
+  .kui-catalog-example__viewport[data-responsive="roomy-only"] {
+    display: none;
+  }
+
+  .kui-catalog-example__compact-fallback {
+    display: block;
+  }
+}
+
+@media ((max-width: 30rem)) {
+  .kui-catalog-example__viewport[data-min-height="medium"] {
+    min-height: 16rem;
+  }
+}
+
+@media ((forced-colors: active)) {
+  .kui-catalog-example__viewport[data-frame] {
+    forced-color-adjust: auto;
+  }
+}
+
+/* Bare specimens use a small inset to align with the surrounding examples. */
+.kui-catalog-example[data-align="glyph"]
+  > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
+    :popover-open
+  ) {
+  --kui-catalog-example-align: 1rem;
+  margin-inline-start: var(--kui-catalog-example-align);
+}
+
+.kui-catalog-example[data-align="inline-control"]
+  > :not([data-catalog-example-label]):not([data-catalog-example-note]):not(
+    :popover-open
+  ) {
+  --kui-catalog-example-align: 0.5rem;
+  margin-inline-start: var(--kui-catalog-example-align);
+}
+
+.kui-catalog-example[data-align="text-trigger"] > wa-dropdown > wa-button {
+  margin-inline-start: 0.5rem;
+}

package/dist/styles/catalog/components/catalog-stage.css

@@ -0,0 +1,61 @@
+/* The preview stage fills the work area's scroller and grows with a taller
+   specimen, never shrinking under it. The default checkerboard shares the
+   sunken Pane's translucent surface instead of painting a second layer. */
+.kui-catalog__stage {
+  flex: 1 0 auto;
+  min-height: 100%;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h8v8H0zM8 8h8v8H8z'/%3E%3C/svg%3E");
+  background-size: 1rem 1rem;
+}
+
+.kui-catalog__stage[data-background-style="vertical-stripes"] {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%238e8e93' fill-opacity='.12' d='M0 0h8v16H0z'/%3E%3C/svg%3E");
+  background-size: 1rem 1rem;
+}
+
+.kui-catalog__stage[data-background-style="layout-guide"] {
+  background-image: linear-gradient(
+    to right,
+    transparent 15px,
+    rgb(142 142 147 / 12%) 15px 16px,
+    transparent 16px 23px,
+    rgb(142 142 147 / 12%) 23px 24px,
+    transparent 24px 32px,
+    rgb(142 142 147 / 12%) 32px 33px,
+    transparent 33px
+  );
+  background-size: auto;
+  background-repeat: no-repeat;
+}
+
+.kui-catalog__stage[data-background-style="surface"] {
+  background-color: var(--kui-color-surface);
+  background-image: none;
+  background-size: auto;
+}
+
+.kui-catalog__stage[data-background-style="sunken"] {
+  background-color: transparent;
+  background-image: none;
+  background-size: auto;
+}
+
+/* Align the specimen canvas with the work area's reading start. */
+.kui-catalog__canvas {
+  position: relative;
+  display: grid;
+  width: min(100%, 70rem);
+  min-width: 0;
+  min-height: 100%;
+  padding: var(--kui-space-m);
+  box-sizing: border-box;
+  place-items: start;
+}
+
+/* An application-width example stack spans the whole stage, so the canvas
+   lifts its own width cap for it. The stack is matched by its public
+   `data-catalog-example-stack` marker: the canvas styles only itself. */
+.kui-catalog__canvas:has(> [data-catalog-example-stack][data-width="full"]) {
+  width: 100%;
+}

package/dist/styles/catalog/components/catalog.css

@@ -0,0 +1,26 @@
+/* The catalog fills its container, which must have a definite height (the
+   `document.css` baseline's `.kui-app-root`, as for any Workbench). */
+.kui-catalog {
+  height: 100%;
+}
+
+.kui-catalog [data-catalog-filter-empty],
+.kui-catalog [data-catalog-section][hidden],
+.kui-catalog [data-catalog-entry-name][hidden],
+.kui-catalog [data-catalog-secondary-group][hidden] {
+  display: none;
+}
+
+.kui-catalog [data-catalog-filter-empty][data-visible="true"] {
+  display: block;
+}
+
+.kui-catalog [data-catalog-secondary-collapsed="true"] {
+  display: none;
+}
+
+.kui-catalog
+  [data-catalog-filter-active="true"]
+  [data-catalog-secondary-collapsed="true"] {
+  display: flex;
+}