@donotdev/ui 0.0.4 → 0.0.6

package/dist/dndev.css

@@ -1069,12 +1069,13 @@ em {
   }
 
 .dndev-surface[data-variant='glass'] {
-    background: color-mix(in oklab, var(--card) 40%, transparent);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    background: color-mix(in oklab, var(--card) 55%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
     border: var(--border-hairline) solid
-      color-mix(in oklab, var(--card-foreground) 15%, transparent);
-    box-shadow: var(--shadow-lg);
+      color-mix(in oklab, var(--card-foreground) 25%, transparent);
+    box-shadow: var(--shadow-lg),
+      inset 0 1px 0 0 color-mix(in oklab, var(--card-foreground) 10%, transparent);
   }
 
 /* Separator style */
@@ -2144,6 +2145,7 @@ em {
   background: transparent;
   color: inherit;
   font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
 }
 
 .dndev-interactive[data-role='accordion-trigger']:hover {
@@ -2168,6 +2170,7 @@ em {
   transition: all var(--dur-fast) var(--ease-in-out);
   width: 100%;
   min-width: 0;
+  text-align: start;
 }
 
 .dndev-accordion-content[data-state='closed'] {
@@ -2900,8 +2903,6 @@ em {
 /* packages/components/src/atomic/CallToAction/CallToAction.css */
 
 .dndev-cta {
-  /* Default gradient */
-  background: linear-gradient(to right, var(--secondary), var(--background));
   color: var(--foreground);
   /* Padding for background - vertical only, horizontal handled by content */
   padding-block: var(--gap-lg);
@@ -2909,29 +2910,32 @@ em {
 
 /* Tone variants - leverage existing data-tone system */
 
+/* Ghost (default) - no background */
+
+.dndev-cta[data-tone='ghost'],
+.dndev-cta:not([data-tone]) {
+  background: transparent;
+}
+
 .dndev-cta[data-tone='base'] {
-  background: linear-gradient(to right, var(--secondary), var(--background));
+  background: var(--background);
 }
 
 .dndev-cta[data-tone='muted'] {
-  background: linear-gradient(to right, var(--muted), var(--background));
+  background: var(--muted);
 }
 
-.dndev-cta[data-tone='accent'] {
-  background: linear-gradient(
-    to right,
-    color-mix(in oklab, var(--accent) 10%, transparent),
-    var(--background)
-  );
+.dndev-cta[data-tone='elevated'] {
+  background: var(--background);
 }
 
 .dndev-cta[data-tone='contrast'] {
-  background: linear-gradient(to right, var(--foreground), var(--background));
+  background: var(--foreground);
   color: var(--background);
 }
 
-.dndev-cta[data-tone='elevated'] {
-  background: linear-gradient(to right, var(--secondary), var(--background));
+.dndev-cta[data-tone='accent'] {
+  background: color-mix(in oklab, var(--accent) 5%, transparent);
 }
 
 .dndev-cta-content {
@@ -2972,10 +2976,14 @@ em {
   flex-direction: column;
   gap: var(--gap-md);
   justify-content: center;
-
-  /* Button contrast overrides */
 }
 
+.dndev-cta-actions .dndev-interactive {
+    min-width: 150px;
+  }
+
+/* Button contrast overrides */
+
 .dndev-cta-actions .dndev-interactive[data-variant='primary'] {
     background: var(--foreground);
     color: var(--background);
@@ -3038,11 +3046,12 @@ em {
   word-wrap: break-word;
 }
 
-.dndev-card-subtitle {
+.dndev-surface .dndev-card-subtitle {
   margin-top: 0;
   margin-bottom: 0;
   min-width: 0;
   word-wrap: break-word;
+  color: color-mix(in oklab, var(--card-foreground) 70%, transparent);
 }
 
 /* packages/components/src/atomic/Checkbox/Checkbox.css */
@@ -3133,6 +3142,203 @@ em {
   }
 }
 
+/* packages/components/src/atomic/Collapsible/Collapsible.css */
+
+.dndev-collapsible {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dndev-collapsible-content {
+  overflow: hidden;
+  width: 100%;
+}
+
+.dndev-collapsible-content[data-state='open'] {
+  animation: slideDown var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-collapsible-content[data-state='closed'] {
+  animation: slideUp var(--dur-normal) var(--ease-in-out);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* packages/components/src/atomic/Combobox/Combobox.css */
+
+.dndev-combobox-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+}
+
+.dndev-combobox-trigger button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.dndev-combobox-placeholder {
+  opacity: var(--opacity-muted);
+}
+
+.dndev-combobox-trigger-icons {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-tight);
+  margin-inline-start: auto;
+}
+
+.dndev-combobox-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: var(--opacity-muted);
+  transition: opacity var(--dur-fast) var(--ease-in-out);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.dndev-combobox-clear:hover,
+.dndev-combobox-clear:focus {
+  opacity: 1;
+  outline: none;
+}
+
+.dndev-combobox-clear svg {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+
+.dndev-combobox-chevron {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  opacity: var(--opacity-muted);
+  transition: transform var(--dur-fast) var(--ease-in-out);
+}
+
+[data-state='open'] .dndev-combobox-chevron {
+  transform: rotate(180deg);
+}
+
+.dndev-combobox-loading-container {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.dndev-combobox-loading-spinner {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  border-radius: var(--radius-full);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+}
+
+.dndev-combobox-content {
+  width: var(--radix-popover-trigger-width);
+  min-width: var(--radix-popover-trigger-width);
+  max-height: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.dndev-combobox-search-container {
+  padding: var(--gap-sm);
+  border-bottom: var(--border-width) solid var(--line-2);
+}
+
+.dndev-combobox-search-input {
+  width: 100%;
+}
+
+.dndev-combobox-list {
+  overflow-y: auto;
+  padding: var(--gap-tight);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-none);
+}
+
+.dndev-combobox-option {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--gap-sm) var(--gap-md);
+  cursor: pointer;
+  border-radius: var(--radius-interactive);
+  transition: background-color var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-combobox-option:disabled {
+  opacity: var(--opacity-muted);
+  cursor: not-allowed;
+}
+
+.dndev-combobox-option-highlighted:not(:disabled) {
+  background-color: var(--accent);
+  opacity: var(--opacity-strong);
+}
+
+.dndev-combobox-option-selected {
+  font-weight: var(--font-weight-medium);
+}
+
+.dndev-combobox-option-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-tight);
+  flex: 1;
+}
+
+.dndev-combobox-option-label {
+  font-size: var(--font-size-sm);
+  color: var(--foreground);
+}
+
+.dndev-combobox-option-description {
+  font-size: var(--font-size-xs);
+  color: var(--muted-foreground);
+}
+
+.dndev-combobox-option-check {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  color: currentColor;
+  flex-shrink: 0;
+}
+
+.dndev-combobox-empty {
+  padding: var(--gap-lg) var(--gap-md);
+  text-align: center;
+  font-size: var(--font-size-sm);
+  color: var(--muted-foreground);
+}
+
 /* packages/components/src/atomic/DualCard/DualCard.css */
 
 .dndev-dual-card {
@@ -4248,6 +4454,10 @@ em {
   text-align: start; /* Always start-aligned, even when parent is centered */
 }
 
+.dndev-list[data-gap='none'] {
+    gap: var(--gap-none);
+  }
+
 .dndev-list[data-gap='tight'] {
     gap: var(--gap-sm);
   }
@@ -4977,17 +5187,17 @@ em {
   margin-block-end: var(--gap-md);
 }
 
-.dndev-section-full-width[data-text-align='start'] .dndev-section-content {
-    text-align: start;
-  }
+.dndev-section-full-width[data-text-align='start'] .dndev-section-title {
+  text-align: start;
+}
 
-.dndev-section-full-width[data-text-align='center'] .dndev-section-content {
-    text-align: center;
-  }
+.dndev-section-full-width[data-text-align='center'] .dndev-section-title {
+  text-align: center;
+}
 
-.dndev-section-full-width[data-text-align='end'] .dndev-section-content {
-    text-align: end;
-  }
+.dndev-section-full-width[data-text-align='end'] .dndev-section-title {
+  text-align: end;
+}
 
 /* packages/components/src/atomic/Separator/Separator.css */
 
@@ -5839,7 +6049,7 @@ em {
   display: block;
   width: 1.25rem;
   height: 1.25rem;
-  background-color: var(--background);
+  background-color: var(--foreground);
   border-radius: 9999px;
   box-shadow: var(--shadow-md);
   transition: transform var(--dur-normal) var(--ease-in-out);
@@ -6140,6 +6350,123 @@ em {
     display: none;
   }
 
+/* packages/components/src/atomic/Tag/Tag.css */
+
+.dndev-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition: all var(--dur-fast) var(--ease-in-out);
+
+  /* Default variant */
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.dndev-tag .dndev-tag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-left: 2px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    transition: opacity var(--dur-fast);
+  }
+
+:is(.dndev-tag .dndev-tag-remove):hover {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+:is(.dndev-tag .dndev-tag-remove):focus-visible {
+      outline: 2px solid var(--ring);
+    }
+
+.dndev-tag .dndev-tag-remove-icon {
+    width: 10px;
+    height: 10px;
+  }
+
+/* Sizes */
+
+.dndev-tag-sm {
+  padding: 0.125rem 0.5rem;
+  font-size: var(--font-size-xs);
+  height: 20px;
+}
+
+.dndev-tag-md {
+  padding: 0.25rem 0.75rem;
+  font-size: var(--font-size-sm);
+  height: 24px;
+}
+
+.dndev-tag-lg {
+  padding: 0.375rem 0.875rem;
+  font-size: var(--font-size-base);
+  height: 32px;
+}
+
+/* Variants */
+
+.dndev-tag-outline {
+  background-color: transparent;
+  border-color: var(--border);
+  color: var(--foreground);
+}
+
+.dndev-tag-accent {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+  border-color: transparent;
+}
+
+/* Interactive States */
+
+.dndev-tag-interactive {
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.dndev-tag-interactive:hover {
+    opacity: 0.8;
+  }
+
+.dndev-tag-interactive:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+.dndev-tag-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.dndev-tag-sm .dndev-tag-remove-icon {
+    width: 8px;
+    height: 8px;
+  }
+
+.dndev-tag-lg .dndev-tag-remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+
 /* packages/components/src/atomic/Text/Text.css */
 
 .dndev-text-base[data-text-align='start'] {
@@ -6161,7 +6488,7 @@ em {
 }
 
 .dndev-text-base[data-variant='default'] {
-    color: var(--foreground);
+    color: inherit;
   }
 
 .dndev-text-base[data-variant='muted'] {
@@ -6221,7 +6548,6 @@ em {
 .dndev-text-base[data-level='h4'] {
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
-    color: var(--muted-foreground);
   }
 
 .dndev-text-base[data-level='body'] {
@@ -6445,7 +6771,7 @@ em {
 
 .dndev-toggle-group .dndev-interactive {
     border: none;
-    border-radius: calc(var(--radius) - 2px);
+    border-radius: var(--radius-interactive);
     background-color: transparent !important;
     min-height: auto;
     padding: var(--gap-sm) var(--gap-md);
@@ -6585,6 +6911,14 @@ em {
     display: block;
   }
 
+/* SVG placeholder - zero bytes, instant render */
+
+.dndev-video-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 /* Play button overlay */
 
 .dndev-video-play-overlay {

package/dist/internal/layout/DnDevLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DnDevLayout.d.ts","sourceRoot":"","sources":["../../../src/internal/layout/DnDevLayout.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAIV,YAAY,EACb,MAAM,gBAAgB,CAAC;AA2CxB,UAAU,yBAAyB;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,GAAI,kCAIzB,yBAAyB,4CA4T3B,CAAC"}
+{"version":3,"file":"DnDevLayout.d.ts","sourceRoot":"","sources":["../../../src/internal/layout/DnDevLayout.tsx"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAIV,YAAY,EACb,MAAM,gBAAgB,CAAC;AA2CxB,UAAU,yBAAyB;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW,GAAI,kCAIzB,yBAAyB,4CAsT3B,CAAC"}

package/dist/internal/layout/DnDevLayout.js

@@ -247,9 +247,5 @@ export const DnDevLayout = ({ children, layout, className, }) => {
         };
         startTransition(updateDOM);
     }, [effectivePreset]);
-    return (_jsxs("div", { className: cn('dndev-layout', className), children: [resolvedHeader, resolvedSidebar, _jsxs("main", { ref: mainRef, role: "main", className: "main", children: [breadcrumbs !== false && (_jsx("div", { className: "breadcrumbs-container", children: _jsx(Breadcrumbs, { variant: breadcrumbs === 'smart'
-                                ? 'smart'
-                                : breadcrumbs === 'always'
-                                    ? 'default'
-                                    : 'smart' }) })), isDev() && (_jsx(Suspense, { fallback: null, children: _jsx(DebugTools, {}) })), _jsx(Stack, { flex: "1", className: "dndev-min-h-0", children: content }, pathname)] }), resolvedFooter, resolvedMergedBar, _jsx(GoToWrapper, {})] }));
+    return (_jsxs("div", { className: cn('dndev-layout', className), children: [resolvedHeader, resolvedSidebar, _jsxs("main", { ref: mainRef, role: "main", className: "main", children: [breadcrumbs !== 'never' && (_jsx("div", { className: "breadcrumbs-container", children: _jsx(Breadcrumbs, { variant: breadcrumbs === 'always' ? 'default' : 'smart' }) })), isDev() && (_jsx(Suspense, { fallback: null, children: _jsx(DebugTools, {}) })), _jsx(Stack, { flex: "1", className: "dndev-min-h-0", children: content }, pathname)] }), resolvedFooter, resolvedMergedBar, _jsx(GoToWrapper, {})] }));
 };

package/dist/styles/index.css

@@ -1065,12 +1065,13 @@ em {
   }
 
 .dndev-surface[data-variant='glass'] {
-    background: color-mix(in oklab, var(--card) 40%, transparent);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
+    background: color-mix(in oklab, var(--card) 55%, transparent);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
     border: var(--border-hairline) solid
-      color-mix(in oklab, var(--card-foreground) 15%, transparent);
-    box-shadow: var(--shadow-lg);
+      color-mix(in oklab, var(--card-foreground) 25%, transparent);
+    box-shadow: var(--shadow-lg),
+      inset 0 1px 0 0 color-mix(in oklab, var(--card-foreground) 10%, transparent);
   }
 
 /* Separator style */
@@ -2140,6 +2141,7 @@ em {
   background: transparent;
   color: inherit;
   font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
 }
 
 .dndev-interactive[data-role='accordion-trigger']:hover {
@@ -2164,6 +2166,7 @@ em {
   transition: all var(--dur-fast) var(--ease-in-out);
   width: 100%;
   min-width: 0;
+  text-align: start;
 }
 
 .dndev-accordion-content[data-state='closed'] {
@@ -2896,8 +2899,6 @@ em {
 /* packages/components/src/atomic/CallToAction/CallToAction.css */
 
 .dndev-cta {
-  /* Default gradient */
-  background: linear-gradient(to right, var(--secondary), var(--background));
   color: var(--foreground);
   /* Padding for background - vertical only, horizontal handled by content */
   padding-block: var(--gap-lg);
@@ -2905,29 +2906,32 @@ em {
 
 /* Tone variants - leverage existing data-tone system */
 
+/* Ghost (default) - no background */
+
+.dndev-cta[data-tone='ghost'],
+.dndev-cta:not([data-tone]) {
+  background: transparent;
+}
+
 .dndev-cta[data-tone='base'] {
-  background: linear-gradient(to right, var(--secondary), var(--background));
+  background: var(--background);
 }
 
 .dndev-cta[data-tone='muted'] {
-  background: linear-gradient(to right, var(--muted), var(--background));
+  background: var(--muted);
 }
 
-.dndev-cta[data-tone='accent'] {
-  background: linear-gradient(
-    to right,
-    color-mix(in oklab, var(--accent) 10%, transparent),
-    var(--background)
-  );
+.dndev-cta[data-tone='elevated'] {
+  background: var(--background);
 }
 
 .dndev-cta[data-tone='contrast'] {
-  background: linear-gradient(to right, var(--foreground), var(--background));
+  background: var(--foreground);
   color: var(--background);
 }
 
-.dndev-cta[data-tone='elevated'] {
-  background: linear-gradient(to right, var(--secondary), var(--background));
+.dndev-cta[data-tone='accent'] {
+  background: color-mix(in oklab, var(--accent) 5%, transparent);
 }
 
 .dndev-cta-content {
@@ -2968,10 +2972,14 @@ em {
   flex-direction: column;
   gap: var(--gap-md);
   justify-content: center;
-
-  /* Button contrast overrides */
 }
 
+.dndev-cta-actions .dndev-interactive {
+    min-width: 150px;
+  }
+
+/* Button contrast overrides */
+
 .dndev-cta-actions .dndev-interactive[data-variant='primary'] {
     background: var(--foreground);
     color: var(--background);
@@ -3034,11 +3042,12 @@ em {
   word-wrap: break-word;
 }
 
-.dndev-card-subtitle {
+.dndev-surface .dndev-card-subtitle {
   margin-top: 0;
   margin-bottom: 0;
   min-width: 0;
   word-wrap: break-word;
+  color: color-mix(in oklab, var(--card-foreground) 70%, transparent);
 }
 
 /* packages/components/src/atomic/Checkbox/Checkbox.css */
@@ -3129,6 +3138,203 @@ em {
   }
 }
 
+/* packages/components/src/atomic/Collapsible/Collapsible.css */
+
+.dndev-collapsible {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.dndev-collapsible-content {
+  overflow: hidden;
+  width: 100%;
+}
+
+.dndev-collapsible-content[data-state='open'] {
+  animation: slideDown var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-collapsible-content[data-state='closed'] {
+  animation: slideUp var(--dur-normal) var(--ease-in-out);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* packages/components/src/atomic/Combobox/Combobox.css */
+
+.dndev-combobox-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+}
+
+.dndev-combobox-trigger button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.dndev-combobox-placeholder {
+  opacity: var(--opacity-muted);
+}
+
+.dndev-combobox-trigger-icons {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-tight);
+  margin-inline-start: auto;
+}
+
+.dndev-combobox-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: var(--opacity-muted);
+  transition: opacity var(--dur-fast) var(--ease-in-out);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.dndev-combobox-clear:hover,
+.dndev-combobox-clear:focus {
+  opacity: 1;
+  outline: none;
+}
+
+.dndev-combobox-clear svg {
+  width: var(--icon-sm);
+  height: var(--icon-sm);
+}
+
+.dndev-combobox-chevron {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  opacity: var(--opacity-muted);
+  transition: transform var(--dur-fast) var(--ease-in-out);
+}
+
+[data-state='open'] .dndev-combobox-chevron {
+  transform: rotate(180deg);
+}
+
+.dndev-combobox-loading-container {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-sm);
+}
+
+.dndev-combobox-loading-spinner {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  border-radius: var(--radius-full);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+}
+
+.dndev-combobox-content {
+  width: var(--radix-popover-trigger-width);
+  min-width: var(--radix-popover-trigger-width);
+  max-height: 300px;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+}
+
+.dndev-combobox-search-container {
+  padding: var(--gap-sm);
+  border-bottom: var(--border-width) solid var(--line-2);
+}
+
+.dndev-combobox-search-input {
+  width: 100%;
+}
+
+.dndev-combobox-list {
+  overflow-y: auto;
+  padding: var(--gap-tight);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-none);
+}
+
+.dndev-combobox-option {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--gap-sm) var(--gap-md);
+  cursor: pointer;
+  border-radius: var(--radius-interactive);
+  transition: background-color var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-combobox-option:disabled {
+  opacity: var(--opacity-muted);
+  cursor: not-allowed;
+}
+
+.dndev-combobox-option-highlighted:not(:disabled) {
+  background-color: var(--accent);
+  opacity: var(--opacity-strong);
+}
+
+.dndev-combobox-option-selected {
+  font-weight: var(--font-weight-medium);
+}
+
+.dndev-combobox-option-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-tight);
+  flex: 1;
+}
+
+.dndev-combobox-option-label {
+  font-size: var(--font-size-sm);
+  color: var(--foreground);
+}
+
+.dndev-combobox-option-description {
+  font-size: var(--font-size-xs);
+  color: var(--muted-foreground);
+}
+
+.dndev-combobox-option-check {
+  width: var(--icon-md);
+  height: var(--icon-md);
+  color: currentColor;
+  flex-shrink: 0;
+}
+
+.dndev-combobox-empty {
+  padding: var(--gap-lg) var(--gap-md);
+  text-align: center;
+  font-size: var(--font-size-sm);
+  color: var(--muted-foreground);
+}
+
 /* packages/components/src/atomic/DualCard/DualCard.css */
 
 .dndev-dual-card {
@@ -4244,6 +4450,10 @@ em {
   text-align: start; /* Always start-aligned, even when parent is centered */
 }
 
+.dndev-list[data-gap='none'] {
+    gap: var(--gap-none);
+  }
+
 .dndev-list[data-gap='tight'] {
     gap: var(--gap-sm);
   }
@@ -4973,17 +5183,17 @@ em {
   margin-block-end: var(--gap-md);
 }
 
-.dndev-section-full-width[data-text-align='start'] .dndev-section-content {
-    text-align: start;
-  }
+.dndev-section-full-width[data-text-align='start'] .dndev-section-title {
+  text-align: start;
+}
 
-.dndev-section-full-width[data-text-align='center'] .dndev-section-content {
-    text-align: center;
-  }
+.dndev-section-full-width[data-text-align='center'] .dndev-section-title {
+  text-align: center;
+}
 
-.dndev-section-full-width[data-text-align='end'] .dndev-section-content {
-    text-align: end;
-  }
+.dndev-section-full-width[data-text-align='end'] .dndev-section-title {
+  text-align: end;
+}
 
 /* packages/components/src/atomic/Separator/Separator.css */
 
@@ -5835,7 +6045,7 @@ em {
   display: block;
   width: 1.25rem;
   height: 1.25rem;
-  background-color: var(--background);
+  background-color: var(--foreground);
   border-radius: 9999px;
   box-shadow: var(--shadow-md);
   transition: transform var(--dur-normal) var(--ease-in-out);
@@ -6136,6 +6346,123 @@ em {
     display: none;
   }
 
+/* packages/components/src/atomic/Tag/Tag.css */
+
+.dndev-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-xs);
+  border-radius: var(--radius-full);
+  border: 1px solid transparent;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  transition: all var(--dur-fast) var(--ease-in-out);
+
+  /* Default variant */
+  background-color: var(--secondary);
+  color: var(--secondary-foreground);
+}
+
+.dndev-tag .dndev-tag-remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    margin-left: 2px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    transition: opacity var(--dur-fast);
+  }
+
+:is(.dndev-tag .dndev-tag-remove):hover {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+:is(.dndev-tag .dndev-tag-remove):focus-visible {
+      outline: 2px solid var(--ring);
+    }
+
+.dndev-tag .dndev-tag-remove-icon {
+    width: 10px;
+    height: 10px;
+  }
+
+/* Sizes */
+
+.dndev-tag-sm {
+  padding: 0.125rem 0.5rem;
+  font-size: var(--font-size-xs);
+  height: 20px;
+}
+
+.dndev-tag-md {
+  padding: 0.25rem 0.75rem;
+  font-size: var(--font-size-sm);
+  height: 24px;
+}
+
+.dndev-tag-lg {
+  padding: 0.375rem 0.875rem;
+  font-size: var(--font-size-base);
+  height: 32px;
+}
+
+/* Variants */
+
+.dndev-tag-outline {
+  background-color: transparent;
+  border-color: var(--border);
+  color: var(--foreground);
+}
+
+.dndev-tag-accent {
+  background-color: var(--accent);
+  color: var(--accent-foreground);
+  border-color: transparent;
+}
+
+/* Interactive States */
+
+.dndev-tag-interactive {
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.dndev-tag-interactive:hover {
+    opacity: 0.8;
+  }
+
+.dndev-tag-interactive:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+.dndev-tag-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.dndev-tag-sm .dndev-tag-remove-icon {
+    width: 8px;
+    height: 8px;
+  }
+
+.dndev-tag-lg .dndev-tag-remove-icon {
+    width: 12px;
+    height: 12px;
+  }
+
 /* packages/components/src/atomic/Text/Text.css */
 
 .dndev-text-base[data-text-align='start'] {
@@ -6157,7 +6484,7 @@ em {
 }
 
 .dndev-text-base[data-variant='default'] {
-    color: var(--foreground);
+    color: inherit;
   }
 
 .dndev-text-base[data-variant='muted'] {
@@ -6217,7 +6544,6 @@ em {
 .dndev-text-base[data-level='h4'] {
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
-    color: var(--muted-foreground);
   }
 
 .dndev-text-base[data-level='body'] {
@@ -6441,7 +6767,7 @@ em {
 
 .dndev-toggle-group .dndev-interactive {
     border: none;
-    border-radius: calc(var(--radius) - 2px);
+    border-radius: var(--radius-interactive);
     background-color: transparent !important;
     min-height: auto;
     padding: var(--gap-sm) var(--gap-md);
@@ -6581,6 +6907,14 @@ em {
     display: block;
   }
 
+/* SVG placeholder - zero bytes, instant render */
+
+.dndev-video-placeholder {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 /* Play button overlay */
 
 .dndev-video-play-overlay {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
@@ -53,14 +53,14 @@
     "react-hook-form": "^7.68.0"
   },
   "peerDependencies": {
-    "@donotdev/adv-comps": "0.0.4",
-    "@donotdev/auth": "0.0.4",
-    "@donotdev/billing": "0.0.4",
-    "@donotdev/components": "0.0.4",
-    "@donotdev/core": "0.0.4",
-    "@donotdev/crud": "0.0.4",
-    "@donotdev/firebase": "0.0.4",
-    "@donotdev/oauth": "0.0.4",
+    "@donotdev/adv-comps": "0.0.6",
+    "@donotdev/auth": "0.0.6",
+    "@donotdev/billing": "0.0.6",
+    "@donotdev/components": "0.0.6",
+    "@donotdev/core": "0.0.6",
+    "@donotdev/crud": "0.0.6",
+    "@donotdev/firebase": "0.0.6",
+    "@donotdev/oauth": "0.0.6",
     "firebase": "^12.5.0",
     "lucide-react": "^0.562.0",
     "react": "^19.2.3",