@usecapsule/core-components 2.0.10 → 3.0.1-dev.1

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,329 @@
    * }
    */
 :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);
-  height: 100%;
-  width: 100%;
+  --button-icon-size: var(--cpls-font-size-body-l);
+  --button-font-weight: 500;
+  --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-text-disabled);
+  --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-text-disabled);
+  --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-ghost-color: var(--cpsl-color-ghost-button-default);
+  --button-ghost-disabled-color: var(--cpsl-color-ghost-button-disabled);
+  --button-ghost-hover-color: var(--cpsl-color-ghost-button-hover);
+  --button-destructive-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-background-color: var(--cpsl-color-destructive-button-surface-default);
+  --button-destructive-border-color: var(--cpsl-color-destructive-button-border-default);
+  --button-destructive-icon-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-disabled-color: var(--cpsl-color-text-disabled);
+  --button-destructive-disabled-background-color: var(--cpsl-color-destructive-button-surface-disabled);
+  --button-destructive-disabled-border-color: var(--cpsl-color-destructive-button-border-disabled);
+  --button-destructive-disabled-icon-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-hover-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-hover-background-color: var(--cpsl-color-destructive-button-surface-hover);
+  --button-destructive-hover-border-color: var(--cpsl-color-destructive-button-border-default);
+  --button-destructive-hover-icon-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-active-color: var(--cpsl-color-destructive-button-text);
+  --button-destructive-active-background-color: var(--cpsl-color-destructive-button-surface-pressed);
+  --button-destructive-active-border-color: var(--cpsl-color-destructive-button-border-default);
+  --button-destructive-active-icon-color: var(--cpsl-color-destructive-button-text);
+  height: fit-content;
+  width: fit-content;
+  display: inline-block;
   font-family: var(--cpsl-font-family, inherit);
+  -webkit-tap-highlight-color: transparent;
+}
+:host a {
+  height: fit-content;
+  width: auto !important;
+}
+
+: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(.small.primary) {
+  --button-padding-top: 13px;
+  --button-padding-bottom: 13px;
+}
+
+: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(.medium) :host(.primary) {
+  --button-padding-top: 15px;
+  --button-padding-bottom: 15px;
+}
+
+:host(.medium.primary) {
+  --button-padding-top: 15px;
+  --button-padding-bottom: 15px;
 }
 
-:host(.button-disabled) {
+: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);
+  --button-padding-start: 17px;
+  --button-padding-end: 17px;
+  --button-border-width: 0px;
+}
+: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-destructive-button);
+  --button-color: var(--button-secondary-color);
+  --button-background-color: var(--button-secondary-background-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;
+:host(.ghost) {
+  --button-color: var(--button-ghost-color);
   --button-background-color: transparent;
   --button-border-color: transparent;
-  --button-box-shadow: none;
   --button-outline-color: transparent;
+  --button-padding-start: 0px;
+  --button-padding-end: 0px;
+  --button-padding-top: 0px;
+  --button-padding-bottom: 0px;
+  --button-border-width: 0px;
+}
+:host(.ghost) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-ghost-color);
+  --height: var(--cpsl-font-size-body-xl);
+  --width: var(--cpsl-font-size-body-xl);
+}
+:host(.ghost):host(.disabled) {
+  --button-color: var(--button-ghost-disabled-color);
+}
+:host(.ghost):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-ghost-disabled-color);
+}
+:host(.ghost) :not(.disabled):hover {
+  --button-color: var(--button-ghost-hover-color);
+}
+:host(.ghost) :not(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-ghost-hover-color);
+}
+
+:host(.destructive) {
+  --button-border-radius: var(--cpsl-border-radius-secondary-button);
+  --button-color: var(--button-destructive-color);
+  --button-background-color: var(--button-destructive-background-color);
+  --button-border-color: var(--button-destructive-border-color);
+}
+:host(.destructive) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-destructive-icon-color);
+}
+:host(.destructive):host(.disabled) {
+  --button-color: var(--button-destructive-disabled-color);
+  --button-background-color: var(--button-destructive-disabled-background-color);
+  --button-border-color: var(--button-destructive-disabled-border-color);
+  --button-outline-color: transparent;
+}
+:host(.destructive):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-destructive-disabled-icon-color);
+}
+:host(.destructive) :not(.disabled):hover {
+  --button-color: var(--button-destructive-hover-color);
+  --button-border-color: var(--button-destructive-hover-border-color);
+  --button-background-color: var(--button-destructive-hover-background-color);
 }
-:host(.icon) ::slotted(cpsl-icon) {
-  --icon-color: var(--cpsl-color-text-secondary);
+:host(.destructive) :not(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-destructive-hover-icon-color);
 }
-:host(.icon) :not(.button-disabled):hover ::slotted(cpsl-icon) {
-  --icon-color: var(--cpsl-color-text-primary);
+:host(.destructive) :not(.disabled):active {
+  --button-color: var(--button-destructive-active-color);
+  --button-border-color: var(--button-destructive-active-border-color);
+  --button-background-color: var(--button-destructive-active-background-color);
+}
+:host(.destructive) :not(.disabled):active ::slotted(cpsl-icon) {
+  --icon-color: var(--button-destructive-active-icon-color);
+}
+:host(.destructive) :not(.disabled):focus-visible {
+  --button-outline-color: var(--cpsl-color-destructive-button-outline);
 }
 
 .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);
+  font-weight: var(--button-font-weight);
+  font-family: inherit;
+  white-space: nowrap;
+  text-decoration: none;
+  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);
+  background: 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);
+  -webkit-tap-highlight-color: transparent;
+}
+: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

@@ -1,16 +1,25 @@
 import { Host, h } from "@stencil/core";
 export class CpslButton {
     constructor() {
+        this.as = 'button';
         this.disabled = false;
+        this.fullWidth = false;
+        this.href = undefined;
+        this.size = 'medium';
+        this.target = undefined;
         this.variant = 'primary';
     }
     render() {
-        return (h(Host, { key: '258bec70d4cf27d453500c712285e45a1304b925', class: {
+        return (h(Host, { key: '554350e7af597bd14c9584f9924f73e04fe44093', 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" }))));
+                'ghost': this.variant === 'ghost',
+                'destructive': this.variant === 'destructive',
+                'disabled': this.disabled,
+                'full-width': this.fullWidth,
+                'small': this.size === 'small',
+                'medium': this.size === 'medium',
+            } }, h(this.as, { key: '20b6865c03e312d263c523f681bb775d8626fc9c', href: this.href, target: this.target, part: "button-native", class: "button-native" }, h("slot", { key: '4ee8d68b06ce21288e63bfcff9aa186908b89af2', name: "start" }), h("slot", { key: '9c0a5f0daa64c75886d03fb830739c8f8cfb65d9' }), h("slot", { key: 'cf9addee55b0a0d8f487313c972d7b48d6f8c75c', name: "end" }))));
     }
     static get is() { return "cpsl-button"; }
     static get encapsulation() { return "shadow"; }
@@ -26,6 +35,24 @@ export class CpslButton {
     }
     static get properties() {
         return {
+            "as": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'a'",
+                    "resolved": "\"a\" | \"button\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The tag for the button.\nOptions are: `\"button\"`, `\"a\".\nDefault is: `\"button\"`."
+                },
+                "attribute": "as",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -44,19 +71,89 @@ 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"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "href to use when using a link."
+                },
+                "attribute": "href",
+                "reflect": 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'"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "target to use when using a link."
+                },
+                "attribute": "target",
+                "reflect": false
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'icon'",
-                    "resolved": "\"icon\" | \"primary\" | \"secondary\"",
+                    "original": "'primary' | 'secondary' | 'ghost' | 'destructive'",
+                    "resolved": "\"destructive\" | \"ghost\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "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\", `\"text\"`.\nDefault is: `\"primary\"`."
                 },
                 "attribute": "variant",
                 "reflect": true,

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;;kBAMS,QAAQ;wBAMQ,KAAK;yBAMrB,KAAK;;oBAYC,QAAQ;;uBAY2C,SAAS;;IAEhG,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,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBACjC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa;gBAE7C,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,EAAC,IAAI,CAAC,EAAE,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,eAAe;gBACvF,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,8DAAa;gBACb,6DAAM,IAAI,EAAC,KAAK,GAAQ,CAChB,CACL,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   * The tag for the button.\n   * Options are: `\"button\"`, `\"a\".\n   * Default is: `\"button\"`.\n   */\n  @Prop() as?: 'button' | 'a' = 'button';\n\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   * href to use when using a link.\n   */\n  @Prop() href?: string;\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   * target to use when using a link.\n   */\n  @Prop() target?: string;\n\n  /**\n   * The variant of the button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"icon\", `\"text\"`.\n   * Default is: `\"primary\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' = 'primary';\n\n  render() {\n    return (\n      <Host\n        class={{\n          // VARIANTS\n          'primary': this.variant === 'primary',\n          'secondary': this.variant === 'secondary',\n          'ghost': this.variant === 'ghost',\n          'destructive': this.variant === 'destructive',\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        <this.as href={this.href} target={this.target} part=\"button-native\" class=\"button-native\">\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </this.as>\n      </Host>\n    );\n  }\n}\n"]}