@labcat2020/rocketship-svelte 0.1.0 → 0.3.0

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/Textarea.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements'
+
+  export type TextareaSize = 'sm' | 'md' | 'lg'
+
+  type Props = {
+    size?: TextareaSize
+    invalid?: boolean
+    class?: string
+    value?: string
+  } & Omit<HTMLTextareaAttributes, 'value'>
+
+  let {
+    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-textarea',
+      `rs-textarea--${size}`,
+      isInvalid ? 'rs-textarea--invalid' : undefined,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  )
+</script>
+
+<textarea {...attrs} aria-invalid={ariaInvalid} bind:value class={classes}></textarea>
+
+<style lang="scss">
+  @use '@labcat2020/rocketship/styles/mixins' as *;
+
+  :global {
+    .rs-textarea {
+      // Size locals live on the block so a size modifier only reassigns them; `--rs-textarea-font-size`
+      // stays unset here so a consumer can override one control without touching the others.
+      --rs-textarea-font-size-sm: var(--rs-font-size-sm, #{to-rem(14)});
+      --rs-textarea-font-size-md: var(--rs-font-size-md, #{to-rem(16)});
+      --rs-textarea-font-size-lg: var(--rs-font-size-lg, #{to-rem(18)});
+      --rs-textarea-min-height-sm: 72px;
+      --rs-textarea-min-height-md: 96px;
+      --rs-textarea-min-height-lg: 128px;
+      --rs-textarea-padding-inline-sm: var(--rs-space-2, 8px);
+      --rs-textarea-padding-inline-md: var(--rs-space-3, 12px);
+      --rs-textarea-padding-inline-lg: var(--rs-space-4, 16px);
+      background: var(--rs-textarea-bg, var(--rs-color-surface, #ffffff));
+      border: var(--rs-textarea-border-width, var(--rs-border-width-sm, 1px)) solid
+        var(--rs-textarea-border-color, var(--rs-color-border, #c8d2eb));
+      border-radius: var(--rs-textarea-border-radius, var(--rs-radius-sm, 6px));
+      box-sizing: border-box;
+      color: var(--rs-textarea-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-textarea-font-size, var(--rs-textarea-font-size-md));
+      line-height: var(--rs-line-height-base, 1.45);
+      min-height: var(--rs-textarea-min-height, var(--rs-textarea-min-height-md));
+      padding-block: var(--rs-textarea-padding-block, var(--rs-space-2, 8px));
+      padding-inline: var(--rs-textarea-padding-inline, var(--rs-textarea-padding-inline-md));
+      resize: var(--rs-textarea-resize, vertical);
+      transition:
+        background-color var(--rs-transition-fast, 140ms) ease,
+        border-color var(--rs-transition-fast, 140ms) ease;
+      width: 100%;
+
+      &::placeholder {
+        color: var(--rs-textarea-placeholder-color, var(--rs-color-muted, #4f5b7d));
+      }
+
+      &:focus-visible {
+        border-color: var(--rs-textarea-focus-border-color, var(--rs-color-accent, #2f5bdb));
+        outline: 2px solid var(--rs-textarea-focus-ring-color, var(--rs-color-focus-ring, #296dff));
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.55;
+      }
+
+      &--sm {
+        --rs-textarea-font-size: var(--rs-textarea-font-size-sm);
+        --rs-textarea-min-height: var(--rs-textarea-min-height-sm);
+        --rs-textarea-padding-inline: var(--rs-textarea-padding-inline-sm);
+      }
+
+      &--md {
+        --rs-textarea-font-size: var(--rs-textarea-font-size-md);
+        --rs-textarea-min-height: var(--rs-textarea-min-height-md);
+        --rs-textarea-padding-inline: var(--rs-textarea-padding-inline-md);
+      }
+
+      &--lg {
+        --rs-textarea-font-size: var(--rs-textarea-font-size-lg);
+        --rs-textarea-min-height: var(--rs-textarea-min-height-lg);
+        --rs-textarea-padding-inline: var(--rs-textarea-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-textarea-bg: var(--rs-color-danger-bg, #ffeef0);
+        --rs-textarea-border-color: var(--rs-color-danger-border, #f0a8b0);
+        --rs-textarea-color: var(--rs-color-danger-fg, #3d0a08);
+      }
+
+      @include container-query-up($rs-cq-sm) {
+        --rs-textarea-font-size-sm: var(--rs-font-size-md, #{to-rem(16)});
+        --rs-textarea-font-size-md: var(--rs-font-size-lg, #{to-rem(18)});
+        --rs-textarea-font-size-lg: var(--rs-font-size-xl, #{to-rem(20)});
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    }
+  }
+</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>