@mcp-b/web-components 0.2.0

package/dist/copy.styles-DWGvGNTP.js

@@ -0,0 +1,100 @@
+import { css } from "lit";
+//#region src/components/copy/copy.styles.ts
+/** NOTE: these styles are also used by <sigvelo-share> */
+var copy_styles_default = css`
+  :host {
+    display: inline-block;
+    position: relative;
+    white-space: normal;
+  }
+
+  sigvelo-button,
+  ::slotted(*) {
+    cursor: copy !important;
+  }
+
+  #feedback {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: fit-content;
+    margin: 0;
+    padding-inline: 0.5rem;
+    padding-block: 0.25rem;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-bg-strong);
+    border-radius: var(--sigvelo-radius-md);
+    background-color: var(--sigvelo-color-neutral-bg-strong);
+    box-shadow: var(--sigvelo-elevation-raised);
+    color: var(--sigvelo-color-neutral-text-on-strong);
+    font-weight: var(--sigvelo-font-weight-semibold);
+    font-size: 0.75rem;
+    text-align: center;
+    text-transform: uppercase;
+    pointer-events: none;
+    user-select: none;
+
+    &.show {
+      animation: show 1s ease;
+    }
+  }
+
+  #feedback[data-placement="top"] {
+    --translate-x-start: 0;
+    --translate-x-end: 0;
+    --translate-y-start: -0.25rem;
+    --translate-y-end: -0.75rem;
+    translate: 0 -0.25rem;
+  }
+
+  #feedback[data-placement="right"] {
+    --translate-x-start: 0.25rem;
+    --translate-x-end: 0.75rem;
+    --translate-y-start: 0;
+    --translate-y-end: 0;
+    translate: 0.25rem 0;
+  }
+
+  #feedback[data-placement="bottom"] {
+    --translate-x-start: 0;
+    --translate-x-end: 0;
+    --translate-y-start: 0.25rem;
+    --translate-y-end: 0.75rem;
+    translate: 0 0.25rem;
+  }
+
+  #feedback[data-placement="left"] {
+    --translate-x-start: -0.25rem;
+    --translate-x-end: -0.75rem;
+    --translate-y-start: 0;
+    --translate-y-end: 0;
+    translate: -0.25rem 0;
+  }
+
+  @keyframes show {
+    0% {
+      transform: translate(var(--translate-x-start), var(--translate-y-start));
+      scale: 0.95;
+      opacity: 0;
+    }
+
+    20% {
+      transform: translate(var(--translate-x-end), var(--translate-y-end));
+      scale: 1;
+      opacity: 1;
+    }
+
+    80% {
+      transform: translate(var(--translate-x-start), var(--translate-y-start));
+      scale: 1;
+      opacity: 1;
+    }
+
+    100% {
+      scale: 0.95;
+      opacity: 0;
+    }
+  }
+`;
+//#endregion
+export { copy_styles_default as t };

package/dist/data-table-CITa8DSn.js

@@ -0,0 +1,247 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { map } from "lit/directives/map.js";
+import { SigveloRowSelectEvent, SigveloRowSelectEvent as SigveloRowSelectEvent$1 } from "@mcp-b/wc-support/events/row";
+//#region src/components/data-table/data-table.styles.ts
+var data_table_styles_default = css`
+  :host {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  #scroller {
+    max-inline-size: 100%;
+    overflow-x: auto;
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+    border-radius: var(--sigvelo-radius-lg);
+    background: var(--sigvelo-color-surface);
+  }
+
+  table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    color: var(--sigvelo-color-text);
+    font: inherit;
+  }
+
+  caption {
+    padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4);
+    color: var(--sigvelo-color-text);
+    font-weight: var(--sigvelo-font-weight-semibold);
+    text-align: start;
+  }
+
+  th,
+  td {
+    padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-3-5);
+    border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+    text-align: start;
+    vertical-align: middle;
+    white-space: nowrap;
+  }
+
+  th {
+    color: var(--sigvelo-color-text-muted);
+    font-size: var(--sigvelo-text-sm);
+    font-weight: var(--sigvelo-font-weight-semibold);
+  }
+
+  tbody tr:last-child td {
+    border-block-end: 0;
+  }
+
+  tbody tr[aria-selected="true"] {
+    background: var(--sigvelo-color-primary-bg-subtle);
+  }
+
+  .select-cell {
+    inline-size: 1%;
+    padding-inline-end: 0;
+  }
+
+  input {
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin: 0;
+    accent-color: var(--sigvelo-color-primary-bg);
+  }
+
+  input:focus-visible {
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: var(--sigvelo-focus-offset);
+  }
+
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .empty {
+    padding: var(--sigvelo-spacing-6);
+    color: var(--sigvelo-color-text-muted);
+    text-align: center;
+  }
+`;
+//#endregion
+//#region src/components/data-table/data-table.ts
+function displayCell(value) {
+	if (value === null || value === void 0 || value === "") return "—";
+	if (typeof value === "boolean") return value ? "Yes" : "No";
+	return String(value);
+}
+/**
+* <sigvelo-data-table>
+*
+* @summary Presents structured rows in an accessible, responsive table with optional single or multiple selection.
+* @tag sigvelo-data-table
+* @documentation https://design-system.sigvelo.com/docs/components/data-table
+* @status stable
+* @since 1.0
+*
+* @event sigvelo-row-select - Emitted when a selectable row changes. The detail contains `rowKey`, `selected`, and the complete `selectedKeys` array.
+*
+* @csspart scroller - The horizontally scrollable table container.
+* @csspart table - The native `<table>` element.
+* @csspart caption - The table caption.
+* @csspart header - The table header.
+* @csspart header-cell - A column heading.
+* @csspart body - The table body.
+* @csspart row - A body row.
+* @csspart cell - A body cell.
+* @csspart selection-cell - A cell containing a row selection control.
+* @csspart empty - The empty-result cell.
+*
+* @example Default
+* ```html
+* <sigvelo-data-table id="team"></sigvelo-data-table>
+* <script type="module">
+*   const table = document.querySelector('#team');
+*   table.columns = [
+*     { key: 'name', label: 'Name' },
+*     { key: 'role', label: 'Role' },
+*     { key: 'score', label: 'Score', align: 'end' }
+*   ];
+*   table.rows = [
+*     { id: 'ada', name: 'Ada Lovelace', role: 'Engineering', score: 96 },
+*     { id: 'grace', name: 'Grace Hopper', role: 'Engineering', score: 94 }
+*   ];
+* <\/script>
+* ```
+*
+* @example Multiple selection
+* Set `selection` to `multiple` and provide a stable `keyField`. Listen for
+* `sigvelo-row-select` to observe selection changes.
+*
+* ```html
+* <sigvelo-data-table id="selectable-team" selection="multiple"></sigvelo-data-table>
+* ```
+*/
+var SigveloDataTable = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.columns = [];
+		this.rows = [];
+		this.keyField = "id";
+		this.selection = "none";
+		this.selectedKeys = [];
+		this.emptyText = "No results";
+	}
+	static {
+		this.styles = [hostStyles, data_table_styles_default];
+	}
+	#rowKey(row, index) {
+		const value = row[this.keyField];
+		return value === null || value === void 0 ? String(index) : String(value);
+	}
+	#rowLabel(row, index) {
+		const firstColumn = this.columns[0];
+		return firstColumn ? displayCell(row[firstColumn.key]) : `row ${index + 1}`;
+	}
+	#select(rowKey, selected) {
+		if (this.selection === "none") return;
+		const current = new Set(this.selectedKeys);
+		if (this.selection === "single") current.clear();
+		if (selected) current.add(rowKey);
+		else current.delete(rowKey);
+		this.selectedKeys = [...current];
+		this.dispatchEvent(new SigveloRowSelectEvent({
+			rowKey,
+			selected,
+			selectedKeys: this.selectedKeys
+		}));
+	}
+	render() {
+		const selectable = this.selection !== "none";
+		const selected = new Set(this.selectedKeys);
+		return html`
+      <div id="scroller" part="scroller">
+        <table part="table" aria-label=${this.caption ? nothing : "Data table"}>
+          ${this.caption ? html`<caption part="caption">
+                ${this.caption}
+              </caption>` : nothing}
+          <thead part="header">
+            <tr>
+              ${selectable ? html`<th class="select-cell" part="header-cell selection-cell">
+                    <span class="sr-only">Select</span>
+                  </th>` : nothing}
+              ${map(this.columns, (column) => html`
+                  <th part="header-cell" style=${`text-align:${column.align ?? "start"}`}>
+                    ${column.label}
+                  </th>
+                `)}
+            </tr>
+          </thead>
+          <tbody part="body">
+            ${this.rows.length === 0 ? html`<tr part="row">
+                  <td
+                    class="empty"
+                    part="cell empty"
+                    colspan=${this.columns.length + (selectable ? 1 : 0)}
+                  >
+                    ${this.emptyText}
+                  </td>
+                </tr>` : map(this.rows, (row, index) => {
+			const rowKey = this.#rowKey(row, index);
+			const isSelected = selected.has(rowKey);
+			return html`<tr part="row" aria-selected=${selectable ? isSelected : nothing}>
+                    ${selectable ? html`<td class="select-cell" part="cell selection-cell">
+                          <input
+                            type=${this.selection === "single" ? "radio" : "checkbox"}
+                            name="selection"
+                            aria-label=${`Select ${this.#rowLabel(row, index)}`}
+                            .checked=${isSelected}
+                            @change=${(event) => this.#select(rowKey, event.currentTarget.checked)}
+                          />
+                        </td>` : nothing}
+                    ${map(this.columns, (column) => html`
+                        <td part="cell" style=${`text-align:${column.align ?? "start"}`}>
+                          ${displayCell(row[column.key])}
+                        </td>
+                      `)}
+                  </tr>`;
+		})}
+          </tbody>
+        </table>
+      </div>
+    `;
+	}
+};
+__decorate([property({ attribute: false })], SigveloDataTable.prototype, "columns", void 0);
+__decorate([property({ attribute: false })], SigveloDataTable.prototype, "rows", void 0);
+__decorate([property({ attribute: "key-field" })], SigveloDataTable.prototype, "keyField", void 0);
+__decorate([property({ reflect: true })], SigveloDataTable.prototype, "selection", void 0);
+__decorate([property({ attribute: false })], SigveloDataTable.prototype, "selectedKeys", void 0);
+__decorate([property()], SigveloDataTable.prototype, "caption", void 0);
+__decorate([property({ attribute: "empty-text" })], SigveloDataTable.prototype, "emptyText", void 0);
+customElements.define("sigvelo-data-table", SigveloDataTable);
+//#endregion
+export { SigveloRowSelectEvent$1 as n, SigveloDataTable as t };

package/dist/data-table-DL5RhE0d.d.ts

@@ -0,0 +1,89 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { SigveloRowSelectEvent as SigveloRowSelectEvent$1 } from "@mcp-b/wc-support/events/row";
+
+//#region src/components/data-table/data-table.d.ts
+type DataTablePrimitive = string | number | boolean | null;
+type DataTableRow = Readonly<Record<string, DataTablePrimitive>>;
+type DataTableSelection = "none" | "single" | "multiple";
+interface DataTableColumn {
+  /** The row field displayed in this column. */
+  key: string;
+  /** The visible column heading. */
+  label: string;
+  /** Horizontal alignment for the heading and cells. */
+  align?: "start" | "center" | "end";
+}
+/**
+ * <sigvelo-data-table>
+ *
+ * @summary Presents structured rows in an accessible, responsive table with optional single or multiple selection.
+ * @tag sigvelo-data-table
+ * @documentation https://design-system.sigvelo.com/docs/components/data-table
+ * @status stable
+ * @since 1.0
+ *
+ * @event sigvelo-row-select - Emitted when a selectable row changes. The detail contains `rowKey`, `selected`, and the complete `selectedKeys` array.
+ *
+ * @csspart scroller - The horizontally scrollable table container.
+ * @csspart table - The native `<table>` element.
+ * @csspart caption - The table caption.
+ * @csspart header - The table header.
+ * @csspart header-cell - A column heading.
+ * @csspart body - The table body.
+ * @csspart row - A body row.
+ * @csspart cell - A body cell.
+ * @csspart selection-cell - A cell containing a row selection control.
+ * @csspart empty - The empty-result cell.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-data-table id="team"></sigvelo-data-table>
+ * <script type="module">
+ *   const table = document.querySelector('#team');
+ *   table.columns = [
+ *     { key: 'name', label: 'Name' },
+ *     { key: 'role', label: 'Role' },
+ *     { key: 'score', label: 'Score', align: 'end' }
+ *   ];
+ *   table.rows = [
+ *     { id: 'ada', name: 'Ada Lovelace', role: 'Engineering', score: 96 },
+ *     { id: 'grace', name: 'Grace Hopper', role: 'Engineering', score: 94 }
+ *   ];
+ * </script>
+ * ```
+ *
+ * @example Multiple selection
+ * Set `selection` to `multiple` and provide a stable `keyField`. Listen for
+ * `sigvelo-row-select` to observe selection changes.
+ *
+ * ```html
+ * <sigvelo-data-table id="selectable-team" selection="multiple"></sigvelo-data-table>
+ * ```
+ */
+declare class SigveloDataTable extends SigveloElement {
+  #private;
+  static styles: CSSResultGroup;
+  /** Column definitions, in display order. */
+  columns: readonly DataTableColumn[];
+  /** Row objects displayed by the table. */
+  rows: readonly DataTableRow[];
+  /** The row field used as its stable selection key. */
+  keyField: string;
+  /** Enables no selection, single selection, or multiple selection. */
+  selection: DataTableSelection;
+  /** The currently selected row keys. */
+  selectedKeys: readonly string[];
+  /** Optional visible table caption. */
+  caption?: string;
+  /** Message displayed when there are no rows. */
+  emptyText: string;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-data-table": SigveloDataTable;
+  }
+}
+//#endregion
+export { SigveloDataTable as a, DataTableSelection as i, DataTablePrimitive as n, SigveloRowSelectEvent$1 as o, DataTableRow as r, DataTableColumn as t };

package/dist/date-CJPmOdi9.js

@@ -0,0 +1,146 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/date/date.styles.ts
+var date_styles_default = css`
+  :host {
+    display: inline;
+  }
+`;
+//#endregion
+//#region src/components/date/date.ts
+/**
+* <sigvelo-date>
+*
+* @summary Outputs a date or time in the specified format.
+* @tag sigvelo-date
+* @documentation https://design-system.sigvelo.com/docs/components/date
+* @status stable
+* @since 1.0
+*
+* @example Default
+* ```html
+* <sigvelo-date></sigvelo-date>
+* ```
+*
+* **Note:** If you pass a string to the `date` attribute, always use the [ISO 8601 format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). Otherwise, ambiguous dates such as 01/02/2000 can be parsed as January 2 or February 1 depending on the client's locale.
+*
+* @example Simple formatting
+* This component supports most options from `Intl.DateTimeFormat()` in a declarative syntax. It's very flexible, but it can be a bit verbose to output a simple date or time with individual properties. Fortunately, there are two shortcuts you can use to easily output dates and times in desirable formats.
+*
+* The `date-style` and `time-style` attributes both accept `full`, `long`, `medium`, and `short` as options. These attributes can be used together, but they cannot be combined with other date-time formatting options.
+*
+* ```html
+* <h4>Date style</h4>
+* <sigvelo-date date-style="short" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date date-style="medium" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date date-style="long" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date date-style="full" date="2024-01-01 12:00:00"></sigvelo-date>
+*
+* <h4>Time style</h4>
+* <sigvelo-date time-style="short" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date time-style="medium" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date time-style="long" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date time-style="full" date="2024-01-01 12:00:00"></sigvelo-date>
+*
+* <h4>Date + time style</h4>
+* <sigvelo-date date-style="short" time-style="short" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date date-style="medium" time-style="medium" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date date-style="long" time-style="long" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date date-style="full" time-style="full" date="2024-01-01 12:00:00"></sigvelo-date>
+* ```
+*
+* @example Advanced formatting
+* More advanced formatting can be achieved through other formatting properties. The presence of an option tells the component to output a corresponding value.
+*
+* To show the current time with hours and minutes using a 24 hour clock, use the `hour`, `minute`, and `hour-format` attributes.
+*
+* ```html
+* <sigvelo-date hour="numeric" minute="numeric" hour-format="24"></sigvelo-date>
+* ```
+*
+* Similarly, to show a date with just the month and day, use the `month` and `day` attributes.
+*
+* ```html
+* <sigvelo-date month="long" day="numeric"></sigvelo-date>
+* ```
+*
+* You can combine options to format a more complex date. The order of the attributes doesn't matter. The output will be rendered in a logical order.
+*
+* ```html
+* <sigvelo-date weekday="long" month="short" day="numeric" year="numeric"></sigvelo-date>
+* ```
+*
+* **Note:** Refer to the [`Intl.DateTimeFormat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) documentation for more information about what options do and the values they accept.
+*
+* @example Localization
+* Set the `lang` attribute on the element to change the language.
+*
+* ```html
+* <sigvelo-date lang="es" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date lang="de" date="2024-01-01 12:00:00"></sigvelo-date><br>
+* <sigvelo-date lang="ru" date="2024-01-01 12:00:00"></sigvelo-date>
+* ```
+*
+* **Note:** This component also updates based on the page's language, which can be set using `<html lang="…">`.
+*/
+var SigveloDate = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.date = /* @__PURE__ */ new Date();
+		this.hourFormat = "auto";
+	}
+	static {
+		this.styles = [hostStyles, date_styles_default];
+	}
+	render() {
+		const date = new Date(this.date);
+		if (isNaN(date.getMilliseconds())) return "";
+		return html`<time datetime=${date.toISOString()}>${this.localize.date(date, {
+			dateStyle: this.dateStyle,
+			timeStyle: this.timeStyle,
+			hour12: this.hourFormat === "auto" ? void 0 : this.hourFormat === "12",
+			hourCycle: this.hourCycle,
+			timeZone: this.timeZone,
+			weekday: this.weekday,
+			era: this.era,
+			year: this.year,
+			month: this.month,
+			day: this.day,
+			dayPeriod: this.dayPeriod,
+			hour: this.hour,
+			minute: this.minute,
+			second: this.second,
+			fractionalSecondDigits: this.fractionalSecondDigits,
+			timeZoneName: this.timeZoneName
+		})}</time>`;
+	}
+};
+__decorate([property()], SigveloDate.prototype, "date", void 0);
+__decorate([property({ attribute: "date-style" })], SigveloDate.prototype, "dateStyle", void 0);
+__decorate([property({ attribute: "time-style" })], SigveloDate.prototype, "timeStyle", void 0);
+__decorate([property({ attribute: "hour-format" })], SigveloDate.prototype, "hourFormat", void 0);
+__decorate([property()], SigveloDate.prototype, "hourCycle", void 0);
+__decorate([property({ attribute: "time-zone" })], SigveloDate.prototype, "timeZone", void 0);
+__decorate([property()], SigveloDate.prototype, "weekday", void 0);
+__decorate([property()], SigveloDate.prototype, "era", void 0);
+__decorate([property()], SigveloDate.prototype, "year", void 0);
+__decorate([property()], SigveloDate.prototype, "month", void 0);
+__decorate([property()], SigveloDate.prototype, "day", void 0);
+__decorate([property({ attribute: "day-period" })], SigveloDate.prototype, "dayPeriod", void 0);
+__decorate([property()], SigveloDate.prototype, "hour", void 0);
+__decorate([property()], SigveloDate.prototype, "minute", void 0);
+__decorate([property()], SigveloDate.prototype, "second", void 0);
+__decorate([property({
+	attribute: "fractional-second-digits",
+	type: Number
+})], SigveloDate.prototype, "fractionalSecondDigits", void 0);
+__decorate([property({ attribute: "time-zone-name" })], SigveloDate.prototype, "timeZoneName", void 0);
+__decorate([property({ attribute: "format-matcher" })], SigveloDate.prototype, "formatMatcher", void 0);
+customElements.define("sigvelo-date", SigveloDate);
+//#endregion
+export { SigveloDate as t };