@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/field/Field.vue

@@ -0,0 +1,49 @@
+<!--
+  A form field: a label, a control and an optional hint or error message, stacked in
+  `div.rkui-field`. The slot is the control. `class`, `style` and other attributes go on the div.
+  With no `label`, `hint` or `error` it renders just its slot, and those attributes have nothing to
+  go on.
+
+  Input, Textarea, Select, Stepper, Search, File and Range wrap themselves in a Field and take its
+  `label`, `hint` and `error` props, so a labelled form field is one tag. They also set the
+  control's `id`, `aria-describedby` and `aria-invalid`. Use Field itself to put another control
+  (your own markup) in the same frame. Then the control needs the `id` that `for` names, and
+  `aria-describedby` pointing at `${for}-message`, which is the message's id.
+
+  @example
+  <Field label="Volume" for="volume" hint="0 to 100">
+    <input id="volume" type="number" aria-describedby="volume-message" />
+  </Field>
+-->
+<script setup lang="ts">
+interface Props {
+  /** The label text; no label when left out. */
+  label?: string
+  /** The id of the control the label belongs to. */
+  for?: string
+  /** A quiet line under the control; none when left out. */
+  hint?: string
+  /**
+   * An error line under the control, in the error colour; it replaces the hint; none when left
+   * out.
+   */
+  error?: string
+}
+
+const { label, for: controlId, hint, error } = defineProps<Props>()
+</script>
+
+<template>
+  <div v-if="label || error || hint" class="rkui-field">
+    <label v-if="label" :for="controlId">{{ label }}</label>
+    <slot />
+    <span
+      v-if="error || hint"
+      :class="['rkui-field-message', error && 'rkui-field-message--error']"
+      :id="controlId && `${controlId}-message`"
+    >
+      {{ error || hint }}
+    </span>
+  </div>
+  <slot v-else />
+</template>

package/src/components/field/field.css

@@ -0,0 +1,31 @@
+/* Form fields: .rkui-field stacks a label, its control and an optional message; .rkui-check is an
+   inline label for a checkbox, radio or switch. */
+
+.rkui-field {
+  display: grid;
+  gap: var(--rkui-space-1);
+  justify-items: start;
+  font-weight: 600;
+}
+
+.rkui-field-message {
+  color: var(--rkui-muted);
+  font-size: var(--rkui-step--1);
+  font-weight: 400;
+}
+
+.rkui-field-message--error {
+  color: var(--rkui-coral-deep);
+  font-weight: 600;
+}
+
+.rkui-check {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rkui-space-2);
+  cursor: pointer;
+}
+
+.rkui-check:has(:disabled) {
+  cursor: not-allowed;
+}

package/src/components/figure/figure.css

@@ -0,0 +1,30 @@
+/* Figure: an image, chart or widget with a caption under it and an optional source line.
+
+   <figure class="rkui-figure">
+     …image, chart or widget…
+     <figcaption class="rkui-figure-caption">
+       <span class="rkui-figure-label">Figure 1.</span> Caption text.
+       <span class="rkui-figure-source">Source: …</span>
+     </figcaption>
+   </figure> */
+
+.rkui-figure {
+  display: grid;
+  gap: var(--rkui-space-3);
+  margin: var(--rkui-space-5) 0;
+}
+
+.rkui-figure-caption {
+  max-inline-size: 68ch;
+  font-size: var(--rkui-step--1);
+}
+
+.rkui-figure-label {
+  font-weight: 700;
+}
+
+.rkui-figure-source {
+  display: block;
+  margin-block-start: var(--rkui-space-1);
+  color: var(--rkui-muted);
+}

package/src/components/file/File.vue

@@ -0,0 +1,73 @@
+<!--
+  A file input, in two variants, inside a Field. `class` and `style` go on the Field's div when
+  there is a label, hint or error, otherwise on the outer element (the input, or the drop panel's
+  label); other attributes (name, accept, multiple, disabled, ...) go on the input. Without a
+  label, give it an `aria-label`; the 'drop' variant is labelled by its own text. It has no
+  `v-model`, as a browser lets no script set a file input's files: read them in a `change`
+  handler. With `file-enhance.js` (in `@oneonefour/rkui/enhance.js`) the drop panel shows the
+  chosen files' names, joined with commas, and clears them when the form is reset; without it the
+  panel keeps showing its prompt. In Safari, the 'button' variant's "no file selected" sits right
+  against the button.
+
+  @example
+  <File variant="drop" name="upload" prompt="Choose a file or drop it here" />
+-->
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+import UploadIcon from '@oneonefour/rkui/icons/upload-simple.vue'
+import Field from '../field/Field.vue'
+import { useComponentId } from '../../shared/component-id'
+import { controlAttrs } from '../../shared/split-attrs'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  /**
+   * 'button' (A: the input frame with a small button and the filename) or 'drop' (B: a dashed
+   * panel that takes clicks and dropped files, and shows the chosen files' names when
+   * file-enhance.js is loaded); button when left out. Open, see DECISIONS ("Special inputs").
+   */
+  variant?: 'button' | 'drop'
+  /**
+   * The drop panel's text, for the 'drop' variant; "Choose a file or drop it here" when left out.
+   */
+  prompt?: string
+  /** The visible label; none when left out. */
+  label?: string
+  /** A quiet line under the input; none when left out. */
+  hint?: string
+  /** An error line under the input; it also marks the input invalid; none when left out. */
+  error?: string
+}
+
+const {
+  variant = 'button',
+  prompt = 'Choose a file or drop it here',
+  label,
+  hint,
+  error,
+} = defineProps<Props>()
+
+const attrs = useAttrs()
+const id = (attrs.id as string | undefined) ?? useComponentId('file')
+
+/**
+ * The page's attributes: `class` and `style` for the Field's div when it draws a frame, otherwise
+ * for the outer element (the drop panel, or the input); the rest for the input.
+ */
+function pageAttrs() {
+  return controlAttrs(attrs, id, { label, hint, error })
+}
+</script>
+
+<template>
+  <Field :label :for="id" :hint :error v-bind="pageAttrs().field">
+    <label v-if="variant === 'drop'" class="rkui-file-drop" v-bind="pageAttrs().wrapper">
+      <input type="file" v-bind="pageAttrs().wrappedControl" />
+      <UploadIcon class="rkui-icon" />
+      <span class="rkui-file-drop-prompt">{{ prompt }}</span>
+      <span class="rkui-file-drop-chosen"></span>
+    </label>
+    <input v-else class="rkui-input" type="file" v-bind="pageAttrs().control" />
+  </Field>
+</template>

package/src/components/file/file-enhance.js

@@ -0,0 +1,35 @@
+// Shows the chosen files' names, joined with commas, inside a file drop panel, after a choice or a
+// drop, and clears them when the form is reset. Without this script the panel still picks and
+// submits files; it just shows its prompt. Delegated listeners serve every panel, including ones
+// added later.
+
+/**
+ * Writes the names of a panel's chosen files into it, each name in a span so a long list wraps
+ * between names, and marks the panel `data-rkui-chosen` while any are chosen.
+ * @param {Element} panel a `.rkui-file-drop` label
+ */
+function showChosen(panel) {
+  const input = panel.querySelector('input[type="file"]')
+  const chosen = panel.querySelector('.rkui-file-drop-chosen')
+  if (!(input instanceof HTMLInputElement) || !chosen) return
+  const names = [...(input.files ?? [])].map((file) => file.name)
+  const spans = names.map((name, index) => {
+    const span = document.createElement('span')
+    span.textContent = index < names.length - 1 ? `${name},` : name
+    return span
+  })
+  chosen.replaceChildren(...spans.flatMap((span, index) => (index ? [' ', span] : [span])))
+  panel.toggleAttribute('data-rkui-chosen', names.length > 0)
+}
+
+document.addEventListener('change', (event) => {
+  const panel = /** @type {Element} */ (event.target).closest?.('.rkui-file-drop')
+  if (panel) showChosen(panel)
+})
+
+// The reset event comes before the form clears its inputs, so the panels are read once it has. A
+// microtask is too soon when a reset button is clicked: it runs as soon as this listener returns.
+document.addEventListener('reset', (event) => {
+  const form = /** @type {HTMLFormElement} */ (event.target)
+  setTimeout(() => form.querySelectorAll('.rkui-file-drop').forEach(showChosen))
+})

package/src/components/file/file.css

@@ -0,0 +1,130 @@
+/* File inputs, in two variants (A, B).
+
+   File A: the input frame with a small filled button that pops, and the browser's filename text.
+   <input class="rkui-input" type="file">
+
+   File B: a dashed drop panel. The input is invisible but covers the panel, so clicks and dropped
+   files land on it with no script. file-enhance.js writes the chosen files' names, joined with
+   commas, in .rkui-file-drop-chosen and sets data-rkui-chosen on the label, which swaps the prompt
+   for them; without the script the prompt stays.
+   <label class="rkui-file-drop">
+     <input type="file">
+     <svg class="rkui-icon" aria-hidden="true">…</svg>
+     <span class="rkui-file-drop-prompt">Label</span>
+     <span class="rkui-file-drop-chosen"></span>
+   </label> */
+
+/* File A */
+
+.rkui-input[type='file'] {
+  cursor: pointer;
+}
+
+/* The button moves with relative offsets rather than translate, so the filename beside it stays
+   still in every browser. At rest it sits one press offset towards the light, so pressed in, it
+   is centred in the frame. */
+.rkui-input[type='file']::file-selector-button {
+  position: relative;
+  inset-block-start: calc(-1 * var(--rkui-press-offset-y));
+  inset-inline-start: 0;
+  margin-inline-end: var(--rkui-space-4);
+  padding: var(--rkui-space-1) var(--rkui-space-3);
+  border: var(--rkui-outline-width) solid var(--rkui-line);
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-yellow);
+  color: var(--rkui-on-fill);
+  box-shadow: var(--rkui-shadow);
+  font: inherit;
+  font-size: var(--rkui-step--1);
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    inset var(--rkui-duration-fast) ease,
+    box-shadow var(--rkui-duration-fast) ease;
+}
+
+@media (hover: hover) {
+  .rkui-input[type='file']:enabled:hover::file-selector-button {
+    box-shadow: var(--rkui-shadow-hover);
+    inset-block-start: calc(-1 * (var(--rkui-press-offset-y) + var(--rkui-lift-offset-y)));
+    inset-inline-start: calc(-1 * var(--rkui-lift-offset-x));
+  }
+}
+
+.rkui-input[type='file']:enabled:active::file-selector-button {
+  box-shadow: var(--rkui-shadow-pressed);
+  inset-block-start: 0;
+  inset-inline-start: var(--rkui-press-offset-x);
+}
+
+.rkui-input[type='file']:disabled::file-selector-button {
+  inset-block-start: 0;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+/* File B */
+
+.rkui-file-drop {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: var(--rkui-space-2);
+  inline-size: 100%;
+  max-inline-size: 30rem;
+  padding: var(--rkui-space-6) var(--rkui-space-4);
+  border: var(--rkui-outline-width) dashed var(--rkui-line-unfilled);
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-raised);
+  color: var(--rkui-fg);
+  font-weight: 600;
+  text-align: center;
+}
+
+.rkui-file-drop-chosen,
+.rkui-file-drop[data-rkui-chosen] .rkui-file-drop-prompt {
+  display: none;
+}
+
+.rkui-file-drop[data-rkui-chosen] .rkui-file-drop-chosen {
+  display: block;
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
+}
+
+/* Each name is one span, so a long list wraps between names, and inside one only if it is wider
+   than the panel. */
+.rkui-file-drop-chosen > span {
+  display: inline-block;
+  max-inline-size: 100%;
+}
+
+.rkui-file-drop input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.rkui-file-drop:hover {
+  border-style: solid;
+}
+
+.rkui-file-drop:has(:focus-visible) {
+  outline: var(--rkui-focus-width) solid var(--rkui-focus);
+  outline-offset: var(--rkui-focus-offset);
+}
+
+.rkui-file-drop:has([aria-invalid='true']) {
+  border-color: var(--rkui-coral-deep);
+  background-color: var(--rkui-coral-tint);
+}
+
+.rkui-file-drop:has(:disabled) {
+  opacity: 0.45;
+  border-style: dashed;
+}
+
+.rkui-file-drop:has(:disabled) input {
+  cursor: not-allowed;
+}

package/src/components/folder/Folder.vue

@@ -0,0 +1,241 @@
+<!--
+  A folder: tabs standing on a sheet, each with its own panel, with no JavaScript. The slot holds
+  its Tabs: each `Tab` is one tab, and its slot is that tab's panel. Each tab is a label around a
+  native radio, so clicking a tab or the arrow keys choose it, and CSS shows the chosen tab's panel.
+  The first tab marked `selected` starts chosen, or the first tab when none is. A Folder takes up to
+  20 tabs. `class`, `style` and other attributes go on the outer div.
+
+  The tabs stand on any side of the sheet (`placement`); on the left and right they stack down its
+  edge, as long as the sheet, with the foot of their letters towards it. They never wrap: when they
+  don't fit, the strip scrolls (`overflow="scroll"`), and folder-enhance.js shows a thin bar on its
+  outer side. With `overflow="collapse"`, folder-enhance.js shows as many tabs as fit: the first and
+  last, the chosen one and its neighbours, and more around it as there is room. On a narrow screen
+  the tabs go to their small size, then leave out the first and last: the chosen one between the ‹ ›
+  step tabs (`steps`), or with its neighbours when there are none, and as many around it as fit.
+  They scroll only if even that doesn't fit. Without the script the strip scrolls. Hidden tabs are
+  reached with the arrow keys or the step tabs, which choose the tab before or after.
+
+  In a `.vue` file, `v-model` is the chosen tab's index, counting from 0, so the widget can read
+  and switch the tab; an index past either end chooses the nearest tab. With `v-model`, the
+  parent's value is the starting value unless it is undefined; then `selected` applies, on the
+  server too, and is handed to the parent on mount. In an Astro or MDX page it gets no `client:`
+  directive and ships no JavaScript; the widget that holds a Folder with `v-model` gets
+  `client:visible`, and until then its tabs switch as they do without JavaScript.
+
+  Inside a `<form>`, the radios are form fields: the form sends `rkui-folder-…=<index>` for the
+  chosen tab, and resetting the form goes back to the tab that started chosen.
+
+  @example
+  <Folder label="Topics">
+    <Tab label="One"><p>First panel.</p></Tab>
+    <Tab label="Two"><p>Second panel.</p></Tab>
+  </Folder>
+  <Folder v-model="step" label="Steps" placement="left" steps>…</Folder>
+-->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, useSlots, useTemplateRef, watch } from 'vue'
+import CaretLeftIcon from '@oneonefour/rkui/icons/caret-left.vue'
+import CaretRightIcon from '@oneonefour/rkui/icons/caret-right.vue'
+import { useComponentId } from '../../shared/component-id'
+import { vLiveChecked } from '../../shared/live-value'
+import { modelWithStart } from '../../shared/model-start'
+import { strayContent } from './tab-items'
+import { readSlotTabs } from './tab-slot'
+
+interface Props {
+  /** The group's accessible name. */
+  label: string
+  /** A sheet in the selected tint; the raised surface when left out. */
+  tinted?: boolean
+  /** The side of the sheet the tabs stand on; 'top' when left out. */
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  /**
+   * When the tabs don't fit: 'scroll' (a strip that scrolls, every tab in reach) or 'collapse'
+   * (as many tabs as fit around the chosen one); 'scroll' when left out.
+   */
+  overflow?: 'scroll' | 'collapse'
+  /** ‹ › step tabs at the strip's ends, choosing the tab before or after; none when left out. */
+  steps?: boolean
+  /**
+   * The look of the dots at the ends of a strip of tabs that scrolls (on the top or the bottom),
+   * written as `data-rkui-dots` on the outer div: 'plain', or 'pill' for dots in a raised pill; the
+   * page's setting when left out.
+   */
+  dots?: 'plain' | 'pill'
+}
+
+const { label, tinted, placement = 'top', overflow = 'scroll', steps, dots } = defineProps<Props>()
+
+/** The chosen tab's index, from 0 (`v-model`); the tab marked `selected`, or 0, when left out. */
+const model = defineModel<number>()
+
+/** The most tabs a Folder takes: folder.css matches each tab to its panel by number. */
+const MOST_TABS = 20
+
+const slots = useSlots()
+// Read while rendering, as Vue asks of slots, not once in setup.
+const tabs = computed(() => {
+  const { tabs, outside, outsideHtml } = readSlotTabs(slots.default?.() ?? [])
+  const stray = strayContent(outsideHtml)
+  if (outside.length > 0 || stray) {
+    throw new Error(`Folder: put everything inside a Tab. Found outside one: ${stray.slice(0, 80)}`)
+  }
+  if (tabs.length > MOST_TABS) {
+    throw new Error(`Folder takes up to ${MOST_TABS} tabs; "${label}" has ${tabs.length}.`)
+  }
+  return tabs
+})
+const selection = modelWithStart(model, () => tabs.value.findIndex((tab) => tab.selected))
+/** The chosen tab's index, kept within the tabs there are. */
+const chosen = computed({
+  get: () => Math.min(Math.max(selection.value, 0), tabs.value.length - 1),
+  set: (index) => {
+    selection.value = index
+  },
+})
+// The radios' name, and the start of each tab's and radio's id.
+const base = useComponentId('folder')
+
+/** Below and right of the sheet, the strip comes after the panels, as it is read. */
+const parts = computed(() =>
+  placement === 'bottom' || placement === 'right' ? ['content', 'strip'] : ['strip', 'content'],
+)
+
+/** The tab chosen when the Folder first renders, whose radio a form reset goes back to. */
+let start: number | undefined
+function isStart(index: number): boolean {
+  start ??= chosen.value
+  return index === start
+}
+
+const root = useTemplateRef<HTMLElement>('root')
+let form: HTMLFormElement | null = null
+/** After a form reset has put the radios back, tells the model which tab is chosen. */
+function onReset() {
+  // The reset event comes before the reset itself.
+  setTimeout(() => {
+    const radios = [
+      ...(root.value?.querySelectorAll<HTMLInputElement>(
+        ':scope > .rkui-folder-strip input[type="radio"]',
+      ) ?? []),
+    ]
+    model.value = radios.findIndex((radio) => radio.checked)
+  })
+}
+
+onMounted(() => {
+  form = root.value?.closest('form') ?? null
+  form?.addEventListener('reset', onReset)
+})
+
+// Vue checks the radio without a change event when the widget switches the tab, so the strip
+// says so itself, for folder-enhance.js to show the tabs around the new one.
+watch(
+  chosen,
+  () => {
+    const strip = root.value?.querySelector(':scope > .rkui-folder-strip > .rkui-folder-tabs')
+    strip?.dispatchEvent(new Event('change', { bubbles: true }))
+  },
+  { flush: 'post' },
+)
+onBeforeUnmount(() => form?.removeEventListener('reset', onReset))
+</script>
+
+<template>
+  <div
+    ref="root"
+    :class="[
+      'rkui-folder',
+      'rkui-folder--tabs',
+      `rkui-folder--${overflow}`,
+      { [`rkui-folder--${placement}`]: placement !== 'top', 'rkui-folder--tinted': tinted },
+    ]"
+    role="group"
+    :aria-label="label"
+    :data-rkui-dots="dots"
+  >
+    <template v-for="part in parts" :key="part">
+      <div v-if="part === 'strip'" class="rkui-folder-strip">
+        <div
+          class="rkui-folder-scrollbar rkui-scroll rkui-scroll--bar"
+          aria-hidden="true"
+          tabindex="-1"
+          hidden
+        >
+          <div></div>
+        </div>
+        <div
+          :class="[
+            'rkui-folder-tabs',
+            'rkui-scroll',
+            { 'rkui-scroll--bar': placement === 'left' || placement === 'right' },
+          ]"
+        >
+          <span v-for="(tab, i) in tabs" :key="i" class="rkui-strip-item">
+            <span
+              v-if="overflow === 'collapse' && i > 1 && i === tabs.length - 1"
+              class="rkui-strip-gap"
+              >…</span
+            >
+            <label class="rkui-folder-tab" :id="`${base}-tab-${i}`">
+              <input
+                v-live-checked
+                v-model="chosen"
+                type="radio"
+                :id="`${base}-${i}`"
+                :name="base"
+                :value="i"
+                :checked.attr="isStart(i) || undefined"
+              />
+              <span class="rkui-folder-label">{{ tab.label }}</span>
+            </label>
+            <span
+              v-if="overflow === 'collapse' && i === 0 && tabs.length > 2"
+              class="rkui-strip-gap"
+              >…</span
+            >
+            <template v-if="steps">
+              <span class="rkui-folder-step rkui-folder-step--previous" aria-hidden="true">
+                <label
+                  :class="['rkui-folder-tab', { 'rkui-folder-tab--off': i === 0 }]"
+                  :for="i > 0 ? `${base}-${i - 1}` : undefined"
+                >
+                  <CaretLeftIcon class="rkui-icon rkui-icon--small" />
+                </label>
+              </span>
+              <span class="rkui-folder-step rkui-folder-step--next" aria-hidden="true">
+                <label
+                  :class="['rkui-folder-tab', { 'rkui-folder-tab--off': i === tabs.length - 1 }]"
+                  :for="i < tabs.length - 1 ? `${base}-${i + 1}` : undefined"
+                >
+                  <CaretRightIcon class="rkui-icon rkui-icon--small" />
+                </label>
+              </span>
+            </template>
+          </span>
+        </div>
+      </div>
+      <template v-else>
+        <template v-for="(tab, i) in tabs" :key="i">
+          <div
+            v-if="tab.panel"
+            class="rkui-folder-sheet"
+            role="group"
+            :aria-labelledby="`${base}-tab-${i}`"
+            tabindex="0"
+          >
+            <component :is="tab.panel" />
+          </div>
+          <div
+            v-else
+            class="rkui-folder-sheet"
+            role="group"
+            :aria-labelledby="`${base}-tab-${i}`"
+            tabindex="0"
+            v-html="tab.html"
+          />
+        </template>
+      </template>
+    </template>
+  </div>
+</template>

package/src/components/folder/Tab.vue

@@ -0,0 +1,25 @@
+<!--
+  One tab of a `Folder`, directly inside it. Its slot is the tab's panel. The Folder builds the tab
+  and its panel from this tab's props and slot (see tab-slot.ts), so a Tab takes no other
+  attributes: `class`, `id` and the rest are dropped.
+
+  @example
+  <Tab label="Two" selected><p>Panel two.</p></Tab>
+-->
+<script setup lang="ts">
+import { tabData } from './tab-items'
+
+interface Props {
+  /** The tab's text. */
+  label: string
+  /** The tab that starts selected; the group's first tab when none is. */
+  selected?: boolean
+}
+
+const { label, selected } = defineProps<Props>()
+</script>
+
+<template>
+  <!-- Rendered only when Astro renders a Tab by itself (in MDX or .astro), for its group to read. -->
+  <component is="rkui-tab-item" :data-tab="tabData(label, selected)"><slot /></component>
+</template>