@dsn-starter-kit/components-web 1.0.0

package/src/paragraph/Paragraph.ts

@@ -0,0 +1,77 @@
+/**
+ * DSN Paragraph Web Component
+ *
+ * A custom element that provides a styled paragraph with multiple variants.
+ * Uses the same CSS classes and design tokens as the HTML and React paragraph components.
+ *
+ * @example
+ * ```html
+ * <dsn-paragraph>Default body text</dsn-paragraph>
+ * <dsn-paragraph variant="lead">Introductory text</dsn-paragraph>
+ * <dsn-paragraph variant="small-print">Terms and conditions apply.</dsn-paragraph>
+ * ```
+ */
+
+export type ParagraphVariant = 'default' | 'lead' | 'small-print';
+
+// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate
+import { paragraphStyles } from './paragraph-styles.generated';
+
+export class DsnParagraph extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return ['variant'];
+  }
+
+  private _paragraph: HTMLParagraphElement;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    // Create the internal paragraph element
+    this._paragraph = document.createElement('p');
+    this._paragraph.innerHTML = '<slot></slot>';
+
+    // Create style element with embedded CSS
+    const style = document.createElement('style');
+    style.textContent = paragraphStyles;
+
+    this.shadowRoot!.appendChild(style);
+    this.shadowRoot!.appendChild(this._paragraph);
+  }
+
+  connectedCallback(): void {
+    this._updateClasses();
+  }
+
+  attributeChangedCallback(): void {
+    this._updateClasses();
+  }
+
+  private _updateClasses(): void {
+    const variant = this.variant;
+
+    const classes = [
+      'dsn-paragraph',
+      variant !== 'default' && `dsn-paragraph--${variant}`,
+    ].filter(Boolean) as string[];
+
+    this._paragraph.className = classes.join(' ');
+  }
+
+  // Property: variant
+  get variant(): ParagraphVariant {
+    return (this.getAttribute('variant') as ParagraphVariant) || 'default';
+  }
+
+  set variant(value: ParagraphVariant) {
+    this.setAttribute('variant', value);
+  }
+}
+
+// Register the custom element
+export function defineParagraph(tagName = 'dsn-paragraph'): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, DsnParagraph);
+  }
+}

package/src/paragraph/index.ts

@@ -0,0 +1,2 @@
+export { DsnParagraph, defineParagraph } from './Paragraph';
+export type { ParagraphVariant } from './Paragraph';

package/src/paragraph/paragraph-styles.generated.ts

@@ -0,0 +1,3 @@
+// Auto-generated — do not edit manually.
+// Source: paragraph.shadow.css + components-html source
+export const paragraphStyles = "/**\n * Shadow DOM wrapper styles for the Paragraph Web Component.\n * The core paragraph styles are imported from the shared HTML/CSS source.\n */\n\n:host {\n  display: block;\n}\n\n/* Shared paragraph styles - single source of truth */\n/**\n * Paragraph Component\n * Uses component tokens for consistent styling\n *\n * Base class includes the default variant styles — class=\"dsn-paragraph\" is sufficient\n * for the most common case. Variant modifiers (lead, small-print) override what differs.\n */\n\n.dsn-paragraph {\n  font-family: var(--dsn-paragraph-font-family);\n  font-weight: var(--dsn-paragraph-font-weight);\n  color: var(--dsn-paragraph-color);\n  max-inline-size: var(--dsn-paragraph-max-inline-size);\n  margin-block-start: 0;\n  font-size: var(--dsn-paragraph-default-font-size);\n  line-height: var(--dsn-paragraph-default-line-height);\n  margin-block-end: var(--dsn-paragraph-default-margin-block-end);\n}\n\n/* Lead Variant */\n.dsn-paragraph--lead {\n  font-size: var(--dsn-paragraph-lead-font-size);\n  line-height: var(--dsn-paragraph-lead-line-height);\n  margin-block-end: var(--dsn-paragraph-lead-margin-block-end);\n}\n\n/* Small Print Variant */\n.dsn-paragraph--small-print {\n  font-size: var(--dsn-paragraph-small-print-font-size);\n  line-height: var(--dsn-paragraph-small-print-line-height);\n  margin-block-end: var(--dsn-paragraph-small-print-margin-block-end);\n}\n\n";

package/src/paragraph/paragraph.shadow.css

@@ -0,0 +1,11 @@
+/**
+ * Shadow DOM wrapper styles for the Paragraph Web Component.
+ * The core paragraph styles are imported from the shared HTML/CSS source.
+ */
+
+:host {
+  display: block;
+}
+
+/* Shared paragraph styles - single source of truth */
+@import '../../../components-html/src/paragraph/paragraph.css';

package/src/unordered-list/UnorderedList.test.ts

@@ -0,0 +1,66 @@
+import { describe, it, expect, beforeAll, beforeEach } from 'vitest';
+import { DsnUnorderedList, defineUnorderedList } from './UnorderedList';
+
+// Register the custom element once for all tests
+beforeAll(() => {
+  defineUnorderedList();
+});
+
+function createElement(): DsnUnorderedList {
+  const el = document.createElement('dsn-unordered-list') as DsnUnorderedList;
+  document.body.appendChild(el);
+  return el;
+}
+
+function getInternalList(el: DsnUnorderedList): HTMLUListElement {
+  return el.shadowRoot!.querySelector('ul')!;
+}
+
+describe('DsnUnorderedList', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('rendering', () => {
+    it('creates a shadow root', () => {
+      const el = createElement();
+      expect(el.shadowRoot).not.toBeNull();
+    });
+
+    it('renders an internal ul element', () => {
+      const el = createElement();
+      const list = getInternalList(el);
+      expect(list).toBeInstanceOf(HTMLUListElement);
+    });
+
+    it('renders a style element in shadow DOM', () => {
+      const el = createElement();
+      const style = el.shadowRoot!.querySelector('style');
+      expect(style).not.toBeNull();
+      expect(style!.textContent).toContain('.dsn-unordered-list');
+    });
+
+    it('renders a default slot for content projection', () => {
+      const el = createElement();
+      const slot = el.shadowRoot!.querySelector('slot');
+      expect(slot).not.toBeNull();
+    });
+
+    it('applies dsn-unordered-list class to internal list', () => {
+      const el = createElement();
+      const list = getInternalList(el);
+      expect(list.classList.contains('dsn-unordered-list')).toBe(true);
+    });
+  });
+});
+
+describe('defineUnorderedList', () => {
+  it('does not throw when called with an already-registered tag', () => {
+    expect(() => defineUnorderedList('dsn-unordered-list')).not.toThrow();
+  });
+
+  it('registers a custom element with the default tag name', () => {
+    const el = document.createElement('dsn-unordered-list');
+    expect(el).toBeInstanceOf(DsnUnorderedList);
+  });
+});

package/src/unordered-list/UnorderedList.ts

@@ -0,0 +1,50 @@
+/**
+ * DSN Unordered List Web Component
+ *
+ * A custom element that provides a styled unordered list with accent-colored bullet markers.
+ * Uses the same CSS classes and design tokens as the HTML and React components.
+ *
+ * @example
+ * ```html
+ * <dsn-unordered-list>
+ *   <li>First item</li>
+ *   <li>Second item</li>
+ *   <li>Third item</li>
+ * </dsn-unordered-list>
+ * ```
+ */
+
+// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate
+import { unorderedListStyles } from './unordered-list-styles.generated';
+
+export class DsnUnorderedList extends HTMLElement {
+  private _list: HTMLUListElement;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    // Create the internal list element
+    this._list = document.createElement('ul');
+    this._list.classList.add('dsn-unordered-list');
+    this._list.innerHTML = '<slot></slot>';
+
+    // Create style element with embedded CSS
+    const style = document.createElement('style');
+    style.textContent = unorderedListStyles;
+
+    this.shadowRoot!.appendChild(style);
+    this.shadowRoot!.appendChild(this._list);
+  }
+
+  connectedCallback(): void {
+    this._list.className = 'dsn-unordered-list';
+  }
+}
+
+// Register the custom element
+export function defineUnorderedList(tagName = 'dsn-unordered-list'): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, DsnUnorderedList);
+  }
+}

package/src/unordered-list/index.ts

@@ -0,0 +1 @@
+export { DsnUnorderedList, defineUnorderedList } from './UnorderedList';

package/src/unordered-list/unordered-list-styles.generated.ts

@@ -0,0 +1,3 @@
+// Auto-generated — do not edit manually.
+// Source: unordered-list.shadow.css + components-html source
+export const unorderedListStyles = "/**\n * Shadow DOM wrapper styles for the UnorderedList Web Component.\n * The core styles are imported from the shared HTML/CSS source.\n */\n\n:host {\n  display: block;\n}\n\n/* Shared unordered list styles - single source of truth */\n/**\n * Unordered List Component\n * Uses component tokens for consistent styling.\n * Bullet markers are colored via the marker-color token.\n */\n\n.dsn-unordered-list {\n  font-family: var(--dsn-unordered-list-font-family);\n  font-weight: var(--dsn-unordered-list-font-weight);\n  color: var(--dsn-unordered-list-color);\n  font-size: var(--dsn-unordered-list-font-size);\n  line-height: var(--dsn-unordered-list-line-height);\n  max-inline-size: var(--dsn-unordered-list-max-inline-size);\n  padding-inline-start: var(--dsn-unordered-list-padding-inline-start);\n  margin-block-start: 0;\n  margin-block-end: var(--dsn-unordered-list-margin-block-end);\n  list-style-type: disc;\n}\n\n/* Colored bullet markers */\n.dsn-unordered-list ::marker {\n  color: var(--dsn-unordered-list-marker-color);\n}\n\n/* Spacing between list items */\n.dsn-unordered-list > li {\n  margin-block-end: var(--dsn-unordered-list-gap);\n}\n\n.dsn-unordered-list > li:last-child {\n  margin-block-end: 0;\n}\n\n";

package/src/unordered-list/unordered-list.shadow.css

@@ -0,0 +1,11 @@
+/**
+ * Shadow DOM wrapper styles for the UnorderedList Web Component.
+ * The core styles are imported from the shared HTML/CSS source.
+ */
+
+:host {
+  display: block;
+}
+
+/* Shared unordered list styles - single source of truth */
+@import '../../../components-html/src/unordered-list/unordered-list.css';