@getpara/core-components 0.1.0

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

@@ -0,0 +1,493 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+   * A heuristic that applies CSS to mobile
+   * viewports (i.e. phones, not tablets).
+   *
+   * Usage:
+   * @include mobile-viewport() {
+   *   :host {
+   *     background-color: blue;
+   *   }
+   * }
+   */
+:host {
+  --button-border-width: 1px;
+  --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-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-text-disabled);
+  --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-tertiary-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-background-color: var(--cpsl-color-tertiary-button-surface-default);
+  --button-tertiary-border-color: var(--cpsl-color-tertiary-button-border-default);
+  --button-tertiary-icon-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-disabled-color: var(--cpsl-color-text-disabled);
+  --button-tertiary-disabled-background-color: var(--cpsl-color-tertiary-button-surface-disabled);
+  --button-tertiary-disabled-border-color: var(--cpsl-color-tertiary-button-border-disabled);
+  --button-tertiary-disabled-icon-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-hover-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-hover-background-color: var(--cpsl-color-tertiary-button-surface-hover);
+  --button-tertiary-hover-border-color: var(--cpsl-color-tertiary-button-surface-hover);
+  --button-tertiary-hover-icon-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-active-color: var(--cpsl-color-tertiary-button-text);
+  --button-tertiary-active-background-color: var(--cpsl-color-tertiary-button-surface-pressed);
+  --button-tertiary-active-border-color: var(--cpsl-color-tertiary-button-surface-pressed);
+  --button-tertiary-active-icon-color: var(--cpsl-color-tertiary-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(.xSmall) {
+  --button-font-size: var(--cpsl-font-size-body-xs);
+  --button-padding-top: 8px;
+  --button-padding-bottom: 8px;
+  --button-icon-size: var(--cpsl-font-size-body-s);
+  --button-border-radius: 8px;
+}
+
+:host(.xSmall.primary) {
+  --button-padding-top: 9px;
+  --button-padding-bottom: 9px;
+  --button-border-radius: 8px;
+}
+
+:host(.xSmall.secondary) {
+  --button-border-radius: 8px;
+}
+
+:host(.xSmall.tertiary) {
+  --button-padding-top: 9px;
+  --button-padding-bottom: 9px;
+  --button-border-radius: 8px;
+}
+
+: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(.small.tertiary) {
+  --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) :host(.tertiary) {
+  --button-padding-top: 15px;
+  --button-padding-bottom: 15px;
+}
+
+:host(.medium.primary) {
+  --button-padding-top: 15px;
+  --button-padding-bottom: 15px;
+}
+
+:host(.medium.tertiary) {
+  --button-padding-top: 15px;
+  --button-padding-bottom: 15px;
+}
+
+:host(.disabled) {
+  cursor: default;
+  pointer-events: none;
+}
+
+:host ::slotted(cpsl-icon) {
+  --height: var(--button-icon-size);
+  --width: var(--button-icon-size);
+}
+
+:host(.primary) {
+  --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):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-primary-disabled-icon-color);
+}
+:host(.primary):host(.disabled) ::slotted(cpsl-spinner) {
+  --background-color: var(--button-primary-disabled-background-color);
+}
+: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(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-primary-hover-icon-color);
+}
+: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-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):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-secondary-disabled-icon-color);
+}
+:host(.secondary):host(.disabled) ::slotted(cpsl-spinner) {
+  --background-color: var(--button-secondary-disabled-icon-color);
+}
+: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(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-secondary-hover-icon-color);
+}
+: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(.tertiary) {
+  --button-border-radius: var(--cpsl-border-radius-tertiary-button);
+  --button-color: var(--button-tertiary-color);
+  --button-background-color: var(--button-tertiary-background-color);
+  --button-border-color: var(--button-tertiary-border-color);
+  --button-padding-start: 17px;
+  --button-padding-end: 17px;
+  --button-border-width: 0px;
+}
+:host(.tertiary) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-tertiary-icon-color);
+}
+:host(.tertiary):host(.disabled) {
+  --button-color: var(--button-tertiary-disabled-color);
+  --button-background-color: var(--button-tertiary-disabled-background-color);
+  --button-border-color: var(--button-tertiary-disabled-border-color);
+  --button-outline-color: transparent;
+}
+:host(.tertiary):host(.disabled) ::slotted(cpsl-icon) {
+  --icon-color: var(--button-tertiary-disabled-icon-color);
+}
+:host(.tertiary):host(.disabled) ::slotted(cpsl-spinner) {
+  --background-color: var(--button-tertiary-disabled-icon-color);
+}
+:host(.tertiary) :not(.disabled):hover {
+  --button-color: var(--button-tertiary-hover-color);
+  --button-background-color: var(--button-tertiary-hover-background-color);
+  --button-border-color: var(--button-tertiary-hover-border-color);
+}
+:host(.tertiary) :not(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-tertiary-hover-icon-color);
+}
+:host(.tertiary) :not(.disabled):active {
+  --button-color: var(--button-tertiary-active-color);
+  --button-background-color: var(--button-tertiary-active-background-color);
+  --button-border-color: var(--button-tertiary-active-border-color);
+}
+:host(.tertiary) :not(.disabled):active ::slotted(cpsl-icon) {
+  --icon-color: var(--button-tertiary-active-icon-color);
+}
+:host(.tertiary) :not(.disabled):focus-visible {
+  --button-outline-color: var(--cpsl-color-tertiary-button-outline);
+}
+
+:host(.ghost) {
+  --button-color: var(--button-ghost-color);
+  --button-background-color: transparent;
+  --button-border-color: transparent;
+  --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);
+}
+: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):host(.disabled) ::slotted(cpsl-spinner) {
+  --background-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(.destructive) :not(.disabled):hover ::slotted(cpsl-icon) {
+  --icon-color: var(--button-destructive-hover-icon-color);
+}
+: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-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(--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: var(--button-background-color);
+  border-color: var(--button-border-color);
+  display: flex;
+  justify-content: var(--button-justify-content);
+  align-items: center;
+  height: 100%;
+  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-override: var(--button-color);
+}
+:host ::slotted(cpsl-icon-group) {
+  --container-border-color: var(--button-background-color);
+}
+:host ::slotted(cpsl-spinner) {
+  --background-color: var(--button-background-color);
+}

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

@@ -0,0 +1,189 @@
+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.type = 'button';
+        this.variant = 'primary';
+    }
+    render() {
+        return (h(Host, { key: '0fd0606bdefb9664a01e2e9686065f5833e9190d', class: {
+                // VARIANTS
+                'primary': this.variant === 'primary',
+                'secondary': this.variant === 'secondary',
+                'tertiary': this.variant === 'tertiary',
+                'ghost': this.variant === 'ghost',
+                'destructive': this.variant === 'destructive',
+                // STATE
+                'disabled': this.disabled,
+                'full-width': this.fullWidth,
+                // SIZES
+                'xSmall': this.size === 'xSmall',
+                'small': this.size === 'small',
+                'medium': this.size === 'medium',
+            } }, h(this.as, { key: '61b2fa9127eb03f9a3a4292f5161fe141ad545a5', href: this.href, target: this.target, part: "button-native", class: "button-native", type: this.type }, h("slot", { key: '2a3f3e90edace6f165cb1ead835a8dff1fc01cd6', name: "start" }), h("slot", { key: 'c0d5f828589bc74e40a6df43b85e3c04f1f25309' }), h("slot", { key: '11ea165fbc4141e49df46c2f09f203e052a5dfd1', name: "end" }))));
+    }
+    static get is() { return "cpsl-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cpsl-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cpsl-button.css"]
+        };
+    }
+    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,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If the button is disabled.\nDefault is: false."
+                },
+                "attribute": "disabled",
+                "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": "'xSmall' | 'small' | 'medium'",
+                    "resolved": "\"medium\" | \"small\" | \"xSmall\"",
+                    "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
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the button."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "'button'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'destructive'",
+                    "resolved": "\"destructive\" | \"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the button.\nOptions are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"ghost\"`, `\"destructive\"`.\nDefault is: `\"primary\"`."
+                },
+                "attribute": "variant",
+                "reflect": true,
+                "defaultValue": "'primary'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=cpsl-button.js.map

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

@@ -0,0 +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;;kBAMS,QAAQ;wBAMQ,KAAK;yBAMrB,KAAK;;oBAYY,QAAQ;;oBAUR,QAAQ;uBAO6C,SAAS;;IAE7G,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW;gBACX,SAAS,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;gBACrC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;gBACzC,UAAU,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;gBACvC,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;gBACjC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,aAAa;gBAC7C,QAAQ;gBACR,UAAU,EAAE,IAAI,CAAC,QAAQ;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;gBAC5B,QAAQ;gBACR,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAChC,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,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI;gBACvG,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?: 'xSmall' | 'small' | 'medium' = 'medium';\n\n  /**\n   * target to use when using a link.\n   */\n  @Prop() target?: string;\n\n  /**\n   * The type of the button.\n   */\n  @Prop() type?: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * The variant of the button.\n   * Options are: `\"primary\"`, `\"secondary\", `\"tertiary\", `\"ghost\"`, `\"destructive\"`.\n   * Default is: `\"primary\"`.\n   */\n  @Prop({ reflect: true }) variant?: 'primary' | 'secondary' | 'tertiary' | '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          'tertiary': this.variant === 'tertiary',\n          'ghost': this.variant === 'ghost',\n          'destructive': this.variant === 'destructive',\n          // STATE\n          'disabled': this.disabled,\n          'full-width': this.fullWidth,\n          // SIZES\n          'xSmall': this.size === 'xSmall',\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\" type={this.type}>\n          <slot name=\"start\"></slot>\n          <slot></slot>\n          <slot name=\"end\"></slot>\n        </this.as>\n      </Host>\n    );\n  }\n}\n"]}