@dsn-starter-kit/components-web 1.0.0

package/src/heading/Heading.test.ts

@@ -0,0 +1,186 @@
+import { describe, it, expect, beforeAll, beforeEach } from 'vitest';
+import { DsnHeading, defineHeading } from './Heading';
+
+// Register the custom element once for all tests
+beforeAll(() => {
+  defineHeading();
+});
+
+function createElement(attrs: Record<string, string> = {}): DsnHeading {
+  const el = document.createElement('dsn-heading') as DsnHeading;
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, value);
+  }
+  document.body.appendChild(el);
+  return el;
+}
+
+function getInternalHeading(el: DsnHeading): HTMLElement {
+  return el.shadowRoot!.querySelector('h1, h2, h3, h4, h5, h6')!;
+}
+
+describe('DsnHeading', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('rendering', () => {
+    it('creates a shadow root', () => {
+      const el = createElement();
+      expect(el.shadowRoot).not.toBeNull();
+    });
+
+    it('renders an internal heading element', () => {
+      const el = createElement();
+      const h = getInternalHeading(el);
+      expect(h).not.toBeNull();
+    });
+
+    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-heading');
+    });
+
+    it('renders a slot for content projection', () => {
+      const el = createElement();
+      const slot = el.shadowRoot!.querySelector('slot');
+      expect(slot).not.toBeNull();
+    });
+  });
+
+  describe('level attribute', () => {
+    it('defaults to h2', () => {
+      const el = createElement();
+      const h = getInternalHeading(el);
+      expect(h.tagName).toBe('H2');
+    });
+
+    it('renders h1 when level is 1', () => {
+      const el = createElement({ level: '1' });
+      const h = getInternalHeading(el);
+      expect(h.tagName).toBe('H1');
+    });
+
+    it('renders h3 when level is 3', () => {
+      const el = createElement({ level: '3' });
+      const h = getInternalHeading(el);
+      expect(h.tagName).toBe('H3');
+    });
+
+    it('renders h4 when level is 4', () => {
+      const el = createElement({ level: '4' });
+      const h = getInternalHeading(el);
+      expect(h.tagName).toBe('H4');
+    });
+
+    it('renders h5 when level is 5', () => {
+      const el = createElement({ level: '5' });
+      const h = getInternalHeading(el);
+      expect(h.tagName).toBe('H5');
+    });
+
+    it('renders h6 when level is 6', () => {
+      const el = createElement({ level: '6' });
+      const h = getInternalHeading(el);
+      expect(h.tagName).toBe('H6');
+    });
+
+    it('updates element when level changes', () => {
+      const el = createElement({ level: '2' });
+      expect(getInternalHeading(el).tagName).toBe('H2');
+
+      el.setAttribute('level', '4');
+      expect(getInternalHeading(el).tagName).toBe('H4');
+    });
+  });
+
+  describe('appearance attribute', () => {
+    it('defaults appearance to match level', () => {
+      const el = createElement({ level: '3' });
+      const h = getInternalHeading(el);
+      expect(h.className).toContain('dsn-heading--heading-3');
+    });
+
+    it('allows appearance independent of level', () => {
+      const el = createElement({ level: '2', appearance: 'heading-4' });
+      const h = getInternalHeading(el);
+      expect(h.tagName).toBe('H2');
+      expect(h.className).toContain('dsn-heading--heading-4');
+    });
+
+    it('updates classes when appearance changes', () => {
+      const el = createElement({ appearance: 'heading-1' });
+      const h = getInternalHeading(el);
+      expect(h.className).toContain('dsn-heading--heading-1');
+
+      el.setAttribute('appearance', 'heading-5');
+      expect(h.className).toContain('dsn-heading--heading-5');
+      expect(h.className).not.toContain('dsn-heading--heading-1');
+    });
+  });
+
+  describe('level property', () => {
+    it('returns "2" when no attribute set', () => {
+      const el = createElement();
+      expect(el.level).toBe('2');
+    });
+
+    it('reflects the attribute value', () => {
+      const el = createElement({ level: '3' });
+      expect(el.level).toBe('3');
+    });
+
+    it('sets the attribute when property is set', () => {
+      const el = createElement();
+      el.level = '5';
+      expect(el.getAttribute('level')).toBe('5');
+    });
+  });
+
+  describe('appearance property', () => {
+    it('defaults to heading-2 when no attributes set', () => {
+      const el = createElement();
+      expect(el.appearance).toBe('heading-2');
+    });
+
+    it('reflects the attribute value', () => {
+      const el = createElement({ appearance: 'heading-3' });
+      expect(el.appearance).toBe('heading-3');
+    });
+
+    it('sets the attribute when property is set', () => {
+      const el = createElement();
+      el.appearance = 'heading-6';
+      expect(el.getAttribute('appearance')).toBe('heading-6');
+    });
+  });
+
+  describe('base class', () => {
+    it('always includes dsn-heading base class', () => {
+      const el = createElement();
+      const h = getInternalHeading(el);
+      expect(h.className).toContain('dsn-heading');
+    });
+
+    it('includes base class with heading-1 appearance', () => {
+      const el = createElement({ appearance: 'heading-1' });
+      const h = getInternalHeading(el);
+      expect(h.className).toContain('dsn-heading');
+      expect(h.className).toContain('dsn-heading--heading-1');
+    });
+  });
+
+  describe('custom element registration', () => {
+    it('is defined as dsn-heading', () => {
+      expect(customElements.get('dsn-heading')).toBe(DsnHeading);
+    });
+
+    it('does not re-register if already defined', () => {
+      // Should not throw
+      defineHeading();
+      expect(customElements.get('dsn-heading')).toBe(DsnHeading);
+    });
+  });
+});

package/src/heading/Heading.ts

@@ -0,0 +1,104 @@
+/**
+ * DSN Heading Web Component
+ *
+ * A custom element that provides styled headings with independent
+ * semantic level and visual appearance.
+ *
+ * @example
+ * ```html
+ * <dsn-heading>Default h2 heading</dsn-heading>
+ * <dsn-heading level="1">Page Title</dsn-heading>
+ * <dsn-heading level="2" appearance="heading-4">Smaller h2</dsn-heading>
+ * ```
+ */
+
+export type HeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
+export type HeadingAppearance =
+  | 'heading-1'
+  | 'heading-2'
+  | 'heading-3'
+  | 'heading-4'
+  | 'heading-5'
+  | 'heading-6';
+
+// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate
+import { headingStyles } from './heading-styles.generated';
+
+export class DsnHeading extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return ['level', 'appearance'];
+  }
+
+  private _heading: HTMLElement;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    // Default to h2
+    this._heading = document.createElement('h2');
+    this._heading.innerHTML = '<slot></slot>';
+
+    // Create style element with embedded CSS
+    const style = document.createElement('style');
+    style.textContent = headingStyles;
+
+    this.shadowRoot!.appendChild(style);
+    this.shadowRoot!.appendChild(this._heading);
+  }
+
+  connectedCallback(): void {
+    this._updateElement();
+    this._updateClasses();
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (name === 'level') {
+      this._updateElement();
+    }
+    this._updateClasses();
+  }
+
+  private _updateElement(): void {
+    const tag = `h${this.level}`;
+    if (this._heading.tagName.toLowerCase() !== tag) {
+      const newHeading = document.createElement(tag);
+      newHeading.innerHTML = '<slot></slot>';
+      newHeading.className = this._heading.className;
+      this.shadowRoot!.replaceChild(newHeading, this._heading);
+      this._heading = newHeading;
+    }
+  }
+
+  private _updateClasses(): void {
+    const appearance = this.appearance;
+    const classes = ['dsn-heading', `dsn-heading--${appearance}`];
+    this._heading.className = classes.join(' ');
+  }
+
+  // Property: level
+  get level(): HeadingLevel {
+    return (this.getAttribute('level') as HeadingLevel) || '2';
+  }
+
+  set level(value: HeadingLevel) {
+    this.setAttribute('level', value);
+  }
+
+  // Property: appearance
+  get appearance(): HeadingAppearance {
+    const attr = this.getAttribute('appearance') as HeadingAppearance;
+    return attr || (`heading-${this.level}` as HeadingAppearance);
+  }
+
+  set appearance(value: HeadingAppearance) {
+    this.setAttribute('appearance', value);
+  }
+}
+
+// Register the custom element
+export function defineHeading(tagName = 'dsn-heading'): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, DsnHeading);
+  }
+}

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

@@ -0,0 +1,3 @@
+// Auto-generated — do not edit manually.
+// Source: heading.shadow.css + components-html source
+export const headingStyles = "/**\n * Shadow DOM wrapper styles for the Heading Web Component.\n * The core heading styles are imported from the shared HTML/CSS source.\n */\n\n:host {\n  display: block;\n}\n\n/* Shared heading styles - single source of truth */\n/**\n * Heading Component\n * Uses semantic component tokens for consistent styling\n *\n * Each appearance level has its own complete set of tokens\n * (font-family, font-weight, color, font-size, line-height, margin).\n *\n * The `level` prop controls the semantic HTML element (h1–h6).\n * The `appearance` prop controls the visual style, independently of level.\n */\n\n.dsn-heading {\n  margin-block-start: 0;\n  text-wrap: balance;\n}\n\n/* Heading 1 Appearance */\n.dsn-heading--heading-1 {\n  font-family: var(--dsn-heading-level-1-font-family);\n  font-weight: var(--dsn-heading-level-1-font-weight);\n  color: var(--dsn-heading-level-1-color);\n  font-size: var(--dsn-heading-level-1-font-size);\n  line-height: var(--dsn-heading-level-1-line-height);\n  margin-block-end: var(--dsn-heading-level-1-margin-block-end);\n}\n\n/* Heading 2 Appearance */\n.dsn-heading--heading-2 {\n  font-family: var(--dsn-heading-level-2-font-family);\n  font-weight: var(--dsn-heading-level-2-font-weight);\n  color: var(--dsn-heading-level-2-color);\n  font-size: var(--dsn-heading-level-2-font-size);\n  line-height: var(--dsn-heading-level-2-line-height);\n  margin-block-end: var(--dsn-heading-level-2-margin-block-end);\n}\n\n/* Heading 3 Appearance */\n.dsn-heading--heading-3 {\n  font-family: var(--dsn-heading-level-3-font-family);\n  font-weight: var(--dsn-heading-level-3-font-weight);\n  color: var(--dsn-heading-level-3-color);\n  font-size: var(--dsn-heading-level-3-font-size);\n  line-height: var(--dsn-heading-level-3-line-height);\n  margin-block-end: var(--dsn-heading-level-3-margin-block-end);\n}\n\n/* Heading 4 Appearance */\n.dsn-heading--heading-4 {\n  font-family: var(--dsn-heading-level-4-font-family);\n  font-weight: var(--dsn-heading-level-4-font-weight);\n  color: var(--dsn-heading-level-4-color);\n  font-size: var(--dsn-heading-level-4-font-size);\n  line-height: var(--dsn-heading-level-4-line-height);\n  margin-block-end: var(--dsn-heading-level-4-margin-block-end);\n}\n\n/* Heading 5 Appearance */\n.dsn-heading--heading-5 {\n  font-family: var(--dsn-heading-level-5-font-family);\n  font-weight: var(--dsn-heading-level-5-font-weight);\n  color: var(--dsn-heading-level-5-color);\n  font-size: var(--dsn-heading-level-5-font-size);\n  line-height: var(--dsn-heading-level-5-line-height);\n  margin-block-end: var(--dsn-heading-level-5-margin-block-end);\n}\n\n/* Heading 6 Appearance */\n.dsn-heading--heading-6 {\n  font-family: var(--dsn-heading-level-6-font-family);\n  font-weight: var(--dsn-heading-level-6-font-weight);\n  color: var(--dsn-heading-level-6-color);\n  font-size: var(--dsn-heading-level-6-font-size);\n  line-height: var(--dsn-heading-level-6-line-height);\n  margin-block-end: var(--dsn-heading-level-6-margin-block-end);\n}\n\n";

package/src/heading/heading.shadow.css

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

package/src/heading/index.ts

@@ -0,0 +1,2 @@
+export { DsnHeading, defineHeading } from './Heading';
+export type { HeadingLevel, HeadingAppearance } from './Heading';

package/src/icon/Icon.test.ts

@@ -0,0 +1,228 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { DsnIcon, defineIcon } from './Icon';
+
+// Register the custom element for tests
+defineIcon();
+
+function createElement(attrs: Record<string, string> = {}): DsnIcon {
+  const el = document.createElement('dsn-icon') as DsnIcon;
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, value);
+  }
+  document.body.appendChild(el);
+  return el;
+}
+
+describe('DsnIcon', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('registration', () => {
+    it('should be registered as dsn-icon', () => {
+      expect(customElements.get('dsn-icon')).toBe(DsnIcon);
+    });
+
+    it('should be an instance of HTMLElement', () => {
+      const el = createElement({ name: 'check' });
+      expect(el).toBeInstanceOf(HTMLElement);
+    });
+
+    it('should have a shadow root', () => {
+      const el = createElement({ name: 'check' });
+      expect(el.shadowRoot).not.toBeNull();
+    });
+  });
+
+  describe('rendering', () => {
+    it('should render an SVG when name is set', () => {
+      const el = createElement({ name: 'check' });
+      const svg = el.shadowRoot!.querySelector('svg');
+      expect(svg).not.toBeNull();
+    });
+
+    it('should not render an SVG when name is empty', () => {
+      const el = createElement();
+      const svg = el.shadowRoot!.querySelector('svg');
+      expect(svg).toBeNull();
+    });
+
+    it('should not render an SVG for unknown icon names', () => {
+      const el = createElement({ name: 'nonexistent-icon' });
+      const svg = el.shadowRoot!.querySelector('svg');
+      expect(svg).toBeNull();
+    });
+
+    it('should render path elements inside the SVG', () => {
+      const el = createElement({ name: 'check' });
+      const paths = el.shadowRoot!.querySelectorAll('svg path');
+      expect(paths.length).toBeGreaterThan(0);
+    });
+
+    it('should have correct SVG attributes', () => {
+      const el = createElement({ name: 'check' });
+      const svg = el.shadowRoot!.querySelector('svg')!;
+      expect(svg.getAttribute('viewBox')).toBe('0 0 24 24');
+      expect(svg.getAttribute('fill')).toBe('none');
+      expect(svg.getAttribute('stroke')).toBe('currentColor');
+      expect(svg.getAttribute('stroke-width')).toBe('2');
+      expect(svg.getAttribute('stroke-linecap')).toBe('round');
+      expect(svg.getAttribute('stroke-linejoin')).toBe('round');
+    });
+
+    it('should update SVG when name attribute changes', () => {
+      const el = createElement({ name: 'check' });
+      const pathsBefore = el.shadowRoot!.querySelectorAll('svg path');
+
+      el.setAttribute('name', 'plus');
+      const pathsAfter = el.shadowRoot!.querySelectorAll('svg path');
+
+      // plus has 2 paths, check has 1
+      expect(pathsAfter.length).toBe(2);
+      expect(pathsBefore.length).toBe(1);
+    });
+
+    it('should remove SVG when name is set to unknown', () => {
+      const el = createElement({ name: 'check' });
+      expect(el.shadowRoot!.querySelector('svg')).not.toBeNull();
+
+      el.setAttribute('name', 'invalid');
+      expect(el.shadowRoot!.querySelector('svg')).toBeNull();
+    });
+  });
+
+  describe('sizes', () => {
+    it('should default to md size', () => {
+      const el = createElement({ name: 'check' });
+      const svg = el.shadowRoot!.querySelector('svg')!;
+      expect(svg.classList.contains('dsn-icon')).toBe(true);
+      // md is default, no modifier class needed
+      expect(svg.classList.contains('dsn-icon--md')).toBe(false);
+    });
+
+    it.each(['sm', 'lg', 'xl', '2xl', '3xl', '4xl'] as const)(
+      'should apply dsn-icon--%s class for size="%s"',
+      (size) => {
+        const el = createElement({ name: 'check', size });
+        const svg = el.shadowRoot!.querySelector('svg')!;
+        expect(svg.classList.contains(`dsn-icon--${size}`)).toBe(true);
+      }
+    );
+
+    it('should update size class when size attribute changes', () => {
+      const el = createElement({ name: 'check', size: 'sm' });
+      let svg = el.shadowRoot!.querySelector('svg')!;
+      expect(svg.classList.contains('dsn-icon--sm')).toBe(true);
+
+      el.setAttribute('size', 'lg');
+      svg = el.shadowRoot!.querySelector('svg')!;
+      expect(svg.classList.contains('dsn-icon--lg')).toBe(true);
+      expect(svg.classList.contains('dsn-icon--sm')).toBe(false);
+    });
+  });
+
+  describe('accessibility', () => {
+    it('should be aria-hidden when no label is provided', () => {
+      const el = createElement({ name: 'check' });
+      const svg = el.shadowRoot!.querySelector('svg')!;
+      expect(svg.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('should have role=img and aria-label when label is provided', () => {
+      const el = createElement({ name: 'check', label: 'Checkmark' });
+      const svg = el.shadowRoot!.querySelector('svg')!;
+      expect(svg.getAttribute('role')).toBe('img');
+      expect(svg.getAttribute('aria-label')).toBe('Checkmark');
+    });
+
+    it('should not have aria-hidden when label is provided', () => {
+      const el = createElement({ name: 'check', label: 'Checkmark' });
+      const svg = el.shadowRoot!.querySelector('svg')!;
+      expect(svg.hasAttribute('aria-hidden')).toBe(false);
+    });
+
+    it('should update accessibility when label changes', () => {
+      const el = createElement({ name: 'check' });
+      let svg = el.shadowRoot!.querySelector('svg')!;
+      expect(svg.getAttribute('aria-hidden')).toBe('true');
+
+      el.setAttribute('label', 'Done');
+      svg = el.shadowRoot!.querySelector('svg')!;
+      expect(svg.getAttribute('role')).toBe('img');
+      expect(svg.getAttribute('aria-label')).toBe('Done');
+    });
+  });
+
+  describe('properties', () => {
+    it('should reflect name property to attribute', () => {
+      const el = createElement();
+      el.name = 'star';
+      expect(el.getAttribute('name')).toBe('star');
+    });
+
+    it('should reflect size property to attribute', () => {
+      const el = createElement({ name: 'check' });
+      el.size = 'lg';
+      expect(el.getAttribute('size')).toBe('lg');
+    });
+
+    it('should reflect label property to attribute', () => {
+      const el = createElement({ name: 'check' });
+      el.label = 'Done';
+      expect(el.getAttribute('label')).toBe('Done');
+    });
+
+    it('should remove label attribute when set to empty string', () => {
+      const el = createElement({ name: 'check', label: 'Done' });
+      el.label = '';
+      expect(el.hasAttribute('label')).toBe(false);
+    });
+
+    it('should return correct default values for properties', () => {
+      const el = createElement({ name: 'check' });
+      expect(el.name).toBe('check');
+      expect(el.size).toBe('md');
+      expect(el.label).toBe('');
+    });
+  });
+
+  describe('icons', () => {
+    const iconNames = [
+      'arrow-left',
+      'arrow-right',
+      'check',
+      'chevron-down',
+      'chevron-left',
+      'chevron-right',
+      'chevron-up',
+      'download',
+      'edit',
+      'heart',
+      'home',
+      'menu',
+      'minus',
+      'plus',
+      'search',
+      'settings',
+      'star',
+      'trash',
+      'user',
+      'x',
+    ];
+
+    it.each(iconNames)('should render icon "%s"', (name) => {
+      const el = createElement({ name });
+      const svg = el.shadowRoot!.querySelector('svg');
+      expect(svg).not.toBeNull();
+      const paths = svg!.querySelectorAll('path');
+      expect(paths.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('defineIcon', () => {
+    it('should not throw when called multiple times', () => {
+      expect(() => defineIcon()).not.toThrow();
+      expect(() => defineIcon()).not.toThrow();
+    });
+  });
+});

package/src/icon/Icon.ts

@@ -0,0 +1,136 @@
+/**
+ * DSN Icon Web Component
+ *
+ * A custom element that renders SVG icons from the design system icon set.
+ * Icons are inlined as SVG markup for Shadow DOM encapsulation.
+ *
+ * @example
+ * ```html
+ * <dsn-icon name="check" size="md"></dsn-icon>
+ * <dsn-icon name="settings" size="lg" label="Open settings"></dsn-icon>
+ * ```
+ */
+
+import { iconStyles } from './icon-styles.generated';
+import { iconPaths } from './icon-paths.generated';
+
+export type IconSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export type IconName = keyof typeof iconPaths;
+
+export class DsnIcon extends HTMLElement {
+  static get observedAttributes(): string[] {
+    return ['name', 'size', 'label'];
+  }
+
+  private _svg: SVGSVGElement | null = null;
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const style = document.createElement('style');
+    style.textContent = iconStyles;
+    this.shadowRoot!.appendChild(style);
+  }
+
+  connectedCallback(): void {
+    this._render();
+  }
+
+  attributeChangedCallback(): void {
+    this._render();
+  }
+
+  private _render(): void {
+    const name = this.name;
+    const size = this.size;
+    const label = this.label;
+
+    // Remove existing SVG if any
+    if (this._svg) {
+      this._svg.remove();
+      this._svg = null;
+    }
+
+    if (!name || !(name in iconPaths)) {
+      return;
+    }
+
+    const paths = iconPaths[name as keyof typeof iconPaths];
+
+    // Build SVG element
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('fill', 'none');
+    svg.setAttribute('stroke', 'currentColor');
+    svg.setAttribute('stroke-width', '2');
+    svg.setAttribute('stroke-linecap', 'round');
+    svg.setAttribute('stroke-linejoin', 'round');
+
+    // Apply CSS classes
+    const classes = ['dsn-icon'];
+    if (size !== 'md') {
+      classes.push(`dsn-icon--${size}`);
+    }
+    svg.setAttribute('class', classes.join(' '));
+
+    // Accessibility
+    if (label) {
+      svg.setAttribute('role', 'img');
+      svg.setAttribute('aria-label', label);
+    } else {
+      svg.setAttribute('aria-hidden', 'true');
+    }
+
+    // Add paths
+    for (const d of paths) {
+      const path = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path'
+      );
+      path.setAttribute('d', d);
+      svg.appendChild(path);
+    }
+
+    this._svg = svg;
+    this.shadowRoot!.appendChild(svg);
+  }
+
+  // Property: name
+  get name(): string {
+    return this.getAttribute('name') || '';
+  }
+
+  set name(value: string) {
+    this.setAttribute('name', value);
+  }
+
+  // Property: size
+  get size(): IconSize {
+    return (this.getAttribute('size') as IconSize) || 'md';
+  }
+
+  set size(value: IconSize) {
+    this.setAttribute('size', value);
+  }
+
+  // Property: label (accessible label)
+  get label(): string {
+    return this.getAttribute('label') || '';
+  }
+
+  set label(value: string) {
+    if (value) {
+      this.setAttribute('label', value);
+    } else {
+      this.removeAttribute('label');
+    }
+  }
+}
+
+// Register the custom element
+export function defineIcon(tagName = 'dsn-icon'): void {
+  if (!customElements.get(tagName)) {
+    customElements.define(tagName, DsnIcon);
+  }
+}