alus-ui 0.1.1 → 0.1.3

package/README.md

@@ -41,10 +41,20 @@ yarn add alus-ui
 
 ## Available Components
 
-### Form Components (^\_^)b
+The canonical export list is `src/lib/components/index.ts`.
 
-- **Button** - Accessible button with ARIA support and toggle states
-- **Input** - Text input with validation, error states, and accessibility
+- **Form** (27): Button, Input, Checkbox, Radio, RadioGroup, Select, Textarea, Switch, Slider, FileInput, SearchInput, NumberInput, Form, Fieldset, Label, FieldError, InputGroup, Rating, IconButton, ToggleButton, AutoComplete, Calendar, DatePicker, DateRange, DateRangePicker, TimePicker, ColorPicker
+- **Navigation** (11): Tabs, Accordion, Breadcrumb, Pagination, Link, ExternalLink, Navigation, Menu, SubMenu, Stepper, CommandMenu
+- **Feedback** (13): Badge, Tag, Spinner, Skeleton, Progress, Alert, Callout, Banner, InlineMessage, LiveRegion, NotificationBell, Toast (+ Toaster)
+- **Display** (18): Divider, Kbd, AspectRatio, Frame, Timestamp, CodeBlock, StatCard, Avatar, Card, Image, List, DataList, Table, TreeView, Timeline, Compare, Carousel
+- **Overlay** (10): Modal, Dialog, Drawer, Sheet, Tooltip, Popover, Dropdown, Overlay, Lightbox, ContextMenu
+- **Layout** (6): Stack, Flex, Grid, Container, Spacer, Columns
+- **Interactive** (8): Sortable, Swipeable, Resizable, SplitView, Draggable, Droppable, InfiniteScroll, VirtualList
+- **Utility** (5): VisuallyHidden, Portal, FocusTrap, ScreenReaderOnly, Conditional
+
+Date components use [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/) for locale/timezone/non-Gregorian-calendar correctness.
+
+**Out of scope** (use external libs): `RichTextEditor`, `DataGrid`, `Chart`, `VideoPlayer`, `AudioPlayer`, `MapView`. `Clone` is not implementable (Svelte 5 lacks `cloneElement`).
 
 ## Features
 
@@ -122,49 +132,35 @@ yarn add alus-ui
 
 ## Component API
 
-### Button
+Per-component prop documentation is not duplicated here — every component is fully typed, so use IDE IntelliSense or browse the source under `src/lib/components/{category}/{component}/`. Each component file has a `Props` interface at the top.
 
-```svelte
-<Button type="button" disabled={false} aria-pressed={undefined} class="" onclick={() => {}}>
-	Button content
-</Button>
-```
+Live, interactive examples for every component are in the showcase app at `src/routes/components/{component}/+page.svelte` (run `pnpm dev` from the repo root).
 
-**Props:**
+### Shared ARIA props
 
-- `type?: 'button' | 'submit' | 'reset'` - Button type (default: 'button')
-- `disabled?: boolean` - Disabled state
-- `aria-pressed?: boolean` - Toggle button state
-- `class?: string` - CSS classes for styling
-- All standard HTML button attributes
+Most components accept these standard accessibility props in addition to their own:
 
-### Input
+- `aria-label?: string`
+- `aria-labelledby?: string`
+- `aria-describedby?: string`
+- `class?: string`
 
-```svelte
-<Input
-	type="text"
-	value={''}
-	autocomplete="off"
-	inputmode="text"
-	aria-invalid={false}
-	aria-label={undefined}
-	aria-describedby={undefined}
-	class=""
-	oninput={(e) => {}}
-/>
-```
+Interactive components additionally accept: `disabled`, `aria-disabled`, plus role-specific state like `aria-pressed`, `aria-expanded`, `aria-checked`, `aria-selected`, `aria-current`.
+
+Form components additionally accept: `required`, `aria-invalid`, `aria-errormessage` (wired via the `validationAttrs` helper).
 
-**Props:**
+## Utilities
 
-- `type?: HTMLInputTypeAttribute` - Input type (default: 'text')
-- `value?: string` - Input value (use `bind:value` for two-way binding)
-- `autocomplete?: string` - Autocomplete attribute
-- `inputmode?: string` - Input mode for mobile keyboards
-- `aria-invalid?: boolean` - Invalid state for validation
-- `aria-label?: string` - Accessibility label
-- `aria-describedby?: string` - ID of describing element
-- `class?: string` - CSS classes for styling
-- All standard HTML input attributes
+Beyond components, the package exports a small set of a11y/form utilities:
+
+```ts
+import { labelAttrs, validationAttrs, interactiveStateAttrs, widgetAttrs, mergeAttrs } from 'alus-ui/a11y';
+import { trap, focusFirst } from 'alus-ui/a11y';
+import { generateCounterId } from 'alus-ui/a11y';
+import { createFieldIds, createFormField } from 'alus-ui/utils/form';
+```
+
+See `src/lib/utils/a11y/` and `src/lib/utils/form/` for full reference.
 
 ## Accessibility Features
 
@@ -208,58 +204,6 @@ pnpm build
 pnpm test
 ```
 
-## Releasing
-
-Releases are driven by [release-it](https://github.com/release-it/release-it) + `@release-it/conventional-changelog`. Versions auto-bump from [Conventional Commits](https://www.conventionalcommits.org/) (`feat:` → minor, `fix:` → patch, `feat!:` / `BREAKING CHANGE:` → major).
-
-### Prerequisites
-
-- Logged in to npm: `npm whoami` should print your username
-- `GITHUB_TOKEN` env var set (else release-it falls back to the web UI for the GitHub release)
-- Clean working tree on `main`
-
-### Commands
-
-```bash
-cd packages/alus
-
-pnpm release:dry      # preview — no git/npm/github writes
-pnpm release          # interactive — prompts for the bump
-pnpm release:patch    # 0.1.0 → 0.1.1
-pnpm release:minor    # 0.1.0 → 0.2.0
-pnpm release:major    # 0.1.0 → 1.0.0
-```
-
-### What `pnpm release` does
-
-1. `before:init` hook → `pnpm check` (svelte-check must pass)
-2. Bumps `package.json` version
-3. `after:bump` hook → `pnpm build` (regenerates `dist/`)
-4. Writes `CHANGELOG.md` from conventional commits since the last tag
-5. Commits `chore(release): v<version>` and tags `v<version>`
-6. Pushes commit + tag to `origin/main`
-7. Creates GitHub release with the changelog body
-8. Publishes to npm (`npm publish` runs `prepublishOnly` → build + test again)
-
-### Commit message conventions
-
-| Prefix       | Section in CHANGELOG | Bump  |
-| ------------ | -------------------- | ----- |
-| `feat:`      | Features             | minor |
-| `fix:`       | Bug Fixes            | patch |
-| `perf:`      | Performance          | patch |
-| `refactor:`  | Refactors            | patch |
-| `docs:`      | Documentation        | patch |
-| `test:`      | Tests                | patch |
-| `build:`     | Build                | patch |
-| `ci:` / `chore:` / `style:` | _(hidden)_ | none |
-
-Append `!` after the type (or include `BREAKING CHANGE:` in the body) for a major bump.
-
-### Config
-
-Settings live in `packages/alus/.release-it.json`. Tag scheme is `v<version>`.
-
 ## License
 
 MIT

package/dist/components/display/card/CardDescription.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { getCardContext } from './Card.svelte';
 
 	interface Props {
@@ -11,8 +12,10 @@
 	const ctx = getCardContext();
 
 	$effect(() => {
-		ctx.setHasDescription(true);
-		return () => ctx.setHasDescription(false);
+		return untrack(() => {
+			ctx.setHasDescription(true);
+			return () => ctx.setHasDescription(false);
+		});
 	});
 </script>
 

package/dist/components/display/card/CardTitle.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { getCardContext } from './Card.svelte';
 
 	interface Props {
@@ -12,8 +13,10 @@
 	const ctx = getCardContext();
 
 	$effect(() => {
-		ctx.setHasTitle(true);
-		return () => ctx.setHasTitle(false);
+		return untrack(() => {
+			ctx.setHasTitle(true);
+			return () => ctx.setHasTitle(false);
+		});
 	});
 </script>
 

package/dist/components/display/carousel/CarouselSlide.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { getCarouselContext } from './Carousel.svelte';
 
 	interface Props {
@@ -14,8 +15,10 @@
 	const active = $derived(ctx.index() === index);
 
 	$effect(() => {
-		const reg = ctx.registerSlide();
-		return reg.unregister;
+		return untrack(() => {
+			const reg = ctx.registerSlide();
+			return reg.unregister;
+		});
 	});
 </script>
 

package/dist/components/display/timestamp/Timestamp.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
+
 	type Mode = 'absolute' | 'relative' | 'both';
 	type Style = 'long' | 'short' | 'narrow';
 
@@ -30,11 +32,13 @@
 	const date = $derived(value instanceof Date ? value : new Date(value));
 
 	$effect(() => {
-		if (mode === 'absolute') return;
-		const id = setInterval(() => {
-			now = Date.now();
-		}, updateInterval);
-		return () => clearInterval(id);
+		return untrack(() => {
+			if (mode === 'absolute') return;
+			const id = setInterval(() => {
+				now = Date.now();
+			}, updateInterval);
+			return () => clearInterval(id);
+		});
 	});
 
 	const absolute = $derived(new Intl.DateTimeFormat(locale, dateOptions).format(date));

package/dist/components/navigation/command-menu/CommandMenuItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { generateCounterId } from '../../../utils/a11y/id.js';
 	import { interactiveStateAttrs } from '../../../utils/a11y/index.js';
 	import { getCommandMenuContext } from './CommandMenu.svelte';
@@ -30,12 +31,14 @@
 	const visible = $derived(ctx.filteredItems().some((i) => i.id === id));
 
 	$effect(() => {
-		const unregister = ctx.registerItem({ id, value, keywords, disabled, onSelect });
-		const untrack = group?.track(() => visible);
-		return () => {
-			unregister();
-			untrack?.();
-		};
+		return untrack(() => {
+			const unregister = ctx.registerItem({ id, value, keywords, disabled, onSelect });
+			const untrackVis = group?.track(() => visible);
+			return () => {
+				unregister();
+				untrackVis?.();
+			};
+		});
 	});
 
 	function onClick() {

package/dist/components/overlay/modal/ModalDescription.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { getModalContext } from './Modal.svelte';
 
 	interface Props {
@@ -11,8 +12,10 @@
 	const ctx = getModalContext();
 
 	$effect(() => {
-		ctx.setHasDescription(true);
-		return () => ctx.setHasDescription(false);
+		return untrack(() => {
+			ctx.setHasDescription(true);
+			return () => ctx.setHasDescription(false);
+		});
 	});
 </script>
 

package/dist/components/overlay/modal/ModalTitle.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { untrack } from 'svelte';
 	import { getModalContext } from './Modal.svelte';
 
 	interface Props {
@@ -12,8 +13,10 @@
 	const ctx = getModalContext();
 
 	$effect(() => {
-		ctx.setHasTitle(true);
-		return () => ctx.setHasTitle(false);
+		return untrack(() => {
+			ctx.setHasTitle(true);
+			return () => ctx.setHasTitle(false);
+		});
 	});
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "alus-ui",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"description": "Unstyled, accessible Svelte 5 components with full keyboard navigation and WCAG 2.1 AA compliance",
 	"license": "MIT",
 	"type": "module",