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

package/dist/index.mjs

@@ -0,0 +1,914 @@
+//#region src/button/button-styles.generated.ts
+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";
+//#endregion
+//#region src/icon/icon-paths.generated.ts
+const iconPaths = {
+	"alert-triangle": [
+		"M0 0h24v24H0z",
+		"M12 9v4",
+		"M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0",
+		"M12 16h.01"
+	],
+	"archive": [
+		"M0 0h24v24H0z",
+		"M3 6a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2",
+		"M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-10",
+		"M10 12l4 0"
+	],
+	"arrow-down": [
+		"M0 0h24v24H0z",
+		"M12 5l0 14",
+		"M18 13l-6 6",
+		"M6 13l6 6"
+	],
+	"arrow-left": [
+		"M5 12l14 0",
+		"M5 12l6 6",
+		"M5 12l6 -6"
+	],
+	"arrow-narrow-down": [
+		"M0 0h24v24H0z",
+		"M12 5l0 14",
+		"M16 15l-4 4",
+		"M8 15l4 4"
+	],
+	"arrow-narrow-up": [
+		"M0 0h24v24H0z",
+		"M12 5l0 14",
+		"M16 9l-4 -4",
+		"M8 9l4 -4"
+	],
+	"arrow-right": [
+		"M5 12l14 0",
+		"M13 18l6 -6",
+		"M13 6l6 6"
+	],
+	"arrow-up": [
+		"M0 0h24v24H0z",
+		"M12 5l0 14",
+		"M18 11l-6 -6",
+		"M6 11l6 -6"
+	],
+	"arrows-sort": [
+		"M0 0h24v24H0z",
+		"M3 9l4 -4l4 4m-4 -4v14",
+		"M21 15l-4 4l-4 -4m4 4v-14"
+	],
+	"bell": [
+		"M0 0h24v24H0z",
+		"M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6",
+		"M9 17v1a3 3 0 0 0 6 0v-1"
+	],
+	"calendar-event": [
+		"M0 0h24v24H0z",
+		"M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12",
+		"M16 3l0 4",
+		"M8 3l0 4",
+		"M4 11l16 0",
+		"M8 15h2v2h-2l0 -2"
+	],
+	"check": ["M5 12l5 5l10 -10"],
+	"chevron-down": ["M6 9l6 6l6 -6"],
+	"chevron-left": ["M15 6l-6 6l6 6"],
+	"chevron-right": ["M9 6l6 6l-6 6"],
+	"chevron-up": ["M6 15l6 -6l6 6"],
+	"circle-check": [
+		"M0 0h24v24H0z",
+		"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",
+		"M9 12l2 2l4 -4"
+	],
+	"clock": [
+		"M0 0h24v24H0z",
+		"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",
+		"M12 7v5l3 3"
+	],
+	"dots-vertical": [
+		"M0 0h24v24H0z",
+		"M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+		"M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+		"M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+	],
+	"download": [
+		"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2",
+		"M7 11l5 5l5 -5",
+		"M12 4l0 12"
+	],
+	"edit": [
+		"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1",
+		"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z",
+		"M16 5l3 3"
+	],
+	"exclamation-circle": [
+		"M0 0h24v24H0z",
+		"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",
+		"M12 9v4",
+		"M12 16v.01"
+	],
+	"external-link": [
+		"M0 0h24v24H0z",
+		"M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6",
+		"M11 13l9 -9",
+		"M15 4h5v5"
+	],
+	"eye": [
+		"M0 0h24v24H0z",
+		"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0",
+		"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"
+	],
+	"file-description": [
+		"M0 0h24v24H0z",
+		"M14 3v4a1 1 0 0 0 1 1h4",
+		"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2",
+		"M9 17h6",
+		"M9 13h6"
+	],
+	"folder": ["M0 0h24v24H0z", "M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"],
+	"heart-filled": ["M0 0h24v24H0z", "M6.979 3.074a6 6 0 0 1 4.988 1.425l.037 .033l.034 -.03a6 6 0 0 1 4.733 -1.44l.246 .036a6 6 0 0 1 3.364 10.008l-.18 .185l-.048 .041l-7.45 7.379a1 1 0 0 1 -1.313 .082l-.094 -.082l-7.493 -7.422a6 6 0 0 1 3.176 -10.215z"],
+	"heart": ["M0 0h24v24H0z", "M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"],
+	"home": [
+		"M5 12l-2 0l9 -9l9 9l-2 0",
+		"M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7",
+		"M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"
+	],
+	"info-circle": [
+		"M0 0h24v24H0z",
+		"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",
+		"M12 9h.01",
+		"M11 12h1v4h1"
+	],
+	"loader": [
+		"M0 0h24v24H0z",
+		"M12 6l0 -3",
+		"M16.25 7.75l2.15 -2.15",
+		"M18 12l3 0",
+		"M16.25 16.25l2.15 2.15",
+		"M12 18l0 3",
+		"M7.75 16.25l-2.15 2.15",
+		"M6 12l-3 0",
+		"M7.75 7.75l-2.15 -2.15"
+	],
+	"mail": [
+		"M0 0h24v24H0z",
+		"M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10",
+		"M3 7l9 6l9 -6"
+	],
+	"menu": [
+		"M4 6l16 0",
+		"M4 12l16 0",
+		"M4 18l16 0"
+	],
+	"message-circle": ["M0 0h24v24H0z", "M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"],
+	"minus": ["M5 12l14 0"],
+	"paperclip": ["M0 0h24v24H0z", "M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5"],
+	"pencil": ["M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4", "M13.5 6.5l4 4"],
+	"photo": [
+		"M0 0h24v24H0z",
+		"M15 8h.01",
+		"M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12",
+		"M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5",
+		"M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"
+	],
+	"plus": ["M12 5l0 14", "M5 12l14 0"],
+	"printer": [
+		"M0 0h24v24H0z",
+		"M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2",
+		"M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4",
+		"M7 15a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2l0 -4"
+	],
+	"search": ["M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", "M21 21l-6 -6"],
+	"selector": [
+		"M0 0h24v24H0z",
+		"M8 9l4 -4l4 4",
+		"M16 15l-4 4l-4 -4"
+	],
+	"settings": ["M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z", "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"],
+	"sort-ascending": [
+		"M0 0h24v24H0z",
+		"M4 6l7 0",
+		"M4 12l7 0",
+		"M4 18l9 0",
+		"M15 9l3 -3l3 3",
+		"M18 6l0 12"
+	],
+	"sort-descending": [
+		"M0 0h24v24H0z",
+		"M4 6l9 0",
+		"M4 12l7 0",
+		"M4 18l7 0",
+		"M15 15l3 3l3 -3",
+		"M18 6l0 12"
+	],
+	"star-filled": ["M0 0h24v24H0z", "M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"],
+	"star": ["M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"],
+	"trash": [
+		"M4 7l16 0",
+		"M10 11l0 6",
+		"M14 11l0 6",
+		"M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12",
+		"M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"
+	],
+	"upload": [
+		"M0 0h24v24H0z",
+		"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2",
+		"M7 9l5 -5l5 5",
+		"M12 4l0 12"
+	],
+	"user": ["M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0", "M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"],
+	"x": ["M18 6l-12 12", "M6 6l12 12"]
+};
+//#endregion
+//#region src/button/Button.ts
+var DsnButton = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"variant",
+			"size",
+			"disabled",
+			"loading",
+			"full-width",
+			"icon-only",
+			"type"
+		];
+	}
+	constructor() {
+		super();
+		this._loaderEl = null;
+		this.attachShadow({ mode: "open" });
+		this._button = document.createElement("button");
+		this._button.setAttribute("type", "button");
+		this._iconStartSlot = document.createElement("slot");
+		this._iconStartSlot.setAttribute("name", "icon-start");
+		this._button.appendChild(this._iconStartSlot);
+		this._button.appendChild(document.createElement("slot"));
+		const iconEndSlot = document.createElement("slot");
+		iconEndSlot.setAttribute("name", "icon-end");
+		this._button.appendChild(iconEndSlot);
+		const style = document.createElement("style");
+		style.textContent = buttonStyles;
+		this.shadowRoot.appendChild(style);
+		this.shadowRoot.appendChild(this._button);
+	}
+	connectedCallback() {
+		this._updateClasses();
+		this._updateDisabled();
+		this._updateType();
+	}
+	attributeChangedCallback(name, _oldValue, _newValue) {
+		switch (name) {
+			case "variant":
+			case "size":
+			case "loading":
+			case "full-width":
+			case "icon-only":
+				this._updateClasses();
+				break;
+			case "disabled":
+				this._updateDisabled();
+				break;
+			case "type": this._updateType();
+		}
+		if (name === "loading") {
+			this._updateDisabled();
+			this._updateLoader();
+		}
+	}
+	_updateLoader() {
+		if (this.loading) {
+			if (!this._loaderEl) this._loaderEl = this._createLoaderSvg();
+			this._iconStartSlot.style.display = "none";
+			this._button.insertBefore(this._loaderEl, this._iconStartSlot);
+		} else {
+			if (this._loaderEl && this._loaderEl.parentNode) this._loaderEl.remove();
+			this._iconStartSlot.style.display = "";
+		}
+	}
+	_createLoaderSvg() {
+		const ns = "http://www.w3.org/2000/svg";
+		const svg = document.createElementNS(ns, "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");
+		svg.setAttribute("aria-hidden", "true");
+		svg.classList.add("dsn-icon", "dsn-button__loader");
+		(iconPaths["loader"] || []).forEach((d) => {
+			const path = document.createElementNS(ns, "path");
+			path.setAttribute("d", d);
+			if (d === "M0 0h24v24H0z") {
+				path.setAttribute("stroke", "none");
+				path.setAttribute("fill", "none");
+			}
+			svg.appendChild(path);
+		});
+		return svg;
+	}
+	_updateClasses() {
+		const variant = this.variant;
+		const size = this.size;
+		const loading = this.loading;
+		const fullWidth = this.fullWidth;
+		const iconOnly = this.iconOnly;
+		const classes = [
+			"dsn-button",
+			`dsn-button--${variant}`,
+			`dsn-button--size-${size}`
+		];
+		if (loading) classes.push("dsn-button--loading");
+		if (fullWidth) classes.push("dsn-button--full-width");
+		if (iconOnly) classes.push("dsn-button--icon-only");
+		this._button.className = classes.join(" ");
+	}
+	_updateDisabled() {
+		if (this.disabled || this.loading) this._button.setAttribute("disabled", "");
+		else this._button.removeAttribute("disabled");
+		if (this.loading) this._button.setAttribute("aria-busy", "true");
+		else this._button.removeAttribute("aria-busy");
+	}
+	_updateType() {
+		this._button.setAttribute("type", this.type);
+	}
+	get variant() {
+		return this.getAttribute("variant") || "strong";
+	}
+	set variant(value) {
+		this.setAttribute("variant", value);
+	}
+	get size() {
+		return this.getAttribute("size") || "default";
+	}
+	set size(value) {
+		this.setAttribute("size", value);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		if (value) this.setAttribute("disabled", "");
+		else this.removeAttribute("disabled");
+	}
+	get loading() {
+		return this.hasAttribute("loading");
+	}
+	set loading(value) {
+		if (value) this.setAttribute("loading", "");
+		else this.removeAttribute("loading");
+	}
+	get fullWidth() {
+		return this.hasAttribute("full-width");
+	}
+	set fullWidth(value) {
+		if (value) this.setAttribute("full-width", "");
+		else this.removeAttribute("full-width");
+	}
+	get iconOnly() {
+		return this.hasAttribute("icon-only");
+	}
+	set iconOnly(value) {
+		if (value) this.setAttribute("icon-only", "");
+		else this.removeAttribute("icon-only");
+	}
+	get type() {
+		return this.getAttribute("type") || "button";
+	}
+	set type(value) {
+		this.setAttribute("type", value);
+	}
+	get form() {
+		return this._button.form;
+	}
+	focus(options) {
+		this._button.focus(options);
+	}
+	blur() {
+		this._button.blur();
+	}
+	click() {
+		this._button.click();
+	}
+};
+function defineButton(tagName = "dsn-button") {
+	if (!customElements.get(tagName)) customElements.define(tagName, DsnButton);
+}
+//#endregion
+//#region src/icon/icon-styles.generated.ts
+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";
+//#endregion
+//#region src/icon/Icon.ts
+/**
+* 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>
+* ```
+*/
+var DsnIcon = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"name",
+			"size",
+			"label"
+		];
+	}
+	constructor() {
+		super();
+		this._svg = null;
+		this.attachShadow({ mode: "open" });
+		const style = document.createElement("style");
+		style.textContent = iconStyles;
+		this.shadowRoot.appendChild(style);
+	}
+	connectedCallback() {
+		this._render();
+	}
+	attributeChangedCallback() {
+		this._render();
+	}
+	_render() {
+		const name = this.name;
+		const size = this.size;
+		const label = this.label;
+		if (this._svg) {
+			this._svg.remove();
+			this._svg = null;
+		}
+		if (!name || !(name in iconPaths)) return;
+		const paths = iconPaths[name];
+		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");
+		const classes = ["dsn-icon"];
+		if (size !== "md") classes.push(`dsn-icon--${size}`);
+		svg.setAttribute("class", classes.join(" "));
+		if (label) {
+			svg.setAttribute("role", "img");
+			svg.setAttribute("aria-label", label);
+		} else svg.setAttribute("aria-hidden", "true");
+		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);
+	}
+	get name() {
+		return this.getAttribute("name") || "";
+	}
+	set name(value) {
+		this.setAttribute("name", value);
+	}
+	get size() {
+		return this.getAttribute("size") || "md";
+	}
+	set size(value) {
+		this.setAttribute("size", value);
+	}
+	get label() {
+		return this.getAttribute("label") || "";
+	}
+	set label(value) {
+		if (value) this.setAttribute("label", value);
+		else this.removeAttribute("label");
+	}
+};
+function defineIcon(tagName = "dsn-icon") {
+	if (!customElements.get(tagName)) customElements.define(tagName, DsnIcon);
+}
+//#endregion
+//#region src/paragraph/paragraph-styles.generated.ts
+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";
+//#endregion
+//#region src/paragraph/Paragraph.ts
+var DsnParagraph = class extends HTMLElement {
+	static get observedAttributes() {
+		return ["variant"];
+	}
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this._paragraph = document.createElement("p");
+		this._paragraph.innerHTML = "<slot></slot>";
+		const style = document.createElement("style");
+		style.textContent = paragraphStyles;
+		this.shadowRoot.appendChild(style);
+		this.shadowRoot.appendChild(this._paragraph);
+	}
+	connectedCallback() {
+		this._updateClasses();
+	}
+	attributeChangedCallback() {
+		this._updateClasses();
+	}
+	_updateClasses() {
+		const variant = this.variant;
+		const classes = ["dsn-paragraph", variant !== "default" && `dsn-paragraph--${variant}`].filter(Boolean);
+		this._paragraph.className = classes.join(" ");
+	}
+	get variant() {
+		return this.getAttribute("variant") || "default";
+	}
+	set variant(value) {
+		this.setAttribute("variant", value);
+	}
+};
+function defineParagraph(tagName = "dsn-paragraph") {
+	if (!customElements.get(tagName)) customElements.define(tagName, DsnParagraph);
+}
+//#endregion
+//#region src/heading/heading-styles.generated.ts
+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";
+//#endregion
+//#region src/heading/Heading.ts
+var DsnHeading = class extends HTMLElement {
+	static get observedAttributes() {
+		return ["level", "appearance"];
+	}
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this._heading = document.createElement("h2");
+		this._heading.innerHTML = "<slot></slot>";
+		const style = document.createElement("style");
+		style.textContent = headingStyles;
+		this.shadowRoot.appendChild(style);
+		this.shadowRoot.appendChild(this._heading);
+	}
+	connectedCallback() {
+		this._updateElement();
+		this._updateClasses();
+	}
+	attributeChangedCallback(name) {
+		if (name === "level") this._updateElement();
+		this._updateClasses();
+	}
+	_updateElement() {
+		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;
+		}
+	}
+	_updateClasses() {
+		const classes = ["dsn-heading", `dsn-heading--${this.appearance}`];
+		this._heading.className = classes.join(" ");
+	}
+	get level() {
+		return this.getAttribute("level") || "2";
+	}
+	set level(value) {
+		this.setAttribute("level", value);
+	}
+	get appearance() {
+		return this.getAttribute("appearance") || `heading-${this.level}`;
+	}
+	set appearance(value) {
+		this.setAttribute("appearance", value);
+	}
+};
+function defineHeading(tagName = "dsn-heading") {
+	if (!customElements.get(tagName)) customElements.define(tagName, DsnHeading);
+}
+//#endregion
+//#region src/link/link-styles.generated.ts
+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";
+//#endregion
+//#region src/link/Link.ts
+var DsnLink = class extends HTMLElement {
+	static get observedAttributes() {
+		return [
+			"href",
+			"target",
+			"rel",
+			"disabled",
+			"current",
+			"size",
+			"external"
+		];
+	}
+	constructor() {
+		super();
+		this._hintNode = null;
+		this._hrefBackup = null;
+		this.attachShadow({ mode: "open" });
+		this._anchor = document.createElement("a");
+		this._anchor.classList.add("dsn-link");
+		this._anchor.innerHTML = "<slot name=\"icon-start\"></slot><slot></slot><slot name=\"icon-end\"></slot>";
+		const style = document.createElement("style");
+		style.textContent = linkStyles;
+		this.shadowRoot.appendChild(style);
+		this.shadowRoot.appendChild(this._anchor);
+	}
+	connectedCallback() {
+		this._updateClasses();
+		this._updateHref();
+		this._updateTarget();
+		this._updateRel();
+		this._updateDisabled();
+		this._updateCurrent();
+		this._updateExternal();
+	}
+	attributeChangedCallback(name) {
+		switch (name) {
+			case "href":
+				this._updateHref();
+				break;
+			case "target":
+				this._updateTarget();
+				break;
+			case "rel":
+				this._updateRel();
+				break;
+			case "disabled":
+				this._updateDisabled();
+				break;
+			case "current":
+				this._updateCurrent();
+				break;
+			case "size":
+				this._updateClasses();
+				break;
+			case "external": this._updateExternal();
+		}
+	}
+	_updateClasses() {
+		const classes = ["dsn-link"];
+		if (this.hasAttribute("size")) classes.push(`dsn-link--size-${this.size}`);
+		this._anchor.className = classes.join(" ");
+	}
+	_updateHref() {
+		if (this.disabled) return;
+		const href = this.getAttribute("href");
+		if (href) this._anchor.setAttribute("href", href);
+		else this._anchor.removeAttribute("href");
+	}
+	_updateTarget() {
+		const target = this.getAttribute("target");
+		if (target) this._anchor.setAttribute("target", target);
+		else this._anchor.removeAttribute("target");
+	}
+	_updateRel() {
+		const rel = this.getAttribute("rel");
+		if (rel) this._anchor.setAttribute("rel", rel);
+		else this._anchor.removeAttribute("rel");
+	}
+	_updateDisabled() {
+		if (this.disabled) {
+			this._hrefBackup = this._anchor.getAttribute("href");
+			this._anchor.removeAttribute("href");
+			this._anchor.setAttribute("aria-disabled", "true");
+			this._anchor.setAttribute("tabindex", "-1");
+		} else {
+			this._anchor.removeAttribute("aria-disabled");
+			this._anchor.removeAttribute("tabindex");
+			if (this._hrefBackup) {
+				this._anchor.setAttribute("href", this._hrefBackup);
+				this._hrefBackup = null;
+			} else this._updateHref();
+		}
+	}
+	_updateCurrent() {
+		if (this.current) this._anchor.setAttribute("aria-current", "page");
+		else this._anchor.removeAttribute("aria-current");
+	}
+	_updateExternal() {
+		if (this.external) {
+			if (!this.getAttribute("target")) this._anchor.setAttribute("target", "_blank");
+			if (!this.getAttribute("rel")) this._anchor.setAttribute("rel", "noopener noreferrer");
+			if (!this._hintNode) this._hintNode = document.createTextNode(" (opens in new tab)");
+			this._anchor.appendChild(this._hintNode);
+		} else {
+			if (this._hintNode && this._hintNode.parentNode) this._hintNode.remove();
+			this._updateTarget();
+			this._updateRel();
+		}
+	}
+	get href() {
+		return this.getAttribute("href");
+	}
+	set href(value) {
+		if (value) this.setAttribute("href", value);
+		else this.removeAttribute("href");
+	}
+	get target() {
+		return this.getAttribute("target");
+	}
+	set target(value) {
+		if (value) this.setAttribute("target", value);
+		else this.removeAttribute("target");
+	}
+	get rel() {
+		return this.getAttribute("rel");
+	}
+	set rel(value) {
+		if (value) this.setAttribute("rel", value);
+		else this.removeAttribute("rel");
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		if (value) this.setAttribute("disabled", "");
+		else this.removeAttribute("disabled");
+	}
+	get current() {
+		return this.hasAttribute("current");
+	}
+	set current(value) {
+		if (value) this.setAttribute("current", "");
+		else this.removeAttribute("current");
+	}
+	get external() {
+		return this.hasAttribute("external");
+	}
+	set external(value) {
+		if (value) this.setAttribute("external", "");
+		else this.removeAttribute("external");
+	}
+	get size() {
+		return this.getAttribute("size") || "default";
+	}
+	set size(value) {
+		this.setAttribute("size", value);
+	}
+	focus(options) {
+		this._anchor.focus(options);
+	}
+	blur() {
+		this._anchor.blur();
+	}
+	click() {
+		this._anchor.click();
+	}
+};
+function defineLink(tagName = "dsn-link") {
+	if (!customElements.get(tagName)) customElements.define(tagName, DsnLink);
+}
+//#endregion
+//#region src/unordered-list/unordered-list-styles.generated.ts
+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";
+//#endregion
+//#region src/unordered-list/UnorderedList.ts
+/**
+* DSN Unordered List Web Component
+*
+* A custom element that provides a styled unordered list with accent-colored bullet markers.
+* Uses the same CSS classes and design tokens as the HTML and React components.
+*
+* @example
+* ```html
+* <dsn-unordered-list>
+*   <li>First item</li>
+*   <li>Second item</li>
+*   <li>Third item</li>
+* </dsn-unordered-list>
+* ```
+*/
+var DsnUnorderedList = class extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this._list = document.createElement("ul");
+		this._list.classList.add("dsn-unordered-list");
+		this._list.innerHTML = "<slot></slot>";
+		const style = document.createElement("style");
+		style.textContent = unorderedListStyles;
+		this.shadowRoot.appendChild(style);
+		this.shadowRoot.appendChild(this._list);
+	}
+	connectedCallback() {
+		this._list.className = "dsn-unordered-list";
+	}
+};
+function defineUnorderedList(tagName = "dsn-unordered-list") {
+	if (!customElements.get(tagName)) customElements.define(tagName, DsnUnorderedList);
+}
+//#endregion
+//#region src/ordered-list/ordered-list-styles.generated.ts
+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";
+//#endregion
+//#region src/ordered-list/OrderedList.ts
+/**
+* DSN Ordered List Web Component
+*
+* A custom element that provides a styled ordered list with numbered markers.
+* Uses the same CSS classes and design tokens as the HTML and React components.
+*
+* @example
+* ```html
+* <dsn-ordered-list>
+*   <li>First step</li>
+*   <li>Second step</li>
+*   <li>Third step</li>
+* </dsn-ordered-list>
+*
+* <dsn-ordered-list start="5">
+*   <li>Fifth step</li>
+*   <li>Sixth step</li>
+* </dsn-ordered-list>
+* ```
+*/
+var DsnOrderedList = class extends HTMLElement {
+	static get observedAttributes() {
+		return ["start"];
+	}
+	constructor() {
+		super();
+		this.attachShadow({ mode: "open" });
+		this._list = document.createElement("ol");
+		this._list.classList.add("dsn-ordered-list");
+		this._list.innerHTML = "<slot></slot>";
+		const style = document.createElement("style");
+		style.textContent = orderedListStyles;
+		this.shadowRoot.appendChild(style);
+		this.shadowRoot.appendChild(this._list);
+	}
+	connectedCallback() {
+		this._list.className = "dsn-ordered-list";
+		this._updateStart();
+	}
+	attributeChangedCallback(name) {
+		if (name === "start") this._updateStart();
+	}
+	_updateStart() {
+		const start = this.getAttribute("start");
+		if (start) this._list.setAttribute("start", start);
+		else this._list.removeAttribute("start");
+	}
+	get start() {
+		return parseInt(this.getAttribute("start") || "1", 10);
+	}
+	set start(value) {
+		this.setAttribute("start", String(value));
+	}
+};
+function defineOrderedList(tagName = "dsn-ordered-list") {
+	if (!customElements.get(tagName)) customElements.define(tagName, DsnOrderedList);
+}
+//#endregion
+//#region src/index.ts
+/**
+* @dsn-starter-kit/components-web
+* Web Components for the design system
+*
+* This package exports Web Components that can be registered manually or all at once.
+* Components are NOT auto-registered on import - you must explicitly register them.
+*
+* @example Register all components at once
+* ```ts
+* import { defineAllComponents } from '@dsn-starter-kit/components-web';
+* defineAllComponents();
+* ```
+*
+* @example Register specific components
+* ```ts
+* import { defineButton, defineIcon } from '@dsn-starter-kit/components-web';
+* defineButton();
+* defineIcon();
+* ```
+*
+* @example Register with custom tag names
+* ```ts
+* import { defineButton } from '@dsn-starter-kit/components-web';
+* defineButton('my-custom-button');
+* ```
+*/
+/**
+* Register all components with their default tag names.
+* Call this once in your application entry point.
+*
+* Default tag names:
+* - dsn-button
+* - dsn-icon
+* - dsn-paragraph
+* - dsn-heading
+* - dsn-link
+* - dsn-unordered-list
+* - dsn-ordered-list
+*/
+function defineAllComponents() {
+	defineButton();
+	defineIcon();
+	defineParagraph();
+	defineHeading();
+	defineLink();
+	defineUnorderedList();
+	defineOrderedList();
+}
+//#endregion
+export { DsnButton, DsnHeading, DsnIcon, DsnLink, DsnOrderedList, DsnParagraph, DsnUnorderedList, defineAllComponents, defineButton, defineHeading, defineIcon, defineLink, defineOrderedList, defineParagraph, defineUnorderedList };
+
+//# sourceMappingURL=index.mjs.map