@usecapsule/core-components 2.0.9 → 3.0.1

package/dist/collection/components/cpsl-app-bar/test/cpsl-app-bar.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslAppBar } from "../cpsl-app-bar";
+describe('cpsl-app-bar', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslAppBar],
+            html: `<cpsl-app-bar></cpsl-app-bar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-app-bar>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-app-bar>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-app-bar.spec.js.map

package/dist/collection/components/cpsl-app-bar/test/cpsl-app-bar.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-app-bar.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-app-bar/test/cpsl-app-bar.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,+BAA+B;SACtC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslAppBar } from '../cpsl-app-bar';\n\ndescribe('cpsl-app-bar', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslAppBar],\n      html: `<cpsl-app-bar></cpsl-app-bar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-app-bar>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-app-bar>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cpsl-avatar/cpsl-avatar.css

@@ -0,0 +1,31 @@
+:host {
+  --container-border-color: var(--cpsl-color-avatar-border);
+  --container-border-width: 1px;
+  --container-border-radius: var(--cpsl-border-radius-avatar);
+  --container-background-color: var(--cpsl-color-avatar-surface);
+  --container-padding: 4px;
+  --container-height: 40px;
+  --container-width: 40px;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+span {
+  display: inline-block;
+  height: var(--container-height);
+  width: var(--container-width);
+  border: var(--container-border-width) solid var(--container-border-color);
+  border-radius: var(--container-border-radius);
+  padding: var(--container-padding);
+  background-color: var(--container-background-color);
+}
+span.round {
+  border-radius: 1000px;
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}

package/dist/collection/components/cpsl-avatar/cpsl-avatar.js

@@ -0,0 +1,81 @@
+import { Host, h } from "@stencil/core";
+export class CpslAvatar {
+    constructor() {
+        this.alt = undefined;
+        this.src = undefined;
+        this.variant = 'square';
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'c148e7d268c681fa6a7273c109b9ab418f433c24' }, h("span", { key: 'd1f977ab0c5d6f6758f84fb33ed9e72d9a1270c9', class: { round: this.variant === 'round' } }, h("img", { key: '3a13f96266ee6476df2154a09b433dcf7ba44daf', src: this.src, alt: (_a = this.alt) !== null && _a !== void 0 ? _a : 'avatar' }))));
+    }
+    static get is() { return "cpsl-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The alternate text for the avatar image."
+                },
+                "attribute": "alt",
+                "reflect": false
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The source of the avatar image."
+                },
+                "attribute": "src",
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'round' | 'square'",
+                    "resolved": "\"round\" | \"square\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the avatar.\nOptions are: `\"round\"`, `\"square\".\nDefault is: `\"square\"`."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'square'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-avatar.js.map

package/dist/collection/components/cpsl-avatar/cpsl-avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-avatar.js","sourceRoot":"","sources":["../../../../src/components/cpsl-avatar/cpsl-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;;uBAgBkB,QAAQ;;IAE/C,MAAM;;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;gBAC9C,4DAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,QAAQ,GAAI,CAC5C,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-avatar',\n  styleUrl: 'cpsl-avatar.scss',\n  shadow: true,\n})\nexport class CpslAvatar {\n  /**\n   * The alternate text for the avatar image.\n   */\n  @Prop() alt?: string;\n\n  /**\n   * The source of the avatar image.\n   */\n  @Prop() src: string;\n\n  /**\n   * The variant of the avatar.\n   * Options are: `\"round\"`, `\"square\".\n   * Default is: `\"square\"`.\n   */\n  @Prop() variant?: 'round' | 'square' = 'square';\n\n  render() {\n    return (\n      <Host>\n        <span class={{ round: this.variant === 'round' }}>\n          <img src={this.src} alt={this.alt ?? 'avatar'} />\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.e2e.js

@@ -0,0 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newE2EPage } from "@stencil/core/testing";
+describe('cpsl-avatar', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newE2EPage();
+        yield page.setContent('<cpsl-avatar></cpsl-avatar>');
+        const element = yield page.find('cpsl-avatar');
+        expect(element).toHaveClass('hydrated');
+    }));
+});
+//# sourceMappingURL=cpsl-avatar.e2e.js.map

package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-avatar.e2e.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-avatar/test/cpsl-avatar.e2e.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,6BAA6B,CAAC,CAAC;QAErD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC1C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('cpsl-avatar', () => {\n  it('renders', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<cpsl-avatar></cpsl-avatar>');\n\n    const element = await page.find('cpsl-avatar');\n    expect(element).toHaveClass('hydrated');\n  });\n});\n"]}

package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.spec.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try {
+            step(generator.next(value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function rejected(value) { try {
+            step(generator["throw"](value));
+        }
+        catch (e) {
+            reject(e);
+        } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { newSpecPage } from "@stencil/core/testing";
+import { CpslAvatar } from "../cpsl-avatar";
+describe('cpsl-avatar', () => {
+    it('renders', () => __awaiter(void 0, void 0, void 0, function* () {
+        const page = yield newSpecPage({
+            components: [CpslAvatar],
+            html: `<cpsl-avatar></cpsl-avatar>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <cpsl-avatar>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </cpsl-avatar>
+    `);
+    }));
+});
+//# sourceMappingURL=cpsl-avatar.spec.js.map

package/dist/collection/components/cpsl-avatar/test/cpsl-avatar.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cpsl-avatar.spec.js","sourceRoot":"","sources":["../../../../../src/components/cpsl-avatar/test/cpsl-avatar.spec.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAE5C,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,SAAS,EAAE,GAAS,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,6BAA6B;SACpC,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;KAM7B,CAAC,CAAC;IACL,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CpslAvatar } from '../cpsl-avatar';\n\ndescribe('cpsl-avatar', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [CpslAvatar],\n      html: `<cpsl-avatar></cpsl-avatar>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <cpsl-avatar>\n        <mock:shadow-root>\n          <slot></slot>\n        </mock:shadow-root>\n      </cpsl-avatar>\n    `);\n  });\n});\n"]}

package/dist/collection/components/cpsl-button/cpsl-button.css

@@ -54,109 +54,233 @@
    * }
    */
 :host {
-  --button-border-radius: var(--cpsl-border-radius-primary-button);
   --button-border-width: 1px;
-  --button-gap: 4px;
-  --button-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 2px 2px 0px var(--cpsl-color-alpha-white-25) inset, 0px -2px 2px 0px var(--cpsl-color-alpha-black-25) inset;
-  --button-padding-top: 10px;
-  --button-padding-bottom: 10px;
+  --button-border-width-start: var(--button-border-width);
+  --button-border-width-end: var(--button-border-width);
+  --button-border-width-top: var(--button-border-width);
+  --button-border-width-bottom: var(--button-border-width);
+  --button-gap: 8px;
+  --button-justify-content: center;
+  --button-border-radius-top-start: var(--button-border-radius);
+  --button-border-radius-top-end: var(--button-border-radius);
+  --button-border-radius-bottom-end: var(--button-border-radius);
+  --button-border-radius-bottom-start: var(--button-border-radius);
   --button-padding-start: 16px;
   --button-padding-end: 16px;
-  --button-font-size: clamp(14px, 0.875rem, 21px);
+  --button-icon-size: var(--cpls-font-size-body-l);
+  --button-primary-color: var(--cpsl-color-primary-button-text);
+  --button-primary-background-color: var(--cpsl-color-primary-button-surface-default);
+  --button-primary-border-color: var(--cpsl-color-primary-button-border-default);
+  --button-primary-icon-color: var(--cpsl-color-primary-button-text);
+  --button-primary-disabled-color: var(--cpsl-color-primary-button-text);
+  --button-primary-disabled-background-color: var(--cpsl-color-primary-button-surface-disabled);
+  --button-primary-disabled-border-color: var(--cpsl-color-primary-button-border-disabled);
+  --button-primary-disabled-icon-color: var(--cpsl-color-primary-button-text);
+  --button-primary-hover-color: var(--cpsl-color-primary-button-text);
+  --button-primary-hover-background-color: var(--cpsl-color-primary-button-surface-hover);
+  --button-primary-hover-border-color: var(--cpsl-color-primary-button-surface-hover);
+  --button-primary-hover-icon-color: var(--cpsl-color-primary-button-text);
+  --button-primary-active-color: var(--cpsl-color-primary-button-text);
+  --button-primary-active-background-color: var(--cpsl-color-primary-button-surface-pressed);
+  --button-primary-active-border-color: var(--cpsl-color-primary-button-surface-pressed);
+  --button-primary-active-icon-color: var(--cpsl-color-primary-button-text);
+  --button-secondary-color: var(--cpsl-color-secondary-button-text);
+  --button-secondary-background-color: var(--cpsl-color-secondary-button-surface-default);
+  --button-secondary-border-color: var(--cpsl-color-secondary-button-border-default);
+  --button-secondary-icon-color: var(--cpsl-color-secondary-button-text);
+  --button-secondary-disabled-color: var(--cpsl-color-secondary-button-text);
+  --button-secondary-disabled-background-color: var(--cpsl-color-secondary-button-surface-disabled);
+  --button-secondary-disabled-border-color: var(--cpsl-color-secondary-button-border-disabled);
+  --button-secondary-disabled-icon-color: var(--cpsl-color-secondary-button-text);
+  --button-secondary-hover-color: var(--cpsl-color-secondary-button-text);
+  --button-secondary-hover-background-color: var(--cpsl-color-secondary-button-surface-hover);
+  --button-secondary-hover-border-color: var(--cpsl-color-secondary-button-border-default);
+  --button-secondary-hover-icon-color: var(--cpsl-color-secondary-button-text);
+  --button-secondary-active-color: var(--cpsl-color-secondary-button-text);
+  --button-secondary-active-background-color: var(--cpsl-color-secondary-button-surface-pressed);
+  --button-secondary-active-border-color: var(--cpsl-color-secondary-button-border-default);
+  --button-secondary-active-icon-color: var(--cpsl-color-secondary-button-text);
+  --button-icon-color: var(--cpsl-color-icon-button-default);
+  --button-icon-disabled-color: var(--cpsl-color-icon-button-disabled);
+  --button-icon-hover-color: var(--cpsl-color-icon-button-hover);
   height: 100%;
-  width: 100%;
+  display: inline-block;
   font-family: var(--cpsl-font-family, inherit);
 }
 
-:host(.button-disabled) {
+:host(.full-width) {
+  width: 100%;
+  display: block;
+}
+:host(.full-width) .button-native {
+  width: 100%;
+}
+
+:host(.small) {
+  --button-font-size: var(--cpsl-font-size-body-s);
+  --button-padding-top: 12px;
+  --button-padding-bottom: 12px;
+  --button-icon-size: var(--cpsl-font-size-body-m);
+}
+
+:host(.medium) {
+  --button-font-size: var(--cpsl-font-size-body-m);
+  --button-padding-top: 14px;
+  --button-padding-bottom: 14px;
+  --button-icon-size: var(--cpsl-font-size-body-l);
+}
+
+:host(.disabled) {
   cursor: default;
   pointer-events: none;
 }
 
+:host ::slotted(cpsl-icon) {
+  --height: var(--button-icon-size);
+  --width: var(--button-icon-size);
+}
+
 :host(.primary) {
-  --button-color: var(--cpsl-color-text-inverted);
-  --button-background-color: var(--cpsl-color-primary-button-surface-default);
-  --button-border-color: var(--cpsl-color-primary-button-border-default);
-}
-:host(.primary):host(.button-disabled) {
-  --button-background-color: var(--cpsl-color-primary-button-surface-disabled);
-  --button-border-color: var(--cpsl-color-primary-button-border-disabled);
-  --button-box-shadow: none;
+  --button-border-radius: var(--cpsl-border-radius-primary-button);
+  --button-color: var(--button-primary-color);
+  --button-background-color: var(--button-primary-background-color);
+  --button-border-color: var(--button-primary-border-color);
+}
+:host(.primary) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-primary-icon-color);
+}
+:host(.primary):host(.disabled) {
+  --button-color: var(--button-primary-disabled-color);
+  --button-background-color: var(--button-primary-disabled-background-color);
+  --button-border-color: var(--button-primary-disabled-border-color);
   --button-outline-color: transparent;
 }
-:host(.primary) :not(.button-disabled):hover {
-  --button-background-color: var(--cpsl-color-primary-button-surface-hover);
+:host(.primary):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-primary-disabled-icon-color);
 }
-:host(.primary) :not(.button-disabled):active {
-  --button-background-color: var(--cpsl-color-primary-button-surface-pressed);
+:host(.primary) :not(.disabled):hover {
+  --button-color: var(--button-primary-hover-color);
+  --button-background-color: var(--button-primary-hover-background-color);
+  --button-border-color: var(--button-primary-hover-border-color);
 }
-:host(.primary) :not(.button-disabled):focus-visible {
-  --button-outline-color: var(--cpsl-color-primary-button-outline);
+:host(.primary) :not(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-primary-hover-icon-color);
 }
-:host(.primary) ::slotted(cpsl-icon) {
-  --icon-color: var(--cpsl-text-inverted);
+:host(.primary) :not(.disabled):active {
+  --button-color: var(--button-primary-active-color);
+  --button-background-color: var(--button-primary-active-background-color);
+  --button-border-color: var(--button-primary-active-border-color);
+}
+:host(.primary) :not(.disabled):active ::slotted(cpsl-icon) {
+  --icon-color: var(--button-primary-active-icon-color);
+}
+:host(.primary) :not(.disabled):focus-visible {
+  --button-outline-color: var(--cpsl-color-primary-button-outline);
 }
 
 :host(.secondary) {
-  --button-color: var(--cpsl-color-text-primary);
-  --button-background-color: var(--cpsl-color-secondary-button-surface-default);
-  --button-border-color: var(--cpsl-color-secondary-button-border-default);
-}
-:host(.secondary):host(.button-disabled) {
-  --button-background-color: var(--cpsl-color-secondary-button-surface-disabled);
-  --button-border-color: var(--cpsl-color-secondary-button-border-disabled);
-  --button-box-shadow: none;
+  --button-border-radius: var(--cpsl-border-radius-secondary-button);
+  --button-color: var(--button-secondary-color);
+  --button-background-color: var(--button-primary-secondary-color);
+  --button-border-color: var(--button-secondary-border-color);
+}
+:host(.secondary) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-secondary-icon-color);
+}
+:host(.secondary):host(.disabled) {
+  --button-color: var(--button-secondary-disabled-color);
+  --button-background-color: var(--button-secondary-disabled-background-color);
+  --button-border-color: var(--button-secondary-disabled-border-color);
   --button-outline-color: transparent;
 }
-:host(.secondary) :not(.button-disabled):hover {
-  --button-background-color: var(--cpsl-color-secondary-button-surface-hover);
+:host(.secondary):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-secondary-disabled-icon-color);
 }
-:host(.secondary) :not(.button-disabled):active {
-  --button-background-color: var(--cpsl-color-secondary-button-surface-pressed);
+:host(.secondary) :not(.disabled):hover {
+  --button-color: var(--button-secondary-hover-color);
+  --button-border-color: var(--button-secondary-hover-border-color);
+  --button-background-color: var(--button-secondary-hover-background-color);
 }
-:host(.secondary) :not(.button-disabled):focus-visible {
-  --button-outline-color: var(--cpsl-color-secondary-button-outline);
+:host(.secondary) :not(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-secondary-hover-icon-color);
 }
-:host(.secondary) ::slotted(cpsl-icon) {
-  --icon-color: var(--cpsl-text-primary);
+:host(.secondary) :not(.disabled):active {
+  --button-color: var(--button-secondary-active-color);
+  --button-border-color: var(--button-secondary-active-border-color);
+  --button-background-color: var(--button-secondary-active-background-color);
+}
+:host(.secondary) :not(.disabled):active ::slotted(cpsl-icon) {
+  --icon-color: var(--button-secondary-active-icon-color);
+}
+:host(.secondary) :not(.disabled):focus-visible {
+  --button-outline-color: var(--cpsl-color-secondary-button-outline);
 }
 
 :host(.icon) {
   --button-color: transparent;
   --button-background-color: transparent;
   --button-border-color: transparent;
-  --button-box-shadow: none;
   --button-outline-color: transparent;
 }
 :host(.icon) ::slotted(cpsl-icon) {
-  --icon-color: var(--cpsl-color-text-secondary);
+  --icon-color: var(--button-icon-color);
 }
-:host(.icon) :not(.button-disabled):hover ::slotted(cpsl-icon) {
-  --icon-color: var(--cpsl-color-text-primary);
+:host(.icon):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-icon-disabled-color);
+}
+:host(.icon) :not(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-icon-hover-color);
 }
 
 .button-native {
-  border-radius: var(--button-border-radius);
+  border-top-left-radius: var(--button-border-radius-top-start);
+  border-top-right-radius: var(--button-border-radius-top-end);
+  border-bottom-right-radius: var(--button-border-radius-bottom-end);
+  border-bottom-left-radius: var(--button-border-radius-bottom-start);
   -webkit-padding-start: var(--button-padding-start);
   padding-inline-start: var(--button-padding-start);
   -webkit-padding-end: var(--button-padding-end);
   padding-inline-end: var(--button-padding-end);
   padding-top: var(--button-padding-top);
   padding-bottom: var(--button-padding-bottom);
-  font-size: var(--container-font-size);
-  font-weight: 500;
-  border: var(--button-border-width) solid transparent;
+  font-size: var(--button-font-size);
+  border: 0px solid transparent;
+  border-width: var(--button-border-width-top) var(--button-border-width-end) var(--button-border-width-bottom) var(--button-border-width-start);
   cursor: pointer;
   color: var(--button-color);
   background-color: var(--button-background-color);
   border-color: var(--button-border-color);
   display: flex;
-  justify-content: center;
+  justify-content: var(--button-justify-content);
   align-items: center;
   height: 100%;
-  width: 100%;
-  box-shadow: var(--button-box-shadow);
   gap: var(--button-gap);
   word-break: break-all;
   outline-color: var(--button-outline-color);
+}
+:host-context([dir=rtl]) .button-native {
+  border-top-left-radius: var(--button-border-radius-top-end);
+  border-top-right-radius: var(--button-border-radius-top-start);
+  border-bottom-right-radius: var(--button-border-radius-bottom-start);
+  border-bottom-left-radius: var(--button-border-radius-bottom-end);
+}
+
+[dir=rtl] .button-native {
+  border-top-left-radius: var(--button-border-radius-top-end);
+  border-top-right-radius: var(--button-border-radius-top-start);
+  border-bottom-right-radius: var(--button-border-radius-bottom-start);
+  border-bottom-left-radius: var(--button-border-radius-bottom-end);
+}
+
+@supports selector(:dir(rtl)) {
+  .button-native:dir(rtl) {
+    border-top-left-radius: var(--button-border-radius-top-end);
+    border-top-right-radius: var(--button-border-radius-top-start);
+    border-bottom-right-radius: var(--button-border-radius-bottom-start);
+    border-bottom-left-radius: var(--button-border-radius-bottom-end);
+  }
+}
+
+:host ::slotted(cpsl-text) {
+  color: var(--button-color);
 }

package/dist/collection/components/cpsl-button/cpsl-button.js

@@ -2,15 +2,20 @@ import { Host, h } from "@stencil/core";
 export class CpslButton {
     constructor() {
         this.disabled = false;
+        this.fullWidth = false;
+        this.size = 'medium';
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '258bec70d4cf27d453500c712285e45a1304b925', class: {
+        return (h(Host, { key: '62f94f1db8f1019d47a3fcd481638dd21769b74f', class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'icon': this.variant === 'icon',
-                'button-disabled': this.disabled,
-            } }, h("button", { key: 'b13438808d69e389bc75d6f06b81a40c7561eea8', class: "button-native" }, h("slot", { key: 'e684524f4ff0ceeca466293e1fc8737cf66184e0', name: "start" }), h("slot", { key: '66a1c7fa233f85a76a7d0cc2aad74e35ce5cd3f4' }), h("slot", { key: 'e369d09a351a1d1dd0d98d3812c1b75a0e84eae0', name: "end" }))));
+                'disabled': this.disabled,
+                'full-width': this.fullWidth,
+                'small': this.size === 'small',
+                'medium': this.size === 'medium',
+            } }, h("button", { key: '8b018abcc84330186611db6319bcf56022f5cccc', part: "button-native", class: "button-native" }, h("slot", { key: 'cad9e0b269752f30514957663de666eee0f2622c', name: "start" }), h("slot", { key: '6170188bf7734375bb3c99ae7ffab4d21c817e32' }), h("slot", { key: '2e483b4c7d21796c4e519c9c553483f633d2c8ac', name: "end" }))));
     }
     static get is() { return "cpsl-button"; }
     static get encapsulation() { return "shadow"; }
@@ -44,6 +49,42 @@ export class CpslButton {
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button takes the full width of it's container.\nDefault is: false."
+                },
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium'",
+                    "resolved": "\"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the button.\nOptions are: `\"small\"`, `\"medium\".\nDefault is: `\"medium\"`."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'medium'"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -56,10 +97,10 @@ export class CpslButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The variant of button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\".\nDefault is: `\"primary\"`."
+                    "text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"icon\".\nDefault is: `\"primary\"`."
                 },
                 "attribute": "variant",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "'primary'"
             }
         };

package/dist/collection/components/cpsl-button/cpsl-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;wBAKyB,KAAK;uBAOmB,SAAS;;IAE/E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAC/B,iBAAiB,EAAE,IAAI,CAAC,QAAQ;aACjC;YAED,+DAAQ,KAAK,EAAC,eAAe;gBAC3B,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACjB,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button',\n  styleUrl: 'cpsl-button.scss',\n  shadow: true,\n})\nexport class CpslButton {\n  /**\n   * If the button is disabled.\n   * Default is: false.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * The variant of button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"icon\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'primary' | 'secondary' | 'icon' = 'primary';\n\n  render() {\n    return (\n      <Host\n        class={{\n          'primary': this.variant === 'primary',\n          'secondary': this.variant === 'secondary',\n          'icon': this.variant === 'icon',\n          'button-disabled': this.disabled,\n        }}\n      >\n        <button class=\"button-native\">\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cpsl-button.js","sourceRoot":"","sources":["../../../../src/components/cpsl-button/cpsl-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;wBAKyB,KAAK;yBAMrB,KAAK;oBAOC,QAAQ;uBAOS,SAAS;;IAE9D,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBAEL,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,MAAM,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;gBAE/B,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;gBAE5B,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC9B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjC;YAED,+DAAQ,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe;gBAChD,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CACjB,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cpsl-button',\n  styleUrl: 'cpsl-button.scss',\n  shadow: true,\n})\nexport class CpslButton {\n  /**\n   * If the button is disabled.\n   * Default is: false.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * Whether the button takes the full width of it's container.\n   * Default is: false.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The size of the button.\n   * Options are: `\"small\"`, `\"medium\".\n   * Default is: `\"medium\"`.\n   */\n  @Prop() size?: 'small' | 'medium' = 'medium';\n\n  /**\n   * The variant of the button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"icon\".\n   * Default is: `\"primary\"`.\n   */\n  @Prop() variant?: 'primary' | 'secondary' | 'icon' = 'primary';\n\n  render() {\n    return (\n      <Host\n        class={{\n          // VARIANTS\n          'primary': this.variant === 'primary',\n          'secondary': this.variant === 'secondary',\n          'icon': this.variant === 'icon',\n          // STATE\n          'disabled': this.disabled,\n          'full-width': this.fullWidth,\n          // SIZES\n          'small': this.size === 'small',\n          'medium': this.size === 'medium',\n        }}\n      >\n        <button part=\"button-native\" class=\"button-native\">\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}