@loidolt/theme-styles 0.9.1 → 0.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-styles",
-  "version": "0.9.1",
+  "version": "0.10.1",
   "description": "Base styles, fonts, accessibility helpers, and utilities for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -31,7 +31,7 @@
     "build": "node -e \"console.log('theme-styles: source CSS is publish-ready')\""
   },
   "dependencies": {
-    "@loidolt/theme-tokens": "^0.9.1"
+    "@loidolt/theme-tokens": "^0.10.1"
   },
   "publishConfig": {
     "access": "public",

package/src/components/overlays.css

@@ -398,6 +398,157 @@
     padding-block: var(--loidolt-space-4);
   }
 }
+/* A tab's leading icon, beside its label. */
+.ldt-tabs__trigger:has(.ldt-tabs__icon) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--loidolt-space-2);
+}
+.ldt-tabs__icon {
+  display: inline-flex;
+  flex: none;
+}
+.ldt-tabs__icon :where(svg) {
+  width: 1.15em; /* @literal icon box follows the label size */
+  height: 1.15em; /* @literal icon box follows the label size */
+}
+/* Panels wrapped for a shared header: the header sits above whichever panel shows. */
+.ldt-tabs__panels {
+  min-width: 0;
+  min-height: 0;
+}
+
+/*
+ * Rail: a settings sidebar's icon tabs. Vertically it is a narrow column whose panels scroll
+ * beside it while the header stays pinned; horizontally it is one row of equal tabs above the
+ * panels, which never scrolls sideways. Give the root a height for the vertical panels to scroll.
+ */
+.ldt-tabs--rail {
+  /* The vertical rail's whole width: room for an icon over a label of about nine characters.
+     Override per app. */
+  --ldt-rail-width: 4.75rem;
+  min-height: 0;
+}
+.ldt-tabs--rail[data-orientation='vertical'] {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
+  gap: 0;
+  height: 100%;
+}
+.ldt-tabs--rail .ldt-tabs__list {
+  /* The rail's width is its own (a fixed column, or the row it shares); long labels end in an
+     ellipsis rather than widening whatever holds the rail. */
+  contain: inline-size;
+  /* Tabs meet edge to edge, so the whole rail is target and hover area, with no dead space. */
+  gap: 0;
+  padding: 0;
+  overflow: hidden;
+}
+.ldt-tabs--rail .ldt-tabs__list[data-orientation='vertical'] {
+  min-width: var(--ldt-rail-width);
+  overflow-y: auto;
+  border-right: 0;
+  border-inline-end: var(--loidolt-border-width) solid var(--loidolt-border);
+  scrollbar-width: none;
+}
+.ldt-tabs--rail .ldt-tabs__trigger {
+  min-width: 0;
+  min-height: calc(var(--loidolt-size-control) * 1.5);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--loidolt-space-1);
+  padding: var(--loidolt-space-2) var(--loidolt-space-1);
+  border: 0;
+  border-radius: 0;
+  font-size: var(--loidolt-font-size-xs);
+  letter-spacing: 0; /* tracking would push short labels into ellipses */
+  text-align: center;
+  cursor: pointer;
+}
+.ldt-tabs--rail .ldt-tabs__trigger[data-orientation='horizontal'] {
+  flex: 1 1 0;
+  padding-inline: 0;
+}
+/* The vertical indicator sits on the rail's leading edge. Both sides carry a border so the
+   icon stays centred; only the leading one takes the accent. */
+.ldt-tabs--rail .ldt-tabs__trigger[data-orientation='vertical'] {
+  border-inline: var(--loidolt-stroke-indicator) solid transparent;
+}
+.ldt-tabs--rail .ldt-tabs__icon :where(svg) {
+  width: 1.25rem; /* @literal rail icons are sized for the eye, not the label */
+  height: 1.25rem; /* @literal rail icons are sized for the eye, not the label */
+}
+.ldt-tabs--rail .ldt-tabs__label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ldt-tabs--rail .ldt-tabs__trigger:hover:not([data-disabled]) {
+  color: var(--loidolt-text);
+  background: var(--loidolt-surface-alt);
+}
+.ldt-tabs--rail .ldt-tabs__trigger[data-state='active'] {
+  color: var(--loidolt-text-accent);
+  background: var(--loidolt-surface-alt);
+}
+.ldt-tabs--rail .ldt-tabs__trigger[data-state='active'][data-orientation='vertical'] {
+  border-inline-start-color: var(--loidolt-accent);
+  border-inline-end-color: transparent;
+}
+.ldt-tabs--rail .ldt-tabs__trigger[data-state='active'][data-orientation='horizontal'] {
+  box-shadow: inset 0 calc(-1 * var(--loidolt-stroke-indicator)) 0 var(--loidolt-accent);
+}
+.ldt-tabs--rail .ldt-tabs__list[data-orientation='horizontal'] {
+  border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
+}
+.ldt-tabs--rail[data-orientation='vertical'] .ldt-tabs__panels {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+.ldt-tabs--rail[data-orientation='vertical'] .ldt-tabs__panel-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--loidolt-z-sticky);
+  background: var(--loidolt-surface);
+}
+.ldt-tabs--rail .ldt-tabs__content {
+  padding-block: 0;
+}
+/* After the rail rules, so the phone layout wins over them at equal specificity. */
+@media (max-width: 760px) {
+  /* A rail left vertical on a phone lays its tabs out as one row above the panels. */
+  .ldt-tabs--rail[data-orientation='vertical'] {
+    height: auto;
+  }
+  .ldt-tabs--rail .ldt-tabs__list[data-orientation='vertical'] {
+    min-width: 0;
+    flex-direction: row;
+    border-inline-end: 0;
+  }
+  .ldt-tabs--rail .ldt-tabs__trigger[data-orientation='vertical'] {
+    flex: 1 1 0;
+    padding-inline: 0;
+    border-inline: 0;
+  }
+  .ldt-tabs--rail .ldt-tabs__trigger[data-state='active'][data-orientation='vertical'] {
+    box-shadow: inset 0 calc(-1 * var(--loidolt-stroke-indicator)) 0 var(--loidolt-accent);
+  }
+  .ldt-tabs--rail[data-orientation='vertical'] .ldt-tabs__panels {
+    overflow: visible;
+  }
+  .ldt-tabs--rail[data-orientation='vertical'] .ldt-tabs__panel-header {
+    position: static;
+  }
+  .ldt-tabs--rail .ldt-tabs__content[data-orientation='vertical'] {
+    padding-block: 0;
+  }
+}
+
 /* The option list of Combobox and MultiSelect: the menu surface, sized to its field. */
 .ldt-listbox {
   z-index: var(--loidolt-z-menu);