@dsn-starter-kit/components-web 1.0.0

package/src/icon/icon-paths.generated.ts

@@ -0,0 +1,55 @@
+// Auto-generated — do not edit manually.
+// Run: node scripts/build-css.js
+export const iconPaths: Record<string, string[]> = {
+  'alert-triangle': ["M0 0h24v24H0z","M12 9v4","M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0","M12 16h.01"],
+  'archive': ["M0 0h24v24H0z","M3 6a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2","M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10","M10 12l4 0"],
+  'arrow-down': ["M0 0h24v24H0z","M12 5l0 14","M18 13l-6 6","M6 13l6 6"],
+  'arrow-left': ["M5 12l14 0","M5 12l6 6","M5 12l6 -6"],
+  'arrow-narrow-down': ["M0 0h24v24H0z","M12 5l0 14","M16 15l-4 4","M8 15l4 4"],
+  'arrow-narrow-up': ["M0 0h24v24H0z","M12 5l0 14","M16 9l-4 -4","M8 9l4 -4"],
+  'arrow-right': ["M5 12l14 0","M13 18l6 -6","M13 6l6 6"],
+  'arrow-up': ["M0 0h24v24H0z","M12 5l0 14","M18 11l-6 -6","M6 11l6 -6"],
+  'arrows-sort': ["M0 0h24v24H0z","M3 9l4 -4l4 4m-4 -4v14","M21 15l-4 4l-4 -4m4 4v-14"],
+  'bell': ["M0 0h24v24H0z","M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6","M9 17v1a3 3 0 0 0 6 0v-1"],
+  'calendar-event': ["M0 0h24v24H0z","M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12","M16 3l0 4","M8 3l0 4","M4 11l16 0","M8 15h2v2h-2l0 -2"],
+  'check': ["M5 12l5 5l10 -10"],
+  'chevron-down': ["M6 9l6 6l6 -6"],
+  'chevron-left': ["M15 6l-6 6l6 6"],
+  'chevron-right': ["M9 6l6 6l-6 6"],
+  'chevron-up': ["M6 15l6 -6l6 6"],
+  'circle-check': ["M0 0h24v24H0z","M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0","M9 12l2 2l4 -4"],
+  'clock': ["M0 0h24v24H0z","M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0","M12 7v5l3 3"],
+  'dots-vertical': ["M0 0h24v24H0z","M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0","M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0","M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"],
+  'download': ["M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2","M7 11l5 5l5 -5","M12 4l0 12"],
+  'edit': ["M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1","M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z","M16 5l3 3"],
+  'exclamation-circle': ["M0 0h24v24H0z","M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0","M12 9v4","M12 16v.01"],
+  'external-link': ["M0 0h24v24H0z","M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6","M11 13l9 -9","M15 4h5v5"],
+  'eye': ["M0 0h24v24H0z","M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0","M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"],
+  'file-description': ["M0 0h24v24H0z","M14 3v4a1 1 0 0 0 1 1h4","M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2","M9 17h6","M9 13h6"],
+  'folder': ["M0 0h24v24H0z","M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"],
+  'heart-filled': ["M0 0h24v24H0z","M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z"],
+  'heart': ["M0 0h24v24H0z","M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"],
+  'home': ["M5 12l-2 0l9 -9l9 9l-2 0","M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7","M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"],
+  'info-circle': ["M0 0h24v24H0z","M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0","M12 9h.01","M11 12h1v4h1"],
+  'loader': ["M0 0h24v24H0z","M12 6l0 -3","M16.25 7.75l2.15 -2.15","M18 12l3 0","M16.25 16.25l2.15 2.15","M12 18l0 3","M7.75 16.25l-2.15 2.15","M6 12l-3 0","M7.75 7.75l-2.15 -2.15"],
+  'mail': ["M0 0h24v24H0z","M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10","M3 7l9 6l9 -6"],
+  'menu': ["M4 6l16 0","M4 12l16 0","M4 18l16 0"],
+  'message-circle': ["M0 0h24v24H0z","M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"],
+  'minus': ["M5 12l14 0"],
+  'paperclip': ["M0 0h24v24H0z","M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5"],
+  'pencil': ["M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4","M13.5 6.5l4 4"],
+  'photo': ["M0 0h24v24H0z","M15 8h.01","M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12","M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5","M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"],
+  'plus': ["M12 5l0 14","M5 12l14 0"],
+  'printer': ["M0 0h24v24H0z","M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2","M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4","M7 15a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2l0 -4"],
+  'search': ["M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0","M21 21l-6 -6"],
+  'selector': ["M0 0h24v24H0z","M8 9l4 -4l4 4","M16 15l-4 4l-4 -4"],
+  'settings': ["M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z","M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"],
+  'sort-ascending': ["M0 0h24v24H0z","M4 6l7 0","M4 12l7 0","M4 18l9 0","M15 9l3 -3l3 3","M18 6l0 12"],
+  'sort-descending': ["M0 0h24v24H0z","M4 6l9 0","M4 12l7 0","M4 18l7 0","M15 15l3 3l3 -3","M18 6l0 12"],
+  'star-filled': ["M0 0h24v24H0z","M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"],
+  'star': ["M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"],
+  'trash': ["M4 7l16 0","M10 11l0 6","M14 11l0 6","M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12","M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"],
+  'upload': ["M0 0h24v24H0z","M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2","M7 9l5 -5l5 5","M12 4l0 12"],
+  'user': ["M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0","M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"],
+  'x': ["M18 6l-12 12","M6 6l12 12"],
+};

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

@@ -0,0 +1,3 @@
+// Auto-generated — do not edit manually.
+// Source: icon.shadow.css + components-html source
+export const iconStyles = "/**\n * Shadow DOM wrapper styles for the Icon Web Component.\n * The core icon styles are imported from the shared HTML/CSS source.\n */\n\n:host {\n  display: inline-block;\n  vertical-align: middle;\n  line-height: 0;\n}\n\n/* Shared icon styles - single source of truth */\n/**\n * Icon Component Styles\n * Uses design tokens for sizing (coupled to typography)\n *\n * Usage:\n *   <svg class=\"dsn-icon dsn-icon--lg\" ...>\n *     <use href=\"...\" />\n *   </svg>\n */\n\n.dsn-icon {\n  /* Base styles */\n  display: inline-block;\n  vertical-align: middle;\n  flex-shrink: 0;\n\n  /* Default size (md) */\n  width: var(--dsn-icon-size-md);\n  height: var(--dsn-icon-size-md);\n}\n\n/* Size Variants - Using design tokens */\n.dsn-icon--sm {\n  width: var(--dsn-icon-size-sm);\n  height: var(--dsn-icon-size-sm);\n}\n\n.dsn-icon--lg {\n  width: var(--dsn-icon-size-lg);\n  height: var(--dsn-icon-size-lg);\n}\n\n.dsn-icon--xl {\n  width: var(--dsn-icon-size-xl);\n  height: var(--dsn-icon-size-xl);\n}\n\n.dsn-icon--2xl {\n  width: var(--dsn-icon-size-2xl);\n  height: var(--dsn-icon-size-2xl);\n}\n\n.dsn-icon--3xl {\n  width: var(--dsn-icon-size-3xl);\n  height: var(--dsn-icon-size-3xl);\n}\n\n.dsn-icon--4xl {\n  width: var(--dsn-icon-size-4xl);\n  height: var(--dsn-icon-size-4xl);\n}\n\n";

package/src/icon/icon.shadow.css

@@ -0,0 +1,13 @@
+/**
+ * Shadow DOM wrapper styles for the Icon Web Component.
+ * The core icon styles are imported from the shared HTML/CSS source.
+ */
+
+:host {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 0;
+}
+
+/* Shared icon styles - single source of truth */
+@import '../../../components-html/src/icon/icon.css';

package/src/icon/index.ts

@@ -0,0 +1,2 @@
+export { DsnIcon, defineIcon } from './Icon';
+export type { IconSize, IconName } from './Icon';

package/src/index.ts

@@ -0,0 +1,83 @@
+/**
+ * @dsn-starter-kit/components-web
+ * Web Components for the design system
+ *
+ * This package exports Web Components that can be registered manually or all at once.
+ * Components are NOT auto-registered on import - you must explicitly register them.
+ *
+ * @example Register all components at once
+ * ```ts
+ * import { defineAllComponents } from '@dsn-starter-kit/components-web';
+ * defineAllComponents();
+ * ```
+ *
+ * @example Register specific components
+ * ```ts
+ * import { defineButton, defineIcon } from '@dsn-starter-kit/components-web';
+ * defineButton();
+ * defineIcon();
+ * ```
+ *
+ * @example Register with custom tag names
+ * ```ts
+ * import { defineButton } from '@dsn-starter-kit/components-web';
+ * defineButton('my-custom-button');
+ * ```
+ */
+
+// Internal imports for defineAllComponents
+import { defineButton as _defineButton } from './button';
+import { defineIcon as _defineIcon } from './icon';
+import { defineParagraph as _defineParagraph } from './paragraph';
+import { defineHeading as _defineHeading } from './heading';
+import { defineLink as _defineLink } from './link';
+import { defineUnorderedList as _defineUnorderedList } from './unordered-list';
+import { defineOrderedList as _defineOrderedList } from './ordered-list';
+
+// Button
+export { DsnButton, defineButton } from './button';
+export type { ButtonVariant, ButtonSize } from './button';
+
+// Icon
+export { DsnIcon, defineIcon } from './icon';
+export type { IconSize, IconName } from './icon';
+
+// Paragraph
+export { DsnParagraph, defineParagraph } from './paragraph';
+export type { ParagraphVariant } from './paragraph';
+
+// Heading
+export { DsnHeading, defineHeading } from './heading';
+export type { HeadingLevel, HeadingAppearance } from './heading';
+
+// Link
+export { DsnLink, defineLink } from './link';
+
+// Unordered List
+export { DsnUnorderedList, defineUnorderedList } from './unordered-list';
+
+// Ordered List
+export { DsnOrderedList, defineOrderedList } from './ordered-list';
+
+/**
+ * Register all components with their default tag names.
+ * Call this once in your application entry point.
+ *
+ * Default tag names:
+ * - dsn-button
+ * - dsn-icon
+ * - dsn-paragraph
+ * - dsn-heading
+ * - dsn-link
+ * - dsn-unordered-list
+ * - dsn-ordered-list
+ */
+export function defineAllComponents(): void {
+  _defineButton();
+  _defineIcon();
+  _defineParagraph();
+  _defineHeading();
+  _defineLink();
+  _defineUnorderedList();
+  _defineOrderedList();
+}

package/src/link/Link.test.ts

@@ -0,0 +1,309 @@
+import { describe, it, expect, beforeAll, beforeEach, vi } from 'vitest';
+import { DsnLink, defineLink } from './Link';
+
+// Register the custom element once for all tests
+beforeAll(() => {
+  defineLink();
+});
+
+function createElement(attrs: Record<string, string> = {}): DsnLink {
+  const el = document.createElement('dsn-link') as DsnLink;
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, value);
+  }
+  document.body.appendChild(el);
+  return el;
+}
+
+function getInternalAnchor(el: DsnLink): HTMLAnchorElement {
+  return el.shadowRoot!.querySelector('a')!;
+}
+
+describe('DsnLink', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('rendering', () => {
+    it('creates a shadow root', () => {
+      const el = createElement();
+      expect(el.shadowRoot).not.toBeNull();
+    });
+
+    it('renders an internal anchor element', () => {
+      const el = createElement();
+      const anchor = getInternalAnchor(el);
+      expect(anchor).toBeInstanceOf(HTMLAnchorElement);
+    });
+
+    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-link');
+    });
+
+    it('renders a default slot for content projection', () => {
+      const el = createElement();
+      const slot = el.shadowRoot!.querySelector('slot:not([name])');
+      expect(slot).not.toBeNull();
+    });
+
+    it('renders an icon-start named slot', () => {
+      const el = createElement();
+      const slot = el.shadowRoot!.querySelector('slot[name="icon-start"]');
+      expect(slot).not.toBeNull();
+    });
+
+    it('renders an icon-end named slot', () => {
+      const el = createElement();
+      const slot = el.shadowRoot!.querySelector('slot[name="icon-end"]');
+      expect(slot).not.toBeNull();
+    });
+
+    it('renders slots in correct order: icon-start, default, icon-end', () => {
+      const el = createElement();
+      const anchor = getInternalAnchor(el);
+      const slots = anchor.querySelectorAll('slot');
+      expect(slots).toHaveLength(3);
+      expect(slots[0].getAttribute('name')).toBe('icon-start');
+      expect(slots[1].getAttribute('name')).toBeNull();
+      expect(slots[2].getAttribute('name')).toBe('icon-end');
+    });
+
+    it('applies dsn-link class to internal anchor', () => {
+      const el = createElement();
+      const anchor = getInternalAnchor(el);
+      expect(anchor.classList.contains('dsn-link')).toBe(true);
+    });
+  });
+
+  describe('href attribute', () => {
+    it('sets href on internal anchor', () => {
+      const el = createElement({ href: '/about' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('href')).toBe('/about');
+    });
+
+    it('defaults to no href', () => {
+      const el = createElement();
+      const anchor = getInternalAnchor(el);
+      expect(anchor.hasAttribute('href')).toBe(false);
+    });
+
+    it('updates internal anchor when href changes', () => {
+      const el = createElement({ href: '/about' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('href')).toBe('/about');
+
+      el.href = '/contact';
+      expect(anchor.getAttribute('href')).toBe('/contact');
+    });
+
+    it('removes href from internal anchor when set to null', () => {
+      const el = createElement({ href: '/about' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('href')).toBe('/about');
+
+      el.href = null;
+      expect(anchor.hasAttribute('href')).toBe(false);
+    });
+  });
+
+  describe('target attribute', () => {
+    it('sets target on internal anchor', () => {
+      const el = createElement({ href: '/about', target: '_blank' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('target')).toBe('_blank');
+    });
+
+    it('defaults to no target', () => {
+      const el = createElement();
+      const anchor = getInternalAnchor(el);
+      expect(anchor.hasAttribute('target')).toBe(false);
+    });
+  });
+
+  describe('rel attribute', () => {
+    it('sets rel on internal anchor', () => {
+      const el = createElement({ href: '/about', rel: 'noopener noreferrer' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('rel')).toBe('noopener noreferrer');
+    });
+
+    it('defaults to no rel', () => {
+      const el = createElement();
+      const anchor = getInternalAnchor(el);
+      expect(anchor.hasAttribute('rel')).toBe(false);
+    });
+  });
+
+  describe('disabled state', () => {
+    it('sets aria-disabled on internal anchor when disabled', () => {
+      const el = createElement({ href: '/about', disabled: '' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('aria-disabled')).toBe('true');
+    });
+
+    it('removes href from internal anchor when disabled', () => {
+      const el = createElement({ href: '/about', disabled: '' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.hasAttribute('href')).toBe(false);
+    });
+
+    it('sets tabindex to -1 when disabled', () => {
+      const el = createElement({ href: '/about', disabled: '' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('tabindex')).toBe('-1');
+    });
+
+    it('restores href when disabled is removed', () => {
+      const el = createElement({ href: '/about', disabled: '' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.hasAttribute('href')).toBe(false);
+
+      el.disabled = false;
+      expect(anchor.getAttribute('href')).toBe('/about');
+    });
+
+    it('removes aria-disabled when disabled is removed', () => {
+      const el = createElement({ href: '/about', disabled: '' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('aria-disabled')).toBe('true');
+
+      el.disabled = false;
+      expect(anchor.hasAttribute('aria-disabled')).toBe(false);
+    });
+
+    it('removes tabindex when disabled is removed', () => {
+      const el = createElement({ href: '/about', disabled: '' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('tabindex')).toBe('-1');
+
+      el.disabled = false;
+      expect(anchor.hasAttribute('tabindex')).toBe(false);
+    });
+
+    it('reflects disabled property to attribute', () => {
+      const el = createElement();
+      el.disabled = true;
+      expect(el.hasAttribute('disabled')).toBe(true);
+
+      el.disabled = false;
+      expect(el.hasAttribute('disabled')).toBe(false);
+    });
+  });
+
+  describe('current state', () => {
+    it('sets aria-current="page" on internal anchor when current', () => {
+      const el = createElement({ href: '/dashboard', current: '' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('aria-current')).toBe('page');
+    });
+
+    it('removes aria-current when current is removed', () => {
+      const el = createElement({ href: '/dashboard', current: '' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.getAttribute('aria-current')).toBe('page');
+
+      el.current = false;
+      expect(anchor.hasAttribute('aria-current')).toBe(false);
+    });
+
+    it('reflects current property to attribute', () => {
+      const el = createElement();
+      el.current = true;
+      expect(el.hasAttribute('current')).toBe(true);
+
+      el.current = false;
+      expect(el.hasAttribute('current')).toBe(false);
+    });
+  });
+
+  describe('size attribute', () => {
+    it('does not apply size class by default', () => {
+      const el = createElement();
+      const anchor = getInternalAnchor(el);
+      expect(anchor.className).toBe('dsn-link');
+    });
+
+    it('applies size class when size is set to small', () => {
+      const el = createElement({ size: 'small' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.classList.contains('dsn-link--size-small')).toBe(true);
+    });
+
+    it('applies size class when size is set to default', () => {
+      const el = createElement({ size: 'default' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.classList.contains('dsn-link--size-default')).toBe(true);
+    });
+
+    it('applies size class when size is set to large', () => {
+      const el = createElement({ size: 'large' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.classList.contains('dsn-link--size-large')).toBe(true);
+    });
+
+    it('updates class when size changes', () => {
+      const el = createElement({ size: 'small' });
+      const anchor = getInternalAnchor(el);
+      expect(anchor.classList.contains('dsn-link--size-small')).toBe(true);
+
+      el.size = 'large';
+      expect(anchor.classList.contains('dsn-link--size-large')).toBe(true);
+      expect(anchor.classList.contains('dsn-link--size-small')).toBe(false);
+    });
+
+    it('returns default from size property when no attribute set', () => {
+      const el = createElement();
+      expect(el.size).toBe('default');
+    });
+
+    it('reflects size property to attribute', () => {
+      const el = createElement();
+      el.size = 'large';
+      expect(el.getAttribute('size')).toBe('large');
+    });
+  });
+
+  describe('focus delegation', () => {
+    it('delegates focus to internal anchor', () => {
+      const el = createElement({ href: '/about' });
+      const anchor = getInternalAnchor(el);
+      const focusSpy = vi.spyOn(anchor, 'focus');
+
+      el.focus();
+      expect(focusSpy).toHaveBeenCalled();
+    });
+
+    it('delegates blur to internal anchor', () => {
+      const el = createElement({ href: '/about' });
+      const anchor = getInternalAnchor(el);
+      const blurSpy = vi.spyOn(anchor, 'blur');
+
+      el.blur();
+      expect(blurSpy).toHaveBeenCalled();
+    });
+
+    it('delegates click to internal anchor', () => {
+      const el = createElement({ href: '/about' });
+      const anchor = getInternalAnchor(el);
+      const clickSpy = vi.spyOn(anchor, 'click');
+
+      el.click();
+      expect(clickSpy).toHaveBeenCalled();
+    });
+  });
+});
+
+describe('defineLink', () => {
+  it('does not throw when called with an already-registered tag', () => {
+    expect(() => defineLink('dsn-link')).not.toThrow();
+  });
+
+  it('registers a custom element with the default tag name', () => {
+    const el = document.createElement('dsn-link');
+    expect(el).toBeInstanceOf(DsnLink);
+  });
+});