@scattered-light/loomiere-base-ui 0.6.0 → 0.7.0

package/dist/styles/custom/EmptyState.css

@@ -0,0 +1,255 @@
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* EmptyState
+ *
+ * The block a page, pane, table, list or popup shows when it has nothing to show.
+ * One look for every kind. data-kind only picks the media tone and, in the component,
+ * the default icon and whether the block is announced. Sizes are empty.*
+ * (tokens/semantic/empty.json). No border and no fill: the container provides those.
+ *
+ * The circle uses the subtle emphasis level (--sl-e-bg, --sl-e-fg), the same variables
+ * Badge uses. data-status on the media recolors it. A parent data-color does too:
+ * the subtle chrome pin skips this circle when a color scope is on an ancestor
+ * (Badge keeps the pin). A brand pair re-points fill and text, not that chrome
+ * scope. The circle stays chrome subtle inside a pair, the same as Badge, so a
+ * pair does not get its own selector. High contrast and the vision themes come
+ * with those variables. The title stays
+ * text-primary and the description text-secondary: an error's title is not red,
+ * because a sentence has to stay readable. Neutral kinds use the chrome palette,
+ * which is what subtle resolves to when no status is set.
+ *
+ * Text is a whole style per size, not a font-size on its own. Compact is a table
+ * row or a popup, so the title is subtitle-condense (bold, the row's size) and the
+ * description is body-condense. Standard is a pane: title-condense, the section
+ * heading, with body-base under it. Spacious is a page: title-magnify, the next
+ * title up, still body-base so the sentence doesn't grow with the heading.
+ * Unselected is the quiet pane beside a list, so it drops the circle, the icon is
+ * text-tertiary, and the title steps down one tier: subtitle-minimize where the
+ * others use a condense style (there is no title at minimize), and title-condense
+ * where the others use title-magnify.
+ *
+ * Compact is a row (icon, text, actions) centered across the cell. Standard and
+ * spacious are a column. They take margin-block: auto so a flex or grid column
+ * centers them in the leftover space; in normal flow that margin is zero, so a
+ * page that isn't a column doesn't grow a hole. There is no data-fill attribute.
+ *
+ * The icon for unselected is left_click: the pane is waiting for a choice in the
+ * list beside it, which an empty inbox would not say.
+ *
+ * A popup's empty slot already pads a plain sentence (popup-empty). When the child
+ * is an EmptyState, that padding drops so the two don't add. Menu.Empty has no
+ * popup-empty padding of its own, so it needs nothing here.
+ */
+
+/* ============================================
+   ROOT
+   ============================================ */
+
+.EmptyState {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-empty-gap-standard);
+  width: 100%;
+  padding-block: var(--sl-empty-padding-block-standard);
+  padding-inline: var(--sl-empty-padding-inline-standard);
+  color: var(--sl-text-primary);
+  text-align: center;
+}
+
+/* ============================================
+   MEDIA
+   ============================================ */
+
+.EmptyStateMedia {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--sl-empty-media-size-standard);
+  height: var(--sl-empty-media-size-standard);
+  border-radius: var(--sl-radius-pill);
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+}
+
+.EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+}
+
+/* An illustration the app passed in. No circle and no tint. */
+.EmptyStateMedia[data-custom] {
+  width: auto;
+  height: auto;
+  background: none;
+  color: inherit;
+}
+
+/* ============================================
+   TEXT
+   ============================================ */
+
+.EmptyStateText {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sl-empty-text-gap-standard);
+  min-width: 0;
+  max-width: var(--sl-empty-description-max-width);
+}
+
+.EmptyStateTitle {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
+  margin: 0;
+  max-width: 100%;
+  color: var(--sl-text-primary);
+}
+
+.EmptyStateDescription {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  margin: 0;
+  max-width: 100%;
+  color: var(--sl-text-secondary);
+}
+
+/* ============================================
+   ACTIONS
+   ============================================ */
+
+.EmptyStateActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-empty-actions-gap);
+}
+
+/* ============================================
+   SIZES
+   ============================================ */
+
+.EmptyState[data-size='compact'] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--sl-empty-gap-compact);
+  padding-block: var(--sl-empty-padding-block-compact);
+  padding-inline: var(--sl-empty-padding-inline-compact);
+}
+
+.EmptyState[data-size='compact'] .EmptyStateText {
+  gap: var(--sl-empty-text-gap-compact);
+}
+
+.EmptyState[data-size='compact'] .EmptyStateTitle {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+}
+
+.EmptyState[data-size='compact'] .EmptyStateDescription {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+}
+
+/* Icon only. The tone stays on the glyph, so an error is still an error. */
+.EmptyState[data-size='compact'] .EmptyStateMedia {
+  width: auto;
+  height: auto;
+  background: none;
+}
+
+.EmptyState[data-size='compact'] .EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyState[data-size='compact'] .EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+}
+
+.EmptyState[data-size='spacious'] {
+  gap: var(--sl-empty-gap-spacious);
+  padding-block: var(--sl-empty-padding-block-spacious);
+  padding-inline: var(--sl-empty-padding-inline-spacious);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateText {
+  gap: var(--sl-empty-text-gap-spacious);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateTitle {
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateMedia {
+  width: var(--sl-empty-media-size-spacious);
+  height: var(--sl-empty-media-size-spacious);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyState[data-size='spacious'] .EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-maximize);
+  height: var(--sl-icon-size-maximize);
+  font-size: var(--sl-icon-size-maximize);
+}
+
+/* ============================================
+   PLACES
+   ============================================ */
+
+/* A flex or grid column centers the block in the space left over. */
+.EmptyState:is([data-size='standard'], [data-size='spacious']) {
+  margin-block: auto;
+}
+
+/* The detail pane before a row is picked. Quieter than the list beside it. */
+.EmptyState[data-kind='unselected'] .EmptyStateMedia {
+  width: auto;
+  height: auto;
+  background: none;
+  color: var(--sl-text-tertiary);
+}
+
+.EmptyState[data-kind='unselected'][data-size='compact'] .EmptyStateTitle,
+.EmptyState[data-kind='unselected'][data-size='standard'] .EmptyStateTitle {
+  font-family: var(--sl-font-subtitle-minimize-font-family);
+  font-size: var(--sl-font-subtitle-minimize-font-size);
+  font-weight: var(--sl-font-subtitle-minimize-font-weight);
+  line-height: var(--sl-font-subtitle-minimize-line-height);
+  letter-spacing: var(--sl-font-subtitle-minimize-letter-spacing);
+}
+
+.EmptyState[data-kind='unselected'][data-size='spacious'] .EmptyStateTitle {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
+}
+
+/* The popup slot pads a plain sentence. An EmptyState brings its own padding. */
+.ComboboxEmpty:has(> .EmptyState),
+.AutocompleteEmpty:has(> .EmptyState) {
+  padding: 0;
+  color: inherit;
+}

package/dist/styles/custom/ListDetail.css

@@ -0,0 +1,126 @@
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
+/* ListDetail
+ *
+ * The detail of one item, next to its list. Not a Base UI part. It is a Splitter
+ * when this element is at least list-detail.split-min-width wide, measured on the
+ * element itself so it still works inside another panel. Narrower, the detail is
+ * the existing Drawer (the default) or it replaces the list, which stays mounted
+ * and hidden so its scroll position survives Back.
+ *
+ * The list stays in the splitter's first panel whether the detail is open, closed,
+ * or in a drawer, so its scroll survives. The detail is portaled into a node the
+ * component created, and that node moves. The list sits on the page surface. The
+ * detail sits on surface.raised: a pane
+ * beside the list, one step off the page, with the splitter line as the only
+ * divider. A modal surface would make the pane look like a dialog stuck in the
+ * layout. Drawer mode does not restyle that; it uses the Drawer's own modal
+ * surface, title and Close, so it matches every other drawer.
+ *
+ * The header title is text-title-condense. title-amplify is for a dialog or a
+ * drawer, a layer over the page. A pane heading shares the view with the list,
+ * so the condensed title fits the row. Close is a quiet icon-only Button: a
+ * text Close would compete with the title and the actions in a short header.
+ * Page mode puts Back, icon and word, where Close was.
+ *
+ * Focus moves to the heading when the detail opens, and back to the row when it
+ * closes. Changing the title because another row was picked does not move focus.
+ * Escape closes only when it bubbles out of the detail, so an open menu handles
+ * it first. Nothing listens on window. Page changes are announced by that focus
+ * move; there is no live region.
+ *
+ * data-layout is split, drawer or page. data-open is set while the detail is open.
+ */
+
+.ListDetail {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ListDetailHost,
+.ListDetailSlot,
+.ListDetailSplit,
+.ListDetailList,
+.ListDetailDetail {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  flex: 1;
+}
+
+.ListDetailList {
+  overflow: auto;
+  background: transparent;
+}
+
+.ListDetail[data-layout='split'],
+.ListDetail[data-layout='drawer'],
+.ListDetail[data-layout='page'] {
+  min-width: 0;
+}
+
+.ListDetail[data-open] .ListDetailList {
+  min-height: 0;
+}
+
+.ListDetailDetail[data-layout='split'],
+.ListDetailDetail[data-layout='page'] {
+  background: var(--sl-surface-raised);
+}
+
+.ListDetailDetail[data-layout='drawer'] {
+  background: transparent;
+}
+
+.DrawerPopup .ListDetailHeader,
+.ListDetailDetail[data-layout='drawer'] .ListDetailBody {
+  padding: 0;
+}
+
+.ListDetailHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-list-detail-header-gap);
+  padding: var(--sl-list-detail-header-padding);
+  flex: none;
+}
+
+.ListDetailTitle {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.ListDetailHeader .DrawerTitle {
+  flex: 1;
+  min-width: 0;
+}
+
+.ListDetailActions {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-list-detail-header-gap);
+  flex: none;
+}
+
+.ListDetailBody {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-inline: var(--sl-list-detail-header-padding);
+  padding-block-end: var(--sl-list-detail-header-padding);
+}
+
+.ListDetail[data-layout='drawer'] .ListDetailDetail {
+  background: transparent;
+}