@f-ewald/components 1.12.0 → 1.13.0

package/dist/index.js

@@ -7,6 +7,8 @@ export { RomanNumeral } from "./roman-numeral.js";
 export { ConfirmDialog } from "./confirm-dialog.js";
 export { ContentDivider } from "./content-divider.js";
 export { ToastNotification, notifySuccess, notifyError, notifyInfo, } from "./toast-notification.js";
+export { ScrollToBottom } from "./scroll-to-bottom.js";
+export { ScrollToTop } from "./scroll-to-top.js";
 export { SlidePanel } from "./slide-panel.js";
 export { CopyLinkButton } from "./copy-link-button.js";
 export { RelativeTime } from "./relative-time.js";
@@ -28,7 +30,10 @@ export { StatMeter } from "./stat-meter.js";
 export { StatusPill } from "./status-pill.js";
 export { EditableText } from "./editable-text.js";
 export { LiveTimer } from "./live-timer.js";
+export { LoadMore } from "./load-more.js";
 export { ChatMessage, } from "./chat-message.js";
+export { UiCheckbox } from "./ui-checkbox.js";
+export { FormField } from "./form-field.js";
 export { FormSelect } from "./form-select.js";
 export { MultiSelect, } from "./multi-select.js";
 export { DataTable } from "./data-table.js";
@@ -57,6 +62,7 @@ export { TextArea } from "./text-area.js";
 export { LinkCard } from "./link-card.js";
 export { CardGrid } from "./card-grid.js";
 export { MarkdownView } from "./markdown-view.js";
+export { AutoScroll } from "./auto-scroll.js";
 export { formatDuration } from "./utils/duration.js";
 export { tokens, tokenValues, darkTokenValues } from "./tokens.js";
 export * from "./icons.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n  PhotoGallery,\n  type PhotoGalleryChangeReason,\n  type PhotoGalleryObjectFit,\n  type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport { ContentDivider } from \"./content-divider.js\";\nexport {\n  ToastNotification,\n  notifySuccess,\n  notifyError,\n  notifyInfo,\n  type ToastVariant,\n} from \"./toast-notification.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n  AddressAutocomplete,\n  type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n  AutocompleteInput,\n  type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { ButtonGroup, type ButtonGroupOption } from \"./button-group.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport {\n  ChatMessage,\n  type ChatMessageRole,\n  type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n  MultiSelect,\n  type MultiSelectOption,\n  type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { TreeView, type TreeNode } from \"./tree-view.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n  KanbanBoard,\n  type KanbanCardData,\n  type KanbanColumnData,\n  type KanbanCardMoveDetail,\n  type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { TextArea } from \"./text-area.js\";\nexport { LinkCard, type LinkCardStatus } from \"./link-card.js\";\nexport { CardGrid } from \"./card-grid.js\";\nexport { MarkdownView } from \"./markdown-view.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n  PhotoGallery,\n  type PhotoGalleryChangeReason,\n  type PhotoGalleryObjectFit,\n  type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport { ContentDivider } from \"./content-divider.js\";\nexport {\n  ToastNotification,\n  notifySuccess,\n  notifyError,\n  notifyInfo,\n  type ToastVariant,\n} from \"./toast-notification.js\";\nexport { ScrollToBottom } from \"./scroll-to-bottom.js\";\nexport { ScrollToTop } from \"./scroll-to-top.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n  AddressAutocomplete,\n  type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n  AutocompleteInput,\n  type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { ButtonGroup, type ButtonGroupOption } from \"./button-group.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport { LoadMore } from \"./load-more.js\";\nexport {\n  ChatMessage,\n  type ChatMessageRole,\n  type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { UiCheckbox } from \"./ui-checkbox.js\";\nexport { FormField } from \"./form-field.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n  MultiSelect,\n  type MultiSelectOption,\n  type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { TreeView, type TreeNode } from \"./tree-view.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n  KanbanBoard,\n  type KanbanCardData,\n  type KanbanColumnData,\n  type KanbanCardMoveDetail,\n  type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { TextArea } from \"./text-area.js\";\nexport { LinkCard, type LinkCardStatus } from \"./link-card.js\";\nexport { CardGrid } from \"./card-grid.js\";\nexport { MarkdownView } from \"./markdown-view.js\";\nexport { AutoScroll } from \"./auto-scroll.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}

package/dist/load-more.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from "lit";
+import "./ui-button.js";
+/**
+ * Click-to-load button for either end of a list. Fully property-driven: the
+ * consumer sets `loading` while a fetch is in flight and `exhausted` once
+ * there's nothing left to load; this component never fetches or manages
+ * state itself.
+ *
+ * @element load-more
+ * @fires load-more - The button was clicked while not `loading`/`exhausted`;
+ *   detail: `{ direction }`.
+ */
+export declare class LoadMore extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Which end of a list this instance loads more content for. */
+    direction: "top" | "bottom";
+    /** Consumer-managed busy flag, forwarded to the internal `ui-button`'s `busy`. */
+    loading: boolean;
+    /** Terminal "no more content" state: disables the button and swaps its label. */
+    exhausted: boolean;
+    /** Button text in the normal (loadable) state. */
+    label: string;
+    /** Button text shown once `exhausted` is true. */
+    exhaustedLabel: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "load-more": LoadMore;
+    }
+}
+//# sourceMappingURL=load-more.d.ts.map

package/dist/load-more.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"load-more.d.ts","sourceRoot":"","sources":["../src/load-more.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,gBAAgB,CAAC;AAGxB;;;;;;;;;GASG;AACH,qBACa,QAAS,SAAQ,UAAU;;IACtC,OAAgB,MAAM,4BAQpB;IAEF,gEAAgE;IACpD,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAY;IACnD,kFAAkF;IACrD,OAAO,UAAS;IAC7C,iFAAiF;IACpD,SAAS,UAAS;IAC/C,kDAAkD;IACtC,KAAK,SAAe;IAChC,kDAAkD;IACN,cAAc,SAAqB;IAStE,MAAM,yCAYd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/load-more.js

@@ -0,0 +1,82 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "./ui-button.js";
+import { tokens } from "./tokens.js";
+/**
+ * Click-to-load button for either end of a list. Fully property-driven: the
+ * consumer sets `loading` while a fetch is in flight and `exhausted` once
+ * there's nothing left to load; this component never fetches or manages
+ * state itself.
+ *
+ * @element load-more
+ * @fires load-more - The button was clicked while not `loading`/`exhausted`;
+ *   detail: `{ direction }`.
+ */
+let LoadMore = class LoadMore extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Which end of a list this instance loads more content for. */
+        this.direction = "bottom";
+        /** Consumer-managed busy flag, forwarded to the internal `ui-button`'s `busy`. */
+        this.loading = false;
+        /** Terminal "no more content" state: disables the button and swaps its label. */
+        this.exhausted = false;
+        /** Button text in the normal (loadable) state. */
+        this.label = "Load more";
+        /** Button text shown once `exhausted` is true. */
+        this.exhaustedLabel = "No more results";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        text-align: center;
+      }
+    `,
+    ]; }
+    #onClick() {
+        if (this.loading || this.exhausted)
+            return;
+        this.dispatchEvent(new CustomEvent("load-more", { detail: { direction: this.direction }, bubbles: true, composed: true }));
+    }
+    render() {
+        return html `
+      <ui-button
+        type="button"
+        variant="secondary"
+        ?busy=${this.loading}
+        ?disabled=${this.exhausted}
+        @click=${() => this.#onClick()}
+      >
+        ${this.exhausted ? this.exhaustedLabel : this.label}
+      </ui-button>
+    `;
+    }
+};
+__decorate([
+    property()
+], LoadMore.prototype, "direction", void 0);
+__decorate([
+    property({ type: Boolean })
+], LoadMore.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean })
+], LoadMore.prototype, "exhausted", void 0);
+__decorate([
+    property()
+], LoadMore.prototype, "label", void 0);
+__decorate([
+    property({ attribute: "exhausted-label" })
+], LoadMore.prototype, "exhaustedLabel", void 0);
+LoadMore = __decorate([
+    customElement("load-more")
+], LoadMore);
+export { LoadMore };
+//# sourceMappingURL=load-more.js.map

package/dist/load-more.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"load-more.js","sourceRoot":"","sources":["../src/load-more.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,gBAAgB,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;;GASG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAWL,gEAAgE;QACpD,cAAS,GAAqB,QAAQ,CAAC;QACnD,kFAAkF;QACrD,YAAO,GAAG,KAAK,CAAC;QAC7C,iFAAiF;QACpD,cAAS,GAAG,KAAK,CAAC;QAC/C,kDAAkD;QACtC,UAAK,GAAG,WAAW,CAAC;QAChC,kDAAkD;QACN,mBAAc,GAAG,iBAAiB,CAAC;IAsBjF,CAAC;aAzCiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;KAKF;KACF,AARqB,CAQpB;IAaF,QAAQ;QACN,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS;YAAE,OAAO;QAC3C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CACvG,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;gBAIC,IAAI,CAAC,OAAO;oBACR,IAAI,CAAC,SAAS;iBACjB,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;;UAE5B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;KAEtD,CAAC;IACJ,CAAC;CACF,CAAA;AA9Ba;IAAX,QAAQ,EAAE;2CAAwC;AAEtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCAAiB;AAEhB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAmB;AAEnC;IAAX,QAAQ,EAAE;uCAAqB;AAEY;IAA3C,QAAQ,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;gDAAoC;AApBpE,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0CpB","sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport \"./ui-button.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Click-to-load button for either end of a list. Fully property-driven: the\n * consumer sets `loading` while a fetch is in flight and `exhausted` once\n * there's nothing left to load; this component never fetches or manages\n * state itself.\n *\n * @element load-more\n * @fires load-more - The button was clicked while not `loading`/`exhausted`;\n *   detail: `{ direction }`.\n */\n@customElement(\"load-more\")\nexport class LoadMore extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        text-align: center;\n      }\n    `,\n  ];\n\n  /** Which end of a list this instance loads more content for. */\n  @property() direction: \"top\" | \"bottom\" = \"bottom\";\n  /** Consumer-managed busy flag, forwarded to the internal `ui-button`'s `busy`. */\n  @property({ type: Boolean }) loading = false;\n  /** Terminal \"no more content\" state: disables the button and swaps its label. */\n  @property({ type: Boolean }) exhausted = false;\n  /** Button text in the normal (loadable) state. */\n  @property() label = \"Load more\";\n  /** Button text shown once `exhausted` is true. */\n  @property({ attribute: \"exhausted-label\" }) exhaustedLabel = \"No more results\";\n\n  #onClick(): void {\n    if (this.loading || this.exhausted) return;\n    this.dispatchEvent(\n      new CustomEvent(\"load-more\", { detail: { direction: this.direction }, bubbles: true, composed: true }),\n    );\n  }\n\n  override render() {\n    return html`\n      <ui-button\n        type=\"button\"\n        variant=\"secondary\"\n        ?busy=${this.loading}\n        ?disabled=${this.exhausted}\n        @click=${() => this.#onClick()}\n      >\n        ${this.exhausted ? this.exhaustedLabel : this.label}\n      </ui-button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"load-more\": LoadMore;\n  }\n}\n"]}

package/dist/percent-bar-chart.d.ts

@@ -2,12 +2,26 @@ import { LitElement } from "lit";
 export interface PercentBarGroup {
     key: string;
     label: string;
-    pct: number;
+    /**
+     * The row's value. In `mode="percent"` (default) this is a 0-100
+     * percentage, scaled against a fixed domain. In `mode="value"` this is an
+     * arbitrary raw number, scaled against `max` (or the largest `value`
+     * across `groups` when `max` is unset).
+     */
+    value: number;
     color: string;
 }
+/** Whether `PercentBarGroup.value` is a 0-100 percentage or an arbitrary raw number. */
+export type PercentBarMode = "percent" | "value";
+/** Bars grow rightward as stacked rows, or upward as side-by-side columns. */
+export type PercentBarOrientation = "horizontal" | "vertical";
 /**
- * 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.
+ * Bar chart for labeled rows, using D3's linear scale. Horizontal (default)
+ * renders stacked rows with bars growing rightward; `orientation="vertical"`
+ * renders side-by-side columns growing upward instead. `mode="percent"`
+ * (default) scales `value` against a fixed 0-100 domain and labels it with a
+ * `%` suffix; `mode="value"` scales it against `max` (or the largest `value`
+ * present) and formats it with `valueFormat`.
  *
  * @element percent-bar-chart
  */
@@ -15,13 +29,28 @@ export declare class PercentBarChart extends LitElement {
     static styles: import("lit").CSSResult[];
     /** Rows to render, one per group. */
     groups: PercentBarGroup[];
+    /** Whether `value` is a 0-100 percentage (fixed domain) or an arbitrary number (domain from data/`max`). */
+    mode: PercentBarMode;
+    /** Bar direction: stacked rows growing rightward, or columns growing upward. */
+    orientation: PercentBarOrientation;
+    /** Explicit domain max for `mode="value"`; auto-computed from `groups` when unset. Ignored in `mode="percent"`. */
+    max?: number;
+    /** Formats a row's value for its label in `mode="value"`. Defaults to locale-formatted number. */
+    valueFormat: (value: number) => string;
     private _width;
     private _ro;
     private readonly _gradIdBase;
     /** Per-row gradient id, unique across instances and rows. */
     private _gradId;
+    /** The row's value formatted for display, per the current `mode`. */
+    private _labelFor;
+    /** The scale domain's upper bound for the current `mode`. */
+    private _domainMax;
     firstUpdated(): void;
     disconnectedCallback(): void;
+    private _renderGradients;
+    private _renderHorizontal;
+    private _renderVertical;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/percent-bar-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"percent-bar-chart.d.ts","sourceRoot":"","sources":["../src/percent-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMjD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AASD;;;;;GAKG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA+BpB;IAEF,qCAAqC;IACL,MAAM,EAAE,eAAe,EAAE,CAAM;IACtD,OAAO,CAAC,MAAM,CAAK;IAE5B,OAAO,CAAC,GAAG,CAA+B;IAC1C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA6C;IAEzE,6DAA6D;IAC7D,OAAO,CAAC,OAAO;IAIN,YAAY,SAMpB;IAEQ,oBAAoB,SAI5B;IAEQ,MAAM,yCA2Dd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
+{"version":3,"file":"percent-bar-chart.d.ts","sourceRoot":"","sources":["../src/percent-bar-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMjD,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wFAAwF;AACxF,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,OAAO,CAAC;AACjD,8EAA8E;AAC9E,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAkB9D;;;;;;;;;GASG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA+BpB;IAEF,qCAAqC;IACL,MAAM,EAAE,eAAe,EAAE,CAAM;IAC/D,4GAA4G;IAChG,IAAI,EAAE,cAAc,CAAa;IAC7C,gFAAgF;IACpE,WAAW,EAAE,qBAAqB,CAAgB;IAC9D,mHAAmH;IACvF,GAAG,CAAC,EAAE,MAAM,CAAC;IACzC,kGAAkG;IAClE,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAC7C;IAEhB,OAAO,CAAC,MAAM,CAAK;IAE5B,OAAO,CAAC,GAAG,CAA+B;IAC1C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA6C;IAEzE,6DAA6D;IAC7D,OAAO,CAAC,OAAO;IAIf,qEAAqE;IACrE,OAAO,CAAC,SAAS;IAIjB,6DAA6D;IAC7D,OAAO,CAAC,UAAU;IAMT,YAAY,SAMpB;IAEQ,oBAAoB,SAI5B;IAED,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,eAAe;IA0Bd,MAAM,yCAmBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/percent-bar-chart.js

@@ -9,14 +9,25 @@ import { customElement, property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { scaleLinear } from "d3-scale";
 import { tokens } from "./tokens.js";
+// Horizontal (row) layout.
 const ROW_H = 20;
 const LABEL_W = 56;
-const PCT_W = 36;
+const VALUE_W = 36;
+// Vertical (column) layout.
+const COL_TRACK_H = 96;
+const CAT_LABEL_H = 16;
+const VALUE_LABEL_H = 14;
+const MAX_BAR_W = 28;
+const COL_GAP = 8;
 const PAD = { top: 4, right: 4, bottom: 4, left: 4 };
 let gradientIdCounter = 0;
 /**
- * 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.
+ * Bar chart for labeled rows, using D3's linear scale. Horizontal (default)
+ * renders stacked rows with bars growing rightward; `orientation="vertical"`
+ * renders side-by-side columns growing upward instead. `mode="percent"`
+ * (default) scales `value` against a fixed 0-100 domain and labels it with a
+ * `%` suffix; `mode="value"` scales it against `max` (or the largest `value`
+ * present) and formats it with `valueFormat`.
  *
  * @element percent-bar-chart
  */
@@ -25,6 +36,12 @@ let PercentBarChart = class PercentBarChart extends LitElement {
         super(...arguments);
         /** Rows to render, one per group. */
         this.groups = [];
+        /** Whether `value` is a 0-100 percentage (fixed domain) or an arbitrary number (domain from data/`max`). */
+        this.mode = "percent";
+        /** Bar direction: stacked rows growing rightward, or columns growing upward. */
+        this.orientation = "horizontal";
+        /** Formats a row's value for its label in `mode="value"`. Defaults to locale-formatted number. */
+        this.valueFormat = (value) => value.toLocaleString();
         this._width = 0;
         this._ro = null;
         this._gradIdBase = `percent-bar-grad-${gradientIdCounter++}`;
@@ -65,6 +82,18 @@ let PercentBarChart = class PercentBarChart extends LitElement {
     _gradId(index) {
         return `${this._gradIdBase}-${index}`;
     }
+    /** The row's value formatted for display, per the current `mode`. */
+    _labelFor(value) {
+        return this.mode === "percent" ? `${value.toFixed(1)}%` : this.valueFormat(value);
+    }
+    /** The scale domain's upper bound for the current `mode`. */
+    _domainMax() {
+        if (this.mode === "percent")
+            return 100;
+        if (this.max !== undefined)
+            return this.max;
+        return Math.max(0.000001, ...this.groups.map((g) => g.value));
+    }
     firstUpdated() {
         this._ro = new ResizeObserver((entries) => {
             const w = Math.floor(entries[0].contentRect.width);
@@ -78,59 +107,83 @@ let PercentBarChart = class PercentBarChart extends LitElement {
         this._ro?.disconnect();
         this._ro = null;
     }
-    render() {
-        if (this._width === 0 || this.groups.length === 0)
-            return html ``;
-        const innerW = this._width - PAD.left - PAD.right;
-        const barMaxW = innerW - LABEL_W - PCT_W;
-        const svgH = PAD.top + this.groups.length * ROW_H + PAD.bottom;
-        const xScale = scaleLinear().domain([0, 100]).range([0, barMaxW]);
-        // CSS stop styles preserve every valid CSS color format while matching
-        // map-circle's 30% white/black vertical depth.
-        const rowFills = this.groups.map((g, i) => {
+    _renderGradients() {
+        return this.groups.map((g, i) => {
             const color = g.color.trim();
             const gradId = this._gradId(i);
-            return {
-                fill: `url(#${gradId})`,
-                gradient: svg `
-          <linearGradient
-            id=${gradId}
-            x1="0"
-            y1="0"
-            x2="0"
-            y2="1"
-            style=${styleMap({ "--percent-bar-color": color })}
-          >
-            <stop class="gradient-start" offset="0%" />
-            <stop class="gradient-end" offset="100%" />
-          </linearGradient>
-        `,
-            };
+            return svg `
+        <linearGradient
+          id=${gradId}
+          x1="0"
+          y1="0"
+          x2="0"
+          y2="1"
+          style=${styleMap({ "--percent-bar-color": color })}
+        >
+          <stop class="gradient-start" offset="0%" />
+          <stop class="gradient-end" offset="100%" />
+        </linearGradient>
+      `;
         });
-        const gradients = rowFills.map((row) => row.gradient);
+    }
+    _renderHorizontal() {
+        const innerW = this._width - PAD.left - PAD.right;
+        const barMaxW = innerW - LABEL_W - VALUE_W;
+        const svgH = PAD.top + this.groups.length * ROW_H + PAD.bottom;
+        const xScale = scaleLinear().domain([0, this._domainMax()]).range([0, barMaxW]);
         const rows = this.groups.map((g, i) => {
             const cy = PAD.top + i * ROW_H + ROW_H / 2;
-            const bw = Math.max(0, xScale(g.pct));
+            const bw = Math.max(0, xScale(g.value));
             return svg `
         <text class="chart-label" x=${PAD.left} y=${cy} font-size="10"
               text-anchor="start" dominant-baseline="middle">${g.label}</text>
         <rect x=${PAD.left + LABEL_W} y=${cy - 5}
               width=${bw} height="10" rx="5"
-              fill=${rowFills[i].fill} />
+              fill="url(#${this._gradId(i)})" />
         <text class="chart-label" x=${PAD.left + LABEL_W + barMaxW + 4} y=${cy} font-size="10"
-              text-anchor="start" dominant-baseline="middle">${g.pct.toFixed(1)}%</text>
+              text-anchor="start" dominant-baseline="middle">${this._labelFor(g.value)}</text>
+      `;
+        });
+        return { svgH, content: rows };
+    }
+    _renderVertical() {
+        const innerW = this._width - PAD.left - PAD.right;
+        const n = this.groups.length;
+        const colSlotW = n > 0 ? innerW / n : 0;
+        const barW = Math.max(4, Math.min(MAX_BAR_W, colSlotW - COL_GAP));
+        const svgH = PAD.top + VALUE_LABEL_H + COL_TRACK_H + CAT_LABEL_H + PAD.bottom;
+        const yScale = scaleLinear().domain([0, this._domainMax()]).range([0, COL_TRACK_H]);
+        const cols = this.groups.map((g, i) => {
+            const cx = PAD.left + i * colSlotW + colSlotW / 2;
+            const barH = Math.max(0, yScale(g.value));
+            const barTop = PAD.top + VALUE_LABEL_H + (COL_TRACK_H - barH);
+            const catLabelY = PAD.top + VALUE_LABEL_H + COL_TRACK_H + CAT_LABEL_H - 4;
+            return svg `
+        <rect x=${cx - barW / 2} y=${barTop} width=${barW} height=${barH} rx=${barW / 2}
+              fill="url(#${this._gradId(i)})" />
+        <text class="chart-label" x=${cx} y=${barTop - 4} font-size="10"
+              text-anchor="middle">${this._labelFor(g.value)}</text>
+        <text class="chart-label" x=${cx} y=${catLabelY} font-size="10"
+              text-anchor="middle">${g.label}</text>
       `;
         });
+        return { svgH, content: cols };
+    }
+    render() {
+        if (this._width === 0 || this.groups.length === 0)
+            return html ``;
+        const { svgH, content } = this.orientation === "vertical" ? this._renderVertical() : this._renderHorizontal();
+        const ariaPrefix = this.mode === "percent" ? "Percentages" : "Values";
         return html `
       <svg
         viewBox="0 0 ${this._width} ${svgH}"
         width=${this._width}
         height=${svgH}
         role="img"
-        aria-label=${`Percentages: ${this.groups.map((group) => `${group.label} ${group.pct.toFixed(1)}%`).join(", ")}`}
+        aria-label=${`${ariaPrefix}: ${this.groups.map((g) => `${g.label} ${this._labelFor(g.value)}`).join(", ")}`}
       >
-        <defs>${gradients}</defs>
-        ${rows}
+        <defs>${this._renderGradients()}</defs>
+        ${content}
       </svg>
     `;
     }
@@ -138,6 +191,18 @@ let PercentBarChart = class PercentBarChart extends LitElement {
 __decorate([
     property({ attribute: false })
 ], PercentBarChart.prototype, "groups", void 0);
+__decorate([
+    property()
+], PercentBarChart.prototype, "mode", void 0);
+__decorate([
+    property()
+], PercentBarChart.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Number })
+], PercentBarChart.prototype, "max", void 0);
+__decorate([
+    property({ attribute: false })
+], PercentBarChart.prototype, "valueFormat", void 0);
 __decorate([
     state()
 ], PercentBarChart.prototype, "_width", void 0);

package/dist/percent-bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"percent-bar-chart.js","sourceRoot":"","sources":["../src/percent-bar-chart.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, svg } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { scaleLinear } from \"d3-scale\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface PercentBarGroup {\n  key: string;\n  label: string;\n  pct: number;\n  color: string;\n}\n\nconst ROW_H = 20;\nconst LABEL_W = 56;\nconst PCT_W = 36;\nconst PAD = { top: 4, right: 4, bottom: 4, left: 4 };\n\nlet gradientIdCounter = 0;\n\n/**\n * Horizontal bar chart for labeled percentage rows, using D3's linear scale.\n * Each group gets its own labeled row; bars are proportional to percentage of 100.\n *\n * @element percent-bar-chart\n */\n@customElement(\"percent-bar-chart\")\nexport class PercentBarChart extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n      svg {\n        display: block;\n        overflow: visible;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n      }\n      .chart-label {\n        fill: var(--ui-text-muted, #64748b);\n      }\n      .gradient-start {\n        stop-color: color-mix(in srgb, var(--percent-bar-color) 70%, #ffffff);\n      }\n      .gradient-end {\n        stop-color: color-mix(in srgb, var(--percent-bar-color) 70%, #000000);\n      }\n    `,\n  ];\n\n  /** Rows to render, one per group. */\n  @property({ attribute: false }) groups: PercentBarGroup[] = [];\n  @state() private _width = 0;\n\n  private _ro: ResizeObserver | null = null;\n  private readonly _gradIdBase = `percent-bar-grad-${gradientIdCounter++}`;\n\n  /** Per-row gradient id, unique across instances and rows. */\n  private _gradId(index: number): string {\n    return `${this._gradIdBase}-${index}`;\n  }\n\n  override firstUpdated() {\n    this._ro = new ResizeObserver((entries) => {\n      const w = Math.floor(entries[0].contentRect.width);\n      if (w > 0 && w !== this._width) this._width = w;\n    });\n    this._ro.observe(this);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  override render() {\n    if (this._width === 0 || this.groups.length === 0) return html``;\n\n    const innerW = this._width - PAD.left - PAD.right;\n    const barMaxW = innerW - LABEL_W - PCT_W;\n    const svgH = PAD.top + this.groups.length * ROW_H + PAD.bottom;\n\n    const xScale = scaleLinear().domain([0, 100]).range([0, barMaxW]);\n\n    // CSS stop styles preserve every valid CSS color format while matching\n    // map-circle's 30% white/black vertical depth.\n    const rowFills = this.groups.map((g, i) => {\n      const color = g.color.trim();\n      const gradId = this._gradId(i);\n      return {\n        fill: `url(#${gradId})`,\n        gradient: svg`\n          <linearGradient\n            id=${gradId}\n            x1=\"0\"\n            y1=\"0\"\n            x2=\"0\"\n            y2=\"1\"\n            style=${styleMap({ \"--percent-bar-color\": color })}\n          >\n            <stop class=\"gradient-start\" offset=\"0%\" />\n            <stop class=\"gradient-end\" offset=\"100%\" />\n          </linearGradient>\n        `,\n      };\n    });\n    const gradients = rowFills.map((row) => row.gradient);\n\n    const rows = this.groups.map((g, i) => {\n      const cy = PAD.top + i * ROW_H + ROW_H / 2;\n      const bw = Math.max(0, xScale(g.pct));\n      return svg`\n        <text class=\"chart-label\" x=${PAD.left} y=${cy} font-size=\"10\"\n              text-anchor=\"start\" dominant-baseline=\"middle\">${g.label}</text>\n        <rect x=${PAD.left + LABEL_W} y=${cy - 5}\n              width=${bw} height=\"10\" rx=\"5\"\n              fill=${rowFills[i].fill} />\n        <text class=\"chart-label\" x=${PAD.left + LABEL_W + barMaxW + 4} y=${cy} font-size=\"10\"\n              text-anchor=\"start\" dominant-baseline=\"middle\">${g.pct.toFixed(1)}%</text>\n      `;\n    });\n\n    return html`\n      <svg\n        viewBox=\"0 0 ${this._width} ${svgH}\"\n        width=${this._width}\n        height=${svgH}\n        role=\"img\"\n        aria-label=${`Percentages: ${this.groups.map((group) => `${group.label} ${group.pct.toFixed(1)}%`).join(\", \")}`}\n      >\n        <defs>${gradients}</defs>\n        ${rows}\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"percent-bar-chart\": PercentBarChart;\n  }\n}\n"]}
+{"version":3,"file":"percent-bar-chart.js","sourceRoot":"","sources":["../src/percent-bar-chart.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAoBrC,2BAA2B;AAC3B,MAAM,KAAK,GAAG,EAAE,CAAC;AACjB,MAAM,OAAO,GAAG,EAAE,CAAC;AACnB,MAAM,OAAO,GAAG,EAAE,CAAC;AAEnB,4BAA4B;AAC5B,MAAM,WAAW,GAAG,EAAE,CAAC;AACvB,MAAM,WAAW,GAAG,EAAE,CAAC;AACvB,MAAM,aAAa,GAAG,EAAE,CAAC;AACzB,MAAM,SAAS,GAAG,EAAE,CAAC;AACrB,MAAM,OAAO,GAAG,CAAC,CAAC;AAElB,MAAM,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;AAErD,IAAI,iBAAiB,GAAG,CAAC,CAAC;AAE1B;;;;;;;;;GASG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAkCL,qCAAqC;QACL,WAAM,GAAsB,EAAE,CAAC;QAC/D,4GAA4G;QAChG,SAAI,GAAmB,SAAS,CAAC;QAC7C,gFAAgF;QACpE,gBAAW,GAA0B,YAAY,CAAC;QAG9D,kGAAkG;QAClE,gBAAW,GAA8B,CAAC,KAAK,EAAE,EAAE,CACjF,KAAK,CAAC,cAAc,EAAE,CAAC;QAER,WAAM,GAAG,CAAC,CAAC;QAEpB,QAAG,GAA0B,IAAI,CAAC;QACzB,gBAAW,GAAG,oBAAoB,iBAAiB,EAAE,EAAE,CAAC;IA0H3E,CAAC;aA1KiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4BF;KACF,AA/BqB,CA+BpB;IAmBF,6DAA6D;IACrD,OAAO,CAAC,KAAa;QAC3B,OAAO,GAAG,IAAI,CAAC,WAAW,IAAI,KAAK,EAAE,CAAC;IACxC,CAAC;IAED,qEAAqE;IAC7D,SAAS,CAAC,KAAa;QAC7B,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACpF,CAAC;IAED,6DAA6D;IACrD,UAAU;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,OAAO,GAAG,CAAC;QACxC,IAAI,IAAI,CAAC,GAAG,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC,GAAG,CAAC;QAC5C,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAChE,CAAC;IAEQ,YAAY;QACnB,IAAI,CAAC,GAAG,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACxC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YACnD,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;gBAAE,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAClD,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,GAAG,EAAE,UAAU,EAAE,CAAC;QACvB,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;IAClB,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YAC9B,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YAC/B,OAAO,GAAG,CAAA;;eAED,MAAM;;;;;kBAKH,QAAQ,CAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,CAAC;;;;;OAKrD,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB;QACvB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC;QAClD,MAAM,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;QAC3C,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC;QAC/D,MAAM,MAAM,GAAG,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;QAEhF,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACpC,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,KAAK,GAAG,KAAK,GAAG,CAAC,CAAC;YAC3C,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YACxC,OAAO,GAAG,CAAA;sCACsB,GAAG,CAAC,IAAI,MAAM,EAAE;+DACS,CAAC,CAAC,KAAK;kBACpD,GAAG,CAAC,IAAI,GAAG,OAAO,MAAM,EAAE,GAAG,CAAC;sBAC1B,EAAE;2BACG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;sCACJ,GAAG,CAAC,IAAI,GAAG,OAAO,GAAG,OAAO,GAAG,CAAC,MAAM,EAAE;+DACf,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;OAC/E,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IACjC,CAAC;IAEO,eAAe;QACrB,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,KAAK,CAAC;QAClD,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QAC7B,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC;QAClE,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,GAAG,CAAC,MAAM,CAAC;QAC9E,MAAM,MAAM,GAAG,WAAW,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;QAEpF,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACpC,MAAM,EAAE,GAAG,GAAG,CAAC,IAAI,GAAG,CAAC,GAAG,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAC;YAClD,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YAC1C,MAAM,MAAM,GAAG,GAAG,CAAC,GAAG,GAAG,aAAa,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;YAC9D,MAAM,SAAS,GAAG,GAAG,CAAC,GAAG,GAAG,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;YAC1E,OAAO,GAAG,CAAA;kBACE,EAAE,GAAG,IAAI,GAAG,CAAC,MAAM,MAAM,UAAU,IAAI,WAAW,IAAI,OAAO,IAAI,GAAG,CAAC;2BAC5D,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;sCACJ,EAAE,MAAM,MAAM,GAAG,CAAC;qCACnB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;sCACtB,EAAE,MAAM,SAAS;qCAClB,CAAC,CAAC,KAAK;OACrC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IACjC,CAAC;IAEQ,MAAM;QACb,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAEjE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GACrB,IAAI,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACtF,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAAC;QAEtE,OAAO,IAAI,CAAA;;uBAEQ,IAAI,CAAC,MAAM,IAAI,IAAI;gBAC1B,IAAI,CAAC,MAAM;iBACV,IAAI;;qBAEA,GAAG,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;;gBAEnG,IAAI,CAAC,gBAAgB,EAAE;UAC7B,OAAO;;KAEZ,CAAC;IACJ,CAAC;CACF,CAAA;AAxIiC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CAAgC;AAEnD;IAAX,QAAQ,EAAE;6CAAkC;AAEjC;IAAX,QAAQ,EAAE;oDAAmD;AAElC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AAET;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDACN;AAER;IAAhB,KAAK,EAAE;+CAAoB;AA9CjB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA2K3B","sourcesContent":["import { LitElement, css, html, svg } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { scaleLinear } from \"d3-scale\";\nimport { tokens } from \"./tokens.js\";\n\nexport interface PercentBarGroup {\n  key: string;\n  label: string;\n  /**\n   * The row's value. In `mode=\"percent\"` (default) this is a 0-100\n   * percentage, scaled against a fixed domain. In `mode=\"value\"` this is an\n   * arbitrary raw number, scaled against `max` (or the largest `value`\n   * across `groups` when `max` is unset).\n   */\n  value: number;\n  color: string;\n}\n\n/** Whether `PercentBarGroup.value` is a 0-100 percentage or an arbitrary raw number. */\nexport type PercentBarMode = \"percent\" | \"value\";\n/** Bars grow rightward as stacked rows, or upward as side-by-side columns. */\nexport type PercentBarOrientation = \"horizontal\" | \"vertical\";\n\n// Horizontal (row) layout.\nconst ROW_H = 20;\nconst LABEL_W = 56;\nconst VALUE_W = 36;\n\n// Vertical (column) layout.\nconst COL_TRACK_H = 96;\nconst CAT_LABEL_H = 16;\nconst VALUE_LABEL_H = 14;\nconst MAX_BAR_W = 28;\nconst COL_GAP = 8;\n\nconst PAD = { top: 4, right: 4, bottom: 4, left: 4 };\n\nlet gradientIdCounter = 0;\n\n/**\n * Bar chart for labeled rows, using D3's linear scale. Horizontal (default)\n * renders stacked rows with bars growing rightward; `orientation=\"vertical\"`\n * renders side-by-side columns growing upward instead. `mode=\"percent\"`\n * (default) scales `value` against a fixed 0-100 domain and labels it with a\n * `%` suffix; `mode=\"value\"` scales it against `max` (or the largest `value`\n * present) and formats it with `valueFormat`.\n *\n * @element percent-bar-chart\n */\n@customElement(\"percent-bar-chart\")\nexport class PercentBarChart extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n      }\n      svg {\n        display: block;\n        overflow: visible;\n        font-family: var(\n          --ui-font,\n          ui-sans-serif,\n          system-ui,\n          sans-serif,\n          \"Apple Color Emoji\",\n          \"Segoe UI Emoji\",\n          \"Segoe UI Symbol\",\n          \"Noto Color Emoji\"\n        );\n      }\n      .chart-label {\n        fill: var(--ui-text-muted, #64748b);\n      }\n      .gradient-start {\n        stop-color: color-mix(in srgb, var(--percent-bar-color) 70%, #ffffff);\n      }\n      .gradient-end {\n        stop-color: color-mix(in srgb, var(--percent-bar-color) 70%, #000000);\n      }\n    `,\n  ];\n\n  /** Rows to render, one per group. */\n  @property({ attribute: false }) groups: PercentBarGroup[] = [];\n  /** Whether `value` is a 0-100 percentage (fixed domain) or an arbitrary number (domain from data/`max`). */\n  @property() mode: PercentBarMode = \"percent\";\n  /** Bar direction: stacked rows growing rightward, or columns growing upward. */\n  @property() orientation: PercentBarOrientation = \"horizontal\";\n  /** Explicit domain max for `mode=\"value\"`; auto-computed from `groups` when unset. Ignored in `mode=\"percent\"`. */\n  @property({ type: Number }) max?: number;\n  /** Formats a row's value for its label in `mode=\"value\"`. Defaults to locale-formatted number. */\n  @property({ attribute: false }) valueFormat: (value: number) => string = (value) =>\n    value.toLocaleString();\n\n  @state() private _width = 0;\n\n  private _ro: ResizeObserver | null = null;\n  private readonly _gradIdBase = `percent-bar-grad-${gradientIdCounter++}`;\n\n  /** Per-row gradient id, unique across instances and rows. */\n  private _gradId(index: number): string {\n    return `${this._gradIdBase}-${index}`;\n  }\n\n  /** The row's value formatted for display, per the current `mode`. */\n  private _labelFor(value: number): string {\n    return this.mode === \"percent\" ? `${value.toFixed(1)}%` : this.valueFormat(value);\n  }\n\n  /** The scale domain's upper bound for the current `mode`. */\n  private _domainMax(): number {\n    if (this.mode === \"percent\") return 100;\n    if (this.max !== undefined) return this.max;\n    return Math.max(0.000001, ...this.groups.map((g) => g.value));\n  }\n\n  override firstUpdated() {\n    this._ro = new ResizeObserver((entries) => {\n      const w = Math.floor(entries[0].contentRect.width);\n      if (w > 0 && w !== this._width) this._width = w;\n    });\n    this._ro.observe(this);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = null;\n  }\n\n  private _renderGradients() {\n    return this.groups.map((g, i) => {\n      const color = g.color.trim();\n      const gradId = this._gradId(i);\n      return svg`\n        <linearGradient\n          id=${gradId}\n          x1=\"0\"\n          y1=\"0\"\n          x2=\"0\"\n          y2=\"1\"\n          style=${styleMap({ \"--percent-bar-color\": color })}\n        >\n          <stop class=\"gradient-start\" offset=\"0%\" />\n          <stop class=\"gradient-end\" offset=\"100%\" />\n        </linearGradient>\n      `;\n    });\n  }\n\n  private _renderHorizontal() {\n    const innerW = this._width - PAD.left - PAD.right;\n    const barMaxW = innerW - LABEL_W - VALUE_W;\n    const svgH = PAD.top + this.groups.length * ROW_H + PAD.bottom;\n    const xScale = scaleLinear().domain([0, this._domainMax()]).range([0, barMaxW]);\n\n    const rows = this.groups.map((g, i) => {\n      const cy = PAD.top + i * ROW_H + ROW_H / 2;\n      const bw = Math.max(0, xScale(g.value));\n      return svg`\n        <text class=\"chart-label\" x=${PAD.left} y=${cy} font-size=\"10\"\n              text-anchor=\"start\" dominant-baseline=\"middle\">${g.label}</text>\n        <rect x=${PAD.left + LABEL_W} y=${cy - 5}\n              width=${bw} height=\"10\" rx=\"5\"\n              fill=\"url(#${this._gradId(i)})\" />\n        <text class=\"chart-label\" x=${PAD.left + LABEL_W + barMaxW + 4} y=${cy} font-size=\"10\"\n              text-anchor=\"start\" dominant-baseline=\"middle\">${this._labelFor(g.value)}</text>\n      `;\n    });\n\n    return { svgH, content: rows };\n  }\n\n  private _renderVertical() {\n    const innerW = this._width - PAD.left - PAD.right;\n    const n = this.groups.length;\n    const colSlotW = n > 0 ? innerW / n : 0;\n    const barW = Math.max(4, Math.min(MAX_BAR_W, colSlotW - COL_GAP));\n    const svgH = PAD.top + VALUE_LABEL_H + COL_TRACK_H + CAT_LABEL_H + PAD.bottom;\n    const yScale = scaleLinear().domain([0, this._domainMax()]).range([0, COL_TRACK_H]);\n\n    const cols = this.groups.map((g, i) => {\n      const cx = PAD.left + i * colSlotW + colSlotW / 2;\n      const barH = Math.max(0, yScale(g.value));\n      const barTop = PAD.top + VALUE_LABEL_H + (COL_TRACK_H - barH);\n      const catLabelY = PAD.top + VALUE_LABEL_H + COL_TRACK_H + CAT_LABEL_H - 4;\n      return svg`\n        <rect x=${cx - barW / 2} y=${barTop} width=${barW} height=${barH} rx=${barW / 2}\n              fill=\"url(#${this._gradId(i)})\" />\n        <text class=\"chart-label\" x=${cx} y=${barTop - 4} font-size=\"10\"\n              text-anchor=\"middle\">${this._labelFor(g.value)}</text>\n        <text class=\"chart-label\" x=${cx} y=${catLabelY} font-size=\"10\"\n              text-anchor=\"middle\">${g.label}</text>\n      `;\n    });\n\n    return { svgH, content: cols };\n  }\n\n  override render() {\n    if (this._width === 0 || this.groups.length === 0) return html``;\n\n    const { svgH, content } =\n      this.orientation === \"vertical\" ? this._renderVertical() : this._renderHorizontal();\n    const ariaPrefix = this.mode === \"percent\" ? \"Percentages\" : \"Values\";\n\n    return html`\n      <svg\n        viewBox=\"0 0 ${this._width} ${svgH}\"\n        width=${this._width}\n        height=${svgH}\n        role=\"img\"\n        aria-label=${`${ariaPrefix}: ${this.groups.map((g) => `${g.label} ${this._labelFor(g.value)}`).join(\", \")}`}\n      >\n        <defs>${this._renderGradients()}</defs>\n        ${content}\n      </svg>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"percent-bar-chart\": PercentBarChart;\n  }\n}\n"]}

package/dist/scroll-to-bottom.d.ts

@@ -0,0 +1,41 @@
+import { LitElement, type PropertyValues } from "lit";
+/**
+ * Overlay button that appears once the page (or a given `target` container)
+ * has scrolled more than `threshold` pixels away from the bottom edge, and
+ * scrolls back to the bottom on click.
+ *
+ * With no `target` (default), the button is `position: fixed` to the
+ * viewport. When `target` is set, the button switches to `position:
+ * absolute` and expects to be placed as a descendant of a `position:
+ * relative` (or otherwise positioned) ancestor that establishes the visual
+ * bounds to float within — typically `target` itself, given `overflow-y:
+ * auto; position: relative`, so the button stays pinned to that container's
+ * own visible corner as its content scrolls, rather than floating over the
+ * whole page.
+ *
+ * @element scroll-to-bottom
+ * @fires scroll-to-bottom-triggered - The button was clicked, just before
+ *   scrolling; detail: `{ target }`.
+ */
+export declare class ScrollToBottom extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** Scrollable container to control; `null` (default) scrolls `window`. */
+    target: HTMLElement | null;
+    /** Pixels scrolled away from the bottom before the button appears. */
+    threshold: number;
+    /** Visible button text, and its accessible name. */
+    label: string;
+    private _visible;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "scroll-to-bottom": ScrollToBottom;
+    }
+}
+//# sourceMappingURL=scroll-to-bottom.d.ts.map

package/dist/scroll-to-bottom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-to-bottom.d.ts","sourceRoot":"","sources":["../src/scroll-to-bottom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMjE;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAC5C,OAAgB,MAAM,4BA6EpB;IAEF,0EAA0E;IAC1C,MAAM,EAAE,WAAW,GAAG,IAAI,CAAQ;IAClE,sEAAsE;IAC1C,SAAS,SAAO;IAC5C,oDAAoD;IACxC,KAAK,SAAsB;IAE9B,OAAO,CAAC,QAAQ,CAAS;IAIzB,iBAAiB,IAAI,IAAI,CAGjC;IAEQ,oBAAoB,IAAI,IAAI,CAGpC;IAED,UAAmB,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAU3D;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAExD;IA0BQ,MAAM,yCAOd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}