@amulet-laboratories/hex 0.3.0

package/src/shared/components/core.css

@@ -0,0 +1,1654 @@
+/* Hex — Shared Core Components
+ * Styles for Rig's core package: Button, Input, Select, Textarea,
+ * Checkbox, Switch, Radio, Badge, Progress, Card, Divider, Kbd,
+ * TagInput, Combobox, Tooltip, Skeleton, PropertyGrid, InlineEditor.
+ */
+
+/* ───────── Buttons ───────── */
+
+[data-rig-button] {
+  @apply inline-flex items-center justify-center gap-1.5
+         font-medium cursor-pointer transition-colors
+         focus:outline-none;
+
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 16px;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+}
+
+[data-rig-button]:focus-visible {
+  outline: 1px solid var(--color-ring);
+  outline-offset: -1px;
+}
+
+[data-rig-button][data-variant='primary'] {
+  background: var(--rig-button-bg);
+  color: var(--rig-button-fg);
+  border-color: var(--rig-button-border);
+}
+
+[data-rig-button][data-variant='primary']:hover {
+  background: var(--rig-button-hover-bg);
+  color: var(--rig-button-hover-fg, var(--color-foreground));
+}
+
+[data-rig-button][data-variant='ghost'] {
+  background: var(--rig-button-secondary-bg);
+  color: var(--rig-button-secondary-fg);
+}
+
+[data-rig-button][data-variant='ghost']:hover {
+  background: var(--rig-button-secondary-hover-bg);
+  color: var(--rig-button-secondary-hover-fg, var(--color-accent-foreground));
+}
+
+[data-rig-button][data-variant='secondary'] {
+  background: var(--rig-button-secondary-bg);
+  color: var(--rig-button-secondary-fg);
+  border-color: var(--color-border);
+}
+
+[data-rig-button][data-variant='secondary']:hover {
+  background: var(--rig-button-secondary-hover-bg);
+  color: var(--rig-button-secondary-hover-fg, var(--color-accent-foreground));
+}
+
+[data-rig-button][data-variant='cta'] {
+  background: var(--rig-button-bg);
+  color: var(--rig-button-fg);
+  border-color: var(--rig-button-border);
+}
+
+[data-rig-button][data-variant='cta']:hover {
+  background: var(--rig-button-hover-bg);
+  color: var(--rig-button-hover-fg, var(--color-foreground));
+}
+
+[data-rig-button][data-variant='danger'] {
+  color: var(--color-destructive);
+  background: transparent;
+}
+
+[data-rig-button][data-variant='danger']:hover {
+  background: color-mix(in srgb, var(--color-destructive) 12%, transparent);
+}
+
+[data-rig-button][data-variant='outline'] {
+  background: transparent;
+  color: var(--color-foreground);
+  border-color: var(--rig-button-outline-border, var(--color-foreground));
+}
+
+[data-rig-button][data-variant='outline']:hover {
+  background: var(--rig-button-hover-bg, var(--color-secondary));
+}
+
+[data-rig-button][data-disabled] {
+  @apply pointer-events-none;
+
+  opacity: 0.4;
+}
+
+/* ───────── Input ───────── */
+
+[data-rig-input] {
+  @apply flex items-center gap-2;
+}
+
+[data-rig-input] input {
+  @apply flex-1 focus:outline-none;
+
+  background: var(--rig-input-bg);
+  border: 1px solid var(--rig-input-border);
+  color: var(--rig-input-fg);
+  font-size: 13px;
+  padding: 4px 6px;
+  border-radius: var(--radius);
+}
+
+[data-rig-input] input::placeholder {
+  color: var(--rig-input-placeholder);
+}
+
+[data-rig-input] input:focus {
+  border-color: var(--color-ring);
+}
+
+[data-rig-input][data-disabled] input {
+  @apply cursor-not-allowed;
+
+  opacity: 0.4;
+}
+
+[data-rig-input-clear] {
+  color: var(--rig-description-fg);
+  font-size: 13px;
+  padding: 0 4px;
+}
+
+[data-rig-input-clear]:hover {
+  color: var(--color-foreground);
+}
+
+/* ───────── Select ───────── */
+
+[data-rig-select] {
+  @apply flex items-center gap-2;
+}
+
+[data-rig-select] select {
+  @apply flex-1 appearance-none focus:outline-none;
+
+  background: var(--rig-dropdown-bg);
+  border: 1px solid var(--rig-dropdown-border);
+  color: var(--rig-dropdown-fg);
+  font-size: 13px;
+  padding: 4px 6px;
+  border-radius: var(--radius);
+}
+
+[data-rig-select] select:focus {
+  border-color: var(--color-ring);
+}
+
+[data-rig-select] select option {
+  background: var(--rig-dropdown-list-bg);
+  color: var(--color-foreground);
+}
+
+[data-rig-select][data-disabled] select {
+  @apply cursor-not-allowed;
+
+  opacity: 0.4;
+}
+
+/* ───────── Textarea ───────── */
+
+[data-rig-textarea] {
+  @apply flex flex-col gap-1;
+}
+
+[data-rig-textarea] textarea {
+  @apply focus:outline-none;
+
+  background: var(--rig-input-bg);
+  border: 1px solid var(--rig-input-border);
+  color: var(--rig-input-fg);
+  font-size: 13px;
+  padding: 4px 6px;
+  border-radius: var(--radius);
+}
+
+[data-rig-textarea] textarea::placeholder {
+  color: var(--rig-input-placeholder);
+}
+
+[data-rig-textarea] textarea:focus {
+  border-color: var(--color-ring);
+}
+
+[data-rig-textarea][data-disabled] textarea {
+  @apply cursor-not-allowed;
+
+  opacity: 0.4;
+}
+
+[data-rig-textarea-count] {
+  color: var(--rig-description-fg);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  text-align: right;
+}
+
+/* ───────── Checkbox ───────── */
+
+[data-rig-checkbox] {
+  @apply inline-flex items-center gap-2 cursor-pointer select-none;
+
+  font-size: 13px;
+  color: var(--color-foreground);
+}
+
+[data-rig-checkbox] input[type='checkbox'] {
+  @apply cursor-pointer;
+
+  width: 18px;
+  height: 18px;
+  background: var(--rig-checkbox-bg);
+  border: 1px solid var(--rig-checkbox-border);
+  border-radius: 3px;
+  accent-color: var(--color-primary);
+}
+
+[data-rig-checkbox][data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ───────── Switch ───────── */
+
+[data-rig-switch] {
+  @apply relative inline-flex items-center rounded-full
+         transition-colors cursor-pointer focus:outline-none;
+
+  width: 36px;
+  height: 20px;
+  background: var(--rig-input-bg);
+  border: 1px solid var(--rig-input-border);
+}
+
+[data-rig-switch]:focus-visible {
+  outline: 1px solid var(--color-ring);
+  outline-offset: -1px;
+}
+
+[data-rig-switch][data-state='checked'] {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+[data-rig-switch][data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+[data-rig-switch-track] {
+  @apply absolute inset-0 rounded-full;
+}
+
+[data-rig-switch-thumb] {
+  @apply block rounded-full transition-transform;
+
+  width: 14px;
+  height: 14px;
+  background: var(--rig-description-fg);
+  transform: translateX(2px);
+}
+
+[data-rig-switch][data-state='checked'] [data-rig-switch-thumb] {
+  transform: translateX(18px);
+  background: var(--color-foreground);
+}
+
+/* ───────── Radio ───────── */
+
+[data-rig-radio] {
+  @apply inline-flex items-center gap-2 cursor-pointer select-none;
+
+  font-size: 13px;
+  color: var(--color-foreground);
+}
+
+[data-rig-radio] input[type='radio'] {
+  @apply cursor-pointer;
+
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--rig-checkbox-border);
+  background: var(--rig-checkbox-bg);
+  accent-color: var(--color-primary);
+}
+
+[data-rig-radio][data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+[data-rig-radio-group] {
+  @apply flex gap-3;
+}
+
+[data-rig-radio-group][data-orientation='vertical'] {
+  @apply flex-col;
+}
+
+/* ───────── Badge ───────── */
+
+[data-rig-badge] {
+  font-size: 11px;
+  line-height: 1;
+  padding: 3px 5px;
+  border-radius: 11px;
+  background: var(--rig-badge-bg);
+  color: var(--rig-badge-fg);
+}
+
+[data-rig-badge][data-variant='active'] {
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
+  color: var(--color-success);
+}
+
+[data-rig-badge][data-variant='dormant'] {
+  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
+  color: var(--color-warning);
+}
+
+[data-rig-badge][data-variant='frozen'] {
+  background: color-mix(in srgb, var(--color-info) 15%, transparent);
+  color: var(--color-info);
+}
+
+[data-rig-badge][data-variant='placeholder'] {
+  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
+  color: var(--rig-description-fg);
+}
+
+[data-rig-badge][data-variant='info'] {
+  background: color-mix(in srgb, var(--color-info) 15%, transparent);
+  color: var(--color-info);
+}
+
+[data-rig-badge][data-variant='warning'] {
+  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
+  color: var(--color-warning);
+}
+
+[data-rig-badge][data-variant='danger'] {
+  background: color-mix(in srgb, var(--color-destructive) 15%, transparent);
+  color: var(--color-destructive);
+}
+
+[data-rig-badge][data-variant='muted'] {
+  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
+  color: var(--rig-description-fg);
+}
+
+[data-rig-badge][data-variant='primary'] {
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--color-primary);
+}
+
+[data-rig-badge][data-variant='accent'] {
+  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
+  color: var(--color-accent);
+}
+
+[data-rig-badge][data-variant='success'] {
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
+  color: var(--color-success);
+}
+
+/* ───────── Progress ───────── */
+
+[data-rig-progress] {
+  @apply flex-1;
+
+  height: 2px;
+  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
+}
+
+[data-rig-progress-fill] {
+  @apply h-full transition-all duration-300;
+
+  background: var(--rig-progress-bg);
+}
+
+[data-rig-progress][data-indeterminate] [data-rig-progress-fill] {
+  @apply w-1/3 animate-pulse;
+}
+
+/* ───────── Card ───────── */
+
+[data-rig-card] {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-card);
+  padding: 1rem;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+[data-rig-card][data-size='sm'] {
+  padding: 0.5rem 0.75rem;
+}
+
+[data-rig-card][data-size='lg'] {
+  padding: 1.5rem;
+}
+
+[data-rig-card][data-interactive] {
+  cursor: pointer;
+  transition:
+    transform 0.2s,
+    box-shadow 0.2s,
+    border-color 0.15s,
+    background 0.15s;
+}
+
+[data-rig-card][data-interactive]:hover {
+  border-color: var(--rig-input-border);
+  background: var(--rig-card-hover-bg, var(--color-card));
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-rig-card][data-interactive] {
+    transition: none;
+  }
+
+  [data-rig-card][data-interactive]:hover {
+    transform: none;
+  }
+}
+
+[data-rig-card][data-interactive]:focus-visible {
+  outline: 1px solid var(--rig-card-accent, var(--color-ring));
+  outline-offset: 1px;
+}
+
+[data-rig-card][data-interactive]:active {
+  background: var(--color-secondary);
+}
+
+/* Accent border-left */
+[data-rig-card][style*='--rig-card-accent'] {
+  border-left: 2px solid var(--rig-card-accent);
+}
+
+/* ───────── Divider ───────── */
+
+[data-rig-divider] {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 0;
+}
+
+[data-rig-divider][data-vertical] {
+  border-top: none;
+  border-left: 1px solid var(--color-border);
+  align-self: stretch;
+}
+
+[data-rig-divider-label] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--rig-description-fg);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+[data-rig-divider-label]::before,
+[data-rig-divider-label]::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--color-border);
+}
+
+/* ───────── Kbd ───────── */
+
+[data-rig-kbd] {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1;
+  color: var(--rig-keybinding-fg);
+  background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
+  border: 1px solid var(--color-border);
+  border-bottom-width: 2px;
+  border-radius: 3px;
+  padding: 3px 5px;
+  white-space: nowrap;
+}
+
+/* ───────── TagInput ───────── */
+
+[data-rig-tag-input] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  min-height: 32px;
+  padding: 4px 8px;
+  border: 1px solid var(--rig-input-border);
+  border-radius: var(--radius);
+  background: var(--rig-input-bg);
+  transition: border-color 0.15s ease;
+  position: relative;
+}
+
+[data-rig-tag-input]:focus-within {
+  border-color: var(--color-ring);
+}
+
+[data-rig-tag] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-foreground);
+  background: var(--color-accent);
+  border: 1px solid var(--color-border);
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+[data-rig-tag-remove] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--rig-description-fg);
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  border-radius: 1px;
+  transition:
+    color 0.1s ease,
+    background-color 0.1s ease;
+}
+
+[data-rig-tag-remove]:hover {
+  color: var(--color-foreground);
+  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
+}
+
+[data-rig-tag-input-field] {
+  flex: 1;
+  min-width: 80px;
+  border: none;
+  background: none;
+  outline: none;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-foreground);
+  padding: 2px 0;
+}
+
+[data-rig-tag-input-field]::placeholder {
+  color: var(--rig-input-placeholder);
+}
+
+[data-rig-tag-suggestions] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  margin-top: 2px;
+  z-index: 50;
+  background: var(--rig-widget-bg);
+  border: 1px solid var(--rig-widget-border);
+  border-radius: var(--radius);
+  max-height: 160px;
+  overflow-y: auto;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
+}
+
+[data-rig-tag-suggestion] {
+  display: block;
+  width: 100%;
+  padding: 4px 10px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--rig-description-fg);
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+[data-rig-tag-suggestion]:hover,
+[data-rig-tag-suggestion][data-highlighted] {
+  background: var(--rig-list-hover-bg);
+  color: var(--color-foreground);
+}
+
+/* ───────── Combobox ───────── */
+
+[data-rig-combobox] {
+  position: relative;
+}
+
+[data-rig-combobox-input-wrapper] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 32px;
+  padding: 4px 8px;
+  border: 1px solid var(--rig-input-border);
+  border-radius: var(--radius);
+  background: var(--rig-input-bg);
+  transition: border-color 0.15s ease;
+}
+
+[data-rig-combobox-input-wrapper]:focus-within {
+  border-color: var(--color-ring);
+}
+
+[data-rig-combobox-input-wrapper] input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: none;
+  outline: none;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-foreground);
+  padding: 2px 0;
+}
+
+[data-rig-combobox-input-wrapper] input::placeholder {
+  color: var(--rig-input-placeholder);
+}
+
+[data-rig-combobox-clear] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font-size: 13px;
+  color: var(--rig-description-fg);
+  cursor: pointer;
+  border: none;
+  background: none;
+  padding: 0;
+  border-radius: 2px;
+  transition: color 0.1s ease;
+}
+
+[data-rig-combobox-clear]:hover {
+  color: var(--color-foreground);
+}
+
+[data-rig-combobox-list] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  margin-top: 2px;
+  z-index: 50;
+  background: var(--rig-widget-bg);
+  border: 1px solid var(--rig-widget-border);
+  border-radius: var(--radius);
+  max-height: 200px;
+  overflow-y: auto;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
+}
+
+[data-rig-combobox-option] {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  text-align: left;
+  cursor: pointer;
+  border: none;
+  background: none;
+  transition: background-color 0.1s ease;
+}
+
+[data-rig-combobox-option]:hover,
+[data-rig-combobox-option][data-highlighted] {
+  background: var(--rig-list-hover-bg);
+}
+
+[data-rig-combobox-option][aria-selected='true'] {
+  background: var(--rig-list-active-bg);
+  color: var(--rig-list-active-fg);
+}
+
+[data-rig-combobox-option] div:first-child {
+  font-size: 12px;
+  color: var(--color-foreground);
+}
+
+[data-rig-combobox-option] div:last-child:not(:first-child) {
+  font-size: 11px;
+  color: var(--rig-description-fg);
+  margin-top: 1px;
+}
+
+[data-rig-combobox-empty] {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--rig-description-fg);
+  font-style: italic;
+}
+
+/* ───────── InlineEditor ───────── */
+
+[data-rig-inline-editor] {
+  @apply inline-flex;
+}
+
+[data-rig-inline-editor-display] {
+  @apply cursor-pointer rounded-sm transition-colors;
+
+  font: inherit;
+  color: inherit;
+  padding: 2px 4px;
+}
+
+[data-rig-inline-editor-display]:hover {
+  background: var(--rig-list-hover-bg);
+}
+
+[data-rig-inline-editor-input] {
+  @apply focus:outline-none;
+
+  background: var(--rig-input-bg);
+  border: 1px solid var(--rig-input-border);
+  color: var(--color-foreground);
+  font: inherit;
+  padding: 2px 4px;
+  border-radius: var(--radius);
+}
+
+[data-rig-inline-editor-input]:focus {
+  border-color: var(--color-ring);
+}
+
+/* ───────── Toggle ───────── */
+
+[data-rig-toggle] {
+  @apply inline-flex items-center justify-center gap-1.5
+         cursor-pointer transition-colors
+         focus:outline-none;
+
+  font-size: 13px;
+  padding: 4px 8px;
+  border-radius: var(--radius);
+  background: none;
+  border: none;
+  color: var(--rig-description-fg);
+}
+
+[data-rig-toggle]:hover {
+  background: var(--rig-list-hover-bg);
+  color: var(--color-foreground);
+}
+
+[data-rig-toggle]:focus-visible {
+  outline: 1px solid var(--color-ring);
+  outline-offset: -1px;
+}
+
+[data-rig-toggle][data-state='on'] {
+  background: var(--color-accent);
+  color: var(--color-foreground);
+}
+
+[data-rig-toggle][data-disabled] {
+  @apply pointer-events-none;
+
+  opacity: 0.4;
+}
+
+/* ───────── ToggleGroup ───────── */
+
+[data-rig-toggle-group] {
+  @apply inline-flex gap-0.5;
+}
+
+[data-rig-toggle-group][data-orientation='vertical'] {
+  @apply flex-col;
+}
+
+[data-rig-toggle-group][data-disabled] {
+  @apply opacity-30 pointer-events-none;
+}
+
+/* ───────── Slider ───────── */
+
+[data-rig-slider] {
+  @apply relative flex items-center;
+
+  height: 20px;
+}
+
+[data-rig-slider][data-orientation='vertical'] {
+  @apply flex-col;
+
+  width: 20px;
+  height: auto;
+}
+
+[data-rig-slider-input] {
+  @apply w-full appearance-none bg-transparent cursor-pointer;
+
+  height: 4px;
+}
+
+[data-rig-slider-input]::-webkit-slider-runnable-track {
+  height: 4px;
+  border-radius: 2px;
+  background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
+}
+
+[data-rig-slider-input]::-webkit-slider-thumb {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--color-primary);
+  margin-top: -5px;
+  cursor: pointer;
+}
+
+[data-rig-slider][data-disabled] {
+  @apply opacity-30 pointer-events-none;
+}
+
+/* ───────── Icon ───────── */
+
+[data-rig-icon] {
+  @apply inline-flex items-center justify-center flex-shrink-0;
+}
+
+[data-rig-icon][data-size='sm'] {
+  width: 14px;
+  height: 14px;
+  font-size: 14px;
+}
+
+[data-rig-icon][data-size='md'] {
+  width: 16px;
+  height: 16px;
+  font-size: 16px;
+}
+
+[data-rig-icon][data-size='lg'] {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+}
+
+/* ───────── Icon-only Button (via data-icon-only on Button) ───────── */
+
+[data-rig-button][data-icon-only] {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+}
+
+/* ───────── Label ───────── */
+
+[data-rig-label] {
+  font-size: 13px;
+  color: var(--color-foreground);
+  cursor: pointer;
+}
+
+[data-rig-label][data-disabled] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* Label — field variant (form labels in sidebars / quick-add panels) */
+[data-rig-label][data-variant='field'] {
+  @apply text-xs font-mono text-muted-foreground block;
+
+  margin-bottom: 4px;
+  cursor: default;
+}
+
+/* ───────── SectionHeader ───────── */
+
+[data-rig-section-header] {
+  @apply font-mono font-bold uppercase tracking-wider;
+
+  margin: 0;
+  line-height: 1.4;
+}
+
+[data-rig-section-header][data-size='xs'] {
+  font-size: 11px;
+}
+
+[data-rig-section-header][data-size='sm'] {
+  font-size: 13px;
+}
+
+[data-rig-section-header][data-size='md'] {
+  font-size: 14px;
+}
+
+[data-rig-section-header][data-size='lg'] {
+  font-size: 16px;
+}
+
+[data-rig-section-header][data-size='xl'] {
+  font-size: 20px;
+}
+
+[data-rig-section-header][data-muted] {
+  color: var(--color-muted-foreground);
+}
+
+/* ───────── Combobox (additions) ───────── */
+
+[data-rig-combobox-option-label] {
+  font-size: 12px;
+  color: var(--color-foreground);
+}
+
+[data-rig-combobox-option-desc] {
+  font-size: 11px;
+  color: var(--rig-description-fg);
+  margin-top: 1px;
+}
+
+/* ───────── Avatar ───────── */
+
+[data-rig-avatar] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--avatar-bg, var(--color-accent));
+  color: var(--color-foreground);
+  font-weight: 600;
+  font-family: var(--font-mono, monospace);
+  user-select: none;
+  flex-shrink: 0;
+  overflow: hidden;
+  line-height: 1;
+}
+
+[data-rig-avatar][data-size='xs'] {
+  width: 20px;
+  height: 20px;
+  font-size: 9px;
+}
+[data-rig-avatar][data-size='sm'] {
+  width: 24px;
+  height: 24px;
+  font-size: 10px;
+}
+[data-rig-avatar][data-size='md'] {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+}
+[data-rig-avatar][data-size='lg'] {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+}
+[data-rig-avatar][data-size='xl'] {
+  width: 48px;
+  height: 48px;
+  font-size: 16px;
+}
+
+[data-rig-avatar-initials] {
+  pointer-events: none;
+  letter-spacing: 0.5px;
+}
+
+[data-rig-avatar-img] {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+[data-rig-avatar-status] {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: 9999px;
+  border: 2px solid var(--color-background, #0f0d0a);
+}
+
+[data-rig-avatar][data-size='xs'] [data-rig-avatar-status],
+[data-rig-avatar][data-size='sm'] [data-rig-avatar-status] {
+  width: 8px;
+  height: 8px;
+}
+[data-rig-avatar][data-size='md'] [data-rig-avatar-status] {
+  width: 10px;
+  height: 10px;
+}
+[data-rig-avatar][data-size='lg'] [data-rig-avatar-status],
+[data-rig-avatar][data-size='xl'] [data-rig-avatar-status] {
+  width: 12px;
+  height: 12px;
+}
+
+[data-rig-avatar-status][data-status='online'] {
+  background: var(--color-success, #22c55e);
+}
+[data-rig-avatar-status][data-status='away'] {
+  background: var(--color-warning, #eab308);
+}
+[data-rig-avatar-status][data-status='dnd'] {
+  background: var(--color-destructive, #ef4444);
+}
+[data-rig-avatar-status][data-status='offline'] {
+  background: var(--rig-description-fg);
+}
+
+/* ───────── Dot ───────── */
+
+[data-rig-dot] {
+  @apply rounded-full shrink-0;
+
+  background: var(--dot-color, var(--color-foreground));
+}
+
+[data-rig-dot][data-size='xs'] {
+  width: 4px;
+  height: 4px;
+}
+
+[data-rig-dot][data-size='sm'] {
+  width: 6px;
+  height: 6px;
+}
+
+[data-rig-dot][data-size='md'] {
+  width: 8px;
+  height: 8px;
+}
+
+[data-rig-dot][data-size='lg'] {
+  width: 12px;
+  height: 12px;
+}
+
+/* ───────── PulseIndicator ───────── */
+
+[data-rig-pulse-indicator] {
+  width: 12px;
+  height: 12px;
+}
+
+[data-rig-pulse-indicator][data-active] [data-rig-pulse-indicator-ring] {
+  @apply animate-ping;
+
+  background: var(--color-success, #22c55e);
+  opacity: 0.3;
+}
+
+[data-rig-pulse-indicator-dot] {
+  width: 8px;
+  height: 8px;
+  background: var(--color-success, #22c55e);
+}
+
+[data-rig-pulse-indicator]:not([data-active]) [data-rig-pulse-indicator-dot] {
+  background: color-mix(in srgb, var(--color-foreground) 25%, transparent);
+}
+
+/* ───────── ProgressRing ───────── */
+
+[data-rig-progress-ring] {
+  @apply inline-flex items-center justify-center;
+}
+
+[data-rig-progress-ring-track] {
+  stroke: color-mix(in srgb, var(--color-foreground) 10%, transparent);
+}
+
+[data-rig-progress-ring-fill] {
+  stroke: var(--color-primary);
+  transition: stroke-dashoffset 0.3s ease;
+}
+
+/* ───────── RangeSlider ───────── */
+
+[data-rig-range-slider] {
+  @apply relative flex items-center;
+
+  height: 20px;
+}
+
+[data-rig-range-slider][data-disabled] {
+  @apply opacity-30 pointer-events-none;
+}
+
+[data-rig-range-slider-track] {
+  @apply rounded-full;
+
+  background: color-mix(in srgb, var(--color-foreground) 10%, transparent);
+}
+
+[data-rig-range-slider-fill] {
+  @apply rounded-full;
+
+  background: var(--color-primary);
+}
+
+[data-rig-range-slider-thumb] {
+  @apply shadow-sm;
+
+  background: var(--color-foreground);
+  border: 2px solid var(--color-background);
+}
+
+[data-rig-range-slider-thumb]:focus-visible {
+  outline: 1px solid var(--color-ring);
+  outline-offset: 1px;
+}
+
+/* ───────── AvatarGroup ───────── */
+
+[data-rig-avatar-group] {
+  @apply inline-flex items-center;
+}
+
+[data-rig-avatar-group-item] {
+  border: 2px solid var(--color-background);
+  margin-left: -8px;
+  background: var(--color-accent);
+}
+
+[data-rig-avatar-group-item]:first-child {
+  margin-left: 0;
+}
+
+[data-rig-avatar-group-img] {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+[data-rig-avatar-group-initials] {
+  pointer-events: none;
+  letter-spacing: 0.5px;
+}
+
+[data-rig-avatar-group-item][data-size='sm'] {
+  width: 24px;
+  height: 24px;
+  font-size: 10px;
+}
+
+[data-rig-avatar-group-item][data-size='md'] {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+}
+
+[data-rig-avatar-group-item][data-size='lg'] {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+}
+
+[data-rig-avatar-group-overflow] {
+  font-size: 11px;
+  font-family: var(--font-mono);
+  border: 2px solid var(--color-background);
+  margin-left: -8px;
+  background: var(--color-accent);
+  color: var(--color-foreground);
+}
+
+/* ───────── Pagination ───────── */
+
+[data-rig-pagination] {
+  @apply inline-flex items-center gap-1;
+
+  font-family: var(--font-mono);
+  font-size: 12px;
+  user-select: none;
+}
+
+[data-rig-pagination-prev],
+[data-rig-pagination-next] {
+  @apply inline-flex items-center justify-center;
+
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+  background: none;
+  color: var(--color-foreground);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+[data-rig-pagination-prev]:hover:not(:disabled),
+[data-rig-pagination-next]:hover:not(:disabled) {
+  background: var(--rig-list-hover-bg);
+}
+
+[data-rig-pagination-prev]:disabled,
+[data-rig-pagination-next]:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+[data-rig-pagination-page] {
+  @apply inline-flex items-center justify-center;
+
+  min-width: 28px;
+  height: 28px;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  background: none;
+  color: var(--color-muted-foreground);
+  cursor: pointer;
+  padding: 0 4px;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+[data-rig-pagination-page]:hover {
+  background: var(--rig-list-hover-bg);
+  color: var(--color-foreground);
+}
+
+[data-rig-pagination-page][data-active] {
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+  border-color: var(--color-primary);
+}
+
+[data-rig-pagination-ellipsis] {
+  @apply inline-flex items-center justify-center;
+
+  min-width: 28px;
+  height: 28px;
+  color: var(--color-muted-foreground);
+}
+
+[data-rig-pagination][data-disabled] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* ───────── FileInput ───────── */
+
+[data-rig-file-input] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 80px;
+  padding: 16px;
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius);
+  background: var(--rig-input-bg);
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+[data-rig-file-input]:hover {
+  border-color: var(--color-ring);
+}
+
+[data-rig-file-input]:focus-visible {
+  outline: 1px solid var(--color-ring);
+  outline-offset: 2px;
+}
+
+[data-rig-file-input][data-dragging] {
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
+}
+
+[data-rig-file-input][data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+[data-rig-file-input-native] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[data-rig-file-input-content] {
+  text-align: center;
+}
+
+[data-rig-file-input-placeholder] {
+  color: var(--color-muted-foreground);
+  font-size: 13px;
+}
+
+[data-rig-file-input-files] {
+  color: var(--color-foreground);
+  font-size: 13px;
+  font-family: var(--font-mono);
+}
+
+/* ───────── Rating ───────── */
+
+[data-rig-rating] {
+  @apply inline-flex items-center;
+
+  gap: 2px;
+}
+
+[data-rig-rating]:focus-visible {
+  outline: 1px solid var(--color-ring);
+  outline-offset: 2px;
+  border-radius: var(--radius);
+}
+
+[data-rig-rating-star] {
+  font-size: 20px;
+  cursor: pointer;
+  color: var(--color-muted-foreground);
+  transition: color 0.1s ease;
+  line-height: 1;
+}
+
+[data-rig-rating-star][data-filled] {
+  color: var(--color-warning, #f59e0b);
+}
+
+[data-rig-rating-star][data-half] {
+  color: var(--color-warning, #f59e0b);
+  opacity: 0.5;
+}
+
+[data-rig-rating][data-readonly] [data-rig-rating-star] {
+  cursor: default;
+}
+
+[data-rig-rating][data-disabled] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* ───────── Form ───────── */
+
+[data-rig-form] {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+[data-rig-form][data-dirty] {
+  /* Visual cue available for consumers via token */
+}
+
+/* ───────── NumberInput ───────── */
+
+[data-rig-number-input] {
+  @apply inline-flex items-center;
+
+  border: 1px solid var(--rig-input-border);
+  border-radius: var(--radius);
+  background: var(--rig-input-bg);
+  transition: border-color 0.15s ease;
+}
+
+[data-rig-number-input]:focus-within {
+  border-color: var(--color-ring);
+}
+
+[data-rig-number-input-field] {
+  @apply flex-1 focus:outline-none;
+
+  background: transparent;
+  border: none;
+  color: var(--rig-input-fg);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  padding: 4px 6px;
+  text-align: center;
+  min-width: 0;
+}
+
+[data-rig-number-input-field]::placeholder {
+  color: var(--rig-input-placeholder);
+}
+
+[data-rig-number-input-decrement],
+[data-rig-number-input-increment] {
+  @apply inline-flex items-center justify-center;
+
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  color: var(--rig-description-fg);
+  cursor: pointer;
+  font-size: 14px;
+  transition:
+    color 0.1s ease,
+    background-color 0.1s ease;
+}
+
+[data-rig-number-input-decrement]:hover:not(:disabled),
+[data-rig-number-input-increment]:hover:not(:disabled) {
+  color: var(--color-foreground);
+  background: var(--rig-list-hover-bg);
+}
+
+[data-rig-number-input-decrement]:disabled,
+[data-rig-number-input-increment]:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+[data-rig-number-input][data-disabled] {
+  @apply pointer-events-none;
+
+  opacity: 0.4;
+}
+
+/* ───────── OTPInput ───────── */
+
+[data-rig-otp-input] {
+  @apply inline-flex items-center;
+
+  gap: 6px;
+}
+
+[data-rig-otp-input-cell] {
+  @apply focus:outline-none;
+
+  width: 36px;
+  height: 40px;
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--rig-input-fg);
+  background: var(--rig-input-bg);
+  border: 1px solid var(--rig-input-border);
+  border-radius: var(--radius);
+  transition: border-color 0.15s ease;
+}
+
+[data-rig-otp-input-cell]:focus {
+  border-color: var(--color-ring);
+}
+
+[data-rig-otp-input-cell][data-filled] {
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
+}
+
+[data-rig-otp-input][data-disabled] {
+  @apply pointer-events-none;
+
+  opacity: 0.4;
+}
+
+[data-rig-otp-input][data-disabled] [data-rig-otp-input-cell] {
+  cursor: not-allowed;
+}
+
+/* ───────── Transfer ───────── */
+
+[data-rig-transfer] {
+  @apply flex items-stretch;
+
+  gap: 8px;
+}
+
+[data-rig-transfer-source],
+[data-rig-transfer-target] {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--rig-input-bg);
+  overflow-y: auto;
+  max-height: 240px;
+}
+
+[data-rig-transfer-item] {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--color-foreground);
+  cursor: pointer;
+  border: none;
+  background: none;
+  text-align: left;
+  transition: background-color 0.1s ease;
+}
+
+[data-rig-transfer-item]:hover {
+  background: var(--rig-list-hover-bg);
+}
+
+[data-rig-transfer-item]:focus-visible {
+  outline: 1px solid var(--color-ring);
+  outline-offset: -1px;
+}
+
+[data-rig-transfer-item][data-selected] {
+  background: var(--rig-list-active-bg);
+  color: var(--rig-list-active-fg);
+}
+
+[data-rig-transfer-actions] {
+  @apply flex flex-col items-center justify-center;
+
+  gap: 4px;
+}
+
+[data-rig-transfer-move-right],
+[data-rig-transfer-move-left] {
+  @apply inline-flex items-center justify-center;
+
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+  background: none;
+  color: var(--color-foreground);
+  cursor: pointer;
+  font-size: 16px;
+  transition: background-color 0.15s ease;
+}
+
+[data-rig-transfer-move-right]:hover:not(:disabled),
+[data-rig-transfer-move-left]:hover:not(:disabled) {
+  background: var(--rig-list-hover-bg);
+}
+
+[data-rig-transfer-move-right]:disabled,
+[data-rig-transfer-move-left]:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+[data-rig-transfer][data-disabled] {
+  @apply pointer-events-none;
+
+  opacity: 0.4;
+}
+
+/* ───────── Mention ───────── */
+
+[data-rig-mention] {
+  position: relative;
+}
+
+[data-rig-mention-input] {
+  @apply focus:outline-none;
+
+  width: 100%;
+  background: var(--rig-input-bg);
+  border: 1px solid var(--rig-input-border);
+  color: var(--rig-input-fg);
+  font-size: 13px;
+  padding: 4px 6px;
+  border-radius: var(--radius);
+  transition: border-color 0.15s ease;
+  resize: vertical;
+}
+
+[data-rig-mention-input]::placeholder {
+  color: var(--rig-input-placeholder);
+}
+
+[data-rig-mention-input]:focus {
+  border-color: var(--color-ring);
+}
+
+[data-rig-mention-list] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  margin-top: 2px;
+  z-index: 50;
+  background: var(--rig-widget-bg);
+  border: 1px solid var(--rig-widget-border);
+  border-radius: var(--radius);
+  max-height: 160px;
+  overflow-y: auto;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 40%);
+  list-style: none;
+  margin: 2px 0 0;
+  padding: 0;
+}
+
+[data-rig-mention-item] {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 12px;
+  color: var(--rig-description-fg);
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+
+[data-rig-mention-item]:hover,
+[data-rig-mention-item][data-active] {
+  background: var(--rig-list-hover-bg);
+  color: var(--color-foreground);
+}
+
+[data-rig-mention-item][aria-selected='true'] {
+  background: var(--rig-list-active-bg);
+  color: var(--rig-list-active-fg);
+}
+
+[data-rig-mention][data-disabled] {
+  @apply pointer-events-none;
+
+  opacity: 0.4;
+}
+
+[data-rig-mention][data-disabled] [data-rig-mention-input] {
+  cursor: not-allowed;
+}