@labcat2020/rocketship-svelte 0.0.0-stage → 0.2.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/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/Table.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type TableTag = 'div' | 'section'
+
+  export type TableProps = {
+    as?: TableTag
+    striped?: boolean
+    compact?: boolean
+    hover?: boolean
+    caption?: string
+    label?: string
+    class?: string
+    children?: Snippet
+  } & HTMLAttributes<HTMLElement>
+
+  let {
+    as = 'div',
+    striped = false,
+    compact = false,
+    hover = false,
+    caption,
+    label,
+    class: className = '',
+    children,
+    ...attrs
+  }: TableProps = $props()
+
+  let holder = $state<HTMLElement | null>(null)
+  let table = $state<HTMLTableElement | null>(null)
+  let overflows = $state(false)
+
+  const hasCaption = $derived(Boolean(caption?.trim()))
+
+  /**
+   * Names the scroll region. The caption names the table, so it can name the region too; when
+   * there is no caption, `label` is the only hook for an accessible name.
+   */
+  const regionLabel = $derived(label?.trim() || caption?.trim() || 'Table')
+
+  const holderClasses = $derived(['rs-table-holder', className].filter(Boolean).join(' '))
+
+  /**
+   * The scroll region is announced only once the holder actually scrolls, and only for the keys
+   * the consumer left unset, so an explicit `role`, `tabindex`, or `aria-label` always wins.
+   */
+  const regionAttrs = $derived.by(() => {
+    if (!overflows) return {}
+    const region: Record<string, unknown> = {}
+    if (!('role' in attrs)) region.role = 'region'
+    if (!('tabindex' in attrs)) region.tabindex = 0
+    if (!('aria-label' in attrs)) region['aria-label'] = regionLabel
+    return region
+  })
+
+  const tableClasses = $derived(
+    [
+      'rs-table',
+      striped ? 'rs-table--striped' : undefined,
+      compact ? 'rs-table--compact' : undefined,
+      hover ? 'rs-table--hover' : undefined,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  )
+
+  /**
+   * A scroll container only becomes reachable by keyboard once it actually overflows, so the
+   * region semantics come from a measurement rather than being applied unconditionally: a
+   * table that fits stays out of the tab order and off the landmark list. Both the holder and
+   * the table are observed so a holder resize and a content resize each re-measure.
+   */
+  $effect(() => {
+    const holderElement = holder
+    const tableElement = table
+    if (!holderElement || !tableElement) return
+
+    const measure = () => {
+      overflows = holderElement.scrollWidth > holderElement.clientWidth
+    }
+
+    measure()
+
+    if (typeof ResizeObserver === 'undefined') return
+
+    const observer = new ResizeObserver(measure)
+    observer.observe(holderElement)
+    observer.observe(tableElement)
+
+    return () => observer.disconnect()
+  })
+</script>
+
+<svelte:element this={as} {...attrs} {...regionAttrs} bind:this={holder} class={holderClasses}>
+  <table class={tableClasses} bind:this={table}>
+    {#if hasCaption}
+      <caption>{caption}</caption>
+    {/if}
+    {@render children?.()}
+  </table>
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-table-holder {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+      background: var(--rs-color-surface, #ffffff);
+      border: var(--rs-table-border-width, var(--rs-border-width-sm, 1px)) solid
+        var(--rs-table-border-color, var(--rs-color-border, #c8d2eb));
+      border-radius: var(--rs-table-border-radius, var(--rs-radius-md, 10px));
+
+      &:focus-visible {
+        outline: 2px solid var(--rs-table-focus-ring-color, var(--rs-color-focus-ring, #296dff));
+        outline-offset: 2px;
+      }
+    }
+
+    .rs-table {
+      border-collapse: collapse;
+      border-spacing: 0;
+      width: 100%;
+      font-family: var(
+        --rs-font-family-sans,
+        'Inter',
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif
+      );
+      font-size: var(--rs-table-font-size, var(--rs-font-size-sm, #{to-rem(14)}));
+      line-height: var(--rs-line-height-base, 1.45);
+      color: var(--rs-color-fg, #131a2f);
+      text-align: left;
+
+      th,
+      td {
+        padding-block: var(--rs-table-cell-padding-block, var(--rs-space-2, 8px));
+        padding-inline: var(--rs-table-cell-padding-inline, var(--rs-space-3, 12px));
+        text-align: left;
+        vertical-align: top;
+        border-bottom: var(--rs-table-border-width, var(--rs-border-width-sm, 1px)) solid
+          var(--rs-table-border-color, var(--rs-color-border, #c8d2eb));
+      }
+
+      thead th {
+        background: var(--rs-table-head-bg, var(--rs-color-surface-elevated, #eef2ff));
+        color: var(--rs-table-head-color, var(--rs-color-fg, #131a2f));
+        font-weight: var(--rs-font-weight-semibold, 600);
+        white-space: nowrap;
+        border-bottom-width: var(--rs-table-head-border-width, var(--rs-border-width-sm, 1px));
+      }
+
+      tbody tr:last-child td {
+        border-bottom: 0;
+      }
+
+      caption {
+        caption-side: top;
+        color: var(--rs-color-muted, #4f5b7d);
+        font-size: var(--rs-font-size-sm, #{to-rem(14)});
+        line-height: var(--rs-line-height-base, 1.45);
+        padding-block: var(--rs-space-2, 8px);
+        padding-inline: var(--rs-space-3, 12px);
+        text-align: left;
+      }
+
+      &--striped {
+        tbody tr:nth-child(even) {
+          background: var(--rs-table-striped-bg, var(--rs-color-surface-elevated, #eef2ff));
+        }
+      }
+
+      &--hover {
+        tbody tr:hover {
+          background: var(--rs-table-hover-bg, var(--rs-color-surface-elevated, #eef2ff));
+        }
+      }
+
+      &--compact {
+        th,
+        td {
+          padding-block: var(--rs-table-compact-padding-block, var(--rs-space-1, 4px));
+          padding-inline: var(--rs-table-compact-padding-inline, var(--rs-space-2, 8px));
+        }
+      }
+    }
+  }
+</style>

package/src/components/Typography.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  export type TypographyTag = 'div' | 'section' | 'article'
+
+  type Props = {
+    as?: TypographyTag
+    html?: string
+    class?: string
+    children?: Snippet
+  } & HTMLAttributes<HTMLElement>
+
+  let { as = 'div', html, class: className = '', children, ...attrs }: Props = $props()
+
+  const classes = $derived(['rs-typography', className].filter(Boolean).join(' '))
+</script>
+
+<svelte:element this={as} {...attrs} class={classes}>
+  {#if html}
+    {@html html}
+  {:else}
+    {@render children?.()}
+  {/if}
+</svelte:element>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-typography {
+      h1 {
+        @include typography-h1;
+      }
+
+      h2 {
+        @include typography-h2;
+      }
+
+      h3 {
+        @include typography-h3;
+      }
+
+      h4 {
+        @include typography-h4;
+      }
+
+      h5 {
+        @include typography-h5;
+      }
+
+      h6 {
+        @include typography-h6;
+      }
+
+      p {
+        @include typography-p;
+      }
+
+      a {
+        @include typography-a;
+      }
+
+      .intro-text {
+        @include typography-intro;
+      }
+
+      i,
+      em {
+        @include typography-em;
+      }
+
+      b,
+      strong {
+        @include typography-strong;
+      }
+
+      hr {
+        @include typography-hr;
+      }
+
+      li {
+        @include typography-li;
+      }
+
+      ul {
+        @include typography-ul;
+      }
+
+      ol {
+        @include typography-ol;
+      }
+
+      @include typography-list-bridges;
+
+      pre {
+        @include typography-pre;
+      }
+
+      pre code {
+        @include typography-pre-code;
+      }
+
+      code {
+        @include typography-code-inline;
+      }
+
+      kbd {
+        @include typography-kbd;
+      }
+
+      samp {
+        @include typography-samp;
+      }
+
+      blockquote {
+        @include typography-blockquote;
+      }
+
+      blockquote p {
+        @include typography-blockquote-p;
+      }
+
+      q {
+        @include typography-q;
+      }
+
+      table {
+        @include typography-table;
+      }
+
+      caption {
+        @include typography-caption;
+      }
+
+      dl {
+        @include typography-dl;
+      }
+
+      dt {
+        @include typography-dt;
+      }
+
+      dd {
+        @include typography-dd;
+      }
+
+      small {
+        @include typography-small;
+      }
+
+      sub {
+        @include typography-sub;
+      }
+
+      sup {
+        @include typography-sup;
+      }
+
+      mark {
+        @include typography-mark;
+      }
+
+      abbr[title] {
+        @include typography-abbr;
+      }
+
+      del {
+        @include typography-del;
+      }
+
+      ins {
+        @include typography-ins;
+      }
+
+      address {
+        @include typography-address;
+      }
+
+      dfn {
+        @include typography-dfn;
+      }
+
+      cite {
+        @include typography-cite;
+      }
+
+      var {
+        @include typography-var;
+      }
+
+      time {
+        @include typography-time;
+      }
+
+      > :first-child {
+        margin-top: 0;
+      }
+
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+</style>