@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.50

package/dist/styles/catalog/components/catalog-section-list.css

@@ -0,0 +1,22 @@
+.kui-catalog__group {
+  margin-block-start: var(--kui-space-m);
+}
+
+.kui-catalog__group:first-child {
+  margin-block-start: var(--kui-space-2xs);
+}
+
+.kui-catalog__items {
+  min-width: 0;
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog__group,
+  .kui-catalog__group:first-child {
+    min-width: 0;
+    margin: 0;
+  }
+}
+.kui-catalog__sections {
+  display: contents;
+}

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

@@ -0,0 +1,82 @@
+.kui-catalog__sidebar {
+  display: grid;
+  width: var(--kui-catalog-sidebar-width);
+  min-width: var(--kui-catalog-sidebar-width);
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+  justify-self: start;
+  box-sizing: border-box;
+  border: 0 solid var(--kui-pane-separator-color, var(--kui-color-border));
+  border-inline-end-width: var(--kui-pane-separator-width, 1px);
+  background: var(--kui-color-surface);
+  transition:
+    transform 200ms ease,
+    visibility 0s linear 0s;
+}
+
+.kui-catalog__brand {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.kui-catalog__sidebar[data-collapsed="true"] {
+  transform: translateX(-100%);
+  visibility: hidden;
+  transition:
+    transform 200ms ease,
+    visibility 0s linear 200ms;
+}
+
+.kui-catalog__mark {
+  display: block;
+  width: 2.125rem;
+  height: 2.125rem;
+  flex: 0 0 auto;
+}
+
+.kui-catalog__subtitle {
+  margin: 0;
+  padding: var(--kui-layout-item-padding, 0.5rem);
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-xs);
+}
+
+.kui-catalog__navigation {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--kui-layout-content-gap, 1.5rem);
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog__sidebar[data-collapsed="true"] {
+    display: none;
+  }
+
+  .kui-catalog__sidebar {
+    width: 100%;
+    min-width: 0;
+    height: auto;
+    justify-self: stretch;
+    border-block-end-width: var(--kui-pane-separator-width, 1px);
+    border-inline-end-width: 0;
+    transform: none;
+  }
+
+  .kui-catalog__navigation {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
+    gap: 0.5rem 1rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kui-catalog__sidebar {
+    transition-duration: 0s;
+  }
+}

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

@@ -0,0 +1,60 @@
+.kui-catalog__stage {
+  width: 100%;
+  min-height: 0;
+  flex: 1 0 auto;
+}
+
+.kui-catalog__canvas {
+  position: relative;
+  display: grid;
+  width: min(100%, var(--kui-catalog-content-measure, 70rem));
+  min-width: 0;
+  min-height: 100%;
+  margin-inline: auto;
+  padding: var(--kui-layout-content-gap);
+  box-sizing: border-box;
+  place-items: center;
+}
+
+/* `wireCatalogGeometryOverlay` appends the bound, border, and margin layers. */
+/* css-ownership: allow-root kui-catalog__geometry-bound -- The catalog wire appends measured specimen bound layers at runtime. */
+/* css-ownership: allow-root kui-catalog__geometry-border -- The catalog wire appends computed border layers at runtime. */
+/* css-ownership: allow-root kui-catalog__geometry-margin -- The catalog wire appends computed margin layers at runtime. */
+.kui-catalog__geometry-overlay {
+  position: absolute;
+  z-index: 3;
+  pointer-events: none;
+  inset: 0;
+}
+
+.kui-catalog__geometry-bound,
+.kui-catalog__geometry-border,
+.kui-catalog__geometry-margin {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+}
+
+.kui-catalog__geometry-bound {
+  border: 1px dashed color-mix(in srgb, var(--kui-color-text) 40%, transparent);
+}
+
+.kui-catalog__geometry-border {
+  border: 0 solid
+    color-mix(in srgb, var(--kui-color-accent-text) 72%, transparent);
+}
+
+.kui-catalog__geometry-margin {
+  background: color-mix(in srgb, #f6a94c 55%, transparent);
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog__stage {
+    min-height: 24rem;
+  }
+
+  .kui-catalog__canvas {
+    min-height: 16rem;
+  }
+}

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

@@ -0,0 +1,22 @@
+.kui-catalog {
+  --kui-catalog-sidebar-width: 18rem;
+  --kui-catalog-content-measure: 70rem;
+
+  display: grid;
+  height: 100vh;
+  grid-template-columns: var(--kui-catalog-sidebar-width) minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.kui-catalog[data-sidebar-collapsed="true"] {
+  grid-template-columns: 0 minmax(0, 1fr);
+}
+
+@media (max-width: 52rem) {
+  .kui-catalog,
+  .kui-catalog[data-sidebar-collapsed="true"] {
+    height: auto;
+    min-height: 100vh;
+    grid-template-columns: 1fr;
+  }
+}