@kerfjs/ui 5.0.0-beta.8 → 5.0.0-beta.80

package/dist/styles/tab-navigator.css

@@ -0,0 +1,237 @@
+.kui-tab-scaffold {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  background: var(--kui-color-surface);
+  /* Safe areas: the scenes and the bar paint through unsafe areas; the bar
+     compensates for the bottom and inline edges, and the scenes for the top
+     and inline edges (see pane.css for the `--kui-edge-inset-*` context). */
+  --_kui-tab-scaffold-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-tab-scaffold-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-tab-scaffold-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-tab-scaffold-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+.kui-tab-scaffold__scenes {
+  --kui-edge-inset-block-start: var(--_kui-tab-scaffold-safe-block-start);
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: var(--_kui-tab-scaffold-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-tab-scaffold-safe-inline-end);
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Every tab stays mounted (its NavStack keeps its stack and scroll); only the
+   active scene is shown. */
+.kui-tab-scaffold__scene {
+  position: absolute;
+  overflow: auto;
+  inset: 0;
+}
+
+.kui-tab-scaffold__scene:is(:focus-visible, [data-outlined="true"]) {
+  outline: var(--kui-focus-ring);
+  outline-offset: -3px;
+}
+
+.kui-tab-scaffold__scene[data-appearance="sunken"] {
+  background: var(
+    --kui-sunken-panel-background,
+    var(--kui-color-surface-lowered)
+  );
+}
+
+/* A scene is its region's scroll owner, so its top inset is padding inside
+   the scroller. A scene whose only child is a Pane or layout (usually a
+   NavStack) lets that child own the insets instead. */
+.kui-tab-scaffold__scene:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+) {
+  padding-block-start: var(--kui-edge-inset-block-start);
+  padding-inline: var(--kui-edge-inset-inline-start)
+    var(--kui-edge-inset-inline-end);
+  scroll-padding-block-start: var(--kui-edge-inset-block-start);
+}
+
+/* A plain scene adds one outer gutter; a sole Pane or layout keeps ownership
+   of its own content and may opt into deepInset there. */
+.kui-tab-scaffold__scene[data-deep-inset="true"]:not(
+    :has(
+      > :is(
+          [data-component="pane"],
+          [data-component="nav-stack"],
+          [data-component="split-view"],
+          [data-component="workbench"],
+          [data-component="tab-scaffold"]
+        ):only-child
+    )
+  ) {
+  padding-block-start: calc(
+    var(--kui-edge-inset-block-start) + var(--kui-space-xs)
+  );
+  padding-block-end: var(--kui-space-xs);
+  padding-inline: calc(var(--kui-edge-inset-inline-start) + var(--kui-space-xs))
+    calc(var(--kui-edge-inset-inline-end) + var(--kui-space-xs));
+  scroll-padding-block: calc(
+      var(--kui-edge-inset-block-start) + var(--kui-space-xs)
+    )
+    var(--kui-space-xs);
+}
+
+.kui-tab-scaffold__scene
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ) {
+  --kui-edge-inset-block-start: 0px;
+  --kui-edge-inset-block-end: 0px;
+  --kui-edge-inset-inline-start: 0px;
+  --kui-edge-inset-inline-end: 0px;
+}
+
+.kui-tab-scaffold__scene[data-active="false"] {
+  visibility: hidden;
+}
+
+.kui-tab-scaffold__bar {
+  display: flex;
+  flex: 0 0 auto;
+  padding-block-start: var(--kui-space-2xs);
+  /* Respect the home-indicator safe area on iOS-class devices. */
+  padding-block-end: calc(
+    var(--kui-space-2xs) + var(--_kui-tab-scaffold-safe-block-end)
+  );
+  padding-inline: var(--_kui-tab-scaffold-safe-inline-start)
+    var(--_kui-tab-scaffold-safe-inline-end);
+  /* Chrome divider: with `chromeDividers="scroll"` (the default, no
+     attribute) the bar's 1px top border shows only while the active scene's
+     content continues below it — never at the scroll end or when the content
+     fits. `wireScrollDividers` reports that state through
+     `data-scroll-divider`; `always` shows it without the wiring, and `none`
+     never. The border is always there and only its color changes, so
+     showing it never moves the bar or a tab. */
+  border-block-start: 1px solid
+    var(--_kui-tab-scaffold-bar-divider, transparent);
+  background: var(--kui-color-surface);
+}
+
+.kui-tab-scaffold:not([data-chrome-dividers])
+  > .kui-tab-scaffold__bar[data-scroll-divider*="t"],
+.kui-tab-scaffold[data-chrome-dividers="always"] > .kui-tab-scaffold__bar {
+  --_kui-tab-scaffold-bar-divider: var(--kui-color-neutral-border-normal);
+}
+
+.kui-tab-scaffold__tab {
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+  min-height: 2.75rem;
+  padding: var(--kui-space-2xs) var(--kui-space-xs);
+  border: 0;
+  color: var(--kui-color-text-quiet);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+}
+
+.kui-tab-scaffold__tab[aria-selected="true"] {
+  color: var(--kui-color-brand-on-quiet);
+}
+
+.kui-tab-scaffold__tab:focus-visible {
+  outline: var(--kui-focus-ring);
+  outline-offset: -2px;
+}
+
+.kui-tab-scaffold__tab-icon {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+
+/* The iOS tab-bar badge: over the icon's top-trailing corner, its leading
+   edge just past the icon's center line so a longer count grows outward. The
+   Badge keeps its own geometry; only this anchor is positioned. Without an
+   icon the badge stays in flow above the label. */
+.kui-tab-scaffold__tab-badge {
+  display: flex;
+  pointer-events: none;
+}
+
+.kui-tab-scaffold__tab-icon > .kui-tab-scaffold__tab-badge {
+  position: absolute;
+  inset-block-start: -0.4375rem;
+  inset-inline-start: calc(50% + 0.1875rem);
+}
+
+/* The text-free dot never grows, so it centers on the icon's top-trailing
+   corner instead: half over the glyph, half outside it. */
+.kui-tab-scaffold__tab-icon
+  > .kui-tab-scaffold__tab-badge[data-badge-kind="dot"] {
+  inset-block-start: -0.125rem;
+  inset-inline-start: calc(100% - 0.3125rem);
+}
+
+.kui-tab-scaffold__tab-icon svg {
+  width: 1.375rem;
+  height: 1.375rem;
+}
+
+.kui-tab-scaffold__tab-label {
+  flex: none;
+  max-width: 100%;
+  overflow: hidden;
+  font-size: var(--kui-font-2xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 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 TabNavigator 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="tab-scaffold"]:only-child {
+  height: 100%;
+  --kui-edge-inset-block-start: var(--_kui-workbench-content-edge-block-start);
+  --kui-edge-inset-block-end: var(--_kui-workbench-content-edge-block-end);
+  --kui-edge-inset-inline-start: var(
+    --_kui-workbench-content-edge-inline-start
+  );
+  --kui-edge-inset-inline-end: var(--_kui-workbench-content-edge-inline-end);
+}

package/dist/styles/text.css

@@ -0,0 +1,158 @@
+.kui-text {
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  margin: 0;
+  white-space: normal;
+  overflow-wrap: normal;
+}
+
+/* Match the themed Web Awesome form-control label without introducing a
+   native <label> that would falsely point at a non-form preview. */
+.kui-text__field-label {
+  box-sizing: border-box;
+  min-width: 0;
+  padding-inline: calc(
+    var(--wa-form-control-border-width, 1px) +
+      var(--wa-form-control-padding-inline, 0.5rem)
+  );
+  margin: 0 0 0.5em;
+  color: var(--kui-color-neutral-on-quiet, var(--wa-color-text-quiet));
+  font-size: var(--kui-font-xs, var(--wa-font-size-xs));
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  line-height: var(--wa-line-height-condensed);
+  text-transform: uppercase;
+}
+
+.kui-text[data-wrap="anywhere"] {
+  overflow-wrap: anywhere;
+}
+
+.kui-text[data-wrap="nowrap"] {
+  white-space: nowrap;
+}
+
+.kui-text[data-wrap="truncate"] {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+span.kui-text[data-wrap="truncate"] {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.kui-text__clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--_kui-text-max-lines);
+}
+
+.kui-text[data-tone="quiet"] {
+  color: var(--kui-color-text-quiet);
+}
+
+.kui-text[data-tone="danger"] {
+  color: var(--kui-color-danger-on-quiet);
+}
+
+.kui-text[data-size="compact"] {
+  font-size: var(--kui-font-xs);
+}
+
+.kui-text[data-size="large"] {
+  font-size: var(--kui-font-l);
+}
+
+.kui-text[data-size="xlarge"] {
+  font-size: var(--kui-font-2xl);
+}
+
+.kui-text[data-font="monospace"] {
+  font-family: var(--kui-font-mono);
+}
+
+.kui-text[data-border="none"] {
+  border: 0;
+}
+
+.kui-text[data-flush="true"] {
+  padding: 0;
+  border: 0;
+}
+
+.kui-text[data-line-height="tight"] {
+  line-height: 1.2;
+}
+
+span.kui-text {
+  margin: 0;
+  border: 0;
+  padding: 0;
+}
+
+/* A ListHeader's label: the title's single text child, set as a compact,
+   uppercase, single-line label that truncates with an ellipsis. The title is
+   a div around a heading or, for a toggle header, the toggle button around
+   an inline span. */
+.kui-list-header__title > .kui-text {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-size: var(--kui-font-xs);
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.kui-list-header[data-size="xs"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-2xs);
+  text-transform: capitalize;
+}
+
+.kui-list-header:is([data-size="m"], [data-size="l"], [data-size="xl"])
+  .kui-list-header__title
+  > .kui-text {
+  font-family: var(--wa-font-family-heading, var(--kui-font-sans));
+  font-weight: var(--wa-font-weight-heading, 600);
+  letter-spacing: normal;
+  line-height: var(--wa-line-height-condensed, 1.2);
+  text-transform: none;
+}
+
+.kui-list-header[data-size="m"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-m);
+}
+
+.kui-list-header[data-size="l"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-l);
+}
+
+.kui-list-header[data-size="xl"] .kui-list-header__title > .kui-text {
+  font-size: var(--kui-font-xl);
+}
+
+/* Exterior control gutters preserve the Text-owned border and padding.
+   These rules follow inline/context resets so an explicit prop also works there. */
+
+.kui-text[data-control-margins*="t"] {
+  margin-top: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="r"] {
+  margin-right: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="b"] {
+  margin-bottom: var(--kui-layout-inline-margin, 0.5rem);
+}
+
+.kui-text[data-control-margins*="l"] {
+  margin-left: var(--kui-layout-inline-margin, 0.5rem);
+}