@tulipfarm/sprout 0.3.1 → 0.5.0

package/dist/styles/button.css

@@ -7,7 +7,7 @@
     align-items: center;
     justify-content: center;
     gap: 6px;
-    height: 28px;
+    height: var(--sprout-control-height);
     padding: 0 10px;
     border: 1px solid transparent;
     border-radius: var(--sprout-radius-control);
@@ -28,7 +28,7 @@
     flex-shrink: 0;
     pointer-events: none;
   }
-  .sprout-button svg:not([class*="size-"]) {
+  .sprout-button svg:not([class*='size-']) {
     width: var(--sprout-button-icon);
     height: var(--sprout-button-icon);
   }
@@ -38,14 +38,14 @@
   }
   .sprout-button:disabled,
   .sprout-button[data-disabled],
-  .sprout-button[aria-disabled="true"] {
+  .sprout-button[aria-disabled='true'] {
     pointer-events: none;
     opacity: 0.5;
   }
-  .sprout-button[aria-busy="true"] {
+  .sprout-button[aria-busy='true'] {
     cursor: progress;
   }
-  .sprout-button[aria-invalid="true"] {
+  .sprout-button[aria-invalid='true'] {
     border-color: var(--sprout-danger);
   }
 
@@ -68,7 +68,7 @@
     background: var(--sprout-hover);
   }
   .sprout-button-variant-outline:active,
-  .sprout-button-variant-outline[aria-expanded="true"] {
+  .sprout-button-variant-outline[aria-expanded='true'] {
     background: var(--sprout-active);
   }
   .sprout-button-variant-secondary {
@@ -76,7 +76,7 @@
   }
   .sprout-button-variant-secondary:hover,
   .sprout-button-variant-secondary:active,
-  .sprout-button-variant-secondary[aria-expanded="true"] {
+  .sprout-button-variant-secondary[aria-expanded='true'] {
     background: var(--sprout-active);
   }
   .sprout-button-variant-ghost {
@@ -84,8 +84,8 @@
     color: var(--sprout-muted);
   }
   .sprout-button-variant-ghost:hover,
-  .sprout-button-variant-ghost[aria-expanded="true"],
-  .sprout-button-variant-ghost[aria-pressed="true"] {
+  .sprout-button-variant-ghost[aria-expanded='true'],
+  .sprout-button-variant-ghost[aria-pressed='true'] {
     background: var(--sprout-hover);
     color: var(--sprout-text);
   }
@@ -104,6 +104,17 @@
   .sprout-button-variant-destructive:focus-visible {
     outline-color: var(--sprout-danger);
   }
+  .sprout-button-variant-ghost-destructive {
+    background: transparent;
+    color: var(--sprout-danger);
+  }
+  .sprout-button-variant-ghost-destructive:hover,
+  .sprout-button-variant-ghost-destructive:active {
+    background: color-mix(in srgb, var(--sprout-danger) 10%, transparent);
+  }
+  .sprout-button-variant-ghost-destructive:focus-visible {
+    outline-color: var(--sprout-danger);
+  }
   .sprout-button-variant-link {
     background: transparent;
     color: var(--sprout-primary);
@@ -118,162 +129,35 @@
   }
   .sprout-button-variant-scope:hover,
   .sprout-button-variant-scope:active,
-  .sprout-button-variant-scope[aria-expanded="true"] {
+  .sprout-button-variant-scope[aria-expanded='true'] {
     background: color-mix(in srgb, var(--sprout-info) 16%, transparent);
   }
 
-  .sprout-button-size-default:has([data-icon="inline-start"]),
-  .sprout-button-size-lg:has([data-icon="inline-start"]) {
+  .sprout-button-size-md:has([data-icon='inline-start']),
+  .sprout-button-size-lg:has([data-icon='inline-start']) {
     padding-inline-start: 8px;
   }
-  .sprout-button-size-default:has([data-icon="inline-end"]),
-  .sprout-button-size-lg:has([data-icon="inline-end"]) {
+  .sprout-button-size-md:has([data-icon='inline-end']),
+  .sprout-button-size-lg:has([data-icon='inline-end']) {
     padding-inline-end: 8px;
   }
-  .sprout-button-size-xs {
-    --sprout-button-icon: 0.75rem;
-    gap: 4px;
-    height: 24px;
-    padding: 0 8px;
-    border-radius: min(var(--sprout-radius-control), 10px);
-    font-size: var(--sprout-text-xs);
-  }
   .sprout-button-size-sm {
     --sprout-button-icon: 0.875rem;
     gap: 4px;
+    height: calc(var(--sprout-control-height) - 4px);
     padding: 0 10px;
     border-radius: min(var(--sprout-radius-control), 12px);
     font-size: var(--sprout-text-xs);
+    line-height: 16px;
   }
-  .sprout-button-size-xs:has([data-icon="inline-start"]),
-  .sprout-button-size-sm:has([data-icon="inline-start"]) {
+  .sprout-button-size-sm:has([data-icon='inline-start']) {
     padding-inline-start: 6px;
   }
-  .sprout-button-size-xs:has([data-icon="inline-end"]),
-  .sprout-button-size-sm:has([data-icon="inline-end"]) {
+  .sprout-button-size-sm:has([data-icon='inline-end']) {
     padding-inline-end: 6px;
   }
   .sprout-button-size-lg {
-    height: 36px;
-  }
-  .sprout-button-size-back {
-    --sprout-button-icon: 0.875rem;
-    gap: 4px;
-    padding: 0 10px 0 6px;
-    border-radius: min(var(--sprout-radius-control), 12px);
-    font-size: var(--sprout-text-xs);
-  }
-  .sprout-button-size-onboarding {
-    gap: 8px;
-    width: 100%;
-    height: 44px;
-    padding: 0 16px;
-    font-size: var(--sprout-text-base);
-  }
-  .sprout-button-size-bud,
-  .sprout-button-size-bud-labeled {
-    border-radius: 999px;
-    cursor: grab;
-    touch-action: none;
-  }
-  .sprout-button-size-bud:active,
-  .sprout-button-size-bud-labeled:active {
-    cursor: grabbing;
-  }
-  .sprout-button-size-bud {
-    width: 64px;
-    height: 64px;
-    padding: 0;
-  }
-  .sprout-button-size-bud-labeled {
-    gap: 8px;
-    height: 48px;
-    padding: 0 16px 0 8px;
-  }
-  .sprout-button-size-chat-row {
-    justify-content: space-between;
-    gap: 16px;
-    width: 100%;
-    min-width: 0;
-    height: 44px;
-    padding: 0 12px;
-    color: var(--sprout-text);
-    text-align: start;
-  }
-  .sprout-button-size-task-link {
-    justify-content: flex-start;
-    min-width: 0;
-    max-width: 100%;
-    height: auto;
-    min-height: 32px;
-    padding-block: 4px;
-    text-align: start;
-    white-space: normal;
-  }
-  .sprout-button-size-card-title {
-    justify-content: flex-start;
-    gap: 8px;
-    width: 100%;
-    min-width: 0;
-    height: 40px;
-    padding: 0;
-    color: var(--sprout-text);
-    text-align: start;
-    white-space: normal;
-  }
-  .sprout-button-size-result-card {
-    height: 32px;
-    padding: 0 12px;
-  }
-  .sprout-button-size-calendar-title {
-    gap: 4px;
-    height: 32px;
-    padding: 0 4px;
-    color: var(--sprout-text);
-    letter-spacing: -0.015em;
-  }
-  .sprout-button-size-calendar {
-    height: 32px;
-    padding: 0 8px;
-    font-size: var(--sprout-text-xs);
-  }
-  .sprout-button-size-calendar-icon {
-    width: 32px;
-    height: 32px;
-    padding: 0;
-  }
-  .sprout-button-size-nav {
-    justify-content: flex-start;
-    gap: 8px;
-    width: 100%;
-    height: 32px;
-    text-align: start;
-  }
-  .sprout-button-size-column-header,
-  .sprout-button-size-column-header-end {
-    --sprout-button-icon: 0.875rem;
-    gap: 4px;
-    padding: 0 8px;
-  }
-  .sprout-button-size-column-header {
-    margin-inline-start: -8px;
-  }
-  .sprout-button-size-column-header-end {
-    flex-direction: row-reverse;
-    margin-inline-end: -8px;
-  }
-  .sprout-button-size-table-link {
-    justify-content: flex-start;
-    min-width: 0;
-    height: auto;
-    padding: 2px 0;
-    text-align: start;
-  }
-  .sprout-button-size-badge {
-    min-width: 0;
-    max-width: 176px;
-    padding: 0 10px;
-    border-radius: 999px;
+    height: calc(var(--sprout-control-height) + 4px);
   }
   .sprout-button-size-icon,
   .sprout-button-size-icon-xs,
@@ -282,8 +166,8 @@
     padding: 0;
   }
   .sprout-button-size-icon {
-    width: 32px;
-    height: 32px;
+    width: var(--sprout-control-height);
+    height: var(--sprout-control-height);
   }
   .sprout-button-size-icon-xs {
     --sprout-button-icon: 0.75rem;
@@ -292,18 +176,17 @@
     border-radius: min(var(--sprout-radius-control), 10px);
   }
   .sprout-button-size-icon-sm {
-    width: 28px;
-    height: 28px;
+    width: calc(var(--sprout-control-height) - 4px);
+    height: calc(var(--sprout-control-height) - 4px);
     border-radius: min(var(--sprout-radius-control), 12px);
   }
   .sprout-button-size-icon-lg {
-    width: 36px;
-    height: 36px;
+    width: calc(var(--sprout-control-height) + 4px);
+    height: calc(var(--sprout-control-height) + 4px);
   }
-  [data-slot="button-group"] .sprout-button-size-xs,
-  [data-slot="button-group"] .sprout-button-size-sm,
-  [data-slot="button-group"] .sprout-button-size-icon-xs,
-  [data-slot="button-group"] .sprout-button-size-icon-sm {
+  [data-slot='button-group'] .sprout-button-size-sm,
+  [data-slot='button-group'] .sprout-button-size-icon-xs,
+  [data-slot='button-group'] .sprout-button-size-icon-sm {
     border-radius: var(--sprout-radius-control);
   }
 
@@ -317,23 +200,21 @@
     font-family: var(--sprout-font);
   }
   /* Long labels such as "Add #channel to execution limits" wrap instead of overflowing. */
-  .sprout-button-action
-    > :is(
-      .sprout-button-size-default,
-      .sprout-button-size-sm,
-      .sprout-button-size-lg
-    ),
+  .sprout-button-action > :is(.sprout-button-size-md, .sprout-button-size-sm, .sprout-button-size-lg),
   .sprout-action-group-row > .sprout-button {
     max-width: 100%;
     height: auto;
-    min-height: 28px;
+    min-height: var(--sprout-control-height);
     padding-block: 3px;
     white-space: normal;
     overflow-wrap: anywhere;
     text-align: center;
   }
+  .sprout-button-action > .sprout-button-size-sm {
+    min-height: calc(var(--sprout-control-height) - 4px);
+  }
   .sprout-button-action > .sprout-button-size-lg {
-    min-height: 36px;
+    min-height: calc(var(--sprout-control-height) + 4px);
   }
   .sprout-action-group-row {
     display: flex;
@@ -348,17 +229,6 @@
     max-width: 100%;
   }
 
-  @media (min-width: 640px) {
-    .sprout-button-size-calendar-title {
-      font-size: 1.125rem;
-    }
-  }
-  @media (max-width: 639px) {
-    .sprout-button-size-back {
-      width: 28px;
-      padding-inline: 0;
-    }
-  }
   @media (pointer: coarse) {
     .sprout-button,
     .sprout-button-action > .sprout-button,

package/dist/styles/calendar.css

@@ -14,12 +14,12 @@
     line-height: 1.25rem;
   }
   /* Inside a popover or card the host owns the surface and padding. */
-  [data-slot="popover-content"] > .sprout-calendar {
+  [data-slot='popover-content'] > .sprout-calendar {
     width: 100%;
     padding: 0;
     background: transparent;
   }
-  [data-slot="card-content"] .sprout-calendar {
+  [data-slot='card-content'] .sprout-calendar {
     background: transparent;
   }
 
@@ -61,7 +61,7 @@
     border-radius: var(--sprout-calendar-radius);
     pointer-events: auto;
   }
-  .sprout-calendar-nav-button[aria-disabled="true"] {
+  .sprout-calendar-nav-button[aria-disabled='true'] {
     pointer-events: none;
     opacity: 0.5;
   }
@@ -69,9 +69,7 @@
     width: 1rem;
     height: 1rem;
   }
-  .sprout-calendar:dir(rtl):not([dir])
-    .sprout-calendar-nav-button
-    .sprout-calendar-chevron {
+  .sprout-calendar:dir(rtl):not([dir]) .sprout-calendar-nav-button .sprout-calendar-chevron {
     transform: rotate(180deg);
   }
 
@@ -173,12 +171,10 @@
     background: var(--sprout-calendar-band);
   }
   .sprout-calendar-range-start {
-    border-radius: var(--sprout-calendar-radius) 0 0
-      var(--sprout-calendar-radius);
+    border-radius: var(--sprout-calendar-radius) 0 0 var(--sprout-calendar-radius);
   }
   .sprout-calendar-range-end {
-    border-radius: 0 var(--sprout-calendar-radius) var(--sprout-calendar-radius)
-      0;
+    border-radius: 0 var(--sprout-calendar-radius) var(--sprout-calendar-radius) 0;
   }
   .sprout-calendar-range-start.sprout-calendar-range-end {
     border-radius: var(--sprout-calendar-radius);
@@ -186,15 +182,11 @@
   .sprout-calendar-range-middle {
     border-radius: 0;
   }
-  .sprout-calendar:dir(rtl)
-    .sprout-calendar-range-start:not(.sprout-calendar-range-end) {
-    border-radius: 0 var(--sprout-calendar-radius) var(--sprout-calendar-radius)
-      0;
+  .sprout-calendar:dir(rtl) .sprout-calendar-range-start:not(.sprout-calendar-range-end) {
+    border-radius: 0 var(--sprout-calendar-radius) var(--sprout-calendar-radius) 0;
   }
-  .sprout-calendar:dir(rtl)
-    .sprout-calendar-range-end:not(.sprout-calendar-range-start) {
-    border-radius: var(--sprout-calendar-radius) 0 0
-      var(--sprout-calendar-radius);
+  .sprout-calendar:dir(rtl) .sprout-calendar-range-end:not(.sprout-calendar-range-start) {
+    border-radius: var(--sprout-calendar-radius) 0 0 var(--sprout-calendar-radius);
   }
   .sprout-calendar-hidden {
     visibility: hidden;
@@ -234,23 +226,23 @@
   .sprout-calendar-today .sprout-calendar-day-button:hover {
     background: var(--sprout-active);
   }
-  .sprout-calendar-day-button[data-range-middle="true"] {
+  .sprout-calendar-day-button[data-range-middle='true'] {
     border-radius: 0;
     background: var(--sprout-calendar-band);
     color: var(--sprout-text);
   }
-  .sprout-calendar-day-button[data-range-middle="true"]:hover {
+  .sprout-calendar-day-button[data-range-middle='true']:hover {
     background: var(--sprout-active);
   }
-  .sprout-calendar-day-button[data-selected-single="true"],
-  .sprout-calendar-day-button[data-range-start="true"],
-  .sprout-calendar-day-button[data-range-end="true"] {
+  .sprout-calendar-day-button[data-selected-single='true'],
+  .sprout-calendar-day-button[data-range-start='true'],
+  .sprout-calendar-day-button[data-range-end='true'] {
     background: var(--sprout-primary);
     color: var(--sprout-on-primary);
   }
-  .sprout-calendar-day-button[data-selected-single="true"]:hover,
-  .sprout-calendar-day-button[data-range-start="true"]:hover,
-  .sprout-calendar-day-button[data-range-end="true"]:hover {
+  .sprout-calendar-day-button[data-selected-single='true']:hover,
+  .sprout-calendar-day-button[data-range-start='true']:hover,
+  .sprout-calendar-day-button[data-range-end='true']:hover {
     background: var(--sprout-primary-hover);
   }
   /* A selected run that wraps a week keeps rounded ends at the row edges. */
@@ -258,12 +250,8 @@
     border-start-end-radius: var(--sprout-calendar-radius);
     border-end-end-radius: var(--sprout-calendar-radius);
   }
-  .sprout-calendar:not([data-week-numbers])
-    .sprout-calendar-day:first-child[data-selected]
-    .sprout-calendar-day-button,
-  .sprout-calendar[data-week-numbers]
-    .sprout-calendar-day:nth-child(2)[data-selected]
-    .sprout-calendar-day-button {
+  .sprout-calendar:not([data-week-numbers]) .sprout-calendar-day:first-child[data-selected] .sprout-calendar-day-button,
+  .sprout-calendar[data-week-numbers] .sprout-calendar-day:nth-child(2)[data-selected] .sprout-calendar-day-button {
     border-start-start-radius: var(--sprout-calendar-radius);
     border-end-start-radius: var(--sprout-calendar-radius);
   }
@@ -278,13 +266,13 @@
   }
 
   @media (forced-colors: active) {
-    .sprout-calendar-day-button[data-selected-single="true"],
-    .sprout-calendar-day-button[data-range-start="true"],
-    .sprout-calendar-day-button[data-range-end="true"] {
+    .sprout-calendar-day-button[data-selected-single='true'],
+    .sprout-calendar-day-button[data-range-start='true'],
+    .sprout-calendar-day-button[data-range-end='true'] {
       outline: 2px solid Highlight;
       outline-offset: -1px;
     }
-    .sprout-calendar-day-button[data-range-middle="true"] {
+    .sprout-calendar-day-button[data-range-middle='true'] {
       outline: 1px dashed Highlight;
       outline-offset: -1px;
     }

package/dist/styles/canvas.css

@@ -128,9 +128,8 @@
     position: absolute;
     inset: 6px 4px;
     border-radius: calc(var(--sprout-radius-control) - 2px);
-    content: "";
-    transition: background-color var(--sprout-motion-fast)
-      var(--sprout-motion-ease);
+    content: '';
+    transition: background-color var(--sprout-motion-fast) var(--sprout-motion-ease);
   }
   .sprout-canvas-tab[data-hover],
   .sprout-canvas-tab-close[data-hover] {

package/dist/styles/card.css

@@ -1,31 +1,18 @@
 @layer base {
   :root,
   .light {
-    --sprout-card-raised: color-mix(
-      in oklab,
-      var(--sprout-text) 3%,
-      var(--sprout-surface)
-    );
-    --sprout-card-raised-shadow:
-      0 1px 3px rgb(24 24 24 / 0.08), 0 1px 2px -1px rgb(24 24 24 / 0.06);
+    --sprout-card-raised: color-mix(in oklab, var(--sprout-text) 3%, var(--sprout-surface));
+    --sprout-card-raised-shadow: 0 1px 3px rgb(24 24 24 / 0.08), 0 1px 2px -1px rgb(24 24 24 / 0.06);
   }
 
   .dark {
-    --sprout-card-raised: color-mix(
-      in oklab,
-      var(--sprout-text) 8%,
-      var(--sprout-surface)
-    );
+    --sprout-card-raised: color-mix(in oklab, var(--sprout-text) 8%, var(--sprout-surface));
     --sprout-card-raised-shadow: none;
   }
 
   @media (prefers-color-scheme: dark) {
     :root:not(.light):not(.dark) {
-      --sprout-card-raised: color-mix(
-        in oklab,
-        var(--sprout-text) 8%,
-        var(--sprout-surface)
-      );
+      --sprout-card-raised: color-mix(in oklab, var(--sprout-text) 8%, var(--sprout-surface));
       --sprout-card-raised-shadow: none;
     }
   }
@@ -59,10 +46,7 @@
   }
 
   /* The footer is flush with the bottom edge, even inside a wrapper. */
-  .sprout-card:has(
-    > [data-slot="card-footer"],
-    > :not([data-slot]) > [data-slot="card-footer"]
-  ) {
+  .sprout-card:has(> [data-slot='card-footer'], > :not([data-slot]) > [data-slot='card-footer']) {
     padding-bottom: 0;
   }
   .sprout-card:has(> img:first-child) {
@@ -83,11 +67,11 @@
     min-width: 0;
     padding-inline: var(--sprout-card-spacing);
   }
-  .sprout-card-header:has(> [data-slot="card-action"]) {
+  .sprout-card-header:has(> [data-slot='card-action']) {
     grid-template-columns: minmax(0, 1fr) auto;
     column-gap: 12px;
   }
-  .sprout-card-header:has(> [data-slot="card-description"]) {
+  .sprout-card-header:has(> [data-slot='card-description']) {
     grid-template-rows: auto auto;
   }
   .sprout-card-header.border-b {

package/dist/styles/carousel.css

@@ -14,13 +14,13 @@
   .sprout-carousel-content::-webkit-scrollbar {
     display: none;
   }
-  .sprout-carousel-content[data-orientation="horizontal"] {
+  .sprout-carousel-content[data-orientation='horizontal'] {
     overflow-y: hidden;
     overscroll-behavior-x: contain;
     scroll-snap-type: x mandatory;
     touch-action: pan-x pinch-zoom;
   }
-  .sprout-carousel-content[data-orientation="vertical"] {
+  .sprout-carousel-content[data-orientation='vertical'] {
     height: 100%;
     min-height: 0;
     overflow-x: hidden;
@@ -45,8 +45,7 @@
     display: flex;
     gap: var(--sprout-carousel-gap, 16px);
   }
-  .sprout-carousel-content[data-orientation="vertical"]
-    > .sprout-carousel-track {
+  .sprout-carousel-content[data-orientation='vertical'] > .sprout-carousel-track {
     flex-direction: column;
     height: 100%;
   }
@@ -58,10 +57,10 @@
     min-height: 0;
     scroll-snap-align: start;
   }
-  [data-align="center"] > .sprout-carousel-track > .sprout-carousel-item {
+  [data-align='center'] > .sprout-carousel-track > .sprout-carousel-item {
     scroll-snap-align: center;
   }
-  [data-align="end"] > .sprout-carousel-track > .sprout-carousel-item {
+  [data-align='end'] > .sprout-carousel-track > .sprout-carousel-item {
     scroll-snap-align: end;
   }
 
@@ -71,25 +70,25 @@
     box-shadow: var(--sprout-shadow-control);
     touch-action: manipulation;
   }
-  .sprout-carousel-control[data-orientation="horizontal"] {
+  .sprout-carousel-control[data-orientation='horizontal'] {
     inset-block: 0;
     margin-block: auto;
   }
-  .sprout-carousel-previous[data-orientation="horizontal"] {
+  .sprout-carousel-previous[data-orientation='horizontal'] {
     left: calc(-1 * var(--sprout-carousel-control-offset, 48px));
   }
-  .sprout-carousel-next[data-orientation="horizontal"] {
+  .sprout-carousel-next[data-orientation='horizontal'] {
     right: calc(-1 * var(--sprout-carousel-control-offset, 48px));
   }
-  .sprout-carousel-control[data-orientation="vertical"] {
+  .sprout-carousel-control[data-orientation='vertical'] {
     left: 50%;
     translate: -50% 0;
     rotate: 90deg;
   }
-  .sprout-carousel-previous[data-orientation="vertical"] {
+  .sprout-carousel-previous[data-orientation='vertical'] {
     top: calc(-1 * var(--sprout-carousel-control-offset, 48px));
   }
-  .sprout-carousel-next[data-orientation="vertical"] {
+  .sprout-carousel-next[data-orientation='vertical'] {
     bottom: calc(-1 * var(--sprout-carousel-control-offset, 48px));
   }
   @media (pointer: coarse) {