@scattered-light/loomiere-base-ui 0.15.6 → 0.17.0

package/dist/styles/custom/StatCard.css

@@ -0,0 +1,118 @@
+/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
+/* StatCard
+ *
+ * A card for one thing a page lists: a name (the heading), a caption, and a row of StatFigures
+ * ruled off under them. With data-interactive the title is a link or a button and its ::after
+ * covers the card, so the whole card is the target and the title names it. The hover fill and
+ * the focus ring follow the card, not just the title.
+ * Tokens: stat-card.* (tokens/component/stat-card.json).
+ */
+
+.StatCard {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: var(--sl-stat-card-background);
+  border: var(--sl-stat-card-border-width) solid var(--sl-stat-card-border-color);
+  border-top: var(--sl-stat-card-rule-width) solid var(--sl-stat-card-rule-color);
+  border-radius: var(--sl-stat-card-radius);
+}
+
+.StatCard[data-interactive]:hover {
+  background: var(--sl-stat-card-background-hover);
+}
+
+.StatCard[data-interactive]:has(.StatCardLink:focus-visible) {
+  outline: var(--sl-focus-outline);
+  outline-offset: 2px;
+}
+
+.StatCardHeader {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sl-space-2);
+  padding: var(--sl-stat-card-header-padding-block) var(--sl-stat-card-padding-inline);
+}
+
+.StatCardHeading {
+  flex: 1;
+  min-width: 0;
+}
+
+/* A mark at the top right, set in the caption's figures style but in the accent: "2 NEW". */
+.StatCardTag {
+  font-family: var(--sl-font-figures-condense-font-family);
+  font-size: var(--sl-font-figures-condense-font-size);
+  font-weight: var(--sl-font-figures-condense-font-weight);
+  line-height: var(--sl-font-figures-condense-line-height);
+  letter-spacing: var(--sl-font-figures-condense-letter-spacing);
+  font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
+  flex: none;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--sl-stat-figure-figure-color-accent);
+}
+
+.StatCardTitle {
+  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);
+  margin: 0;
+}
+
+.StatCardCaption {
+  font-family: var(--sl-font-figures-condense-font-family);
+  font-size: var(--sl-font-figures-condense-font-size);
+  font-weight: var(--sl-font-figures-condense-font-weight);
+  line-height: var(--sl-font-figures-condense-line-height);
+  letter-spacing: var(--sl-font-figures-condense-letter-spacing);
+  font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
+  margin: 0;
+  text-transform: uppercase;
+  color: var(--sl-stat-card-caption-color);
+}
+
+/* The title's control: bare text that stretches over the whole card. */
+.StatCardLink {
+  all: unset;
+  cursor: pointer;
+}
+
+.StatCardLink::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+.StatCardLink:focus-visible {
+  outline: none;
+}
+
+.StatCardFacts {
+  display: grid;
+  margin-top: auto;
+  border-top: var(--sl-stat-card-border-width) solid var(--sl-stat-card-rule-color);
+}
+
+.StatCardFacts > * {
+  padding: var(--sl-stat-card-facts-padding-block) var(--sl-stat-card-padding-inline);
+  border-inline-start: var(--sl-stat-card-border-width) solid var(--sl-stat-card-facts-divider-color);
+}
+
+.StatCardFacts > :first-child {
+  border-inline-start: 0;
+}
+
+.StatCardFooter {
+  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);
+  padding: var(--sl-stat-card-header-padding-block) var(--sl-stat-card-padding-inline);
+  border-top: var(--sl-stat-card-border-width) solid var(--sl-stat-card-footer-border-color);
+}

package/dist/styles/custom/StatFigure.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.15.6 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
 /* StatFigure
  *
  * One large figure with a caps label above and a caption under it. The label is

package/dist/styles/custom/Table.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.15.6 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
 /* Table - Mojave Theme
  *
  * Base UI has no table, so this styles the native <table class="Table"> elements with the

package/dist/styles/index.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.15.6 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
    Loomiere theme. Load the theme first:
      @import '<your theme>/tokens.css';
@@ -63,6 +63,7 @@
 @import './custom/EditableList.css';
 @import './custom/Sheet.css';
 @import './custom/StatFigure.css';
+@import './custom/StatCard.css';
 @import './custom/DescriptionList.css';
 @import './custom/AppBar.css';
 @import './custom/PickerButton.css';

package/dist/styles/reset/accessibility.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.15.6 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {

package/dist/styles/reset/reset-accessibility.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.15.6 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */

package/dist/styles/reset/reset-tailwind.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.15.6 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================

package/dist/styles/reset/reset.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.15.6 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================

package/dist/styles/tailwind.css

@@ -1,4 +1,4 @@
-/* @scattered-light/loomiere-base-ui 0.15.6 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.17.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles for Tailwind CSS v4. Load Tailwind and the theme first:
      @import 'tailwindcss';
      @import '<your theme>/tokens.css';
@@ -66,6 +66,7 @@
 @import './custom/EditableList.css' layer(components);
 @import './custom/Sheet.css' layer(components);
 @import './custom/StatFigure.css' layer(components);
+@import './custom/StatCard.css' layer(components);
 @import './custom/DescriptionList.css' layer(components);
 @import './custom/AppBar.css' layer(components);
 @import './custom/PickerButton.css' layer(components);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scattered-light/loomiere-base-ui",
-  "version": "0.15.6",
+  "version": "0.17.0",
   "description": "Base UI components styled by any Loomiere theme. Brand-free: every value is a --sl- variable.",
   "keywords": [
     "base-ui",
@@ -76,7 +76,7 @@
     }
   },
   "devDependencies": {
-    "@scattered-light/loomiere": "0.15.6",
+    "@scattered-light/loomiere": "0.17.0",
     "@tanstack/react-table": "^9.3.1"
   }
 }