@f-ewald/components 0.1.0

package/docs/percent-bar-chart.md

@@ -0,0 +1,40 @@
+# `<percent-bar-chart>`
+
+Horizontal bar chart for labeled percentage rows, using D3's linear scale.
+Each group gets its own labeled row; bars are proportional to percentage of 100.
+
+## Install
+
+```js
+import "@f-ewald/components/percent-bar-chart.js";
+```
+
+## Usage
+
+```html
+<percent-bar-chart></percent-bar-chart>
+<script type="module">
+  document.querySelector("percent-bar-chart").groups = [
+    { key: "a", label: "White", pct: 45.2, color: "#4f46e5" },
+    { key: "b", label: "Asian", pct: 28.1, color: "#0d9488" },
+  ];
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `groups` | _(JS property only)_ | `PercentBarGroup[]` | `[]` | Rows to render, one per group. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+_None._

package/docs/price-history-chart.md

@@ -0,0 +1,44 @@
+# `<price-history-chart>`
+
+D3-powered SVG line chart for property price history.
+
+Uses scaleTime (X) + scaleLinear (Y) from d3-scale and line/area path
+generators from d3-shape. Adapts to container width via ResizeObserver.
+
+## Install
+
+```js
+import "@f-ewald/components/price-history-chart.js";
+```
+
+## Usage
+
+```html
+<price-history-chart></price-history-chart>
+<script type="module">
+  document.querySelector("price-history-chart").history = [
+    { date: "2023-01-01", price: 620000, eventType: "Listed" },
+    { date: "2024-02-01", price: 680000, eventType: "Sold" },
+  ];
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `history` | `history` | `PricePoint[]` | `[]` | Array of price points (points with null price/date are skipped). |
+| `yLabels` | `y-labels` | `"auto" | "always" | "never"` | `"auto"` | "auto" (default) | "always" | "never" |
+| `maxXLabels` | `max-x-labels` | `number` | `3` | Max X-axis date ticks (default 3). |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+_None._

package/docs/relative-time.md

@@ -0,0 +1,37 @@
+# `<relative-time>`
+
+Inline relative-time display (e.g. "3 hours ago"). Accepts either a
+standard ISO 8601 string or a SQLite `datetime('now')` string
+("YYYY-MM-DD HH:MM:SS", UTC, no zone marker) via `datetime`. Shows the
+full date/time in the viewer's local timezone as a hover tooltip, and
+re-renders on an interval so the text stays current while visible.
+
+## Install
+
+```js
+import "@f-ewald/components/relative-time.js";
+```
+
+## Usage
+
+```html
+<relative-time datetime="2026-07-17T07:00:00Z"></relative-time>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `datetime` | `datetime` | `string | null` | `null` | Timestamp to render, relative to now. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+_None._

package/docs/reveal-button.md

@@ -0,0 +1,43 @@
+# `<reveal-button>`
+
+Button that reveals hidden slotted content when clicked.
+
+## Install
+
+```js
+import "@f-ewald/components/reveal-button.js";
+```
+
+## Usage
+
+```html
+<reveal-button label="Show the secret">
+  Surprise! This content was hidden.
+</reveal-button>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `label` | `label` | `string` | `"Reveal hidden content"` | Label shown on the button before it's clicked. |
+
+## Events
+
+_None._
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| `(default)` | Content to reveal when clicked. |
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-font` |
+| `--ui-font-size` |
+| `--ui-primary` |
+| `--ui-primary-hover` |
+| `--ui-radius-sm` |

package/docs/roman-numeral.md

@@ -0,0 +1,33 @@
+# `<roman-numeral>`
+
+Converts an integer to a roman numeral inline.
+
+## Install
+
+```js
+import "@f-ewald/components/roman-numeral.js";
+```
+
+## Usage
+
+```html
+<roman-numeral value="2004"></roman-numeral>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `value` | `value` | `number | undefined` | `—` | Integer value to render as a roman numeral. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+_None._

package/docs/slide-panel.md

@@ -0,0 +1,56 @@
+# `<slide-panel>`
+
+Generic sliding panel shell. Handles positioning, open/close animation,
+header chrome, and a close button. Body content is provided via the
+default slot; the consumer controls its own padding and overflow.
+
+Desktop: 300 px fixed right-side panel that slides from the right.
+Mobile (≤768px): bottom-sheet drawer (60vh) — reserved for future use.
+
+## Install
+
+```js
+import "@f-ewald/components/slide-panel.js";
+```
+
+## Usage
+
+```html
+<slide-panel open heading="Property details">
+  Panel body content goes here.
+</slide-panel>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `open` | `open` | `boolean` | `false` | Whether the panel is currently visible. |
+| `heading` | `heading` | `string` | `""` | Title text shown in the panel header (overridable via slot="title"). |
+
+## Events
+
+| Event | Description |
+| --- | --- |
+| `panel-close` | User clicked the close (✕) button. |
+
+## Slots
+
+| Slot | Description |
+| --- | --- |
+| `(default)` | Panel body content. |
+| `title` | Overrides the header title text (falls back to the `heading` property). |
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-border` |
+| `--ui-font` |
+| `--ui-font-size` |
+| `--ui-radius-sm` |
+| `--ui-shadow-lg` |
+| `--ui-surface` |
+| `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |

package/docs/toast-notification.md

@@ -0,0 +1,52 @@
+# `<toast-notification>`
+
+Fixed-position stack of dismissible notifications, anchored top-right
+(top-full-width on mobile). Not wired to any app state yet — callers add
+toasts imperatively via the `show()` method on a live element reference,
+e.g. `document.querySelector('toast-notification')?.show('Offline', { variant: 'error' })`,
+or via the `notifySuccess`/`notifyError`/`notifyInfo` module-level helpers
+exported from this file. Each toast auto-dismisses after `duration` ms and
+can also be dismissed via its ✕ button. Appears/disappears instantly — no
+slide/fade transitions.
+
+## Install
+
+```js
+import "@f-ewald/components/toast-notification.js";
+```
+
+## Usage
+
+```html
+<toast-notification></toast-notification>
+<script type="module">
+  import { notifySuccess } from "@f-ewald/components/toast-notification.js";
+  notifySuccess("Saved!");
+</script>
+```
+
+## Attributes / properties
+
+_None._
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-danger` |
+| `--ui-font` |
+| `--ui-font-size` |
+| `--ui-primary` |
+| `--ui-radius` |
+| `--ui-radius-sm` |
+| `--ui-shadow-lg` |
+| `--ui-success` |
+| `--ui-text` |

package/docs/weight-bar-chart.md

@@ -0,0 +1,53 @@
+# `<weight-bar-chart>`
+
+Sorted horizontal bar chart of labeled weights (normalized fractions
+summing to ~1). Bars sort descending — the order IS the priority ranking.
+Widths scale relative to the largest weight (which fills its track); the
+percent labels carry the absolute values. Rows are keyed by item id
+(repeat directive) so a re-render with new weights moves the existing
+rows; bar widths animate via CSS, re-sorting is instant.
+
+## Install
+
+```js
+import "@f-ewald/components/weight-bar-chart.js";
+```
+
+## Usage
+
+```html
+<weight-bar-chart></weight-bar-chart>
+<script type="module">
+  document.querySelector("weight-bar-chart").items = [
+    { id: "price", label: "Price", value: 0.4 },
+    { id: "schools", label: "Schools", value: 0.35 },
+    { id: "commute", label: "Commute", value: 0.25 },
+  ];
+</script>
+```
+
+## Attributes / properties
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `items` | _(JS property only)_ | `WeightBarItem[]` | `[]` | Items to render as weighted rows, sorted descending by value. |
+
+## Events
+
+_None._
+
+## Slots
+
+_None._
+
+## CSS custom properties
+
+| Custom property |
+| --- |
+| `--ui-font` |
+| `--ui-font-size-sm` |
+| `--ui-primary` |
+| `--ui-radius-sm` |
+| `--ui-surface-muted` |
+| `--ui-text` |
+| `--ui-text-muted` |