@marioschmidt/design-system-components 1.3.1 → 1.3.3

package/dist/components/p-o-zDLqwP.js

@@ -0,0 +1 @@
+import{t,p as e,H as s,h as n}from"./index.js";const i=new Map,a=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.basePath="/icons",this.svgContent=""}connectedCallback(){this.loadIcon()}onNameChange(){this.loadIcon()}async loadIcon(){if(!this.name)return;const t=`${this.basePath}/${this.name}.svg`;if(i.has(t))this.svgContent=i.get(t);else try{const e=await fetch(t);if(e.ok){const s=await e.text();i.set(t,s),this.svgContent=s}}catch{}}render(){return n("span",{key:"f3549bfd71c52f0bf0b23c346fa5a665119c4033",class:"ds-icon",innerHTML:this.svgContent})}static get watchers(){return{name:[{onNameChange:0}]}}static get style(){return":host{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size, 24px);height:var(--icon-size, 24px);color:inherit}.ds-icon{display:flex;width:100%;height:100%}.ds-icon svg{width:100%;height:100%;fill:currentColor}"}},[1,"ds-icon",{name:[1],basePath:[1,"base-path"],svgContent:[32]},void 0,{name:[{onNameChange:0}]}]);function c(){"undefined"!=typeof customElements&&["ds-icon"].forEach((e=>{"ds-icon"===e&&(customElements.get(t(e))||customElements.define(t(e),a))}))}c();export{a as D,c as d}

package/dist/docs/ds-button/readme.md

@@ -4,12 +4,27 @@
 
 ## Properties
 
-| Property   | Attribute  | Description                                                   | Type                                                                                                                              | Default           |
-| ---------- | ---------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
-| `disabled` | `disabled` | Disables the button interaction and applies disabled styling. | `boolean`                                                                                                                         | `false`           |
-| `variant`  | `variant`  | Button variant determining visual style.                      | `"ghost" \| "primary-brand" \| "primary-neutral" \| "primary-success" \| "secondary" \| "tertiary-neutral" \| "tertiary-success"` | `'primary-brand'` |
+| Property       | Attribute       | Description                              | Type                                                                                                                              | Default           |
+| -------------- | --------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `disabled`     | `disabled`      | Disables the button.                     | `boolean`                                                                                                                         | `false`           |
+| `icon`         | `icon`          | Icon name to display (optional).         | `string \| undefined`                                                                                                             | `undefined`       |
+| `iconPosition` | `icon-position` | Icon position: 'start' or 'end'.         | `"end" \| "start"`                                                                                                                | `'start'`         |
+| `variant`      | `variant`       | Button variant determining visual style. | `"ghost" \| "primary-brand" \| "primary-neutral" \| "primary-success" \| "secondary" \| "tertiary-neutral" \| "tertiary-success"` | `'primary-brand'` |
 
 
+## Dependencies
+
+### Depends on
+
+- [ds-icon](../ds-icon)
+
+### Graph
+```mermaid
+graph TD;
+  ds-button --> ds-icon
+  style ds-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/docs/ds-icon/readme.md

@@ -4,16 +4,25 @@
 
 ## Properties
 
-| Property            | Attribute   | Description                                                                                                      | Type                  | Default          |
-| ------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- | --------------------- | ---------------- |
-| `basePath`          | `base-path` | Base path for loading icon SVG files.                                                                            | `string`              | `'/icons'`       |
-| `color`             | `color`     | Color of the icon. Accepts any valid CSS color value. Icons use currentColor by default, inheriting from parent. | `string`              | `'currentColor'` |
-| `label`             | `label`     | Accessible label for screen readers. If provided, icon is treated as semantic (not decorative).                  | `string \| undefined` | `undefined`      |
-| `lazy`              | `lazy`      | Enable lazy loading with IntersectionObserver. Icon will only load when visible in viewport.                     | `boolean`             | `false`          |
-| `name` _(required)_ | `name`      | Name of the icon to display (without .svg extension). Must match a file in the icons directory.                  | `string`              | `undefined`      |
-| `size`              | `size`      | Size of the icon in pixels.                                                                                      | `number`              | `24`             |
+| Property            | Attribute   | Description                                | Type     | Default     |
+| ------------------- | ----------- | ------------------------------------------ | -------- | ----------- |
+| `basePath`          | `base-path` | Base path for icon SVG files.              | `string` | `'/icons'`  |
+| `name` _(required)_ | `name`      | Name of the icon (without .svg extension). | `string` | `undefined` |
 
 
+## Dependencies
+
+### Used by
+
+ - [ds-button](../ds-button)
+
+### Graph
+```mermaid
+graph TD;
+  ds-button --> ds-icon
+  style ds-icon fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

package/dist/esm/bds.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-DUrpTa_b.js';
-export { s as setNonce } from './index-DUrpTa_b.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-B4AUg0uO.js';
+export { s as setNonce } from './index-B4AUg0uO.js';
 
 /*
  Stencil Client Patch Browser v4.41.0 | MIT Licensed | https://stenciljs.com
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["ds-button_3",[[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);
+  return bootstrapLazy([["ds-button_3",[[257,"ds-button",{"variant":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}],[257,"ds-card",{"surface":[1],"cardTitle":[1,"card-title"]}],[1,"ds-icon",{"name":[1],"basePath":[1,"base-path"],"svgContent":[32]},null,{"name":[{"onNameChange":0}]}]]]], options);
 });

package/dist/esm/ds-button_3.entry.js

@@ -1,27 +1,30 @@
-import { r as registerInstance, h, a as getElement } from './index-DUrpTa_b.js';
+import { r as registerInstance, h } from './index-B4AUg0uO.js';
 
-const dsButtonCss = () => `: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}`;
+const dsButtonCss = () => `: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}`;
 
 const DsButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /**
          * Button variant determining visual style.
-         * @default 'primary-brand'
          */
         this.variant = 'primary-brand';
         /**
-         * Disables the button interaction and applies disabled styling.
-         * @default false
+         * Disables the button.
          */
         this.disabled = false;
+        /**
+         * Icon position: 'start' or 'end'.
+         */
+        this.iconPosition = 'start';
     }
     render() {
-        return (h("button", { key: 'b2c29af56fa84e6274900496d1a57bf7be6070e0', class: {
+        const iconEl = this.icon ? h("ds-icon", { name: this.icon }) : null;
+        return (h("button", { key: '000508b5713956932132412d59f9ba1b9baa96c7', class: {
                 'ds-button': true,
                 [`ds-button--${this.variant}`]: true,
                 'ds-button--disabled': this.disabled,
-            }, 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" })));
+            }, disabled: this.disabled }, this.iconPosition === 'start' && iconEl, h("span", { key: '1cf189f05c1f2cdb82f54f6f2283eaa9c6e38381', class: "ds-button__label" }, h("slot", { key: '89eadaa81aaa4e458e46b29e02291ad45c027101' })), this.iconPosition === 'end' && iconEl));
     }
 };
 DsButton.style = dsButtonCss();
@@ -37,173 +40,58 @@ const DsCard = class {
         this.surface = 'primary';
     }
     render() {
-        return (h("div", { key: '0709463754ee76974475f214840ade290ee7aa83', class: {
+        return (h("div", { key: '545dfb7389201a046b465e96723fdc8ad5cd1160', class: {
                 'ds-card': true,
                 [`ds-card--${this.surface}`]: true,
-            } }, 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' }))));
+            } }, 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' }))));
     }
 };
 DsCard.style = dsCardCss();
 
-const dsIconCss = () => `: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}`;
+const dsIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size, 24px);height:var(--icon-size, 24px);color:inherit}.ds-icon{display:flex;width:100%;height:100%}.ds-icon svg{width:100%;height:100%;fill:currentColor}`;
 
-/**
- * Icon cache shared between all ds-icon instances.
- * Prevents duplicate fetch requests for the same icon.
- */
 const iconCache = new Map();
-const pendingRequests = new Map();
 const DsIcon = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         /**
-         * 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;
-            return;
-        }
-        const iconUrl = `${this.basePath}/${this.name}.svg`;
-        // Check cache first
-        if (iconCache.has(iconUrl)) {
-            this.svgContent = iconCache.get(iconUrl);
-            this.hasError = false;
+        if (!this.name)
             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;
-            }
+        const url = `${this.basePath}/${this.name}.svg`;
+        if (iconCache.has(url)) {
+            this.svgContent = iconCache.get(url);
             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);
-        }
-    }
-    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}`);
+            // Silent fail
         }
-        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 }));
     }
-    get el() { return getElement(this); }
     static get watchers() { return {
         "name": [{
                 "onNameChange": 0
-            }],
-        "basePath": [{
-                "onBasePathChange": 0
             }]
     }; }
 };

package/dist/esm/{index-DUrpTa_b.js → index-B4AUg0uO.js}

@@ -253,10 +253,6 @@ var require_brace_expansion = __commonJS({
     }
   }
 });
-
-// src/utils/constants.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-var HTML_NS = "http://www.w3.org/1999/xhtml";
 var reWireGetterSetter = (instance, hostRef) => {
   var _a;
   const cmpMeta = hostRef.$cmpMeta$;
@@ -2124,9 +2120,6 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
-    if (propType & 2 /* Number */) {
-      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
-    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -2134,10 +2127,6 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   }
   return propValue;
 };
-var getElement = (ref) => {
-  var _a;
-  return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
-};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -2157,30 +2146,9 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
     }
-  } else if (memberName === "style") {
-    {
-      for (const prop in oldValue) {
-        if (!newValue || newValue[prop] == null) {
-          if (prop.includes("-")) {
-            elm.style.removeProperty(prop);
-          } else {
-            elm.style[prop] = "";
-          }
-        }
-      }
-    }
-    for (const prop in newValue) {
-      if (!oldValue || newValue[prop] !== oldValue[prop]) {
-        if (prop.includes("-")) {
-          elm.style.setProperty(prop, newValue[prop]);
-        } else {
-          elm.style[prop] = newValue[prop];
-        }
-      }
-    }
   } else if (memberName === "key") ; else {
     const isComplex = isComplexType(newValue);
-    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+    if ((isProp || isComplex && newValue !== null) && true) {
       try {
         if (!elm.tagName.includes("-")) {
           const n = newValue == null ? "" : newValue;
@@ -2272,21 +2240,14 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   if (newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
   } else {
-    if (!isSvgMode) {
-      isSvgMode = newVNode2.$tag$ === "svg";
-    }
     if (!win.document) {
       throw new Error(
         "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
       );
     }
-    elm = newVNode2.$elm$ = win.document.createElementNS(
-      isSvgMode ? SVG_NS : HTML_NS,
+    elm = newVNode2.$elm$ = win.document.createElement(
       newVNode2.$tag$
-    ) ;
-    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
-      isSvgMode = false;
-    }
+    );
     {
       updateElement(null, newVNode2, isSvgMode);
     }
@@ -2299,13 +2260,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
-    {
-      if (newVNode2.$tag$ === "svg") {
-        isSvgMode = false;
-      } else if (elm.tagName === "foreignObject") {
-        isSvgMode = true;
-      }
-    }
   }
   elm["s-hn"] = hostTagName;
   return elm;
@@ -2463,9 +2417,6 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   if (text === null) {
-    {
-      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
-    }
     {
       if (tag === "slot" && !useNativeShadowDom) {
         if (oldVNode.$name$ !== newVNode2.$name$) {
@@ -2488,9 +2439,6 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     } else ;
-    if (isSvgMode && tag === "svg") {
-      isSvgMode = false;
-    }
   } else if (oldVNode.$text$ !== text) {
     elm.data = text;
   }
@@ -3184,4 +3132,4 @@ function transformTag(tag) {
   return tag;
 }
 
-export { getElement as a, bootstrapLazy as b, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { bootstrapLazy as b, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-DUrpTa_b.js';
-export { s as setNonce } from './index-DUrpTa_b.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-B4AUg0uO.js';
+export { s as setNonce } from './index-B4AUg0uO.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["ds-button_3",[[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);
+  return bootstrapLazy([["ds-button_3",[[257,"ds-button",{"variant":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}],[257,"ds-card",{"surface":[1],"cardTitle":[1,"card-title"]}],[1,"ds-icon",{"name":[1],"basePath":[1,"base-path"],"svgContent":[32]},null,{"name":[{"onNameChange":0}]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/types/components.d.ts

@@ -10,10 +10,19 @@ export { ButtonVariant } from "./ds-button/ds-button";
 export namespace Components {
     interface DsButton {
         /**
-          * Disables the button interaction and applies disabled styling.
+          * Disables the button.
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Icon name to display (optional).
+         */
+        "icon"?: string;
+        /**
+          * Icon position: 'start' or 'end'.
+          * @default 'start'
+         */
+        "iconPosition": 'start' | 'end';
         /**
           * Button variant determining visual style.
           * @default 'primary-brand'
@@ -33,34 +42,14 @@ export namespace Components {
     }
     interface DsIcon {
         /**
-          * Base path for loading icon SVG files.
+          * Base path for icon SVG files.
           * @default '/icons'
          */
         "basePath": string;
         /**
-          * Color of the icon. Accepts any valid CSS color value. Icons use currentColor by default, inheriting from parent.
-          * @default 'currentColor'
-         */
-        "color": string;
-        /**
-          * Accessible label for screen readers. If provided, icon is treated as semantic (not decorative).
-         */
-        "label"?: string;
-        /**
-          * Enable lazy loading with IntersectionObserver. Icon will only load when visible in viewport.
-          * @default false
-         */
-        "lazy": boolean;
-        /**
-          * Name of the icon to display (without .svg extension). Must match a file in the icons directory.
-          * @example "add", "arrow-left", "close"
+          * Name of the icon (without .svg extension).
          */
         "name": string;
-        /**
-          * Size of the icon in pixels.
-          * @default 24
-         */
-        "size": number;
     }
 }
 declare global {
@@ -91,10 +80,19 @@ declare global {
 declare namespace LocalJSX {
     interface DsButton {
         /**
-          * Disables the button interaction and applies disabled styling.
+          * Disables the button.
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Icon name to display (optional).
+         */
+        "icon"?: string;
+        /**
+          * Icon position: 'start' or 'end'.
+          * @default 'start'
+         */
+        "iconPosition"?: 'start' | 'end';
         /**
           * Button variant determining visual style.
           * @default 'primary-brand'
@@ -114,34 +112,14 @@ declare namespace LocalJSX {
     }
     interface DsIcon {
         /**
-          * Base path for loading icon SVG files.
+          * Base path for icon SVG files.
           * @default '/icons'
          */
         "basePath"?: string;
         /**
-          * Color of the icon. Accepts any valid CSS color value. Icons use currentColor by default, inheriting from parent.
-          * @default 'currentColor'
-         */
-        "color"?: string;
-        /**
-          * Accessible label for screen readers. If provided, icon is treated as semantic (not decorative).
-         */
-        "label"?: string;
-        /**
-          * Enable lazy loading with IntersectionObserver. Icon will only load when visible in viewport.
-          * @default false
-         */
-        "lazy"?: boolean;
-        /**
-          * Name of the icon to display (without .svg extension). Must match a file in the icons directory.
-          * @example "add", "arrow-left", "close"
+          * Name of the icon (without .svg extension).
          */
         "name": string;
-        /**
-          * Size of the icon in pixels.
-          * @default 24
-         */
-        "size"?: number;
     }
     interface IntrinsicElements {
         "ds-button": DsButton;

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

@@ -1,21 +1,20 @@
-/**
- * Button variants matching the design system specification.
- * - Primary variants: Filled background (brand, neutral, success)
- * - Secondary: Neutral filled background
- * - Tertiary variants: Outlined style (neutral, success)
- * - Ghost: Text only, no background/border
- */
 export type ButtonVariant = 'primary-brand' | 'primary-neutral' | 'primary-success' | 'secondary' | 'tertiary-neutral' | 'tertiary-success' | 'ghost';
 export declare class DsButton {
     /**
      * Button variant determining visual style.
-     * @default 'primary-brand'
      */
     variant: ButtonVariant;
     /**
-     * Disables the button interaction and applies disabled styling.
-     * @default false
+     * Disables the button.
      */
     disabled: boolean;
+    /**
+     * Icon name to display (optional).
+     */
+    icon?: string;
+    /**
+     * Icon position: 'start' or 'end'.
+     */
+    iconPosition: 'start' | 'end';
     render(): any;
 }