@oneonefour/rkui 0.0.0-stage → 0.0.3

package/dist/types/shared/dial-geometry.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @param {number} value
+ * @param {number} divisor
+ * @returns {number} `value` modulo `divisor`, never negative
+ */
+export function wrap(value: number, divisor: number): number;
+/**
+ * @param {number} previous the angle a hand points at now, which may be past 360 or below 0
+ * @param {number} angle the way it should point next, from 0 to 360
+ * @returns {number} the angle nearest `previous` that points the same way as `angle`, so the
+ *   hand takes the short way round instead of spinning back past 12
+ */
+export function nearestTurn(previous: number, angle: number): number;
+/**
+ * @param {number} radius
+ * @param {number} angle
+ * @returns {{ x: number, y: number }} the point in the SVG at `radius` and `angle` from the centre
+ */
+export function polarToCartesian(radius: number, angle: number): {
+    x: number;
+    y: number;
+};
+/**
+ * @param {number} radius
+ * @param {number} angle
+ * @returns {{ x: number, y: number }} the same point as a percentage of the face's width and
+ *   height, for CSS to centre an element on it
+ */
+export function percentOfFace(radius: number, angle: number): {
+    x: number;
+    y: number;
+};
+/**
+ * @param {number} radius
+ * @param {number} fromAngle
+ * @param {number} toAngle
+ * @returns {string} SVG path data for a clockwise arc
+ */
+export function arcPath(radius: number, fromAngle: number, toAngle: number): string;
+/**
+ * @param {number} innerRadius
+ * @param {number} outerRadius
+ * @param {number} angle
+ * @returns {{ x1: number, y1: number, x2: number, y2: number }} the ends of an SVG `<line>`
+ *   pointing out from the centre, between the two radii
+ */
+export function radialLine(innerRadius: number, outerRadius: number, angle: number): {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+/**
+ * @param {number} dx distance right of the centre
+ * @param {number} dy distance below the centre
+ * @returns {number} the angle of that point, from -180 to 180
+ */
+export function pointToAngle(dx: number, dy: number): number;
+/**
+ * Geometry shared by the clock and dial faces, which Clock.vue and Dial.vue draw. No DOM: every
+ * function takes numbers and returns numbers, strings or plain objects. Angles are degrees
+ * clockwise from 12 o'clock.
+ */
+/** A face's SVG is drawn in a square of this many units, centred on (CENTRE, CENTRE). */
+export const VIEWBOX: 200;
+export const CENTRE: number;

package/dist/types/shared/each-element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Calls `setUp` once for each element that matches `selector`, now and whenever one is added to
+ * the page later. Each element it sets up gets the attribute `mark`, so none is set up twice, even
+ * by a second copy of the script.
+ * @param {string} selector
+ * @param {string} mark an attribute name, e.g. 'data-rkui-bar'
+ * @param {(element: HTMLElement) => void} setUp
+ */
+export function eachElement(selector: string, mark: string, setUp: (element: HTMLElement) => void): void;

package/dist/types/shared/light-angle.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The shadow direction that points away from a light at `angle`.
+ * @param {number} angle where the light comes from
+ * @returns {{ dx: string, dy: string }} the values for --rkui-shadow-dx and --rkui-shadow-dy
+ */
+export function shadowOffsets(angle: number): {
+    dx: string;
+    dy: string;
+};
+/**
+ * The sun rises on the left at 6:00, is overhead at noon and sets on the right at 18:00, so 9:00
+ * gives the default angle. At night the light goes back to the default.
+ * @param {Date} time
+ * @returns {number} the light angle at `time`
+ */
+export function sunAngle(time: Date): number;
+/**
+ * The maths behind LightDirection. No DOM. Angles are in degrees, clockwise from 12 o'clock, and
+ * name where the light comes from.
+ */
+/** Where the light comes from by default: the top left. */
+export const DEFAULT_ANGLE: 315;

package/package.json

@@ -1,6 +1,102 @@
 {
   "name": "@oneonefour/rkui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.3",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneOneFour/rkui.git"
+  },
+  "homepage": "https://www.robertcking.com/rkui/",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    "./styles.css": "./src/index.css",
+    "./tokens/*": "./src/tokens/*",
+    "./base/*": "./src/base/*",
+    "./rkui.css": "./dist/rkui.css",
+    "./rkui.js": "./dist/rkui.js",
+    "./colors.js": {
+      "types": "./dist/colors.d.ts",
+      "default": "./dist/colors.js"
+    },
+    "./enhance.js": "./src/enhance.js",
+    "./components/*.js": {
+      "types": "./dist/types/components/*.d.ts",
+      "default": "./src/components/*.js"
+    },
+    "./components/*": "./src/components/*",
+    "./shared/*.js": {
+      "types": "./dist/types/shared/*.d.ts",
+      "default": "./src/shared/*.js"
+    },
+    "./shared/*": "./src/shared/*",
+    "./head-scripts/*": "./src/head-scripts/*",
+    "./icons/*": "./dist/icons/*",
+    "./fonts/*": "./src/fonts/*",
+    "./astro": {
+      "types": "./astro/index.d.ts",
+      "default": "./astro/index.js"
+    },
+    "./astro-attributes": {
+      "types": "./src/shared/astro-attributes.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "astro",
+    "src",
+    "dist",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "scripts": {
+    "build": "node build/index.js && vue-tsc -p src && astro check --root site && astro build --root site",
+    "preview": "vite preview --outDir site/dist --base /rkui/ --port 4322 --strictPort",
+    "dev": "node build/index.js && astro dev --root site --port 4321",
+    "prepack": "node build/index.js",
+    "format": "prettier --write .",
+    "screenshots": "playwright test"
+  },
+  "peerDependencies": {
+    "@astrojs/mdx": "^8.1.0",
+    "astro": "^7.4.0",
+    "katex": "^0.19.0",
+    "shiki": "^4.0.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@astrojs/mdx": {
+      "optional": true
+    },
+    "astro": {
+      "optional": true
+    },
+    "katex": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.9",
+    "@astrojs/markdown-satteri": "^0.4.6",
+    "@astrojs/mdx": "^8.1.2",
+    "@astrojs/vue": "^7.1.2",
+    "@playwright/test": "^1.64.1",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "astro": "^7.4.0",
+    "katex": "^0.19.1",
+    "lightningcss": "^1.33.0",
+    "pagefind": "^1.6.0",
+    "phosphor-raw": "https://codeload.github.com/phosphor-icons/core/tar.gz/fe23e2534cdb7bec24bd8e6bd99b3676bcf0d54f",
+    "prettier": "^3.9.10",
+    "prettier-plugin-astro": "^1.1.2",
+    "rolldown": "~1.2.16",
+    "satteri": "^0.10.5",
+    "shiki": "^4.6.0",
+    "simple-icons": "^16.37.0",
+    "svgo": "^4.1.0",
+    "typescript": "^5.7.3",
+    "vue": "^3.5.44",
+    "vue-tsc": "^3.3.14"
+  }
+}

package/src/base/base.css

@@ -0,0 +1,144 @@
+/* A small reset and the page defaults: body text, headings, links, code, highlights and
+   selection. */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--rkui-surface);
+  color: var(--rkui-fg);
+  font-family: var(--rkui-font-body);
+  font-size: var(--rkui-step-0);
+  line-height: var(--rkui-line-height-body);
+}
+
+/* Jumps to an anchor on the page, such as an equation reference, scroll smoothly. */
+@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+img,
+video {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: var(--rkui-font-display);
+  font-weight: 800;
+  line-height: var(--rkui-line-height-heading);
+  text-wrap: balance;
+}
+
+h1 {
+  font-size: var(--rkui-step-4);
+}
+
+h2 {
+  font-size: var(--rkui-step-3);
+}
+
+h3 {
+  font-size: var(--rkui-step-2);
+}
+
+h4 {
+  font-size: var(--rkui-step-1);
+}
+
+a {
+  color: var(--rkui-navy-deep);
+  text-underline-offset: 0.15em;
+}
+
+a:hover {
+  text-decoration-thickness: var(--rkui-outline-width);
+}
+
+/* Marker-pen focus: a link has no outline for the band to hug, so the band goes behind the text.
+   The transparent outline still shows in forced-colours mode. Button, chip, tile and folder tab
+   links, sidebar deck keys and equation references get the focus band instead. */
+a:where(
+    :not(
+      .rkui-button,
+      .rkui-chip,
+      .rkui-tile,
+      .rkui-folder-tab,
+      .rkui-sidebar--deck .rkui-sidebar-link,
+      .rkui-eqref
+    )
+  ):focus-visible {
+  outline: var(--rkui-outline-width) solid transparent;
+  background: var(--rkui-focus);
+  color: var(--rkui-ink);
+  box-decoration-break: clone;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--rkui-font-mono);
+}
+
+code {
+  padding: 0.1em 0.35em;
+  border-radius: calc(var(--rkui-radius) / 2);
+  background: var(--rkui-panel);
+  color: var(--rkui-fg);
+  font-size: 0.9em;
+}
+
+pre {
+  overflow-x: auto;
+  padding: var(--rkui-space-4);
+  border-radius: var(--rkui-radius);
+  background: var(--rkui-panel);
+  color: var(--rkui-fg);
+}
+
+/* Code inside a block is already on the panel, so it drops the inline pill. */
+pre code {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
+}
+
+mark {
+  background: var(--rkui-apricot);
+  color: var(--rkui-on-fill);
+}
+
+::selection {
+  background: var(--rkui-yellow-tint);
+  color: var(--rkui-fg);
+}
+
+/* Hidden on screen but still read by screen readers (and still focusable, for inputs). */
+.rkui-visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/src/base/fonts.css

@@ -0,0 +1,158 @@
+/* Self-hosted fonts (latin, greek and maths-symbol subsets) and the font-family tokens. */
+
+/* Roboto Slab */
+@font-face {
+  font-family: 'Roboto Slab';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/roboto-slab/roboto-slab-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Roboto Slab';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/roboto-slab/roboto-slab-greek.woff2') format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+@font-face {
+  font-family: 'Roboto Slab';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/roboto-slab/roboto-slab-symbols.woff2') format('woff2');
+  unicode-range: U+2202, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265;
+}
+
+/* Xmind */
+@font-face {
+  font-family: 'Xmind';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/xmind/xmind-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Xmind';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/xmind/xmind-greek.woff2') format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+@font-face {
+  font-family: 'Xmind';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/xmind/xmind-symbols.woff2') format('woff2');
+  unicode-range: U+2202, U+2207, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265;
+}
+
+@font-face {
+  font-family: 'Xmind';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/xmind/xmind-italic-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Xmind';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/xmind/xmind-italic-greek.woff2') format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+@font-face {
+  font-family: 'Xmind';
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/xmind/xmind-italic-symbols.woff2') format('woff2');
+  unicode-range: U+2202, U+2207, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265;
+}
+
+/* JetBrains Mono */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono/jetbrains-mono-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono/jetbrains-mono-greek.woff2') format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono/jetbrains-mono-symbols.woff2') format('woff2');
+  unicode-range:
+    U+2190, U+2192, U+2202, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono/jetbrains-mono-italic-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono/jetbrains-mono-italic-greek.woff2') format('woff2');
+  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('../fonts/jetbrains-mono/jetbrains-mono-italic-symbols.woff2') format('woff2');
+  unicode-range:
+    U+2190, U+2192, U+2202, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265;
+}
+
+/* Font families */
+:root {
+  --rkui-font-display: 'Roboto Slab', Rockwell, 'DejaVu Serif', Georgia, serif;
+  --rkui-font-body: 'Xmind', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --rkui-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+}

package/src/base/type.css

@@ -0,0 +1,17 @@
+/* Modular type scale: each step is the previous one times --rkui-type-ratio. */
+
+:root {
+  --rkui-type-ratio: 1.3;
+
+  /* Small text is fixed (1 / 1.25), since 1 / --rkui-type-ratio would be too small to read */
+  --rkui-step--1: 0.8rem;
+  --rkui-step-0: 1rem;
+  --rkui-step-1: calc(var(--rkui-step-0) * var(--rkui-type-ratio));
+  --rkui-step-2: calc(var(--rkui-step-1) * var(--rkui-type-ratio));
+  --rkui-step-3: calc(var(--rkui-step-2) * var(--rkui-type-ratio));
+  --rkui-step-4: calc(var(--rkui-step-3) * var(--rkui-type-ratio));
+  --rkui-step-5: calc(var(--rkui-step-4) * var(--rkui-type-ratio));
+
+  --rkui-line-height-body: 1.6;
+  --rkui-line-height-heading: 1.2;
+}

package/src/components/alert/Alert.vue

@@ -0,0 +1,66 @@
+<!--
+  An urgent message in a box in the middle of the window, like a script's `alert()`: a native
+  `<dialog>` opened as a modal, so the page behind it is blurred, held still and can't be used,
+  focus moves into it, and focus goes back to the opening button when it closes. A band in its `hue`
+  holds an icon and the title. The slot is the message; the `icon` slot replaces the band's warning
+  icon; the `actions` slot holds its buttons (`slot="actions"` in Astro, or
+  `<Fragment slot="actions">` around several; `<template #actions>` in Vue). `class`, `style` and
+  other attributes go on the `<dialog>`.
+
+  Needs no JavaScript. A button opens it with `command="show-modal"` and `commandfor` set to this
+  `id`, and one inside closes it with `command="close"`; its `value` becomes the dialog's
+  `returnValue`. A script opens it with `document.getElementById(id).showModal()`. Escape closes
+  it, unless it has `closedby="none"`; `closedby="any"` also closes it on a click outside. Put
+  `autofocus` on the button focus should start on, else the first one gets it. `alert-enhance.js`
+  makes the buttons and `closedby="none"` work in browsers without them (Safari before 26.2).
+
+  @example
+  <Button command="show-modal" commandfor="unsaved">Leave</Button>
+  <Alert id="unsaved" title="Unsaved changes">
+    <p>Your changes will be lost.</p>
+    <Button slot="actions" command="close" commandfor="unsaved">OK</Button>
+  </Alert>
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+import WarningIcon from '@oneonefour/rkui/icons/warning.vue'
+import { hueVars, type HueOrHex } from '../../shared/hues'
+
+interface Props {
+  /** The dialog's id, which the opening button's `commandfor` names. */
+  id: string
+  /** The title in the band, which names the dialog. */
+  title: string
+  /** The band's fill, a hue or a hex code; coral when left out. */
+  hue?: HueOrHex
+}
+
+const { id, title, hue } = defineProps<Props>()
+
+/** The band's fill and text as custom properties, when `hue` is set. */
+const vars = computed(() =>
+  hueVars(hue, { fill: '--rkui-alert-hue', text: '--rkui-alert-on-hue', solid: true }),
+)
+</script>
+
+<template>
+  <dialog
+    :id
+    class="rkui-alert"
+    :style="vars"
+    role="alertdialog"
+    :aria-labelledby="`${id}-title`"
+    :aria-describedby="`${id}-message`"
+  >
+    <div class="rkui-alert-band">
+      <slot name="icon"><WarningIcon class="rkui-icon" /></slot>
+      <h2 :id="`${id}-title`" class="rkui-alert-title">{{ title }}</h2>
+    </div>
+    <div :id="`${id}-message`" class="rkui-alert-message">
+      <slot />
+    </div>
+    <div v-if="$slots.actions" class="rkui-alert-actions">
+      <slot name="actions" />
+    </div>
+  </dialog>
+</template>

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

@@ -0,0 +1,43 @@
+// An Alert's buttons and `closedby="none"`, in browsers without invoker commands or `closedby`
+// (Safari before 26.2): a button with `commandfor` naming an Alert opens it
+// (`command="show-modal"`) or closes it (`command="close"`), and Escape leaves an Alert with
+// `closedby="none"` open. In browsers without scroll-driven animations, it marks the page
+// data-rkui-page-scrolls as an Alert opens, if the page scrolls, so alert.css keeps the
+// scrollbar's space. It does nothing where the browser does these itself. It needs no
+// eachElement(): each listener looks for its Alert only when a click, Escape or opening comes.
+
+if (!('command' in HTMLButtonElement.prototype)) {
+  document.addEventListener('click', (event) => {
+    const button = /** @type {Element} */ (event.target).closest('button[commandfor]')
+    const alert = button && document.getElementById(button.getAttribute('commandfor') ?? '')
+    if (!(alert instanceof HTMLDialogElement) || !alert.matches('.rkui-alert')) return
+    const command = button.getAttribute('command')
+    if (command === 'show-modal' && !alert.open) alert.showModal()
+    if (command === 'close') alert.close(/** @type {HTMLButtonElement} */ (button).value)
+  })
+}
+
+if (!('closedBy' in HTMLDialogElement.prototype)) {
+  document.addEventListener(
+    'cancel',
+    (event) => {
+      if (/** @type {Element} */ (event.target).matches('.rkui-alert[closedby="none"]')) {
+        event.preventDefault()
+      }
+    },
+    true,
+  )
+}
+
+if (!CSS.supports('animation-timeline: scroll()')) {
+  document.addEventListener(
+    'beforetoggle',
+    (event) => {
+      const dialog = /** @type {Element} */ (event.target)
+      if (event.newState !== 'open' || !dialog.matches('.rkui-alert')) return
+      const root = document.documentElement
+      root.toggleAttribute('data-rkui-page-scrolls', root.scrollHeight > root.clientHeight)
+    },
+    true,
+  )
+}