@rokkit/themes 1.0.0-next.151 → 1.0.0-next.152

package/dist/base.css

@@ -13,6 +13,58 @@
  * Import individual files for tree-shaking, or this file for all base styles.
  */
 
+/**
+ * Density System — CSS Custom Property Scale
+ *
+ * Sets the spatial rhythm tokens inherited by all components.
+ * Place data-density on any container; descendants inherit automatically.
+ *
+ * Axes: compact → comfortable (default) → cozy
+ */
+
+:root,
+[data-density='comfortable'] {
+  --density-spacing-base: 1rem;
+  --density-spacing-xs: 0.25rem;
+  --density-spacing-sm: 0.5rem;
+  --density-spacing-md: 0.75rem;
+  --density-spacing-lg: 1rem;
+  --density-spacing-xl: 1.5rem;
+
+  --density-line-height: 1.5;
+  --density-icon-size: 1.25rem;
+  --density-border-width: 1px;
+  --density-radius-base: var(--radius-md, 0.375rem);
+}
+
+[data-density='compact'] {
+  --density-spacing-base: 0.75rem;
+  --density-spacing-xs: 0.125rem;
+  --density-spacing-sm: 0.25rem;
+  --density-spacing-md: 0.5rem;
+  --density-spacing-lg: 0.75rem;
+  --density-spacing-xl: 1rem;
+
+  --density-line-height: 1.375;
+  --density-icon-size: 1rem;
+  --density-border-width: 1px;
+  --density-radius-base: var(--radius-sm, 0.25rem);
+}
+
+[data-density='cozy'] {
+  --density-spacing-base: 1.25rem;
+  --density-spacing-xs: 0.375rem;
+  --density-spacing-sm: 0.625rem;
+  --density-spacing-md: 1rem;
+  --density-spacing-lg: 1.25rem;
+  --density-spacing-xl: 2rem;
+
+  --density-line-height: 1.75;
+  --density-icon-size: 1.5rem;
+  --density-border-width: 1px;
+  --density-radius-base: var(--radius-lg, 0.5rem);
+}
+
 /**
  * Button - Base Structural Styles
  *
@@ -97,25 +149,25 @@
   font-size: 1.25rem;
 }
 
-/* Medium (default) */
+/* Medium (default) — responds to density */
 [data-button][data-size='md'],
 [data-button]:not([data-size]) {
-  height: 2.25rem;
-  padding-inline: 1rem;
+  height: calc(var(--density-icon-size) + var(--density-spacing-sm) * 2);
+  padding-inline: var(--density-spacing-lg);
   font-size: 0.875rem;
-  gap: 0.5rem;
+  gap: var(--density-spacing-sm);
 }
 
 [data-button][data-size='md'][data-icon-only],
 [data-button]:not([data-size])[data-icon-only] {
-  width: 2.25rem;
+  width: calc(var(--density-icon-size) + var(--density-spacing-sm) * 2);
 }
 
 [data-button][data-size='md'] [data-item-icon],
 [data-button][data-size='md'] [data-button-icon-right],
 [data-button]:not([data-size]) [data-item-icon],
 [data-button]:not([data-size]) [data-button-icon-right] {
-  font-size: 1.5rem;
+  font-size: var(--density-icon-size);
 }
 
 /* Large */
@@ -404,8 +456,8 @@
 
 [data-menu][data-size='md'] [data-menu-trigger],
 [data-menu]:not([data-size]) [data-menu-trigger] {
-  height: 2rem;
-  padding-inline: 0.625rem;
+  height: calc(var(--density-icon-size) + var(--density-spacing-xs) * 2);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
 }
 
@@ -548,8 +600,9 @@
 
 [data-menu][data-size='md'] [data-menu-item],
 [data-menu]:not([data-size]) [data-menu-item] {
-  gap: 0.625rem;
-  padding: 0.5rem 0.75rem;
+  gap: var(--density-spacing-md);
+  padding-block: var(--density-spacing-sm);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
 }
 
@@ -586,7 +639,8 @@
 }
 [data-menu][data-size='md'] [data-menu-group],
 [data-menu]:not([data-size]) [data-menu-group] {
-  padding: 0.375rem 0.75rem;
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
 }
 [data-menu][data-size='lg'] [data-menu-group] {
   padding: 0.5rem 1rem;
@@ -678,8 +732,8 @@
 
 [data-dropdown][data-size='md'] [data-dropdown-trigger],
 [data-dropdown]:not([data-size]) [data-dropdown-trigger] {
-  height: 2rem;
-  padding-inline: 0.625rem;
+  height: calc(var(--density-icon-size) + var(--density-spacing-xs) * 2);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
 }
 
@@ -752,9 +806,10 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem;
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
+  line-height: var(--density-line-height);
   text-align: left;
   cursor: pointer;
   border: none;
@@ -1900,9 +1955,11 @@ a[data-list-item],
 button[data-list-item] {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.375rem 0.75rem;
+  gap: var(--density-spacing-md);
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
+  line-height: var(--density-line-height);
   text-decoration: none;
   cursor: pointer;
   transition:
@@ -1936,9 +1993,11 @@ button[data-list-item] {
 [data-list]:not([data-size]) a[data-list-item],
 [data-list][data-size='md'] button[data-list-item],
 [data-list]:not([data-size]) button[data-list-item] {
-  gap: 0.625rem;
-  padding: 0.375rem 0.75rem;
+  gap: var(--density-spacing-md);
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
+  line-height: var(--density-line-height);
 }
 
 [data-list][data-size='lg'] [data-list-item],
@@ -1961,8 +2020,8 @@ button[data-list-item] {
   display: flex;
   align-items: center;
   width: 100%;
-  gap: 0.5rem;
-  padding-block: 0.25rem;
+  gap: var(--density-spacing-sm);
+  padding-block: var(--density-spacing-xs);
   font-size: 0.75rem;
   font-weight: 600;
   text-align: left;
@@ -1987,7 +2046,8 @@ button[data-list-item] {
 }
 [data-list][data-size='md'] [data-list-group],
 [data-list]:not([data-size]) [data-list-group] {
-  padding: 0.375rem 0.75rem;
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
 }
 [data-list][data-size='lg'] [data-list-group] {
   padding: 0.5rem 1rem;
@@ -2998,7 +3058,9 @@ input[type='radio'] {
   flex-shrink: 0;
   cursor: pointer;
   position: relative;
-  transition: border-color 150ms ease, background-color 150ms ease;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
 }
 
 input[type='radio']:checked {
@@ -3220,7 +3282,7 @@ input[type='color'] {
 [data-card] {
   display: flex;
   flex-direction: column;
-  border-radius: 0.5rem;
+  border-radius: var(--density-radius-base);
   overflow: hidden;
   text-decoration: none;
   color: inherit;
@@ -3240,16 +3302,19 @@ a[data-card] {
 }
 
 [data-card-header] {
-  padding: 1rem 1rem 0.5rem;
+  padding-block: var(--density-spacing-md) var(--density-spacing-sm);
+  padding-inline: var(--density-spacing-lg);
 }
 
 [data-card-body] {
-  padding: 0.5rem 1rem;
+  padding-block: var(--density-spacing-sm);
+  padding-inline: var(--density-spacing-lg);
   flex: 1;
 }
 
 [data-card-footer] {
-  padding: 0.5rem 1rem 1rem;
+  padding-block: var(--density-spacing-sm) var(--density-spacing-md);
+  padding-inline: var(--density-spacing-lg);
 }
 
 /* ProgressBar — base structural styles */
@@ -3853,6 +3918,9 @@ a[data-card] {
    ============================================================================= */
 
 [data-table-header] th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
   text-align: left;
   font-weight: 600;
   white-space: nowrap;
@@ -3894,6 +3962,10 @@ a[data-card] {
   transition: background-color 150ms ease;
 }
 
+[data-table][data-selectable='false'] [data-table-row] {
+  cursor: default;
+}
+
 [data-table-row]:focus {
   outline: none;
 }
@@ -3933,12 +4005,12 @@ a[data-card] {
 
 [data-table][data-size='sm'] [data-table-header-cell],
 [data-table][data-size='sm'] [data-table-cell] {
-  padding: 0.25rem 0.5rem;
+  padding: 0.375rem 0.625rem;
   font-size: 0.75rem;
 }
 
 [data-table][data-size='sm'] [data-table-caption] {
-  padding: 0.25rem 0.5rem;
+  padding: 0.375rem 0.625rem;
   font-size: 0.75rem;
 }
 
@@ -3971,6 +4043,49 @@ a[data-card] {
   padding: 1.5rem 0.75rem;
 }
 
+/* =============================================================================
+   Responsive Card Layout (mobile < 640px)
+   ============================================================================= */
+
+@media (max-width: 639px) {
+  [data-table-responsive] table {
+    display: block;
+  }
+
+  [data-table-responsive] thead {
+    display: none;
+  }
+
+  [data-table-responsive] tbody {
+    display: block;
+  }
+
+  [data-table-responsive] [data-table-row] {
+    display: block;
+    padding: 0.75rem;
+    margin-bottom: 0.5rem;
+    border-radius: 0.5rem;
+    border-bottom: none !important;
+  }
+
+  [data-table-responsive] [data-table-cell] {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.2rem 0 !important;
+    text-align: left !important;
+    border: none;
+  }
+
+  [data-table-responsive] [data-table-cell]::before {
+    content: attr(data-label);
+    font-weight: 600;
+    font-size: 0.75rem;
+    min-width: 7rem;
+    flex-shrink: 0;
+  }
+}
+
 /**
  * SearchFilter - Base Structural Styles
  *
@@ -5228,6 +5343,81 @@ a[data-card] {
   margin: 0;
 }
 
+/* StepIndicator — base structural styles */
+
+[data-step-indicator] {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  align-items: flex-start;
+}
+
+[data-step-item] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+/* Connector line between steps */
+[data-step-item]:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: 1.25rem; /* vertically centered with the 2.5rem number circle */
+  left: 50%;
+  width: 100%;
+  height: 2px;
+}
+
+/* Reset button element when used as step-number (complete steps) */
+button[data-step-number] {
+  appearance: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+[data-step-number] {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  border-width: 2px;
+  border-style: solid;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.875rem;
+  position: relative;
+  z-index: 1;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+[data-step-label] {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  text-align: center;
+  max-width: 6rem;
+  line-height: 1.3;
+  transition: color 0.2s ease;
+}
+
+/* Interaction affordances */
+[data-step-item][data-step-state='complete'] {
+  cursor: pointer;
+}
+
+[data-step-item][data-step-state='current'],
+[data-step-item][data-step-state='upcoming'] {
+  cursor: default;
+}
+
 /* Message — base structural styles */
 
 [data-message-root] {
@@ -5452,11 +5642,11 @@ a[data-card] {
   user-select: none;
 }
 
-[data-plot-element="bar"],
-[data-plot-element="line"],
-[data-plot-element="area"],
-[data-plot-element="point"],
-[data-plot-element="arc"] {
+[data-plot-element='bar'],
+[data-plot-element='line'],
+[data-plot-element='area'],
+[data-plot-element='point'],
+[data-plot-element='arc'] {
   transition: opacity 0.15s ease;
 }
 
@@ -5490,7 +5680,9 @@ a[data-card] {
 /* Button: padding creates the ring gap; background is the gradient ring */
 [data-swatch-item] {
   cursor:pointer;border-width:0px;background-color:transparent;padding:0.125rem;line-height:1;
-  transition: background 120ms ease, outline-color 120ms ease;
+  transition:
+    background 120ms ease,
+    outline-color 120ms ease;
   outline: 2px solid transparent;
   outline-offset: 0;
 }
@@ -5507,7 +5699,11 @@ a[data-card] {
 /* ── Selected: gradient shows through the padding gap as a ring ────────────── */
 
 [data-swatch-item][data-selected] {
-  background: linear-gradient(135deg, var(--swatch-fill, currentColor), var(--swatch-stroke, currentColor));
+  background: linear-gradient(
+    135deg,
+    var(--swatch-fill, currentColor),
+    var(--swatch-stroke, currentColor)
+  );
 }
 
 /* ── Hover + keyboard focus: same visual treatment ────────────────────────── */
@@ -5539,22 +5735,274 @@ a[data-card] {
 }
 
 [data-swatch-square] {
-  width:1.5rem;height:1.5rem;border-radius:0.125rem;
+  height:1.5rem;width:1.5rem;border-radius:0.125rem;
 }
 
 [data-swatch-circle] {
-  width:1.5rem;height:1.5rem;border-radius:9999px;
+  height:1.5rem;width:1.5rem;border-radius:9999px;
 }
 
 /* ── Size variants ─────────────────────────────────────────────────────────── */
 
 [data-swatch][data-swatch-size='sm'] [data-swatch-square],
 [data-swatch][data-swatch-size='sm'] [data-swatch-circle] {
-  width:1.25rem;height:1.25rem;
+  height:1.25rem;width:1.25rem;
 }
 
 [data-swatch][data-swatch-size='lg'] [data-swatch-square],
 [data-swatch][data-swatch-size='lg'] [data-swatch-circle] {
-  width:2rem;height:2rem;
+  height:2rem;width:2rem;
+}
+
+/* Divider — base structural styles */
+
+[data-divider] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+[data-divider][data-orientation='horizontal'] {
+  flex-direction: row;
+  height: 1px;
+}
+
+[data-divider][data-orientation='vertical'] {
+  flex-direction: column;
+  width: 1px;
+  height: 100%;
+  align-self: stretch;
+}
+
+[data-divider-label] {
+  flex-shrink: 0;
+  padding: 0 0.75rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+[data-divider][data-orientation='horizontal']::before,
+[data-divider][data-orientation='horizontal']::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+}
+
+[data-divider][data-orientation='vertical']::before,
+[data-divider][data-orientation='vertical']::after {
+  content: '';
+  flex: 1;
+  width: 1px;
+}
+
+/* Without label, the element itself is the line */
+[data-divider]:not(:has([data-divider-label]))[data-orientation='horizontal'] {
+  height: 1px;
+}
+
+[data-divider]:not(:has([data-divider-label]))[data-orientation='vertical'] {
+  width: 1px;
+}
+
+/* Stack — base structural styles */
+
+[data-stack] {
+  display: flex;
+}
+
+[data-stack][data-direction='vertical'] {
+  flex-direction: column;
+}
+
+[data-stack][data-direction='horizontal'] {
+  flex-direction: row;
+}
+
+/* Gap sizes */
+[data-stack][data-gap='none'] {
+  gap: 0;
+}
+
+[data-stack][data-gap='xs'] {
+  gap: 0.25rem;
+}
+
+[data-stack][data-gap='sm'] {
+  gap: 0.5rem;
+}
+
+[data-stack][data-gap='md'] {
+  gap: 1rem;
+}
+
+[data-stack][data-gap='lg'] {
+  gap: 1.5rem;
+}
+
+[data-stack][data-gap='xl'] {
+  gap: 2rem;
+}
+
+/* Alignment */
+[data-stack][data-align='start'] {
+  align-items: flex-start;
+}
+
+[data-stack][data-align='center'] {
+  align-items: center;
+}
+
+[data-stack][data-align='end'] {
+  align-items: flex-end;
+}
+
+[data-stack][data-align='stretch'] {
+  align-items: stretch;
+}
+
+/* Justification */
+[data-stack][data-justify='start'] {
+  justify-content: flex-start;
+}
+
+[data-stack][data-justify='center'] {
+  justify-content: center;
+}
+
+[data-stack][data-justify='end'] {
+  justify-content: flex-end;
+}
+
+[data-stack][data-justify='between'] {
+  justify-content: space-between;
+}
+
+[data-stack][data-justify='around'] {
+  justify-content: space-around;
+}
+
+/* Badge — base structural styles */
+
+[data-badge-wrapper] {
+  position: relative;
+  display: inline-flex;
+}
+
+[data-badge] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* Dot mode — small circle with no content */
+[data-badge][data-dot] {
+  min-width: 0.5rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+}
+
+/* Positioned inside a wrapper */
+[data-badge-wrapper] [data-badge] {
+  position: absolute;
+  top: -0.375rem;
+  right: -0.375rem;
+  z-index: 1;
+}
+
+[data-badge-wrapper] [data-badge][data-dot] {
+  top: -0.125rem;
+  right: -0.125rem;
+}
+
+/* Avatar — base structural styles */
+
+[data-avatar] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  user-select: none;
+}
+
+/* Shape */
+[data-avatar][data-shape='circle'] {
+  border-radius: 9999px;
+}
+
+[data-avatar][data-shape='square'] {
+  border-radius: 0.375rem;
+}
+
+/* Size variants */
+[data-avatar][data-size='xs'] {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.5rem;
+}
+
+[data-avatar][data-size='sm'] {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.625rem;
+}
+
+[data-avatar][data-size='md'] {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 0.75rem;
+}
+
+[data-avatar][data-size='lg'] {
+  width: 3rem;
+  height: 3rem;
+  font-size: 0.875rem;
+}
+
+[data-avatar][data-size='xl'] {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.125rem;
+}
+
+[data-avatar-img] {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+[data-avatar-initials] {
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+/* Status indicator dot */
+[data-avatar-status] {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 25%;
+  height: 25%;
+  min-width: 0.5rem;
+  min-height: 0.5rem;
+  border-radius: 9999px;
+  border: 2px solid transparent;
+}
+
+[data-avatar][data-shape='square'] [data-avatar-status] {
+  border-radius: 9999px;
+  bottom: -0.125rem;
+  right: -0.125rem;
 }