@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/styles/separator.css

@@ -0,0 +1,206 @@
+@layer components {
+  .sprout-separator {
+    flex-shrink: 0;
+    border: 0;
+    background: var(--sprout-line);
+  }
+  .sprout-separator[data-orientation="horizontal"] {
+    width: 100%;
+    height: 1px;
+  }
+  .sprout-separator[data-orientation="vertical"] {
+    width: 1px;
+    min-height: 1rem;
+    align-self: stretch;
+  }
+  .sprout-separator[data-tone="input"] {
+    background: var(--sprout-input);
+  }
+
+  .sprout-separator-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    min-height: 20px;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+  }
+  .sprout-separator-label-line {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 12px;
+  }
+  .sprout-separator-label-content {
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: calc(100% - 40px);
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-separator {
+      transition: background-color var(--sprout-motion-fast)
+        var(--sprout-motion-ease);
+    }
+  }
+
+  .sprout-separator-fade,
+  .sprout-separator-fade-shine {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+  }
+  .sprout-separator-fade {
+    position: relative;
+    width: 100%;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+  }
+  .sprout-separator-fade::before,
+  .sprout-separator-fade::after,
+  .sprout-separator-fade-shine::before,
+  .sprout-separator-fade-shine::after {
+    content: "";
+    flex: 1 1 0;
+    min-width: 12px;
+    height: 1px;
+  }
+  .sprout-separator-fade::before {
+    background: linear-gradient(to right, transparent, var(--sprout-line));
+  }
+  .sprout-separator-fade::after {
+    background: linear-gradient(to left, transparent, var(--sprout-line));
+  }
+  .sprout-separator-fade-label {
+    flex: 0 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sprout-separator-fade-shine {
+    position: absolute;
+    inset: 0;
+    color: var(--sprout-text);
+    opacity: 0;
+    pointer-events: none;
+    mask-image: linear-gradient(to right, transparent, black, transparent);
+    mask-size: 25% 100%;
+    mask-repeat: no-repeat;
+    mask-position: -34% 0;
+  }
+  .sprout-separator-fade-shine::before,
+  .sprout-separator-fade-shine::after {
+    background: var(--sprout-text);
+  }
+
+  @keyframes sprout-separator-fade-shine {
+    0% {
+      mask-position: -34% 0;
+      opacity: 0;
+    }
+    20%,
+    80% {
+      opacity: 0.7;
+    }
+    100% {
+      mask-position: 134% 0;
+      opacity: 0;
+    }
+  }
+
+  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
+    .sprout-separator-fade:hover > .sprout-separator-fade-shine {
+      animation: sprout-separator-fade-shine 650ms ease-out both;
+    }
+  }
+
+  .sprout-separator-marker {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-width: 0;
+    min-height: 16px;
+    color: var(--sprout-muted);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    text-align: left;
+  }
+  .sprout-separator-marker :where(svg:not([class*="size-"])) {
+    width: 16px;
+    height: 16px;
+  }
+
+  .sprout-separator-marker-border {
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--sprout-line);
+  }
+
+  .sprout-separator-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+  }
+  .sprout-separator-icon :where(svg:not([class*="size-"])) {
+    width: 16px;
+    height: 16px;
+  }
+
+  .sprout-separator-content {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  a.sprout-separator-marker,
+  .sprout-separator-content > a {
+    text-decoration-line: underline;
+    text-underline-offset: 3px;
+    border-radius: 2px;
+  }
+  .sprout-separator-content > a {
+    color: inherit;
+  }
+  a.sprout-separator-marker:hover,
+  .sprout-separator-content > a:hover {
+    color: var(--sprout-text);
+  }
+  a.sprout-separator-marker:focus-visible,
+  .sprout-separator-content > a:focus-visible {
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
+    color: var(--sprout-text);
+  }
+
+  @media (forced-colors: active) {
+    .sprout-separator-marker-border {
+      border-bottom-color: CanvasText;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-separator-marker,
+    .sprout-separator-content > a {
+      transition: color var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+  }
+
+  .sprout-separator-label-content > .sprout-separator-icon {
+    margin-inline-end: 6px;
+    vertical-align: -3px;
+  }
+}

package/dist/styles/settings-list.css

@@ -0,0 +1,81 @@
+@layer components {
+  .sprout-settings-group {
+    --sprout-settings-row-inline: 1rem;
+    --sprout-settings-row-block: 0.75rem;
+    display: grid;
+    gap: 0.5rem;
+    min-width: 0;
+    color: var(--sprout-text);
+    font-family: var(--sprout-font);
+  }
+  .sprout-settings-group-title {
+    margin: 0;
+    color: var(--sprout-text);
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 1.25rem;
+    letter-spacing: normal;
+  }
+  .sprout-settings-group-content {
+    container: sprout-settings / inline-size;
+    min-width: 0;
+    border: 1px solid var(--sprout-line);
+    border-radius: var(--sprout-radius-panel);
+    background: var(--sprout-surface);
+  }
+  /* Zero specificity so a child's own border utilities still win. */
+  :where(.sprout-settings-group-content > :not([hidden]) ~ :not([hidden])) {
+    border-top: 1px solid var(--sprout-line);
+  }
+
+  .sprout-settings-row {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-width: 0;
+    padding: var(--sprout-settings-row-block, 0.75rem)
+      var(--sprout-settings-row-inline, 1rem);
+  }
+  .sprout-settings-row-text {
+    display: grid;
+    gap: 0.125rem;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .sprout-settings-row-label {
+    display: block;
+    margin: 0;
+    color: var(--sprout-text);
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 1.25rem;
+  }
+  .sprout-settings-row-description {
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+  }
+  .sprout-settings-row-control {
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+    color: var(--sprout-text);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+  }
+
+  @container sprout-settings (min-width: 36rem) {
+    .sprout-settings-row {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .sprout-settings-row-control {
+      max-width: 60%;
+      justify-content: flex-end;
+    }
+  }
+}

package/dist/styles/sheet.css

@@ -0,0 +1,361 @@
+@layer components {
+  .sprout-sheet-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    isolation: isolate;
+    background: var(--sprout-overlay);
+    opacity: calc(1 - var(--drawer-swipe-progress, 0));
+  }
+
+  .sprout-sheet-viewport {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    pointer-events: none;
+  }
+
+  .sprout-sheet-content {
+    position: fixed;
+    z-index: 50;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    min-width: 0;
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    box-shadow: var(--sprout-shadow-overlay);
+    font-family: inherit;
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    overflow-wrap: break-word;
+    outline: none;
+    pointer-events: auto;
+  }
+  .sprout-sheet-content:is([data-side="left"], [data-side="right"]) {
+    transform: translate3d(var(--drawer-swipe-movement-x, 0px), 0, 0);
+  }
+  .sprout-sheet-content:is([data-side="top"], [data-side="bottom"]) {
+    transform: translate3d(0, var(--drawer-swipe-movement-y, 0px), 0);
+  }
+  .sprout-sheet-content[data-swiping] {
+    user-select: none;
+  }
+  /* Header, body, and footer stay flex items of the panel. */
+  .sprout-sheet-inner {
+    display: contents;
+  }
+  .sprout-sheet-overlay[hidden],
+  .sprout-sheet-content[hidden] {
+    display: none;
+  }
+
+  .sprout-sheet-content:is([data-side="left"], [data-side="right"]) {
+    top: 0;
+    bottom: 0;
+    width: 75%;
+    height: 100dvh;
+  }
+  .sprout-sheet-content[data-side="right"] {
+    right: 0;
+    border-left: 1px solid var(--sprout-line);
+  }
+  .sprout-sheet-content[data-side="left"] {
+    left: 0;
+    border-right: 1px solid var(--sprout-line);
+  }
+  .sprout-sheet-content:is([data-side="left"], [data-side="right"]):is(
+      [data-size="lg"],
+      [data-size="xl"]
+    ) {
+    width: 100%;
+  }
+
+  .sprout-sheet-content:is([data-side="top"], [data-side="bottom"]) {
+    left: 0;
+    right: 0;
+    max-height: 85dvh;
+  }
+  .sprout-sheet-content[data-side="top"] {
+    top: 0;
+    border-bottom: 1px solid var(--sprout-line);
+    border-end-start-radius: var(--sprout-radius-panel);
+    border-end-end-radius: var(--sprout-radius-panel);
+    padding-top: env(safe-area-inset-top);
+  }
+  .sprout-sheet-content[data-side="bottom"] {
+    bottom: 0;
+    border-top: 1px solid var(--sprout-line);
+    border-start-start-radius: var(--sprout-radius-panel);
+    border-start-end-radius: var(--sprout-radius-panel);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .sprout-sheet-content[data-size="full"] {
+    inset: 0;
+    width: 100%;
+    max-width: none;
+    height: 100dvh;
+    max-height: none;
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  .sprout-sheet-header {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    padding: 16px;
+  }
+  .sprout-sheet-content:has(> .sprout-sheet-close)
+    > .sprout-sheet-inner
+    > .sprout-sheet-header {
+    padding-inline-end: 48px;
+  }
+
+  .sprout-sheet-title {
+    margin: 0;
+    min-width: 0;
+    font-size: var(--sprout-text-base);
+    font-weight: 550;
+    line-height: 1.375rem;
+    letter-spacing: -0.005em;
+    overflow-wrap: anywhere;
+  }
+  .sprout-sheet-title[data-size="lg"] {
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.75rem;
+    letter-spacing: -0.015em;
+  }
+  .sprout-sheet-title[tabindex="-1"]:focus {
+    outline: none;
+  }
+  .sprout-sheet-title[tabindex="-1"]:focus-visible {
+    border-radius: 2px;
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+    outline-offset: 0;
+  }
+
+  .sprout-sheet-description {
+    margin: 0;
+    min-width: 0;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    text-wrap: pretty;
+  }
+
+  .sprout-sheet-body {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+    min-height: 0;
+    padding: 0 16px 24px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .sprout-sheet-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: auto;
+    padding: 16px;
+  }
+
+  .sprout-sheet-swipe-handle {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    touch-action: none;
+  }
+  .sprout-sheet-swipe-handle:active {
+    cursor: grabbing;
+  }
+  .sprout-sheet-swipe-handle::after {
+    content: "";
+    border-radius: 999px;
+    background: var(--sprout-input);
+  }
+  .sprout-sheet-swipe-handle:hover::after {
+    background: var(--sprout-border);
+  }
+  .sprout-sheet-content:is([data-side="top"], [data-side="bottom"])
+    > .sprout-sheet-swipe-handle {
+    height: 20px;
+  }
+  .sprout-sheet-content:is([data-side="top"], [data-side="bottom"])
+    > .sprout-sheet-swipe-handle::after {
+    width: 3rem;
+    height: 4px;
+  }
+  .sprout-sheet-content[data-side="bottom"] > .sprout-sheet-swipe-handle {
+    margin-bottom: -12px;
+  }
+  .sprout-sheet-content[data-side="top"] > .sprout-sheet-swipe-handle {
+    order: 1;
+    margin-top: -12px;
+  }
+  .sprout-sheet-content:is([data-side="left"], [data-side="right"])
+    > .sprout-sheet-swipe-handle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    width: 16px;
+  }
+  .sprout-sheet-content:is([data-side="left"], [data-side="right"])
+    > .sprout-sheet-swipe-handle::after {
+    width: 4px;
+    height: 3rem;
+  }
+  .sprout-sheet-content[data-side="right"] > .sprout-sheet-swipe-handle {
+    left: 0;
+  }
+  .sprout-sheet-content[data-side="left"] > .sprout-sheet-swipe-handle {
+    right: 0;
+  }
+
+  .sprout-sheet-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+  }
+  .sprout-sheet-content[data-size="full"] > .sprout-sheet-close {
+    top: calc(12px + env(safe-area-inset-top));
+  }
+
+  @media (min-width: 40rem) {
+    .sprout-sheet-content:is([data-side="left"], [data-side="right"]) {
+      max-width: 24rem;
+    }
+    .sprout-sheet-content:is(
+        [data-side="left"],
+        [data-side="right"]
+      )[data-size="lg"] {
+      max-width: 32rem;
+    }
+    .sprout-sheet-content:is(
+        [data-side="left"],
+        [data-side="right"]
+      )[data-size="xl"] {
+      max-width: 42rem;
+    }
+    .sprout-sheet-content[data-size="full"] {
+      max-width: none;
+    }
+    .sprout-sheet-content:is([data-side="top"], [data-side="bottom"])
+      > .sprout-sheet-inner
+      > .sprout-sheet-footer {
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-sheet-overlay {
+      transition: opacity var(--sprout-motion-normal) var(--sprout-motion-ease);
+    }
+    .sprout-sheet-overlay[data-starting-style],
+    .sprout-sheet-overlay[data-ending-style] {
+      opacity: 0;
+    }
+    .sprout-sheet-content {
+      transition:
+        opacity var(--sprout-motion-normal) var(--sprout-motion-ease),
+        translate var(--sprout-motion-normal) var(--sprout-motion-ease),
+        transform var(--sprout-motion-normal) var(--sprout-motion-ease);
+    }
+    .sprout-sheet-overlay[data-swiping],
+    .sprout-sheet-content[data-swiping] {
+      transition-duration: 0ms;
+    }
+    .sprout-sheet-content[data-ending-style],
+    .sprout-sheet-overlay[data-ending-style] {
+      transition-duration: var(--sprout-motion-fast);
+    }
+    .sprout-sheet-content[data-starting-style],
+    .sprout-sheet-content[data-ending-style] {
+      opacity: 0;
+    }
+    .sprout-sheet-content[data-side="right"]:is(
+        [data-starting-style],
+        [data-ending-style]
+      ) {
+      translate: 2.5rem 0;
+    }
+    .sprout-sheet-content[data-side="left"]:is(
+        [data-starting-style],
+        [data-ending-style]
+      ) {
+      translate: -2.5rem 0;
+    }
+    .sprout-sheet-content[data-side="bottom"]:is(
+        [data-starting-style],
+        [data-ending-style]
+      ) {
+      translate: 0 2.5rem;
+    }
+    .sprout-sheet-content[data-side="top"]:is(
+        [data-starting-style],
+        [data-ending-style]
+      ) {
+      translate: 0 -2.5rem;
+    }
+    /* A swipe that closes the sheet carries it the rest of the way off screen. */
+    .sprout-sheet-content[data-swipe-dismiss][data-ending-style] {
+      opacity: 1;
+      transition-duration: calc(
+        var(--drawer-swipe-strength, 1) * var(--sprout-motion-normal)
+      );
+    }
+    .sprout-sheet-content[data-swipe-dismiss][data-side="right"][data-ending-style] {
+      translate: 100% 0;
+    }
+    .sprout-sheet-content[data-swipe-dismiss][data-side="left"][data-ending-style] {
+      translate: -100% 0;
+    }
+    .sprout-sheet-content[data-swipe-dismiss][data-side="bottom"][data-ending-style] {
+      translate: 0 100%;
+    }
+    .sprout-sheet-content[data-swipe-dismiss][data-side="top"][data-ending-style] {
+      translate: 0 -100%;
+    }
+    /* Sections settle one after another while the panel slides in. */
+    .sprout-sheet-inner
+      > :is(.sprout-sheet-header, .sprout-sheet-body, .sprout-sheet-footer) {
+      animation: sprout-sheet-section-in var(--sprout-motion-normal)
+        var(--sprout-motion-ease) both;
+    }
+    .sprout-sheet-inner > .sprout-sheet-header {
+      animation-delay: 30ms;
+    }
+    .sprout-sheet-inner > .sprout-sheet-body {
+      animation-delay: 60ms;
+    }
+    .sprout-sheet-inner > .sprout-sheet-footer {
+      animation-delay: 90ms;
+    }
+  }
+  @keyframes sprout-sheet-section-in {
+    from {
+      opacity: 0;
+      translate: 0 4px;
+    }
+  }
+}