@kerfjs/ui 5.0.0-beta.74 → 5.0.0-beta.76

package/dist/styles/components/layout/split-view/split-view.css

@@ -0,0 +1,146 @@
+.kui-split-view {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--kui-color-surface);
+  /* Safe areas: the list column grows by the inline-start unsafe inset and each
+     pane compensates only for the edges it touches — never the shared interior
+     edge. The compact form hands the context to its NavStack. See pane.css for
+     the `--kui-edge-inset-*` edge context. */
+  --_kui-split-view-safe-block-start: var(
+    --kui-edge-inset-block-start,
+    var(--kui-safe-area-block-start, env(safe-area-inset-top, 0px))
+  );
+  --_kui-split-view-safe-block-end: var(
+    --kui-edge-inset-block-end,
+    var(--kui-safe-area-block-end, env(safe-area-inset-bottom, 0px))
+  );
+  --_kui-split-view-safe-inline-start: var(
+    --kui-edge-inset-inline-start,
+    var(--kui-safe-area-inline-start, env(safe-area-inset-left, 0px))
+  );
+  --_kui-split-view-safe-inline-end: var(
+    --kui-edge-inset-inline-end,
+    var(--kui-safe-area-inline-end, env(safe-area-inset-right, 0px))
+  );
+}
+
+/* The list pane; when not resizable it takes an intrinsic column and the detail
+   grows to fill. A resizable list is sized by ResizableRegion instead. */
+.kui-split-view__list {
+  min-width: 0;
+  min-height: 0;
+  flex: 0 0 auto;
+  width: calc(
+    var(--kui-split-view-list-width, 20rem) +
+      var(--_kui-split-view-safe-inline-start)
+  );
+  border-inline-end: 1px solid var(--kui-color-neutral-border-normal);
+}
+
+.kui-split-view__list[data-resizable="true"] {
+  width: 100%;
+  border-inline-end: 0;
+}
+
+.kui-split-view__detail {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.kui-split-view__list,
+.kui-split-view__detail {
+  --kui-edge-inset-block-start: var(--_kui-split-view-safe-block-start);
+  --kui-edge-inset-block-end: var(--_kui-split-view-safe-block-end);
+  --kui-edge-inset-inline-start: var(--_kui-split-view-safe-inline-start);
+  --kui-edge-inset-inline-end: var(--_kui-split-view-safe-inline-end);
+}
+
+.kui-split-view__list {
+  --kui-edge-inset-inline-end: 0px;
+}
+
+.kui-split-view__detail {
+  --kui-edge-inset-inline-start: 0px;
+}
+
+/* Each pane pads for the edges it touches unless its only child is a Pane or
+   layout, which then owns the insets. */
+.kui-split-view__list:not(
+  :has(
+    > :is(
+        [data-component="pane"],
+        [data-component="nav-stack"],
+        [data-component="split-view"],
+        [data-component="workbench"],
+        [data-component="tab-scaffold"]
+      ):only-child
+  )
+),
+.kui-split-view__detail: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: var(--kui-edge-inset-block-start)
+    var(--kui-edge-inset-block-end);
+  padding-inline: var(--kui-edge-inset-inline-start)
+    var(--kui-edge-inset-inline-end);
+}
+
+.kui-split-view__list
+  > :not(
+    :is(
+      [data-component="pane"],
+      [data-component="nav-stack"],
+      [data-component="split-view"],
+      [data-component="workbench"],
+      [data-component="tab-scaffold"]
+    ):only-child
+  ),
+.kui-split-view__detail
+  > :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;
+}
+
+/* Compact mode is a full-bleed NavStack. */
+.kui-split-view--compact {
+  display: block;
+  height: 100%;
+}
+
+/* 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 SplitView 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="split-view"]: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);
+}