@forgebuild/hotal-ui 0.1.0 → 0.2.0

package/README.md

@@ -1,62 +1,71 @@
 # @forgebuild/hotal-ui
 
-Reusable Svelte 5 UI components for booking and reservation experiences.
+Reusable Web Components for booking and reservation experiences.
 
 ## Install
 
 ```
-npm install @forgebuild/hotal-ui svelte
+npm install @forgebuild/hotal-ui
 ```
 
-`svelte` (^5.0.0) is a peer dependency — install it alongside this package. Components ship unbundled (raw `.svelte` + compiled `.ts`), so your own bundler's Svelte plugin compiles them like any other Svelte component — no separate CSS import needed.
+No peer dependencies — the Svelte runtime is bundled in. Works via a plain `<script type="module">` tag too:
+
+```html
+<script type="module" src="https://esm.sh/@forgebuild/hotal-ui"></script>
+```
 
 ## Components
 
-### `ReservationBar`
+### `<reservation-bar>`
 
-A date / guests / time picker bar with a Reserve link, popovers positioned via Floating UI, and calendar/list panels rendered with the native Popover API.
+A date / guests / time picker bar with a Reserve link, popovers positioned via Floating UI, and calendar/list panels rendered with the native Popover API inside an open shadow root.
 
-```svelte
-<script lang="ts">
-	import { ReservationBar } from '@forgebuild/hotal-ui';
+```html
+<script type="module">
+	import '@forgebuild/hotal-ui';
 
-	async function fetchAvailableDates(partySize: number): Promise<string[]> {
+	const bar = document.querySelector('reservation-bar');
+
+	// Function-valued and explicitly-false-when-default-is-true props must be
+	// set as JS properties, not HTML attributes (attributes are strings only,
+	// and HTML boolean-attribute semantics can't express "false" when the
+	// prop's own default is true).
+	bar.showReserveButton = false;
+	bar.fetchAvailableDates = async (partySize) => {
 		const res = await fetch(`/api/available-dates?party_size=${partySize}`);
 		const { dates } = await res.json();
 		return dates;
-	}
+	};
+
+	bar.addEventListener('reservationchange', (e) => console.log(e.detail));
 </script>
 
-<ReservationBar
-	reserveHref="/reservations"
-	closedWeekdays={[0]}
-	fetchAvailableDates={fetchAvailableDates}
-	onchange={(detail) => console.log(detail)}
-/>
+<reservation-bar reserve-href="/reservations" sync-with-url closed-weekdays="[0]"></reservation-bar>
 ```
 
-#### Props
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| `minGuests` | `number` | `1` | Minimum selectable party size |
-| `maxGuests` | `number` | `20` | Maximum selectable party size |
-| `defaultGuests` | `number` | `2` | Initial party size |
-| `timeSlots` | `string[]` | `'7:00 PM'`–`'11:00 PM'` in 30-min steps | Selectable time options |
-| `defaultTime` | `string` | `'7:00 PM'` | Initial time |
-| `showReserveButton` | `boolean` | `true` | When `false`, selecting any value auto-navigates to the built reserve URL instead of showing a Reserve link |
-| `reserveHref` | `string` | `'/reservations'` | Base URL the built query string (`?date=&guests=&time=`) is appended to |
-| `syncWithUrl` | `boolean` | `false` | Read initial date/guests/time from `location.search` on mount |
-| `closedWeekdays` | `number[]` | `[]` | Weekdays (`0`=Sun–`6`=Sat) to disable in the calendar |
-| `fetchAvailableDates` | `(partySize: number) => Promise<string[]>` | `undefined` | When provided, drives which calendar dates are selectable; refetches when `guests` changes. When omitted, all non-past/non-closed-weekday dates are selectable |
-| `onchange` | `(detail: { date: string; guests: number; time: string }) => void` | `undefined` | Fires whenever the selection changes |
+#### Attributes / properties
 
-#### Theming
+| Name | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `minGuests` | `min-guests` | `number` | `1` | Minimum selectable party size |
+| `maxGuests` | `max-guests` | `number` | `20` | Maximum selectable party size |
+| `defaultGuests` | `default-guests` | `number` | `2` | Initial party size |
+| `timeSlots` | `time-slots` (JSON array) | `string[]` | `'7:00 PM'`–`'11:00 PM'` in 30-min steps | Selectable time options |
+| `defaultTime` | `default-time` | `string` | `'7:00 PM'` | Initial time |
+| `showReserveButton` | `show-reserve-button` | `boolean` | `true` | When `false`, selecting any value auto-navigates instead of showing a Reserve link. **Set as a JS property to get `false`** — see note above. |
+| `reserveHref` | `reserve-href` | `string` | `'/reservations'` | Base URL the built query string is appended to |
+| `syncWithUrl` | `sync-with-url` | `boolean` | `false` | Read initial date/guests/time from `location.search` on mount |
+| `closedWeekdays` | `closed-weekdays` (JSON array) | `number[]` | `[]` | Weekdays (`0`=Sun–`6`=Sat) to disable in the calendar |
+| `fetchAvailableDates` | — (property only) | `(partySize: number) => Promise<string[]>` | `undefined` | Drives which calendar dates are selectable |
+
+#### Events
 
-No CSS framework dependency — theme via CSS custom properties on a wrapping element or `:root`:
+`reservationchange` — `CustomEvent<{ date: string; guests: number; time: string }>`, fires whenever the selection changes.
+
+#### Theming
 
 ```css
-.my-wrapper {
+reservation-bar {
 	--rb-bar-bg: rgba(14, 58, 62, 0.9);
 	--rb-bar-border: rgba(212, 154, 60, 0.4);
 	--rb-text-color: #fff;
@@ -74,7 +83,7 @@ No CSS framework dependency — theme via CSS custom properties on a wrapping el
 npm install
 npm run dev      # serves demo/
 npm run check    # type-check
-npm run build    # package build → dist/
+npm run build    # library build → dist/
 ```
 
 ## Publishing