@labcat2020/rocketship-svelte 0.1.0 → 0.3.0

package/src/components/Grid.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type GridColumns = 2 | 3 | 4
+  export type GridTag = 'div' | 'ul' | 'ol'
+
+  type Props = {
+    as?: GridTag
+    columns?: GridColumns
+    class?: string
+    children?: Snippet
+  } & HTMLAttributes<HTMLElement>
+
+  let { as = 'div', columns = 2, class: className = '', children, ...attrs }: Props = $props()
+
+  const classes = $derived(
+    [
+      'rs-grid',
+      columns === 3 ? 'rs-grid--3-cols' : undefined,
+      columns === 4 ? 'rs-grid--4-cols' : undefined,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  )
+</script>
+
+<svelte:element this={as} {...attrs} class={classes}>
+  {@render children?.()}
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-grid {
+      display: grid;
+      gap: var(--rs-grid-gap, var(--rs-space-4, 16px));
+      grid-template-columns: minmax(0, 1fr);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      @include container-query-up($rs-cq-sm) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      &--3-cols {
+        @include container-query-up($rs-cq-md) {
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+      }
+
+      &--4-cols {
+        @include container-query-up($rs-cq-md) {
+          grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+      }
+    }
+  }
+</style>

package/src/components/Input.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements'
+
+  export type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'url' | 'tel'
+  export type InputSize = 'sm' | 'md' | 'lg'
+
+  type Props = {
+    type?: InputType
+    size?: InputSize
+    invalid?: boolean
+    class?: string
+    value?: string | number
+  } & Omit<HTMLInputAttributes, 'size' | 'type' | 'value'>
+
+  let {
+    type = 'text',
+    size = 'md',
+    invalid = false,
+    class: className = '',
+    value = $bindable(''),
+    ...attrs
+  }: Props = $props()
+
+  // Field passes its wiring (`id`, `aria-describedby`, `aria-invalid`, `required`, `disabled`) to
+  // the `children` snippet, which spreads it onto this control. An explicit attribute wins over the
+  // `invalid` prop, so the error state Field reports is the one the element announces and styles.
+  const ariaInvalid = $derived(attrs['aria-invalid'] ?? (invalid ? 'true' : undefined))
+  // Only the hard `true` state drives the styling; `spelling`/`grammar` are announced but not
+  // painted as an error, and an explicit `aria-invalid="false"` always wins over the prop.
+  const isInvalid = $derived(ariaInvalid === true || ariaInvalid === 'true')
+
+  const classes = $derived(
+    ['rs-input', `rs-input--${size}`, isInvalid ? 'rs-input--invalid' : undefined, className]
+      .filter(Boolean)
+      .join(' '),
+  )
+</script>
+
+<input {...attrs} aria-invalid={ariaInvalid} bind:value class={classes} {type} />
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-input {
+      // Size locals live on the block so a size modifier only reassigns them; `--rs-input-font-size`
+      // stays unset here so a consumer can override one control without touching the others.
+      --rs-input-font-size-sm: var(--rs-font-size-sm, #{to-rem(14)});
+      --rs-input-font-size-md: var(--rs-font-size-md, #{to-rem(16)});
+      --rs-input-font-size-lg: var(--rs-font-size-lg, #{to-rem(18)});
+      --rs-input-min-height-sm: 34px;
+      --rs-input-min-height-md: 40px;
+      --rs-input-min-height-lg: 48px;
+      --rs-input-padding-inline-sm: var(--rs-space-2, 8px);
+      --rs-input-padding-inline-md: var(--rs-space-3, 12px);
+      --rs-input-padding-inline-lg: var(--rs-space-4, 16px);
+      background: var(--rs-input-bg, var(--rs-color-surface, #ffffff));
+      border: var(--rs-input-border-width, var(--rs-border-width-sm, 1px)) solid
+        var(--rs-input-border-color, var(--rs-color-border, #c8d2eb));
+      border-radius: var(--rs-input-border-radius, var(--rs-radius-sm, 6px));
+      box-sizing: border-box;
+      color: var(--rs-input-color, var(--rs-color-fg, #131a2f));
+      display: block;
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+      font-size: var(--rs-input-font-size, var(--rs-input-font-size-md));
+      line-height: var(--rs-line-height-base, 1.45);
+      min-height: var(--rs-input-min-height, var(--rs-input-min-height-md));
+      padding-block: var(--rs-input-padding-block, var(--rs-space-2, 8px));
+      padding-inline: var(--rs-input-padding-inline, var(--rs-input-padding-inline-md));
+      transition:
+        background-color var(--rs-transition-fast, 140ms) ease,
+        border-color var(--rs-transition-fast, 140ms) ease;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--rs-input-placeholder-color, var(--rs-color-muted, #4f5b7d));
+      }
+
+      &:focus-visible {
+        border-color: var(--rs-input-focus-border-color, var(--rs-color-accent, #2f5bdb));
+        outline: 2px solid var(--rs-input-focus-ring-color, var(--rs-color-focus-ring, #296dff));
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.55;
+      }
+
+      &--sm {
+        --rs-input-font-size: var(--rs-input-font-size-sm);
+        --rs-input-min-height: var(--rs-input-min-height-sm);
+        --rs-input-padding-inline: var(--rs-input-padding-inline-sm);
+      }
+
+      &--md {
+        --rs-input-font-size: var(--rs-input-font-size-md);
+        --rs-input-min-height: var(--rs-input-min-height-md);
+        --rs-input-padding-inline: var(--rs-input-padding-inline-md);
+      }
+
+      &--lg {
+        --rs-input-font-size: var(--rs-input-font-size-lg);
+        --rs-input-min-height: var(--rs-input-min-height-lg);
+        --rs-input-padding-inline: var(--rs-input-padding-inline-lg);
+      }
+
+      // The error state owns a coordinated colour set, so the modifier reassigns the locals the base
+      // rule already reads instead of restating background, border and colour.
+      &--invalid {
+        --rs-input-bg: var(--rs-color-danger-bg, #ffeef0);
+        --rs-input-border-color: var(--rs-color-danger-border, #f0a8b0);
+        --rs-input-color: var(--rs-color-danger-fg, #3d0a08);
+      }
+
+      @include container-query-up($rs-cq-sm) {
+        --rs-input-font-size-sm: var(--rs-font-size-md, #{to-rem(16)});
+        --rs-input-font-size-md: var(--rs-font-size-lg, #{to-rem(18)});
+        --rs-input-font-size-lg: var(--rs-font-size-xl, #{to-rem(20)});
+        --rs-input-min-height-sm: 40px;
+        --rs-input-min-height-md: 44px;
+        --rs-input-min-height-lg: 52px;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+  }
+</style>

package/src/components/Label.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLLabelAttributes } from 'svelte/elements'
+
+  export type LabelTag = 'label' | 'span' | 'div'
+
+  type Props = {
+    as?: LabelTag
+    required?: boolean
+    optional?: boolean
+    requiredText?: string
+    optionalText?: string
+    class?: string
+    children?: Snippet
+  } & HTMLLabelAttributes
+
+  let {
+    as = 'label',
+    required = false,
+    optional = false,
+    requiredText = '(required)',
+    optionalText = '(optional)',
+    class: className = '',
+    for: htmlFor,
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const classes = $derived(['rs-label', className].filter(Boolean).join(' '))
+</script>
+
+<svelte:element this={as} {...attrs} class={classes} for={as === 'label' ? htmlFor : undefined}>
+  {@render children?.()}
+  {#if required}
+    <span class="rs-label__required" aria-hidden="true">*</span>
+    <span class="rs-label__sr-only">{requiredText}</span>
+  {:else if optional}
+    <span class="rs-label__optional">{optionalText}</span>
+  {/if}
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-label {
+      align-items: baseline;
+      color: var(--rs-label-color, var(--rs-color-fg, #131a2f));
+      display: flex;
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+      font-size: var(--rs-label-font-size, var(--rs-font-size-sm, #{to-rem(14)}));
+      font-weight: var(--rs-label-font-weight, var(--rs-font-weight-medium, 500));
+      gap: var(--rs-label-gap, var(--rs-space-1, 4px));
+      line-height: var(--rs-label-line-height, var(--rs-line-height-base, 1.45));
+
+      @include container-query-up($rs-cq-sm) {
+        font-size: var(--rs-label-font-size, var(--rs-font-size-md, #{to-rem(16)}));
+      }
+
+      &__required {
+        color: var(--rs-label-required-color, var(--rs-color-danger-accent, #c5221f));
+        font-weight: var(--rs-font-weight-regular, 400);
+      }
+
+      &__optional {
+        color: var(--rs-label-optional-color, var(--rs-color-muted, #4f5b7d));
+        font-weight: var(--rs-font-weight-regular, 400);
+      }
+
+      &__sr-only {
+        border: 0;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+      }
+    }
+  }
+</style>

package/src/components/Select.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLSelectAttributes } from 'svelte/elements'
+
+  export type SelectSize = 'sm' | 'md' | 'lg'
+
+  type Props = {
+    size?: SelectSize | number
+    invalid?: boolean
+    placeholder?: string
+    class?: string
+    value?: string
+    children?: Snippet
+  } & Omit<HTMLSelectAttributes, 'size' | 'value' | 'placeholder' | 'multiple'>
+
+  // `size` is a Rocketship variant, but the native attribute of the same name is a visible row
+  // count that renders a listbox, so a non-variant value is forwarded to the element untouched.
+  const isSelectSize = (candidate: SelectSize | number | undefined): candidate is SelectSize =>
+    candidate === 'sm' || candidate === 'md' || candidate === 'lg'
+
+  let {
+    size = 'md',
+    invalid = false,
+    placeholder,
+    class: className = '',
+    value = $bindable(''),
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const variantSize = $derived(isSelectSize(size) ? size : 'md')
+  const nativeSize = $derived(isSelectSize(size) ? undefined : size)
+
+  // Field passes its wiring (`id`, `aria-describedby`, `aria-invalid`, `required`, `disabled`) to
+  // the `children` snippet, which spreads it onto this component and so onto the `<select>`. An
+  // explicit attribute wins over the `invalid` prop, so the state the element announces is the one
+  // it is styled with.
+  const ariaInvalid = $derived(attrs['aria-invalid'] ?? (invalid ? 'true' : undefined))
+  // Only the hard `true` state drives the styling; `spelling`/`grammar` are announced but not
+  // painted as an error, and an explicit `aria-invalid="false"` always wins over the prop.
+  const isInvalid = $derived(ariaInvalid === true || ariaInvalid === 'true')
+
+  const hasPlaceholder = $derived(Boolean(placeholder?.trim()))
+  // A numeric `size` turns the control into a listbox, where a dropdown chevron would be false.
+  const showIcon = $derived(nativeSize === undefined)
+
+  // The placeholder is a disabled, empty-valued option, so a user can never select it back once a
+  // real option is chosen. Rendering `selected` keeps static server output on the placeholder; after
+  // hydration the `bind:value` binding owns which option is selected.
+  const placeholderSelected = $derived(value === '')
+
+  const classes = $derived(
+    [
+      'rs-select',
+      `rs-select--${variantSize}`,
+      isInvalid ? 'rs-select--invalid' : undefined,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  )
+</script>
+
+<span class={classes}>
+  <select
+    {...attrs}
+    aria-invalid={ariaInvalid}
+    bind:value
+    class="rs-select__control"
+    size={nativeSize}
+  >
+    {#if hasPlaceholder}
+      <option disabled selected={placeholderSelected} value="">{placeholder}</option>
+    {/if}
+    {@render children?.()}
+  </select>
+  {#if showIcon}
+    <svg
+      aria-hidden="true"
+      class="rs-select__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M4 6l4 4 4-4"
+        fill="none"
+        stroke="currentColor"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="1.5"
+      />
+    </svg>
+  {/if}
+</span>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-select {
+      // Variant-owned locals: the control reads them, so a modifier swaps a coordinated set.
+      --rs-select-bg: var(--rs-color-surface, #ffffff);
+      --rs-select-border-color: var(--rs-color-border, #c8d2eb);
+      --rs-select-color: var(--rs-color-fg, #131a2f);
+      --rs-select-focus-ring-color: var(--rs-color-focus-ring, #296dff);
+      --rs-select-icon-color: var(--rs-color-muted, #4f5b7d);
+      --rs-select-invalid-bg: var(--rs-color-danger-bg, #ffeef0);
+      --rs-select-invalid-border-color: var(--rs-color-danger-border, #f0a8b0);
+      --rs-select-invalid-focus-ring-color: var(--rs-color-danger-accent, #c5221f);
+      // Size defaults live on the block; the per-size hooks stay unset here, so an adopter can
+      // override one control through `--rs-select-font-size` without touching the others.
+      --rs-select-font-size: var(--rs-select-font-size-md, var(--rs-font-size-md, #{to-rem(16)}));
+      --rs-select-min-height: var(--rs-select-min-height-md, 40px);
+      --rs-select-padding-inline: var(--rs-select-padding-inline-md, var(--rs-space-3, 12px));
+      display: block;
+      position: relative;
+
+      &--sm {
+        --rs-select-font-size: var(--rs-select-font-size-sm, var(--rs-font-size-sm, #{to-rem(14)}));
+        --rs-select-min-height: var(--rs-select-min-height-sm, 34px);
+        --rs-select-padding-inline: var(--rs-select-padding-inline-sm, var(--rs-space-2, 8px));
+      }
+
+      &--md {
+        --rs-select-font-size: var(--rs-select-font-size-md, var(--rs-font-size-md, #{to-rem(16)}));
+        --rs-select-min-height: var(--rs-select-min-height-md, 40px);
+        --rs-select-padding-inline: var(--rs-select-padding-inline-md, var(--rs-space-3, 12px));
+      }
+
+      &--lg {
+        --rs-select-font-size: var(--rs-select-font-size-lg, var(--rs-font-size-lg, #{to-rem(18)}));
+        --rs-select-min-height: var(--rs-select-min-height-lg, 48px);
+        --rs-select-padding-inline: var(--rs-select-padding-inline-lg, var(--rs-space-4, 16px));
+      }
+
+      // Roomier touch targets once the component's own container is wide enough.
+      @include container-query-up($rs-cq-sm) {
+        --rs-select-min-height: var(--rs-select-min-height-md, 44px);
+        --rs-select-padding-inline: var(--rs-select-padding-inline-md, var(--rs-space-4, 16px));
+
+        &--sm {
+          --rs-select-min-height: var(--rs-select-min-height-sm, 40px);
+          --rs-select-padding-inline: var(--rs-select-padding-inline-sm, var(--rs-space-3, 12px));
+        }
+
+        &--lg {
+          --rs-select-min-height: var(--rs-select-min-height-lg, 52px);
+          --rs-select-padding-inline: var(--rs-select-padding-inline-lg, var(--rs-space-5, 20px));
+        }
+      }
+
+      &__control {
+        appearance: none;
+        background: var(--rs-select-bg);
+        border: var(--rs-select-border-width, var(--rs-border-width-sm, 1px)) solid
+          var(--rs-select-border-color);
+        border-radius: var(--rs-select-border-radius, var(--rs-radius-sm, 6px));
+        box-sizing: border-box;
+        color: var(--rs-select-color);
+        cursor: pointer;
+        display: block;
+        font-family: var(
+          --rs-font-family-sans,
+          'Inter',
+          'Segoe UI',
+          Roboto,
+          Helvetica,
+          Arial,
+          sans-serif
+        );
+        font-size: var(--rs-select-font-size);
+        line-height: var(--rs-line-height-base, 1.45);
+        margin: 0;
+        min-height: var(--rs-select-min-height);
+        padding-block: var(--rs-select-padding-block, var(--rs-space-2, 8px));
+        padding-inline: var(--rs-select-padding-inline);
+        padding-inline-end: calc(var(--rs-select-padding-inline) + var(--rs-space-6, 24px));
+        transition:
+          background-color var(--rs-transition-fast, 140ms) ease,
+          border-color var(--rs-transition-fast, 140ms) ease;
+        width: 100%;
+
+        &:hover {
+          --rs-select-border-color: var(--rs-color-accent, #2f5bdb);
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--rs-select-focus-ring-color);
+          outline-offset: 2px;
+        }
+
+        &:disabled {
+          cursor: not-allowed;
+          opacity: 0.55;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
+      }
+
+      // The error state owns a coordinated colour set, so the modifier reassigns the locals the
+      // control already reads instead of restating background, border and colour. It follows the
+      // control's `:hover` so its danger border and focus ring outrank the hover accent.
+      &--invalid &__control {
+        --rs-select-bg: var(--rs-select-invalid-bg);
+        --rs-select-border-color: var(--rs-select-invalid-border-color);
+        --rs-select-focus-ring-color: var(--rs-select-invalid-focus-ring-color);
+      }
+
+      &__icon {
+        color: var(--rs-select-icon-color);
+        inset-block-start: 50%;
+        inset-inline-end: var(--rs-select-padding-inline);
+        pointer-events: none;
+        position: absolute;
+        transform: translateY(-50%);
+        transition:
+          color var(--rs-transition-fast, 140ms) ease,
+          opacity var(--rs-transition-fast, 140ms) ease;
+
+        @media (prefers-reduced-motion: reduce) {
+          transition: none;
+        }
+      }
+
+      // The chevron dims with the control, so the pair reads as one disabled unit.
+      &__control:disabled + .rs-select__icon {
+        opacity: 0.55;
+      }
+    }
+  }
+</style>