@dsn-starter-kit/components-web 1.0.0

package/src/link/Link.ts

@@ -0,0 +1,284 @@
+/**
+ * DSN Link Web Component
+ *
+ * A custom element that provides a styled anchor link with icon support.
+ * Uses the same CSS classes and design tokens as the HTML and React link components.
+ *
+ * @example
+ * ```html
+ * <dsn-link href="/about">About us</dsn-link>
+ * <dsn-link href="https://example.com" external>External (opens in new tab)</dsn-link>
+ * <dsn-link href="/dashboard" current>Dashboard</dsn-link>
+ * <dsn-link disabled>Unavailable</dsn-link>
+ * <dsn-link size="small" href="/small">Small link</dsn-link>
+ * <dsn-link size="large" href="/large">Large link</dsn-link>
+ * ```
+ */
+
+export type LinkSize = 'small' | 'default' | 'large';
+
+// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate
+import { linkStyles } from './link-styles.generated';
+
+export class DsnLink extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return ['href', 'target', 'rel', 'disabled', 'current', 'size', 'external'];
+  }
+
+  private _anchor: HTMLAnchorElement;
+  private _hintNode: Text | null = null;
+  private _hrefBackup: string | null = null;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    // Create the internal anchor element
+    this._anchor = document.createElement('a');
+    this._anchor.classList.add('dsn-link');
+    this._anchor.innerHTML =
+      '<slot name="icon-start"></slot><slot></slot><slot name="icon-end"></slot>';
+
+    // Create style element with embedded CSS
+    const style = document.createElement('style');
+    style.textContent = linkStyles;
+
+    this.shadowRoot!.appendChild(style);
+    this.shadowRoot!.appendChild(this._anchor);
+  }
+
+  connectedCallback(): void {
+    this._updateClasses();
+    this._updateHref();
+    this._updateTarget();
+    this._updateRel();
+    this._updateDisabled();
+    this._updateCurrent();
+    this._updateExternal();
+  }
+
+  attributeChangedCallback(name: string): void {
+    switch (name) {
+      case 'href':
+        this._updateHref();
+        break;
+      case 'target':
+        this._updateTarget();
+        break;
+      case 'rel':
+        this._updateRel();
+        break;
+      case 'disabled':
+        this._updateDisabled();
+        break;
+      case 'current':
+        this._updateCurrent();
+        break;
+      case 'size':
+        this._updateClasses();
+        break;
+      case 'external':
+        this._updateExternal();
+        break;
+    }
+  }
+
+  private _updateClasses(): void {
+    const classes = ['dsn-link'];
+
+    // Only add size class when explicitly set via attribute.
+    // Without a size attribute, the link inherits font from its parent,
+    // which is the expected behavior for inline usage in paragraphs.
+    if (this.hasAttribute('size')) {
+      classes.push(`dsn-link--size-${this.size}`);
+    }
+
+    this._anchor.className = classes.join(' ');
+  }
+
+  private _updateHref(): void {
+    if (this.disabled) return;
+    const href = this.getAttribute('href');
+    if (href) {
+      this._anchor.setAttribute('href', href);
+    } else {
+      this._anchor.removeAttribute('href');
+    }
+  }
+
+  private _updateTarget(): void {
+    const target = this.getAttribute('target');
+    if (target) {
+      this._anchor.setAttribute('target', target);
+    } else {
+      this._anchor.removeAttribute('target');
+    }
+  }
+
+  private _updateRel(): void {
+    const rel = this.getAttribute('rel');
+    if (rel) {
+      this._anchor.setAttribute('rel', rel);
+    } else {
+      this._anchor.removeAttribute('rel');
+    }
+  }
+
+  private _updateDisabled(): void {
+    if (this.disabled) {
+      this._hrefBackup = this._anchor.getAttribute('href');
+      this._anchor.removeAttribute('href');
+      this._anchor.setAttribute('aria-disabled', 'true');
+      this._anchor.setAttribute('tabindex', '-1');
+    } else {
+      this._anchor.removeAttribute('aria-disabled');
+      this._anchor.removeAttribute('tabindex');
+      // Restore href
+      if (this._hrefBackup) {
+        this._anchor.setAttribute('href', this._hrefBackup);
+        this._hrefBackup = null;
+      } else {
+        this._updateHref();
+      }
+    }
+  }
+
+  private _updateCurrent(): void {
+    if (this.current) {
+      this._anchor.setAttribute('aria-current', 'page');
+    } else {
+      this._anchor.removeAttribute('aria-current');
+    }
+  }
+
+  private _updateExternal(): void {
+    if (this.external) {
+      // Set target and rel if not explicitly provided
+      if (!this.getAttribute('target')) {
+        this._anchor.setAttribute('target', '_blank');
+      }
+      if (!this.getAttribute('rel')) {
+        this._anchor.setAttribute('rel', 'noopener noreferrer');
+      }
+      // Add visible hint text
+      if (!this._hintNode) {
+        this._hintNode = document.createTextNode(' (opens in new tab)');
+      }
+      this._anchor.appendChild(this._hintNode);
+    } else {
+      if (this._hintNode && this._hintNode.parentNode) {
+        this._hintNode.remove();
+      }
+      // Restore target/rel to attribute values
+      this._updateTarget();
+      this._updateRel();
+    }
+  }
+
+  // Property: href
+  get href(): string | null {
+    return this.getAttribute('href');
+  }
+
+  set href(value: string | null) {
+    if (value) {
+      this.setAttribute('href', value);
+    } else {
+      this.removeAttribute('href');
+    }
+  }
+
+  // Property: target
+  get target(): string | null {
+    return this.getAttribute('target');
+  }
+
+  set target(value: string | null) {
+    if (value) {
+      this.setAttribute('target', value);
+    } else {
+      this.removeAttribute('target');
+    }
+  }
+
+  // Property: rel
+  get rel(): string | null {
+    return this.getAttribute('rel');
+  }
+
+  set rel(value: string | null) {
+    if (value) {
+      this.setAttribute('rel', value);
+    } else {
+      this.removeAttribute('rel');
+    }
+  }
+
+  // Property: disabled
+  get disabled(): boolean {
+    return this.hasAttribute('disabled');
+  }
+
+  set disabled(value: boolean) {
+    if (value) {
+      this.setAttribute('disabled', '');
+    } else {
+      this.removeAttribute('disabled');
+    }
+  }
+
+  // Property: current
+  get current(): boolean {
+    return this.hasAttribute('current');
+  }
+
+  set current(value: boolean) {
+    if (value) {
+      this.setAttribute('current', '');
+    } else {
+      this.removeAttribute('current');
+    }
+  }
+
+  // Property: external
+  get external(): boolean {
+    return this.hasAttribute('external');
+  }
+
+  set external(value: boolean) {
+    if (value) {
+      this.setAttribute('external', '');
+    } else {
+      this.removeAttribute('external');
+    }
+  }
+
+  // Property: size
+  get size(): LinkSize {
+    return (this.getAttribute('size') as LinkSize) || 'default';
+  }
+
+  set size(value: LinkSize) {
+    this.setAttribute('size', value);
+  }
+
+  // Focus delegation
+  focus(options?: FocusOptions): void {
+    this._anchor.focus(options);
+  }
+
+  blur(): void {
+    this._anchor.blur();
+  }
+
+  click(): void {
+    this._anchor.click();
+  }
+}
+
+// Register the custom element
+export function defineLink(tagName = 'dsn-link'): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, DsnLink);
+  }
+}

package/src/link/index.ts

@@ -0,0 +1,2 @@
+export { DsnLink, defineLink } from './Link';
+export type { LinkSize } from './Link';

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

@@ -0,0 +1,3 @@
+// Auto-generated — do not edit manually.
+// Source: link.shadow.css + components-html source
+export const linkStyles = "/**\n * Shadow DOM wrapper styles for the Link Web Component.\n * The core link styles are imported from the shared HTML/CSS source.\n */\n\n:host {\n  display: inline;\n}\n\n::slotted(*) {\n  pointer-events: none;\n}\n\n/* Shared link styles - single source of truth */\n/**\n * Link Component\n * Uses component tokens for consistent styling\n */\n\n.dsn-link {\n  /* Layout */\n  display: inline-flex;\n  align-self: flex-start;\n  align-items: center;\n  gap: var(--dsn-link-gap);\n  position: relative; /* Ankerpunt voor DotBadge */\n\n  /* Typography */\n  color: var(--dsn-link-color);\n  text-decoration-line: var(--dsn-link-text-decoration-line);\n  text-decoration-color: var(--dsn-link-text-decoration-color);\n  text-decoration-thickness: var(--dsn-link-text-decoration-thickness);\n  text-underline-offset: var(--dsn-link-text-underline-offset);\n  font: inherit;\n\n  /* Interaction */\n  cursor: pointer;\n  transition:\n    color var(--dsn-transition-duration-normal)\n      var(--dsn-transition-easing-default),\n    text-decoration-color var(--dsn-transition-duration-normal)\n      var(--dsn-transition-easing-default);\n}\n\n/* Icon sizing */\n.dsn-link > .dsn-icon {\n  width: var(--dsn-link-icon-size);\n  height: var(--dsn-link-icon-size);\n  flex-shrink: 0;\n}\n\n/* Size Variants */\n.dsn-link--size-small {\n  font-size: var(--dsn-link-size-small-font-size);\n  gap: var(--dsn-link-size-small-gap);\n}\n\n.dsn-link--size-default {\n  font-size: var(--dsn-link-size-default-font-size);\n  gap: var(--dsn-link-size-default-gap);\n}\n\n.dsn-link--size-large {\n  font-size: var(--dsn-link-size-large-font-size);\n  gap: var(--dsn-link-size-large-gap);\n}\n\n/* Icon sizing per link size */\n.dsn-link--size-small > .dsn-icon {\n  width: var(--dsn-link-size-small-icon-size);\n  height: var(--dsn-link-size-small-icon-size);\n}\n\n.dsn-link--size-default > .dsn-icon {\n  width: var(--dsn-link-size-default-icon-size);\n  height: var(--dsn-link-size-default-icon-size);\n}\n\n.dsn-link--size-large > .dsn-icon {\n  width: var(--dsn-link-size-large-icon-size);\n  height: var(--dsn-link-size-large-icon-size);\n}\n\n/* Hover */\n.dsn-link:hover:not([aria-disabled='true']) {\n  color: var(--dsn-link-hover-color);\n  text-decoration-line: var(--dsn-link-hover-text-decoration-line);\n}\n\n/* Active */\n.dsn-link:active:not([aria-disabled='true']) {\n  color: var(--dsn-link-active-color);\n}\n\n/* Focus */\n.dsn-link:focus-visible {\n  background-color: var(--dsn-focus-background-color);\n  color: var(--dsn-focus-color);\n  text-decoration: none;\n  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)\n    var(--dsn-focus-outline-color);\n  outline-offset: var(--dsn-focus-outline-offset);\n  box-shadow: 0 0 0\n    calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))\n    var(--dsn-focus-inverse-outline-color);\n  box-decoration-break: clone;\n}\n\n/* Current page */\n.dsn-link[aria-current='page'] {\n  cursor: default;\n  text-decoration-line: none;\n}\n\n/* Disabled */\n.dsn-link[aria-disabled='true'] {\n  color: var(--dsn-link-disabled-color);\n  text-decoration-line: none;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n";

package/src/link/link.shadow.css

@@ -0,0 +1,15 @@
+/**
+ * Shadow DOM wrapper styles for the Link Web Component.
+ * The core link styles are imported from the shared HTML/CSS source.
+ */
+
+:host {
+  display: inline;
+}
+
+::slotted(*) {
+  pointer-events: none;
+}
+
+/* Shared link styles - single source of truth */
+@import '../../../components-html/src/link/link.css';

package/src/ordered-list/OrderedList.test.ts

@@ -0,0 +1,97 @@
+import { describe, it, expect, beforeAll, beforeEach } from 'vitest';
+import { DsnOrderedList, defineOrderedList } from './OrderedList';
+
+// Register the custom element once for all tests
+beforeAll(() => {
+  defineOrderedList();
+});
+
+function createElement(attrs: Record<string, string> = {}): DsnOrderedList {
+  const el = document.createElement('dsn-ordered-list') as DsnOrderedList;
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, value);
+  }
+  document.body.appendChild(el);
+  return el;
+}
+
+function getInternalList(el: DsnOrderedList): HTMLOListElement {
+  return el.shadowRoot!.querySelector('ol')!;
+}
+
+describe('DsnOrderedList', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('rendering', () => {
+    it('creates a shadow root', () => {
+      const el = createElement();
+      expect(el.shadowRoot).not.toBeNull();
+    });
+
+    it('renders an internal ol element', () => {
+      const el = createElement();
+      const list = getInternalList(el);
+      expect(list).toBeInstanceOf(HTMLOListElement);
+    });
+
+    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-ordered-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-ordered-list class to internal list', () => {
+      const el = createElement();
+      const list = getInternalList(el);
+      expect(list.classList.contains('dsn-ordered-list')).toBe(true);
+    });
+  });
+
+  describe('start attribute', () => {
+    it('sets start on internal ol', () => {
+      const el = createElement({ start: '5' });
+      const list = getInternalList(el);
+      expect(list.getAttribute('start')).toBe('5');
+    });
+
+    it('defaults to no start attribute', () => {
+      const el = createElement();
+      const list = getInternalList(el);
+      expect(list.hasAttribute('start')).toBe(false);
+    });
+
+    it('updates internal ol when start changes', () => {
+      const el = createElement({ start: '3' });
+      const list = getInternalList(el);
+      expect(list.getAttribute('start')).toBe('3');
+
+      el.start = 10;
+      expect(list.getAttribute('start')).toBe('10');
+    });
+
+    it('returns 1 from start property when no attribute set', () => {
+      const el = createElement();
+      expect(el.start).toBe(1);
+    });
+  });
+});
+
+describe('defineOrderedList', () => {
+  it('does not throw when called with an already-registered tag', () => {
+    expect(() => defineOrderedList('dsn-ordered-list')).not.toThrow();
+  });
+
+  it('registers a custom element with the default tag name', () => {
+    const el = document.createElement('dsn-ordered-list');
+    expect(el).toBeInstanceOf(DsnOrderedList);
+  });
+});

package/src/ordered-list/OrderedList.ts

@@ -0,0 +1,84 @@
+/**
+ * DSN Ordered List Web Component
+ *
+ * A custom element that provides a styled ordered list with numbered markers.
+ * Uses the same CSS classes and design tokens as the HTML and React components.
+ *
+ * @example
+ * ```html
+ * <dsn-ordered-list>
+ *   <li>First step</li>
+ *   <li>Second step</li>
+ *   <li>Third step</li>
+ * </dsn-ordered-list>
+ *
+ * <dsn-ordered-list start="5">
+ *   <li>Fifth step</li>
+ *   <li>Sixth step</li>
+ * </dsn-ordered-list>
+ * ```
+ */
+
+// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate
+import { orderedListStyles } from './ordered-list-styles.generated';
+
+export class DsnOrderedList extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return ['start'];
+  }
+
+  private _list: HTMLOListElement;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    // Create the internal list element
+    this._list = document.createElement('ol');
+    this._list.classList.add('dsn-ordered-list');
+    this._list.innerHTML = '<slot></slot>';
+
+    // Create style element with embedded CSS
+    const style = document.createElement('style');
+    style.textContent = orderedListStyles;
+
+    this.shadowRoot!.appendChild(style);
+    this.shadowRoot!.appendChild(this._list);
+  }
+
+  connectedCallback(): void {
+    this._list.className = 'dsn-ordered-list';
+    this._updateStart();
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (name === 'start') {
+      this._updateStart();
+    }
+  }
+
+  private _updateStart(): void {
+    const start = this.getAttribute('start');
+    if (start) {
+      this._list.setAttribute('start', start);
+    } else {
+      this._list.removeAttribute('start');
+    }
+  }
+
+  // Property: start
+  get start(): number {
+    return parseInt(this.getAttribute('start') || '1', 10);
+  }
+
+  set start(value: number) {
+    this.setAttribute('start', String(value));
+  }
+}
+
+// Register the custom element
+export function defineOrderedList(tagName = 'dsn-ordered-list'): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, DsnOrderedList);
+  }
+}

package/src/ordered-list/index.ts

@@ -0,0 +1 @@
+export { DsnOrderedList, defineOrderedList } from './OrderedList';

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

@@ -0,0 +1,3 @@
+// Auto-generated — do not edit manually.
+// Source: ordered-list.shadow.css + components-html source
+export const orderedListStyles = "/**\n * Shadow DOM wrapper styles for the OrderedList 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 ordered list styles - single source of truth */\n/**\n * Ordered List Component\n * Uses component tokens for consistent styling.\n */\n\n.dsn-ordered-list {\n  font-family: var(--dsn-ordered-list-font-family);\n  font-weight: var(--dsn-ordered-list-font-weight);\n  color: var(--dsn-ordered-list-color);\n  font-size: var(--dsn-ordered-list-font-size);\n  line-height: var(--dsn-ordered-list-line-height);\n  max-inline-size: var(--dsn-ordered-list-max-inline-size);\n  padding-inline-start: var(--dsn-ordered-list-padding-inline-start);\n  margin-block-start: 0;\n  margin-block-end: var(--dsn-ordered-list-margin-block-end);\n  list-style-type: decimal;\n}\n\n/* Number markers */\n.dsn-ordered-list ::marker {\n  color: var(--dsn-ordered-list-marker-color);\n}\n\n/* Spacing between list items */\n.dsn-ordered-list > li {\n  margin-block-end: var(--dsn-ordered-list-gap);\n}\n\n.dsn-ordered-list > li:last-child {\n  margin-block-end: 0;\n}\n\n";

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

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

package/src/paragraph/Paragraph.test.ts

@@ -0,0 +1,143 @@
+import { describe, it, expect, beforeAll, beforeEach } from 'vitest';
+import { DsnParagraph, defineParagraph } from './Paragraph';
+
+// Register the custom element once for all tests
+beforeAll(() => {
+  defineParagraph();
+});
+
+function createElement(attrs: Record<string, string> = {}): DsnParagraph {
+  const el = document.createElement('dsn-paragraph') as DsnParagraph;
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, value);
+  }
+  document.body.appendChild(el);
+  return el;
+}
+
+function getInternalParagraph(el: DsnParagraph): HTMLParagraphElement {
+  return el.shadowRoot!.querySelector('p')!;
+}
+
+describe('DsnParagraph', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('rendering', () => {
+    it('creates a shadow root', () => {
+      const el = createElement();
+      expect(el.shadowRoot).not.toBeNull();
+    });
+
+    it('renders an internal paragraph element', () => {
+      const el = createElement();
+      const p = getInternalParagraph(el);
+      expect(p).toBeInstanceOf(HTMLParagraphElement);
+    });
+
+    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-paragraph');
+    });
+
+    it('renders a slot for content projection', () => {
+      const el = createElement();
+      const slot = el.shadowRoot!.querySelector('slot');
+      expect(slot).not.toBeNull();
+    });
+  });
+
+  describe('variant attribute', () => {
+    it('defaults to "default" variant — no modifier class added', () => {
+      const el = createElement();
+      const p = getInternalParagraph(el);
+      expect(p.className).toContain('dsn-paragraph');
+      expect(p.className).not.toContain('dsn-paragraph--default');
+    });
+
+    it('applies "lead" variant', () => {
+      const el = createElement({ variant: 'lead' });
+      const p = getInternalParagraph(el);
+      expect(p.className).toContain('dsn-paragraph--lead');
+    });
+
+    it('applies "small-print" variant', () => {
+      const el = createElement({ variant: 'small-print' });
+      const p = getInternalParagraph(el);
+      expect(p.className).toContain('dsn-paragraph--small-print');
+    });
+
+    it('updates classes when variant changes', () => {
+      const el = createElement({ variant: 'default' });
+      const p = getInternalParagraph(el);
+      expect(p.className).not.toContain('dsn-paragraph--default');
+
+      el.setAttribute('variant', 'lead');
+      expect(p.className).toContain('dsn-paragraph--lead');
+      expect(p.className).not.toContain('dsn-paragraph--default');
+    });
+  });
+
+  describe('variant property', () => {
+    it('returns "default" when no attribute set', () => {
+      const el = createElement();
+      expect(el.variant).toBe('default');
+    });
+
+    it('reflects the attribute value', () => {
+      const el = createElement({ variant: 'lead' });
+      expect(el.variant).toBe('lead');
+    });
+
+    it('sets the attribute when property is set', () => {
+      const el = createElement();
+      el.variant = 'small-print';
+      expect(el.getAttribute('variant')).toBe('small-print');
+    });
+
+    it('updates classes when property is set', () => {
+      const el = createElement();
+      const p = getInternalParagraph(el);
+
+      el.variant = 'lead';
+      expect(p.className).toContain('dsn-paragraph--lead');
+    });
+  });
+
+  describe('base class', () => {
+    it('always includes dsn-paragraph base class', () => {
+      const el = createElement();
+      const p = getInternalParagraph(el);
+      expect(p.className).toContain('dsn-paragraph');
+    });
+
+    it('includes base class with lead variant', () => {
+      const el = createElement({ variant: 'lead' });
+      const p = getInternalParagraph(el);
+      expect(p.className).toContain('dsn-paragraph');
+      expect(p.className).toContain('dsn-paragraph--lead');
+    });
+
+    it('includes base class with small-print variant', () => {
+      const el = createElement({ variant: 'small-print' });
+      const p = getInternalParagraph(el);
+      expect(p.className).toContain('dsn-paragraph');
+      expect(p.className).toContain('dsn-paragraph--small-print');
+    });
+  });
+
+  describe('custom element registration', () => {
+    it('is defined as dsn-paragraph', () => {
+      expect(customElements.get('dsn-paragraph')).toBe(DsnParagraph);
+    });
+
+    it('does not re-register if already defined', () => {
+      // Should not throw
+      defineParagraph();
+      expect(customElements.get('dsn-paragraph')).toBe(DsnParagraph);
+    });
+  });
+});