@donotdev/components 0.0.10 → 0.0.11

package/dist/styles/index.css

@@ -10,9 +10,9 @@
      Used by: CSS @media queries, JavaScript hooks, responsive components
      Note: CSS variables don't work in @media, so we use hardcoded px values
      =========================== */
-  --breakpoint-mobile: 768px;   /* < 768 = mobile */
-  --breakpoint-tablet: 1024px;  /* 768-1023 = tablet */
-  --breakpoint-laptop: 1440px;  /* 1024-1439 = laptop (key layout split) */
+  --breakpoint-mobile: 768px; /* < 768 = mobile */
+  --breakpoint-tablet: 1024px; /* 768-1023 = tablet */
+  --breakpoint-laptop: 1440px; /* 1024-1439 = laptop (key layout split) */
   --breakpoint-desktop: 1920px; /* 1440+ = desktop */
 
   /* ===========================
@@ -279,23 +279,39 @@
 
 [data-density='compact'] {
   /* Base sizes: Fluid responsiveness for all text, zoom-safe */
-  --font-size-base: clamp(0.875rem, 0.8125rem + 0.25vw, 0.9375rem); /* 14-15px fluid */
-  --font-size-lg: clamp(1.05rem, 0.9375rem + 0.5vw, 1.125rem); /* 17-18px fluid */
-  --font-size-xl: clamp(1.26rem, 1.125rem + 0.75vw, 1.375rem); /* 20-22px fluid */
+  --font-size-base: clamp(
+    0.875rem,
+    0.8125rem + 0.25vw,
+    0.9375rem
+  ); /* 14-15px fluid */
+  --font-size-lg: clamp(
+    1.05rem,
+    0.9375rem + 0.5vw,
+    1.125rem
+  ); /* 17-18px fluid */
+  --font-size-xl: clamp(
+    1.26rem,
+    1.125rem + 0.75vw,
+    1.375rem
+  ); /* 20-22px fluid */
   /* Display sizes: Musical scale + fluid responsiveness */
   --font-size-2xl: clamp(
     1.512rem,
     1.375rem + 0.75vw,
     1.625rem
   ); /* 24-26px fluid */
-  --font-size-3xl: clamp(
-    1.814rem,
-    1.625rem + 1vw,
-    2rem
-  ); /* 29-32px fluid */
+  --font-size-3xl: clamp(1.814rem, 1.625rem + 1vw, 2rem); /* 29-32px fluid */
   --gap-sm: clamp(0.375rem, 0.3125rem + 0.25vw, 0.5rem); /* 6-8px fluid */
-  --gap-md: clamp(0.75rem, 0.625rem + 0.5vw, 0.875rem); /* 12-14px fluid, zoom-safe */
-  --gap-lg: clamp(1.5rem, 1.25rem + 1vw, 1.75rem); /* 24-28px fluid, zoom-safe */
+  --gap-md: clamp(
+    0.75rem,
+    0.625rem + 0.5vw,
+    0.875rem
+  ); /* 12-14px fluid, zoom-safe */
+  --gap-lg: clamp(
+    1.5rem,
+    1.25rem + 1vw,
+    1.75rem
+  ); /* 24-28px fluid, zoom-safe */
   --line-height: 1.2; /* Minor Third - All text */
 }
 
@@ -303,22 +319,34 @@
 
 [data-density='standard'] {
   /* Base sizes: Fluid responsiveness for all text, zoom-safe */
-  --font-size-base: clamp(1rem, 0.9375rem + 0.25vw, 1.0625rem); /* 16-17px fluid */
-  --font-size-lg: clamp(1.25rem, 1.125rem + 0.5vw, 1.375rem); /* 20-22px fluid */
-  --font-size-xl: clamp(1.563rem, 1.375rem + 0.75vw, 1.75rem); /* 25-28px fluid */
+  --font-size-base: clamp(
+    1rem,
+    0.9375rem + 0.25vw,
+    1.0625rem
+  ); /* 16-17px fluid */
+  --font-size-lg: clamp(
+    1.25rem,
+    1.125rem + 0.5vw,
+    1.375rem
+  ); /* 20-22px fluid */
+  --font-size-xl: clamp(
+    1.563rem,
+    1.375rem + 0.75vw,
+    1.75rem
+  ); /* 25-28px fluid */
   /* Display sizes: Musical scale + fluid responsiveness */
-  --font-size-2xl: clamp(
-    1.953rem,
-    1.75rem + 1vw,
-    2.25rem
-  ); /* 31-36px fluid */
+  --font-size-2xl: clamp(1.953rem, 1.75rem + 1vw, 2.25rem); /* 31-36px fluid */
   --font-size-3xl: clamp(
     2.441rem,
     2rem + 1.5vw,
     3rem
   ); /* 39-48px fluid - hero text */
   --gap-sm: clamp(0.5rem, 0.4375rem + 0.25vw, 0.625rem); /* 8-10px fluid */
-  --gap-md: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 16-20px fluid, zoom-safe */
+  --gap-md: clamp(
+    1rem,
+    0.875rem + 0.5vw,
+    1.25rem
+  ); /* 16-20px fluid, zoom-safe */
   --gap-lg: clamp(2rem, 1.75rem + 1vw, 2.5rem); /* 32-40px fluid, zoom-safe */
   --line-height: 1.25; /* Major Third - All text */
 }
@@ -1065,8 +1093,10 @@ em {
     -webkit-backdrop-filter: blur(20px) saturate(180%);
     border: var(--border-hairline) solid
       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);
+    box-shadow:
+      var(--shadow-lg),
+      inset 0 1px 0 0
+        color-mix(in oklab, var(--card-foreground) 10%, transparent);
   }
 
 /* Separator style */
@@ -2152,21 +2182,46 @@ em {
   flex-shrink: 0;
   width: var(--icon-md);
   height: var(--icon-md);
-  transition: transform var(--dur-fast) var(--ease-in-out);
+  transition: transform var(--dur-normal) var(--ease-in-out);
 }
 
 .dndev-accordion-content {
   overflow: hidden;
   font-size: var(--font-size-base);
-  transition: all var(--dur-fast) var(--ease-in-out);
   width: 100%;
   min-width: 0;
   text-align: start;
 }
 
+.dndev-accordion-content[data-state='open'] {
+  animation: slideDown var(--dur-normal) var(--ease-in-out);
+}
+
 .dndev-accordion-content[data-state='closed'] {
-    display: none;
+  animation: slideUp var(--dur-normal) var(--ease-in-out);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
   }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-collapsible-content-height);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
 
 .dndev-accordion-content-inner {
   padding-bottom: var(--gap-md);
@@ -3157,21 +3212,58 @@ em {
 @keyframes slideDown {
   from {
     height: 0;
+    opacity: 0;
   }
   to {
     height: var(--radix-collapsible-content-height);
+    opacity: 1;
   }
 }
 
 @keyframes slideUp {
   from {
     height: var(--radix-collapsible-content-height);
+    opacity: 1;
   }
   to {
     height: 0;
+    opacity: 0;
   }
 }
 
+.dndev-collapsible-trigger {
+  width: 100%;
+  cursor: pointer;
+  transition: opacity var(--dur-fast) var(--ease-in-out);
+}
+
+.dndev-collapsible-trigger:hover {
+  opacity: var(--opacity-strong);
+}
+
+.dndev-collapsible-trigger:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-interactive);
+}
+
+.dndev-collapsible-icon {
+  width: var(--size-md);
+  height: var(--size-md);
+  flex-shrink: 0;
+  color: var(--accent);
+  transition: transform var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-collapsible-chevron {
+  transform: rotate(0deg);
+  transition: transform var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-collapsible[data-state='open'] .dndev-collapsible-chevron {
+  transform: rotate(180deg);
+}
+
 /* packages/components/src/atomic/Combobox/Combobox.css */
 
 .dndev-combobox-trigger {
@@ -5190,6 +5282,49 @@ em {
   text-align: end;
 }
 
+/* Collapsible title trigger */
+
+.dndev-section-title-trigger {
+  width: 100%;
+  cursor: pointer;
+  transition: opacity var(--dur-fast) var(--ease-in-out);
+  margin-block-end: var(--gap-md);
+}
+
+.dndev-section-title-trigger .dndev-section-title {
+  margin-block-end: 0;
+}
+
+.dndev-section-title-trigger:hover {
+  opacity: var(--opacity-strong);
+}
+
+.dndev-section-title-trigger:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+  border-radius: var(--radius-interactive);
+}
+
+.dndev-section-icon {
+  width: var(--size-md);
+  height: var(--size-md);
+  flex-shrink: 0;
+  color: var(--accent);
+  transition: transform var(--dur-normal) var(--ease-in-out);
+}
+
+.dndev-section-full-width[data-text-align='start'] .dndev-section-title-trigger {
+  justify-content: flex-start;
+}
+
+.dndev-section-full-width[data-text-align='center'] .dndev-section-title-trigger {
+  justify-content: center;
+}
+
+.dndev-section-full-width[data-text-align='end'] .dndev-section-title-trigger {
+  justify-content: flex-end;
+}
+
 /* packages/components/src/atomic/Separator/Separator.css */
 
 .dndev-separator {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@donotdev/components",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "private": false,
   "description": "Styled UI components for DoNotDev",