@tulipfarm/sprout 0.3.1 → 0.5.0

package/dist/styles/file-viewer.css

@@ -14,8 +14,8 @@
     grid-column: 1 / -1;
     grid-template-columns: minmax(0, 1fr) auto;
     grid-template-areas:
-      "heading window"
-      "controls controls";
+      'heading window'
+      'controls controls';
     align-items: center;
     gap: 0.5rem 1rem;
     padding: 0.625rem 0.75rem 0.625rem 1rem;
@@ -48,13 +48,12 @@
     align-items: center;
     gap: 2px;
   }
-  .sprout-file-viewer-window > [aria-expanded="true"] {
+  .sprout-file-viewer-window > [aria-expanded='true'] {
     background: var(--sprout-hover);
     color: var(--sprout-text);
   }
   @media (max-width: 639.98px) {
-    .sprout-file-viewer-controls
-      .sprout-button-size-sm:has(> .sprout-file-viewer-label) {
+    .sprout-file-viewer-controls .sprout-button-size-sm:has(> .sprout-file-viewer-label) {
       width: 28px;
       padding-inline: 0;
     }
@@ -65,7 +64,7 @@
   @media (min-width: 640px) {
     .sprout-file-viewer-header {
       grid-template-columns: minmax(0, 1fr) auto auto;
-      grid-template-areas: "heading controls window";
+      grid-template-areas: 'heading controls window';
       min-height: 3.5rem;
       padding-inline: 1.5rem 1rem;
     }
@@ -73,7 +72,7 @@
       flex-wrap: nowrap;
     }
     .sprout-file-viewer-window::before {
-      content: "";
+      content: '';
       width: 1px;
       height: 1.25rem;
       margin-inline: 0.25rem 0.375rem;
@@ -95,8 +94,7 @@
     color: var(--sprout-text);
     font-family: var(--sprout-font);
     font-size: var(--sprout-text-sm);
-    animation: sprout-file-viewer-panel-in var(--sprout-motion-normal, 180ms)
-      cubic-bezier(0.16, 1, 0.3, 1) both;
+    animation: sprout-file-viewer-panel-in var(--sprout-motion-normal, 180ms) cubic-bezier(0.16, 1, 0.3, 1) both;
   }
   .sprout-file-viewer-panel[hidden] {
     display: none;
@@ -144,7 +142,7 @@
     padding: 0.5rem 1rem;
     border-bottom: 1px solid var(--sprout-line);
   }
-  .sprout-file-viewer-toolbar[data-align="center"] {
+  .sprout-file-viewer-toolbar[data-align='center'] {
     justify-content: center;
     padding: 0.5rem;
   }
@@ -231,13 +229,12 @@
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
-    transition: opacity var(--sprout-motion-normal, 180ms)
-      var(--sprout-motion-ease, ease);
+    transition: opacity var(--sprout-motion-normal, 180ms) var(--sprout-motion-ease, ease);
   }
-  .sprout-file-image[data-state="loading"] {
+  .sprout-file-image[data-state='loading'] {
     opacity: 0;
   }
-  .sprout-file-image-stage[data-zoom="actual"] .sprout-file-image {
+  .sprout-file-image-stage[data-zoom='actual'] .sprout-file-image {
     flex-shrink: 0;
     max-width: none;
     max-height: none;
@@ -291,8 +288,7 @@
     gap: 0.75rem;
     padding: 0.75rem;
     background: var(--sprout-surface);
-    animation: sprout-file-viewer-in var(--sprout-motion-fast, 120ms)
-      var(--sprout-motion-ease, ease) both;
+    animation: sprout-file-viewer-in var(--sprout-motion-fast, 120ms) var(--sprout-motion-ease, ease) both;
   }
   .sprout-file-embed-slow p {
     margin: 0;
@@ -331,7 +327,7 @@
     color: var(--sprout-text);
     font-family: var(--sprout-font);
   }
-  .sprout-file-preview[data-kind="image"] {
+  .sprout-file-preview[data-kind='image'] {
     align-items: center;
     justify-content: center;
   }

package/dist/styles/form.css

@@ -60,11 +60,11 @@
     color: var(--sprout-text);
     font-family: var(--sprout-font);
   }
-  .sprout-form-footer[data-layout="bar"] {
+  .sprout-form-footer[data-layout='bar'] {
     padding-top: 1rem;
     border-top: 1px solid var(--sprout-line);
   }
-  .sprout-form-footer[data-layout="compact"] {
+  .sprout-form-footer[data-layout='compact'] {
     padding-top: 0.75rem;
   }
   .sprout-form-footer-row {
@@ -75,7 +75,7 @@
     gap: 0.5rem 1rem;
     min-width: 0;
   }
-  .sprout-form-footer[data-layout="compact"] .sprout-form-footer-row {
+  .sprout-form-footer[data-layout='compact'] .sprout-form-footer-row {
     column-gap: 0.25rem;
   }
   .sprout-form-footer-status {

package/dist/styles/glass-banner.css

@@ -71,28 +71,10 @@
     font-family: var(--sprout-font);
     color: var(--sprout-glass-banner-ink);
     background:
-      radial-gradient(
-        ellipse 22% 85% at 64% 50%,
-        var(--sprout-glass-banner-glow),
-        transparent 70%
-      ),
-      radial-gradient(
-        circle at 64% 50%,
-        transparent 0 38%,
-        var(--sprout-glass-banner-ring) 38.2%,
-        transparent 38.8%
-      ),
-      radial-gradient(
-        circle at 64% 50%,
-        transparent 0 52%,
-        var(--sprout-glass-banner-ring) 52.2%,
-        transparent 52.8%
-      ),
-      linear-gradient(
-        115deg,
-        var(--sprout-glass-banner-base-a),
-        var(--sprout-glass-banner-base-b)
-      );
+      radial-gradient(ellipse 22% 85% at 64% 50%, var(--sprout-glass-banner-glow), transparent 70%),
+      radial-gradient(circle at 64% 50%, transparent 0 38%, var(--sprout-glass-banner-ring) 38.2%, transparent 38.8%),
+      radial-gradient(circle at 64% 50%, transparent 0 52%, var(--sprout-glass-banner-ring) 52.2%, transparent 52.8%),
+      linear-gradient(115deg, var(--sprout-glass-banner-base-a), var(--sprout-glass-banner-base-b));
     box-shadow: inset 0 0 0 1px var(--sprout-glass-banner-edge);
   }
 
@@ -108,11 +90,7 @@
     position: absolute;
     border: 1px solid var(--sprout-glass-banner-ring);
     border-radius: 9999px;
-    background: radial-gradient(
-      circle at 30% 28%,
-      var(--sprout-glass-banner-glow),
-      var(--sprout-glass-bubble) 75%
-    );
+    background: radial-gradient(circle at 30% 28%, var(--sprout-glass-banner-glow), var(--sprout-glass-bubble) 75%);
   }
   .sprout-glass-bubble:nth-child(1) {
     left: 6%;
@@ -200,11 +178,7 @@
     padding: 0.25rem 0.875rem 0.25rem 0.25rem;
     border: 1px solid var(--sprout-glass-chip-edge);
     border-radius: 9999px;
-    background: linear-gradient(
-      180deg,
-      var(--sprout-glass-chip-top),
-      var(--sprout-glass-chip-bottom)
-    );
+    background: linear-gradient(180deg, var(--sprout-glass-chip-top), var(--sprout-glass-chip-bottom));
     box-shadow:
       inset 0 1px 0 var(--sprout-glass-chip-edge),
       inset 0 -2px 6px var(--sprout-glass-chip-inner),
@@ -261,34 +235,25 @@
     .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip {
       position: absolute;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(1) {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(1) {
       right: 9%;
       top: 15%;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(1)
-      .sprout-glass-chip-surface {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(1) .sprout-glass-chip-surface {
       rotate: 3deg;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(2) {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(2) {
       left: 7%;
       top: 58%;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(2)
-      .sprout-glass-chip-surface {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(2) .sprout-glass-chip-surface {
       rotate: -4deg;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(3) {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(3) {
       left: 47%;
       top: 72%;
     }
-    .sprout-glass-banner-chips:not(:has(> :nth-child(4)))
-      > .sprout-glass-chip:nth-child(3)
-      .sprout-glass-chip-surface {
+    .sprout-glass-banner-chips:not(:has(> :nth-child(4))) > .sprout-glass-chip:nth-child(3) .sprout-glass-chip-surface {
       rotate: 1.5deg;
     }
   }

package/dist/styles/gradient-banner.css

@@ -30,28 +30,28 @@
     color: var(--sprout-gradient-banner-ink);
   }
 
-  .sprout-gradient-banner[data-variant="citrus"] {
+  .sprout-gradient-banner[data-variant='citrus'] {
     --sprout-gradient-banner-base: #fbd65c;
     --sprout-gradient-banner-shadow: #ec986f;
     --sprout-gradient-banner-glow: #fff5b5;
     --sprout-gradient-banner-bloom: #f6b9c8;
     --sprout-gradient-banner-fold-angle: 28deg;
   }
-  .sprout-gradient-banner[data-variant="lagoon"] {
+  .sprout-gradient-banner[data-variant='lagoon'] {
     --sprout-gradient-banner-base: #18bec4;
     --sprout-gradient-banner-shadow: #007e83;
     --sprout-gradient-banner-glow: #c8f2a3;
     --sprout-gradient-banner-bloom: #43bf79;
     --sprout-gradient-banner-fold-angle: -65deg;
   }
-  .sprout-gradient-banner[data-variant="iris"] {
+  .sprout-gradient-banner[data-variant='iris'] {
     --sprout-gradient-banner-base: #bca3ef;
     --sprout-gradient-banner-shadow: #7968d7;
     --sprout-gradient-banner-glow: #dceffd;
     --sprout-gradient-banner-bloom: #ecb6ec;
   }
   /* Deep blue art: text placed straight on it switches to pearl. */
-  .sprout-gradient-banner[data-variant="cobalt"] {
+  .sprout-gradient-banner[data-variant='cobalt'] {
     --sprout-gradient-banner-ink: var(--sprout-gradient-banner-pearl);
     --sprout-gradient-banner-base: #2268b7;
     --sprout-gradient-banner-shadow: #102c6b;
@@ -62,7 +62,7 @@
     --sprout-gradient-banner-light-angle: -8deg;
     --sprout-gradient-banner-light-opacity: 0.35;
   }
-  .sprout-gradient-banner[data-variant="mint"] {
+  .sprout-gradient-banner[data-variant='mint'] {
     --sprout-gradient-banner-base: #e0ebce;
     --sprout-gradient-banner-shadow: #9bcaba;
     --sprout-gradient-banner-glow: #fcf7d5;
@@ -71,20 +71,15 @@
     --sprout-gradient-banner-fold-opacity: 0.35;
   }
 
-  .sprout-gradient-banner[data-size="sm"] {
+  .sprout-gradient-banner[data-size='sm'] {
     min-height: 6rem;
     padding: 1rem;
     border-radius: 0.5rem;
   }
-  .sprout-gradient-banner[data-size="md"] {
+  .sprout-gradient-banner[data-size='md'] {
     min-height: 10rem;
     padding: 1.25rem;
   }
-  .sprout-gradient-banner[data-size="xl"] {
-    min-height: 22.5rem;
-    padding: 2rem;
-    border-radius: 1rem;
-  }
 
   .sprout-gradient-banner-art {
     position: absolute;
@@ -94,21 +89,9 @@
     border-radius: inherit;
     pointer-events: none;
     background:
-      radial-gradient(
-        ellipse at 76% 0%,
-        var(--sprout-gradient-banner-glow),
-        transparent 46%
-      ),
-      radial-gradient(
-        ellipse at 5% 90%,
-        var(--sprout-gradient-banner-bloom),
-        transparent 56%
-      ),
-      radial-gradient(
-        ellipse at 100% 100%,
-        var(--sprout-gradient-banner-shadow),
-        transparent 58%
-      ),
+      radial-gradient(ellipse at 76% 0%, var(--sprout-gradient-banner-glow), transparent 46%),
+      radial-gradient(ellipse at 5% 90%, var(--sprout-gradient-banner-bloom), transparent 56%),
+      radial-gradient(ellipse at 100% 100%, var(--sprout-gradient-banner-shadow), transparent 58%),
       var(--sprout-gradient-banner-base);
     box-shadow: inset 0 0 0 1px var(--sprout-gradient-banner-edge);
   }
@@ -145,12 +128,7 @@
     inset: -30% -10%;
     transform: rotate(var(--sprout-gradient-banner-light-angle));
     background:
-      radial-gradient(
-        ellipse at 72% 12%,
-        transparent 36%,
-        var(--sprout-gradient-banner-pearl) 37%,
-        transparent 44%
-      ),
+      radial-gradient(ellipse at 72% 12%, transparent 36%, var(--sprout-gradient-banner-pearl) 37%, transparent 44%),
       linear-gradient(
         100deg,
         transparent 35%,
@@ -195,7 +173,7 @@
     overflow-wrap: anywhere;
     box-shadow: 0 1px 2px rgb(24 24 24 / 0.05);
   }
-  .sprout-gradient-banner-panel[data-tone="dark"] {
+  .sprout-gradient-banner-panel[data-tone='dark'] {
     background: var(--sprout-gradient-banner-night);
     color: var(--sprout-gradient-banner-paper);
   }
@@ -220,7 +198,7 @@
   .sprout-gradient-banner-badge > svg {
     flex-shrink: 0;
   }
-  [data-tone="dark"] .sprout-gradient-banner-badge {
+  [data-tone='dark'] .sprout-gradient-banner-badge {
     background: var(--sprout-gradient-banner-badge-dark);
     color: var(--sprout-gradient-banner-paper);
   }
@@ -232,7 +210,7 @@
     border-radius: 9999px;
     background: var(--sprout-gradient-banner-badge-light);
   }
-  [data-tone="dark"] .sprout-gradient-banner-progress {
+  [data-tone='dark'] .sprout-gradient-banner-progress {
     background: var(--sprout-gradient-banner-badge-dark);
   }
   .sprout-gradient-banner-progress-fill {
@@ -241,10 +219,9 @@
     background: currentColor;
     transform: scaleX(var(--sprout-gradient-banner-progress, 0));
     transform-origin: left;
-    transition: transform var(--sprout-motion-normal, 180ms)
-      var(--sprout-motion-ease, ease-out);
+    transition: transform var(--sprout-motion-normal, 180ms) var(--sprout-motion-ease, ease-out);
   }
-  [dir="rtl"] .sprout-gradient-banner-progress-fill {
+  [dir='rtl'] .sprout-gradient-banner-progress-fill {
     transform-origin: right;
   }
 

package/dist/styles/hover-card.css

@@ -67,28 +67,22 @@
       opacity: 0;
       scale: 0.95;
     }
-    .sprout-hover-card-content[data-side="bottom"]:is(
-        [data-starting-style],
-        [data-ending-style]
-      ) {
+    .sprout-hover-card-content[data-side='bottom']:is([data-starting-style], [data-ending-style]) {
       translate: 0 calc(var(--sprout-hover-card-shift) * -1);
     }
-    .sprout-hover-card-content[data-side="top"]:is(
+    .sprout-hover-card-content[data-side='top']:is([data-starting-style], [data-ending-style]) {
+      translate: 0 var(--sprout-hover-card-shift);
+    }
+    .sprout-hover-card-content:is([data-side='right'], [data-side='inline-end']):is(
         [data-starting-style],
         [data-ending-style]
       ) {
-      translate: 0 var(--sprout-hover-card-shift);
-    }
-    .sprout-hover-card-content:is(
-        [data-side="right"],
-        [data-side="inline-end"]
-      ):is([data-starting-style], [data-ending-style]) {
       translate: calc(var(--sprout-hover-card-shift) * -1) 0;
     }
-    .sprout-hover-card-content:is(
-        [data-side="left"],
-        [data-side="inline-start"]
-      ):is([data-starting-style], [data-ending-style]) {
+    .sprout-hover-card-content:is([data-side='left'], [data-side='inline-start']):is(
+        [data-starting-style],
+        [data-ending-style]
+      ) {
       translate: var(--sprout-hover-card-shift) 0;
     }
   }