@marioschmidt/design-system-components 1.2.3 → 1.3.1

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-C1TiKrp-.js');
+var index = require('./index-yDPq0GyD.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["ds-button_2.cjs",[[257,"ds-button",{"variant":[1],"disabled":[4]}],[257,"ds-card",{"surface":[1],"cardTitle":[1,"card-title"]}]]]], options);
+  return index.bootstrapLazy([["ds-button_3.cjs",[[257,"ds-button",{"variant":[1],"disabled":[4]}],[257,"ds-card",{"surface":[1],"cardTitle":[1,"card-title"]}],[1,"ds-icon",{"name":[1],"size":[2],"color":[1],"basePath":[1,"base-path"],"lazy":[4],"label":[1],"svgContent":[32],"isLoading":[32],"hasError":[32]},null,{"name":[{"onNameChange":0}],"basePath":[{"onBasePathChange":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,7 +1,8 @@
 {
   "entries": [
     "ds-button/ds-button.js",
-    "ds-card/ds-card.js"
+    "ds-card/ds-card.js",
+    "ds-icon/ds-icon.js"
   ],
   "compiler": {
     "name": "@stencil/core",

package/dist/collection/ds-button/ds-button.css

@@ -49,6 +49,18 @@
   gap: inherit;
 }
 
+/* =============================================================================
+   ICON SLOTS
+   Styling for slotted icons (icon-start and icon-end)
+   Icons use --icon-size token (24px) and inherit label color from button
+   ============================================================================= */
+
+::slotted(ds-icon) {
+  --icon-size: var(--icon-size, 24px);
+  color: inherit;
+  flex-shrink: 0;
+}
+
 /* =============================================================================
    PRIMARY BRAND VARIANT
    Main call-to-action with brand color (BILD red, SportBILD blue)

package/dist/collection/ds-button/ds-button.js

@@ -17,7 +17,7 @@ export class DsButton {
                 'ds-button': true,
                 [`ds-button--${this.variant}`]: true,
                 'ds-button--disabled': this.disabled,
-            }, disabled: this.disabled }, h("span", { key: '8d7cd171306ed6e7b3507fea53e54df4d886d1a0', class: "ds-button__label" }, h("slot", { key: 'c040145f092daf57dd086a9991bcb5d0dc4f97dc' }))));
+            }, disabled: this.disabled }, h("slot", { key: 'c87fb66dffa329b2911752390d69d808aea83ead', name: "icon-start" }), h("span", { key: '3049998d0fca7eef41dc5bbc51ab14d396855840', class: "ds-button__label" }, h("slot", { key: '540e93a8de6f0be305963e7b05b90dcbacda6f37' })), h("slot", { key: 'f48be5683052a40bb97436f20b219a42fb09319a', name: "icon-end" })));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ds-card/ds-card.js

@@ -7,10 +7,10 @@ export class DsCard {
         this.surface = 'primary';
     }
     render() {
-        return (h("div", { key: '545dfb7389201a046b465e96723fdc8ad5cd1160', class: {
+        return (h("div", { key: '0709463754ee76974475f214840ade290ee7aa83', class: {
                 'ds-card': true,
                 [`ds-card--${this.surface}`]: true,
-            } }, this.cardTitle && (h("div", { key: '63523222100e039098a941c2125df63a7bc8a0ee', class: "ds-card__header" }, h("h3", { key: '7e60906b0aeb4d8d20fc09a85d06f4d0bd4a95ae', class: "ds-card__title" }, this.cardTitle))), h("div", { key: '544d6b4e6ac95745261ee73c81f2d01c2806afd3', class: "ds-card__content" }, h("slot", { key: '9102bcc585687daf5d954059a138ad7bac27b640' }))));
+            } }, this.cardTitle && (h("div", { key: 'e161468e870e419852e6ef9f92ab9fc24ac60635', class: "ds-card__header" }, h("h3", { key: '8cccde3f7e5ea185ef24d90312439d2e49621504', class: "ds-card__title" }, this.cardTitle))), h("div", { key: '47457839b1fa00f261c1fbfb8842904fb9bf8245', class: "ds-card__content" }, h("slot", { key: '009a1b1e7411daec2c67fd084d654de71875222e' }))));
     }
     static get is() { return "ds-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ds-icon/ds-icon.css

@@ -0,0 +1,75 @@
+/* =============================================================================
+   DS-ICON Component Styles
+
+   Token-based styling for the icon component.
+   Icons inherit color from parent by default (currentColor).
+   ============================================================================= */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* =============================================================================
+   BASE STYLES
+   ============================================================================= */
+
+.ds-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size, 24px);
+  height: var(--icon-size, 24px);
+  color: var(--icon-color, currentColor);
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   SVG CONTAINER
+   ============================================================================= */
+
+.ds-icon__svg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* Target the SVG element inside the container */
+.ds-icon__svg svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}
+
+/* =============================================================================
+   LOADING STATE
+   ============================================================================= */
+
+.ds-icon--loading {
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   ERROR STATE
+   ============================================================================= */
+
+.ds-icon--error {
+  opacity: 0.3;
+}
+
+.ds-icon__error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.ds-icon__error svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}

package/dist/collection/ds-icon/ds-icon.js

@@ -0,0 +1,317 @@
+import { h } from "@stencil/core";
+/**
+ * Icon cache shared between all ds-icon instances.
+ * Prevents duplicate fetch requests for the same icon.
+ */
+const iconCache = new Map();
+const pendingRequests = new Map();
+export class DsIcon {
+    constructor() {
+        /**
+         * Size of the icon in pixels.
+         * @default 24
+         */
+        this.size = 24;
+        /**
+         * Color of the icon. Accepts any valid CSS color value.
+         * Icons use currentColor by default, inheriting from parent.
+         * @default 'currentColor'
+         */
+        this.color = 'currentColor';
+        /**
+         * Base path for loading icon SVG files.
+         * @default '/icons'
+         */
+        this.basePath = '/icons';
+        /**
+         * Enable lazy loading with IntersectionObserver.
+         * Icon will only load when visible in viewport.
+         * @default false
+         */
+        this.lazy = false;
+        /**
+         * Internal state for the loaded SVG content.
+         */
+        this.svgContent = '';
+        /**
+         * Internal state for loading status.
+         */
+        this.isLoading = false;
+        /**
+         * Internal state for error status.
+         */
+        this.hasError = false;
+        this.isVisible = false;
+    }
+    connectedCallback() {
+        if (this.lazy) {
+            this.setupIntersectionObserver();
+        }
+        else {
+            this.loadIcon();
+        }
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    onNameChange() {
+        if (!this.lazy || this.isVisible) {
+            this.loadIcon();
+        }
+    }
+    onBasePathChange() {
+        if (!this.lazy || this.isVisible) {
+            this.loadIcon();
+        }
+    }
+    setupIntersectionObserver() {
+        if (typeof IntersectionObserver === 'undefined') {
+            // Fallback for browsers without IntersectionObserver
+            this.loadIcon();
+            return;
+        }
+        this.observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.isVisible = true;
+                    this.loadIcon();
+                    this.observer?.disconnect();
+                }
+            });
+        }, {
+            rootMargin: '50px', // Load slightly before entering viewport
+        });
+        this.observer.observe(this.el);
+    }
+    async loadIcon() {
+        if (!this.name) {
+            this.hasError = true;
+            return;
+        }
+        const iconUrl = `${this.basePath}/${this.name}.svg`;
+        // Check cache first
+        if (iconCache.has(iconUrl)) {
+            this.svgContent = iconCache.get(iconUrl);
+            this.hasError = false;
+            return;
+        }
+        // Check for pending request (prevent duplicate fetches)
+        if (pendingRequests.has(iconUrl)) {
+            try {
+                this.svgContent = await pendingRequests.get(iconUrl);
+                this.hasError = false;
+            }
+            catch {
+                this.hasError = true;
+            }
+            return;
+        }
+        this.isLoading = true;
+        this.hasError = false;
+        // Create fetch promise and store it
+        const fetchPromise = this.fetchIcon(iconUrl);
+        pendingRequests.set(iconUrl, fetchPromise);
+        try {
+            this.svgContent = await fetchPromise;
+            iconCache.set(iconUrl, this.svgContent);
+            this.hasError = false;
+        }
+        catch {
+            this.hasError = true;
+            this.svgContent = '';
+        }
+        finally {
+            this.isLoading = false;
+            pendingRequests.delete(iconUrl);
+        }
+    }
+    async fetchIcon(url) {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to load icon: ${url}`);
+        }
+        const svgText = await response.text();
+        // Basic security check - ensure it's valid SVG
+        if (!svgText.includes('<svg')) {
+            throw new Error(`Invalid SVG content: ${url}`);
+        }
+        return svgText;
+    }
+    render() {
+        const isDecorative = !this.label;
+        return (h("span", { key: 'f3c397e6532cf9022416cf53458dd6d0b128a3ed', class: {
+                'ds-icon': true,
+                'ds-icon--loading': this.isLoading,
+                'ds-icon--error': this.hasError,
+            }, style: {
+                '--icon-size': `${this.size}px`,
+                '--icon-color': this.color,
+            }, role: isDecorative ? 'presentation' : 'img', "aria-hidden": isDecorative ? 'true' : undefined, "aria-label": this.label }, this.svgContent ? (h("span", { class: "ds-icon__svg", innerHTML: this.svgContent })) : this.hasError ? (h("span", { class: "ds-icon__error", title: `Icon "${this.name}" not found` }, h("svg", { viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })))) : null));
+    }
+    static get is() { return "ds-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ds-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ds-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "\"add\", \"arrow-left\", \"close\""
+                        }],
+                    "text": "Name of the icon to display (without .svg extension).\nMust match a file in the icons directory."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "24"
+                        }],
+                    "text": "Size of the icon in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "24"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'currentColor'"
+                        }],
+                    "text": "Color of the icon. Accepts any valid CSS color value.\nIcons use currentColor by default, inheriting from parent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'currentColor'"
+            },
+            "basePath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'/icons'"
+                        }],
+                    "text": "Base path for loading icon SVG files."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "base-path",
+                "defaultValue": "'/icons'"
+            },
+            "lazy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enable lazy loading with IntersectionObserver.\nIcon will only load when visible in viewport."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lazy",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for screen readers.\nIf provided, icon is treated as semantic (not decorative)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "svgContent": {},
+            "isLoading": {},
+            "hasError": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "onNameChange"
+            }, {
+                "propName": "basePath",
+                "methodName": "onBasePathChange"
+            }];
+    }
+}

package/dist/components/ds-button.js

@@ -1 +1 @@
-import{t as o,p as r,H as t,h as a}from"./index.js";const e=r(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.variant="primary-brand",this.disabled=!1}render(){return a("button",{key:"b2c29af56fa84e6274900496d1a57bf7be6070e0",class:{"ds-button":!0,["ds-button--"+this.variant]:!0,"ds-button--disabled":this.disabled},disabled:this.disabled},a("span",{key:"8d7cd171306ed6e7b3507fea53e54df4d886d1a0",class:"ds-button__label"},a("slot",{key:"c040145f092daf57dd086a9991bcb5d0dc4f97dc"})))}static get style(){return":host{display:inline-block}.ds-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;transition:background-color 0.2s ease,     border-color 0.2s ease,     color 0.2s ease;padding:var(--button-stack-space) var(--button-inline-space);min-height:var(--button-height-size);gap:var(--button-content-gap-space);border-radius:var(--button-border-radius);font-family:var(--button-label-font-family);font-weight:var(--font-weight-bold);font-size:var(--button-label-font-size);line-height:var(--button-label-line-height);letter-spacing:var(--letter-space-0-p-5);text-transform:uppercase}.ds-button__label{display:inline-flex;align-items:center;gap:inherit}.ds-button--primary-brand{background-color:var(--button-primary-brand-bg-color-idle);color:var(--button-primary-brand-label-color)}.ds-button--primary-brand:hover:not(:disabled){background-color:var(--button-primary-brand-bg-color-hover)}.ds-button--primary-brand:active:not(:disabled){background-color:var(--button-primary-brand-bg-color-active)}.ds-button--primary-neutral{background-color:var(--button-primary-neutral-bg-color-idle);color:var(--button-primary-neutral-label-color)}.ds-button--primary-neutral:hover:not(:disabled){background-color:var(--button-primary-neutral-bg-color-hover)}.ds-button--primary-neutral:active:not(:disabled){background-color:var(--button-primary-neutral-bg-color-active)}.ds-button--primary-success{background-color:var(--button-primary-success-bg-color-idle);color:var(--button-primary-success-label-color)}.ds-button--primary-success:hover:not(:disabled){background-color:var(--button-primary-success-bg-color-hover)}.ds-button--primary-success:active:not(:disabled){background-color:var(--button-primary-success-bg-color-active)}.ds-button--secondary{background-color:var(--button-secondary-bg-color-idle);color:var(--button-secondary-label-color)}.ds-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-bg-color-hover)}.ds-button--secondary:active:not(:disabled){background-color:var(--button-secondary-bg-color-active)}.ds-button--tertiary-neutral{background-color:transparent;color:var(--button-tertiary-neutral-label-color);border:var(--button-border-width-size) solid var(--button-tertiary-neutral-border-color-idle)}.ds-button--tertiary-neutral:hover:not(:disabled){background-color:var(--button-tertiary-neutral-bg-color-hover);border-color:var(--button-tertiary-neutral-border-color-hover)}.ds-button--tertiary-neutral:active:not(:disabled){background-color:var(--button-tertiary-neutral-bg-color-active)}.ds-button--tertiary-success{background-color:transparent;color:var(--button-tertiary-success-label-color);border:var(--button-border-width-size) solid var(--button-tertiary-success-border-color)}.ds-button--tertiary-success:hover:not(:disabled){background-color:var(--button-tertiary-success-bg-color-hover)}.ds-button--ghost{background-color:transparent;color:var(--button-ghost-label-color)}.ds-button--ghost:hover:not(:disabled){background-color:var(--button-ghost-bg-color-hover)}.ds-button--ghost:active:not(:disabled){background-color:var(--button-ghost-bg-color-active)}.ds-button--disabled,.ds-button:disabled{cursor:not-allowed;background-color:var(--button-disabled-bg-color);color:var(--button-disabled-label-color);border-color:var(--button-disabled-border-color)}.ds-button--disabled:hover,.ds-button--disabled:active,.ds-button:disabled:hover,.ds-button:disabled:active{background-color:var(--button-disabled-bg-color);color:var(--button-disabled-label-color);border-color:var(--button-disabled-border-color)}.ds-button:focus-visible{outline:2px solid var(--core-color-primary);outline-offset:2px}"}},[257,"ds-button",{variant:[1],disabled:[4]}]);function n(){"undefined"!=typeof customElements&&["ds-button"].forEach((r=>{"ds-button"===r&&(customElements.get(o(r))||customElements.define(o(r),e))}))}n();const b=e,s=n;export{b as DsButton,s as defineCustomElement}
+import{t as o,p as r,H as t,h as a}from"./index.js";const e=r(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.variant="primary-brand",this.disabled=!1}render(){return a("button",{key:"b2c29af56fa84e6274900496d1a57bf7be6070e0",class:{"ds-button":!0,["ds-button--"+this.variant]:!0,"ds-button--disabled":this.disabled},disabled:this.disabled},a("slot",{key:"c87fb66dffa329b2911752390d69d808aea83ead",name:"icon-start"}),a("span",{key:"3049998d0fca7eef41dc5bbc51ab14d396855840",class:"ds-button__label"},a("slot",{key:"540e93a8de6f0be305963e7b05b90dcbacda6f37"})),a("slot",{key:"f48be5683052a40bb97436f20b219a42fb09319a",name:"icon-end"}))}static get style(){return":host{display:inline-block}.ds-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;transition:background-color 0.2s ease,     border-color 0.2s ease,     color 0.2s ease;padding:var(--button-stack-space) var(--button-inline-space);min-height:var(--button-height-size);gap:var(--button-content-gap-space);border-radius:var(--button-border-radius);font-family:var(--button-label-font-family);font-weight:var(--font-weight-bold);font-size:var(--button-label-font-size);line-height:var(--button-label-line-height);letter-spacing:var(--letter-space-0-p-5);text-transform:uppercase}.ds-button__label{display:inline-flex;align-items:center;gap:inherit}::slotted(ds-icon){--icon-size:var(--icon-size, 24px);color:inherit;flex-shrink:0}.ds-button--primary-brand{background-color:var(--button-primary-brand-bg-color-idle);color:var(--button-primary-brand-label-color)}.ds-button--primary-brand:hover:not(:disabled){background-color:var(--button-primary-brand-bg-color-hover)}.ds-button--primary-brand:active:not(:disabled){background-color:var(--button-primary-brand-bg-color-active)}.ds-button--primary-neutral{background-color:var(--button-primary-neutral-bg-color-idle);color:var(--button-primary-neutral-label-color)}.ds-button--primary-neutral:hover:not(:disabled){background-color:var(--button-primary-neutral-bg-color-hover)}.ds-button--primary-neutral:active:not(:disabled){background-color:var(--button-primary-neutral-bg-color-active)}.ds-button--primary-success{background-color:var(--button-primary-success-bg-color-idle);color:var(--button-primary-success-label-color)}.ds-button--primary-success:hover:not(:disabled){background-color:var(--button-primary-success-bg-color-hover)}.ds-button--primary-success:active:not(:disabled){background-color:var(--button-primary-success-bg-color-active)}.ds-button--secondary{background-color:var(--button-secondary-bg-color-idle);color:var(--button-secondary-label-color)}.ds-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-bg-color-hover)}.ds-button--secondary:active:not(:disabled){background-color:var(--button-secondary-bg-color-active)}.ds-button--tertiary-neutral{background-color:transparent;color:var(--button-tertiary-neutral-label-color);border:var(--button-border-width-size) solid var(--button-tertiary-neutral-border-color-idle)}.ds-button--tertiary-neutral:hover:not(:disabled){background-color:var(--button-tertiary-neutral-bg-color-hover);border-color:var(--button-tertiary-neutral-border-color-hover)}.ds-button--tertiary-neutral:active:not(:disabled){background-color:var(--button-tertiary-neutral-bg-color-active)}.ds-button--tertiary-success{background-color:transparent;color:var(--button-tertiary-success-label-color);border:var(--button-border-width-size) solid var(--button-tertiary-success-border-color)}.ds-button--tertiary-success:hover:not(:disabled){background-color:var(--button-tertiary-success-bg-color-hover)}.ds-button--ghost{background-color:transparent;color:var(--button-ghost-label-color)}.ds-button--ghost:hover:not(:disabled){background-color:var(--button-ghost-bg-color-hover)}.ds-button--ghost:active:not(:disabled){background-color:var(--button-ghost-bg-color-active)}.ds-button--disabled,.ds-button:disabled{cursor:not-allowed;background-color:var(--button-disabled-bg-color);color:var(--button-disabled-label-color);border-color:var(--button-disabled-border-color)}.ds-button--disabled:hover,.ds-button--disabled:active,.ds-button:disabled:hover,.ds-button:disabled:active{background-color:var(--button-disabled-bg-color);color:var(--button-disabled-label-color);border-color:var(--button-disabled-border-color)}.ds-button:focus-visible{outline:2px solid var(--core-color-primary);outline-offset:2px}"}},[257,"ds-button",{variant:[1],disabled:[4]}]);function n(){"undefined"!=typeof customElements&&["ds-button"].forEach((r=>{"ds-button"===r&&(customElements.get(o(r))||customElements.define(o(r),e))}))}n();const b=e,s=n;export{b as DsButton,s as defineCustomElement}

package/dist/components/ds-card.js

@@ -1 +1 @@
-import{t as a,p as r,H as d,h as s}from"./index.js";const e=r(class extends d{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.surface="primary"}render(){return s("div",{key:"545dfb7389201a046b465e96723fdc8ad5cd1160",class:{"ds-card":!0,["ds-card--"+this.surface]:!0}},this.cardTitle&&s("div",{key:"63523222100e039098a941c2125df63a7bc8a0ee",class:"ds-card__header"},s("h3",{key:"7e60906b0aeb4d8d20fc09a85d06f4d0bd4a95ae",class:"ds-card__title"},this.cardTitle)),s("div",{key:"544d6b4e6ac95745261ee73c81f2d01c2806afd3",class:"ds-card__content"},s("slot",{key:"9102bcc585687daf5d954059a138ad7bac27b640"})))}static get style(){return":host{display:block}.ds-card{border-radius:var(--border-radius-lg, 8px);overflow:hidden;transition:box-shadow 0.2s ease}.ds-card--primary{background-color:var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));box-shadow:var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1))}.ds-card--secondary{background-color:var(--surface-color-secondary, #F8F9FA);box-shadow:var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08))}.ds-card__header{padding:var(--space-2-x, 16px) var(--space-2-x, 16px) 0}.ds-card__title{margin:0;font-family:var(--font-family-gotham-narrow, sans-serif);font-weight:var(--font-weight-bold, 700);font-size:var(--headline-3-font-size, 20px);line-height:var(--headline-3-line-height, 24px);color:var(--text-color-primary, #232629)}.ds-card__content{padding:var(--space-2-x, 16px)}.ds-card--primary:hover{box-shadow:var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12))}"}},[257,"ds-card",{surface:[1],cardTitle:[1,"card-title"]}]);function c(){"undefined"!=typeof customElements&&["ds-card"].forEach((r=>{"ds-card"===r&&(customElements.get(a(r))||customElements.define(a(r),e))}))}c();const o=e,t=c;export{o as DsCard,t as defineCustomElement}
+import{t as a,p as r,H as e,h as s}from"./index.js";const d=r(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.surface="primary"}render(){return s("div",{key:"0709463754ee76974475f214840ade290ee7aa83",class:{"ds-card":!0,["ds-card--"+this.surface]:!0}},this.cardTitle&&s("div",{key:"e161468e870e419852e6ef9f92ab9fc24ac60635",class:"ds-card__header"},s("h3",{key:"8cccde3f7e5ea185ef24d90312439d2e49621504",class:"ds-card__title"},this.cardTitle)),s("div",{key:"47457839b1fa00f261c1fbfb8842904fb9bf8245",class:"ds-card__content"},s("slot",{key:"009a1b1e7411daec2c67fd084d654de71875222e"})))}static get style(){return":host{display:block}.ds-card{border-radius:var(--border-radius-lg, 8px);overflow:hidden;transition:box-shadow 0.2s ease}.ds-card--primary{background-color:var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));box-shadow:var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1))}.ds-card--secondary{background-color:var(--surface-color-secondary, #F8F9FA);box-shadow:var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08))}.ds-card__header{padding:var(--space-2-x, 16px) var(--space-2-x, 16px) 0}.ds-card__title{margin:0;font-family:var(--font-family-gotham-narrow, sans-serif);font-weight:var(--font-weight-bold, 700);font-size:var(--headline-3-font-size, 20px);line-height:var(--headline-3-line-height, 24px);color:var(--text-color-primary, #232629)}.ds-card__content{padding:var(--space-2-x, 16px)}.ds-card--primary:hover{box-shadow:var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12))}"}},[257,"ds-card",{surface:[1],cardTitle:[1,"card-title"]}]);function o(){"undefined"!=typeof customElements&&["ds-card"].forEach((r=>{"ds-card"===r&&(customElements.get(a(r))||customElements.define(a(r),d))}))}o();const c=d,t=o;export{c as DsCard,t as defineCustomElement}

package/dist/components/ds-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsIcon extends Components.DsIcon, HTMLElement {}
+export const DsIcon: {
+    prototype: DsIcon;
+    new (): DsIcon;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-icon.js

@@ -0,0 +1 @@
+import{t,p as i,H as s,h as e}from"./index.js";const n=new Map,o=new Map,r=i(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.size=24,this.color="currentColor",this.basePath="/icons",this.lazy=!1,this.svgContent="",this.isLoading=!1,this.hasError=!1,this.isVisible=!1}connectedCallback(){this.lazy?this.setupIntersectionObserver():this.loadIcon()}disconnectedCallback(){this.observer?.disconnect()}onNameChange(){this.lazy&&!this.isVisible||this.loadIcon()}onBasePathChange(){this.lazy&&!this.isVisible||this.loadIcon()}setupIntersectionObserver(){"undefined"!=typeof IntersectionObserver?(this.observer=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(this.isVisible=!0,this.loadIcon(),this.observer?.disconnect())}))}),{rootMargin:"50px"}),this.observer.observe(this.el)):this.loadIcon()}async loadIcon(){if(!this.name)return void(this.hasError=!0);const t=`${this.basePath}/${this.name}.svg`;if(n.has(t))return this.svgContent=n.get(t),void(this.hasError=!1);if(o.has(t)){try{this.svgContent=await o.get(t),this.hasError=!1}catch{this.hasError=!0}return}this.isLoading=!0,this.hasError=!1;const i=this.fetchIcon(t);o.set(t,i);try{this.svgContent=await i,n.set(t,this.svgContent),this.hasError=!1}catch{this.hasError=!0,this.svgContent=""}finally{this.isLoading=!1,o.delete(t)}}async fetchIcon(t){const i=await fetch(t);if(!i.ok)throw Error("Failed to load icon: "+t);const s=await i.text();if(!s.includes("<svg"))throw Error("Invalid SVG content: "+t);return s}render(){const t=!this.label;return e("span",{key:"f3c397e6532cf9022416cf53458dd6d0b128a3ed",class:{"ds-icon":!0,"ds-icon--loading":this.isLoading,"ds-icon--error":this.hasError},style:{"--icon-size":this.size+"px","--icon-color":this.color},role:t?"presentation":"img","aria-hidden":t?"true":void 0,"aria-label":this.label},this.svgContent?e("span",{class:"ds-icon__svg",innerHTML:this.svgContent}):this.hasError?e("span",{class:"ds-icon__error",title:`Icon "${this.name}" not found`},e("svg",{viewBox:"0 0 24 24",fill:"currentColor"},e("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}))):null)}get el(){return this}static get watchers(){return{name:[{onNameChange:0}],basePath:[{onBasePathChange:0}]}}static get style(){return":host{display:inline-flex;align-items:center;justify-content:center}.ds-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size, 24px);height:var(--icon-size, 24px);color:var(--icon-color, currentColor);flex-shrink:0}.ds-icon__svg{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ds-icon__svg svg{width:100%;height:100%;fill:currentColor}.ds-icon--loading{opacity:0.5}.ds-icon--error{opacity:0.3}.ds-icon__error{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ds-icon__error svg{width:100%;height:100%;fill:currentColor}"}},[1,"ds-icon",{name:[1],size:[2],color:[1],basePath:[1,"base-path"],lazy:[4],label:[1],svgContent:[32],isLoading:[32],hasError:[32]},void 0,{name:[{onNameChange:0}],basePath:[{onBasePathChange:0}]}]);function h(){"undefined"!=typeof customElements&&["ds-icon"].forEach((i=>{"ds-icon"===i&&(customElements.get(t(i))||customElements.define(t(i),r))}))}h();const a=r,c=h;export{a as DsIcon,c as defineCustomElement}