@rokkit/themes 1.1.16 → 1.1.18

package/dist/base/menu.css

@@ -0,0 +1,277 @@
+/**
+ * Menu - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Menu Container
+   ============================================================================= */
+
+[data-menu] {
+  position: relative;
+  display: inline-block;
+}
+
+[data-menu][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Trigger Button
+   ============================================================================= */
+
+[data-menu-trigger] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid transparent;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 150ms ease;
+}
+
+[data-menu-trigger]:disabled {
+  cursor: not-allowed;
+}
+
+[data-menu-trigger]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Size variants */
+[data-menu][data-size='sm'] [data-menu-trigger] {
+  height: var(--control-h-sm);
+  padding-inline: 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-menu][data-size='md'] [data-menu-trigger],
+[data-menu]:not([data-size]) [data-menu-trigger] {
+  height: var(--control-h-md);
+  padding-inline: var(--density-spacing-md);
+  font-size: 0.875rem;
+}
+
+[data-menu][data-size='lg'] [data-menu-trigger] {
+  height: var(--control-h-lg);
+  padding-inline: 0.75rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Trigger Elements (icon, label, arrow)
+   ============================================================================= */
+
+[data-menu-trigger] > [data-menu-icon] {
+  flex-shrink: 0;
+}
+
+[data-menu-trigger] > [data-menu-label] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-menu-trigger] > [data-menu-arrow] {
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+
+[data-menu][data-open='true'] [data-menu-arrow] {
+  transform: rotate(180deg);
+}
+
+/* Arrow sizes */
+[data-menu][data-size='sm'] [data-menu-arrow] {
+  font-size: 0.75rem;
+}
+[data-menu][data-size='md'] [data-menu-arrow],
+[data-menu]:not([data-size]) [data-menu-arrow] {
+  font-size: 0.875rem;
+}
+[data-menu][data-size='lg'] [data-menu-arrow] {
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Dropdown Panel
+   ============================================================================= */
+
+[data-menu-dropdown] {
+  position: absolute;
+  z-index: 50;
+  min-width: 200px;
+  max-height: 400px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border-radius: 0.5rem;
+}
+
+/* Menu dropdown — no focus ring on container, focus managed on individual items */
+[data-menu-dropdown]:focus-within {
+  outline: none;
+}
+
+/* Direction: down (default) */
+[data-menu][data-direction='down'] [data-menu-dropdown],
+[data-menu]:not([data-direction]) [data-menu-dropdown] {
+  top: calc(100% + 4px);
+  animation: menu-dropdown-down 150ms ease;
+}
+
+/* Direction: up */
+[data-menu][data-direction='up'] [data-menu-dropdown] {
+  bottom: calc(100% + 4px);
+  animation: menu-dropdown-up 150ms ease;
+}
+
+/* Alignment */
+[data-menu][data-align='left'] [data-menu-dropdown],
+[data-menu]:not([data-align]) [data-menu-dropdown] {
+  left: 0;
+}
+
+[data-menu][data-align='right'] [data-menu-dropdown] {
+  right: 0;
+}
+
+@keyframes menu-dropdown-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes menu-dropdown-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* =============================================================================
+   Menu Items
+   ============================================================================= */
+
+[data-menu-item] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: background-color 150ms ease;
+}
+
+[data-menu-item][data-disabled='true'],
+[data-menu-item]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-menu-item]:focus,
+[data-menu-item]:focus-visible {
+  outline: none;
+}
+
+/* Size variants for items */
+[data-menu][data-size='sm'] [data-menu-item] {
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-menu][data-size='md'] [data-menu-item],
+[data-menu]:not([data-size]) [data-menu-item] {
+  gap: var(--density-spacing-md);
+  padding-block: var(--density-spacing-sm);
+  padding-inline: var(--density-spacing-md);
+  font-size: 0.875rem;
+}
+
+[data-menu][data-size='lg'] [data-menu-item] {
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Item Elements - uses shared [data-item-*] from item.css
+   ============================================================================= */
+
+/* =============================================================================
+   Groups
+   ============================================================================= */
+
+[data-menu-group] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: color 150ms ease;
+}
+
+/* Group sizes */
+[data-menu][data-size='sm'] [data-menu-group] {
+  padding: 0.25rem 0.5rem;
+}
+[data-menu][data-size='md'] [data-menu-group],
+[data-menu]:not([data-size]) [data-menu-group] {
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
+}
+[data-menu][data-size='lg'] [data-menu-group] {
+  padding: 0.5rem 1rem;
+}
+
+[data-menu-group]:focus {
+  outline: none;
+}
+
+[data-menu-group] > [data-menu-group-icon] {
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+[data-menu-group] > [data-menu-group-text] {
+  flex: 1;
+  text-align: left;
+}
+
+[data-menu-expand-icon] {
+  flex-shrink: 0;
+  margin-left: auto;
+  transition: transform 150ms ease;
+}
+
+/* =============================================================================
+   Separator
+   ============================================================================= */
+
+[data-menu-separator] {
+  height: 1px;
+  margin-block: 0.25rem;
+  border: none;
+}

package/dist/base/message.css

@@ -0,0 +1,62 @@
+/* Message — base structural styles */
+
+[data-message-root] {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-width: 1px;
+  border-style: solid;
+  cursor: default;
+  user-select: none;
+}
+
+[data-message-icon] {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  margin-top: 0.125rem;
+}
+
+[data-message-text] {
+  flex: 1;
+  min-width: 0;
+}
+
+[data-message-actions] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  margin-top: -0.125rem;
+}
+
+[data-message-dismiss] {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: -0.125rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0;
+  opacity: 0.5;
+  border-radius: 0.25rem;
+}
+
+[data-message-dismiss]:hover {
+  opacity: 1;
+}

package/dist/base/nav-content.css

@@ -0,0 +1,48 @@
+/* NavContent — base structural styles */
+
+[data-nav-content] {
+	display: flex;
+	min-height: 0;
+	width: 100%;
+}
+
+[data-nav-content][data-orientation='horizontal'] {
+	flex-direction: row;
+}
+
+[data-nav-content][data-orientation='vertical'] {
+	flex-direction: column;
+}
+
+[data-nav-content-nav] {
+	flex-shrink: 0;
+	overflow-y: auto;
+}
+
+[data-nav-content][data-orientation='horizontal'] [data-nav-content-nav] {
+	width: var(--nav-size, 280px);
+	border-right: 1px solid var(--paper-mute);
+}
+
+[data-nav-content][data-orientation='vertical'] [data-nav-content-nav] {
+	border-bottom: 1px solid var(--paper-mute);
+}
+
+[data-nav-content-main] {
+	flex: 1;
+	min-width: 0;
+	overflow-y: auto;
+}
+
+/* Responsive collapse for horizontal orientation */
+@media (max-width: 640px) {
+	[data-nav-content][data-collapsible][data-orientation='horizontal'] {
+		flex-direction: column;
+	}
+
+	[data-nav-content][data-collapsible][data-orientation='horizontal'] [data-nav-content-nav] {
+		width: 100%;
+		border-right: none;
+		border-bottom: 1px solid var(--paper-mute);
+	}
+}

package/dist/base/palette-manager.css

@@ -0,0 +1,244 @@
+/**
+ * PaletteManager — Base STRUCTURAL styles only.
+ *
+ * Headless base: this file owns layout/structure (display, flex/grid, gap,
+ * padding, sizing, border-width/style, border-radius, font metrics, cursor,
+ * transition, overflow, etc.). All COLOR (background/text/border-color, focus
+ * ring color, placeholder color) lives in the per-style theme layers
+ * (rokkit / minimal / material / frosted / zen-sumi) via @apply token classes.
+ *
+ * The shade-swatch background uses the component-supplied inline
+ * `--preset-color` variable — that is component-driven, not a theme token, so
+ * it stays here.
+ *
+ * Parts (from PaletteManager.svelte):
+ *   data-palette-manager / data-compact          — root container
+ *   data-palette-presets / -label / -list        — preset section
+ *   data-palette-preset / -swatch / -name         — preset card (--preset-color)
+ *   data-palette-custom / -label / -list / -item  — saved custom palettes
+ *   data-palette-editor                           — role rows wrapper
+ *   data-palette-role / -label / -controls        — single role row
+ *   data-palette-color-select / -color-input      — color pickers
+ *   data-palette-hex-toggle                        — toggle preset/hex entry
+ *   data-palette-shades / -shade (data-shade)      — generated shade ramp
+ *   data-palette-actions / -save / -apply          — footer buttons
+ *   data-palette-*-icon                            — glyph spans
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-palette-manager] {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-md, 0.375rem);
+  font-size: 0.875rem;
+}
+
+[data-palette-manager][data-compact] {
+  gap: 0.625rem;
+  padding: 0.625rem;
+}
+
+/* =============================================================================
+   Section labels (presets / custom)
+   ============================================================================= */
+
+[data-palette-presets-label],
+[data-palette-custom-label] {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* =============================================================================
+   Presets
+   ============================================================================= */
+
+[data-palette-presets-list] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+[data-palette-preset] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.625rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-md, 0.375rem);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+[data-palette-preset-swatch] {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-style: solid;
+  background-color: var(--preset-color, var(--primary));
+}
+
+[data-palette-preset-name] {
+  white-space: nowrap;
+}
+
+/* =============================================================================
+   Custom palettes
+   ============================================================================= */
+
+[data-palette-custom-list] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+[data-palette-custom-item] {
+  padding: 0.375rem 0.625rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-md, 0.375rem);
+  font-size: 0.8125rem;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+/* =============================================================================
+   Editor / role rows
+   ============================================================================= */
+
+[data-palette-editor] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+[data-palette-role] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+[data-palette-role-label] {
+  flex: 0 0 6rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+[data-palette-role-controls] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+/* =============================================================================
+   Color pickers
+   ============================================================================= */
+
+[data-palette-color-select],
+[data-palette-color-input] {
+  padding: 0.3125rem 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-md, 0.375rem);
+  font-size: 0.8125rem;
+  line-height: 1.2;
+}
+
+[data-palette-color-select]:focus-visible,
+[data-palette-color-input]:focus-visible {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-offset: 1px;
+}
+
+[data-palette-hex-toggle] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--radius-md, 0.375rem);
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+/* =============================================================================
+   Shade ramp
+   ============================================================================= */
+
+[data-palette-shades] {
+  display: inline-flex;
+  margin-left: auto;
+  border-radius: var(--radius-md, 0.375rem);
+  overflow: hidden;
+  border-width: 1px;
+  border-style: solid;
+}
+
+[data-palette-shade] {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* =============================================================================
+   Actions
+   ============================================================================= */
+
+[data-palette-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+[data-palette-save],
+[data-palette-apply] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.4375rem 0.875rem;
+  border-radius: var(--radius-md, 0.375rem);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+/* Save = secondary / outlined */
+[data-palette-save] {
+  border-width: 1px;
+  border-style: solid;
+}
+
+/* Apply = primary action */
+[data-palette-apply] {
+  border-width: 1px;
+  border-style: solid;
+}

package/dist/base/pill.css

@@ -0,0 +1,61 @@
+/* Pill — base structural styles */
+
+[data-pill] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.125rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  white-space: nowrap;
+  outline: none;
+  vertical-align: middle;
+  /* Align to the smallest control rung (pills are the compact end of the family);
+     min-height so content can still grow. */
+  min-height: var(--control-h-sm);
+}
+
+[data-pill-icon] {
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+
+[data-pill-text] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-pill-remove] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  margin-left: 0.125rem;
+  border: none;
+  border-radius: 9999px;
+  cursor: pointer;
+  background: transparent;
+  opacity: 0.6;
+  transition:
+    opacity 0.15s ease,
+    color 0.15s ease;
+  font-size: 0.75rem;
+  flex-shrink: 0;
+}
+
+[data-pill-remove]:hover {
+  opacity: 1;
+}
+
+[data-pill-remove]:disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+[data-pill-disabled] {
+  opacity: 0.5;
+  cursor: default;
+}

package/dist/base/progress.css

@@ -0,0 +1,34 @@
+/* ProgressBar — base structural styles */
+
+[data-progress] {
+  position: relative;
+  width: 100%;
+  height: 0.5rem;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+[data-progress-bar] {
+  height: 100%;
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+
+[data-progress][data-indeterminate] [data-progress-bar] {
+  animation: progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+    width: 50%;
+  }
+  50% {
+    transform: translateX(50%);
+    width: 50%;
+  }
+  100% {
+    transform: translateX(200%);
+    width: 50%;
+  }
+}