@marioschmidt/design-system-components 1.3.0 → 1.3.2

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

@@ -3,21 +3,24 @@ export class DsButton {
     constructor() {
         /**
          * 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("span", { key: '8d7cd171306ed6e7b3507fea53e54df4d886d1a0', class: "ds-button__label" }, h("slot", { key: 'c040145f092daf57dd086a9991bcb5d0dc4f97dc' }))));
+            }, disabled: this.disabled }, this.iconPosition === 'start' && iconEl, h("span", { key: '1cf189f05c1f2cdb82f54f6f2283eaa9c6e38381', class: "ds-button__label" }, h("slot", { key: '89eadaa81aaa4e458e46b29e02291ad45c027101' })), this.iconPosition === 'end' && iconEl));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -50,10 +53,7 @@ export class DsButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'primary-brand'"
-                        }],
+                    "tags": [],
                     "text": "Button variant determining visual style."
                 },
                 "getter": false,
@@ -73,17 +73,53 @@ export class DsButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Disables the button interaction and applies disabled styling."
+                    "tags": [],
+                    "text": "Disables the button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name to display (optional)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position: 'start' or 'end'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'start'"
             }
         };
     }

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

@@ -0,0 +1,20 @@
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: inherit;
+}
+
+.ds-icon {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.ds-icon svg {
+  width: 100%;
+  height: 100%;
+  fill: currentColor;
+}

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

@@ -0,0 +1,106 @@
+import { h } from "@stencil/core";
+const iconCache = new Map();
+export class DsIcon {
+    constructor() {
+        /**
+         * Base path for icon SVG files.
+         */
+        this.basePath = '/icons';
+        this.svgContent = '';
+    }
+    connectedCallback() {
+        this.loadIcon();
+    }
+    onNameChange() {
+        this.loadIcon();
+    }
+    async loadIcon() {
+        if (!this.name)
+            return;
+        const url = `${this.basePath}/${this.name}.svg`;
+        if (iconCache.has(url)) {
+            this.svgContent = iconCache.get(url);
+            return;
+        }
+        try {
+            const response = await fetch(url);
+            if (response.ok) {
+                const svg = await response.text();
+                iconCache.set(url, svg);
+                this.svgContent = svg;
+            }
+        }
+        catch {
+            // Silent fail
+        }
+    }
+    render() {
+        return (h("span", { key: 'f3549bfd71c52f0bf0b23c346fa5a665119c4033', class: "ds-icon", innerHTML: this.svgContent }));
+    }
+    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": [],
+                    "text": "Name of the icon (without .svg extension)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "basePath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base path for icon SVG files."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "base-path",
+                "defaultValue": "'/icons'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "svgContent": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "onNameChange"
+            }];
+    }
+}

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("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";import{d as e}from"./p-8SkbMDtJ.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{--icon-size:var(--icon-size);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-icon.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../../../../build-config/stencil/dist/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{D as o,d as s}from"./p-8SkbMDtJ.js";const t=o,p=s;export{t as DsIcon,p as defineCustomElement}