@oneonefour/rkui 0.0.0-stage → 0.0.3

package/src/components/select/select.css

@@ -0,0 +1,93 @@
+/* Selects: the text input look (input.css) with a caret. Where the browser supports
+   appearance: base-select, the open list is a raised panel in the toon look and options can hold
+   icons; elsewhere it is the browser's own list, and the icons are left out. A multiple select, or
+   one with a size, is a list box and keeps the browser's own look.
+
+   <select class="rkui-select">
+     <button><selectedcontent></selectedcontent></button>
+     <option value="one"><svg class="rkui-icon rkui-icon--small" aria-hidden="true">…</svg>
+       One</option>
+     …
+   </select>
+
+   The <button> line is optional: it shows the chosen option's icon in the closed select too. */
+
+/* The caret is drawn with two gradients so it takes --rkui-fg in either theme. */
+.rkui-select {
+  appearance: none;
+  padding-inline-end: var(--rkui-space-7);
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--rkui-fg) 50%),
+    linear-gradient(135deg, var(--rkui-fg) 50%, transparent 50%);
+  background-position:
+    right var(--rkui-space-5) center,
+    right var(--rkui-space-4) center;
+  background-size: var(--rkui-space-2) var(--rkui-space-2);
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+@supports (appearance: base-select) {
+  .rkui-select:not([multiple], [size]),
+  .rkui-select:not([multiple], [size])::picker(select) {
+    appearance: base-select;
+  }
+
+  /* .rkui-select draws its own caret. */
+  .rkui-select:not([multiple], [size])::picker-icon {
+    display: none;
+  }
+
+  .rkui-select:not([multiple], [size])::picker(select) {
+    margin-block: var(--rkui-space-1);
+    padding: var(--rkui-space-1);
+    border: var(--rkui-outline-width) solid var(--rkui-line-unfilled);
+    border-radius: var(--rkui-radius);
+    background: var(--rkui-raised);
+    color: var(--rkui-fg);
+    box-shadow: var(--rkui-shadow);
+  }
+
+  /* The optional <button> only holds <selectedcontent>: the select draws the frame. */
+  .rkui-select:not([multiple], [size]) > button {
+    padding: 0;
+    border: 0;
+    background: none;
+  }
+
+  .rkui-select:not([multiple], [size]) :is(selectedcontent, option) {
+    display: flex;
+    align-items: center;
+    gap: var(--rkui-space-2);
+  }
+
+  .rkui-select:not([multiple], [size]) option {
+    padding: var(--rkui-space-1) var(--rkui-space-3);
+    border-radius: calc(var(--rkui-radius) / 2);
+  }
+
+  .rkui-select:not([multiple], [size]) option:hover {
+    box-shadow: inset 0 0 0 var(--rkui-outline-width) var(--rkui-line-unfilled);
+  }
+
+  .rkui-select:not([multiple], [size]) option:checked {
+    background: var(--rkui-selected);
+    color: var(--rkui-on-selected);
+  }
+
+  /* Marker-pen focus, as on links: the list has no room for the band. The transparent outline
+     still shows in forced-colours mode. */
+  .rkui-select:not([multiple], [size]) option:focus-visible {
+    outline: var(--rkui-outline-width) solid transparent;
+    background: var(--rkui-focus);
+    color: var(--rkui-ink);
+  }
+
+  @media (forced-colors: active) {
+    .rkui-select:not([multiple], [size]) option:checked {
+      forced-color-adjust: none;
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/src/components/sidebar/Sidebar.vue

@@ -0,0 +1,79 @@
+<!--
+  A sidebar: links grouped under headings, built from SidebarGroups of SidebarLinks, with no
+  JavaScript. The slot holds the SidebarGroups. It scrolls on its own when it is taller than its
+  box, so give it a height or a max height from the page. Hints at the top and bottom edges show
+  when there is more to scroll to. `class`, `style` and other attributes go on the `<nav>`. The
+  hints need Safari 26 or Firefox 159. Only Chrome gives the card's and the note's stuck headings
+  their stuck look; elsewhere they stick as they are. The `header` slot (`slot="header"` in Astro, `<template #header>` in Vue)
+  sits above the links and doesn't scroll, for a site's name and tagline. `--rkui-sidebar-panel`
+  in `style` sets the panel's colour.
+
+  @example
+  <Sidebar label="Docs">
+    <SidebarGroup heading="Start">
+      <SidebarLink href="/start/" current>Getting started</SidebarLink>
+    </SidebarGroup>
+  </Sidebar>
+-->
+<script setup lang="ts">
+interface Props {
+  /** The navigation's accessible name; two sidebars on a page need different ones. */
+  label: string
+  /**
+   * The look: 'card', 'folders', 'deck' or 'note'; 'plain' when left out. Open, see DECISIONS
+   * ("Sidebar").
+   */
+  variant?: 'plain' | 'card' | 'folders' | 'deck' | 'note'
+  /** Sets the header, headings and links in the slab serif, in any look; false when left out. */
+  slab?: boolean
+  /**
+   * Sets only the current page's link in the slab serif, with everything else in the UI font, in
+   * any look; false when left out.
+   */
+  selectedSlab?: boolean
+  /** Bolder links (weight 600), in any look; false when left out. */
+  bold?: boolean
+  /**
+   * Lets the links flow into several columns when the sidebar is wide, as when it stacks above the
+   * page on a phone, in any look; one column when left out, or when the sidebar is narrow. In a
+   * flex column, give the sidebar an inline size (`inline-size: 100%`), or the browser keeps the
+   * height of a single column.
+   */
+  columns?: boolean
+  /**
+   * The look of the hints at the top and bottom edges, written as `data-rkui-dots` on the `<nav>`:
+   * 'plain' dots, or 'pill' for dots in a raised pill (a card's are always pills); the page's
+   * setting when left out.
+   */
+  dots?: 'plain' | 'pill'
+}
+
+const { label, variant = 'plain', slab, selectedSlab, bold, columns, dots } = defineProps<Props>()
+</script>
+
+<template>
+  <nav
+    :class="[
+      'rkui-sidebar',
+      {
+        [`rkui-sidebar--${variant}`]: variant !== 'plain',
+        'rkui-sticky-note rkui-sticky-note--tape': variant === 'note',
+        'rkui-sidebar--slab': slab,
+        'rkui-sidebar--selected-slab': selectedSlab,
+        'rkui-sidebar--bold': bold,
+        'rkui-sidebar--columns': columns,
+      },
+    ]"
+    :aria-label="label"
+    :data-rkui-dots="dots"
+  >
+    <div v-if="$slots.header" class="rkui-sidebar-header">
+      <slot name="header" />
+    </div>
+    <div class="rkui-sidebar-scroll">
+      <slot />
+    </div>
+    <span class="rkui-sidebar-more rkui-sidebar-more--above" aria-hidden="true"></span>
+    <span class="rkui-sidebar-more rkui-sidebar-more--below" aria-hidden="true"></span>
+  </nav>
+</template>

package/src/components/sidebar/SidebarGroup.vue

@@ -0,0 +1,29 @@
+<!--
+  One group of a Sidebar: a heading over a list of SidebarLinks, or just the list when it has no
+  heading, as in a site's one list of sections. The slot holds its SidebarLinks. `class`, `style`
+  and other attributes go on the `<section>`.
+
+  @example
+  <SidebarGroup heading="Form controls">
+    <SidebarLink href="/button/">Button</SidebarLink>
+  </SidebarGroup>
+-->
+<script setup lang="ts">
+interface Props {
+  /** The group's heading; none when left out. */
+  heading?: string
+}
+
+const { heading } = defineProps<Props>()
+</script>
+
+<template>
+  <section class="rkui-sidebar-group">
+    <h2 v-if="heading" class="rkui-sidebar-heading">
+      <span>{{ heading }}</span>
+    </h2>
+    <ul class="rkui-sidebar-list">
+      <slot />
+    </ul>
+  </section>
+</template>

package/src/components/sidebar/SidebarLink.vue

@@ -0,0 +1,46 @@
+<!--
+  One link in a SidebarGroup, in its own list item. The slot is the link text; the `icon` slot
+  (`slot="icon"` in Astro, `<template #icon>` in Vue) holds an optional icon before it. `class`,
+  `style` and other attributes go on the `<li>`.
+
+  @example
+  <SidebarLink href="/notes/" hue="coral" current><PenNib slot="icon" />Notes</SidebarLink>
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import { hueVars, type HueOrHex } from '../../shared/hues'
+
+interface Props {
+  /** Where the link goes. */
+  href: string
+  /** Marks the link as the current page; false when left out. */
+  current?: boolean
+  /**
+   * The link's own colour, a hue or a hex code, such as the section colour of the page it leads
+   * to. It fills the link's icon, and the link itself when it is the current page, in any look;
+   * the look's own colours when left out.
+   */
+  hue?: HueOrHex
+}
+
+const { href, current, hue } = defineProps<Props>()
+
+/** The link's colour and the text on it as custom properties, when `hue` is set. */
+const vars = computed(() =>
+  hueVars(hue, { fill: '--rkui-sidebar-hue', text: '--rkui-sidebar-on-hue', solid: true }),
+)
+</script>
+
+<template>
+  <li>
+    <a
+      :class="['rkui-sidebar-link', { 'rkui-sidebar-link--hue': hue }]"
+      :style="vars"
+      :href="href"
+      :aria-current="current ? 'page' : undefined"
+    >
+      <slot name="icon" />
+      <slot />
+    </a>
+  </li>
+</template>

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

@@ -0,0 +1,26 @@
+/* Safari and Firefox don't have scroll-initial-target, which opens a sidebar scrolled so that its
+   current page shows (sidebar.css). Where it is missing, this scrolls each sidebar the same way,
+   the first time it is shown, including a sidebar added after the page loads. */
+import { eachElement } from '../../shared/each-element.js'
+
+if (!CSS.supports('scroll-initial-target: nearest')) {
+  /** Scrolls the sidebar so that its current page sits at the top, below its scroll padding. */
+  const showCurrent = (scroller) => {
+    const current = scroller.querySelector('.rkui-sidebar-link[aria-current="page"]')
+    if (!current) return
+    const padding = parseFloat(getComputedStyle(scroller).scrollPaddingTop) || 0
+    const distance = current.getBoundingClientRect().top - scroller.getBoundingClientRect().top
+    scroller.scrollTop += Math.round(distance - scroller.clientTop - padding)
+  }
+
+  const firstShown = new ResizeObserver((entries) => {
+    for (const { target, contentRect } of entries) {
+      if (contentRect.height === 0) continue
+      firstShown.unobserve(target)
+      showCurrent(target)
+    }
+  })
+  eachElement('.rkui-sidebar-scroll', 'data-rkui-sidebar-watched', (scroller) =>
+    firstShown.observe(scroller),
+  )
+}