@marioschmidt/design-system-components 1.3.0 → 1.3.2

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'
@@ -31,6 +40,17 @@ export namespace Components {
          */
         "surface": 'primary' | 'secondary';
     }
+    interface DsIcon {
+        /**
+          * Base path for icon SVG files.
+          * @default '/icons'
+         */
+        "basePath": string;
+        /**
+          * Name of the icon (without .svg extension).
+         */
+        "name": string;
+    }
 }
 declare global {
     interface HTMLDsButtonElement extends Components.DsButton, HTMLStencilElement {
@@ -45,18 +65,34 @@ declare global {
         prototype: HTMLDsCardElement;
         new (): HTMLDsCardElement;
     };
+    interface HTMLDsIconElement extends Components.DsIcon, HTMLStencilElement {
+    }
+    var HTMLDsIconElement: {
+        prototype: HTMLDsIconElement;
+        new (): HTMLDsIconElement;
+    };
     interface HTMLElementTagNameMap {
         "ds-button": HTMLDsButtonElement;
         "ds-card": HTMLDsCardElement;
+        "ds-icon": HTMLDsIconElement;
     }
 }
 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'
@@ -74,9 +110,21 @@ declare namespace LocalJSX {
          */
         "surface"?: 'primary' | 'secondary';
     }
+    interface DsIcon {
+        /**
+          * Base path for icon SVG files.
+          * @default '/icons'
+         */
+        "basePath"?: string;
+        /**
+          * Name of the icon (without .svg extension).
+         */
+        "name": string;
+    }
     interface IntrinsicElements {
         "ds-button": DsButton;
         "ds-card": DsCard;
+        "ds-icon": DsIcon;
     }
 }
 export { LocalJSX as JSX };
@@ -85,6 +133,7 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "ds-button": LocalJSX.DsButton & JSXBase.HTMLAttributes<HTMLDsButtonElement>;
             "ds-card": LocalJSX.DsCard & JSXBase.HTMLAttributes<HTMLDsCardElement>;
+            "ds-icon": LocalJSX.DsIcon & JSXBase.HTMLAttributes<HTMLDsIconElement>;
         }
     }
 }

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;
 }

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

@@ -0,0 +1,15 @@
+export declare class DsIcon {
+    /**
+     * Name of the icon (without .svg extension).
+     */
+    name: string;
+    /**
+     * Base path for icon SVG files.
+     */
+    basePath: string;
+    svgContent: string;
+    connectedCallback(): void;
+    onNameChange(): void;
+    private loadIcon;
+    render(): any;
+}

package/dist/www/build/bds.esm.js

@@ -1 +1 @@
-import{p as a,g as t,b as r}from"./p-Bi1FQZ1d.js";export{s as setNonce}from"./p-Bi1FQZ1d.js";(()=>{const s=import.meta.url,t={};return""!==s&&(t.resourcesUrl=new URL(".",s).href),a(t)})().then((async a=>(await t(),r([["p-3f9754c9",[[257,"ds-button",{variant:[1],disabled:[4]}],[257,"ds-card",{surface:[1],cardTitle:[1,"card-title"]}]]]],a))));
+import{p as a,g as n,b as t}from"./p-B4AUg0uO.js";export{s as setNonce}from"./p-B4AUg0uO.js";(()=>{const n=import.meta.url,s={};return""!==n&&(s.resourcesUrl=new URL(".",n).href),a(s)})().then((async a=>(await n(),t([["p-72d44f50",[[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}]}]]]],a))));

package/dist/www/build/p-72d44f50.entry.js

@@ -0,0 +1 @@
+import{r,h as o}from"./p-B4AUg0uO.js";const t=class{constructor(o){r(this,o),this.variant="primary-brand",this.disabled=!1,this.iconPosition="start"}render(){const r=this.icon?o("ds-icon",{name:this.icon}):null;return o("button",{key:"000508b5713956932132412d59f9ba1b9baa96c7",class:{"ds-button":!0,[`ds-button--${this.variant}`]:!0,"ds-button--disabled":this.disabled},disabled:this.disabled},"start"===this.iconPosition&&r,o("span",{key:"1cf189f05c1f2cdb82f54f6f2283eaa9c6e38381",class:"ds-button__label"},o("slot",{key:"89eadaa81aaa4e458e46b29e02291ad45c027101"})),"end"===this.iconPosition&&r)}};t.style=":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}";const a=class{constructor(o){r(this,o),this.surface="primary"}render(){return o("div",{key:"545dfb7389201a046b465e96723fdc8ad5cd1160",class:{"ds-card":!0,[`ds-card--${this.surface}`]:!0}},this.cardTitle&&o("div",{key:"63523222100e039098a941c2125df63a7bc8a0ee",class:"ds-card__header"},o("h3",{key:"7e60906b0aeb4d8d20fc09a85d06f4d0bd4a95ae",class:"ds-card__title"},this.cardTitle)),o("div",{key:"544d6b4e6ac95745261ee73c81f2d01c2806afd3",class:"ds-card__content"},o("slot",{key:"9102bcc585687daf5d954059a138ad7bac27b640"})))}};a.style=":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))}";const e=new Map,s=class{constructor(o){r(this,o),this.basePath="/icons",this.svgContent=""}connectedCallback(){this.loadIcon()}onNameChange(){this.loadIcon()}async loadIcon(){if(!this.name)return;const r=`${this.basePath}/${this.name}.svg`;if(e.has(r))this.svgContent=e.get(r);else try{const o=await fetch(r);if(o.ok){const t=await o.text();e.set(r,t),this.svgContent=t}}catch{}}render(){return o("span",{key:"f3549bfd71c52f0bf0b23c346fa5a665119c4033",class:"ds-icon",innerHTML:this.svgContent})}static get watchers(){return{name:[{onNameChange:0}]}}};s.style=":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}";export{t as ds_button,a as ds_card,s as ds_icon}