@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/styles/dropdown-menu.css

@@ -0,0 +1,150 @@
+@layer components {
+  .sprout-dropdown-menu-positioner {
+    z-index: 50;
+    isolation: isolate;
+    outline: none;
+  }
+
+  .sprout-dropdown-menu-content {
+    box-sizing: border-box;
+    min-width: 8rem;
+    max-width: var(--available-width);
+    max-height: var(--available-height);
+    padding: 4px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 1px solid var(--sprout-line);
+    border-radius: var(--sprout-radius-panel);
+    background: var(--sprout-surface);
+    color: var(--sprout-text);
+    box-shadow: var(--sprout-shadow-overlay);
+    font-family: var(--sprout-font);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    outline: none;
+    scrollbar-width: thin;
+    transform-origin: var(--transform-origin);
+  }
+  .sprout-dropdown-menu-anchor {
+    width: var(--anchor-width);
+  }
+  .sprout-dropdown-menu-menu {
+    width: 16rem;
+  }
+  .sprout-dropdown-menu-content.sprout-dropdown-menu-sub-content {
+    width: auto;
+    min-width: 6rem;
+  }
+
+  .sprout-dropdown-menu-label {
+    padding: 4px 6px;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    font-weight: 500;
+    line-height: 1rem;
+    overflow-wrap: break-word;
+  }
+
+  .sprout-dropdown-menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    padding: 4px 6px;
+    border-radius: var(--sprout-radius-control);
+    color: var(--sprout-text);
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    overflow-wrap: break-word;
+    outline: none;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .sprout-dropdown-menu-item :where(svg) {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    pointer-events: none;
+  }
+  .sprout-dropdown-menu-item[data-highlighted],
+  .sprout-dropdown-menu-sub-trigger[data-popup-open] {
+    background: var(--sprout-hover);
+    color: var(--sprout-text);
+  }
+  .sprout-dropdown-menu-item[data-variant="destructive"] {
+    color: var(--sprout-danger);
+  }
+  .sprout-dropdown-menu-item[data-variant="destructive"][data-highlighted] {
+    background: var(--sprout-danger-subtle);
+    color: var(--sprout-danger);
+  }
+  .sprout-dropdown-menu-item[data-disabled] {
+    opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
+  }
+  :is(.sprout-dropdown-menu-item, .sprout-dropdown-menu-label)[data-inset] {
+    padding-inline-start: 28px;
+  }
+
+  .sprout-dropdown-menu-sub-chevron {
+    margin-inline-start: auto;
+    color: var(--sprout-muted);
+  }
+
+  .sprout-dropdown-menu-choice {
+    padding-inline-end: 32px;
+  }
+  .sprout-dropdown-menu-indicator {
+    position: absolute;
+    inset-inline-end: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  .sprout-dropdown-menu-separator {
+    height: 1px;
+    margin: 4px -4px;
+    background: var(--sprout-line);
+  }
+
+  .sprout-dropdown-menu-shortcut {
+    flex-shrink: 0;
+    margin-inline-start: auto;
+    padding-inline-start: 12px;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    letter-spacing: 0.08em;
+    white-space: nowrap;
+  }
+  .sprout-dropdown-menu-item[data-highlighted] .sprout-dropdown-menu-shortcut {
+    color: var(--sprout-text);
+  }
+
+  @media (forced-colors: active) {
+    .sprout-dropdown-menu-item[data-highlighted],
+    .sprout-dropdown-menu-sub-trigger[data-popup-open] {
+      outline: 2px solid Highlight;
+      outline-offset: -1px;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-dropdown-menu-content {
+      transition:
+        opacity var(--sprout-motion-fast) var(--sprout-motion-ease),
+        scale var(--sprout-motion-fast) var(--sprout-motion-ease);
+    }
+    .sprout-dropdown-menu-content[data-starting-style],
+    .sprout-dropdown-menu-content[data-ending-style] {
+      opacity: 0;
+      scale: 0.96;
+    }
+  }
+}

package/dist/styles/field.css

@@ -0,0 +1,340 @@
+@layer components {
+  .sprout-field {
+    display: grid;
+    align-content: start;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .sprout-field-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    min-width: 0;
+  }
+  .sprout-field-heading,
+  .sprout-choice-group-legend {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    column-gap: 8px;
+    row-gap: 4px;
+    min-width: 0;
+  }
+  .sprout-field-label,
+  .sprout-choice-group-legend-text {
+    min-width: 0;
+    margin: 0;
+    color: var(--sprout-text);
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 1rem;
+    overflow-wrap: anywhere;
+  }
+  .sprout-field-label {
+    user-select: none;
+  }
+  .sprout-field[data-disabled] .sprout-field-label {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .sprout-choice-group-legend-text {
+    line-height: 1.25rem;
+  }
+  .sprout-choice-group[data-disabled] .sprout-choice-group-legend-text {
+    opacity: 0.5;
+  }
+  .sprout-field-requirement {
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    font-weight: 400;
+    line-height: 1rem;
+  }
+  .sprout-field-counter {
+    flex-shrink: 0;
+    margin: 0;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: 1rem;
+  }
+
+  .sprout-field-message {
+    min-width: 0;
+    margin: 0;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    overflow-wrap: anywhere;
+  }
+  .sprout-field-error {
+    color: var(--sprout-danger);
+  }
+
+  .sprout-field-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Checkbox and radio indicators */
+  .sprout-field-checkbox,
+  .sprout-field-radio {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    width: 16px;
+    height: 16px;
+    margin-top: 2px;
+    padding: 0;
+    border: 1px solid var(--sprout-border);
+    background-color: var(--sprout-surface);
+    color: var(--sprout-on-primary);
+    cursor: pointer;
+    outline: 0 solid transparent;
+    outline-offset: 0;
+  }
+  .sprout-field-checkbox {
+    border-radius: 4px;
+  }
+  .sprout-field-radio {
+    border-radius: 999px;
+  }
+  .sprout-field-checkbox::after,
+  .sprout-field-radio::after {
+    content: "";
+    position: absolute;
+    inset: -8px -12px;
+  }
+  .sprout-field-checkbox:focus-visible,
+  .sprout-field-radio:focus-visible {
+    outline: var(--sprout-focus-width) solid var(--sprout-focus-ring);
+  }
+  .sprout-field-checkbox[data-checked],
+  .sprout-field-radio[data-checked] {
+    border-color: var(--sprout-primary);
+    background-color: var(--sprout-primary);
+  }
+  .sprout-field-checkbox[data-variant="neutral"][data-checked] {
+    border-color: var(--sprout-text);
+    background-color: var(--sprout-text);
+    color: var(--sprout-surface);
+  }
+  .sprout-field-checkbox[aria-invalid="true"]:not([data-checked]) {
+    border-color: var(--sprout-danger);
+    box-shadow: 0 0 0 3px
+      color-mix(in oklab, var(--sprout-danger) 20%, transparent);
+  }
+  .sprout-field-checkbox[aria-invalid="true"]:focus-visible {
+    outline-color: var(--sprout-danger);
+  }
+  .sprout-field-checkbox[data-disabled],
+  .sprout-field-radio[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .sprout-field-checkbox-indicator {
+    display: grid;
+    place-content: center;
+    color: currentColor;
+  }
+  .sprout-field-checkbox-indicator[data-unchecked] {
+    display: none;
+  }
+  .sprout-field-checkbox-indicator svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* CheckboxField */
+  .sprout-checkbox-field {
+    display: grid;
+    align-content: start;
+    gap: 4px;
+    min-width: 0;
+    color: var(--sprout-text);
+  }
+  .sprout-checkbox-field[data-disabled] {
+    color: var(--sprout-muted);
+  }
+  .sprout-checkbox-field-label {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    width: fit-content;
+    max-width: 100%;
+    font-size: var(--sprout-text-sm);
+    font-weight: 500;
+    line-height: 1.25rem;
+    cursor: pointer;
+  }
+  .sprout-checkbox-field[data-disabled] .sprout-checkbox-field-label {
+    cursor: not-allowed;
+  }
+  .sprout-checkbox-field-text,
+  .sprout-choice-option-text {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .sprout-checkbox-field-message {
+    padding-left: 24px;
+  }
+
+  /* ChoiceGroup */
+  .sprout-choice-group {
+    display: grid;
+    align-content: start;
+    gap: 8px;
+    min-width: 0;
+  }
+  .sprout-choice-group-options {
+    display: grid;
+    gap: 4px;
+    min-width: 0;
+  }
+  .sprout-choice-group[data-type="radio"] .sprout-choice-group-options {
+    gap: 8px;
+  }
+  @media (min-width: 40rem) {
+    .sprout-choice-group-options[data-layout="columns"] {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  .sprout-choice-option {
+    position: relative;
+    isolation: isolate;
+    display: grid;
+    align-content: center;
+    gap: 2px;
+    min-width: 0;
+    min-height: 36px;
+    box-sizing: border-box;
+    padding: 8px 10px;
+    border-radius: var(--sprout-radius-control);
+    color: var(--sprout-text);
+  }
+  .sprout-choice-option:not([data-disabled]):hover {
+    background-color: var(--sprout-hover);
+  }
+  .sprout-choice-option[data-checked],
+  .sprout-choice-option[data-checked]:hover {
+    background-color: var(--sprout-primary-subtle);
+  }
+  .sprout-choice-option[data-disabled] {
+    color: var(--sprout-muted);
+  }
+  .sprout-choice-group[data-type="radio"] .sprout-choice-option {
+    border: 1px solid var(--sprout-input);
+    background-color: var(--sprout-surface);
+  }
+  .sprout-choice-group[data-type="radio"]
+    .sprout-choice-option:not([data-disabled]):hover {
+    background-color: var(--sprout-hover);
+  }
+  .sprout-choice-group[data-type="radio"] .sprout-choice-option[data-checked] {
+    border-color: color-mix(in oklab, var(--sprout-primary) 50%, transparent);
+    background-color: var(--sprout-primary-subtle);
+  }
+  .sprout-choice-option-label {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    width: 100%;
+    font-size: var(--sprout-text-sm);
+    line-height: 1.25rem;
+    cursor: pointer;
+  }
+  .sprout-choice-option[data-disabled] .sprout-choice-option-label {
+    cursor: not-allowed;
+  }
+  .sprout-choice-option-label::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+  }
+  .sprout-choice-option .sprout-field-checkbox,
+  .sprout-choice-option .sprout-field-radio {
+    position: static;
+  }
+  .sprout-choice-option .sprout-field-checkbox::after,
+  .sprout-choice-option .sprout-field-radio::after {
+    content: none;
+  }
+  .sprout-choice-option-description {
+    margin: 0;
+    padding-left: 24px;
+    color: var(--sprout-muted);
+    font-size: var(--sprout-text-xs);
+    line-height: 1rem;
+    overflow-wrap: anywhere;
+    pointer-events: none;
+  }
+
+  @media (pointer: coarse) {
+    .sprout-choice-option {
+      min-height: 44px;
+    }
+    .sprout-checkbox-field-label {
+      align-items: center;
+      min-height: 44px;
+    }
+    .sprout-checkbox-field-label .sprout-field-checkbox {
+      margin-top: 0;
+    }
+  }
+
+  /* FieldSeparator */
+  .sprout-field-separator {
+    min-height: 20px;
+    margin-block: -8px;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .sprout-field-label,
+    .sprout-choice-option,
+    .sprout-field-checkbox,
+    .sprout-field-radio {
+      transition:
+        color var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out),
+        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),
+        opacity var(--sprout-motion-fast, 120ms)
+          var(--sprout-motion-ease, ease-out);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sprout-field-checkbox,
+    .sprout-field-radio {
+      border-color: CanvasText;
+    }
+    .sprout-field-checkbox[data-checked],
+    .sprout-field-radio[data-checked] {
+      border-color: Highlight;
+      background-color: Highlight;
+      color: HighlightText;
+    }
+    .sprout-field-checkbox:focus-visible,
+    .sprout-field-radio:focus-visible {
+      outline-color: Highlight;
+    }
+    .sprout-choice-option[data-checked] {
+      outline: 1px solid Highlight;
+    }
+  }
+}