@dsn-starter-kit/components-web 1.0.2 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/dist/index.cjs +929 -0
  2. package/dist/index.cjs.map +1 -0
  3. package/dist/index.d.cts +258 -0
  4. package/dist/index.d.cts.map +1 -0
  5. package/dist/index.d.mts +258 -0
  6. package/dist/index.d.mts.map +1 -0
  7. package/dist/index.mjs +914 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/package.json +21 -13
  10. package/dist/button/Button.d.ts +0 -50
  11. package/dist/button/Button.d.ts.map +0 -1
  12. package/dist/button/Button.js +0 -247
  13. package/dist/button/Button.js.map +0 -1
  14. package/dist/button/Button.test.d.ts +0 -2
  15. package/dist/button/Button.test.d.ts.map +0 -1
  16. package/dist/button/Button.test.js +0 -299
  17. package/dist/button/Button.test.js.map +0 -1
  18. package/dist/button/button-styles.generated.d.ts +0 -2
  19. package/dist/button/button-styles.generated.d.ts.map +0 -1
  20. package/dist/button/button-styles.generated.js +0 -4
  21. package/dist/button/button-styles.generated.js.map +0 -1
  22. package/dist/button/index.d.ts +0 -3
  23. package/dist/button/index.d.ts.map +0 -1
  24. package/dist/button/index.js +0 -2
  25. package/dist/button/index.js.map +0 -1
  26. package/dist/heading/Heading.d.ts +0 -30
  27. package/dist/heading/Heading.d.ts.map +0 -1
  28. package/dist/heading/Heading.js +0 -79
  29. package/dist/heading/Heading.js.map +0 -1
  30. package/dist/heading/Heading.test.d.ts +0 -2
  31. package/dist/heading/Heading.test.d.ts.map +0 -1
  32. package/dist/heading/Heading.test.js +0 -157
  33. package/dist/heading/Heading.test.js.map +0 -1
  34. package/dist/heading/heading-styles.generated.d.ts +0 -2
  35. package/dist/heading/heading-styles.generated.d.ts.map +0 -1
  36. package/dist/heading/heading-styles.generated.js +0 -4
  37. package/dist/heading/heading-styles.generated.js.map +0 -1
  38. package/dist/heading/index.d.ts +0 -3
  39. package/dist/heading/index.d.ts.map +0 -1
  40. package/dist/heading/index.js +0 -2
  41. package/dist/heading/index.js.map +0 -1
  42. package/dist/icon/Icon.d.ts +0 -31
  43. package/dist/icon/Icon.d.ts.map +0 -1
  44. package/dist/icon/Icon.js +0 -110
  45. package/dist/icon/Icon.js.map +0 -1
  46. package/dist/icon/Icon.test.d.ts +0 -2
  47. package/dist/icon/Icon.test.d.ts.map +0 -1
  48. package/dist/icon/Icon.test.js +0 -193
  49. package/dist/icon/Icon.test.js.map +0 -1
  50. package/dist/icon/icon-paths.generated.d.ts +0 -2
  51. package/dist/icon/icon-paths.generated.d.ts.map +0 -1
  52. package/dist/icon/icon-paths.generated.js +0 -56
  53. package/dist/icon/icon-paths.generated.js.map +0 -1
  54. package/dist/icon/icon-styles.generated.d.ts +0 -2
  55. package/dist/icon/icon-styles.generated.d.ts.map +0 -1
  56. package/dist/icon/icon-styles.generated.js +0 -4
  57. package/dist/icon/icon-styles.generated.js.map +0 -1
  58. package/dist/icon/index.d.ts +0 -3
  59. package/dist/icon/index.d.ts.map +0 -1
  60. package/dist/icon/index.js +0 -2
  61. package/dist/icon/index.js.map +0 -1
  62. package/dist/index.d.ts +0 -52
  63. package/dist/index.d.ts.map +0 -1
  64. package/dist/index.js +0 -71
  65. package/dist/index.js.map +0 -1
  66. package/dist/link/Link.d.ts +0 -52
  67. package/dist/link/Link.d.ts.map +0 -1
  68. package/dist/link/Link.js +0 -260
  69. package/dist/link/Link.js.map +0 -1
  70. package/dist/link/Link.test.d.ts +0 -2
  71. package/dist/link/Link.test.d.ts.map +0 -1
  72. package/dist/link/Link.test.js +0 -256
  73. package/dist/link/Link.test.js.map +0 -1
  74. package/dist/link/index.d.ts +0 -3
  75. package/dist/link/index.d.ts.map +0 -1
  76. package/dist/link/index.js +0 -2
  77. package/dist/link/index.js.map +0 -1
  78. package/dist/link/link-styles.generated.d.ts +0 -2
  79. package/dist/link/link-styles.generated.d.ts.map +0 -1
  80. package/dist/link/link-styles.generated.js +0 -4
  81. package/dist/link/link-styles.generated.js.map +0 -1
  82. package/dist/ordered-list/OrderedList.d.ts +0 -32
  83. package/dist/ordered-list/OrderedList.d.ts.map +0 -1
  84. package/dist/ordered-list/OrderedList.js +0 -72
  85. package/dist/ordered-list/OrderedList.js.map +0 -1
  86. package/dist/ordered-list/OrderedList.test.d.ts +0 -2
  87. package/dist/ordered-list/OrderedList.test.d.ts.map +0 -1
  88. package/dist/ordered-list/OrderedList.test.js +0 -82
  89. package/dist/ordered-list/OrderedList.test.js.map +0 -1
  90. package/dist/ordered-list/index.d.ts +0 -2
  91. package/dist/ordered-list/index.d.ts.map +0 -1
  92. package/dist/ordered-list/index.js +0 -2
  93. package/dist/ordered-list/index.js.map +0 -1
  94. package/dist/ordered-list/ordered-list-styles.generated.d.ts +0 -2
  95. package/dist/ordered-list/ordered-list-styles.generated.d.ts.map +0 -1
  96. package/dist/ordered-list/ordered-list-styles.generated.js +0 -4
  97. package/dist/ordered-list/ordered-list-styles.generated.js.map +0 -1
  98. package/dist/paragraph/Paragraph.d.ts +0 -26
  99. package/dist/paragraph/Paragraph.d.ts.map +0 -1
  100. package/dist/paragraph/Paragraph.js +0 -60
  101. package/dist/paragraph/Paragraph.js.map +0 -1
  102. package/dist/paragraph/Paragraph.test.d.ts +0 -2
  103. package/dist/paragraph/Paragraph.test.d.ts.map +0 -1
  104. package/dist/paragraph/Paragraph.test.js +0 -121
  105. package/dist/paragraph/Paragraph.test.js.map +0 -1
  106. package/dist/paragraph/index.d.ts +0 -3
  107. package/dist/paragraph/index.d.ts.map +0 -1
  108. package/dist/paragraph/index.js +0 -2
  109. package/dist/paragraph/index.js.map +0 -1
  110. package/dist/paragraph/paragraph-styles.generated.d.ts +0 -2
  111. package/dist/paragraph/paragraph-styles.generated.d.ts.map +0 -1
  112. package/dist/paragraph/paragraph-styles.generated.js +0 -4
  113. package/dist/paragraph/paragraph-styles.generated.js.map +0 -1
  114. package/dist/unordered-list/UnorderedList.d.ts +0 -22
  115. package/dist/unordered-list/UnorderedList.d.ts.map +0 -1
  116. package/dist/unordered-list/UnorderedList.js +0 -42
  117. package/dist/unordered-list/UnorderedList.js.map +0 -1
  118. package/dist/unordered-list/UnorderedList.test.d.ts +0 -2
  119. package/dist/unordered-list/UnorderedList.test.d.ts.map +0 -1
  120. package/dist/unordered-list/UnorderedList.test.js +0 -56
  121. package/dist/unordered-list/UnorderedList.test.js.map +0 -1
  122. package/dist/unordered-list/index.d.ts +0 -2
  123. package/dist/unordered-list/index.d.ts.map +0 -1
  124. package/dist/unordered-list/index.js +0 -2
  125. package/dist/unordered-list/index.js.map +0 -1
  126. package/dist/unordered-list/unordered-list-styles.generated.d.ts +0 -2
  127. package/dist/unordered-list/unordered-list-styles.generated.d.ts.map +0 -1
  128. package/dist/unordered-list/unordered-list-styles.generated.js +0 -4
  129. package/dist/unordered-list/unordered-list-styles.generated.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.mjs","names":[],"sources":["../src/button/button-styles.generated.ts","../src/icon/icon-paths.generated.ts","../src/button/Button.ts","../src/icon/icon-styles.generated.ts","../src/icon/Icon.ts","../src/paragraph/paragraph-styles.generated.ts","../src/paragraph/Paragraph.ts","../src/heading/heading-styles.generated.ts","../src/heading/Heading.ts","../src/link/link-styles.generated.ts","../src/link/Link.ts","../src/unordered-list/unordered-list-styles.generated.ts","../src/unordered-list/UnorderedList.ts","../src/ordered-list/ordered-list-styles.generated.ts","../src/ordered-list/OrderedList.ts","../src/index.ts"],"sourcesContent":["// Auto-generated — do not edit manually.\n// Source: button.shadow.css + components-html source\nexport const buttonStyles = \"/**\\n * Shadow DOM wrapper styles for the Button Web Component.\\n * The core button styles are imported from the shared HTML/CSS source.\\n */\\n\\n:host {\\n display: inline-block;\\n}\\n\\n:host([full-width]) {\\n display: block;\\n width: 100%;\\n}\\n\\n::slotted(*) {\\n pointer-events: none;\\n}\\n\\n/* Shared button styles - single source of truth */\\n/**\\n * Button Component\\n * Uses component tokens for consistent styling\\n */\\n\\n.dsn-button {\\n /* Reset */\\n display: inline-flex;\\n align-self: flex-start;\\n align-items: center;\\n justify-content: center;\\n position: relative; /* Ankerpunt voor DotBadge */\\n\\n /* Typography */\\n font-family: var(--dsn-button-font-family);\\n font-weight: var(--dsn-button-font-weight);\\n line-height: var(--dsn-button-line-height);\\n text-decoration: none;\\n\\n /* Borders */\\n border: var(--dsn-button-border-width) solid transparent;\\n border-radius: var(--dsn-button-border-radius);\\n\\n /* Interaction */\\n cursor: pointer;\\n user-select: none;\\n transition:\\n background-color var(--dsn-transition-duration-normal)\\n var(--dsn-transition-easing-default),\\n color var(--dsn-transition-duration-normal)\\n var(--dsn-transition-easing-default),\\n border-color var(--dsn-transition-duration-normal)\\n var(--dsn-transition-easing-default);\\n\\n /* Accessibility - WCAG pointer target */\\n min-block-size: var(--dsn-button-min-block-size);\\n min-inline-size: var(--dsn-button-min-inline-size);\\n}\\n\\n/* =============================================================================\\n Size Variants\\n ============================================================================= */\\n\\n.dsn-button--size-small {\\n font-size: var(--dsn-button-size-small-font-size);\\n padding-block: var(--dsn-button-size-small-padding-block);\\n padding-inline: var(--dsn-button-size-small-padding-inline);\\n gap: var(--dsn-button-size-small-gap);\\n min-block-size: var(--dsn-button-size-small-min-block-size);\\n}\\n\\n.dsn-button--size-default {\\n font-size: var(--dsn-button-size-default-font-size);\\n padding-block: var(--dsn-button-size-default-padding-block);\\n padding-inline: var(--dsn-button-size-default-padding-inline);\\n gap: var(--dsn-button-size-default-gap);\\n}\\n\\n.dsn-button--size-large {\\n font-size: var(--dsn-button-size-large-font-size);\\n padding-block: var(--dsn-button-size-large-padding-block);\\n padding-inline: var(--dsn-button-size-large-padding-inline);\\n gap: var(--dsn-button-size-large-gap);\\n}\\n\\n/* Icon sizing per button size */\\n.dsn-button--size-small > .dsn-icon {\\n width: var(--dsn-button-size-small-icon-size);\\n height: var(--dsn-button-size-small-icon-size);\\n}\\n\\n.dsn-button--size-default > .dsn-icon {\\n width: var(--dsn-button-size-default-icon-size);\\n height: var(--dsn-button-size-default-icon-size);\\n}\\n\\n.dsn-button--size-large > .dsn-icon {\\n width: var(--dsn-button-size-large-icon-size);\\n height: var(--dsn-button-size-large-icon-size);\\n}\\n\\n/* Icon Only Button */\\n.dsn-button--icon-only {\\n padding-inline: var(--dsn-button-size-default-icon-only-padding);\\n}\\n\\n.dsn-button--icon-only.dsn-button--size-small {\\n padding-inline: var(--dsn-button-size-small-icon-only-padding);\\n}\\n\\n.dsn-button--icon-only.dsn-button--size-large {\\n padding-inline: var(--dsn-button-size-large-icon-only-padding);\\n}\\n\\n/* Icon Only — hide text label visually, keep accessible for screen readers */\\n.dsn-button--icon-only .dsn-button__label {\\n position: absolute;\\n inline-size: 1px;\\n block-size: 1px;\\n padding: 0;\\n margin: -1px;\\n overflow: hidden;\\n clip-path: inset(50%);\\n white-space: nowrap;\\n border: 0;\\n}\\n\\n/* =============================================================================\\n Focus State\\n ============================================================================= */\\n\\n.dsn-button:focus-visible {\\n background-color: var(--dsn-focus-background-color);\\n color: var(--dsn-focus-color);\\n border-color: var(--dsn-focus-background-color);\\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}\\n\\n/* =============================================================================\\n Color Variants\\n ============================================================================= */\\n\\n/* Variant: Strong (main CTA) */\\n.dsn-button--strong {\\n background-color: var(--dsn-button-strong-background-color);\\n color: var(--dsn-button-strong-color);\\n border-color: var(--dsn-button-strong-border-color);\\n}\\n\\n.dsn-button--strong:hover:not(:disabled) {\\n background-color: var(--dsn-button-strong-hover-background-color);\\n color: var(--dsn-button-strong-hover-color);\\n border-color: var(--dsn-button-strong-hover-border-color);\\n}\\n\\n.dsn-button--strong:active:not(:disabled) {\\n background-color: var(--dsn-button-strong-active-background-color);\\n color: var(--dsn-button-strong-active-color);\\n border-color: var(--dsn-button-strong-active-border-color);\\n}\\n\\n/* Variant: Default (alternative actions) */\\n.dsn-button--default {\\n background-color: var(--dsn-button-default-background-color);\\n color: var(--dsn-button-default-color);\\n border-color: var(--dsn-button-default-border-color);\\n}\\n\\n.dsn-button--default:hover:not(:disabled) {\\n background-color: var(--dsn-button-default-hover-background-color);\\n color: var(--dsn-button-default-hover-color);\\n border-color: var(--dsn-button-default-hover-border-color);\\n}\\n\\n.dsn-button--default:active:not(:disabled) {\\n background-color: var(--dsn-button-default-active-background-color);\\n color: var(--dsn-button-default-active-color);\\n border-color: var(--dsn-button-default-active-border-color);\\n}\\n\\n/* Variant: Subtle (low emphasis) */\\n.dsn-button--subtle {\\n background-color: var(--dsn-button-subtle-background-color);\\n color: var(--dsn-button-subtle-color);\\n border-color: var(--dsn-button-subtle-border-color);\\n}\\n\\n.dsn-button--subtle:hover:not(:disabled) {\\n background-color: var(--dsn-button-subtle-hover-background-color);\\n color: var(--dsn-button-subtle-hover-color);\\n border-color: var(--dsn-button-subtle-hover-border-color);\\n}\\n\\n.dsn-button--subtle:active:not(:disabled) {\\n background-color: var(--dsn-button-subtle-active-background-color);\\n color: var(--dsn-button-subtle-active-color);\\n border-color: var(--dsn-button-subtle-active-border-color);\\n}\\n\\n/* =============================================================================\\n Sentiment Variants: Negative\\n ============================================================================= */\\n\\n.dsn-button--strong-negative {\\n background-color: var(--dsn-button-strong-negative-background-color);\\n color: var(--dsn-button-strong-negative-color);\\n border-color: var(--dsn-button-strong-negative-border-color);\\n}\\n\\n.dsn-button--strong-negative:hover:not(:disabled) {\\n background-color: var(--dsn-button-strong-negative-hover-background-color);\\n color: var(--dsn-button-strong-negative-hover-color);\\n border-color: var(--dsn-button-strong-negative-hover-border-color);\\n}\\n\\n.dsn-button--strong-negative:active:not(:disabled) {\\n background-color: var(--dsn-button-strong-negative-active-background-color);\\n color: var(--dsn-button-strong-negative-active-color);\\n border-color: var(--dsn-button-strong-negative-active-border-color);\\n}\\n\\n.dsn-button--default-negative {\\n background-color: var(--dsn-button-default-negative-background-color);\\n color: var(--dsn-button-default-negative-color);\\n border-color: var(--dsn-button-default-negative-border-color);\\n}\\n\\n.dsn-button--default-negative:hover:not(:disabled) {\\n background-color: var(--dsn-button-default-negative-hover-background-color);\\n color: var(--dsn-button-default-negative-hover-color);\\n border-color: var(--dsn-button-default-negative-hover-border-color);\\n}\\n\\n.dsn-button--default-negative:active:not(:disabled) {\\n background-color: var(--dsn-button-default-negative-active-background-color);\\n color: var(--dsn-button-default-negative-active-color);\\n border-color: var(--dsn-button-default-negative-active-border-color);\\n}\\n\\n.dsn-button--subtle-negative {\\n background-color: var(--dsn-button-subtle-negative-background-color);\\n color: var(--dsn-button-subtle-negative-color);\\n border-color: var(--dsn-button-subtle-negative-border-color);\\n}\\n\\n.dsn-button--subtle-negative:hover:not(:disabled) {\\n background-color: var(--dsn-button-subtle-negative-hover-background-color);\\n color: var(--dsn-button-subtle-negative-hover-color);\\n border-color: var(--dsn-button-subtle-negative-hover-border-color);\\n}\\n\\n.dsn-button--subtle-negative:active:not(:disabled) {\\n background-color: var(--dsn-button-subtle-negative-active-background-color);\\n color: var(--dsn-button-subtle-negative-active-color);\\n border-color: var(--dsn-button-subtle-negative-active-border-color);\\n}\\n\\n/* =============================================================================\\n Sentiment Variants: Positive\\n ============================================================================= */\\n\\n.dsn-button--strong-positive {\\n background-color: var(--dsn-button-strong-positive-background-color);\\n color: var(--dsn-button-strong-positive-color);\\n border-color: var(--dsn-button-strong-positive-border-color);\\n}\\n\\n.dsn-button--strong-positive:hover:not(:disabled) {\\n background-color: var(--dsn-button-strong-positive-hover-background-color);\\n color: var(--dsn-button-strong-positive-hover-color);\\n border-color: var(--dsn-button-strong-positive-hover-border-color);\\n}\\n\\n.dsn-button--strong-positive:active:not(:disabled) {\\n background-color: var(--dsn-button-strong-positive-active-background-color);\\n color: var(--dsn-button-strong-positive-active-color);\\n border-color: var(--dsn-button-strong-positive-active-border-color);\\n}\\n\\n.dsn-button--default-positive {\\n background-color: var(--dsn-button-default-positive-background-color);\\n color: var(--dsn-button-default-positive-color);\\n border-color: var(--dsn-button-default-positive-border-color);\\n}\\n\\n.dsn-button--default-positive:hover:not(:disabled) {\\n background-color: var(--dsn-button-default-positive-hover-background-color);\\n color: var(--dsn-button-default-positive-hover-color);\\n border-color: var(--dsn-button-default-positive-hover-border-color);\\n}\\n\\n.dsn-button--default-positive:active:not(:disabled) {\\n background-color: var(--dsn-button-default-positive-active-background-color);\\n color: var(--dsn-button-default-positive-active-color);\\n border-color: var(--dsn-button-default-positive-active-border-color);\\n}\\n\\n.dsn-button--subtle-positive {\\n background-color: var(--dsn-button-subtle-positive-background-color);\\n color: var(--dsn-button-subtle-positive-color);\\n border-color: var(--dsn-button-subtle-positive-border-color);\\n}\\n\\n.dsn-button--subtle-positive:hover:not(:disabled) {\\n background-color: var(--dsn-button-subtle-positive-hover-background-color);\\n color: var(--dsn-button-subtle-positive-hover-color);\\n border-color: var(--dsn-button-subtle-positive-hover-border-color);\\n}\\n\\n.dsn-button--subtle-positive:active:not(:disabled) {\\n background-color: var(--dsn-button-subtle-positive-active-background-color);\\n color: var(--dsn-button-subtle-positive-active-color);\\n border-color: var(--dsn-button-subtle-positive-active-border-color);\\n}\\n\\n/* =============================================================================\\n States\\n ============================================================================= */\\n\\n/* Disabled State */\\n.dsn-button:disabled {\\n background-color: var(--dsn-button-disabled-background-color);\\n color: var(--dsn-button-disabled-color);\\n border-color: var(--dsn-button-disabled-border-color);\\n cursor: not-allowed;\\n}\\n\\n/* Loading State */\\n.dsn-button--loading {\\n pointer-events: none;\\n}\\n\\n.dsn-button--loading > .dsn-button__loader {\\n animation: dsn-button-spin 0.8s linear infinite;\\n}\\n\\n@keyframes dsn-button-spin {\\n to {\\n transform: rotate(360deg);\\n }\\n}\\n\\n/* Full Width */\\n.dsn-button--full-width {\\n width: 100%;\\n}\\n\\n\";\n","// Auto-generated — do not edit manually.\n// Run: node scripts/build-css.js\nexport const iconPaths: Record<string, string[]> = {\n '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\"],\n '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\"],\n 'arrow-down': [\"M0 0h24v24H0z\",\"M12 5l0 14\",\"M18 13l-6 6\",\"M6 13l6 6\"],\n 'arrow-left': [\"M5 12l14 0\",\"M5 12l6 6\",\"M5 12l6 -6\"],\n 'arrow-narrow-down': [\"M0 0h24v24H0z\",\"M12 5l0 14\",\"M16 15l-4 4\",\"M8 15l4 4\"],\n 'arrow-narrow-up': [\"M0 0h24v24H0z\",\"M12 5l0 14\",\"M16 9l-4 -4\",\"M8 9l4 -4\"],\n 'arrow-right': [\"M5 12l14 0\",\"M13 18l6 -6\",\"M13 6l6 6\"],\n 'arrow-up': [\"M0 0h24v24H0z\",\"M12 5l0 14\",\"M18 11l-6 -6\",\"M6 11l6 -6\"],\n 'arrows-sort': [\"M0 0h24v24H0z\",\"M3 9l4 -4l4 4m-4 -4v14\",\"M21 15l-4 4l-4 -4m4 4v-14\"],\n '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\"],\n '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\"],\n 'check': [\"M5 12l5 5l10 -10\"],\n 'chevron-down': [\"M6 9l6 6l6 -6\"],\n 'chevron-left': [\"M15 6l-6 6l6 6\"],\n 'chevron-right': [\"M9 6l6 6l-6 6\"],\n 'chevron-up': [\"M6 15l6 -6l6 6\"],\n 'circle-check': [\"M0 0h24v24H0z\",\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\",\"M9 12l2 2l4 -4\"],\n 'clock': [\"M0 0h24v24H0z\",\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\",\"M12 7v5l3 3\"],\n '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\"],\n 'download': [\"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2\",\"M7 11l5 5l5 -5\",\"M12 4l0 12\"],\n '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\"],\n 'exclamation-circle': [\"M0 0h24v24H0z\",\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\",\"M12 9v4\",\"M12 16v.01\"],\n '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\"],\n '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\"],\n '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\"],\n '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\"],\n '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\"],\n '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\"],\n '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\"],\n 'info-circle': [\"M0 0h24v24H0z\",\"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0\",\"M12 9h.01\",\"M11 12h1v4h1\"],\n '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\"],\n '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\"],\n 'menu': [\"M4 6l16 0\",\"M4 12l16 0\",\"M4 18l16 0\"],\n '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\"],\n 'minus': [\"M5 12l14 0\"],\n '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\"],\n 'pencil': [\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\",\"M13.5 6.5l4 4\"],\n '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\"],\n 'plus': [\"M12 5l0 14\",\"M5 12l14 0\"],\n '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\"],\n 'search': [\"M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0\",\"M21 21l-6 -6\"],\n 'selector': [\"M0 0h24v24H0z\",\"M8 9l4 -4l4 4\",\"M16 15l-4 4l-4 -4\"],\n '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\"],\n 'sort-ascending': [\"M0 0h24v24H0z\",\"M4 6l7 0\",\"M4 12l7 0\",\"M4 18l9 0\",\"M15 9l3 -3l3 3\",\"M18 6l0 12\"],\n 'sort-descending': [\"M0 0h24v24H0z\",\"M4 6l9 0\",\"M4 12l7 0\",\"M4 18l7 0\",\"M15 15l3 3l3 -3\",\"M18 6l0 12\"],\n '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\"],\n '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\"],\n '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\"],\n '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\"],\n '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\"],\n 'x': [\"M18 6l-12 12\",\"M6 6l12 12\"],\n};\n","/**\n * DSN Button Web Component\n *\n * A custom element that provides a styled button with multiple variants and sizes.\n * Uses the same CSS classes and design tokens as the HTML and React button components.\n *\n * @example\n * ```html\n * <dsn-button variant=\"strong\" size=\"default\">Save</dsn-button>\n * <dsn-button variant=\"strong-negative\" size=\"small\">Delete</dsn-button>\n * <dsn-button variant=\"default\" loading>Loading...</dsn-button>\n * <dsn-button variant=\"subtle\" icon-only aria-label=\"Close\">×</dsn-button>\n * ```\n */\n\nexport type ButtonVariant =\n | 'strong'\n | 'strong-negative'\n | 'strong-positive'\n | 'default'\n | 'default-negative'\n | 'default-positive'\n | 'subtle'\n | 'subtle-negative'\n | 'subtle-positive'\n | 'link';\n\nexport type ButtonSize = 'small' | 'default' | 'large';\n\n// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate\nimport { buttonStyles } from './button-styles.generated';\nimport { iconPaths } from '../icon/icon-paths.generated';\n\nexport class DsnButton extends HTMLElement {\n static get observedAttributes(): string[] {\n return [\n 'variant',\n 'size',\n 'disabled',\n 'loading',\n 'full-width',\n 'icon-only',\n 'type',\n ];\n }\n\n private _button: HTMLButtonElement;\n private _iconStartSlot: HTMLSlotElement;\n private _loaderEl: SVGElement | null = null;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n // Create the internal button element\n this._button = document.createElement('button');\n this._button.setAttribute('type', 'button');\n this._iconStartSlot = document.createElement('slot');\n this._iconStartSlot.setAttribute('name', 'icon-start');\n this._button.appendChild(this._iconStartSlot);\n this._button.appendChild(document.createElement('slot'));\n const iconEndSlot = document.createElement('slot');\n iconEndSlot.setAttribute('name', 'icon-end');\n this._button.appendChild(iconEndSlot);\n\n // Create style element with embedded CSS\n const style = document.createElement('style');\n style.textContent = buttonStyles;\n\n this.shadowRoot!.appendChild(style);\n this.shadowRoot!.appendChild(this._button);\n }\n\n connectedCallback(): void {\n this._updateClasses();\n this._updateDisabled();\n this._updateType();\n }\n\n attributeChangedCallback(\n name: string,\n _oldValue: string | null,\n _newValue: string | null\n ): void {\n switch (name) {\n case 'variant':\n case 'size':\n case 'loading':\n case 'full-width':\n case 'icon-only':\n this._updateClasses();\n break;\n case 'disabled':\n this._updateDisabled();\n break;\n case 'type':\n this._updateType();\n break;\n }\n\n // Loading affects classes, disabled state, and loader icon\n if (name === 'loading') {\n this._updateDisabled();\n this._updateLoader();\n }\n }\n\n private _updateLoader(): void {\n if (this.loading) {\n if (!this._loaderEl) {\n this._loaderEl = this._createLoaderSvg();\n }\n // Hide the icon-start slot and show loader instead\n this._iconStartSlot.style.display = 'none';\n this._button.insertBefore(this._loaderEl, this._iconStartSlot);\n } else {\n if (this._loaderEl && this._loaderEl.parentNode) {\n this._loaderEl.remove();\n }\n this._iconStartSlot.style.display = '';\n }\n }\n\n private _createLoaderSvg(): SVGElement {\n const ns = 'http://www.w3.org/2000/svg';\n const svg = document.createElementNS(ns, 'svg');\n svg.setAttribute('viewBox', '0 0 24 24');\n svg.setAttribute('fill', 'none');\n svg.setAttribute('stroke', 'currentColor');\n svg.setAttribute('stroke-width', '2');\n svg.setAttribute('stroke-linecap', 'round');\n svg.setAttribute('stroke-linejoin', 'round');\n svg.setAttribute('aria-hidden', 'true');\n svg.classList.add('dsn-icon', 'dsn-button__loader');\n\n const paths = iconPaths['loader'] || [];\n paths.forEach((d) => {\n const path = document.createElementNS(ns, 'path');\n path.setAttribute('d', d);\n // Skip the transparent fill path (bounding box)\n if (d === 'M0 0h24v24H0z') {\n path.setAttribute('stroke', 'none');\n path.setAttribute('fill', 'none');\n }\n svg.appendChild(path);\n });\n\n return svg;\n }\n\n private _updateClasses(): void {\n const variant = this.variant;\n const size = this.size;\n const loading = this.loading;\n const fullWidth = this.fullWidth;\n const iconOnly = this.iconOnly;\n\n const classes = [\n 'dsn-button',\n `dsn-button--${variant}`,\n `dsn-button--size-${size}`,\n ];\n\n if (loading) {\n classes.push('dsn-button--loading');\n }\n if (fullWidth) {\n classes.push('dsn-button--full-width');\n }\n if (iconOnly) {\n classes.push('dsn-button--icon-only');\n }\n\n this._button.className = classes.join(' ');\n }\n\n private _updateDisabled(): void {\n const isDisabled = this.disabled || this.loading;\n if (isDisabled) {\n this._button.setAttribute('disabled', '');\n } else {\n this._button.removeAttribute('disabled');\n }\n\n if (this.loading) {\n this._button.setAttribute('aria-busy', 'true');\n } else {\n this._button.removeAttribute('aria-busy');\n }\n }\n\n private _updateType(): void {\n this._button.setAttribute('type', this.type);\n }\n\n // Property: variant\n get variant(): ButtonVariant {\n return (this.getAttribute('variant') as ButtonVariant) || 'strong';\n }\n\n set variant(value: ButtonVariant) {\n this.setAttribute('variant', value);\n }\n\n // Property: size\n get size(): ButtonSize {\n return (this.getAttribute('size') as ButtonSize) || 'default';\n }\n\n set size(value: ButtonSize) {\n this.setAttribute('size', value);\n }\n\n // Property: disabled\n get disabled(): boolean {\n return this.hasAttribute('disabled');\n }\n\n set disabled(value: boolean) {\n if (value) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n // Property: loading\n get loading(): boolean {\n return this.hasAttribute('loading');\n }\n\n set loading(value: boolean) {\n if (value) {\n this.setAttribute('loading', '');\n } else {\n this.removeAttribute('loading');\n }\n }\n\n // Property: fullWidth (maps to full-width attribute)\n get fullWidth(): boolean {\n return this.hasAttribute('full-width');\n }\n\n set fullWidth(value: boolean) {\n if (value) {\n this.setAttribute('full-width', '');\n } else {\n this.removeAttribute('full-width');\n }\n }\n\n // Property: iconOnly (maps to icon-only attribute)\n get iconOnly(): boolean {\n return this.hasAttribute('icon-only');\n }\n\n set iconOnly(value: boolean) {\n if (value) {\n this.setAttribute('icon-only', '');\n } else {\n this.removeAttribute('icon-only');\n }\n }\n\n // Property: type\n get type(): string {\n return this.getAttribute('type') || 'button';\n }\n\n set type(value: string) {\n this.setAttribute('type', value);\n }\n\n // Expose the internal button for form submission\n get form(): HTMLFormElement | null {\n return this._button.form;\n }\n\n // Focus delegation\n focus(options?: FocusOptions): void {\n this._button.focus(options);\n }\n\n blur(): void {\n this._button.blur();\n }\n\n click(): void {\n this._button.click();\n }\n}\n\n// Register the custom element\nexport function defineButton(tagName = 'dsn-button'): void {\n if (!customElements.get(tagName)) {\n customElements.define(tagName, DsnButton);\n }\n}\n","// Auto-generated — do not edit manually.\n// Source: icon.shadow.css + components-html source\nexport 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\";\n","/**\n * DSN Icon Web Component\n *\n * A custom element that renders SVG icons from the design system icon set.\n * Icons are inlined as SVG markup for Shadow DOM encapsulation.\n *\n * @example\n * ```html\n * <dsn-icon name=\"check\" size=\"md\"></dsn-icon>\n * <dsn-icon name=\"settings\" size=\"lg\" label=\"Open settings\"></dsn-icon>\n * ```\n */\n\nimport { iconStyles } from './icon-styles.generated';\nimport { iconPaths } from './icon-paths.generated';\n\nexport type IconSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';\nexport type IconName = keyof typeof iconPaths;\n\nexport class DsnIcon extends HTMLElement {\n static get observedAttributes(): string[] {\n return ['name', 'size', 'label'];\n }\n\n private _svg: SVGSVGElement | null = null;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n const style = document.createElement('style');\n style.textContent = iconStyles;\n this.shadowRoot!.appendChild(style);\n }\n\n connectedCallback(): void {\n this._render();\n }\n\n attributeChangedCallback(): void {\n this._render();\n }\n\n private _render(): void {\n const name = this.name;\n const size = this.size;\n const label = this.label;\n\n // Remove existing SVG if any\n if (this._svg) {\n this._svg.remove();\n this._svg = null;\n }\n\n if (!name || !(name in iconPaths)) {\n return;\n }\n\n const paths = iconPaths[name as keyof typeof iconPaths];\n\n // Build SVG element\n const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');\n svg.setAttribute('viewBox', '0 0 24 24');\n svg.setAttribute('fill', 'none');\n svg.setAttribute('stroke', 'currentColor');\n svg.setAttribute('stroke-width', '2');\n svg.setAttribute('stroke-linecap', 'round');\n svg.setAttribute('stroke-linejoin', 'round');\n\n // Apply CSS classes\n const classes = ['dsn-icon'];\n if (size !== 'md') {\n classes.push(`dsn-icon--${size}`);\n }\n svg.setAttribute('class', classes.join(' '));\n\n // Accessibility\n if (label) {\n svg.setAttribute('role', 'img');\n svg.setAttribute('aria-label', label);\n } else {\n svg.setAttribute('aria-hidden', 'true');\n }\n\n // Add paths\n for (const d of paths) {\n const path = document.createElementNS(\n 'http://www.w3.org/2000/svg',\n 'path'\n );\n path.setAttribute('d', d);\n svg.appendChild(path);\n }\n\n this._svg = svg;\n this.shadowRoot!.appendChild(svg);\n }\n\n // Property: name\n get name(): string {\n return this.getAttribute('name') || '';\n }\n\n set name(value: string) {\n this.setAttribute('name', value);\n }\n\n // Property: size\n get size(): IconSize {\n return (this.getAttribute('size') as IconSize) || 'md';\n }\n\n set size(value: IconSize) {\n this.setAttribute('size', value);\n }\n\n // Property: label (accessible label)\n get label(): string {\n return this.getAttribute('label') || '';\n }\n\n set label(value: string) {\n if (value) {\n this.setAttribute('label', value);\n } else {\n this.removeAttribute('label');\n }\n }\n}\n\n// Register the custom element\nexport function defineIcon(tagName = 'dsn-icon'): void {\n if (!customElements.get(tagName)) {\n customElements.define(tagName, DsnIcon);\n }\n}\n","// Auto-generated — do not edit manually.\n// Source: paragraph.shadow.css + components-html source\nexport 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\";\n","/**\n * DSN Paragraph Web Component\n *\n * A custom element that provides a styled paragraph with multiple variants.\n * Uses the same CSS classes and design tokens as the HTML and React paragraph components.\n *\n * @example\n * ```html\n * <dsn-paragraph>Default body text</dsn-paragraph>\n * <dsn-paragraph variant=\"lead\">Introductory text</dsn-paragraph>\n * <dsn-paragraph variant=\"small-print\">Terms and conditions apply.</dsn-paragraph>\n * ```\n */\n\nexport type ParagraphVariant = 'default' | 'lead' | 'small-print';\n\n// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate\nimport { paragraphStyles } from './paragraph-styles.generated';\n\nexport class DsnParagraph extends HTMLElement {\n static get observedAttributes(): string[] {\n return ['variant'];\n }\n\n private _paragraph: HTMLParagraphElement;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n // Create the internal paragraph element\n this._paragraph = document.createElement('p');\n this._paragraph.innerHTML = '<slot></slot>';\n\n // Create style element with embedded CSS\n const style = document.createElement('style');\n style.textContent = paragraphStyles;\n\n this.shadowRoot!.appendChild(style);\n this.shadowRoot!.appendChild(this._paragraph);\n }\n\n connectedCallback(): void {\n this._updateClasses();\n }\n\n attributeChangedCallback(): void {\n this._updateClasses();\n }\n\n private _updateClasses(): void {\n const variant = this.variant;\n\n const classes = [\n 'dsn-paragraph',\n variant !== 'default' && `dsn-paragraph--${variant}`,\n ].filter(Boolean) as string[];\n\n this._paragraph.className = classes.join(' ');\n }\n\n // Property: variant\n get variant(): ParagraphVariant {\n return (this.getAttribute('variant') as ParagraphVariant) || 'default';\n }\n\n set variant(value: ParagraphVariant) {\n this.setAttribute('variant', value);\n }\n}\n\n// Register the custom element\nexport function defineParagraph(tagName = 'dsn-paragraph'): void {\n if (!customElements.get(tagName)) {\n customElements.define(tagName, DsnParagraph);\n }\n}\n","// Auto-generated — do not edit manually.\n// Source: heading.shadow.css + components-html source\nexport 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\";\n","/**\n * DSN Heading Web Component\n *\n * A custom element that provides styled headings with independent\n * semantic level and visual appearance.\n *\n * @example\n * ```html\n * <dsn-heading>Default h2 heading</dsn-heading>\n * <dsn-heading level=\"1\">Page Title</dsn-heading>\n * <dsn-heading level=\"2\" appearance=\"heading-4\">Smaller h2</dsn-heading>\n * ```\n */\n\nexport type HeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';\nexport type HeadingAppearance =\n | 'heading-1'\n | 'heading-2'\n | 'heading-3'\n | 'heading-4'\n | 'heading-5'\n | 'heading-6';\n\n// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate\nimport { headingStyles } from './heading-styles.generated';\n\nexport class DsnHeading extends HTMLElement {\n static get observedAttributes(): string[] {\n return ['level', 'appearance'];\n }\n\n private _heading: HTMLElement;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n // Default to h2\n this._heading = document.createElement('h2');\n this._heading.innerHTML = '<slot></slot>';\n\n // Create style element with embedded CSS\n const style = document.createElement('style');\n style.textContent = headingStyles;\n\n this.shadowRoot!.appendChild(style);\n this.shadowRoot!.appendChild(this._heading);\n }\n\n connectedCallback(): void {\n this._updateElement();\n this._updateClasses();\n }\n\n attributeChangedCallback(name: string): void {\n if (name === 'level') {\n this._updateElement();\n }\n this._updateClasses();\n }\n\n private _updateElement(): void {\n const tag = `h${this.level}`;\n if (this._heading.tagName.toLowerCase() !== tag) {\n const newHeading = document.createElement(tag);\n newHeading.innerHTML = '<slot></slot>';\n newHeading.className = this._heading.className;\n this.shadowRoot!.replaceChild(newHeading, this._heading);\n this._heading = newHeading;\n }\n }\n\n private _updateClasses(): void {\n const appearance = this.appearance;\n const classes = ['dsn-heading', `dsn-heading--${appearance}`];\n this._heading.className = classes.join(' ');\n }\n\n // Property: level\n get level(): HeadingLevel {\n return (this.getAttribute('level') as HeadingLevel) || '2';\n }\n\n set level(value: HeadingLevel) {\n this.setAttribute('level', value);\n }\n\n // Property: appearance\n get appearance(): HeadingAppearance {\n const attr = this.getAttribute('appearance') as HeadingAppearance;\n return attr || (`heading-${this.level}` as HeadingAppearance);\n }\n\n set appearance(value: HeadingAppearance) {\n this.setAttribute('appearance', value);\n }\n}\n\n// Register the custom element\nexport function defineHeading(tagName = 'dsn-heading'): void {\n if (!customElements.get(tagName)) {\n customElements.define(tagName, DsnHeading);\n }\n}\n","// Auto-generated — do not edit manually.\n// Source: link.shadow.css + components-html source\nexport 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\";\n","/**\n * DSN Link Web Component\n *\n * A custom element that provides a styled anchor link with icon support.\n * Uses the same CSS classes and design tokens as the HTML and React link components.\n *\n * @example\n * ```html\n * <dsn-link href=\"/about\">About us</dsn-link>\n * <dsn-link href=\"https://example.com\" external>External (opens in new tab)</dsn-link>\n * <dsn-link href=\"/dashboard\" current>Dashboard</dsn-link>\n * <dsn-link disabled>Unavailable</dsn-link>\n * <dsn-link size=\"small\" href=\"/small\">Small link</dsn-link>\n * <dsn-link size=\"large\" href=\"/large\">Large link</dsn-link>\n * ```\n */\n\nexport type LinkSize = 'small' | 'default' | 'large';\n\n// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate\nimport { linkStyles } from './link-styles.generated';\n\nexport class DsnLink extends HTMLElement {\n static get observedAttributes(): string[] {\n return ['href', 'target', 'rel', 'disabled', 'current', 'size', 'external'];\n }\n\n private _anchor: HTMLAnchorElement;\n private _hintNode: Text | null = null;\n private _hrefBackup: string | null = null;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n // Create the internal anchor element\n this._anchor = document.createElement('a');\n this._anchor.classList.add('dsn-link');\n this._anchor.innerHTML =\n '<slot name=\"icon-start\"></slot><slot></slot><slot name=\"icon-end\"></slot>';\n\n // Create style element with embedded CSS\n const style = document.createElement('style');\n style.textContent = linkStyles;\n\n this.shadowRoot!.appendChild(style);\n this.shadowRoot!.appendChild(this._anchor);\n }\n\n connectedCallback(): void {\n this._updateClasses();\n this._updateHref();\n this._updateTarget();\n this._updateRel();\n this._updateDisabled();\n this._updateCurrent();\n this._updateExternal();\n }\n\n attributeChangedCallback(name: string): void {\n switch (name) {\n case 'href':\n this._updateHref();\n break;\n case 'target':\n this._updateTarget();\n break;\n case 'rel':\n this._updateRel();\n break;\n case 'disabled':\n this._updateDisabled();\n break;\n case 'current':\n this._updateCurrent();\n break;\n case 'size':\n this._updateClasses();\n break;\n case 'external':\n this._updateExternal();\n break;\n }\n }\n\n private _updateClasses(): void {\n const classes = ['dsn-link'];\n\n // Only add size class when explicitly set via attribute.\n // Without a size attribute, the link inherits font from its parent,\n // which is the expected behavior for inline usage in paragraphs.\n if (this.hasAttribute('size')) {\n classes.push(`dsn-link--size-${this.size}`);\n }\n\n this._anchor.className = classes.join(' ');\n }\n\n private _updateHref(): void {\n if (this.disabled) return;\n const href = this.getAttribute('href');\n if (href) {\n this._anchor.setAttribute('href', href);\n } else {\n this._anchor.removeAttribute('href');\n }\n }\n\n private _updateTarget(): void {\n const target = this.getAttribute('target');\n if (target) {\n this._anchor.setAttribute('target', target);\n } else {\n this._anchor.removeAttribute('target');\n }\n }\n\n private _updateRel(): void {\n const rel = this.getAttribute('rel');\n if (rel) {\n this._anchor.setAttribute('rel', rel);\n } else {\n this._anchor.removeAttribute('rel');\n }\n }\n\n private _updateDisabled(): void {\n if (this.disabled) {\n this._hrefBackup = this._anchor.getAttribute('href');\n this._anchor.removeAttribute('href');\n this._anchor.setAttribute('aria-disabled', 'true');\n this._anchor.setAttribute('tabindex', '-1');\n } else {\n this._anchor.removeAttribute('aria-disabled');\n this._anchor.removeAttribute('tabindex');\n // Restore href\n if (this._hrefBackup) {\n this._anchor.setAttribute('href', this._hrefBackup);\n this._hrefBackup = null;\n } else {\n this._updateHref();\n }\n }\n }\n\n private _updateCurrent(): void {\n if (this.current) {\n this._anchor.setAttribute('aria-current', 'page');\n } else {\n this._anchor.removeAttribute('aria-current');\n }\n }\n\n private _updateExternal(): void {\n if (this.external) {\n // Set target and rel if not explicitly provided\n if (!this.getAttribute('target')) {\n this._anchor.setAttribute('target', '_blank');\n }\n if (!this.getAttribute('rel')) {\n this._anchor.setAttribute('rel', 'noopener noreferrer');\n }\n // Add visible hint text\n if (!this._hintNode) {\n this._hintNode = document.createTextNode(' (opens in new tab)');\n }\n this._anchor.appendChild(this._hintNode);\n } else {\n if (this._hintNode && this._hintNode.parentNode) {\n this._hintNode.remove();\n }\n // Restore target/rel to attribute values\n this._updateTarget();\n this._updateRel();\n }\n }\n\n // Property: href\n get href(): string | null {\n return this.getAttribute('href');\n }\n\n set href(value: string | null) {\n if (value) {\n this.setAttribute('href', value);\n } else {\n this.removeAttribute('href');\n }\n }\n\n // Property: target\n get target(): string | null {\n return this.getAttribute('target');\n }\n\n set target(value: string | null) {\n if (value) {\n this.setAttribute('target', value);\n } else {\n this.removeAttribute('target');\n }\n }\n\n // Property: rel\n get rel(): string | null {\n return this.getAttribute('rel');\n }\n\n set rel(value: string | null) {\n if (value) {\n this.setAttribute('rel', value);\n } else {\n this.removeAttribute('rel');\n }\n }\n\n // Property: disabled\n get disabled(): boolean {\n return this.hasAttribute('disabled');\n }\n\n set disabled(value: boolean) {\n if (value) {\n this.setAttribute('disabled', '');\n } else {\n this.removeAttribute('disabled');\n }\n }\n\n // Property: current\n get current(): boolean {\n return this.hasAttribute('current');\n }\n\n set current(value: boolean) {\n if (value) {\n this.setAttribute('current', '');\n } else {\n this.removeAttribute('current');\n }\n }\n\n // Property: external\n get external(): boolean {\n return this.hasAttribute('external');\n }\n\n set external(value: boolean) {\n if (value) {\n this.setAttribute('external', '');\n } else {\n this.removeAttribute('external');\n }\n }\n\n // Property: size\n get size(): LinkSize {\n return (this.getAttribute('size') as LinkSize) || 'default';\n }\n\n set size(value: LinkSize) {\n this.setAttribute('size', value);\n }\n\n // Focus delegation\n focus(options?: FocusOptions): void {\n this._anchor.focus(options);\n }\n\n blur(): void {\n this._anchor.blur();\n }\n\n click(): void {\n this._anchor.click();\n }\n}\n\n// Register the custom element\nexport function defineLink(tagName = 'dsn-link'): void {\n if (!customElements.get(tagName)) {\n customElements.define(tagName, DsnLink);\n }\n}\n","// Auto-generated — do not edit manually.\n// Source: unordered-list.shadow.css + components-html source\nexport 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\";\n","/**\n * DSN Unordered List Web Component\n *\n * A custom element that provides a styled unordered list with accent-colored bullet markers.\n * Uses the same CSS classes and design tokens as the HTML and React components.\n *\n * @example\n * ```html\n * <dsn-unordered-list>\n * <li>First item</li>\n * <li>Second item</li>\n * <li>Third item</li>\n * </dsn-unordered-list>\n * ```\n */\n\n// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate\nimport { unorderedListStyles } from './unordered-list-styles.generated';\n\nexport class DsnUnorderedList extends HTMLElement {\n private _list: HTMLUListElement;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n // Create the internal list element\n this._list = document.createElement('ul');\n this._list.classList.add('dsn-unordered-list');\n this._list.innerHTML = '<slot></slot>';\n\n // Create style element with embedded CSS\n const style = document.createElement('style');\n style.textContent = unorderedListStyles;\n\n this.shadowRoot!.appendChild(style);\n this.shadowRoot!.appendChild(this._list);\n }\n\n connectedCallback(): void {\n this._list.className = 'dsn-unordered-list';\n }\n}\n\n// Register the custom element\nexport function defineUnorderedList(tagName = 'dsn-unordered-list'): void {\n if (!customElements.get(tagName)) {\n customElements.define(tagName, DsnUnorderedList);\n }\n}\n","// Auto-generated — do not edit manually.\n// Source: ordered-list.shadow.css + components-html source\nexport 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\";\n","/**\n * DSN Ordered List Web Component\n *\n * A custom element that provides a styled ordered list with numbered markers.\n * Uses the same CSS classes and design tokens as the HTML and React components.\n *\n * @example\n * ```html\n * <dsn-ordered-list>\n * <li>First step</li>\n * <li>Second step</li>\n * <li>Third step</li>\n * </dsn-ordered-list>\n *\n * <dsn-ordered-list start=\"5\">\n * <li>Fifth step</li>\n * <li>Sixth step</li>\n * </dsn-ordered-list>\n * ```\n */\n\n// Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate\nimport { orderedListStyles } from './ordered-list-styles.generated';\n\nexport class DsnOrderedList extends HTMLElement {\n static get observedAttributes(): string[] {\n return ['start'];\n }\n\n private _list: HTMLOListElement;\n\n constructor() {\n super();\n this.attachShadow({ mode: 'open' });\n\n // Create the internal list element\n this._list = document.createElement('ol');\n this._list.classList.add('dsn-ordered-list');\n this._list.innerHTML = '<slot></slot>';\n\n // Create style element with embedded CSS\n const style = document.createElement('style');\n style.textContent = orderedListStyles;\n\n this.shadowRoot!.appendChild(style);\n this.shadowRoot!.appendChild(this._list);\n }\n\n connectedCallback(): void {\n this._list.className = 'dsn-ordered-list';\n this._updateStart();\n }\n\n attributeChangedCallback(name: string): void {\n if (name === 'start') {\n this._updateStart();\n }\n }\n\n private _updateStart(): void {\n const start = this.getAttribute('start');\n if (start) {\n this._list.setAttribute('start', start);\n } else {\n this._list.removeAttribute('start');\n }\n }\n\n // Property: start\n get start(): number {\n return parseInt(this.getAttribute('start') || '1', 10);\n }\n\n set start(value: number) {\n this.setAttribute('start', String(value));\n }\n}\n\n// Register the custom element\nexport function defineOrderedList(tagName = 'dsn-ordered-list'): void {\n if (!customElements.get(tagName)) {\n customElements.define(tagName, DsnOrderedList);\n }\n}\n","/**\n * @dsn-starter-kit/components-web\n * Web Components for the design system\n *\n * This package exports Web Components that can be registered manually or all at once.\n * Components are NOT auto-registered on import - you must explicitly register them.\n *\n * @example Register all components at once\n * ```ts\n * import { defineAllComponents } from '@dsn-starter-kit/components-web';\n * defineAllComponents();\n * ```\n *\n * @example Register specific components\n * ```ts\n * import { defineButton, defineIcon } from '@dsn-starter-kit/components-web';\n * defineButton();\n * defineIcon();\n * ```\n *\n * @example Register with custom tag names\n * ```ts\n * import { defineButton } from '@dsn-starter-kit/components-web';\n * defineButton('my-custom-button');\n * ```\n */\n\n// Internal imports for defineAllComponents\nimport { defineButton as _defineButton } from './button';\nimport { defineIcon as _defineIcon } from './icon';\nimport { defineParagraph as _defineParagraph } from './paragraph';\nimport { defineHeading as _defineHeading } from './heading';\nimport { defineLink as _defineLink } from './link';\nimport { defineUnorderedList as _defineUnorderedList } from './unordered-list';\nimport { defineOrderedList as _defineOrderedList } from './ordered-list';\n\n// Button\nexport { DsnButton, defineButton } from './button';\nexport type { ButtonVariant, ButtonSize } from './button';\n\n// Icon\nexport { DsnIcon, defineIcon } from './icon';\nexport type { IconSize, IconName } from './icon';\n\n// Paragraph\nexport { DsnParagraph, defineParagraph } from './paragraph';\nexport type { ParagraphVariant } from './paragraph';\n\n// Heading\nexport { DsnHeading, defineHeading } from './heading';\nexport type { HeadingLevel, HeadingAppearance } from './heading';\n\n// Link\nexport { DsnLink, defineLink } from './link';\n\n// Unordered List\nexport { DsnUnorderedList, defineUnorderedList } from './unordered-list';\n\n// Ordered List\nexport { DsnOrderedList, defineOrderedList } from './ordered-list';\n\n/**\n * Register all components with their default tag names.\n * Call this once in your application entry point.\n *\n * Default tag names:\n * - dsn-button\n * - dsn-icon\n * - dsn-paragraph\n * - dsn-heading\n * - dsn-link\n * - dsn-unordered-list\n * - dsn-ordered-list\n */\nexport function defineAllComponents(): void {\n _defineButton();\n _defineIcon();\n _defineParagraph();\n _defineHeading();\n _defineLink();\n _defineUnorderedList();\n _defineOrderedList();\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,16 +1,23 @@
1
1
  {
2
2
  "name": "@dsn-starter-kit/components-web",
3
- "version": "1.0.2",
3
+ "version": "3.0.0",
4
4
  "description": "Web Components for the design system",
5
- "main": "dist/index.js",
6
- "module": "dist/index.js",
7
- "types": "dist/index.d.ts",
5
+ "type": "module",
6
+ "main": "dist/index.cjs",
7
+ "module": "dist/index.mjs",
8
+ "types": "dist/index.d.mts",
8
9
  "exports": {
9
10
  ".": {
10
- "types": "./dist/index.d.ts",
11
- "import": "./dist/index.js",
12
- "default": "./dist/index.js"
13
- }
11
+ "import": {
12
+ "types": "./dist/index.d.mts",
13
+ "default": "./dist/index.mjs"
14
+ },
15
+ "require": {
16
+ "types": "./dist/index.d.cts",
17
+ "default": "./dist/index.cjs"
18
+ }
19
+ },
20
+ "./package.json": "./package.json"
14
21
  },
15
22
  "files": [
16
23
  "dist",
@@ -27,16 +34,17 @@
27
34
  "access": "public"
28
35
  },
29
36
  "dependencies": {
30
- "@dsn-starter-kit/components-html": "1.0.2",
31
- "@dsn-starter-kit/design-tokens": "1.0.2"
37
+ "@dsn-starter-kit/components-html": "3.0.0",
38
+ "@dsn-starter-kit/design-tokens": "3.0.0"
32
39
  },
33
40
  "devDependencies": {
34
- "typescript": "^5.3.3"
41
+ "typescript": "^5.3.3",
42
+ "tsdown": "^0.22.14"
35
43
  },
36
44
  "scripts": {
37
- "build": "node scripts/build-css.js && tsc",
45
+ "build": "node scripts/build-css.js && tsdown",
38
46
  "clean": "rm -rf dist",
39
47
  "type-check": "tsc --noEmit",
40
- "watch": "tsc --watch"
48
+ "watch": "tsdown --watch"
41
49
  }
42
50
  }
@@ -1,50 +0,0 @@
1
- /**
2
- * DSN Button Web Component
3
- *
4
- * A custom element that provides a styled button with multiple variants and sizes.
5
- * Uses the same CSS classes and design tokens as the HTML and React button components.
6
- *
7
- * @example
8
- * ```html
9
- * <dsn-button variant="strong" size="default">Save</dsn-button>
10
- * <dsn-button variant="strong-negative" size="small">Delete</dsn-button>
11
- * <dsn-button variant="default" loading>Loading...</dsn-button>
12
- * <dsn-button variant="subtle" icon-only aria-label="Close">×</dsn-button>
13
- * ```
14
- */
15
- export type ButtonVariant = 'strong' | 'strong-negative' | 'strong-positive' | 'default' | 'default-negative' | 'default-positive' | 'subtle' | 'subtle-negative' | 'subtle-positive' | 'link';
16
- export type ButtonSize = 'small' | 'default' | 'large';
17
- export declare class DsnButton extends HTMLElement {
18
- static get observedAttributes(): string[];
19
- private _button;
20
- private _iconStartSlot;
21
- private _loaderEl;
22
- constructor();
23
- connectedCallback(): void;
24
- attributeChangedCallback(name: string, _oldValue: string | null, _newValue: string | null): void;
25
- private _updateLoader;
26
- private _createLoaderSvg;
27
- private _updateClasses;
28
- private _updateDisabled;
29
- private _updateType;
30
- get variant(): ButtonVariant;
31
- set variant(value: ButtonVariant);
32
- get size(): ButtonSize;
33
- set size(value: ButtonSize);
34
- get disabled(): boolean;
35
- set disabled(value: boolean);
36
- get loading(): boolean;
37
- set loading(value: boolean);
38
- get fullWidth(): boolean;
39
- set fullWidth(value: boolean);
40
- get iconOnly(): boolean;
41
- set iconOnly(value: boolean);
42
- get type(): string;
43
- set type(value: string);
44
- get form(): HTMLFormElement | null;
45
- focus(options?: FocusOptions): void;
46
- blur(): void;
47
- click(): void;
48
- }
49
- export declare function defineButton(tagName?: string): void;
50
- //# sourceMappingURL=Button.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/button/Button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,iBAAiB,GACjB,iBAAiB,GACjB,SAAS,GACT,kBAAkB,GAClB,kBAAkB,GAClB,QAAQ,GACR,iBAAiB,GACjB,iBAAiB,GACjB,MAAM,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAMvD,qBAAa,SAAU,SAAQ,WAAW;IACxC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAUxC;IAED,OAAO,CAAC,OAAO,CAAoB;IACnC,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,SAAS,CAA2B;;IAyB5C,iBAAiB,IAAI,IAAI;IAMzB,wBAAwB,CACtB,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,MAAM,GAAG,IAAI,EACxB,SAAS,EAAE,MAAM,GAAG,IAAI,GACvB,IAAI;IAwBP,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,gBAAgB;IA2BxB,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,WAAW;IAKnB,IAAI,OAAO,IAAI,aAAa,CAE3B;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,aAAa,EAE/B;IAGD,IAAI,IAAI,IAAI,UAAU,CAErB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,UAAU,EAEzB;IAGD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAM1B;IAGD,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAMzB;IAGD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAM3B;IAGD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAM1B;IAGD,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAGD,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAGD,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;CAGd;AAGD,wBAAgB,YAAY,CAAC,OAAO,SAAe,GAAG,IAAI,CAIzD"}
@@ -1,247 +0,0 @@
1
- /**
2
- * DSN Button Web Component
3
- *
4
- * A custom element that provides a styled button with multiple variants and sizes.
5
- * Uses the same CSS classes and design tokens as the HTML and React button components.
6
- *
7
- * @example
8
- * ```html
9
- * <dsn-button variant="strong" size="default">Save</dsn-button>
10
- * <dsn-button variant="strong-negative" size="small">Delete</dsn-button>
11
- * <dsn-button variant="default" loading>Loading...</dsn-button>
12
- * <dsn-button variant="subtle" icon-only aria-label="Close">×</dsn-button>
13
- * ```
14
- */
15
- // Auto-generated CSS from shared source — run `node scripts/build-css.js` to regenerate
16
- import { buttonStyles } from './button-styles.generated';
17
- import { iconPaths } from '../icon/icon-paths.generated';
18
- export class DsnButton extends HTMLElement {
19
- static get observedAttributes() {
20
- return [
21
- 'variant',
22
- 'size',
23
- 'disabled',
24
- 'loading',
25
- 'full-width',
26
- 'icon-only',
27
- 'type',
28
- ];
29
- }
30
- constructor() {
31
- super();
32
- this._loaderEl = null;
33
- this.attachShadow({ mode: 'open' });
34
- // Create the internal button element
35
- this._button = document.createElement('button');
36
- this._button.setAttribute('type', 'button');
37
- this._iconStartSlot = document.createElement('slot');
38
- this._iconStartSlot.setAttribute('name', 'icon-start');
39
- this._button.appendChild(this._iconStartSlot);
40
- this._button.appendChild(document.createElement('slot'));
41
- const iconEndSlot = document.createElement('slot');
42
- iconEndSlot.setAttribute('name', 'icon-end');
43
- this._button.appendChild(iconEndSlot);
44
- // Create style element with embedded CSS
45
- const style = document.createElement('style');
46
- style.textContent = buttonStyles;
47
- this.shadowRoot.appendChild(style);
48
- this.shadowRoot.appendChild(this._button);
49
- }
50
- connectedCallback() {
51
- this._updateClasses();
52
- this._updateDisabled();
53
- this._updateType();
54
- }
55
- attributeChangedCallback(name, _oldValue, _newValue) {
56
- switch (name) {
57
- case 'variant':
58
- case 'size':
59
- case 'loading':
60
- case 'full-width':
61
- case 'icon-only':
62
- this._updateClasses();
63
- break;
64
- case 'disabled':
65
- this._updateDisabled();
66
- break;
67
- case 'type':
68
- this._updateType();
69
- break;
70
- }
71
- // Loading affects classes, disabled state, and loader icon
72
- if (name === 'loading') {
73
- this._updateDisabled();
74
- this._updateLoader();
75
- }
76
- }
77
- _updateLoader() {
78
- if (this.loading) {
79
- if (!this._loaderEl) {
80
- this._loaderEl = this._createLoaderSvg();
81
- }
82
- // Hide the icon-start slot and show loader instead
83
- this._iconStartSlot.style.display = 'none';
84
- this._button.insertBefore(this._loaderEl, this._iconStartSlot);
85
- }
86
- else {
87
- if (this._loaderEl && this._loaderEl.parentNode) {
88
- this._loaderEl.remove();
89
- }
90
- this._iconStartSlot.style.display = '';
91
- }
92
- }
93
- _createLoaderSvg() {
94
- const ns = 'http://www.w3.org/2000/svg';
95
- const svg = document.createElementNS(ns, 'svg');
96
- svg.setAttribute('viewBox', '0 0 24 24');
97
- svg.setAttribute('fill', 'none');
98
- svg.setAttribute('stroke', 'currentColor');
99
- svg.setAttribute('stroke-width', '2');
100
- svg.setAttribute('stroke-linecap', 'round');
101
- svg.setAttribute('stroke-linejoin', 'round');
102
- svg.setAttribute('aria-hidden', 'true');
103
- svg.classList.add('dsn-icon', 'dsn-button__loader');
104
- const paths = iconPaths['loader'] || [];
105
- paths.forEach((d) => {
106
- const path = document.createElementNS(ns, 'path');
107
- path.setAttribute('d', d);
108
- // Skip the transparent fill path (bounding box)
109
- if (d === 'M0 0h24v24H0z') {
110
- path.setAttribute('stroke', 'none');
111
- path.setAttribute('fill', 'none');
112
- }
113
- svg.appendChild(path);
114
- });
115
- return svg;
116
- }
117
- _updateClasses() {
118
- const variant = this.variant;
119
- const size = this.size;
120
- const loading = this.loading;
121
- const fullWidth = this.fullWidth;
122
- const iconOnly = this.iconOnly;
123
- const classes = [
124
- 'dsn-button',
125
- `dsn-button--${variant}`,
126
- `dsn-button--size-${size}`,
127
- ];
128
- if (loading) {
129
- classes.push('dsn-button--loading');
130
- }
131
- if (fullWidth) {
132
- classes.push('dsn-button--full-width');
133
- }
134
- if (iconOnly) {
135
- classes.push('dsn-button--icon-only');
136
- }
137
- this._button.className = classes.join(' ');
138
- }
139
- _updateDisabled() {
140
- const isDisabled = this.disabled || this.loading;
141
- if (isDisabled) {
142
- this._button.setAttribute('disabled', '');
143
- }
144
- else {
145
- this._button.removeAttribute('disabled');
146
- }
147
- if (this.loading) {
148
- this._button.setAttribute('aria-busy', 'true');
149
- }
150
- else {
151
- this._button.removeAttribute('aria-busy');
152
- }
153
- }
154
- _updateType() {
155
- this._button.setAttribute('type', this.type);
156
- }
157
- // Property: variant
158
- get variant() {
159
- return this.getAttribute('variant') || 'strong';
160
- }
161
- set variant(value) {
162
- this.setAttribute('variant', value);
163
- }
164
- // Property: size
165
- get size() {
166
- return this.getAttribute('size') || 'default';
167
- }
168
- set size(value) {
169
- this.setAttribute('size', value);
170
- }
171
- // Property: disabled
172
- get disabled() {
173
- return this.hasAttribute('disabled');
174
- }
175
- set disabled(value) {
176
- if (value) {
177
- this.setAttribute('disabled', '');
178
- }
179
- else {
180
- this.removeAttribute('disabled');
181
- }
182
- }
183
- // Property: loading
184
- get loading() {
185
- return this.hasAttribute('loading');
186
- }
187
- set loading(value) {
188
- if (value) {
189
- this.setAttribute('loading', '');
190
- }
191
- else {
192
- this.removeAttribute('loading');
193
- }
194
- }
195
- // Property: fullWidth (maps to full-width attribute)
196
- get fullWidth() {
197
- return this.hasAttribute('full-width');
198
- }
199
- set fullWidth(value) {
200
- if (value) {
201
- this.setAttribute('full-width', '');
202
- }
203
- else {
204
- this.removeAttribute('full-width');
205
- }
206
- }
207
- // Property: iconOnly (maps to icon-only attribute)
208
- get iconOnly() {
209
- return this.hasAttribute('icon-only');
210
- }
211
- set iconOnly(value) {
212
- if (value) {
213
- this.setAttribute('icon-only', '');
214
- }
215
- else {
216
- this.removeAttribute('icon-only');
217
- }
218
- }
219
- // Property: type
220
- get type() {
221
- return this.getAttribute('type') || 'button';
222
- }
223
- set type(value) {
224
- this.setAttribute('type', value);
225
- }
226
- // Expose the internal button for form submission
227
- get form() {
228
- return this._button.form;
229
- }
230
- // Focus delegation
231
- focus(options) {
232
- this._button.focus(options);
233
- }
234
- blur() {
235
- this._button.blur();
236
- }
237
- click() {
238
- this._button.click();
239
- }
240
- }
241
- // Register the custom element
242
- export function defineButton(tagName = 'dsn-button') {
243
- if (!customElements.get(tagName)) {
244
- customElements.define(tagName, DsnButton);
245
- }
246
- }
247
- //# sourceMappingURL=Button.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/button/Button.ts"],"names":[],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=Button.test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Button.test.d.ts","sourceRoot":"","sources":["../../src/button/Button.test.ts"],"names":[],"mappings":""}