@rokkit/themes 1.1.16 → 1.1.18

package/dist/base/carousel.css

@@ -0,0 +1,128 @@
+/* Carousel — base structural styles */
+
+[data-carousel] {
+  position: relative;
+  overflow: hidden;
+  outline: none;
+}
+
+[data-carousel-viewport] {
+  overflow: hidden;
+  width: 100%;
+}
+
+/* ─── Slide transition ─── */
+
+[data-carousel-transition='slide'] [data-carousel-track] {
+  display: flex;
+  transition: transform 0.4s ease;
+  transform: translateX(calc(-100% * var(--carousel-current, 0)));
+}
+
+[data-carousel-transition='slide'] [data-carousel-slide] {
+  flex: 0 0 100%;
+  min-width: 0;
+}
+
+/* ─── Fade transition ─── */
+
+[data-carousel-transition='fade'] [data-carousel-track] {
+  position: relative;
+}
+
+[data-carousel-transition='fade'] [data-carousel-slide] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity 0.4s ease;
+  pointer-events: none;
+}
+
+[data-carousel-transition='fade'] [data-carousel-slide][data-active] {
+  position: relative;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ─── No transition ─── */
+
+[data-carousel-transition='none'] [data-carousel-track] {
+  display: flex;
+  transform: translateX(calc(-100% * var(--carousel-current, 0)));
+}
+
+[data-carousel-transition='none'] [data-carousel-slide] {
+  flex: 0 0 100%;
+  min-width: 0;
+}
+
+/* ─── Arrow buttons ─── */
+
+[data-carousel-prev],
+[data-carousel-next] {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  background-color: color-mix(in srgb, var(--ink) 30%, transparent);
+  color: var(--paper);
+  font-size: 1.25rem;
+  z-index: 1;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+
+[data-carousel-prev]:hover,
+[data-carousel-next]:hover {
+  opacity: 1;
+}
+
+[data-carousel-prev]:disabled,
+[data-carousel-next]:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+[data-carousel-prev] {
+  left: 0.5rem;
+}
+
+[data-carousel-next] {
+  right: 0.5rem;
+}
+
+/* ─── Dots ─── */
+
+[data-carousel-dots] {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 0;
+}
+
+[data-carousel-dot] {
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 9999px;
+  border: none;
+  cursor: pointer;
+  background: currentColor;
+  opacity: 0.3;
+  transition: opacity 0.2s ease;
+  padding: 0;
+}
+
+[data-carousel-dot][data-active] {
+  opacity: 1;
+}
+
+[data-carousel-dot]:hover {
+  opacity: 0.7;
+}

package/dist/base/chart.css

@@ -0,0 +1,94 @@
+/**
+ * Chart - Base Structural Styles
+ *
+ * Layout, typography, pointer-events.
+ * No colors — those live in theme-specific chart.css files.
+ */
+
+[data-chart] {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: visible;
+}
+
+[data-chart-canvas] {
+  overflow: visible;
+}
+
+[data-chart-axis-line] {
+  fill: none;
+}
+
+[data-chart-tick] line {
+  fill: none;
+}
+
+[data-chart-tick-label] {
+  font-size: 0.75rem;
+  font-family: inherit;
+  user-select: none;
+}
+
+[data-chart-grid-line] {
+  fill: none;
+}
+
+[data-chart-legend] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+[data-chart-legend-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  user-select: none;
+}
+
+[data-chart-legend-swatch] {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+[data-chart-legend-label] {
+  color: currentColor;
+}
+
+[data-chart-label] {
+  font-size: 0.6875rem;
+  font-family: inherit;
+  pointer-events: none;
+  user-select: none;
+}
+
+[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;
+}
+
+[data-facet-grid] {
+  display: grid;
+  grid-template-columns: repeat(var(--facet-cols, 3), 1fr);
+  gap: 1rem;
+}
+
+[data-facet-panel] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-facet-title] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 0.25rem;
+}

package/dist/base/code-block.css

@@ -0,0 +1,76 @@
+/**
+ * CodeBlock — base structural styles for the internals.
+ *
+ * The outer chrome (border, radius, header divider) is Frame's job.
+ * This file just lays out what CodeBlock puts INSIDE the frame header
+ * (icon, filename, lang chip, action buttons) and body (<pre>/<code>).
+ * Per-theme files add colour and typography accents.
+ */
+
+[data-code-block-header] {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--density-spacing-sm);
+}
+
+[data-code-block-title] {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--density-spacing-sm);
+}
+
+[data-code-block-icon] {
+	display: inline-block;
+	width: 13px;
+	height: 13px;
+}
+
+[data-code-block-lang] {
+	padding: 2px 6px;
+	border-radius: 3px;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+}
+
+[data-code-block-actions] {
+	display: inline-flex;
+	gap: 2px;
+}
+
+[data-code-block-actions] button {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	height: 22px;
+	padding: 0 8px;
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+	border-radius: 3px;
+	letter-spacing: 0.02em;
+}
+
+[data-code-block-actions] button > span:first-child {
+	display: inline-block;
+	width: 12px;
+	height: 12px;
+}
+
+[data-code-block-body] {
+	overflow: auto;
+}
+
+[data-code-block-body] pre {
+	margin: 0;
+	padding: 10px 12px;
+	overflow-x: auto;
+	background: transparent;
+}
+
+[data-code-block-body] code {
+	font: inherit;
+	background: transparent;
+	border: 0;
+	padding: 0;
+}

package/dist/base/command-palette.css

@@ -0,0 +1,35 @@
+/**
+ * CommandPalette - Base Structural Styles
+ *
+ * Layout, positioning, and sizing only.
+ * No colors, shadows, or visual theming — those belong in theme styles.
+ */
+
+[data-command-backdrop] {
+	position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;
+	padding-top: 12vh;
+}
+
+[data-command-palette] {
+	width:100%;max-width:36rem;display:flex;flex-direction:column;gap:0.25rem;border-radius:0.5rem;padding:0.5rem;--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+}
+
+[data-command-input] {
+	width:100%;background-color:transparent;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;outline:2px solid transparent;outline-offset:2px;
+}
+
+[data-command-list] {
+	margin:0;max-height:20rem;display:flex;flex-direction:column;list-style-type:none;gap:0.125rem;overflow-y:auto;padding:0;
+}
+
+[data-command-item] {
+	display:flex;cursor:pointer;align-items:center;justify-content:space-between;border-radius:0.375rem;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;
+}
+
+[data-command-empty] {
+	padding-left:0.75rem;padding-right:0.75rem;padding-top:1.5rem;padding-bottom:1.5rem;text-align:center;font-size:0.875rem;line-height:1.25rem;
+}
+
+[data-command-shortcut] {
+	margin-left:auto;font-size:0.75rem;line-height:1rem;
+}

package/dist/base/connector.css

@@ -0,0 +1,92 @@
+/**
+ * Connector - Base Structural Styles
+ *
+ * Tree line connector component based on @rokkit/ui Connector.
+ * Supports LTR and RTL layouts.
+ */
+
+/* =============================================================================
+   Connector Container
+   ============================================================================= */
+
+[data-connector] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  flex-shrink: 0;
+  align-self: stretch;
+  width: 1rem;
+  min-height: 1.5rem;
+}
+
+/* Size variants (inherited from parent tree) */
+[data-tree][data-size='sm'] [data-connector] {
+  width: 1rem;
+  min-height: 1.5rem;
+}
+
+[data-tree][data-size='md'] [data-connector],
+[data-tree]:not([data-size]) [data-connector] {
+  width: 1.25rem;
+  min-height: 1.75rem;
+}
+
+[data-tree][data-size='lg'] [data-connector] {
+  width: 1.5rem;
+  min-height: 2rem;
+}
+
+/* =============================================================================
+   Line Elements
+   ============================================================================= */
+
+[data-connector] > i {
+  display: block;
+}
+
+/* Vertical line - half height (for 'last' connector) */
+[data-connector-v] {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+/* Vertical line - full height (for 'child' and 'sibling' connectors) */
+[data-connector-v][data-connector-full] {
+  grid-row: 1 / -1;
+}
+
+/* Horizontal line (connects to node content) - positioned in row 1 with border-bottom */
+[data-connector-h] {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+/* Corner connector for RTL - combines vertical and horizontal */
+[data-connector-corner] {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+/* =============================================================================
+   RTL Support
+   ============================================================================= */
+
+[data-connector][data-connector-rtl] [data-connector-v] {
+  grid-column: 2;
+}
+
+[data-connector][data-connector-rtl] [data-connector-h] {
+  grid-column: 1;
+}
+
+[data-connector][data-connector-rtl] [data-connector-corner] {
+  grid-column: 2;
+}
+
+/* =============================================================================
+   Empty Connector (spacer)
+   ============================================================================= */
+
+[data-connector][data-connector-type='empty'] {
+  /* Just takes up space, no visible lines */
+}

package/dist/base/density.css

@@ -0,0 +1,60 @@
+/**
+ * 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
+ */
+
+/* Control heights — fixed scale (rem, so they track font-size). Density drives
+   internal spacing/padding/typography, NOT the control height, so same-size
+   controls (button, select, dropdown, menu, toggle, input) always align. */
+:root {
+  --control-h-sm: 1.75rem;
+  --control-h-md: 2.25rem;
+  --control-h-lg: 2.75rem;
+}
+
+: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);
+}
+
+[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);
+}
+
+[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);
+}

package/dist/base/display.css

@@ -0,0 +1,99 @@
+/* Base structural styles for display components */
+
+/* Display section: key-value pairs */
+[data-display-section] {
+  display:flex;flex-direction:column;gap:0.5rem;
+}
+
+[data-display-title] {
+  color: var(--ink);
+  font-size:0.875rem;line-height:1.25rem;font-weight:600;
+}
+
+[data-display-field] {
+  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
+}
+
+[data-display-label] {
+  color: color-mix(in srgb, var(--ink) 70%, transparent);
+  flex-shrink:0;font-size:0.875rem;line-height:1.25rem;
+}
+
+[data-display-value] {
+  color: var(--ink);
+  text-align:right;font-size:0.875rem;line-height:1.25rem;
+}
+
+/* Badge format: pill style */
+[data-display-value][data-format='badge'] {
+  background-color: var(--paper-mute);
+  border-radius:9999px;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.125rem;padding-bottom:0.125rem;font-size:0.75rem;line-height:1rem;font-weight:500;
+}
+
+/* Boolean format */
+[data-display-value][data-format='boolean'] {
+  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+}
+
+/* Display table wrapper */
+[data-display-table] {
+  display:flex;flex-direction:column;gap:0.5rem;
+}
+
+/* Display card grid */
+[data-display-cards] {
+  display:flex;flex-direction:column;gap:0.5rem;
+}
+
+[data-display-grid] {
+  display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:0.75rem;
+}
+
+@media (min-width: 640px) {
+  [data-display-grid] {
+    grid-template-columns:repeat(2,minmax(0,1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  [data-display-grid] {
+    grid-template-columns:repeat(3,minmax(0,1fr));
+  }
+}
+
+[data-display-card] {
+  border-color: var(--paper-mute);
+  background-color: var(--paper-edge);
+  display:flex;flex-direction:column;gap:0.25rem;border-width:1px;border-radius:0.25rem;padding:0.75rem;
+}
+
+[data-display-card][data-selected] {
+  border-color: var(--primary);
+  --un-ring-width:1px;--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:var(--primary);
+}
+
+[data-selectable] [data-display-card] {
+  cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
+}
+
+[data-selectable] [data-display-card]:hover {
+  background-color: var(--paper-soft);
+}
+
+/* Display list */
+[data-display-list] {
+  display:flex;flex-direction:column;gap:0.5rem;
+}
+
+[data-display-list] ul {
+  display:flex;flex-direction:column;gap:0.25rem;
+}
+
+[data-display-list-item] {
+  border-color: var(--paper-mute);
+  display:flex;align-items:baseline;gap:1rem;border-bottom-width:1px;padding-top:0.25rem;padding-bottom:0.25rem;
+}[data-display-list-item]:last-child{border-width:0px;}
+
+[data-display-list-item] [data-display-field] {
+  display:flex;gap:0.25rem;
+}

package/dist/base/divider.css

@@ -0,0 +1,49 @@
+/* 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;
+}