bromcom-ui 2.12.1-test.0 → 3.0.0-preview.0

package/dist/components/button.js

@@ -2,13 +2,95 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
-import { s as snq, G as Generate } from './generate.js';
-import { a as Bcm } from './bcm.js';
-import { c as classnames } from './index2.js';
-import { c as createStore } from './index4.js';
-import { S as SlotTemplate } from './slot-template.js';
-import { C as ColorHelper } from './color-helper.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { G as Generate } from './generate.js';
+import { B as Bcm } from './bcm.js';
+import { c as ce } from './index4.js';
+
+const buttonStyle = ce({
+  slots: {
+    base: "",
+    hostStyle: "bcm-button bcm-ui-element bcm-ui-action tw-w-fit tw-relative tw-inline-block",
+    containerStyle: ["bcm-button__container tw-button-reset", "tw-font-medium tw-no-underline", "tw-flex tw-items-center tw-justify-center tw-gap-2", "tw-rounded-[--bcm-button-radius] tw-border tw-border-solid"],
+    iconStyle: "",
+    textStyle: "empty:tw-hidden tw-flex tw-items-center tw-justify-center tw-gap-2",
+  },
+  variants: {
+    size: {
+      small: {
+        containerStyle: ["bcm-button__container-size-small", "tw-text-size-4 tw-py-px tw-px-2", "tw-min-h-6"],
+      },
+      medium: {
+        containerStyle: ["bcm-button__container-size-medium", "tw-text-size-5 tw-py-0.5 tw-px-3", "tw-min-h-8"],
+      },
+      large: {
+        containerStyle: ["bcm-button__container-size-large", "tw-text-size-6 tw-py-1 tw-px-3", "tw-min-h-10"],
+      },
+    },
+    kind: {
+      solid: {
+        containerStyle: "bcm-button__container-kind-solid",
+      },
+      ghost: {
+        containerStyle: "bcm-button__container-kind-ghost",
+      },
+      link: {
+        containerStyle: ["bcm-button__container-kind-link"],
+      },
+      outline: {
+        containerStyle: "bcm-button__container-kind-outline",
+      },
+    },
+    fullWidth: {
+      true: {
+        containerStyle: "full-width tw-w-full",
+        hostStyle: "full-width tw-w-full",
+      },
+    },
+    checked: {
+      true: {
+        containerStyle: "checked !tw-bg-[--bcm-button-bg-active]",
+      },
+    },
+    disabled: {
+      true: {
+        containerStyle: "disabled tw-cursor-not-allowed",
+      },
+      false: {
+        containerStyle: [
+          "tw-cursor-pointer",
+          "tw-bg-[--bcm-button-bg] tw-text-[--bcm-button-text] tw-border-[--bcm-button-border]",
+          "hover:tw-bg-[--bcm-button-bg-hover] hover:tw-text-[--bcm-button-text-hover] hover:tw-border-[--bcm-button-border-hover]",
+          "active:tw-bg-[--bcm-button-bg-active] active:tw-text-[--bcm-button-text-active] active:tw-border-[--bcm-button-border-active]",
+          "focus-visible:tw-ring",
+        ],
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: true,
+      kind: ["solid", "ghost"],
+      class: {
+        containerStyle: "tw-bg-color-disabled tw-text-color-disabled tw-border-color-disabled",
+      },
+    },
+    {
+      disabled: true,
+      kind: ["link"],
+      class: {
+        containerStyle: "tw-text-color-disabled tw-border-transparent tw-bg-transparent",
+      },
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    kind: "solid",
+    fullWidth: false,
+    checked: false,
+    disabled: false,
+  },
+});
 
 const variantOptions = {
   save: {
@@ -177,207 +259,173 @@ var VariantProps;
   VariantProps["download"] = "download";
 })(VariantProps || (VariantProps = {}));
 
-const { state } = createStore({
-  value: new Map(),
-  setData: {},
-  removeData: {}
-});
-const setValue = (val) => {
-  const data = Object.assign(Object.assign({}, val), (variantOptions[val.variant] && {
-    icon: variantOptions[val.variant].icon,
-    value: variantOptions[val.variant].text,
-    iconPosition: Bcm.IconPosition[variantOptions[val.variant].iconPosition],
-    variantColor: variantOptions[val.variant].color
-  }));
-  state.value.set(data.id, data);
-};
-const removeValue = (_id) => {
-  state.value.delete(_id);
-};
-const getValue = (id) => snq(() => state.value.get(id), {});
-const buttonState = {
-  setValue,
-  removeValue,
-  getValue
-};
-
-const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, loading, isIconOnly, icon, iconPosition, id }) => {
-  const ButtonTagType = (href) ? Bcm.HtmlElementType.a : Bcm.HtmlElementType.button;
-  return (h(ButtonTagType, Object.assign({ id: id }, (type == Bcm.HtmlElementType.button && { type }), { class: componentClass, disabled: disabled, href: href, target: target, tabindex: "0", "aria-label": "button" }),
-    h("span", { hidden: true },
-      h("slot", null)),
-    loading && h("span", { class: "bcm-button__container-loading" },
-      " ",
-      h("span", { class: "bcm-button__container-icon" },
-        h("i", { class: "far fa-spinner-third fa-spin" }),
-        " ")),
-    icon && h("span", { class: `${iconPosition} bcm-button__container-icon` },
-      h("i", { class: `${icon}` })),
-    !isIconOnly && (h(SlotTemplate, { className: "bcm-button__container-text", value: value })),
-    h("slot", { name: "suffix" })));
-};
-
-const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-button{display:inline-flex;width:fit-content;height:fit-content;--bcm-button-solid-color-default:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-default:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-border-default:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-color-hover:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-hover:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-border-hover:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-focus-visible:var(--bcm-new-ds-color-blue-900);--bcm-button-solid-border-focus-visible:var(--bcm-new-ds-color-blue-900);--bcm-button-solid-color-active:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-active:var(--bcm-new-ds-color-blue-900);--bcm-button-solid-border-active:var(--bcm-new-ds-color-blue-900);--bcm-button-solid-color-disabled:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-solid-border-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-default:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-background-color-default:var(--bcm-new-ds-color-slate-100);--bcm-button-ghost-border-default:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-border-hover:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-focus-visible:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-background-color-focus-visible:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-border-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-color-active:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-border-active:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-background-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-button-ghost-border-disabled:var(--bcm-new-ds-color-slate-200);--bcm-button-link-color-default:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-link-background-color-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-default:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-focus-visible:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-link-border-focus-visible:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-active:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-link-border-active:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-disabled:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-border-disabled:var(--bcm-new-ds-color-transparent)}.bcm-button.full-width{width:100%}.bcm-button.full-width .bcm-button__container{width:100%}.bcm-button:after,.bcm-button:before{content:\"\";clear:both}.bcm-button__container{border:none;color:inherit;background-color:inherit;padding:0;margin:0;font:inherit;cursor:pointer;outline:none;text-decoration:none;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:4px 12px;outline:none;border-radius:4px;transition:background-color 0.1s ease-in-out;position:relative;min-width:40px;border-width:1px;border-style:solid;border-color:initial}.bcm-button__container:hover,.bcm-button__container:focus,.bcm-button__container:active{outline:none;text-decoration:none}.bcm-button__container-loading{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;display:flex;align-items:center;justify-content:center}.bcm-button__container-kind-solid{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-solid:hover{color:var(--bcm-button-solid-color-hover);background-color:var(--bcm-button-solid-background-color-hover);border-color:var(--bcm-button-solid-border-hover)}.bcm-button__container-kind-solid:focus-visible{color:var(--bcm-button-solid-color-focus-visible);background-color:var(--bcm-button-solid-background-color-focus-visible);border-color:var(--bcm-button-solid-border-focus-visible)}.bcm-button__container-kind-solid:active{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid:disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid.checked{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid.disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid .bcm-button__container-loading{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-ghost{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-ghost:not([disabled]) .bcm-icon{color:var(--bcm-new-ds-color-slate-500)}.bcm-button__container-kind-ghost:hover{color:var(--bcm-button-ghost-color-hover);background-color:var(--bcm-button-ghost-background-color-hover);border-color:var(--bcm-button-ghost-border-hover)}.bcm-button__container-kind-ghost:focus-visible{color:var(--bcm-button-ghost-color-focus-visible);background-color:var(--bcm-button-ghost-background-color-focus-visible);border-color:var(--bcm-button-ghost-border-focus-visible)}.bcm-button__container-kind-ghost:active{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost:disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost.checked{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost.disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost .bcm-button__container-loading{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-link{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-link:hover{color:var(--bcm-button-link-color-hover);background-color:var(--bcm-button-link-background-color-hover);border-color:var(--bcm-button-link-border-hover)}.bcm-button__container-kind-link:focus-visible{color:var(--bcm-button-link-color-focus-visible);background-color:var(--bcm-button-link-background-color-focus-visible);border-color:var(--bcm-button-link-border-focus-visible)}.bcm-button__container-kind-link:active{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link:disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link.checked{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link.disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link .bcm-button__container-loading{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-ghost-link{color:var(--bcm-button-ghost-link-color-default);background-color:var(--bcm-button-ghost-link-background-color-default);border-color:var(--bcm-button-ghost-link-border-default)}.bcm-button__container-kind-ghost-link:hover{color:var(--bcm-button-ghost-link-color-hover);background-color:var(--bcm-button-ghost-link-background-color-hover);border-color:var(--bcm-button-ghost-link-border-hover)}.bcm-button__container-kind-ghost-link:focus-visible{color:var(--bcm-button-ghost-link-color-focus-visible);background-color:var(--bcm-button-ghost-link-background-color-focus-visible);border-color:var(--bcm-button-ghost-link-border-focus-visible)}.bcm-button__container-kind-ghost-link:active{color:var(--bcm-button-ghost-link-color-active);background-color:var(--bcm-button-ghost-link-background-color-active);border-color:var(--bcm-button-ghost-link-border-active)}.bcm-button__container-kind-ghost-link:disabled{color:var(--bcm-button-ghost-link-color-disabled);background-color:var(--bcm-button-ghost-link-background-color-disabled);border-color:var(--bcm-button-ghost-link-border-disabled)}.bcm-button__container-kind-ghost-link.checked{color:var(--bcm-button-ghost-link-color-active);background-color:var(--bcm-button-ghost-link-background-color-active);border-color:var(--bcm-button-ghost-link-border-active)}.bcm-button__container-kind-ghost-link.disabled{color:var(--bcm-button-ghost-link-color-disabled);background-color:var(--bcm-button-ghost-link-background-color-disabled);border-color:var(--bcm-button-ghost-link-border-disabled)}.bcm-button__container-kind-ghost-link .bcm-button__container-loading{color:var(--bcm-button-ghost-link-color-default);background-color:var(--bcm-button-ghost-link-background-color-default);border-color:var(--bcm-button-ghost-link-border-default)}.bcm-button__container[disabled]{cursor:not-allowed}.bcm-button__container-text{order:3;display:flex;align-items:center;gap:8px;white-space:nowrap}.bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-icon.prefix{order:2}.bcm-button__container-icon.suffix{order:4}.bcm-button__container-size-small{font-size:12px;line-height:calc(12px + 8px);padding:calc(4px - 3px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px - 2px)) * 2)}.bcm-button__container-size-small .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-medium{font-size:calc(12px + 1px);line-height:calc(12px + 8px);padding:calc(4px + 1px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px + 2px)) * 2)}.bcm-button__container-size-medium .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-large{font-size:16px;line-height:calc(16px + 8px);padding:calc(8px - 1px) 12px;min-height:calc(calc(16px + 8px) + (calc(8px) * 2))}.bcm-button__container-size-large .bcm-button__container-icon{min-height:calc(16px + 8px)}";
+const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:root{--bcm-button-bg:var(--bcm-ui-color-background-primary-info-default);--bcm-button-bg-hover:var(--bcm-ui-color-background-primary-info-hover);--bcm-button-bg-active:var(--bcm-ui-color-background-primary-info-active);--bcm-button-text:var(--bcm-ui-color-text-base);--bcm-button-text-hover:var(--bcm-ui-color-text-base);--bcm-button-text-active:var(--bcm-ui-color-text-base);--bcm-button-border:var(--bcm-ui-color-background-primary-info-default);--bcm-button-border-hover:var(--bcm-ui-color-background-primary-info-hover);--bcm-button-border-active:var(--bcm-ui-color-background-primary-info-active);--bcm-button-radius:var(--bcm-ui-radius)}";
 
 const BcmButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.bcmButtonClick = createEvent(this, "bcm-button-click", 7);
     this.bcmClick = createEvent(this, "bcm-click", 7);
-    this._id = Generate.UID();
-    this.hidden = false;
+    // isLink returns true if the button should be rendered as a link
+    this.isLink = () => !!this.href;
     this.type = Bcm.ButtonType.button;
+    this.form = undefined;
+    this.formAction = undefined;
+    this.formMethod = undefined;
+    this.formEnctype = undefined;
+    this.formTarget = undefined;
+    this.formNoValidate = undefined;
+    this.href = undefined;
+    this.target = Bcm.Target["_blank"];
+    this.rel = "noreferrer noopener";
+    this.download = undefined;
+    this._id = Generate.UID();
+    this.value = undefined;
+    this.name = undefined;
+    this.variant = undefined;
+    this.dataDismiss = false;
+    this.color = undefined;
+    this.checked = false;
     this.size = Bcm.Size.medium;
     this.disabled = false;
+    this.hidden = false;
     this.kind = Bcm.Kind.solid;
     this.outline = false;
+    this.filled = true;
     this.icon = undefined;
-    this.href = undefined;
-    this.target = undefined;
-    this.value = undefined;
     this.loading = false;
-    this.variant = undefined;
-    this.dataDismiss = false;
+    this.text = undefined;
     this.fullWidth = false;
     this.iconPosition = Bcm.IconPosition.prefix;
-    this.color = undefined;
-    this.checked = false;
   }
-  handleOnClick(e) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopPropagation();
-      return false;
-    }
-  }
-  componentWillRender() {
-    const { size, kind, icon, iconPosition, disabled, outline, href, type, target, loading, variant, fullWidth, hidden, value } = this;
-    buttonState.setValue({
-      id: this._id,
+  render() {
+    /* style definitions */
+    const { color, kind, size, variant, fullWidth, outline } = this;
+    /* Common Attributes */
+    const { value, name, dataDismiss, disabled, loading, icon, iconPosition, text } = this;
+    /* Button Attributes */
+    const { type, form, formAction, formMethod, formEnctype, formTarget, formNoValidate, checked } = this;
+    /* Link Attributes */
+    const { href, target, rel, download } = this;
+    /* Tag */
+    const Tag = this.isLink() ? "a" : "button";
+    const buttonKind = outline ? "ghost" : kind;
+    const variantExists = variant && variantOptions[variant];
+    const buttonText = text || value || (variantExists && variantOptions[variant].text);
+    const buttonIcon = icon || (variantExists && variantOptions[variant].icon);
+    const buttonIconPosition = iconPosition || (variantExists && variantOptions[variant].iconPosition);
+    /* if kind is ghost, color is overridden. */
+    const buttonAttributes = {
+      "type": type,
+      "form": form,
+      "formaction": formAction,
+      "formmethod": formMethod,
+      "formenctype": formEnctype,
+      "formtarget": formTarget,
+      "formnovalidate": formNoValidate,
+      "value": value,
+      "name": name,
+      "data-dismiss": dataDismiss,
+      "data-checked": checked,
+    };
+    const linkAttributes = {
+      href: href,
+      target: target,
+      rel: rel,
+      download: download,
+    };
+    const commonAttributes = Object.assign(Object.assign({ "aria-label": buttonText || "button" }, (!disabled && {
+      onClick: e => {
+        this.bcmButtonClick.emit(e);
+        this.bcmClick.emit(e);
+      },
+    })), (disabled && {
+      "disabled": true,
+      "aria-disabled": true,
+      "tabindex": -1,
+      "onClick": e => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+    }));
+    const { hostStyle, containerStyle, textStyle } = buttonStyle({
       size,
-      type,
-      kind,
-      icon,
-      iconPosition,
-      disabled,
-      outline,
-      href,
-      target,
-      loading,
-      variant,
+      kind: buttonKind,
       fullWidth,
-      hidden,
-      value,
-      isIconOnly: !!(this.isHaveChildNodes() && this.icon),
-    });
-  }
-  getStateData() {
-    return buttonState.getValue(this._id);
-  }
-  isHaveChildNodes() {
-    const childNodes = Array.from(this.el.childNodes);
-    return childNodes.find(node => node.nodeType === Node.TEXT_NODE) === undefined;
-  }
-  setColor(color = this.color) {
-    if (!color)
-      return;
-    const { kind } = this;
-    const prefix = `--bcm-button-${kind}`;
-    if (kind === 'solid') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor('white'),
-        [`${prefix}-color-disabled`]: ColorHelper.dsColor('white'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor('slate-400')
-      };
-    }
-    else if (kind == 'link') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-color-disabled`]: ColorHelper.dsColor('slate-400'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor('transparent'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor('slate-50'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor('transparent')
-      };
-    }
-    else if (kind == 'ghost') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-disabled`]: ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-100'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-200'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-400'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor(color + '-50'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-300'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-400'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor(color + '-200'),
-      };
-    }
-    return;
-  }
-  render() {
-    const { size, kind, disabled, outline, type, href, target, loading, variantColor, fullWidth, hidden, icon, iconPosition, value, isIconOnly, iconSize } = this.getStateData();
-    const classPrefix = 'bcm-button';
-    let componentClass = classnames('bcm-button__container', `bcm-button__container-size-${size}`, `bcm-button__container-kind-${outline ? 'ghost' : kind}`, {
-      'full-width': fullWidth,
-      'checked': this.checked,
-      'disabled': disabled,
+      checked: this.checked,
+      disabled,
     });
-    const hostClasses = classnames(`${classPrefix}`, {
-      hidden,
-      'full-width': fullWidth,
+    const tones = {
+      solid: {
+        "white": ["text", "text-hover", "text-active"],
+        "700": ["bg", "border"],
+        "800": ["bg-hover", "border-hover"],
+        "900": ["bg-active", "border-active"],
+      },
+      ghost: {
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+        "100": ["bg"],
+        "200": ["bg-hover"],
+        "300": ["bg-active", "border"],
+        "400": ["border-hover"],
+        "500": ["border-active"],
+      },
+      link: {
+        "transparent": ["bg", "bg-hover", "bg-active", "border", "border-hover", "border-active"],
+        "700": ["text"],
+        "800": ["text-hover"],
+        "900": ["text-active"],
+      },
+    };
+    const buttonColor = {
+      solid: color || (variantExists && variantOptions[variant].color),
+      ghost: "slate",
+      link: color || (variantExists && variantOptions[variant].color) || "blue",
+    };
+    const dc = Generate.getTwColor({
+      color: buttonColor[buttonKind],
+      tones: tones[buttonKind],
+      variable: `--bcm-button`,
     });
-    return (h(Host, { class: hostClasses, style: this.setColor(variantColor), onClick: () => !disabled && this.bcmClick.emit(this.el) }, h(ButtonTemplate, { type: type, value: value, componentClass: componentClass, disabled: disabled, href: href, target: target, icon: icon, loading: loading, iconSize: iconSize, isIconOnly: isIconOnly, iconPosition: iconPosition })));
+    const style = Object.assign({}, dc);
+    return (h(Host, { class: hostStyle(), style: style }, h(Tag, Object.assign({ class: containerStyle() }, commonAttributes, (this.isLink() ? linkAttributes : buttonAttributes)), h("slot", { name: "prefix" }), buttonIcon && (h("span", { class: `${buttonIconPosition == "suffix" ? "tw-order-1" : "tw-order-0"} bcm-button__container-icon` }, h("i", { class: `${buttonIcon}` }))), h("span", { class: textStyle() }, h("slot", null, buttonText)), h("slot", { name: "suffix" }), loading && (h("div", { class: "tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-rounded-[--bcm-button-radius] tw-bg-inherit" }, h("i", { class: "far fa-spinner-third fa-spin" }))))));
   }
   get el() { return this; }
   static get style() { return buttonCss; }
 }, [4, "bcm-button", {
-    "_id": [1537, "id"],
-    "hidden": [1540],
-    "type": [1025],
-    "size": [1025],
-    "disabled": [1540],
-    "kind": [1025],
-    "outline": [1028],
-    "icon": [1025],
-    "href": [1025],
-    "target": [1025],
-    "value": [1025],
-    "loading": [1028],
-    "variant": [1025],
-    "dataDismiss": [1028, "data-dismiss"],
-    "fullWidth": [1028, "full-width"],
-    "iconPosition": [1025, "icon-position"],
-    "color": [1032],
-    "checked": [1028]
-  }, [[2, "click", "handleOnClick"]]]);
+    "type": [1],
+    "form": [1],
+    "formAction": [1, "formaction"],
+    "formMethod": [1, "formmethod"],
+    "formEnctype": [1, "formenctype"],
+    "formTarget": [1, "formtarget"],
+    "formNoValidate": [4, "formnovalidate"],
+    "href": [1],
+    "target": [1],
+    "rel": [1],
+    "download": [1],
+    "_id": [513, "id"],
+    "value": [1],
+    "name": [1],
+    "variant": [1],
+    "dataDismiss": [4, "data-dismiss"],
+    "color": [8],
+    "checked": [4],
+    "size": [1],
+    "disabled": [4],
+    "hidden": [4],
+    "kind": [1],
+    "outline": [4],
+    "filled": [4],
+    "icon": [1],
+    "loading": [4],
+    "text": [1],
+    "fullWidth": [4, "full-width"],
+    "iconPosition": [1, "icon-position"]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/caption-template.js

@@ -10,18 +10,18 @@ const CaptionTemplate = ({ noCaption, captionType, caption, captionError, custom
 maxLength, value, }) => {
   size = size || "medium";
   return ((noCaption == false || maxLength) && (h("div", { class: classnames("bcm-ui-element bcm-ui-feedback bcm-caption-area tw-mt-1 tw-min-h-[20px] tw-flex tw-flex-row tw-items-start tw-justify-between tw-font-normal", {
-      "tw-text-slate-500": !captionType || captionType == "default",
-      "tw-text-blue-600": captionType == "info",
-      "tw-text-emerald-700": captionType == "success",
-      "tw-text-amber-700": captionType == "warning",
-      "tw-text-red-600": captionType == "error",
+      "tw-text-color-caption": !captionType || captionType == "default",
+      "tw-text-color-primary": captionType == "info",
+      "tw-text-color-success": captionType == "success",
+      "tw-text-color-warning": captionType == "warning",
+      "tw-text-color-error": captionType == "error",
     }, {
-      "tw-text-1": size == "small",
-      "tw-text-2": size == "medium",
-      "tw-text-3": size == "large",
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
     }, captionType && captionType != "default" && `bcm-caption-area__type-${captionType}`) },
     h("div", { class: "bcm-caption-area__text" }, captionType == "error" ? customErrorMessage || captionError : caption),
-    maxLength && h("div", { class: "bcm-caption-area__text tw-text-slate-500" },
+    maxLength && h("div", { class: "bcm-caption-area__text tw-text-color-caption" },
       " ",
       `${(value === null || value === void 0 ? void 0 : value.length) || 0}/${maxLength}`,
       " "))));