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

package/dist/styles/components/layout/resizable-region/resizable-region.css

@@ -0,0 +1,545 @@
+.kui-resizable-region {
+  --kui-resizable-region-separator-color: var(
+    --kui-color-neutral-border-normal
+  );
+  --kui-resizable-region-handle-color: var(--kui-color-neutral-on-quiet);
+  --kui-resizable-region-handle-active-color: var(--kui-color-text-link);
+  /* Extra track a horizontal region adds when it reaches an unsafe screen edge,
+     so its surface paints through the unsafe area while its committed size
+     stays the content width. The region sets it itself from the context of a
+     layout that places it at an edge (a SplitView list); it never inherits
+     into a nested region. */
+  --kui-resizable-region-edge-extent: 0px;
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  background: var(--kui-resizable-region-background, transparent);
+}
+/* As a split SplitView's list, the region's track grows by the unsafe
+   inline-start inset the SplitView provides, while its committed size stays
+   the content width. A collapsed region stays shut. */
+.kui-split-view[data-split-mode="split"]
+  > .kui-resizable-region:not([data-collapsed="true"]) {
+  --kui-resizable-region-edge-extent: var(--_kui-split-view-safe-inline-start);
+}
+.kui-resizable-region[data-axis="horizontal"] {
+  width: calc(
+    var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
+  );
+  height: 100%;
+  flex: 0 0
+    calc(
+      var(--kui-resizable-region-size) + var(--kui-resizable-region-edge-extent)
+    );
+}
+.kui-resizable-region[data-axis="vertical"] {
+  width: 100%;
+  height: var(--kui-resizable-region-size);
+  flex: 0 0 var(--kui-resizable-region-size);
+  flex-direction: column;
+}
+.kui-resizable-region[data-collapsed="true"] {
+  overflow: visible;
+}
+/* The content spans the whole region, like the separator does. A vertical
+   stack keeps several children at their natural height, while a lone child —
+   typically a Pane or a layout — fills the region, so it owns its scrolling
+   and reaches the region's far edge. */
+.kui-resizable-region__content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.kui-resizable-region[data-axis="vertical"] > .kui-resizable-region__content {
+  flex-grow: 1;
+}
+.kui-resizable-region__content > :only-child {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.kui-resizable-region[data-content-overflow="auto"]
+  > .kui-resizable-region__content {
+  overflow: auto;
+}
+.kui-resizable-region[data-content-overflow="visible"] {
+  z-index: var(--kui-resizable-region-popup-z, 5);
+  overflow: visible;
+}
+.kui-resizable-region[data-content-overflow="visible"]
+  > .kui-resizable-region__content {
+  overflow: visible;
+}
+/* An open Web Awesome dropdown (including PopupMenu) releases both clipping
+   ancestors without rerendering the region during the dropdown lifecycle. */
+.kui-resizable-region:has(wa-dropdown[open]) {
+  z-index: var(--kui-resizable-region-popup-z, 5);
+  overflow: visible;
+}
+.kui-resizable-region:has(wa-dropdown[open]) > .kui-resizable-region__content {
+  overflow: visible;
+}
+.kui-resizable-region[data-separator="hidden"] {
+  --kui-resizable-region-separator-color: transparent;
+}
+.kui-resizable-region[data-collapsed="true"] > .kui-resizable-region__handle,
+.kui-resizable-region:not([data-presentation="inline"])
+  > .kui-resizable-region__handle {
+  display: none;
+}
+
+/* The track always snaps to its new size. Motion is isolated to the fixed-size
+   content so a large sibling workspace incurs one reflow, not one per frame. */
+.kui-resizable-region[data-collapse-motion="slide"]
+  > .kui-resizable-region__content,
+.kui-resizable-region[data-collapse-motion="fade-slide"]
+  > .kui-resizable-region__content {
+  transition:
+    opacity 160ms ease,
+    transform 200ms ease;
+}
+.kui-resizable-region[data-axis="horizontal"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  width: calc(
+    var(--kui-resizable-region-expanded-size) +
+      var(--kui-resizable-region-edge-extent)
+  );
+  min-width: calc(
+    var(--kui-resizable-region-expanded-size) +
+      var(--kui-resizable-region-edge-extent)
+  );
+}
+.kui-resizable-region[data-axis="vertical"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  height: var(--kui-resizable-region-expanded-size);
+  min-height: var(--kui-resizable-region-expanded-size);
+}
+/* While expanded, the sliding content follows the region's actual track, so a
+   region its parent clamps (a max-width, a narrow container) never shows
+   content past its separator. The fixed expanded size above only matters once
+   the track collapses to zero and the content slides out. */
+.kui-resizable-region[data-axis="horizontal"][data-collapse-motion]:not(
+    [data-collapsed="true"]
+  )
+  > .kui-resizable-region__content {
+  width: 100%;
+  min-width: 0;
+}
+.kui-resizable-region[data-axis="vertical"][data-collapse-motion]:not(
+    [data-collapsed="true"]
+  )
+  > .kui-resizable-region__content {
+  height: auto;
+  min-height: 0;
+  flex: 1 1 0;
+}
+.kui-resizable-region[data-axis="horizontal"][data-edge="end"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateX(-100%);
+}
+.kui-resizable-region[data-axis="horizontal"][data-edge="start"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateX(100%);
+}
+.kui-resizable-region[data-axis="vertical"][data-edge="end"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateY(-100%);
+}
+.kui-resizable-region[data-axis="vertical"][data-edge="start"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  transform: translateY(100%);
+}
+.kui-resizable-region[data-collapse-motion="fade-slide"][data-collapsed="true"]
+  > .kui-resizable-region__content {
+  opacity: 0;
+}
+.kui-resizable-region[data-resizing="true"] > .kui-resizable-region__content {
+  transition: none;
+}
+
+/* Responsive replacement policies. Overlay regions stay on their logical edge
+   and stop participating in the parent's flex tracks; hidden regions are fully
+   replaced by application-owned compact UI. An overlay floats over the work
+   area, so it paints the surface like an overlay CollapsiblePanel: without it
+   the content beneath (and the restore control stacked below it) shows
+   through the shadowed box. An inline region stays transparent and shows its
+   host's background. */
+.kui-resizable-region[data-presentation="overlay"] {
+  position: absolute;
+  z-index: var(--kui-resizable-region-overlay-z, 41);
+  background: var(--kui-resizable-region-background, var(--kui-color-surface));
+  box-shadow: var(--kui-shadow-l);
+}
+/* Each overlay maximum caps only the resizable axis: a side overlay spans its
+   host's full height and a drawer its full width, like their inline tracks. */
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"] {
+  inset-block: 0;
+  max-width: var(--kui-resizable-region-overlay-max-width, 85vw);
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"][data-edge="end"] {
+  inset-inline-start: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"][data-edge="start"] {
+  inset-inline-end: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"] {
+  inset-inline: 0;
+  max-height: var(--kui-resizable-region-overlay-max-height, 85vh);
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"][data-edge="end"] {
+  inset-block-start: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"][data-edge="start"] {
+  inset-block-end: 0;
+}
+.kui-resizable-region[data-presentation="overlay"][data-collapsed="true"] {
+  pointer-events: none;
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  width: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-width, 85vw)
+  );
+  min-width: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-width, 85vw)
+  );
+}
+.kui-resizable-region[data-presentation="overlay"][data-axis="vertical"][data-collapse-motion]:not(
+    [data-collapse-motion="none"]
+  )
+  > .kui-resizable-region__content {
+  height: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-height, 85vh)
+  );
+  min-height: min(
+    var(--kui-resizable-region-expanded-size),
+    var(--kui-resizable-region-overlay-max-height, 85vh)
+  );
+}
+.kui-resizable-region[data-presentation="hidden"] {
+  display: none;
+}
+/* An open side overlay (a horizontal region) covers the work area beside it,
+   so that area's floating controls (a FloatingToolbar, a restore corner) are
+   hidden, not merely stacked beneath it: they never paint over the overlay
+   whatever stacking context an app puts them in, and hidden they leave the
+   tab order and the accessibility tree. They come back as the overlay
+   closes. The ResizableRegion's own covered context,
+   `--_kui-resizable-region-covered`, is read by FloatingToolbar and the
+   layouts' restore corners. It is set on the overlay's container and cleared again on the
+   overlay regions in it, so it reaches the overlay's siblings only. It is
+   never set by a universal selector below the :has() container (`:has(…) >
+   :not(…)`): Chromium then restyles every child of every ancestor of a DOM
+   change, which made each change in a long list about 30× slower. */
+:where(
+  :has(
+    > .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"]:not(
+        [data-collapsed="true"]
+      )
+  )
+) {
+  --_kui-resizable-region-covered: hidden;
+}
+:where(
+    :has(
+      > .kui-resizable-region[data-presentation="overlay"][data-axis="horizontal"]:not(
+          [data-collapsed="true"]
+        )
+    )
+  )
+  > .kui-resizable-region[data-presentation="overlay"] {
+  --_kui-resizable-region-covered: initial;
+}
+
+@container (max-width: 44rem) {
+  .kui-resizable-region[data-responsive-fill-at="narrow"] {
+    width: 100%;
+    flex: 1 1 auto;
+  }
+
+  .kui-resizable-region[data-responsive-fill-at="narrow"]
+    > .kui-resizable-region__handle {
+    display: none;
+  }
+}
+
+@container (max-width: 28rem) {
+  .kui-resizable-region[data-responsive-fill-at="compact"] {
+    width: 100%;
+    flex: 1 1 auto;
+  }
+
+  .kui-resizable-region[data-responsive-fill-at="compact"]
+    > .kui-resizable-region__handle {
+    display: none;
+  }
+}
+
+/* A collapsed region can supply its own affordance. It floats in a corner of
+   the region's own container, never of the viewport, so a region embedded in a
+   page cannot float it over page content outside that container. The
+   container becomes the corner's containing block and isolates its stacking
+   only while a restore control is shown, at zero specificity so an app's own
+   positioning of that container wins. The corner is inset from the
+   container's edges plus the unsafe area of each edge it reaches. The
+   control belongs to the layer beneath open overlays, two below the overlay
+   z-index: an open overlay region covers it as it covers the rest of the
+   work area, the Workbench rule. A collapsed overlay drops its pointer
+   events, so the control is usable again as soon as the overlay closes. */
+:where(:has(> .kui-resizable-region__restore)) {
+  position: relative;
+  isolation: isolate;
+  anchor-scope: --kui-restore-drawer;
+}
+/* An expanded bottom region (a vertical region resized from its top edge)
+   beside the collapsed one — a direct child of that container or of one of
+   its direct children (the app's work-area column) — owns the container's
+   bottom, so the corner floats above the drawer's top edge instead of over
+   it. The region publishes that edge as an anchor only there, beside a
+   CollapsiblePanel or ResizableRegion restore control (matched by their
+   restore attributes); CollapsiblePanel drawers publish the same anchor. A
+   drawer nested deeper, inside the work area's own content, belongs to
+   another layout and publishes nothing. The selector ends on the region, not
+   on a universal `> * > * > *` scope below the container: a universal
+   selector after a :has() container restyles every child of every ancestor
+   of a DOM change in Chromium. Without anchor positioning the corner keeps
+   the container's bottom edge. */
+:where(
+    :has(> [data-panel-restore], > [data-region-restore]),
+    :has(> [data-panel-restore], > [data-region-restore]) > *
+  )
+  > .kui-resizable-region[data-axis="vertical"][data-edge="start"][data-presentation="inline"]:not(
+    [data-collapsed="true"]
+  ) {
+  anchor-name: --kui-restore-drawer;
+}
+.kui-resizable-region__restore {
+  --_kui-resizable-region-restore-inset: var(
+    --kui-resizable-region-restore-inset,
+    1rem
+  );
+  position: absolute;
+  /* Hidden while an open side overlay covers the content (see above). */
+  visibility: var(
+    --_kui-workbench-covered,
+    var(
+      --_kui-collapsible-panel-covered,
+      var(--_kui-resizable-region-covered, inherit)
+    )
+  );
+  z-index: var(
+    --kui-resizable-region-restore-z,
+    calc(var(--kui-resizable-region-overlay-z, 41) - 2)
+  );
+  position-visibility: always;
+  inset-block-end: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-block-end,
+        var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+      )
+  );
+  /* Above an expanded drawer's top edge when one is in scope (see above). */
+  inset-block-end: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      anchor(
+        --kui-restore-drawer top,
+        var(
+          --kui-edge-inset-block-end,
+          var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+        )
+      )
+  );
+}
+.kui-resizable-region__restore[data-placement="inline"] {
+  position: static;
+}
+.kui-resizable-region__restore[data-position^="top"][data-placement="corner"] {
+  inset-block-end: auto;
+  inset-block-start: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-block-start,
+        var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+      )
+  );
+}
+.kui-resizable-region__restore[data-position="bottom-start"] {
+  inset-inline-start: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-inline-start,
+        var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+      )
+  );
+}
+.kui-resizable-region__restore[data-position="top-start"] {
+  inset-inline-start: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-inline-start,
+        var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+      )
+  );
+}
+.kui-resizable-region__restore[data-position="top-end"] {
+  inset-inline-end: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-inline-end,
+        var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+      )
+  );
+}
+.kui-resizable-region__restore[data-position="bottom-end"] {
+  inset-inline-end: calc(
+    var(--_kui-resizable-region-restore-inset) +
+      var(
+        --kui-edge-inset-inline-end,
+        var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+      )
+  );
+}
+.kui-resizable-region__handle {
+  position: absolute;
+  z-index: 3;
+  display: grid;
+  min-width: 20px;
+  min-height: 20px;
+  color: var(--kui-resizable-region-handle-color);
+  place-items: center;
+  touch-action: none;
+}
+.kui-resizable-region__handle::before {
+  position: absolute;
+  background: var(--kui-resizable-region-separator-color);
+  content: "";
+  pointer-events: none;
+}
+.kui-resizable-region[data-axis="horizontal"] .kui-resizable-region__handle {
+  top: 0;
+  bottom: 0;
+  width: 20px;
+  cursor: col-resize;
+}
+.kui-resizable-region[data-axis="horizontal"]
+  .kui-resizable-region__handle::before {
+  top: 0;
+  bottom: 0;
+  width: 1px;
+}
+.kui-resizable-region[data-axis="horizontal"][data-edge="end"]
+  .kui-resizable-region__handle {
+  right: -10px;
+}
+.kui-resizable-region[data-axis="horizontal"][data-edge="start"]
+  .kui-resizable-region__handle {
+  left: -10px;
+}
+.kui-resizable-region[data-axis="vertical"] .kui-resizable-region__handle {
+  right: 0;
+  left: 0;
+  height: 20px;
+  cursor: row-resize;
+}
+.kui-resizable-region[data-axis="vertical"]
+  .kui-resizable-region__handle::before {
+  right: 0;
+  left: 0;
+  height: 1px;
+}
+.kui-resizable-region[data-axis="vertical"][data-edge="end"]
+  .kui-resizable-region__handle {
+  bottom: -10px;
+}
+.kui-resizable-region[data-axis="vertical"][data-edge="start"]
+  .kui-resizable-region__handle {
+  top: -10px;
+}
+/* wireResizableRegions sets data-handle-inset when a parent clamps the track
+   and the separator has less room past it than the handle's overhang, which
+   puts it at the parent's edge. The handle then sits wholly inside the region
+   and keeps its separator line on the region's edge, so a clipping ancestor
+   never cuts off half of the hit target or its focus ring. The grip stays
+   centered in the handle there: the separator is the clipping edge, so a grip
+   centered on it would be cut in half. Everywhere else the grip is drawn on
+   the separator line. */
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="end"]
+  > .kui-resizable-region__handle {
+  right: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="end"]
+  > .kui-resizable-region__handle::before {
+  right: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="start"]
+  > .kui-resizable-region__handle {
+  left: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="horizontal"][data-edge="start"]
+  > .kui-resizable-region__handle::before {
+  left: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="end"]
+  > .kui-resizable-region__handle {
+  bottom: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="end"]
+  > .kui-resizable-region__handle::before {
+  bottom: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="start"]
+  > .kui-resizable-region__handle {
+  top: 0;
+}
+.kui-resizable-region[data-handle-inset][data-axis="vertical"][data-edge="start"]
+  > .kui-resizable-region__handle::before {
+  top: 0;
+}
+.kui-resizable-region__handle:hover,
+.kui-resizable-region__handle:focus-visible {
+  color: var(--kui-resizable-region-handle-active-color);
+}
+/* The ring stays wholly inside the handle's box (the focus ring is 3px).
+   The handle runs the region's full length, and those ends usually meet a
+   clipping ancestor's edge, which would otherwise shave the ring there. */
+.kui-resizable-region__handle:focus-visible {
+  border-radius: var(--kui-radius-s);
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+.kui-resizable-region__handle-icon {
+  position: relative;
+  display: grid;
+  width: 0.9rem;
+  height: 0.9rem;
+  opacity: 0;
+  pointer-events: none;
+  place-items: center;
+}
+.kui-resizable-region__handle-icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.kui-resizable-region__handle:hover .kui-resizable-region__handle-icon,
+.kui-resizable-region__handle:focus-visible .kui-resizable-region__handle-icon {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-resizable-region > .kui-resizable-region__content {
+    transition: none;
+  }
+}

package/dist/styles/components/layout/row/row.css

@@ -0,0 +1,114 @@
+.kui-row {
+  --kui-row-gap: var(--kui-layout-item-gap, 0.5rem);
+  /* Private per-instance values are reset on every Row so a nested Row never
+     inherits its ancestor's; the inline style overrides them per prop. */
+  --_kui-row-gap: var(--kui-row-gap);
+  --_kui-row-column-gap: var(--_kui-row-gap);
+  --_kui-row-row-gap: var(--_kui-row-gap);
+  --_kui-row-flex: 0 1 auto;
+  --_kui-row-inset-top: 0;
+  --_kui-row-inset-right: 0;
+  --_kui-row-inset-bottom: 0;
+  --_kui-row-inset-left: 0;
+
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+  padding: var(--_kui-row-inset-top, 0) var(--_kui-row-inset-right, 0)
+    var(--_kui-row-inset-bottom, 0) var(--_kui-row-inset-left, 0);
+  flex: var(--_kui-row-flex, initial);
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  align-content: space-between;
+  justify-content: flex-start;
+  column-gap: var(--_kui-row-column-gap);
+  row-gap: var(--_kui-row-row-gap);
+}
+
+.kui-row[data-control-insets*="t"] {
+  --_kui-row-inset-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="r"] {
+  --_kui-row-inset-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="b"] {
+  --_kui-row-inset-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-control-insets*="l"] {
+  --_kui-row-inset-left: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-row[data-text-insets*="t"] {
+  --_kui-row-inset-top: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="r"] {
+  --_kui-row-inset-right: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="b"] {
+  --_kui-row-inset-bottom: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-text-insets*="l"] {
+  --_kui-row-inset-left: calc(
+    var(--kui-layout-inline-margin, 0.5rem) + 1px +
+      var(--kui-layout-item-padding, 0.5rem)
+  );
+}
+
+.kui-row[data-wrap="true"] {
+  flex-wrap: wrap;
+}
+
+.kui-row[data-h-align="center"] {
+  justify-content: space-around;
+}
+
+.kui-row[data-h-align="right"] {
+  justify-content: flex-end;
+}
+
+.kui-row[data-h-align="full"] {
+  justify-content: space-between;
+}
+
+.kui-row[data-v-align="top"] {
+  align-items: flex-start;
+  align-content: flex-start;
+}
+
+.kui-row[data-v-align="middle"] {
+  align-items: center;
+  align-content: space-around;
+}
+
+.kui-row[data-v-align="bottom"] {
+  align-items: flex-end;
+  align-content: flex-end;
+}
+
+.kui-row[data-v-align="baseline"] {
+  align-items: baseline;
+  align-content: baseline;
+}
+
+/* `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-row[data-fill="true"] {
+  height: 100%;
+}

package/dist/styles/components/layout/spacer/spacer.css

@@ -0,0 +1,11 @@
+.kui-spacer {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  pointer-events: none;
+}
+
+.kui-spacer[data-flex="true"] {
+  flex: 1 1 auto;
+}