@llui/components 0.0.1 → 0.0.3

package/dist/styles/theme.css

@@ -0,0 +1,1782 @@
+/*
+ * @llui/components — opt-in base theme
+ *
+ * Import once at app root:
+ *   import '@llui/components/styles/theme.css'
+ *
+ * Override tokens in your own CSS:
+ *   @theme { --color-primary: #8b5cf6; }
+ */
+
+/* ─── Design Tokens ─── */
+@theme {
+  /* Surface */
+  --color-surface: #ffffff;
+  --color-surface-muted: #f8fafc;
+  --color-surface-hover: #f1f5f9;
+  --color-surface-active: #e2e8f0;
+
+  /* Border */
+  --color-border: #e2e8f0;
+  --color-border-hover: #cbd5e1;
+  --color-border-focus: #3b82f6;
+
+  /* Text */
+  --color-text: #0f172a;
+  --color-text-muted: #64748b;
+  --color-text-inverted: #ffffff;
+
+  /* Primary */
+  --color-primary: #3b82f6;
+  --color-primary-hover: #2563eb;
+  --color-primary-active: #1d4ed8;
+
+  /* Destructive */
+  --color-destructive: #ef4444;
+  --color-destructive-hover: #dc2626;
+
+  /* Radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+
+  /* Spacing */
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+
+  /* Transitions */
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+
+  /* Z-index */
+  --z-popover: 50;
+  --z-dialog: 100;
+  --z-tooltip: 150;
+}
+
+/* ─── Accordion ─── */
+
+[data-scope='accordion'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+[data-scope='accordion'][data-part='item'] {
+  border-bottom: 1px solid var(--color-border);
+}
+
+[data-scope='accordion'][data-part='item']:last-child {
+  border-bottom: none;
+}
+
+[data-scope='accordion'][data-part='trigger'] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  font-weight: 500;
+  background: var(--color-surface);
+  border: none;
+  cursor: pointer;
+  transition: background var(--duration-fast);
+}
+
+[data-scope='accordion'][data-part='trigger']:hover {
+  background: var(--color-surface-hover);
+}
+
+[data-scope='accordion'][data-part='trigger'][data-state='open'] {
+  background: var(--color-surface-muted);
+}
+
+[data-scope='accordion'][data-part='trigger'][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-scope='accordion'][data-part='content'] {
+  padding: var(--space-4);
+}
+
+[data-scope='accordion'][data-part='content'][hidden] {
+  display: none;
+}
+
+/* ─── Switch ─── */
+
+[data-scope='switch'][data-part='root'] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  cursor: pointer;
+}
+
+[data-scope='switch'][data-part='root'][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-scope='switch'][data-part='track'] {
+  position: relative;
+  width: 2.75rem;
+  height: 1.5rem;
+  border-radius: 9999px;
+  background: var(--color-surface-active);
+  transition: background var(--duration-fast);
+}
+
+[data-scope='switch'][data-part='track'][data-state='checked'] {
+  background: var(--color-primary);
+}
+
+[data-scope='switch'][data-part='thumb'] {
+  position: absolute;
+  top: 0.125rem;
+  left: 0.125rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  background: white;
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--duration-fast);
+}
+
+[data-scope='switch'][data-part='thumb'][data-state='checked'] {
+  transform: translateX(1.25rem);
+}
+
+/* ─── Checkbox ─── */
+
+[data-scope='checkbox'][data-part='root'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+}
+
+[data-scope='checkbox'][data-part='root'][data-state='checked'],
+[data-scope='checkbox'][data-part='root'][data-state='indeterminate'] {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+[data-scope='checkbox'][data-part='root'][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-scope='checkbox'][data-part='indicator'] {
+  color: var(--color-text-inverted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-scope='checkbox'][data-part='indicator'][data-state='unchecked'] {
+  display: none;
+}
+
+/* ─── Dialog ─── */
+
+[data-scope='dialog'][data-part='backdrop'] {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: var(--z-dialog);
+  opacity: 0;
+  transition: opacity var(--duration-normal);
+}
+
+[data-scope='dialog'][data-part='backdrop'][data-state='open'] {
+  opacity: 1;
+}
+
+[data-scope='dialog'][data-part='positioner'] {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+  z-index: var(--z-dialog);
+  background: rgba(0, 0, 0, 0.4);
+}
+
+[data-scope='dialog'][data-part='content'] {
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+  padding: var(--space-6);
+  max-width: 32rem;
+  width: 100%;
+  position: relative;
+}
+
+[data-scope='dialog'][data-part='title'] {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin-bottom: var(--space-2);
+}
+
+[data-scope='dialog'][data-part='description'] {
+  color: var(--color-text-muted);
+  margin-bottom: var(--space-4);
+}
+
+[data-scope='dialog'][data-part='close-trigger'] {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  font-size: 1.25rem;
+  line-height: 1;
+  padding: var(--space-1);
+  transition: color var(--duration-fast);
+}
+
+[data-scope='dialog'][data-part='close-trigger']:hover {
+  color: var(--color-text);
+}
+
+/* ─── Tabs ─── */
+
+[data-scope='tabs'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-scope='tabs'][data-part='root'][data-orientation='vertical'] {
+  flex-direction: row;
+}
+
+[data-scope='tabs'][data-part='list'] {
+  display: flex;
+  border-bottom: 1px solid var(--color-border);
+  gap: var(--space-1);
+  position: relative;
+}
+
+[data-scope='tabs'][data-part='list'][aria-orientation='vertical'] {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--color-border);
+}
+
+[data-scope='tabs'][data-part='trigger'] {
+  padding: var(--space-2) var(--space-4);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  transition: all var(--duration-fast);
+}
+
+[data-scope='tabs'][data-part='trigger']:hover {
+  color: var(--color-text);
+}
+
+[data-scope='tabs'][data-part='trigger'][data-state='active'] {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}
+
+[data-scope='tabs'][data-part='trigger'][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-scope='tabs'][data-part='panel'] {
+  padding: var(--space-4);
+}
+
+[data-scope='tabs'][data-part='panel'][hidden] {
+  display: none;
+}
+
+[data-scope='tabs'][data-part='indicator'] {
+  position: absolute;
+  bottom: 0;
+  height: 2px;
+  background: var(--color-primary);
+  transition: all var(--duration-normal) ease;
+  left: var(--indicator-left, 0);
+  width: var(--indicator-width, 0);
+}
+
+/* ─── Toggle ─── */
+
+[data-scope='toggle'][data-part='root'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+}
+
+[data-scope='toggle'][data-part='root']:hover {
+  background: var(--color-surface-hover);
+}
+
+[data-scope='toggle'][data-part='root'][data-state='on'] {
+  background: var(--color-surface-active);
+  border-color: var(--color-border-hover);
+}
+
+[data-scope='toggle'][data-part='root'][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ─── Radio Group ─── */
+
+[data-scope='radio-group'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+[data-scope='radio-group'][data-part='item'] {
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 1.5px solid var(--color-border);
+  border-radius: 9999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all var(--duration-fast);
+  flex-shrink: 0;
+}
+
+[data-scope='radio-group'][data-part='item'][data-state='checked'] {
+  border-color: var(--color-primary);
+}
+
+[data-scope='radio-group'][data-part='item'][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-scope='radio-group'][data-part='indicator'] {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: var(--color-primary);
+  opacity: 0;
+  transition: opacity var(--duration-fast);
+}
+
+[data-scope='radio-group'][data-part='indicator'][data-state='checked'] {
+  opacity: 1;
+}
+
+/* ─── Toggle Group ─── */
+
+[data-scope='toggle-group'][data-part='root'] {
+  display: inline-flex;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+[data-scope='toggle-group'][data-part='item'] {
+  padding: var(--space-2) 0.875rem;
+  border: 0;
+  border-right: 1px solid var(--color-border);
+  background: var(--color-surface);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all var(--duration-fast);
+}
+
+[data-scope='toggle-group'][data-part='item']:last-child {
+  border-right: 0;
+}
+
+[data-scope='toggle-group'][data-part='item'][aria-pressed='true'],
+[data-scope='toggle-group'][data-part='item'][data-state='on'] {
+  background: var(--color-primary);
+  color: var(--color-text-inverted);
+}
+
+[data-scope='toggle-group'][data-part='item']:hover:not([aria-pressed='true']):not(
+    [data-state='on']
+  ) {
+  background: var(--color-surface-hover);
+}
+
+/* ─── Number Input ─── */
+
+[data-scope='number-input'][data-part='root'] {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+[data-scope='number-input'][data-part='input'] {
+  width: 3rem;
+  border: 0;
+  padding: var(--space-1) var(--space-2);
+  text-align: center;
+  font-size: 0.875rem;
+  background: var(--color-surface);
+}
+
+[data-scope='number-input'][data-part='input']:focus {
+  outline: none;
+}
+
+[data-scope='number-input'][data-part='increment'],
+[data-scope='number-input'][data-part='decrement'] {
+  padding: var(--space-1) var(--space-3);
+  border: 0;
+  background: var(--color-surface-muted);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+
+[data-scope='number-input'][data-part='increment']:hover:not(:disabled),
+[data-scope='number-input'][data-part='decrement']:hover:not(:disabled) {
+  background: var(--color-surface-hover);
+}
+
+[data-scope='number-input'][data-part='increment']:disabled,
+[data-scope='number-input'][data-part='decrement']:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ─── Password Input ─── */
+
+[data-scope='password-input'][data-part='root'] {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--color-surface);
+}
+
+[data-scope='password-input'][data-part='input'] {
+  border: 0;
+  padding: var(--space-2) var(--space-3);
+  font-size: 0.875rem;
+  font-family: monospace;
+  width: 12rem;
+}
+
+[data-scope='password-input'][data-part='input']:focus {
+  outline: none;
+}
+
+[data-scope='password-input'][data-part='visibility-trigger'] {
+  padding: var(--space-2) var(--space-3);
+  border: 0;
+  border-left: 1px solid var(--color-border);
+  background: var(--color-surface-muted);
+  font-size: 0.75rem;
+  cursor: pointer;
+  color: var(--color-text-muted);
+}
+
+[data-scope='password-input'][data-part='visibility-trigger']:hover {
+  background: var(--color-surface-hover);
+}
+
+/* ─── Pin Input ─── */
+
+[data-scope='pin-input'][data-part='root'] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+[data-scope='pin-input'][data-part='input'] {
+  width: 2.75rem;
+  height: 2.75rem;
+  text-align: center;
+  font-size: 1.25rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}
+
+[data-scope='pin-input'][data-part='input']:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+  border-color: var(--color-border-focus);
+}
+
+[data-scope='pin-input'][data-part='label'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Tags Input ─── */
+
+[data-scope='tags-input'][data-part='root'] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  padding: var(--space-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+}
+
+[data-scope='tags-input'][data-part='input'] {
+  flex: 1;
+  min-width: 6rem;
+  border: 0;
+  outline: 0;
+  font-size: 0.875rem;
+  background: transparent;
+}
+
+[data-scope='tags-input'][data-part='tag'] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 0.125rem var(--space-2);
+  border-radius: 9999px;
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--color-primary-active);
+  font-size: 0.75rem;
+}
+
+[data-scope='tags-input'][data-part='tag-remove'] {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0 0.125rem;
+  opacity: 0.7;
+}
+
+[data-scope='tags-input'][data-part='tag-remove']:hover {
+  opacity: 1;
+}
+
+/* ─── Rating Group ─── */
+
+[data-scope='rating-group'][data-part='root'] {
+  display: inline-flex;
+  gap: 0.125rem;
+}
+
+[data-scope='rating-group'][data-part='item'] {
+  font-size: 1.5rem;
+  color: var(--color-border);
+  cursor: pointer;
+  transition: color var(--duration-fast);
+}
+
+[data-scope='rating-group'][data-part='item'][data-fill='full'] {
+  color: rgb(250 204 21);
+}
+
+[data-scope='rating-group'][data-part='item'][data-fill='half'] {
+  background: linear-gradient(90deg, rgb(250 204 21) 50%, var(--color-border) 50%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* ─── Avatar ─── */
+
+[data-scope='avatar'][data-part='root'] {
+  position: relative;
+  height: 3rem;
+  width: 3rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: var(--color-surface-active);
+}
+
+[data-scope='avatar'][data-part='image'] {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+[data-scope='avatar'][data-part='fallback'] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+
+/* ─── Pagination ─── */
+
+[data-scope='pagination'][data-part='root'] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+}
+
+[data-scope='pagination'][data-part='item'],
+[data-scope='pagination'][data-part='prev-trigger'],
+[data-scope='pagination'][data-part='next-trigger'] {
+  min-width: 2rem;
+  padding: 0.375rem var(--space-2);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: all var(--duration-fast);
+}
+
+[data-scope='pagination'][data-part='item']:hover:not(:disabled),
+[data-scope='pagination'][data-part='prev-trigger']:hover:not(:disabled),
+[data-scope='pagination'][data-part='next-trigger']:hover:not(:disabled) {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border-hover);
+}
+
+[data-scope='pagination'][data-part='item']:disabled,
+[data-scope='pagination'][data-part='prev-trigger']:disabled,
+[data-scope='pagination'][data-part='next-trigger']:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+[data-scope='pagination'][data-part='item'][aria-current='page'] {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-text-inverted);
+}
+
+[data-scope='pagination'][data-part='ellipsis'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+}
+
+/* ─── Steps ─── */
+
+[data-scope='steps'][data-part='root'] {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+[data-scope='steps'][data-part='item'] {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex: 1;
+}
+
+[data-scope='steps'][data-part='trigger'] {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  border: 1.5px solid var(--color-border);
+  background: var(--color-surface);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-scope='steps'][data-part='trigger'][data-status='current'] {
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-text-inverted);
+}
+
+[data-scope='steps'][data-part='trigger'][data-status='completed'] {
+  background: rgb(34 197 94);
+  border-color: rgb(34 197 94);
+  color: var(--color-text-inverted);
+}
+
+[data-scope='steps'][data-part='trigger']:disabled {
+  cursor: not-allowed;
+}
+
+[data-scope='steps'][data-part='separator'] {
+  flex: 1;
+  height: 2px;
+  background: var(--color-border);
+}
+
+[data-scope='steps'][data-part='separator'][data-status='completed'] {
+  background: rgb(34 197 94);
+}
+
+/* ─── Carousel ─── */
+
+[data-scope='carousel'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+[data-scope='carousel'][data-part='viewport'] {
+  position: relative;
+  height: 8rem;
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+[data-scope='carousel'][data-part='slide'] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-inverted);
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+[data-scope='carousel'][data-part='indicator-group'] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-1);
+}
+
+[data-scope='carousel'][data-part='indicator'] {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  background: var(--color-border);
+  border: 0;
+  cursor: pointer;
+  padding: 0;
+}
+
+[data-scope='carousel'][data-part='indicator'][aria-selected='true'] {
+  background: var(--color-primary);
+}
+
+[data-scope='carousel'][data-part='next-trigger'],
+[data-scope='carousel'][data-part='prev-trigger'] {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--color-text-muted);
+}
+
+[data-scope='carousel'][data-part='next-trigger']:hover,
+[data-scope='carousel'][data-part='prev-trigger']:hover {
+  color: var(--color-text);
+}
+
+/* ─── Tree View ─── */
+
+[data-scope='tree-view'][data-part='root'] {
+  font-size: 0.875rem;
+}
+
+[data-scope='tree-view'][data-part='item'] {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+[data-scope='tree-view'][data-part='item']:hover {
+  background: var(--color-surface-hover);
+}
+
+[data-scope='tree-view'][data-part='item'][data-selected=''] {
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--color-primary-active);
+}
+
+[data-scope='tree-view'][data-part='branch-trigger'] {
+  width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  padding: 0;
+  font-size: 1rem;
+  transition:
+    transform var(--duration-fast),
+    background-color var(--duration-fast);
+}
+
+[data-scope='tree-view'][data-part='branch-trigger']:hover {
+  background: var(--color-surface-active);
+}
+
+[data-scope='tree-view'][data-part='branch-trigger'][data-state='open'] {
+  transform: rotate(90deg);
+}
+
+/* ─── Progress ─── */
+
+[data-scope='progress'][data-part='track'] {
+  position: relative;
+  height: 0.5rem;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: var(--color-surface-active);
+}
+
+[data-scope='progress'][data-part='range'] {
+  height: 100%;
+  border-radius: 9999px;
+  background: var(--color-primary);
+  transition: width 300ms;
+}
+
+[data-scope='progress'][data-part='range'][data-state='indeterminate'] {
+  width: 33% !important;
+  animation: indeterminate 1.5s infinite ease-in-out;
+}
+
+@keyframes indeterminate {
+  0% {
+    margin-left: -33%;
+  }
+  100% {
+    margin-left: 100%;
+  }
+}
+
+[data-scope='progress'][data-part='label'] {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+/* ─── Slider ─── */
+
+[data-scope='slider'][data-part='control'] {
+  position: relative;
+  height: 1.5rem;
+  width: 100%;
+  cursor: pointer;
+  touch-action: none;
+}
+
+[data-scope='slider'][data-part='track'] {
+  position: absolute;
+  top: 50%;
+  height: 0.375rem;
+  width: 100%;
+  transform: translateY(-50%);
+  border-radius: 9999px;
+  background: var(--color-surface-active);
+}
+
+[data-scope='slider'][data-part='range'] {
+  height: 100%;
+  border-radius: 9999px;
+  background: var(--color-primary);
+}
+
+[data-scope='slider'][data-part='thumb'] {
+  top: 50% !important;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 9999px;
+  border: 2px solid var(--color-primary);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-sm);
+  transform: translate(-50%, -50%) !important;
+}
+
+[data-scope='slider'][data-part='thumb']:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+/* ─── Select ─── */
+
+[data-scope='select'][data-part='trigger'] {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  padding: var(--space-2) var(--space-3);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+[data-scope='select'][data-part='trigger']:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+[data-scope='select'][data-part='content'] {
+  max-height: 15rem;
+  min-width: 8rem;
+  overflow: auto;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  padding: var(--space-1);
+  box-shadow: var(--shadow-lg);
+  outline: none;
+}
+
+[data-scope='select'][data-part='item'] {
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  padding: 0.375rem var(--space-2);
+  font-size: 0.875rem;
+}
+
+[data-scope='select'][data-part='item'][data-highlighted=''] {
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--color-primary-active);
+}
+
+[data-scope='select'][data-part='item'][data-state='selected'] {
+  font-weight: 500;
+}
+
+/* ─── Menu ─── */
+
+[data-scope='menu'][data-part='content'] {
+  min-width: 12rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  padding: var(--space-2);
+  box-shadow: var(--shadow-lg);
+  outline: none;
+}
+
+[data-scope='menu'][data-part='item'] {
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  padding: 0.375rem var(--space-2);
+  font-size: 0.875rem;
+}
+
+[data-scope='menu'][data-part='item']:hover {
+  background: var(--color-surface-hover);
+}
+
+[data-scope='menu'][data-part='item'][data-state='highlighted'] {
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--color-primary-active);
+}
+
+/* ─── Context Menu ─── */
+
+[data-scope='context-menu'][data-part='content'] {
+  min-width: 10rem;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  border-radius: var(--radius-md);
+  padding: var(--space-1);
+  box-shadow: var(--shadow-lg);
+  outline: 0;
+}
+
+[data-scope='context-menu'][data-part='item'] {
+  padding: 0.375rem var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+[data-scope='context-menu'][data-part='item']:hover {
+  background: var(--color-surface-hover);
+}
+
+[data-scope='context-menu'][data-part='item'][data-state='highlighted'] {
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--color-primary-active);
+}
+
+/* ─── Combobox ─── */
+
+[data-scope='combobox'][data-part='input'] {
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  font-size: 0.875rem;
+}
+
+[data-scope='combobox'][data-part='input']:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+[data-scope='combobox'][data-part='content'] {
+  max-height: 12rem;
+  overflow-y: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  padding: var(--space-1);
+  box-shadow: var(--shadow-lg);
+}
+
+[data-scope='combobox'][data-part='item'] {
+  padding: 0.375rem var(--space-2);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+[data-scope='combobox'][data-part='item']:hover {
+  background: var(--color-surface-hover);
+}
+
+[data-scope='combobox'][data-part='item'][data-highlighted=''] {
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--color-primary-active);
+}
+
+/* ─── Popover ─── */
+
+[data-scope='popover'][data-part='content'] {
+  min-width: 12rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  padding: var(--space-2);
+  box-shadow: var(--shadow-lg);
+  outline: none;
+}
+
+/* ─── Tooltip ─── */
+
+[data-scope='tooltip'][data-part='content'] {
+  background: var(--color-text);
+  color: var(--color-text-inverted);
+  font-size: 0.75rem;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-md);
+}
+
+/* ─── Hover Card ─── */
+
+[data-scope='hover-card'][data-part='content'] {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 0.875rem;
+  box-shadow: var(--shadow-lg);
+  max-width: 18rem;
+}
+
+/* ─── Drawer ─── */
+
+[data-scope='drawer'][data-part='positioner'] {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-dialog);
+  background: rgba(0, 0, 0, 0.4);
+}
+
+[data-scope='drawer'][data-part='content'] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 20rem;
+  background: var(--color-surface);
+  padding: var(--space-6);
+  box-shadow: var(--shadow-lg);
+  outline: none;
+}
+
+[data-scope='drawer'][data-part='title'] {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+[data-scope='drawer'][data-part='description'] {
+  margin-top: var(--space-2);
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+[data-scope='drawer'][data-part='close-trigger'] {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-muted);
+}
+
+[data-scope='drawer'][data-part='close-trigger']:hover {
+  color: var(--color-text);
+}
+
+/* ─── Toast ─── */
+
+[data-scope='toast'][data-part='region'] {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: var(--z-dialog);
+  display: flex;
+  width: 20rem;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+[data-scope='toast'][data-part='root'] {
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-lg);
+  border: 1px solid var(--color-border);
+}
+
+[data-scope='toast'][data-part='root'][data-type='success'] {
+  background: rgb(240 253 244);
+  border-color: rgb(187 247 208);
+}
+
+[data-scope='toast'][data-part='root'][data-type='error'] {
+  background: rgb(254 242 242);
+  border-color: rgb(254 202 202);
+}
+
+[data-scope='toast'][data-part='title'] {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+[data-scope='toast'][data-part='description'] {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+/* ─── Date Picker ─── */
+
+[data-scope='date-picker'][data-part='root'] {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3);
+}
+
+[data-scope='date-picker'][data-part='grid'] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.125rem;
+}
+
+[data-scope='date-picker'][data-part='day-cell'] {
+  aspect-ratio: 1;
+  border: 0;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+[data-scope='date-picker'][data-part='day-cell']:hover {
+  background: var(--color-surface-hover);
+}
+
+[data-scope='date-picker'][data-part='day-cell'][data-in-month='']:not([data-selected='']) {
+  color: var(--color-text);
+}
+
+[data-scope='date-picker'][data-part='day-cell']:not([data-in-month='']) {
+  color: var(--color-border);
+}
+
+[data-scope='date-picker'][data-part='day-cell'][data-today=''] {
+  font-weight: 700;
+}
+
+[data-scope='date-picker'][data-part='day-cell'][data-selected=''] {
+  background: var(--color-primary);
+  color: var(--color-text-inverted);
+}
+
+[data-scope='date-picker'][data-part='day-cell'][data-disabled=''] {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+[data-scope='date-picker'][data-part='prev-month-trigger'],
+[data-scope='date-picker'][data-part='next-month-trigger'] {
+  padding: var(--space-1) var(--space-2);
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-sm);
+  font-size: 1rem;
+}
+
+[data-scope='date-picker'][data-part='prev-month-trigger']:hover,
+[data-scope='date-picker'][data-part='next-month-trigger']:hover {
+  background: var(--color-surface-hover);
+}
+
+/* ─── Time Picker ─── */
+
+[data-scope='time-picker'][data-part='root'] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-1);
+  background: var(--color-surface);
+}
+
+[data-scope='time-picker'][data-part='hours-input'],
+[data-scope='time-picker'][data-part='minutes-input'] {
+  width: 2.5rem;
+  border: 0;
+  text-align: center;
+  font-size: 1.125rem;
+  font-variant-numeric: tabular-nums;
+  outline: 0;
+  background: transparent;
+}
+
+[data-scope='time-picker'][data-part='hours-input']::-webkit-inner-spin-button,
+[data-scope='time-picker'][data-part='minutes-input']::-webkit-inner-spin-button,
+[data-scope='time-picker'][data-part='hours-input']::-webkit-outer-spin-button,
+[data-scope='time-picker'][data-part='minutes-input']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+[data-scope='time-picker'][data-part='period-trigger'] {
+  padding: var(--space-1) var(--space-2);
+  border: 0;
+  background: var(--color-surface-hover);
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+
+/* ─── Color Picker ─── */
+
+[data-scope='color-picker'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+[data-scope='color-picker'][data-part='swatch'] {
+  width: 3rem;
+  height: 3rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+}
+
+[data-scope='color-picker'][data-part='hex-input'] {
+  flex: 1;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-family: monospace;
+}
+
+[data-scope='color-picker'][data-part='hue-slider'],
+[data-scope='color-picker'][data-part='saturation-slider'],
+[data-scope='color-picker'][data-part='lightness-slider'] {
+  flex: 1;
+  height: 0.75rem;
+  appearance: none;
+  -webkit-appearance: none;
+  border-radius: var(--radius-md);
+  outline: none;
+  cursor: pointer;
+  border: 1px solid var(--color-border);
+}
+
+[data-scope='color-picker'][data-part='hue-slider']::-webkit-slider-thumb,
+[data-scope='color-picker'][data-part='saturation-slider']::-webkit-slider-thumb,
+[data-scope='color-picker'][data-part='lightness-slider']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  background: var(--color-surface);
+  border: 2px solid var(--color-primary);
+  cursor: grab;
+  box-shadow: var(--shadow-sm);
+}
+
+[data-scope='color-picker'][data-part='hue-slider'] {
+  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+}
+
+/* ─── Editable ─── */
+
+[data-scope='editable'][data-part='root'] {
+  display: inline-block;
+}
+
+[data-scope='editable'][data-part='preview'] {
+  padding: 0.375rem var(--space-2);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  font-size: 0.875rem;
+}
+
+[data-scope='editable'][data-part='preview']:hover {
+  background: var(--color-surface-hover);
+}
+
+[data-scope='editable'][data-part='input'] {
+  padding: 0.375rem var(--space-2);
+  border: 1px solid var(--color-border-focus);
+  border-radius: var(--radius-sm);
+  font-size: 0.875rem;
+  outline: 0;
+}
+
+/* ─── Clipboard ─── */
+
+[data-scope='clipboard'][data-part='root'] {
+  display: flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+[data-scope='clipboard'][data-part='input'] {
+  flex: 1;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-muted);
+  font-family: monospace;
+  font-size: 0.75rem;
+}
+
+/* ─── File Upload ─── */
+
+[data-scope='file-upload'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+[data-scope='file-upload'][data-part='dropzone'] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-6);
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+  background: var(--color-surface-muted);
+  cursor: pointer;
+}
+
+[data-scope='file-upload'][data-part='dropzone']:hover {
+  border-color: var(--color-border-hover);
+  background: var(--color-surface-hover);
+}
+
+[data-scope='file-upload'][data-part='dropzone'][data-dragging=''] {
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+
+[data-scope='file-upload'][data-part='label'] {
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+[data-scope='file-upload'][data-part='hidden-input'] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[data-scope='file-upload'][data-part='item-group'] {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+/* ─── Splitter ─── */
+
+[data-scope='splitter'][data-part='root'] {
+  display: flex;
+  height: 5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+[data-scope='splitter'][data-part='root'][data-dragging=''] {
+  user-select: none;
+}
+
+[data-scope='splitter'][data-part='primary-panel'],
+[data-scope='splitter'][data-part='secondary-panel'] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-surface-muted);
+  color: var(--color-text-muted);
+  font-size: 0.875rem;
+}
+
+[data-scope='splitter'][data-part='resize-trigger'] {
+  width: 4px;
+  background: var(--color-border);
+  cursor: col-resize;
+}
+
+[data-scope='splitter'][data-part='resize-trigger']:hover {
+  background: var(--color-border-hover);
+}
+
+[data-scope='splitter'][data-part='resize-trigger']:focus {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+/* ─── Listbox ─── */
+
+[data-scope='listbox'][data-part='root'] {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  overflow: auto;
+  background: var(--color-surface);
+}
+
+[data-scope='listbox'][data-part='item'] {
+  padding: 0.375rem var(--space-2);
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+[data-scope='listbox'][data-part='item']:hover {
+  background: var(--color-surface-hover);
+}
+
+[data-scope='listbox'][data-part='item'][data-state='checked'] {
+  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
+  color: var(--color-primary-active);
+}
+
+/* ─── Buttons ─── */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-4);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: 0;
+  transition: background-color var(--duration-fast);
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-text-inverted);
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.btn-secondary {
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.btn-secondary:hover {
+  background: var(--color-surface-hover);
+}
+
+.btn-danger {
+  background: var(--color-destructive);
+  color: var(--color-text-inverted);
+}
+
+.btn-danger:hover {
+  background: var(--color-destructive-hover);
+}
+
+.btn.text-xs {
+  font-size: 0.75rem;
+  padding: 0.375rem 0.75rem;
+}
+
+/* ─── Confirm Dialog (pattern) ─── */
+
+.confirm-dialog {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: 28rem;
+  border-radius: var(--radius-lg);
+  background: var(--color-surface);
+  padding: var(--space-6);
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+}
+
+.confirm-dialog__actions {
+  margin-top: var(--space-6);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+}
+
+/* ─── Marquee ─── */
+
+@keyframes marquee-scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+/* ─── Utilities ─── */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ─── Angle Slider ─── */
+
+[data-scope='angle-slider'][data-part='control'] {
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+}
+
+/* ─── Animations ─── */
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scale-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes slide-in-from-top {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes collapse-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--height);
+    opacity: 1;
+  }
+}
+
+@keyframes collapse-up {
+  from {
+    height: var(--height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+/* Dialog / Drawer enter */
+[data-scope='dialog'][data-part='backdrop'][data-state='open'],
+[data-scope='drawer'][data-part='backdrop'][data-state='open'] {
+  animation: fade-in var(--duration-normal) ease-out;
+}
+
+[data-scope='dialog'][data-part='content'][data-state='open'] {
+  animation: scale-in var(--duration-normal) ease-out;
+}
+
+[data-scope='drawer'][data-part='content'][data-state='open'][data-placement='right'] {
+  animation: slide-in-from-right var(--duration-normal) ease-out;
+}
+
+[data-scope='drawer'][data-part='content'][data-state='open'][data-placement='left'] {
+  animation: slide-in-from-left var(--duration-normal) ease-out;
+}
+
+/* Popover / Tooltip / Hover Card enter */
+[data-scope='popover'][data-part='content'][data-state='open'],
+[data-scope='tooltip'][data-part='content'][data-state='open'],
+[data-scope='hover-card'][data-part='content'][data-state='open'] {
+  animation: scale-in var(--duration-fast) ease-out;
+}
+
+/* Collapsible enter/exit */
+[data-scope='collapsible'][data-part='content'][data-state='open'] {
+  animation: collapse-down var(--duration-normal) ease-out;
+}
+
+[data-scope='collapsible'][data-part='content'][data-state='closed'] {
+  animation: collapse-up var(--duration-normal) ease-out;
+}
+
+/* Toast enter */
+[data-scope='toast'][data-part='root'][data-state='open'] {
+  animation: slide-in-from-bottom var(--duration-normal) ease-out;
+}