@deepgram/styles 0.2.11 → 0.2.13

package/lib/deepgram.css

@@ -54,7 +54,7 @@
   }
 
   .dg-btn--ghost {
-    @apply border border-dg-slate bg-transparent text-dg-solid;
+    @apply border border-dg-slate bg-dg-on-solid text-dg-solid;
   }
 
   .dg-btn--ghost:hover {
@@ -62,7 +62,7 @@
   }
 
   .dg-btn--danger-ghost {
-    @apply border border-dg-danger bg-transparent text-dg-solid;
+    @apply border border-dg-danger bg-dg-on-solid text-dg-solid;
   }
 
   .dg-btn--danger-ghost:hover {
@@ -73,10 +73,6 @@
     @apply px-2 size-12;
   }
 
-  .dg-btn--icon-only.dg-btn--sm {
-    @apply size-6;
-  }
-
   .dg-btn--collapse {
     @apply inline-flex;
   }
@@ -87,36 +83,42 @@
     }
   }
 
+  .dg-btn--icon-only.dg-btn--sm {
+    @apply size-6;
+  }
+
   .dg-btn i, .dg-btn svg {
     flex-shrink: 0;
   }
 
-  /* Secondary Button */
-
-  /* Ghost Button */
-
-  /* Danger Ghost Button */
+  /* Button Group */
 
-  /* Icon Button */
+  .dg-action-group {
+    @apply inline-flex flex-wrap gap-0;
+  }
 
-  /* Small Button */
+  .dg-action-group > .dg-btn:not(:first-child) {
+    @apply rounded-l-none border-l-0;
+  }
 
-  /* Collapse Button */
+  .dg-action-group > .dg-btn:not(.dg-btn--primary):not(:last-child) {
+    @apply rounded-r-none;
+  }
 
-  /* Button Group */
+  .dg-action-group > .dg-btn--primary:not(:last-child) {
+    @apply rounded-r-none;
+  }
 
-  .dg-action-group {
-    @apply flex flex-wrap justify-center gap-4;
+  .dg-action-group > .dg-btn--primary:not(:first-child):not(:last-child) {
+    box-shadow: none;
   }
 
-  @media (max-width: 640px) {
-    .dg-action-group {
-      @apply flex-col items-stretch;
-    }
+  .dg-action-group > .dg-btn--primary:first-child:not(:last-child) {
+    box-shadow: color-mix(in srgb, var(--dg-secondary, #149afb) 20%, transparent) -0.375rem 0 0.9375rem 0;
+  }
 
-    .dg-action-group .dg-btn {
-      @apply w-full;
-    }
+  .dg-action-group > .dg-btn--primary:last-child:not(:first-child) {
+    box-shadow: color-mix(in srgb, var(--dg-primary, #13ef95) 20%, transparent) 0.375rem 0 0.9375rem 0;
   }
 
   /* Section */
@@ -178,21 +180,14 @@
     padding-top: 2rem;
   }
 
-  .dg-section--fieldset .dg-section-heading {
-    @apply absolute bg-dg-background text-dg-muted uppercase tracking-wide font-semibold;
-    @apply text-base px-2 m-0;
-    top: -0.75rem;
-    left: 1rem;
-  }
-
   @media (min-width: 640px) {
     .dg-section--fieldset {
       padding-top: 2.5rem;
     }
+  }
 
-    .dg-section--fieldset .dg-section-heading {
-      font-size: 1.125rem;
-    }
+  .dg-section--fieldset .dg-section-heading {
+    font-size: 1.125rem;
   }
 
   /* Card */
@@ -261,28 +256,6 @@
     @apply border-dg-slate;
   }
 
-  .dg-card--selectable:has(input[type="radio"]:checked) {
-    @apply border-dg-primary;
-    background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
-  }
-
-  .dg-sr-only {
-    @apply sr-only;
-  }
-
-  .dg-card--selectable input[type="radio"] {
-    @apply sr-only;
-  }
-
-  .dg-card--selectable__indicator {
-    @apply hidden;
-  }
-
-  .dg-card--selectable__icon {
-    @apply text-dg-text;
-    margin-right: 0.5rem;
-  }
-
   .dg-card--selectable__content {
     @apply flex-1 flex flex-col gap-1;
   }
@@ -330,20 +303,6 @@
     @apply border-dg-slate;
   }
 
-  .dg-card--file-upload:has(input[type="checkbox"]:checked) {
-    @apply border-dg-primary border-solid;
-    background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
-  }
-
-  .dg-card--file-upload input[type="file"], .dg-card--file-upload input[type="checkbox"] {
-    @apply sr-only;
-  }
-
-  .dg-card--file-upload__icon {
-    @apply text-dg-text;
-    margin-right: 0.5rem;
-  }
-
   .dg-card--file-upload__content {
     @apply flex-1 flex flex-col gap-1;
   }
@@ -387,44 +346,8 @@
     border-radius: 0.5rem 0.5rem 0 0;
   }
 
-  .dg-card__image img {
-    @apply w-full h-full object-cover block;
-  }
-
-  .dg-card__image--small {
-    @apply h-[7.5rem];
-  }
-
-  .dg-card__image--medium {
-    @apply h-[10rem];
-  }
-
-  .dg-card__image--large {
-    @apply h-[15rem];
-  }
-
-  .dg-card__image--aspect-4-3 {
-    @apply aspect-[4/3] h-auto;
-  }
-
   .dg-card__icon {
-    @apply flex items-center p-3 pt-6;
-  }
-
-  .dg-card__icon i, .dg-card__icon svg {
-    @apply text-5xl text-dg-primary;
-  }
-
-  .dg-card__icon--left {
-    @apply justify-start;
-  }
-
-  .dg-card__icon--center {
-    @apply justify-center;
-  }
-
-  .dg-card__icon--right {
-    @apply justify-end;
+    @apply flex items-center p-3 pt-6 text-5xl text-dg-primary;
   }
 
   @media (min-width: 640px) {
@@ -456,24 +379,100 @@
   }
 
   .dg-card__body {
-    @apply flex flex-col gap-3 p-3 flex-1;
+    @apply flex flex-col gap-3 flex-1;
+  }
+
+  .dg-card__footer {
+    @apply flex items-center gap-3 p-3 border-t border-transparent;
+    @apply mt-auto;
   }
 
   @media (min-width: 640px) {
-    .dg-card__body {
+    .dg-card__footer {
       @apply p-4;
     }
   }
 
   @media (min-width: 1024px) {
-    .dg-card__body {
-      @apply px-6 pb-6 pt-0;
+    .dg-card__footer {
+      @apply p-6;
     }
   }
 
-  .dg-card__footer {
-    @apply flex items-center gap-3 p-3 border-t border-transparent;
-    @apply mt-auto;
+  .dg-card--selectable:has(input[type="radio"]:checked) {
+    @apply border-dg-primary;
+    background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
+  }
+
+  .dg-sr-only {
+    @apply sr-only;
+  }
+
+  .dg-card--selectable input[type="radio"] {
+    @apply sr-only;
+  }
+
+  .dg-card--selectable__indicator {
+    @apply hidden;
+  }
+
+  .dg-card--selectable__icon {
+    @apply text-dg-text;
+    margin-right: 0.5rem;
+  }
+
+  .dg-card--file-upload:has(input[type="checkbox"]:checked) {
+    @apply border-dg-primary border-solid;
+    background: color-mix(in srgb, var(--dg-primary) 5%, transparent);
+  }
+
+  .dg-card--file-upload input[type="file"], .dg-card--file-upload input[type="checkbox"] {
+    @apply sr-only;
+  }
+
+  .dg-card--file-upload__icon {
+    @apply text-dg-text;
+    margin-right: 0.5rem;
+  }
+
+  .dg-card__image img {
+    @apply w-full h-full object-cover block;
+  }
+
+  .dg-card__image--small {
+    @apply h-[7.5rem];
+  }
+
+  .dg-card__image--medium {
+    @apply h-[10rem];
+  }
+
+  .dg-card__image--large {
+    @apply h-[15rem];
+  }
+
+  .dg-card__image--aspect-4-3 {
+    @apply aspect-[4/3] h-auto;
+  }
+
+  .dg-card__icon--left {
+    @apply justify-start;
+  }
+
+  .dg-card__icon--center {
+    @apply justify-center;
+  }
+
+  .dg-card__icon--right {
+    @apply justify-end;
+  }
+
+  .dg-card--structured .dg-card__body {
+    @apply p-3;
+  }
+
+  .dg-card__body > :last-child {
+    @apply mb-0;
   }
 
   .dg-card__footer--bordered {
@@ -481,14 +480,14 @@
   }
 
   @media (min-width: 640px) {
-    .dg-card__footer {
+    .dg-card--structured .dg-card__body {
       @apply p-4;
     }
   }
 
   @media (min-width: 1024px) {
-    .dg-card__footer {
-      @apply p-6;
+    .dg-card--structured .dg-card__body {
+      @apply px-6 pb-6 pt-0;
     }
   }
 
@@ -500,20 +499,10 @@
     -webkit-overflow-scrolling: touch;
   }
 
-  .dg-code-block pre {
-    @apply m-0 p-0 font-dg-mono text-xs text-dg-fog whitespace-pre-wrap;
-    @apply break-words;
-    line-height: 1.3;
-  }
-
   @media (min-width: 640px) {
     .dg-code-block {
       @apply p-3 my-4 max-h-[15.625rem];
     }
-
-    .dg-code-block pre {
-      @apply text-sm;
-    }
   }
 
   @media (min-width: 1024px) {
@@ -552,21 +541,32 @@
     @apply overflow-visible max-h-none;
   }
 
-  /* Hero Section */
-
-  .dg-hero-title {
-    @apply text-center font-bold font-dg-noto text-5xl leading-tight mb-6;
-    @apply bg-gradient-to-r from-dg-secondary to-dg-primary bg-clip-text;
-    -webkit-text-fill-color: transparent;
-    letter-spacing: -0.02em;
-    font-feature-settings: "liga" 0, "dlig" 0, "hlig" 0, "ordn" 0, "ss09", "kern";
-    font-kerning: normal;
+  .dg-code-block pre {
+    @apply text-sm;
   }
 
+  /* Hero Section */
+
   .dg-hero {
     @apply w-full text-center py-16 px-4;
   }
 
+  @media (max-width: 768px) {
+    .dg-hero {
+      @apply py-12 px-4;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .dg-hero {
+      @apply py-8 px-4;
+    }
+  }
+
+  .dg-hero__title {
+    @apply text-2xl;
+  }
+
   .dg-hero__content {
     @apply flex flex-col gap-6 mx-auto max-w-[53.125rem];
   }
@@ -577,12 +577,6 @@
     @apply cursor-pointer w-fit gap-3 transition-all duration-200;
   }
 
-  .dg-hero__announcement:hover {
-    @apply border-dg-primary -translate-y-0.5;
-    background-color: color-mix(in srgb, var(--dg-primary) 10%, transparent);
-    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--dg-primary) 15%, transparent);
-  }
-
   .dg-hero__announcement-text {
     @apply text-dg-text text-sm font-normal whitespace-nowrap;
   }
@@ -592,10 +586,6 @@
     @apply transition-[gap] duration-200;
   }
 
-  .dg-hero__announcement:hover .dg-hero__announcement-cta {
-    @apply gap-3;
-  }
-
   .dg-hero__body {
     @apply text-center text-dg-fog text-lg leading-7 font-normal mx-auto;
     @apply max-w-[53.125rem];
@@ -605,58 +595,18 @@
     @apply flex items-center justify-center flex-wrap gap-4 mt-2;
   }
 
-  @media (max-width: 1024px) {
-    .dg-hero-title {
-      @apply text-4xl;
-    }
+  .dg-hero__announcement:hover {
+    @apply border-dg-primary -translate-y-0.5;
+    background-color: color-mix(in srgb, var(--dg-primary) 10%, transparent);
+    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--dg-primary) 15%, transparent);
   }
 
-  @media (max-width: 768px) {
-    .dg-hero-title {
-      @apply text-3xl;
-    }
-
-    .dg-hero {
-      @apply py-12 px-4;
-    }
-
-    .dg-hero__content {
-      @apply gap-5;
-    }
-
-    .dg-hero__body {
-      @apply text-base leading-relaxed;
-    }
+  .dg-hero__announcement:hover .dg-hero__announcement-cta {
+    @apply gap-3;
   }
 
-  @media (max-width: 640px) {
-    .dg-hero-title {
-      @apply text-2xl;
-    }
-
-    .dg-hero {
-      @apply py-8 px-4;
-    }
-
-    .dg-hero__announcement-text {
-      @apply text-xs whitespace-normal;
-    }
-
-    .dg-hero__announcement-cta {
-      @apply text-xs;
-    }
-
-    .dg-hero__body {
-      @apply text-[0.9375rem] leading-normal;
-    }
-
-    .dg-hero__actions {
-      @apply flex-col w-full;
-    }
-
-    .dg-hero__actions > * {
-      @apply w-full;
-    }
+  .dg-hero__actions > * {
+    @apply w-full;
   }
 
   /* Section Header */
@@ -666,18 +616,14 @@
     @apply flex-wrap items-baseline gap-2;
   }
 
-  .dg-section-heading small {
-    @apply font-normal text-base text-dg-muted;
-  }
-
   @media (max-width: 640px) {
     .dg-section-heading {
       @apply text-xl mb-3 gap-1.5;
     }
+  }
 
-    .dg-section-heading small {
-      @apply text-sm;
-    }
+  .dg-section-heading small {
+    @apply text-sm;
   }
 
   /* Page Heading */
@@ -686,33 +632,39 @@
     @apply mb-8;
   }
 
-  .dg-page-heading__title {
-    @apply font-semibold font-dg-noto text-4xl text-dg-text mb-2 leading-tight;
+  @media (max-width: 640px) {
+    .dg-page-heading {
+      @apply mb-6;
+    }
   }
 
-  .dg-page-heading__description {
-    @apply text-dg-muted text-lg leading-relaxed m-0 max-w-[65ch];
+  .dg-page-heading__title {
+    @apply font-semibold font-dg-noto text-4xl text-dg-text mb-2 leading-tight;
   }
 
   @media (max-width: 768px) {
     .dg-page-heading__title {
       @apply text-3xl;
     }
-
-    .dg-page-heading__description {
-      @apply text-base;
-    }
   }
 
   @media (max-width: 640px) {
-    .dg-page-heading {
-      @apply mb-6;
-    }
-
     .dg-page-heading__title {
       @apply text-2xl;
     }
+  }
+
+  .dg-page-heading__description {
+    @apply text-dg-muted text-lg leading-relaxed m-0 max-w-[65ch];
+  }
+
+  @media (max-width: 768px) {
+    .dg-page-heading__description {
+      @apply text-base;
+    }
+  }
 
+  @media (max-width: 640px) {
     .dg-page-heading__description {
       @apply text-[0.9375rem];
     }
@@ -737,15 +689,6 @@
     @apply mt-4 flex md:mt-0 md:ml-4;
   }
 
-  .dg-page-headings__title {
-    @apply text-2xl font-bold text-dg-text sm:truncate sm:text-3xl sm:tracking-tight;
-    line-height: 1.75;
-  }
-
-  .dg-page-headings__actions {
-    @apply mt-4 flex md:mt-0 md:ml-4;
-  }
-
   /* Card Heading */
 
   .dg-card-heading {
@@ -784,10 +727,6 @@
     @apply w-full text-dg-fog text-sm leading-snug mb-3;
   }
 
-  .dg-prose.dg-prose--block {
-    @apply max-w-none w-full;
-  }
-
   @media (min-width: 640px) {
     .dg-prose {
       @apply text-base mb-4 max-w-[65ch];
@@ -820,6 +759,16 @@
     }
   }
 
+  .dg-prose.dg-prose--block {
+    @apply max-w-none w-full;
+  }
+
+  /* Icon */
+
+  .dg-icon {
+    @apply flex-shrink-0;
+  }
+
   /* Input Group */
 
   .dg-input {
@@ -829,10 +778,6 @@
     height: 2.75rem;
   }
 
-  .dg-input::placeholder {
-    @apply text-dg-muted;
-  }
-
   .dg-input:focus {
     @apply border-dg-primary;
     box-shadow: 0 0 0 0.0625rem var(--color-dg-primary);
@@ -850,13 +795,8 @@
     @apply max-w-none;
   }
 
-  .dg-input[type="select"], select.dg-input {
-    @apply appearance-none;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-    background-position: right 0.75rem center;
-    background-repeat: no-repeat;
-    background-size: 1.5em 1.5em;
-    padding-right: 2.5rem;
+  .dg-input::placeholder {
+    @apply text-dg-muted;
   }
 
   /* Textarea */
@@ -870,6 +810,19 @@
     height: auto;
   }
 
+  .dg-textarea:focus {
+    @apply border-dg-primary;
+    box-shadow: 0 0 0 0.0625rem var(--color-dg-primary);
+  }
+
+  .dg-textarea:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .dg-textarea::placeholder {
+    @apply text-dg-muted;
+  }
+
   /* Checkbox */
 
   .dg-checkbox {
@@ -878,6 +831,15 @@
     position: relative;
   }
 
+  .dg-checkbox:focus {
+    @apply outline-none;
+    box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--color-dg-primary) 50%, transparent);
+  }
+
+  .dg-checkbox:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
   .dg-checkbox:checked {
     @apply bg-dg-primary border-dg-primary;
   }
@@ -894,71 +856,248 @@
     transform: rotate(45deg);
   }
 
-  .dg-checkbox:focus {
+  .dg-checkbox-label:hover .dg-checkbox {
+    @apply border-dg-slate;
+  }
+
+  .dg-checkbox-label:has(.dg-checkbox:disabled) {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  /* Select */
+
+  .dg-select {
+    @apply w-full px-4 py-3 rounded border border-dg-pebble;
+    @apply bg-dg-charcoal text-dg-text font-dg-sans text-sm outline-none transition-all;
+    @apply duration-300 shadow-dg-sm appearance-none cursor-pointer;
+    height: 2.75rem;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(255,255,255)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.75rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+  }
+
+  .dg-select:focus {
+    @apply border-dg-primary;
+    box-shadow: 0 0 0 0.0625rem var(--color-dg-primary);
+  }
+
+  .dg-select:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  /* Option */
+
+  .dg-option {
+    @apply bg-dg-charcoal text-dg-text;
+  }
+
+  /* Radio */
+
+  .dg-radio {
+    @apply appearance-none w-5 h-5 rounded-full border border-dg-pebble;
+    @apply bg-dg-charcoal cursor-pointer transition-all duration-200 flex-shrink-0;
+    position: relative;
+  }
+
+  .dg-radio:focus {
     @apply outline-none;
     box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--color-dg-primary) 50%, transparent);
   }
 
-  .dg-checkbox-label {
-    @apply flex items-start gap-2 cursor-pointer text-sm text-dg-fog;
+  .dg-radio:disabled {
+    @apply opacity-50 cursor-not-allowed;
   }
 
-  .dg-checkbox-label:hover .dg-checkbox {
+  .dg-radio:checked {
+    @apply bg-dg-primary border-dg-primary;
+  }
+
+  .dg-radio:checked::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.375rem;
+    height: 0.375rem;
+    background: var(--color-dg-almost-black);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .dg-radio-label:hover .dg-radio {
     @apply border-dg-slate;
   }
 
+  .dg-radio-label:has(.dg-radio:disabled) {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  /* Toggle */
+
+  .dg-toggle {
+    @apply appearance-none cursor-pointer transition-all duration-200 flex-shrink-0;
+    position: relative;
+    width: 2.75rem;
+    height: 1.5rem;
+    border-radius: 0.75rem;
+    background-color: var(--color-dg-pebble);
+  }
+
+  .dg-toggle:focus {
+    @apply outline-none;
+    box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--color-dg-primary) 50%, transparent);
+  }
+
+  .dg-toggle:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  .dg-toggle:checked {
+    background-color: var(--color-dg-primary);
+  }
+
+  .dg-toggle::after {
+    content: "";
+    position: absolute;
+    top: 0.125rem;
+    left: 0.125rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: 50%;
+    background: white;
+    transition: transform 200ms ease-in-out;
+  }
+
+  .dg-toggle:checked::after {
+    transform: translateX(1.25rem);
+  }
+
+  .dg-toggle-label:hover .dg-toggle {
+    background-color: var(--color-dg-slate);
+  }
+
+  .dg-toggle-label:hover .dg-toggle:checked {
+    background-color: var(--color-dg-primary);
+  }
+
+  .dg-toggle-label:has(.dg-toggle:disabled) {
+    @apply opacity-50 cursor-not-allowed;
+  }
+
+  /* Checkbox Label */
+
+  .dg-checkbox-label {
+    @apply flex items-start gap-2 cursor-pointer text-sm text-dg-fog;
+  }
+
+  /* Checkbox Description */
+
   .dg-checkbox-description {
     @apply flex flex-col gap-2;
   }
 
+  /* Checkbox Group */
+
   .dg-checkbox-group {
     @apply flex flex-col gap-3;
   }
 
+  /* Radio Label */
+
+  .dg-radio-label {
+    @apply flex items-start gap-2 cursor-pointer text-sm text-dg-fog;
+  }
+
+  /* Radio Description */
+
+  .dg-radio-description {
+    @apply flex flex-col gap-2;
+  }
+
+  .dg-radio-description__hint {
+    @apply text-dg-muted;
+  }
+
+  /* Radio Group */
+
+  .dg-radio-group {
+    @apply flex flex-col gap-3;
+  }
+
+  /* Toggle Label */
+
+  .dg-toggle-label {
+    @apply flex items-center gap-3 cursor-pointer text-sm text-dg-fog;
+  }
+
+  /* Toggle Group */
+
+  .dg-toggle-group {
+    @apply flex flex-col gap-4;
+  }
+
+  /* Form Label */
+
+  .dg-form-label {
+    @apply text-sm font-medium text-dg-text;
+  }
+
+  /* Form Helper */
+
+  .dg-form-helper {
+    @apply text-xs text-dg-muted block;
+    margin: 0;
+  }
+
+  /* Form Error */
+
+  .dg-form-error {
+    @apply text-xs text-dg-danger block;
+    margin: 0;
+  }
+
   /* Form Section */
 
   .dg-form-field {
     @apply flex flex-col gap-3 mb-4 w-full;
   }
 
+  @media (min-width: 640px) {
+    .dg-form-field {
+      @apply max-w-md;
+    }
+  }
+
   .dg-form-field--full {
     @apply max-w-none;
   }
 
-  .dg-form-field--error .dg-input, .dg-form-field--error .dg-textarea {
+  .dg-form-field--error .dg-input, .dg-form-field--error .dg-textarea, .dg-form-field--error .dg-select {
     @apply border-dg-danger;
   }
 
+  .dg-form-field--error .dg-input:focus, .dg-form-field--error .dg-textarea:focus, .dg-form-field--error .dg-select:focus {
+    @apply border-dg-danger;
+    box-shadow: 0 0 0 0.0625rem var(--color-dg-danger);
+  }
+
   .dg-form-field--error .dg-form-helper {
     @apply text-dg-danger;
   }
 
-  .dg-form-field--success .dg-input, .dg-form-field--success .dg-textarea {
+  .dg-form-field--success .dg-input, .dg-form-field--success .dg-textarea, .dg-form-field--success .dg-select {
     @apply border-dg-success;
   }
 
-  .dg-form-field--success .dg-form-helper {
-    @apply text-dg-success;
-  }
-
-  .dg-form-label {
-    @apply text-sm font-medium text-dg-text;
-  }
-
-  .dg-form-error {
-    @apply text-xs text-dg-danger block;
-    margin: 0;
-  }
-
-  .dg-form-helper {
-    @apply text-xs text-dg-muted block;
-    margin: 0;
+  .dg-form-field--success .dg-input:focus, .dg-form-field--success .dg-textarea:focus, .dg-form-field--success .dg-select:focus {
+    @apply border-dg-success;
+    box-shadow: 0 0 0 0.0625rem var(--color-dg-success);
   }
 
-  @media (min-width: 640px) {
-    .dg-form-field {
-      @apply max-w-md;
-    }
+  .dg-form-field--success .dg-form-helper {
+    @apply text-dg-success;
   }
 
   /* File Upload Zone */
@@ -975,10 +1114,6 @@
     @apply border-dg-slate bg-dg-background;
   }
 
-  .dg-drag-drop-zone.drag-over {
-    @apply border-dg-primary bg-dg-translucent;
-  }
-
   .dg-drag-drop-zone__input {
     @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
   }
@@ -987,10 +1122,6 @@
     @apply text-5xl text-dg-muted;
   }
 
-  .dg-drag-drop-zone:hover .dg-drag-drop-zone__icon {
-    @apply text-dg-primary;
-  }
-
   .dg-drag-drop-zone__text {
     @apply text-base text-dg-text font-medium;
   }
@@ -999,6 +1130,14 @@
     @apply text-sm text-dg-muted;
   }
 
+  .dg-drag-drop-zone.drag-over {
+    @apply border-dg-primary bg-dg-translucent;
+  }
+
+  .dg-drag-drop-zone:hover .dg-drag-drop-zone__icon {
+    @apply text-dg-primary;
+  }
+
   /* Status Banner */
 
   .dg-status {
@@ -1040,10 +1179,6 @@
     @apply flex items-start gap-1;
   }
 
-  .dg-status--with-icon .dg-status__icon {
-    @apply flex-shrink-0 text-[1em] mt-[0.1em];
-  }
-
   .dg-status--compact {
     @apply my-1 py-0.5 text-xs;
   }
@@ -1054,6 +1189,10 @@
     }
   }
 
+  .dg-status--with-icon .dg-status__icon {
+    @apply flex-shrink-0 text-[1em] mt-[0.1em];
+  }
+
   /* Spinner */
 
   .dg-spinner {
@@ -1061,134 +1200,52 @@
     @apply mb-3 animate-spin;
   }
 
-  .dg-processing-title {
+  .dg-spinner__title {
     @apply font-medium font-dg-noto text-xl text-dg-text mb-1;
   }
 
-  /* Modal */
-
-  .dg-modal-overlay {
-    @apply hidden fixed inset-0 items-center justify-center bg-black/80;
-    @apply z-50;
-  }
-
-  .dg-modal-overlay.visible, .dg-modal-overlay--visible {
-    @apply flex;
-  }
-
-  .dg-modal-content {
-    @apply text-center max-w-[25rem] m-3;
-  }
-
   /* Constrained Container */
 
   .dg-constrain-width {
     @apply w-full;
   }
 
-  .dg-center-h {
-    @apply mx-auto;
-  }
-
   @media (min-width: 640px) {
     .dg-constrain-width {
       @apply max-w-[70rem] mx-auto;
     }
   }
 
+  .dg-center-h {
+    @apply mx-auto;
+  }
+
   /* Responsive Grid */
 
   .dg-grid-mobile-stack {
     @apply flex flex-col gap-4;
   }
 
-  .dg-grid-mobile-stack > * {
-    @apply flex-1;
-  }
-
   @media (min-width: 640px) {
     .dg-grid-mobile-stack {
       @apply flex-row gap-4;
     }
   }
 
-  /* Three-Column Layout */
-
-  .dg-columns {
-    @apply flex flex-col w-full;
-  }
-
-  .dg-columns__wrapper {
-    @apply flex flex-col flex-1 min-w-0;
-  }
-
-  .dg-column {
-    @apply px-4 py-6 min-w-0;
-  }
-
-  .dg-column--main {
+  .dg-grid-mobile-stack > * {
     @apply flex-1;
   }
 
-  .dg-column--sidebar-left {
-  }
-
-  .dg-column--sidebar-right {
-    position: relative;
-  }
-
-  @media (min-width: 640px) {
-    .dg-column {
-      @apply px-6;
-    }
-  }
-
-  @media (min-width: 1024px) {
-    .dg-columns__wrapper {
-      @apply flex-row;
-    }
-
-    .dg-column--sidebar-left {
-      @apply w-48 flex-shrink-0;
-    }
-
-    .dg-column--sidebar-left.dg-column--sm {
-      @apply w-64 flex-shrink-0;
-    }
-
-    .dg-column--sidebar-left.dg-column--lg {
-      @apply w-96 flex-shrink-0;
-    }
+  /* Three-Column Layout */
 
-    .dg-column--sidebar-left.dg-column--xl {
-      @apply w-128 flex-shrink-0;
-    }
+  .dg-columns {
+    @apply flex flex-col w-full;
   }
 
   @media (min-width: 1280px) {
     .dg-columns {
       @apply flex-row;
     }
-
-    .dg-column--sidebar-right {
-      width: 16rem;
-      flex-shrink: 0;
-    }
-
-    .dg-column--sidebar-right.dg-column--sm {
-      width: 20rem;
-      flex-shrink: 0;
-    }
-
-    .dg-column--sidebar-right.dg-column--lg {
-      width: 24rem;
-      flex-shrink: 0;
-    }
-
-    .dg-column--sidebar-right.dg-column--xl {
-      width: 32rem;
-      flex-shrink: 0;
-    }
   }
 
   .dg-columns--fixed {
@@ -1198,16 +1255,16 @@
     --dg-aside-width: 24rem;
   }
 
-  .dg-columns--fixed .dg-column--sidebar-left {
+  .dg-columns--fixed .dg-columns__column--left {
     @apply hidden;
   }
 
-  .dg-columns--fixed .dg-column--sidebar-right {
+  .dg-columns--fixed .dg-columns__column--right {
     @apply hidden;
   }
 
   @media (min-width: 1024px) {
-    .dg-columns--fixed .dg-column--sidebar-left {
+    .dg-columns--fixed .dg-columns__column--left {
       display: flex;
       flex-direction: column;
       position: fixed;
@@ -1221,25 +1278,25 @@
       border-right: 1px solid var(--color-dg-border);
     }
 
-    .dg-columns--fixed .dg-column--main {
+    .dg-columns--fixed .dg-columns__column--center {
       padding-left: var(--dg-sidebar-width);
     }
 
-    .dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--sm) {
+    .dg-columns--fixed:has(.dg-columns__column--left.dg-columns__column--sm) {
       --dg-sidebar-width: 16rem;
     }
 
-    .dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--lg) {
+    .dg-columns--fixed:has(.dg-columns__column--left.dg-columns__column--lg) {
       --dg-sidebar-width: 24rem;
     }
 
-    .dg-columns--fixed:has(.dg-column--sidebar-left.dg-column--xl) {
+    .dg-columns--fixed:has(.dg-columns__column--left.dg-columns__column--xl) {
       --dg-sidebar-width: 32rem;
     }
   }
 
   @media (min-width: 1280px) {
-    .dg-columns--fixed .dg-column--sidebar-right {
+    .dg-columns--fixed .dg-columns__column--right {
       display: flex;
       flex-direction: column;
       position: fixed;
@@ -1251,23 +1308,33 @@
       border-right: 1px solid var(--color-dg-border);
     }
 
-    .dg-columns--fixed:has(.dg-column--sidebar-right) .dg-column--main {
+    .dg-columns--fixed:has(.dg-columns__column--right) .dg-columns__column--center {
       padding-left: calc(var(--dg-sidebar-width) + var(--dg-aside-width));
     }
 
-    .dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--sm) {
+    .dg-columns--fixed:has(.dg-columns__column--right.dg-columns__column--sm) {
       --dg-aside-width: 20rem;
     }
 
-    .dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--lg) {
+    .dg-columns--fixed:has(.dg-columns__column--right.dg-columns__column--lg) {
       --dg-aside-width: 28rem;
     }
 
-    .dg-columns--fixed:has(.dg-column--sidebar-right.dg-column--xl) {
+    .dg-columns--fixed:has(.dg-columns__column--right.dg-columns__column--xl) {
       --dg-aside-width: 32rem;
     }
   }
 
+  .dg-columns__wrapper {
+    @apply flex flex-col flex-1 min-w-0;
+  }
+
+  @media (min-width: 1024px) {
+    .dg-columns__wrapper {
+      @apply flex-row;
+    }
+  }
+
   .dg-columns__mobile-header {
     @apply flex items-center gap-3 px-4 py-2;
     position: sticky;
@@ -1288,50 +1355,73 @@
     color: var(--color-dg-muted);
   }
 
-  /* Header */
+  .dg-columns__column {
+    @apply px-4 py-6 min-w-0;
+  }
 
-  .dg-header {
-    @apply w-full;
-    background: var(--color-dg-almost-black);
-    padding: 1rem 1.5rem;
-    border-bottom: 1px solid color-mix(in srgb, white 10%, transparent);
+  @media (min-width: 640px) {
+    .dg-columns__column {
+      @apply px-6;
+    }
   }
 
-  .dg-header__container {
-    @apply flex items-center justify-between max-w-screen-2xl mx-auto;
+  .dg-columns__column--left {
   }
 
-  .dg-header__logo {
-    @apply flex items-center gap-3;
+  .dg-columns__column--right {
+    position: relative;
   }
 
-  .dg-header__logo-image {
-    @apply h-8 w-auto;
+  .dg-columns__column--center {
+    @apply flex-1;
   }
 
-  .dg-header__logo-text {
-    @apply font-dg-noto font-bold text-xl text-dg-text;
+  .dg-columns__column--sm {
   }
 
-  .dg-header__nav {
-    @apply flex items-center gap-4;
+  .dg-columns__column--lg {
   }
 
-  .dg-header__profile-link {
-    @apply -m-1.5 p-1.5 block;
+  .dg-columns__column--xl {
   }
 
-  .dg-header__profile-avatar {
-    @apply size-8 rounded-full bg-dg-charcoal outline -outline-offset-1 outline-white/10;
+  @media (min-width: 1024px) {
+    .dg-columns__column--left {
+      @apply w-48 flex-shrink-0;
+    }
+
+    .dg-columns__column--left.dg-columns__column--sm {
+      @apply w-64 flex-shrink-0;
+    }
+
+    .dg-columns__column--left.dg-columns__column--lg {
+      @apply w-96 flex-shrink-0;
+    }
+
+    .dg-columns__column--left.dg-columns__column--xl {
+      @apply w-128 flex-shrink-0;
+    }
   }
 
-  @media (max-width: 768px) {
-    .dg-header {
-      padding: 0.75rem 1rem;
+  @media (min-width: 1280px) {
+    .dg-columns__column--right {
+      width: 16rem;
+      flex-shrink: 0;
     }
 
-    .dg-header__logo-text {
-      @apply text-lg;
+    .dg-columns__column--right.dg-columns__column--sm {
+      width: 20rem;
+      flex-shrink: 0;
+    }
+
+    .dg-columns__column--right.dg-columns__column--lg {
+      width: 24rem;
+      flex-shrink: 0;
+    }
+
+    .dg-columns__column--right.dg-columns__column--xl {
+      width: 32rem;
+      flex-shrink: 0;
     }
   }
 
@@ -1341,22 +1431,16 @@
     @apply text-center border-t border-dg-pebble mt-16;
   }
 
-  /* Link */
-
-  .dg-link {
-    @apply text-dg-primary transition-opacity duration-200;
-  }
-
-  .dg-link:hover {
-    @apply opacity-80;
+  .dg-footer__social-links {
+    @apply flex justify-center gap-4;
   }
 
-  .dg-social-link {
-    @apply text-dg-fog transition-colors duration-200 text-xl;
+  .dg-footer__social-link {
+    @apply text-dg-muted transition-colors duration-200;
   }
 
-  .dg-social-link:hover {
-    @apply text-dg-primary;
+  .dg-footer__social-link:hover {
+    @apply text-dg-text;
   }
 
   /* Text Utilities */
@@ -1419,36 +1503,24 @@
 
   /* Newsletter Signup */
 
-  .dg-newsletter-container {
+  .dg-newsletter {
     @apply flex flex-col gap-4;
   }
 
-  .dg-newsletter-container--compact {
+  .dg-newsletter--compact {
     @apply flex flex-col gap-3;
   }
 
-  .dg-newsletter-form {
+  .dg-newsletter__form {
     @apply flex flex-col gap-4;
   }
 
-  .dg-newsletter-form--compact {
+  .dg-newsletter__form--compact {
     @apply flex flex-col gap-3;
   }
 
-  .dg-newsletter-form--inline {
-    @apply flex gap-2 w-full;
-  }
-
-  .dg-newsletter-header {
-    @apply flex flex-col gap-3 items-start;
-  }
-
-  .dg-newsletter-header__content {
-    @apply flex-1;
-  }
-
-  .dg-newsletter-header__actions {
-    @apply w-full;
+  .dg-newsletter__form--inline {
+    @apply w-auto;
   }
 
   .dg-logo-container {
@@ -1459,24 +1531,6 @@
     @apply h-8 w-auto;
   }
 
-  .dg-social-links {
-    @apply flex justify-center gap-4;
-  }
-
-  @media (min-width: 640px) {
-    .dg-newsletter-form--inline {
-      @apply w-auto;
-    }
-
-    .dg-newsletter-header {
-      @apply flex-row items-center;
-    }
-
-    .dg-newsletter-header__actions {
-      @apply w-auto;
-    }
-  }
-
   /* Alerts */
 
   .dg-alert {
@@ -1509,10 +1563,33 @@
 
   .dg-alert__icon {
     @apply shrink-0;
+    font-size: 1.25rem;
+  }
+
+  .dg-alert__body {
+    margin-left: 0.75rem;
+  }
+
+  .dg-alert__title {
+    @apply text-sm font-medium;
+  }
+
+  .dg-alert__description {
+    @apply mt-2 text-sm text-dg-muted;
+  }
+
+  .dg-alert__actions {
+    @apply mt-4;
   }
 
-  .dg-alert__icon svg {
-    @apply size-5;
+  .dg-alert__list {
+    @apply mt-2 text-sm text-dg-muted list-disc pl-5;
+  }
+
+  .dg-alert__dismiss {
+    @apply ml-auto pl-3 shrink-0 -my-1.5 -mr-1.5 inline-flex;
+    @apply rounded-md p-1.5 text-dg-muted cursor-pointer;
+    font-size: 1.25rem;
   }
 
   .dg-alert--warning .dg-alert__icon {
@@ -1531,14 +1608,6 @@
     @apply text-dg-secondary;
   }
 
-  .dg-alert__body {
-    margin-left: 0.75rem;
-  }
-
-  .dg-alert__title {
-    @apply text-sm font-medium;
-  }
-
   .dg-alert--warning .dg-alert__title {
     @apply text-dg-warning;
   }
@@ -1555,39 +1624,15 @@
     @apply text-dg-secondary;
   }
 
-  .dg-alert__description {
-    @apply mt-2 text-sm text-dg-muted;
-  }
-
-  .dg-alert__actions {
-    @apply mt-4;
-  }
-
   .dg-alert__actions .dg-btn {
     @apply text-sm;
   }
 
-  .dg-alert__list {
-    @apply mt-2 text-sm text-dg-muted list-disc pl-5;
-  }
-
   .dg-alert__list li {
     padding-left: 0.25rem;
   }
 
-  .dg-alert__dismiss {
-    @apply ml-auto pl-3 shrink-0 -my-1.5 -mr-1.5;
-  }
-
-  .dg-alert__dismiss button {
-    @apply inline-flex rounded-md p-1.5 text-dg-muted cursor-pointer;
-  }
-
-  .dg-alert__dismiss button:hover {
+  .dg-alert__dismiss:hover {
     @apply text-dg-text;
   }
-
-  .dg-alert__dismiss button svg {
-    @apply size-5;
-  }
 }