@rokkit/themes 1.1.16 → 1.1.18

package/dist/base/stepper.css

@@ -0,0 +1,154 @@
+/* Stepper — base structural styles */
+
+[data-stepper] {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+[data-stepper][data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+/* ─── Step container ─── */
+
+[data-stepper-step] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 0 0 auto;
+}
+
+/* ─── Step circle ─── */
+
+[data-stepper-circle] {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.875rem;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+}
+
+[data-stepper-circle]:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+[data-stepper-step][data-completed] [data-stepper-circle] {
+  /* solid brand fill + on-primary text (dark, reads on the bright 500). */
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--on-primary);
+}
+
+/* Check glyph inside a completed circle follows the circle's color
+   (var(--paper) on a --primary background → correct contrast). */
+[data-stepper-check-icon] {
+  color: inherit;
+}
+
+[data-stepper-step][data-active] [data-stepper-circle] {
+  border-color: var(--primary);
+  /* ink number (not saffron) so it reads on the page; the saffron border + ring
+     keep the active accent */
+  color: var(--ink);
+  --un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.2 * 100%), transparent);
+}
+
+/* ─── Connector line ─── */
+
+[data-stepper-connector] {
+  background-color: var(--paper-mute);
+  flex: 1;
+  height: 2px;
+  min-width: 2rem;
+  /* Align to the circle's vertical center, NOT the full step height. The step
+     is `circle + label below`, so `align-self: center` drops the line into the
+     label gap (reads as bottom-aligned). Pin to the top and offset by the
+     circle's radius (1.25rem) minus half the line height. */
+  align-self: flex-start;
+  margin-top: calc(1.25rem - 1px);
+  transition: background-color 0.2s ease;
+}
+
+[data-stepper-connector][data-completed] {
+  background-color: var(--primary);
+}
+
+/* Vertical orientation connectors */
+[data-stepper][data-orientation='vertical'] [data-stepper-connector] {
+  width: 2px;
+  height: 2rem;
+  min-width: auto;
+  margin-top: 0;
+  margin-left: 1.25rem;
+  align-self: flex-start;
+}
+
+/* ─── Label ─── */
+
+[data-stepper-label] {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  text-align: center;
+  max-width: 6rem;
+  line-height: 1.3;
+}
+
+/* ─── Sub-stage dots ─── */
+
+[data-stepper-dots] {
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.375rem;
+}
+
+[data-stepper-dot] {
+  border-color: var(--paper-edge);
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-style: solid;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+[data-stepper-dot]:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+[data-stepper-dot][data-completed] {
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+[data-stepper-dot][data-active] {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  --un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.25 * 100%), transparent);
+}
+
+/* ─── Content area ─── */
+
+[data-stepper-content] {
+  width: 100%;
+  margin-top: 1.5rem;
+}

package/dist/base/swatch.css

@@ -0,0 +1,85 @@
+/* =============================================================================
+   InputSwatch / Swatch — Base structural styles
+   ============================================================================= */
+
+/* Container */
+[data-swatch] {
+  display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.25rem;
+}
+
+/* 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;
+  outline: 2px solid transparent;
+  outline-offset: 0;
+}
+
+/* Border-radius follows shape */
+[data-swatch][data-swatch-shape='circle'] [data-swatch-item] {
+  border-radius:9999px;
+}
+
+[data-swatch][data-swatch-shape='square'] [data-swatch-item] {
+  border-radius:0.25rem;
+}
+
+/* ── 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)
+  );
+}
+
+/* ── Hover + keyboard focus: same visual treatment ────────────────────────── */
+
+[data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
+[data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
+  outline-color: var(--swatch-stroke, currentColor);
+}
+
+/* Focus on selected item: show outline so keyboard position is still visible */
+[data-swatch-item][data-selected]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 3px;
+}
+
+/* ── Disabled ─────────────────────────────────────────────────────────────── */
+
+[data-swatch-item]:disabled,
+[data-swatch-item][data-disabled] {
+  cursor:not-allowed;opacity:0.4;
+}
+
+/* ── Default cells (fill the button's content box) ───────────────────────── */
+
+[data-swatch-square],
+[data-swatch-circle] {
+  display: block;
+  background-color: var(--swatch-fill, currentColor);
+}
+
+[data-swatch-square] {
+  height:1.5rem;width:1.5rem;border-radius:0.125rem;
+}
+
+[data-swatch-circle] {
+  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] {
+  height:1.25rem;width:1.25rem;
+}
+
+[data-swatch][data-swatch-size='lg'] [data-swatch-square],
+[data-swatch][data-swatch-size='lg'] [data-swatch-circle] {
+  height:2rem;width:2rem;
+}

package/dist/base/switch.css

@@ -0,0 +1,168 @@
+/**
+ * Switch - Base Structural Styles
+ *
+ * These styles provide layout, positioning, size variants, and transitions.
+ * No colors, shadows, or visual theming — those belong in theme styles.
+ */
+
+/* =============================================================================
+   Switch Root (button)
+   ============================================================================= */
+
+[data-switch] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0;
+  user-select: none;
+}
+
+[data-switch]:focus {
+  outline: none;
+}
+
+[data-switch][data-switch-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Bounding height aligns to the shared control scale (so a switch lines up with
+   buttons/inputs/etc. in a row); the track/thumb keep their geometry, centered
+   via align-items: center. */
+[data-switch][data-switch-size='sm'] {
+  min-height: var(--control-h-sm);
+}
+
+[data-switch][data-switch-size='md'],
+[data-switch]:not([data-switch-size]) {
+  min-height: var(--control-h-md);
+}
+
+[data-switch][data-switch-size='lg'] {
+  min-height: var(--control-h-lg);
+}
+
+/* =============================================================================
+   Track
+   ============================================================================= */
+
+[data-switch-track] {
+  position: relative;
+  display: inline-block;
+  border-radius: 9999px;
+  transition: background-color 200ms ease;
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   Thumb
+   ============================================================================= */
+
+[data-switch-thumb] {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) translateX(0);
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    transform 200ms ease,
+    background-color 200ms ease;
+}
+
+[data-switch][aria-checked='true'] [data-switch-thumb] {
+  transform: translateY(-50%) translateX(var(--switch-thumb-travel));
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+/* Small: track 28×16, thumb 12px */
+[data-switch][data-switch-size='sm'] [data-switch-track] {
+  width: 1.75rem;
+  height: 1rem;
+}
+
+[data-switch][data-switch-size='sm'] [data-switch-thumb] {
+  width: 0.75rem;
+  height: 0.75rem;
+  left: 0.125rem;
+  --switch-thumb-travel: 0.75rem;
+}
+
+[data-switch][data-switch-size='sm'] [data-switch-icon] {
+  font-size: 0.5rem;
+}
+
+[data-switch][data-switch-size='sm'] [data-switch-label] {
+  font-size: 0.75rem;
+}
+
+/* Medium (default): track 44×24, thumb 18px */
+[data-switch][data-switch-size='md'] [data-switch-track],
+[data-switch]:not([data-switch-size]) [data-switch-track] {
+  width: 2.75rem;
+  height: 1.5rem;
+}
+
+[data-switch][data-switch-size='md'] [data-switch-thumb],
+[data-switch]:not([data-switch-size]) [data-switch-thumb] {
+  width: 1.125rem;
+  height: 1.125rem;
+  left: 0.1875rem;
+  --switch-thumb-travel: 1.25rem;
+}
+
+[data-switch][data-switch-size='md'] [data-switch-icon],
+[data-switch]:not([data-switch-size]) [data-switch-icon] {
+  font-size: 0.625rem;
+}
+
+[data-switch][data-switch-size='md'] [data-switch-label],
+[data-switch]:not([data-switch-size]) [data-switch-label] {
+  font-size: 0.875rem;
+}
+
+/* Large: track 56×32, thumb 24px */
+[data-switch][data-switch-size='lg'] [data-switch-track] {
+  width: 3.5rem;
+  height: 2rem;
+}
+
+[data-switch][data-switch-size='lg'] [data-switch-thumb] {
+  width: 1.5rem;
+  height: 1.5rem;
+  left: 0.25rem;
+  --switch-thumb-travel: 1.5rem;
+}
+
+[data-switch][data-switch-size='lg'] [data-switch-icon] {
+  font-size: 0.75rem;
+}
+
+[data-switch][data-switch-size='lg'] [data-switch-label] {
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Label
+   ============================================================================= */
+
+[data-switch-label] {
+  font-weight: 500;
+  user-select: none;
+}
+
+/* =============================================================================
+   Icon (inside thumb)
+   ============================================================================= */
+
+[data-switch-icon] {
+  flex-shrink: 0;
+}

package/dist/base/table.css

@@ -0,0 +1,313 @@
+/**
+ * Table - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Table Container
+   ============================================================================= */
+
+[data-table] {
+  overflow-x: auto;
+}
+
+[data-table][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[data-table] table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+}
+
+/* =============================================================================
+   Caption
+   ============================================================================= */
+
+[data-table-caption] {
+  text-align: left;
+  font-weight: 600;
+  padding: 0.5rem 0.75rem;
+  caption-side: top;
+}
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-table-header] th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  text-align: left;
+  font-weight: 600;
+  white-space: nowrap;
+  user-select: none;
+}
+
+[data-table-header-cell] {
+  display: table-cell;
+  cursor: default;
+}
+
+[data-table-header-cell][data-sortable='true'] {
+  cursor: pointer;
+}
+
+[data-table-header-text] {
+  vertical-align: middle;
+}
+
+[data-table-sort-icon] {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 0.25rem;
+  /* Unsorted hint — visible enough to read as "sortable" against a tinted
+     header, but still clearly secondary to the active (sorted) state below.
+     0.4 was too faint (the glyph all but vanished on dark headers). */
+  opacity: 0.65;
+  transition: opacity 150ms ease;
+}
+
+[data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
+[data-table-header-cell][data-sort-order='descending'] [data-table-sort-icon] {
+  opacity: 1;
+}
+
+/* =============================================================================
+   Body & Rows
+   ============================================================================= */
+
+[data-table-row] {
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+[data-table][data-selectable='false'] [data-table-row] {
+  cursor: default;
+}
+
+[data-table-row]:focus {
+  outline: none;
+}
+
+/* =============================================================================
+   Cells
+   ============================================================================= */
+
+[data-table-cell] {
+  vertical-align: middle;
+}
+
+[data-cell-icon] {
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.375rem;
+  flex-shrink: 0;
+}
+
+[data-cell-value] {
+  vertical-align: middle;
+}
+
+/* =============================================================================
+   Tree Table — hierarchy cell layout
+   ============================================================================= */
+
+/* Hierarchy cell hosts the connector prefix + chevron + label inline so a
+   row stays a single line regardless of nesting depth. */
+[data-tree-table] [data-table-cell][data-hierarchy='true'] {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  white-space: nowrap;
+}
+
+[data-tree-table-cell-prefix] {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Lock the connector slot width to match the toggle button so every
+   row indents by the same step regardless of whether the slot holds a
+   chevron, a connector line, or the empty placeholder. */
+[data-tree-table] [data-connector] {
+  width: 1.25rem;
+  min-height: 1.5rem;
+}
+
+/* Placeholder used in the toggle slot for non-expandable (leaf) rows
+   so the label X-position lines up vertically across rows regardless
+   of whether the row has a chevron. Same box as the toggle button. */
+[data-tree-table-empty] {
+  display: inline-block;
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+/* Connector lines — broaden the Tree-component rules so the lines also
+   appear inside a tree-table. */
+[data-tree-table]:not([data-line-style='none']) [data-connector-v] {
+  border-right-width: 1px;
+}
+[data-tree-table]:not([data-line-style='none']) [data-connector-h] {
+  border-bottom-width: 1px;
+}
+[data-tree-table]:not([data-line-style='none']) [data-connector-corner] {
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+}
+[data-tree-table][data-line-style='solid'] [data-connector-v] {
+  border-right-style: solid;
+}
+[data-tree-table][data-line-style='solid'] [data-connector-h] {
+  border-bottom-style: solid;
+}
+[data-tree-table][data-line-style='solid'] [data-connector-corner] {
+  border-bottom-style: solid;
+  border-right-style: solid;
+}
+[data-tree-table][data-line-style='dashed'] [data-connector-v] {
+  border-right-style: dashed;
+}
+[data-tree-table][data-line-style='dashed'] [data-connector-h] {
+  border-bottom-style: dashed;
+}
+[data-tree-table][data-line-style='dotted'] [data-connector-v] {
+  border-right-style: dotted;
+}
+[data-tree-table][data-line-style='dotted'] [data-connector-h] {
+  border-bottom-style: dotted;
+}
+
+/* Toggle button is square, borderless, fills the connector slot.
+   Sized to match the connector visual rhythm — no extra row height. */
+[data-tree-table-toggle] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 0.25rem;
+}
+
+[data-tree-table-toggle]:hover {
+  background: var(--paper-mute);
+}
+
+[data-tree-table-toggle]:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
+/* Tree-table rows pick up data-tree-level from the component — use it as
+   a hook for theme-specific connector tinting, not for indent (the
+   Connector spans already provide indentation). */
+
+/* =============================================================================
+   Empty State
+   ============================================================================= */
+
+[data-table-empty] {
+  text-align: center;
+  font-style: italic;
+  opacity: 0.6;
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+[data-table][data-size='sm'] [data-table-header-cell],
+[data-table][data-size='sm'] [data-table-cell] {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+}
+
+[data-table][data-size='sm'] [data-table-caption] {
+  padding: 0.375rem 0.625rem;
+  font-size: 0.75rem;
+}
+
+[data-table][data-size='md'] [data-table-header-cell],
+[data-table]:not([data-size]) [data-table-header-cell],
+[data-table][data-size='md'] [data-table-cell],
+[data-table]:not([data-size]) [data-table-cell] {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-table][data-size='md'] [data-table-caption],
+[data-table]:not([data-size]) [data-table-caption] {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+[data-table][data-size='lg'] [data-table-header-cell],
+[data-table][data-size='lg'] [data-table-cell] {
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+[data-table][data-size='lg'] [data-table-caption] {
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+[data-table-empty] {
+  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;
+  }
+}