@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/src/components/pagination/pagination.ts

@@ -0,0 +1,120 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {buildPages} from "./pagination.utils.js";
+import "../icon/icon.js";
+
+@customElement("st-pagination")
+export class StPagination extends LitElement {
+  @property({type: Number, reflect: true}) page = 1;
+  @property({type: Number, attribute: "total-pages"}) totalPages = 1;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        list-style: none;
+        align-items: center;
+      }
+      button {
+        min-width: 2.25rem;
+        height: 2.25rem;
+        padding: 0 0.5rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid var(--st-color-border);
+        border-radius: 0.5rem;
+        background: var(--st-color-surface);
+        color: var(--st-color-text);
+        cursor: pointer;
+      }
+      button:hover:not(:disabled):not([aria-current="page"]) {
+        background: var(--st-color-surface-hover);
+      }
+      button:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+      }
+      button[aria-current="page"] {
+        background: var(--st-color-primary);
+        border-color: var(--st-color-primary);
+        color: var(--st-color-on-primary);
+        cursor: default;
+      }
+      button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      .gap {
+        padding: 0 0.25rem;
+        color: var(--st-color-text-muted);
+      }
+    `,
+  ];
+
+  private _go(page: number) {
+    const next = Math.min(Math.max(page, 1), this.totalPages);
+    if (next === this.page) return;
+    this.page = next;
+    this.dispatchEvent(
+      new CustomEvent("st-page-change", {detail: {page: next}, bubbles: true, composed: true}),
+    );
+  }
+
+  render() {
+    const pages = buildPages(this.page, this.totalPages);
+    return html`
+      <nav aria-label="Pagination">
+        <ul>
+          <li>
+            <button
+              type="button"
+              aria-label="Previous page"
+              ?disabled=${this.page <= 1}
+              @click=${() => this._go(this.page - 1)}
+            >
+              <st-icon name="angle-left" size="sm" aria-hidden="true"></st-icon>
+            </button>
+          </li>
+          ${pages.map((p) =>
+            p === "…"
+              ? html`<li class="gap" aria-hidden="true">…</li>`
+              : html`<li>
+                  <button
+                    type="button"
+                    aria-label="Page ${p}"
+                    aria-current=${p === this.page ? "page" : "false"}
+                    @click=${() => this._go(p)}
+                  >
+                    ${p}
+                  </button>
+                </li>`,
+          )}
+          <li>
+            <button
+              type="button"
+              aria-label="Next page"
+              ?disabled=${this.page >= this.totalPages}
+              @click=${() => this._go(this.page + 1)}
+            >
+              <st-icon name="angle-right" size="sm" aria-hidden="true"></st-icon>
+            </button>
+          </li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-pagination": StPagination;
+  }
+}

package/src/components/pagination/pagination.utils.ts

@@ -0,0 +1,14 @@
+/** Builds the visible page list, e.g. [1, "…", 4, 5, 6, "…", 12]. */
+export function buildPages(current: number, total: number, siblings = 1): (number | "…")[] {
+  if (total <= 0) return [];
+  const range = (a: number, b: number) => Array.from({length: b - a + 1}, (_, i) => a + i);
+  if (total <= siblings * 2 + 5) return range(1, total);
+  const left = Math.max(current - siblings, 2);
+  const right = Math.min(current + siblings, total - 1);
+  const pages: (number | "…")[] = [1];
+  if (left > 2) pages.push("…");
+  pages.push(...range(left, right));
+  if (right < total - 1) pages.push("…");
+  pages.push(total);
+  return pages;
+}

package/src/components/pie-chart/pie-chart.ts

@@ -0,0 +1,230 @@
+import {html, css, svg, nothing} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {StChartBase} from "../chart/chart-base.js";
+import {arcPath, chartColor, polar, stepIndex} from "../chart/chart.utils.js";
+
+export interface PieDatum {
+  label: string;
+  value: number;
+  color?: string;
+}
+
+/** Pie chart, or donut with `donut`. Slices are hoverable, selectable and keyboard navigable. */
+@customElement("st-pie-chart")
+export class StPieChart extends StChartBase {
+  @property({type: Array}) data: PieDatum[] = [];
+  @property({type: Boolean}) donut = false;
+  /** Donut label shown above the total, e.g. "Total". */
+  @property({type: String, attribute: "center-label"}) centerLabel = "Total";
+  /** Index of the selected slice, or null. */
+  @property({type: Number, reflect: true}) selected: number | null = null;
+
+  @state() private _active: number | null = null;
+  @state() private _hidden = new Set<number>();
+
+  static styles = [
+    resetStyles,
+    StChartBase.baseStyles,
+    css`
+      .slice {
+        stroke: var(--st-color-bg);
+        stroke-width: 2;
+        cursor: default;
+      }
+      :host([selectable]) .slice {
+        cursor: pointer;
+      }
+      .slice.dim {
+        opacity: 0.5;
+      }
+      .center-value {
+        fill: var(--st-color-text);
+        font-size: var(--st-font-size-2xl);
+        font-weight: var(--st-font-weight-bold);
+      }
+      .center-label {
+        fill: var(--st-color-text-muted);
+        font-size: var(--st-font-size-xs);
+      }
+    `,
+  ];
+
+  private get _slices() {
+    const visible = this.data
+      .map((d, i) => ({d, i}))
+      .filter(({d, i}) => !this._hidden.has(i) && d.value > 0);
+    const total = visible.reduce((sum, {d}) => sum + d.value, 0);
+    let angle = 0;
+    return {
+      total,
+      slices: visible.map(({d, i}) => {
+        const start = angle;
+        angle += total ? (d.value / total) * Math.PI * 2 : 0;
+        return {...d, index: i, start, end: angle, percent: total ? (d.value / total) * 100 : 0};
+      }),
+    };
+  }
+
+  private _describe(index: number) {
+    const {total} = this._slices;
+    const d = this.data[index];
+    return {
+      index,
+      label: d.label,
+      value: d.value,
+      percent: total ? (d.value / total) * 100 : 0,
+    };
+  }
+
+  private _setActive(index: number | null) {
+    if (index === this._active) return;
+    this._active = index;
+    if (index === null) {
+      this.hideTooltip();
+      this.emit("st-chart-leave", {});
+      return;
+    }
+    const d = this._describe(index);
+    const slice = this._slices.slices.find((s) => s.index === index)!;
+    const r = this._radius();
+    const [x, y] = polar(this._width / 2, this.height / 2, r, (slice.start + slice.end) / 2);
+    const percent = `${d.percent.toFixed(1)}%`;
+    this.showTooltip(
+      {
+        x,
+        y,
+        title: d.label,
+        rows: [{label: percent, value: this.fmt(d.value), color: chartColor(index, this.data[index].color)}],
+      },
+      `${d.label}: ${this.fmt(d.value)}, ${percent}`,
+    );
+    this.emit("st-chart-hover", d);
+  }
+
+  private _select(index: number) {
+    if (!this.selectable) return;
+    this.selected = this.selected === index ? null : index;
+    this.emit("st-chart-select", {...this._describe(index), selected: this.selected === index});
+  }
+
+  private _radius() {
+    return Math.max(Math.min(this._width, this.height) / 2 - 12, 10);
+  }
+
+  private _onKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") return this._setActive(null);
+    if ((e.key === "Enter" || e.key === " ") && this._active !== null) {
+      e.preventDefault();
+      return this._select(this._active);
+    }
+    const order = this._slices.slices.map((s) => s.index);
+    const pos = this._active === null ? null : order.indexOf(this._active);
+    const next = stepIndex(e.key, pos === -1 ? null : pos, order.length);
+    if (next !== null) {
+      e.preventDefault();
+      this._setActive(order[next]);
+    }
+  }
+
+  private _toggleSlice(index: number) {
+    const hidden = new Set(this._hidden);
+    if (hidden.has(index)) hidden.delete(index);
+    else hidden.add(index);
+    this._hidden = hidden;
+    this._active = null;
+    this.hideTooltip();
+    this.emit("st-chart-legend-toggle", {
+      name: this.data[index].label,
+      index,
+      hidden: hidden.has(index),
+    });
+  }
+
+  private _renderPlot() {
+    const {total, slices} = this._slices;
+    const cx = this._width / 2;
+    const cy = this.height / 2;
+    const r = this._radius();
+    const inner = this.donut ? r * 0.6 : 0;
+    const emphasis = this._active ?? this.selected;
+    return svg`
+      <svg width=${this._width} height=${this.height} aria-hidden="true">
+        ${slices.map((s) => {
+          const [dx, dy] =
+            s.index === this.selected
+              ? polar(0, 0, 6, (s.start + s.end) / 2)
+              : [0, 0];
+          const dim = emphasis !== null && emphasis !== s.index ? "dim" : "";
+          return svg`
+            <path
+              class="slice animate ${dim}"
+              d=${arcPath(cx, cy, r, inner, s.start, s.end)}
+              transform="translate(${dx} ${dy})"
+              style="fill:${chartColor(s.index, s.color)}"
+              @pointerenter=${() => this._setActive(s.index)}
+              @pointerleave=${() => this._setActive(null)}
+              @click=${() => this._select(s.index)}
+            ></path>
+          `;
+        })}
+        ${this.donut
+          ? svg`
+              <text class="center-value" x=${cx} y=${cy + 4} text-anchor="middle">${this.fmtAxis(total)}</text>
+              <text class="center-label" x=${cx} y=${cy + 22} text-anchor="middle">${this.centerLabel}</text>
+            `
+          : nothing}
+      </svg>
+    `;
+  }
+
+  render() {
+    const total = this.data.reduce((sum, d) => sum + d.value, 0);
+    return html`
+      <div class="chart">
+        ${this._width > 0
+          ? html`
+              <div
+                class="plot"
+                tabindex="0"
+                role="group"
+                aria-roledescription=${this.donut ? "donut chart" : "pie chart"}
+                aria-label=${this.label || (this.donut ? "Donut chart" : "Pie chart")}
+                @keydown=${this._onKeydown}
+                @focus=${() => {
+                  const first = this._slices.slices[0];
+                  if (this._active === null && first) this._setActive(first.index);
+                }}
+                @blur=${() => this._setActive(null)}
+              >
+                ${this._renderPlot()} ${this.renderTooltip()}
+              </div>
+            `
+          : nothing}
+        ${this.renderLegend(
+          this.data.map((d, i) => ({
+            name: d.label,
+            color: chartColor(i, d.color),
+            hidden: this._hidden.has(i),
+          })),
+          (i) => this._toggleSlice(i),
+        )}
+        ${this.renderLiveRegion()}
+        ${this.renderDataTable(
+          ["Category", "Value", "Share"],
+          this.data.map((d) => [
+            d.label,
+            this.fmt(d.value),
+            total ? `${((d.value / total) * 100).toFixed(1)}%` : "0%",
+          ]),
+        )}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-pie-chart": StPieChart;
+  }
+}

package/src/components/pin-input/pin-input.ts

@@ -73,24 +73,24 @@ export class StPinInput extends LitElement {
       .pin-box:focus {
         outline: none;
         border-color: var(--st-color-primary);
-        box-shadow: 0 0 0 2px var(--st-color-primary-muted, rgba(59, 130, 246, 0.25));
+        box-shadow: 0 0 0 2px var(--st-color-primary-muted);
       }
 
       .pin-box:disabled {
-        background: var(--st-color-surface-muted, #f1f5f9);
+        background: var(--st-color-surface-muted);
         color: var(--st-color-text-muted);
         cursor: not-allowed;
       }
 
       .is-invalid .pin-box {
-        border-color: var(--st-color-danger, #dc2626);
+        border-color: var(--st-color-danger);
       }
 
       .error-msg {
         display: block;
         margin-top: var(--st-spacing-xs);
         font-size: var(--st-font-size-xs);
-        color: var(--st-color-danger, #dc2626);
+        color: var(--st-color-danger);
       }
     `,
   ];

package/src/components/popover/popover.ts

@@ -45,9 +45,7 @@ export class StPopover extends LitElement {
         background: var(--st-color-surface);
         border: 1px solid var(--st-color-border);
         border-radius: var(--st-radius-md);
-        box-shadow:
-          0 10px 15px -3px rgba(0, 0, 0, 0.1),
-          0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        box-shadow: var(--st-shadow-lg);
         padding: var(--st-spacing-md);
         color: var(--st-color-text);
 

package/src/components/post-list/post-card.ts

@@ -0,0 +1,18 @@
+import {customElement} from "lit/decorators.js";
+import {StCard} from "../section/card.js";
+
+/**
+ * One blog post in a `st-post-list`: a picture, the date and reading time, a title linking to the
+ * post, and an excerpt.
+ *
+ * Slots: `image`, `meta` (date, reading time, tags), `title` (a heading containing the link),
+ * the default slot (the excerpt) and `footer`. Set `tags` (comma separated) for the list's filter.
+ */
+@customElement("st-post-card")
+export class StPostCard extends StCard {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-post-card": StPostCard;
+  }
+}

package/src/components/post-list/post-list.ts

@@ -0,0 +1,19 @@
+import {customElement} from "lit/decorators.js";
+import {StCardRow} from "../section/card-row.js";
+import "./post-card.js";
+
+/**
+ * A row listing blog posts as `st-post-card` items, in a grid or one per row (`layout="list"`),
+ * optionally filtered by topic (`filterable`).
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-post-card` items.
+ * Events: `st-filter` `{tag, count}` when a topic is chosen.
+ */
+@customElement("st-post-list")
+export class StPostList extends StCardRow {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-post-list": StPostList;
+  }
+}

package/src/components/pricing/pricing-tier.ts

@@ -0,0 +1,132 @@
+import {html, css, nothing} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import {StRowItem} from "../section/row-item.js";
+
+/**
+ * One plan inside `st-pricing`: a name, a price, what is included and a button.
+ *
+ * Slots: `title` (the plan name, a real heading such as `<h3>`), `price` (such as `£29`), `period`
+ * (such as `per month`), the default slot (a short description, then a `<ul>` of what is included,
+ * which is marked with ticks) and `action` (the button).
+ */
+@customElement("st-pricing-tier")
+export class StPricingTier extends StRowItem {
+  /** Highlights the plan as the recommended one. */
+  @property({type: Boolean, reflect: true}) featured = false;
+  /** Label shown on the featured plan. */
+  @property({type: String, attribute: "featured-label"}) featuredLabel = "Most popular";
+
+  @state() private _hasAction = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .tier {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-md);
+        height: 100%;
+        padding: var(--st-spacing-xl) var(--st-spacing-lg);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-lg);
+        background: var(--st-row-card-bg, var(--st-color-surface));
+      }
+
+      :host([featured]) .tier {
+        border: 2px solid var(--st-color-primary);
+        box-shadow: var(--st-shadow-lg);
+      }
+
+      .badge {
+        position: absolute;
+        top: 0;
+        left: 50%;
+        padding: var(--st-spacing-xs) var(--st-spacing-md);
+        border-radius: 999px;
+        background: var(--st-color-primary);
+        color: var(--st-color-bg);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-bold);
+        white-space: nowrap;
+        transform: translate(-50%, -50%);
+      }
+
+      ::slotted([slot="title"]) {
+        margin: 0 !important;
+        font-size: var(--st-font-size-xl) !important;
+      }
+
+      .price {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: var(--st-spacing-sm);
+      }
+
+      ::slotted([slot="price"]) {
+        font-size: clamp(2rem, 5vw, 2.75rem);
+        font-weight: var(--st-font-weight-bold);
+        line-height: 1;
+      }
+
+      ::slotted([slot="period"]) {
+        color: var(--st-color-text-muted);
+      }
+
+      .body {
+        flex: 1;
+        color: var(--st-color-text-muted);
+      }
+
+      .body ::slotted(p) {
+        margin: 0 0 var(--st-spacing-md);
+      }
+
+      /* A string marker is inherited by the list items, so the ticks need no extra markup. */
+      .body ::slotted(ul) {
+        margin: 0;
+        padding-left: var(--st-spacing-lg);
+        list-style: "\\2713  ";
+        color: var(--st-color-text);
+      }
+
+      .action[hidden] {
+        display: none;
+      }
+
+      .action ::slotted(*) {
+        display: block;
+        width: 100%;
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(html`
+      <div class="tier">
+        ${this.featured ? html`<span class="badge">${this.featuredLabel}</span>` : nothing}
+        <slot name="title"></slot>
+        <div class="price"><slot name="price"></slot><slot name="period"></slot></div>
+        <div class="body"><slot></slot></div>
+        <div class="action" ?hidden=${!this._hasAction}>
+          <slot
+            name="action"
+            @slotchange=${(e: Event) => (this._hasAction = (e.target as HTMLSlotElement).assignedNodes().length > 0)}
+          ></slot>
+        </div>
+      </div>
+    `);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-pricing-tier": StPricingTier;
+  }
+}

package/src/components/pricing/pricing.ts

@@ -0,0 +1,39 @@
+import {html, css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+import "./pricing-tier.js";
+
+/**
+ * A row of plans side by side as `st-pricing-tier` cards. They wrap on narrow screens, and one
+ * can be marked `featured`.
+ *
+ * Slots: `eyebrow`, `title`, `lead` and the default slot for the `st-pricing-tier` items.
+ */
+@customElement("st-pricing")
+export class StPricing extends StSection {
+  static styles = [
+    ...StSection.styles,
+    css`
+      .items {
+        display: grid;
+        gap: var(--st-spacing-lg);
+        padding-top: var(--st-spacing-md);
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+        align-items: stretch;
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(
+      html`<div class="items"><slot @slotchange=${this._onItemsChange}></slot></div>`,
+      {animated: false},
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-pricing": StPricing;
+  }
+}