@marioschmidt/design-system-components 1.3.1 → 1.3.3

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

@@ -1,152 +1,41 @@
 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'
+         * Base path for icon SVG files.
          */
         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();
+        this.loadIcon();
     }
     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);
+        this.loadIcon();
     }
     async loadIcon() {
-        if (!this.name) {
-            this.hasError = true;
+        if (!this.name)
             return;
-        }
-        const iconUrl = `${this.basePath}/${this.name}.svg`;
-        // Check cache first
-        if (iconCache.has(iconUrl)) {
-            this.svgContent = iconCache.get(iconUrl);
-            this.hasError = false;
+        const url = `${this.basePath}/${this.name}.svg`;
+        if (iconCache.has(url)) {
+            this.svgContent = iconCache.get(url);
             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;
+            const response = await fetch(url);
+            if (response.ok) {
+                const svg = await response.text();
+                iconCache.set(url, svg);
+                this.svgContent = svg;
+            }
         }
         catch {
-            this.hasError = true;
-            this.svgContent = '';
-        }
-        finally {
-            this.isLoading = false;
-            pendingRequests.delete(iconUrl);
+            // Silent fail
         }
     }
-    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));
+        return (h("span", { key: 'f3549bfd71c52f0bf0b23c346fa5a665119c4033', class: "ds-icon", innerHTML: this.svgContent }));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -173,63 +62,14 @@ export class DsIcon {
                 "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."
+                    "tags": [],
+                    "text": "Name of the icon (without .svg extension)."
                 },
                 "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,
@@ -241,77 +81,26 @@ export class DsIcon {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'/icons'"
-                        }],
-                    "text": "Base path for loading icon SVG files."
+                    "tags": [],
+                    "text": "Base path for 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": {}
+            "svgContent": {}
         };
     }
-    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "name",
                 "methodName": "onNameChange"
-            }, {
-                "propName": "basePath",
-                "methodName": "onBasePathChange"
             }];
     }
 }

package/dist/collection/icons.js

@@ -0,0 +1,205 @@
+/**
+ * List of all available icon names in the design system.
+ * These correspond to SVG files in packages/icons/svg/dist/
+ */
+export const ICON_NAMES = [
+    '2-liga-logo',
+    'account',
+    'add',
+    'adjust',
+    'android',
+    'apple-ios',
+    'arrow-down',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'arscan',
+    'auto',
+    'autobild-logo',
+    'bams-logo',
+    'basketball',
+    'bild-club-logo',
+    'bild-logo',
+    'bildplay-logo',
+    'bildplus-logo',
+    'bildplus-logo-simple',
+    'bin',
+    'bookmark',
+    'boxing',
+    'bundesliga-logo',
+    'burgermenu',
+    'calendar',
+    'camera',
+    'cards',
+    'checklist',
+    'checkmark',
+    'checkmark-circled',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'clock',
+    'close',
+    'comment',
+    'computerbild-logo',
+    'controller',
+    'copy',
+    'credit-card',
+    'dark-mode',
+    'data-protection',
+    'desktop',
+    'desktop-checkmark',
+    'desktop-questionmark',
+    'digital',
+    'download',
+    'edit',
+    'enter-fullscreen',
+    'erotik',
+    'exclamationmark-circle',
+    'exit-fullscreen',
+    'external-intext',
+    'external-link',
+    'fast-back',
+    'fast-back-chevron',
+    'fast-back-filled',
+    'fast-forward',
+    'fast-forward-chevron',
+    'fast-forward-filled',
+    'fast-upward',
+    'football',
+    'fussball',
+    'geld',
+    'gesundheit',
+    'gewinnspiele',
+    'gtcs',
+    'handball',
+    'headphones',
+    'heart',
+    'hey-logo',
+    'hide',
+    'history',
+    'hockey',
+    'home',
+    'horoskop',
+    'image',
+    'image-gallery',
+    'imprint',
+    'information',
+    'input',
+    'kino',
+    'lifestyle',
+    'light-mode',
+    'list-checked',
+    'live-badge',
+    'locked',
+    'log-out',
+    'logged-in',
+    'login',
+    'lotto',
+    'mail',
+    'marktplatz-logo',
+    'maximize',
+    'maximize-pip',
+    'mein-verein',
+    'menu',
+    'minimize',
+    'minimize-pip',
+    'motorsport',
+    'mute',
+    'mypass',
+    'netid',
+    'news',
+    'news-ticker',
+    'notifications-off',
+    'notifications-on',
+    'ost-sport',
+    'paper',
+    'participate',
+    'pause',
+    'pause-filled',
+    'payment-mastercard',
+    'pin',
+    'placeholder',
+    'play',
+    'play-filled',
+    'podcast-amazon',
+    'podcast-applepodcast',
+    'podcast-deezer',
+    'podcast-googlepodcasts',
+    'podcast-spotify',
+    'politik',
+    'push-notification',
+    'questionmark-circle',
+    'quote',
+    'raetsel',
+    'ratgeber',
+    'regio',
+    'reise',
+    'reload',
+    'replay',
+    'ressorts',
+    'revocation',
+    'rewind-ten-sec',
+    'search',
+    'send',
+    'settings',
+    'sex-und-liebe',
+    'share',
+    'sharecast',
+    'shopping-cart',
+    'show',
+    'sign-up',
+    'skip-next',
+    'skip-next-chevron',
+    'skip-next-filled',
+    'skip-previous',
+    'skip-previous-chevron',
+    'skip-previous-filled',
+    'skip-ten-sec',
+    'smartphone',
+    'social-facebook',
+    'social-fb-messagner',
+    'social-google',
+    'social-instagram',
+    'social-linkedin',
+    'social-snapchat',
+    'social-whatsapp',
+    'social-x-twitter',
+    'social-xing',
+    'social-youtube',
+    'speed',
+    'sport',
+    'sport-bild-logo',
+    'sport-live',
+    'sport-ticker',
+    'sportimtv',
+    'ssl',
+    'star',
+    'substract',
+    'sz-ticker',
+    'telephone',
+    'tennis',
+    'three-dot-horizontal',
+    'three-dot-vertical',
+    'thumbs-down',
+    'thumbs-up',
+    'trending',
+    'tv',
+    'unlocked',
+    'unquote',
+    'unterhaltung',
+    'upload',
+    'us-sport',
+    'verimi',
+    'video',
+    'video-error',
+    'video-recommendations',
+    'volume-down',
+    'volume-up',
+    'vote',
+    'warning',
+    'web',
+    'wetter',
+    'wrestling',
+    'zoom-in',
+];

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

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../types/components";
+import type { Components, JSX } from "../../../../../build-config/stencil/dist/types/components";
 
 interface DsButton extends Components.DsButton, HTMLElement {}
 export const DsButton: {

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("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}
+import{t as o,p as r,H as t,h as a}from"./index.js";import{d as e}from"./p-o-zDLqwP.js";const n=r(class extends t{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.variant="primary-brand",this.disabled=!1,this.iconPosition="start"}render(){const o=this.icon?a("ds-icon",{name:this.icon}):null;return a("button",{key:"000508b5713956932132412d59f9ba1b9baa96c7",class:{"ds-button":!0,["ds-button--"+this.variant]:!0,"ds-button--disabled":this.disabled},disabled:this.disabled},"start"===this.iconPosition&&o,a("span",{key:"1cf189f05c1f2cdb82f54f6f2283eaa9c6e38381",class:"ds-button__label"},a("slot",{key:"89eadaa81aaa4e458e46b29e02291ad45c027101"})),"end"===this.iconPosition&&o)}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-icon{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],icon:[1],iconPosition:[1,"icon-position"]}]);function s(){"undefined"!=typeof customElements&&["ds-button","ds-icon"].forEach((r=>{switch(r){case"ds-button":customElements.get(o(r))||customElements.define(o(r),n);break;case"ds-icon":customElements.get(o(r))||e()}}))}s();const b=n,c=s;export{b as DsButton,c as defineCustomElement}

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

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../types/components";
+import type { Components, JSX } from "../../../../../build-config/stencil/dist/types/components";
 
 interface DsCard extends Components.DsCard, HTMLElement {}
 export const DsCard: {

package/dist/components/ds-card.js

@@ -1 +1 @@
-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}
+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}

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

@@ -1,4 +1,4 @@
-import type { Components, JSX } from "../types/components";
+import type { Components, JSX } from "../../../../../build-config/stencil/dist/types/components";
 
 interface DsIcon extends Components.DsIcon, HTMLElement {}
 export const DsIcon: {

package/dist/components/ds-icon.js

@@ -1 +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}
+import{D as o,d as s}from"./p-o-zDLqwP.js";const p=o,r=s;export{p as DsIcon,r as defineCustomElement}