@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/styles/prompt-list.css

@@ -0,0 +1,165 @@
+@layer components {
+  .sprout-prompt-list {
+    width: 100%;
+    min-width: 0;
+    font-family: var(--sprout-font);
+    color: var(--sprout-text);
+  }
+  .sprout-prompt-list-title {
+    margin: 0;
+    padding: 0 12px 6px;
+    font-size: var(--sprout-text-xs);
+    font-weight: 500;
+    line-height: 1rem;
+    color: var(--sprout-muted);
+  }
+  .sprout-prompt-list-items {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .sprout-prompt-list-item {
+    --sprout-brand-ring: var(--sprout-canvas);
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    min-width: 0;
+    min-height: 32px;
+    padding: 0 12px;
+    border-radius: var(--sprout-radius-panel);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    outline: 0 solid transparent;
+    outline-offset: 0;
+  }
+  @media (pointer: coarse) {
+    .sprout-prompt-list-item {
+      min-height: 44px;
+    }
+  }
+  @media (hover: hover) {
+    .sprout-prompt-list-item:has(.sprout-prompt-list-button:enabled):hover {
+      --sprout-brand-ring: var(--sprout-hover);
+      background: var(--sprout-hover);
+    }
+  }
+  .sprout-prompt-list-item:has(.sprout-prompt-list-button:focus-visible) {
+    --sprout-brand-ring: var(--sprout-hover);
+    background: var(--sprout-hover);
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+  }
+  .sprout-prompt-list-item:has(.sprout-prompt-list-button:disabled) {
+    opacity: 0.5;
+  }
+
+  .sprout-prompt-list-icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 20px;
+    height: 20px;
+    color: color-mix(in oklab, var(--sprout-text) 72%, var(--sprout-muted));
+  }
+  .sprout-prompt-list-icon svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* The button's ::after covers the row, so the whole row is the target. */
+  .sprout-prompt-list-button {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    text-align: start;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .sprout-prompt-list-button::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
+  .sprout-prompt-list-button:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Brand tiles sit above the row target so their tooltips open on hover. */
+  .sprout-prompt-list-brands {
+    position: relative;
+    z-index: 1;
+  }
+
+  .sprout-prompt-list-arrow {
+    flex-shrink: 0;
+    width: 14px;
+    height: 14px;
+    margin-inline-start: auto;
+    color: var(--sprout-muted);
+  }
+  .sprout-prompt-list-item:dir(rtl) .sprout-prompt-list-arrow {
+    transform: scaleX(-1);
+  }
+
+  .sprout-prompt-list-item:has(.sprout-prompt-list-button:enabled):is(
+      :hover,
+      :focus-within
+    )
+    :is(.sprout-prompt-list-icon, .sprout-prompt-list-arrow) {
+    color: var(--sprout-text);
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-prompt-list-item {
+      animation: sprout-prompt-rise var(--sprout-motion-normal)
+        var(--sprout-motion-ease) both;
+      animation-delay: calc(var(--sprout-prompt-index, 0) * 40ms);
+      transition: background-color var(--sprout-motion-fast)
+        var(--sprout-motion-ease);
+    }
+    .sprout-prompt-list-icon,
+    .sprout-prompt-list-arrow {
+      transition:
+        transform var(--sprout-motion-fast) var(--sprout-motion-ease),
+        color var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+    .sprout-prompt-list-item:has(.sprout-prompt-list-button:enabled):is(
+        :hover,
+        :focus-within
+      )
+      .sprout-prompt-list-icon {
+      transform: scale(1.08);
+    }
+    .sprout-prompt-list-item:has(.sprout-prompt-list-button:enabled):is(
+        :hover,
+        :focus-within
+      )
+      .sprout-prompt-list-arrow:not(:dir(rtl)) {
+      transform: translateX(2px);
+    }
+  }
+  @keyframes sprout-prompt-rise {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-prompt-list-item:has(.sprout-prompt-list-button:focus-visible) {
+      outline-color: Highlight;
+    }
+  }
+}

package/dist/styles/questionnaire.css

@@ -0,0 +1,308 @@
+@layer components {
+  .sprout-questionnaire {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    font-family: inherit;
+    color: var(--sprout-text);
+  }
+
+  .sprout-questionnaire-progress {
+    width: fit-content;
+    min-width: 14ch;
+    min-height: 1rem;
+    font-size: var(--sprout-text-xs);
+    font-weight: 500;
+    line-height: 1rem;
+    font-variant-numeric: tabular-nums;
+    color: var(--sprout-muted);
+  }
+
+  .sprout-questionnaire-item {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: none;
+  }
+  .sprout-questionnaire-item[hidden] {
+    display: none;
+  }
+
+  /* A rendered legend sits outside the flex flow, so it carries its own gap. */
+  .sprout-questionnaire-title {
+    margin: 0 0 16px;
+    padding: 0;
+    font-size: var(--sprout-text-base);
+    font-weight: 500;
+    line-height: 1.375;
+    text-wrap: pretty;
+    overflow-wrap: anywhere;
+    color: var(--sprout-text);
+  }
+  .sprout-questionnaire-title:has(~ .sprout-questionnaire-description) {
+    margin-bottom: 4px;
+  }
+
+  .sprout-questionnaire-description {
+    margin: 0;
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    text-wrap: pretty;
+    color: var(--sprout-muted);
+  }
+
+  .sprout-questionnaire-choices {
+    display: grid;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  .sprout-questionnaire-choice {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    box-sizing: border-box;
+    min-width: 0;
+    min-height: 44px;
+    padding: 11px 12px;
+    border: 1px solid var(--sprout-input);
+    border-radius: var(--sprout-radius-panel);
+    background: transparent;
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    text-align: start;
+    cursor: pointer;
+    user-select: none;
+    outline: 0 solid transparent;
+    outline-offset: 0;
+    -webkit-tap-highlight-color: transparent;
+  }
+  @media (hover: hover) {
+    .sprout-questionnaire-choice:not([data-disabled]):hover {
+      background: color-mix(in oklab, var(--sprout-hover) 60%, transparent);
+    }
+  }
+  .sprout-questionnaire-choice:has(
+    > .sprout-questionnaire-choice-input:focus-visible
+  ) {
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+  }
+  .sprout-questionnaire-choice[data-checked] {
+    border-color: var(--sprout-focus);
+    background: var(--sprout-primary-subtle);
+  }
+  .sprout-questionnaire-choice[data-invalid] {
+    border-color: var(--sprout-danger);
+  }
+  .sprout-questionnaire-choice[data-invalid]:has(
+      > .sprout-questionnaire-choice-input:focus-visible
+    ) {
+    outline-color: var(--sprout-danger);
+  }
+  .sprout-questionnaire-choice[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* The real input covers the row so any click or tap reaches it. */
+  .sprout-questionnaire-choice-input {
+    position: absolute;
+    inset: -1px;
+    z-index: 1;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  .sprout-questionnaire-choice-indicator {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    margin-top: 2px;
+    border: 1px solid var(--sprout-border);
+    border-radius: 4px;
+    background: var(--sprout-surface);
+    color: var(--sprout-on-primary);
+    pointer-events: none;
+  }
+  .sprout-questionnaire-choice[data-type="radio"]
+    .sprout-questionnaire-choice-indicator {
+    border-radius: 999px;
+  }
+  .sprout-questionnaire-choice[data-checked]
+    .sprout-questionnaire-choice-indicator {
+    border-color: var(--sprout-primary);
+    background: var(--sprout-primary);
+  }
+  .sprout-questionnaire-choice-dot,
+  .sprout-questionnaire-choice-check {
+    display: none;
+  }
+  .sprout-questionnaire-choice-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: var(--sprout-on-primary);
+  }
+  .sprout-questionnaire-choice-check {
+    width: 12px;
+    height: 12px;
+  }
+  .sprout-questionnaire-choice[data-type="radio"][data-checked]
+    .sprout-questionnaire-choice-dot,
+  .sprout-questionnaire-choice[data-type="checkbox"][data-checked]
+    .sprout-questionnaire-choice-check {
+    display: block;
+  }
+
+  .sprout-questionnaire-choice-label {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .sprout-questionnaire-choice-description {
+    color: var(--sprout-muted);
+  }
+
+  .sprout-questionnaire-choice-shortcut {
+    margin-inline-start: auto;
+    font-variant-numeric: tabular-nums;
+    pointer-events: none;
+  }
+  .sprout-questionnaire-choice[data-checked]
+    .sprout-questionnaire-choice-shortcut {
+    border-color: color-mix(
+      in oklab,
+      var(--sprout-focus) 40%,
+      var(--sprout-line)
+    );
+    color: var(--sprout-text);
+  }
+
+  .sprout-questionnaire-input-wrapper {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sprout-questionnaire-error {
+    margin: 0;
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    color: var(--sprout-danger);
+  }
+  .sprout-questionnaire-error[hidden] {
+    display: none;
+  }
+
+  .sprout-questionnaire-actions {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-height: 28px;
+  }
+  .sprout-questionnaire-actions .sprout-questionnaire-action[hidden] {
+    display: none;
+  }
+  .sprout-questionnaire-previous {
+    grid-row: 1;
+    grid-column: 1;
+    justify-self: start;
+  }
+  .sprout-questionnaire-skip {
+    grid-row: 1;
+    grid-column: 2;
+    justify-self: end;
+  }
+  .sprout-questionnaire-next,
+  .sprout-questionnaire-submit {
+    grid-row: 1;
+    grid-column: 3;
+    justify-self: end;
+  }
+
+  /* Phones get 44px targets. */
+  @media (max-width: 639.98px) {
+    .sprout-questionnaire-actions {
+      min-height: 44px;
+    }
+    .sprout-questionnaire-action,
+    .sprout-questionnaire-input {
+      min-height: 44px;
+    }
+    .sprout-questionnaire-input {
+      font-size: var(--sprout-text-base);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-questionnaire-choice,
+    .sprout-questionnaire-choice-indicator,
+    .sprout-questionnaire-choice-shortcut {
+      transition:
+        background-color var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out),
+        border-color var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out),
+        color var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out);
+    }
+    .sprout-questionnaire-item[data-active] {
+      animation: sprout-questionnaire-enter var(--sprout-motion-normal, 160ms)
+        var(--sprout-motion-ease, ease-out);
+    }
+    .sprout-questionnaire-choice[data-checked]
+      :is(
+        .sprout-questionnaire-choice-dot,
+        .sprout-questionnaire-choice-check
+      ) {
+      animation: sprout-questionnaire-pop var(--sprout-motion-fast, 140ms)
+        ease-out both;
+    }
+  }
+  @keyframes sprout-questionnaire-enter {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+  }
+  @keyframes sprout-questionnaire-pop {
+    from {
+      opacity: 0;
+      transform: scale(0.6);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-questionnaire-choice[data-checked],
+    .sprout-questionnaire-choice[data-checked]
+      .sprout-questionnaire-choice-indicator {
+      border-color: Highlight;
+    }
+    .sprout-questionnaire-choice:has(
+      > .sprout-questionnaire-choice-input:focus-visible
+    ) {
+      outline-color: Highlight;
+    }
+  }
+}

package/dist/styles/radio-group.css

@@ -0,0 +1,119 @@
+@layer components {
+  .sprout-radio-group {
+    display: grid;
+    gap: 8px;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .sprout-radio-group-item {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: 1px solid var(--sprout-border);
+    border-radius: 999px;
+    background-color: var(--sprout-surface);
+    color: var(--sprout-on-primary);
+    vertical-align: middle;
+    cursor: pointer;
+    outline: 0 solid transparent;
+    outline-offset: 0;
+    -webkit-tap-highlight-color: transparent;
+  }
+  /* A 40 x 32px hit area around the 16px dot. */
+  .sprout-radio-group-item::after {
+    content: "";
+    position: absolute;
+    inset: -8px -12px;
+  }
+  @media (hover: hover) {
+    .sprout-radio-group-item:not(
+        [data-disabled],
+        [data-readonly],
+        [data-checked]
+      ):hover {
+      border-color: var(--sprout-border-strong);
+    }
+  }
+  .sprout-radio-group-item:focus-visible {
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+  }
+  .sprout-radio-group-item[data-checked] {
+    border-color: var(--sprout-primary);
+    background-color: var(--sprout-primary);
+  }
+  .sprout-radio-group-item[aria-invalid="true"] {
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--sprout-danger) 20%, transparent);
+  }
+  .sprout-radio-group-item[aria-invalid="true"]:not([data-checked]) {
+    border-color: var(--sprout-danger);
+  }
+  .sprout-radio-group-item[aria-invalid="true"]:focus-visible {
+    outline-color: var(--sprout-danger);
+  }
+  .sprout-radio-group-item[data-readonly] {
+    cursor: default;
+  }
+  .sprout-radio-group-item[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .sprout-radio-group-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    background-color: currentColor;
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-radio-group-item {
+      transition:
+        background-color var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out),
+        border-color var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out),
+        box-shadow var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out),
+        opacity var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out);
+    }
+    .sprout-radio-group-indicator {
+      transition:
+        opacity var(--sprout-motion-normal, 180ms)
+          var(--sprout-motion-ease, ease-out),
+        transform var(--sprout-motion-normal, 180ms)
+          var(--sprout-motion-ease, ease-out);
+    }
+    .sprout-radio-group-indicator[data-starting-style],
+    .sprout-radio-group-indicator[data-ending-style] {
+      opacity: 0;
+      transform: scale(0.4);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-radio-group-item {
+      border-color: CanvasText;
+    }
+    .sprout-radio-group-item[data-checked] {
+      border-color: Highlight;
+      background-color: Highlight;
+      color: HighlightText;
+    }
+    .sprout-radio-group-indicator {
+      background-color: HighlightText;
+    }
+    .sprout-radio-group-item:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}