@tulipfarm/sprout 0.3.1 → 0.5.0

package/dist/styles/toggle-group.css

@@ -9,7 +9,7 @@
     max-width: 100%;
     border-radius: var(--sprout-radius-control);
   }
-  .sprout-toggle-group[data-orientation="vertical"] {
+  .sprout-toggle-group[data-orientation='vertical'] {
     flex-direction: column;
     align-items: stretch;
   }
@@ -23,8 +23,8 @@
     justify-content: center;
     gap: 6px;
     box-sizing: border-box;
-    height: 32px;
-    min-width: 32px;
+    height: var(--sprout-control-height);
+    min-width: var(--sprout-control-height);
     margin: 0;
     padding: 0 10px;
     border: 1px solid transparent;
@@ -46,14 +46,14 @@
     flex-shrink: 0;
     pointer-events: none;
   }
-  .sprout-toggle-group-item svg:not([class*="size-"]) {
+  .sprout-toggle-group-item svg:not([class*='size-']) {
     width: var(--sprout-toggle-group-icon);
     height: var(--sprout-toggle-group-icon);
   }
-  .sprout-toggle-group-item:has(> [data-icon="inline-start"]) {
+  .sprout-toggle-group-item:has(> [data-icon='inline-start']) {
     padding-inline-start: 8px;
   }
-  .sprout-toggle-group-item:has(> [data-icon="inline-end"]) {
+  .sprout-toggle-group-item:has(> [data-icon='inline-end']) {
     padding-inline-end: 8px;
   }
   .sprout-toggle-group-item:focus-visible {
@@ -86,66 +86,60 @@
   .sprout-toggle-group-item-size-sm {
     --sprout-toggle-group-icon: 0.875rem;
     gap: 4px;
-    height: 28px;
-    min-width: 28px;
+    height: calc(var(--sprout-control-height) - 4px);
+    min-width: calc(var(--sprout-control-height) - 4px);
     font-size: var(--sprout-text-xs);
     line-height: 16px;
   }
-  .sprout-toggle-group-item-size-sm:has(> [data-icon="inline-start"]) {
+  .sprout-toggle-group-item-size-sm:has(> [data-icon='inline-start']) {
     padding-inline-start: 6px;
   }
-  .sprout-toggle-group-item-size-sm:has(> [data-icon="inline-end"]) {
+  .sprout-toggle-group-item-size-sm:has(> [data-icon='inline-end']) {
     padding-inline-end: 6px;
   }
   .sprout-toggle-group-item-size-lg {
-    height: 36px;
-    min-width: 36px;
+    height: calc(var(--sprout-control-height) + 4px);
+    min-width: calc(var(--sprout-control-height) + 4px);
   }
 
   /* spacing={0} joins items into one segmented control. */
-  .sprout-toggle-group-item[data-spacing="0"] {
+  .sprout-toggle-group-item[data-spacing='0'] {
     padding-inline: 8px;
     border-radius: 0;
     box-shadow: none;
   }
-  .sprout-toggle-group[data-spacing="0"][data-variant="outline"] {
+  .sprout-toggle-group[data-spacing='0'][data-variant='outline'] {
     box-shadow: var(--sprout-shadow-control);
   }
-  .sprout-toggle-group-item[data-spacing="0"]:has(
-      > [data-icon="inline-start"]
-    ) {
+  .sprout-toggle-group-item[data-spacing='0']:has(> [data-icon='inline-start']) {
     padding-inline-start: 6px;
   }
-  .sprout-toggle-group-item[data-spacing="0"]:has(> [data-icon="inline-end"]) {
+  .sprout-toggle-group-item[data-spacing='0']:has(> [data-icon='inline-end']) {
     padding-inline-end: 6px;
   }
-  .sprout-toggle-group-item[data-spacing="0"][data-orientation="horizontal"]:first-child {
+  .sprout-toggle-group-item[data-spacing='0'][data-orientation='horizontal']:first-child {
     border-start-start-radius: var(--sprout-radius-control);
     border-end-start-radius: var(--sprout-radius-control);
   }
-  .sprout-toggle-group-item[data-spacing="0"][data-orientation="horizontal"]:last-child {
+  .sprout-toggle-group-item[data-spacing='0'][data-orientation='horizontal']:last-child {
     border-start-end-radius: var(--sprout-radius-control);
     border-end-end-radius: var(--sprout-radius-control);
   }
-  .sprout-toggle-group-item[data-spacing="0"][data-orientation="vertical"]:first-child {
+  .sprout-toggle-group-item[data-spacing='0'][data-orientation='vertical']:first-child {
     border-start-start-radius: var(--sprout-radius-control);
     border-start-end-radius: var(--sprout-radius-control);
   }
-  .sprout-toggle-group-item[data-spacing="0"][data-orientation="vertical"]:last-child {
+  .sprout-toggle-group-item[data-spacing='0'][data-orientation='vertical']:last-child {
     border-end-start-radius: var(--sprout-radius-control);
     border-end-end-radius: var(--sprout-radius-control);
   }
-  .sprout-toggle-group-item-outline[data-spacing="0"][data-orientation="horizontal"]:not(
-      :first-child
-    ) {
+  .sprout-toggle-group-item-outline[data-spacing='0'][data-orientation='horizontal']:not(:first-child) {
     border-inline-start-width: 0;
   }
-  .sprout-toggle-group-item-outline[data-spacing="0"][data-orientation="vertical"]:not(
-      :first-child
-    ) {
+  .sprout-toggle-group-item-outline[data-spacing='0'][data-orientation='vertical']:not(:first-child) {
     border-top-width: 0;
   }
-  .sprout-toggle-group-item[data-spacing="0"]:focus-visible {
+  .sprout-toggle-group-item[data-spacing='0']:focus-visible {
     outline-offset: -1px;
   }
 

package/dist/styles/toggle.css

@@ -8,8 +8,8 @@
     justify-content: center;
     gap: 4px;
     box-sizing: border-box;
-    height: 32px;
-    min-width: 32px;
+    height: var(--sprout-control-height);
+    min-width: var(--sprout-control-height);
     margin: 0;
     padding: 0 10px;
     border: 1px solid transparent;
@@ -32,14 +32,14 @@
     flex-shrink: 0;
     pointer-events: none;
   }
-  .sprout-toggle svg:not([class*="size-"]) {
+  .sprout-toggle svg:not([class*='size-']) {
     width: var(--sprout-toggle-icon);
     height: var(--sprout-toggle-icon);
   }
-  .sprout-toggle:has(> [data-icon="inline-start"]) {
+  .sprout-toggle:has(> [data-icon='inline-start']) {
     padding-inline-start: 8px;
   }
-  .sprout-toggle:has(> [data-icon="inline-end"]) {
+  .sprout-toggle:has(> [data-icon='inline-end']) {
     padding-inline-end: 8px;
   }
   .sprout-toggle:focus-visible {
@@ -52,7 +52,7 @@
     cursor: not-allowed;
     opacity: 0.5;
   }
-  .sprout-toggle[aria-busy="true"] {
+  .sprout-toggle[aria-busy='true'] {
     cursor: progress;
   }
   @media (hover: hover) {
@@ -66,10 +66,10 @@
     background-color: var(--sprout-primary-subtle);
     color: var(--sprout-primary);
   }
-  .sprout-toggle[aria-invalid="true"] {
+  .sprout-toggle[aria-invalid='true'] {
     border-color: var(--sprout-danger);
   }
-  .sprout-toggle[aria-invalid="true"]:focus-visible {
+  .sprout-toggle[aria-invalid='true']:focus-visible {
     outline-color: var(--sprout-danger);
   }
 
@@ -81,20 +81,20 @@
 
   .sprout-toggle-size-sm {
     --sprout-toggle-icon: 0.875rem;
-    height: 28px;
-    min-width: 28px;
+    height: calc(var(--sprout-control-height) - 4px);
+    min-width: calc(var(--sprout-control-height) - 4px);
     font-size: var(--sprout-text-xs);
     line-height: 16px;
   }
-  .sprout-toggle-size-sm:has(> [data-icon="inline-start"]) {
+  .sprout-toggle-size-sm:has(> [data-icon='inline-start']) {
     padding-inline-start: 6px;
   }
-  .sprout-toggle-size-sm:has(> [data-icon="inline-end"]) {
+  .sprout-toggle-size-sm:has(> [data-icon='inline-end']) {
     padding-inline-end: 6px;
   }
   .sprout-toggle-size-lg {
-    height: 36px;
-    min-width: 36px;
+    height: calc(var(--sprout-control-height) + 4px);
+    min-width: calc(var(--sprout-control-height) + 4px);
   }
 
   @media (prefers-reduced-motion: no-preference) {

package/dist/styles/tool-activity.css

@@ -57,16 +57,12 @@
     z-index: 1;
     inset: 0 0 auto;
     height: 20px;
-    content: "";
+    content: '';
     opacity: 0;
     pointer-events: none;
     background: linear-gradient(
       to bottom,
-      color-mix(
-        in srgb,
-        var(--sprout-activity-panel-fade, var(--sprout-surface)) 94%,
-        transparent
-      ),
+      color-mix(in srgb, var(--sprout-activity-panel-fade, var(--sprout-surface)) 94%, transparent),
       transparent
     );
     backdrop-filter: blur(3px);
@@ -141,7 +137,7 @@
     padding: 8px 0;
     font-size: var(--sprout-text-xs);
   }
-  .sprout-tool-activity-older[data-tone="danger"] {
+  .sprout-tool-activity-older[data-tone='danger'] {
     color: var(--sprout-danger);
   }
   .sprout-tool-activity-list {
@@ -195,8 +191,7 @@
     color: var(--sprout-muted);
     overflow-wrap: anywhere;
   }
-  .sprout-tool-activity-row[data-status="running"]
-    .sprout-tool-activity-label-text {
+  .sprout-tool-activity-row[data-status='running'] .sprout-tool-activity-label-text {
     color: var(--sprout-text);
   }
   .sprout-tool-activity-query,
@@ -218,7 +213,7 @@
     line-height: 1rem;
     overflow-wrap: anywhere;
   }
-  .sprout-tool-activity-detail[data-tone="danger"] {
+  .sprout-tool-activity-detail[data-tone='danger'] {
     color: var(--sprout-danger);
   }
   .sprout-tool-activity-details {
@@ -282,7 +277,7 @@
     height: 20px;
     object-fit: contain;
   }
-  .sprout-tool-activity-favicon[data-status="loading"] > img {
+  .sprout-tool-activity-favicon[data-status='loading'] > img {
     opacity: 0;
   }
   .sprout-tool-activity-source-title {
@@ -370,8 +365,7 @@
       transition: opacity var(--sprout-motion-fast) ease-out;
     }
     .sprout-tool-activity-row {
-      animation: sprout-tool-activity-in var(--sprout-motion-normal) ease-out
-        both;
+      animation: sprout-tool-activity-in var(--sprout-motion-normal) ease-out both;
     }
     .sprout-tool-activity-mark-arc {
       animation: sprout-tool-activity-spin 1s linear infinite;

package/dist/styles/toolbar-status.css

@@ -16,11 +16,7 @@
     max-width: 100%;
   }
   /* The darker tint keeps AA contrast on the hovered and open background. */
-  .sprout-toolbar-status-trigger[data-status="error"]:is(
-      :hover,
-      :active,
-      [data-popup-open]
-    ) {
+  .sprout-toolbar-status-trigger[data-status='error']:is(:hover, :active, [data-popup-open]) {
     background: color-mix(in srgb, var(--sprout-danger) 18%, transparent);
     color: var(--sprout-danger-hover);
   }
@@ -37,8 +33,7 @@
     gap: 2px;
     min-width: 0;
   }
-  .sprout-toolbar-status-content[data-status="error"]
-    .sprout-toolbar-status-title {
+  .sprout-toolbar-status-content[data-status='error'] .sprout-toolbar-status-title {
     color: var(--sprout-danger);
   }
 

package/dist/styles/tooltip.css

@@ -37,34 +37,34 @@
     background: var(--sprout-surface);
     rotate: 45deg;
   }
-  .sprout-tooltip-arrow[data-side="top"] {
+  .sprout-tooltip-arrow[data-side='top'] {
     bottom: -4.5px;
     border-top-color: transparent;
     border-left-color: transparent;
   }
-  .sprout-tooltip-arrow[data-side="bottom"] {
+  .sprout-tooltip-arrow[data-side='bottom'] {
     top: -4.5px;
     border-right-color: transparent;
     border-bottom-color: transparent;
   }
-  .sprout-tooltip-arrow:is([data-side="right"], [data-side="inline-end"]) {
+  .sprout-tooltip-arrow:is([data-side='right'], [data-side='inline-end']) {
     left: -4.5px;
     border-top-color: transparent;
     border-right-color: transparent;
   }
-  .sprout-tooltip-arrow:is([data-side="left"], [data-side="inline-start"]) {
+  .sprout-tooltip-arrow:is([data-side='left'], [data-side='inline-start']) {
     right: -4.5px;
     border-bottom-color: transparent;
     border-left-color: transparent;
   }
-  [dir="rtl"] .sprout-tooltip-arrow[data-side="inline-end"] {
+  [dir='rtl'] .sprout-tooltip-arrow[data-side='inline-end'] {
     right: -4.5px;
     left: auto;
     border: 1px solid var(--sprout-line);
     border-bottom-color: transparent;
     border-left-color: transparent;
   }
-  [dir="rtl"] .sprout-tooltip-arrow[data-side="inline-start"] {
+  [dir='rtl'] .sprout-tooltip-arrow[data-side='inline-start'] {
     left: -4.5px;
     right: auto;
     border: 1px solid var(--sprout-line);
@@ -91,28 +91,22 @@
       opacity: 0;
       scale: 0.96;
     }
-    .sprout-tooltip-content[data-side="top"]:is(
-        [data-starting-style],
-        [data-ending-style]
-      ) {
+    .sprout-tooltip-content[data-side='top']:is([data-starting-style], [data-ending-style]) {
       translate: 0 var(--sprout-tooltip-shift);
     }
-    .sprout-tooltip-content[data-side="bottom"]:is(
+    .sprout-tooltip-content[data-side='bottom']:is([data-starting-style], [data-ending-style]) {
+      translate: 0 calc(var(--sprout-tooltip-shift) * -1);
+    }
+    .sprout-tooltip-content:is([data-side='right'], [data-side='inline-end']):is(
         [data-starting-style],
         [data-ending-style]
       ) {
-      translate: 0 calc(var(--sprout-tooltip-shift) * -1);
-    }
-    .sprout-tooltip-content:is(
-        [data-side="right"],
-        [data-side="inline-end"]
-      ):is([data-starting-style], [data-ending-style]) {
       translate: calc(var(--sprout-tooltip-shift) * -1) 0;
     }
-    .sprout-tooltip-content:is(
-        [data-side="left"],
-        [data-side="inline-start"]
-      ):is([data-starting-style], [data-ending-style]) {
+    .sprout-tooltip-content:is([data-side='left'], [data-side='inline-start']):is(
+        [data-starting-style],
+        [data-ending-style]
+      ) {
       translate: var(--sprout-tooltip-shift) 0;
     }
     .sprout-tooltip-content[data-instant] {

package/dist/styles/view-switcher.css

@@ -0,0 +1,297 @@
+@layer components {
+  .sprout-view-switcher {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+    border-bottom: 1px solid var(--sprout-line);
+    font-family: var(--sprout-font);
+    container-type: inline-size;
+  }
+
+  .sprout-view-switcher-tabs.sprout-tabs {
+    display: flex;
+    flex: 0 1 auto;
+    min-width: 0;
+  }
+
+  .sprout-view-switcher-list.sprout-tabs-list {
+    --sprout-view-switcher-fade-start: 0px;
+    --sprout-view-switcher-fade-end: 0px;
+    justify-content: flex-start;
+    gap: 2px;
+    width: auto;
+    max-width: 100%;
+    height: calc(var(--sprout-control-height) + 8px);
+    padding: 0 2px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+    mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      #000 var(--sprout-view-switcher-fade-start),
+      #000 calc(100% - var(--sprout-view-switcher-fade-end)),
+      transparent 100%
+    );
+  }
+  .sprout-view-switcher-list::-webkit-scrollbar {
+    display: none;
+  }
+  .sprout-view-switcher-list[data-overflow-start] {
+    --sprout-view-switcher-fade-start: 24px;
+  }
+  .sprout-view-switcher-list[data-overflow-end] {
+    --sprout-view-switcher-fade-end: 24px;
+  }
+  .sprout-view-switcher-list:dir(rtl) {
+    mask-image: linear-gradient(
+      to left,
+      transparent 0,
+      #000 var(--sprout-view-switcher-fade-start),
+      #000 calc(100% - var(--sprout-view-switcher-fade-end)),
+      transparent 100%
+    );
+  }
+
+  .sprout-view-switcher-tab.sprout-tabs-trigger {
+    flex: none;
+    gap: 6px;
+    height: calc(var(--sprout-control-height) - 4px);
+    padding: 0 8px;
+    border: 0;
+    color: var(--sprout-muted);
+  }
+  .sprout-view-switcher-tab.sprout-tabs-trigger::after {
+    display: none;
+  }
+  .sprout-view-switcher-tab.sprout-tabs-trigger:focus-visible {
+    outline-offset: -2px;
+  }
+  .sprout-view-switcher-tab.sprout-tabs-trigger[data-active] {
+    color: var(--sprout-text);
+  }
+  .sprout-view-switcher-tab[data-closable] {
+    padding-inline-end: 4px;
+  }
+  @media (hover: hover) {
+    .sprout-view-switcher-tab.sprout-tabs-trigger:hover {
+      background: var(--sprout-hover);
+      color: var(--sprout-text);
+    }
+  }
+
+  .sprout-view-switcher-icon {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+  .sprout-view-switcher-tab .sprout-view-switcher-icon svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .sprout-view-switcher-close {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    border-radius: calc(var(--sprout-radius-control) - 2px);
+    color: var(--sprout-muted);
+    opacity: 0;
+    cursor: pointer;
+  }
+  .sprout-view-switcher-tab .sprout-view-switcher-close svg {
+    width: 12px;
+    height: 12px;
+    pointer-events: none;
+  }
+  .sprout-view-switcher-tab:focus-visible .sprout-view-switcher-close,
+  .sprout-view-switcher-tab:hover .sprout-view-switcher-close {
+    opacity: 1;
+  }
+  .sprout-view-switcher-close:hover {
+    background: var(--sprout-active);
+    color: var(--sprout-text);
+  }
+  @media (hover: none) {
+    .sprout-view-switcher-close {
+      opacity: 1;
+    }
+  }
+  /* With a pointer, the close button floats over the tab end instead of taking space, so gaps stay even. */
+  @media (hover: hover) {
+    .sprout-view-switcher-tab[data-closable] {
+      padding-inline-end: 8px;
+    }
+    .sprout-view-switcher-close {
+      position: absolute;
+      inset-inline-end: 4px;
+      top: 50%;
+      translate: 0 -50%;
+    }
+    .sprout-view-switcher-tab[data-closable]:is(:hover, :focus-visible) .sprout-view-switcher-label {
+      mask-image: linear-gradient(to left, transparent 14px, #000 24px);
+    }
+    .sprout-view-switcher-tab[data-closable]:is(:hover, :focus-visible) .sprout-view-switcher-label:dir(rtl) {
+      mask-image: linear-gradient(to right, transparent 14px, #000 24px);
+    }
+  }
+
+  .sprout-view-switcher-indicator {
+    position: absolute;
+    bottom: 0;
+    left: var(--active-tab-left);
+    width: var(--active-tab-width);
+    height: 2px;
+    border-radius: 2px 2px 0 0;
+    background: var(--sprout-text);
+    pointer-events: none;
+  }
+
+  .sprout-view-switcher-add.sprout-button {
+    flex: none;
+    color: var(--sprout-muted);
+  }
+  .sprout-view-switcher-add.sprout-button:hover,
+  .sprout-view-switcher-add.sprout-button[data-popup-open] {
+    color: var(--sprout-text);
+  }
+
+  .sprout-view-switcher-actions {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 4px;
+    margin-inline-start: auto;
+    padding-inline-start: 8px;
+  }
+
+  @container (max-width: 479px) {
+    .sprout-view-switcher-add-label {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    .sprout-view-switcher-add.sprout-button {
+      padding-inline: 6px;
+    }
+  }
+
+  .sprout-view-switcher-menu.sprout-dropdown-menu-content {
+    width: min(36rem, var(--available-width));
+    padding: 6px;
+    container-type: inline-size;
+  }
+  .sprout-view-switcher-options {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 2px;
+  }
+  @container (max-width: 479px) {
+    .sprout-view-switcher-options {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  .sprout-view-switcher-option.sprout-dropdown-menu-item {
+    align-items: flex-start;
+    gap: 10px;
+    padding: 8px;
+  }
+  .sprout-view-switcher-tile {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--sprout-radius-control);
+    background: var(--sprout-hover);
+    color: var(--sprout-text);
+  }
+  .sprout-view-switcher-option[data-highlighted] .sprout-view-switcher-tile {
+    background: var(--sprout-surface);
+    box-shadow: inset 0 0 0 1px var(--sprout-line);
+  }
+  .sprout-view-switcher-option-text {
+    display: grid;
+    flex: 1 1 auto;
+    gap: 2px;
+    min-width: 0;
+    padding-top: 1px;
+  }
+  .sprout-view-switcher-option-title {
+    font-weight: 500;
+    line-height: 1.25rem;
+  }
+  .sprout-view-switcher-option-note {
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+    overflow-wrap: anywhere;
+  }
+  .sprout-view-switcher-check {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-self: center;
+    color: var(--sprout-text);
+  }
+
+  .sprout-view-switcher-option.sprout-dropdown-menu-item[data-disabled] {
+    opacity: 1;
+    cursor: not-allowed;
+  }
+  .sprout-view-switcher-option[data-disabled] .sprout-view-switcher-tile {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px var(--sprout-line);
+    color: var(--sprout-muted);
+  }
+  .sprout-view-switcher-option[data-disabled] .sprout-view-switcher-option-title {
+    color: var(--sprout-muted);
+  }
+  .sprout-view-switcher-option-note[data-kind='unavailable'] {
+    white-space: normal;
+  }
+
+  .sprout-view-switcher-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  @media (forced-colors: active) {
+    .sprout-view-switcher-indicator {
+      background: Highlight;
+    }
+    .sprout-view-switcher-tile {
+      border: 1px solid CanvasText;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-view-switcher-indicator {
+      transition:
+        left var(--sprout-motion-normal) var(--sprout-motion-ease),
+        width var(--sprout-motion-normal) var(--sprout-motion-ease);
+    }
+    .sprout-view-switcher-close {
+      transition:
+        opacity var(--sprout-motion-fast) var(--sprout-motion-ease),
+        background-color var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+    .sprout-view-switcher-tile {
+      transition:
+        background-color var(--sprout-motion-fast) var(--sprout-motion-ease),
+        box-shadow var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+  }
+}