@labcat2020/rocketship-svelte 0.1.0 → 0.2.0

package/src/components/Container.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type ContainerSize = 'default' | 'full' | 'wide' | 'content'
+  export type ContainerTag = 'div' | 'section' | 'main' | 'article' | 'header' | 'footer' | 'nav'
+
+  type Props = {
+    as?: ContainerTag
+    size?: ContainerSize
+    padded?: boolean
+    class?: string
+    children?: Snippet
+  } & HTMLAttributes<HTMLElement>
+
+  let {
+    as = 'div',
+    size = 'default',
+    padded = false,
+    class: className = '',
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const classes = $derived(
+    [
+      'rs-container',
+      size === 'full' ? 'rs-container--full-width' : undefined,
+      size === 'wide' ? 'rs-container--wide' : undefined,
+      size === 'content' ? 'rs-container--content' : undefined,
+      padded ? 'rs-container--padded' : 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-container {
+      container-type: inline-size;
+      container-name: rs-component;
+      --rs-container-width: var(--rs-container-width-default, 1000px);
+      --rs-container-gutter-left: max(env(safe-area-inset-left), var(--rs-container-gutter, 16px));
+      --rs-container-gutter-right: max(env(safe-area-inset-right), var(--rs-container-gutter, 16px));
+      --rs-container-gutters: calc(
+        var(--rs-container-gutter-left) + var(--rs-container-gutter-right)
+      );
+      --rs-container-gutter-top: max(
+        env(safe-area-inset-top),
+        var(--rs-container-padding-block-start, 0px)
+      );
+      --rs-container-gutter-bottom: max(
+        env(safe-area-inset-bottom),
+        var(--rs-container-padding-block-end, 0px)
+      );
+      margin-inline: auto;
+      max-width: calc(var(--rs-container-width) + var(--rs-container-gutters));
+      padding-block: var(--rs-container-gutter-top) var(--rs-container-gutter-bottom);
+      padding-inline: var(--rs-container-gutter-left) var(--rs-container-gutter-right);
+      width: 100%;
+
+      &--content {
+        --rs-container-width: var(--rs-container-width-content-sm, 600px);
+
+        @include media-breakpoint-up(lg) {
+          --rs-container-width: var(--rs-container-width-content-lg, 800px);
+        }
+      }
+
+      &--wide {
+        --rs-container-width: var(--rs-container-width-wide, 1200px);
+      }
+
+      &--full-width {
+        --rs-container-width: 100%;
+      }
+
+      &--padded {
+        padding-block: var(--rs-container-padding-block, 20px);
+      }
+
+      &--no-gutters {
+        padding-inline: 0;
+      }
+    }
+  }
+</style>

package/src/components/Disclosure.svelte

@@ -0,0 +1,179 @@
+<script module lang="ts">
+  import { createContext } from 'svelte'
+
+  /**
+   * A disclosure registered with an Accordion. `isOpen` lets the accordion reconcile
+   * panels when it switches into single-open mode, and `close` is how it collapses a
+   * sibling.
+   */
+  export type AccordionItem = { isOpen: () => boolean; close: () => void }
+
+  export type AccordionContext = {
+    register: (item: AccordionItem) => void
+    unregister: (item: AccordionItem) => void
+    opened: (item: AccordionItem) => void
+  }
+
+  export const [getAccordion, setAccordion, hasAccordion] = createContext<AccordionContext>()
+</script>
+
+<script lang="ts">
+  import { untrack } from 'svelte'
+  import type { Snippet } from 'svelte'
+  import type { HTMLDetailsAttributes, ToggleEventHandler } from 'svelte/elements'
+
+  export type DisclosureTag = 'details'
+
+  type Props = {
+    as?: DisclosureTag
+    summary?: string
+    open?: boolean
+    class?: string
+    summarySlot?: Snippet
+    children?: Snippet
+  } & Omit<HTMLDetailsAttributes, 'open'>
+
+  let {
+    as = 'details',
+    summary,
+    open = $bindable(false),
+    class: className = '',
+    summarySlot,
+    children,
+    ontoggle,
+    ...attrs
+  }: Props = $props()
+
+  const accordion = hasAccordion() ? getAccordion() : undefined
+
+  const self: AccordionItem = {
+    isOpen: () => open,
+    close: () => {
+      open = false
+    },
+  }
+
+  $effect(() => {
+    if (!accordion) return
+    accordion.register(self)
+    if (untrack(() => open)) accordion.opened(self)
+    return () => accordion.unregister(self)
+  })
+
+  // `<details>` fires `toggle` once its own open state has changed, so mirroring the
+  // element here is what gives consumers a working `bind:open`.
+  const onToggle: ToggleEventHandler<HTMLDetailsElement> = (event) => {
+    open = event.currentTarget.open
+    if (open) accordion?.opened(self)
+    ontoggle?.(event)
+  }
+
+  const classes = $derived(['rs-disclosure', className].filter(Boolean).join(' '))
+</script>
+
+<svelte:element this={as} {...attrs} class={classes} open={open} ontoggle={onToggle}>
+  <summary class="rs-disclosure__summary">
+    <span class="rs-disclosure__label">
+      {#if summary}{summary}{:else if summarySlot}{@render summarySlot()}{/if}
+    </span>
+    <span class="rs-disclosure__indicator" aria-hidden="true"></span>
+  </summary>
+  <div class="rs-disclosure__panel">
+    {@render children?.()}
+  </div>
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-disclosure {
+      --rs-disclosure-duration: var(--rs-transition-fast, 140ms);
+      --rs-disclosure-font-size: var(--rs-font-size-md, #{to-rem(16)});
+      border: var(--rs-disclosure-border-width, var(--rs-border-width-sm, 1px)) solid
+        var(--rs-disclosure-border-color, var(--rs-color-border, #c8d2eb));
+      border-radius: var(--rs-disclosure-border-radius, var(--rs-radius-md, 10px));
+      color: var(--rs-disclosure-color, var(--rs-color-fg, #131a2f));
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+
+      &__summary {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+        font-size: var(--rs-disclosure-summary-font-size, var(--rs-disclosure-font-size));
+        font-weight: var(--rs-font-weight-medium, 500);
+        gap: var(--rs-space-2, 8px);
+        justify-content: space-between;
+        line-height: var(--rs-line-height-tight, 1.2);
+        list-style: none;
+        padding-block: var(--rs-disclosure-summary-padding-block, var(--rs-space-3, 12px));
+        padding-inline: var(--rs-disclosure-summary-padding-inline, var(--rs-space-4, 16px));
+
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        &:focus-visible {
+          outline: 2px solid var(--rs-color-focus-ring, #296dff);
+          outline-offset: -2px;
+        }
+      }
+
+      &__label {
+        min-width: 0;
+      }
+
+      &__indicator {
+        border-color: currentcolor;
+        border-style: solid;
+        border-width: 0 var(--rs-border-width-md, 2px) var(--rs-border-width-md, 2px) 0;
+        flex: none;
+        height: 8px;
+        transform: rotate(45deg);
+        transition: transform var(--rs-disclosure-duration) ease;
+        width: 8px;
+      }
+
+      &__panel {
+        font-size: var(--rs-disclosure-panel-font-size, var(--rs-disclosure-font-size));
+        opacity: 0;
+        padding-block: 0 var(--rs-disclosure-panel-padding-block, var(--rs-space-4, 16px));
+        padding-inline: var(--rs-disclosure-panel-padding-inline, var(--rs-space-4, 16px));
+        transform: translateY(-2px);
+        transition:
+          opacity var(--rs-disclosure-duration) ease-out,
+          transform var(--rs-disclosure-duration) ease-out;
+      }
+
+      &[open] {
+        .rs-disclosure__indicator {
+          transform: rotate(-135deg);
+        }
+
+        .rs-disclosure__panel {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @include container-query-up($rs-cq-sm) {
+        --rs-disclosure-font-size: var(--rs-font-size-lg, #{to-rem(18)});
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .rs-disclosure__indicator,
+        .rs-disclosure__panel {
+          transition: none;
+        }
+      }
+    }
+  }
+</style>

package/src/components/Field.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import Label from './Label.svelte'
+
+  export type FieldTag = 'div' | 'section'
+
+  /**
+   * Attributes Field derives from its own props so the wrapped control stays linked to
+   * the label, hint, and error text. Spread it onto the control inside the `children` snippet.
+   */
+  export type FieldControlProps = {
+    id: string
+    'aria-describedby': string | undefined
+    'aria-invalid': 'true' | undefined
+    required: boolean | undefined
+    disabled: boolean | undefined
+  }
+
+  type Props = {
+    as?: FieldTag
+    id?: string
+    label?: string
+    hint?: string
+    error?: string
+    hintId?: string
+    errorId?: string
+    required?: boolean
+    optional?: boolean
+    requiredText?: string
+    optionalText?: string
+    disabled?: boolean
+    class?: string
+    labelSlot?: Snippet<[string]>
+    hintSlot?: Snippet
+    errorSlot?: Snippet
+    children?: Snippet<[FieldControlProps]>
+  } & HTMLAttributes<HTMLElement>
+
+  let {
+    as = 'div',
+    id: idProp,
+    label,
+    hint,
+    error,
+    hintId: hintIdProp,
+    errorId: errorIdProp,
+    required = false,
+    optional = false,
+    requiredText,
+    optionalText,
+    disabled = false,
+    class: className = '',
+    'aria-disabled': ariaDisabled,
+    labelSlot,
+    hintSlot,
+    errorSlot,
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const generatedId = $props.id()
+  const id = $derived(idProp ?? `rs-field-${generatedId}`)
+  const hintId = $derived(hintIdProp ?? `${id}-hint`)
+  const errorId = $derived(errorIdProp ?? `${id}-error`)
+  const hasLabel = $derived(Boolean(label ?? labelSlot))
+  const hasHint = $derived(Boolean(hint ?? hintSlot))
+  const hasError = $derived(Boolean(error ?? errorSlot))
+
+  const describedBy = $derived(
+    [hasHint ? hintId : undefined, hasError ? errorId : undefined].filter(Boolean).join(' ') ||
+      undefined,
+  )
+
+  const control = $derived({
+    id,
+    'aria-describedby': describedBy,
+    'aria-invalid': hasError ? 'true' : undefined,
+    required: required || undefined,
+    disabled: disabled || undefined,
+  } satisfies FieldControlProps)
+
+  const classes = $derived(
+    ['rs-field', disabled ? 'rs-field--disabled' : undefined, className].filter(Boolean).join(' '),
+  )
+
+  const wrapperAriaDisabled = $derived(disabled ? 'true' : ariaDisabled)
+</script>
+
+<svelte:element
+  this={as}
+  {...attrs}
+  class={classes}
+  aria-disabled={wrapperAriaDisabled}
+>
+  {#if hasLabel}
+    <div class="rs-field__label">
+      {#if label}
+        <Label for={id} {required} {optional} {requiredText} {optionalText}>{label}</Label>
+      {:else if labelSlot}
+        {@render labelSlot(id)}
+      {/if}
+    </div>
+  {/if}
+  <div class="rs-field__control">
+    {@render children?.(control)}
+  </div>
+  {#if hasHint}
+    <div class="rs-field__hint" id={hintId}>
+      {#if hint}
+        {hint}
+      {:else if hintSlot}
+        {@render hintSlot()}
+      {/if}
+    </div>
+  {/if}
+  {#if hasError}
+    <div class="rs-field__error" id={errorId}>
+      {#if error}
+        {error}
+      {:else if errorSlot}
+        {@render errorSlot()}
+      {/if}
+    </div>
+  {/if}
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-field {
+      container-name: rs-component;
+      container-type: inline-size;
+      display: flex;
+      flex-direction: column;
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+      gap: var(--rs-field-gap, var(--rs-space-2, 8px));
+      min-width: 0;
+
+      @include container-query-up($rs-cq-sm) {
+        gap: var(--rs-field-gap, var(--rs-space-3, 12px));
+      }
+
+      &--disabled {
+        .rs-field__label,
+        .rs-field__control,
+        .rs-field__hint,
+        .rs-field__error {
+          opacity: 0.55;
+        }
+      }
+
+      &__control {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        min-width: 0;
+      }
+
+      &__hint {
+        color: var(--rs-field-hint-color, var(--rs-color-muted, #4f5b7d));
+        font-size: var(--rs-field-hint-font-size, var(--rs-font-size-sm, #{to-rem(14)}));
+        line-height: var(--rs-line-height-base, 1.45);
+        margin: 0;
+      }
+
+      &__error {
+        color: var(--rs-field-error-color, var(--rs-color-danger-fg, #3d0a08));
+        font-size: var(--rs-field-error-font-size, var(--rs-font-size-sm, #{to-rem(14)}));
+        line-height: var(--rs-line-height-base, 1.45);
+        margin: 0;
+      }
+    }
+  }
+</style>

package/src/components/Figure.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type FigureTag = 'figure' | 'div'
+  export type FigureVariant = 'default' | 'bordered'
+  export type FigureCaptionAlign = 'start' | 'center'
+
+  type Props = {
+    as?: FigureTag
+    variant?: FigureVariant
+    captionAlign?: FigureCaptionAlign
+    caption?: string
+    class?: string
+    captionSlot?: Snippet
+    children?: Snippet
+  } & HTMLAttributes<HTMLElement>
+
+  let {
+    as = 'figure',
+    variant = 'default',
+    captionAlign = 'start',
+    caption,
+    class: className = '',
+    captionSlot,
+    children,
+    ...attrs
+  }: Props = $props()
+
+  const hasCaptionText = $derived(Boolean(caption?.trim()))
+  const hasCaption = $derived(hasCaptionText || Boolean(captionSlot))
+
+  // `<figcaption>` is only valid inside `<figure>`, so the `div` root pairs the caption
+  // with `role="note"` instead of rendering an orphaned caption element.
+  const isFigure = $derived(as === 'figure')
+
+  const classes = $derived(
+    ['rs-figure', variant === 'bordered' ? 'rs-figure--bordered' : undefined, className]
+      .filter(Boolean)
+      .join(' '),
+  )
+
+  const captionClasses = $derived(
+    ['rs-figure__caption', captionAlign === 'center' ? 'rs-figure__caption--center' : undefined]
+      .filter(Boolean)
+      .join(' '),
+  )
+</script>
+
+<svelte:element this={as} {...attrs} class={classes}>
+  <div class="rs-figure__media">
+    {@render children?.()}
+  </div>
+  {#if hasCaption}
+    <svelte:element
+      this={isFigure ? 'figcaption' : 'div'}
+      class={captionClasses}
+      role={isFigure ? undefined : 'note'}
+    >
+      {#if hasCaptionText}{caption}{/if}{#if captionSlot}{@render captionSlot()}{/if}
+    </svelte:element>
+  {/if}
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-figure {
+      container-name: rs-component;
+      container-type: inline-size;
+      display: flex;
+      flex-direction: column;
+      gap: var(--rs-figure-gap, var(--rs-space-3, 12px));
+      margin-block: 0 var(--rs-text-spacing-bottom, 16px);
+      margin-inline: 0;
+
+      &__media {
+        border-radius: var(--rs-figure-media-radius, var(--rs-radius-md, 10px));
+        display: block;
+        overflow: hidden;
+
+        :is(img, picture, video, canvas, svg) {
+          display: block;
+          height: auto;
+          max-width: 100%;
+          width: 100%;
+        }
+
+        table {
+          margin-bottom: 0;
+          width: 100%;
+        }
+      }
+
+      // Only the bordered variant frames the media, so the border is declared on the
+      // modifier and the default variant stays unframed.
+      &--bordered .rs-figure__media {
+        border: var(--rs-figure-media-border-width, var(--rs-border-width-sm, 1px)) solid
+          var(--rs-figure-media-border-color, var(--rs-color-border, #c8d2eb));
+      }
+
+      &__caption {
+        color: var(--rs-figure-caption-color, var(--rs-color-muted, #4f5b7d));
+        font-family: var(
+          --rs-font-family-sans,
+          'Inter',
+          'Segoe UI',
+          Roboto,
+          Helvetica,
+          Arial,
+          sans-serif
+        );
+        font-size: var(--rs-figure-caption-font-size, var(--rs-font-size-sm, #{to-rem(14)}));
+        line-height: var(--rs-figure-caption-line-height, var(--rs-line-height-base, 1.45));
+        text-align: start;
+
+        @include container-query-up($rs-cq-sm) {
+          font-size: var(--rs-figure-caption-font-size-sm, var(--rs-font-size-sm, #{to-rem(14)}));
+        }
+
+        &--center {
+          text-align: center;
+        }
+      }
+    }
+  }
+</style>

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>