bromcom-ui 2.8.0-rc.8 → 3.0.0-rc.0

package/dist/components/button.js

@@ -2,166 +2,91 @@
  * 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 { B as Bcm } from './bcm.js';
-import { c as classnames } from './index2.js';
-import { c as createStore } from './index3.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 { I as IsLoad } from './is-load-decorator.js';
+import './color-helper.js';
+import './element-dragger.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import { a as Bcm } from './bcm.js';
+import { c as classnames } from './index2.js';
+import { I as IconTemplate } from './icon-template.js';
 
 const variantOptions = {
-  save: {
-    text: 'Save',
-    color: 'emerald',
-    icon: 'far fa-save',
-    iconPosition: 'prefix',
-  },
-  ok: {
-    text: 'Ok',
-    color: 'emerald',
-    icon: 'far fa-check',
-    iconPosition: 'prefix',
-  },
-  new: {
-    text: 'New',
-    color: 'emerald',
-    icon: 'far fa-plus',
-    iconPosition: 'prefix',
-  },
-  add: {
-    text: 'Add',
-    color: 'emerald',
-    icon: 'far fa-plus',
-    iconPosition: 'prefix',
-  },
-  create: {
-    text: 'Create',
-    color: 'emerald',
-    icon: 'far fa-plus',
-    iconPosition: 'prefix',
-  },
-  prev: {
-    text: 'Prev',
-    color: '',
-    icon: 'far fa-arrow-left',
-    iconPosition: 'prefix',
-  },
-  next: {
-    text: 'Next',
-    color: '',
-    icon: 'far fa-arrow-right',
-    iconPosition: 'suffix',
-  },
-  apply: {
-    text: 'Apply',
-    color: '',
-    icon: 'far fa-check-circle',
-    iconPosition: 'prefix',
-  },
-  submit: {
-    text: 'Submit',
-    color: '',
-    icon: 'far fa-save',
-    iconPosition: 'prefix',
-  },
-  send: {
-    text: 'Send',
-    color: 'emerald',
-    icon: 'far fa-paper-plane',
-    iconPosition: 'prefix',
-  },
-  delete: {
-    text: 'Delete',
-    color: 'red',
-    icon: 'far fa-trash',
-    iconPosition: 'prefix',
-  },
-  cancel: {
-    text: 'Cancel',
-    color: 'red',
-    icon: 'far fa-times',
-    iconPosition: 'prefix',
-  },
-  decline: {
-    text: 'Decline',
-    color: 'red',
-    icon: 'far fa-ban',
-    iconPosition: 'prefix',
-  },
-  close: {
-    text: 'Close',
-    color: 'red',
-    icon: 'far fa-times-circle',
-    iconPosition: 'prefix',
-  },
-  archive: {
-    text: 'Archive',
-    color: 'red',
-    icon: 'far fa-folder-open',
-    iconPosition: 'prefix',
-  },
-  remove: {
-    text: 'Remove',
-    color: 'red',
-    icon: 'far fa-minus-circle',
-    iconPosition: 'prefix',
-  },
-  edit: {
-    text: 'Edit',
-    color: '',
-    icon: 'far fa-edit',
-    iconPosition: 'prefix',
-  },
-  export: {
-    text: 'Export',
-    color: '',
-    icon: 'far fa-sign-out',
-    iconPosition: 'prefix',
-  },
-  import: {
-    text: 'Import',
-    color: '',
-    icon: 'far fa-sign-in',
-    iconPosition: 'prefix',
-  },
-  filter: {
-    text: 'Filter',
-    color: '',
-    icon: 'far fa-filter',
-    iconPosition: 'prefix',
-  },
-  update: {
-    text: 'Update',
-    color: '',
-    icon: 'far fa-sync',
-    iconPosition: 'prefix',
-  },
-  reset: {
-    text: "Reset",
-    color: "",
-    icon: 'far fa-sync',
-    iconPosition: "prefix",
-  },
-  download: {
-    text: 'Download',
-    color: '',
-    icon: 'far fa-download',
-    iconPosition: 'prefix',
-  },
+  // Old variant options
+  save: { text: "Save", color: "emerald", icon: "far fa-save", iconPosition: "prefix" },
+  ok: { text: "Ok", color: "emerald", icon: "far fa-check", iconPosition: "prefix" },
+  new: { text: "New", color: "emerald", icon: "far fa-plus", iconPosition: "prefix" },
+  add: { text: "Add", color: "emerald", icon: "far fa-plus", iconPosition: "prefix" },
+  create: { text: "Create", color: "emerald", icon: "far fa-plus", iconPosition: "prefix" },
+  send: { text: "Send", color: "emerald", icon: "far fa-paper-plane", iconPosition: "prefix" },
+  delete: { text: "Delete", color: "red", icon: "far fa-trash", iconPosition: "prefix" },
+  cancel: { text: "Cancel", color: "red", icon: "far fa-times", iconPosition: "prefix" },
+  decline: { text: "Decline", color: "red", icon: "far fa-ban", iconPosition: "prefix" },
+  close: { text: "Close", color: "red", icon: "far fa-times-circle", iconPosition: "prefix" },
+  archive: { text: "Archive", color: "red", icon: "far fa-folder-open", iconPosition: "prefix" },
+  remove: { text: "Remove", color: "red", icon: "far fa-minus-circle", iconPosition: "prefix" },
+  prev: { text: "Prev", color: "", icon: "far fa-arrow-left", iconPosition: "prefix" },
+  next: { text: "Next", color: "", icon: "far fa-arrow-right", iconPosition: "suffix" },
+  apply: { text: "Apply", color: "", icon: "far fa-check-circle", iconPosition: "prefix" },
+  submit: { text: "Submit", color: "", icon: "far fa-save", iconPosition: "prefix" },
+  edit: { text: "Edit", color: "", icon: "far fa-edit", iconPosition: "prefix" },
+  export: { text: "Export", color: "", icon: "far fa-sign-out", iconPosition: "prefix" },
+  import: { text: "Import", color: "", icon: "far fa-sign-in", iconPosition: "prefix" },
+  filter: { text: "Filter", color: "", icon: "far fa-filter", iconPosition: "prefix" },
+  update: { text: "Update", color: "", icon: "far fa-sync", iconPosition: "prefix" },
+  reset: { text: "Reset", color: "", icon: "far fa-sync", iconPosition: "prefix" },
+  download: { text: "Download", color: "", icon: "far fa-download", iconPosition: "prefix" },
+  // New variant options
+  // edit: { text: "Edit", color: "blue", iconPosition: "prefix", icon: "far fa-pen"},
+  // send: { text: "Send", color: "blue", iconPosition: "prefix", icon: "far fa-paper-plane"},
+  // submit: { text: "Submit", color: "blue", iconPosition: "prefix", icon: "far fa-hand-holding-box"},
+  // add: { text: "Add", color: "blue", iconPosition: "prefix", icon: "far fa-plus"},
+  // setting: { text: "Setting", color: "blue", iconPosition: "prefix", icon: "far fa-cog"},
+  // download: { text: "Download", color: "blue", iconPosition: "prefix", icon: "far fa-download"},
+  // export: { text: "Export", color: "blue", iconPosition: "prefix", icon: "far fa-file-export"},
+  // import: { text: "Import", color: "blue", iconPosition: "prefix", icon: "far fa-file-import"},
+  // filter: { text: "Filter", color: "blue", iconPosition: "prefix", icon: "far fa-filter"},
+  // register: { text: "Register", color: "blue", iconPosition: "prefix", icon: "far fa-file-edit"},
+  // save: { text: "Save", color: "blue", iconPosition: "prefix", icon: "far fa-save"},
+  // create: { text: "Create", color: "blue", iconPosition: "prefix", icon: "far fa-plus-circle"},
+  // okey: { text: "Okey", color: "blue", iconPosition: "prefix", icon: "far fa-thumbs-up"},
+  // back: { text: "Back", color: "blue", iconPosition: "prefix", icon: "far fa-arrow-left"},
+  // return: { text: "Return", color: "blue", iconPosition: "prefix", icon: "far fa-arrow-to-left"},
+  // next: { text: "Next", color: "blue", iconPosition: "prefix", icon: "far fa-arrow-right"},
+  // new: { text: "New", color: "blue", iconPosition: "prefix", icon: "far fa-plus"},
+  // late: { text: "Late", color: "blue", iconPosition: "prefix", icon: "far fa-clock"},
+  // view: { text: "View", color: "blue", iconPosition: "prefix", icon: "far fa-file-alt" },
+  // submit: { text: "Submit", color: "emerald", iconPosition: "prefix", icon: "far fa-check-circle" },
+  // save: { text: "Save", color: "emerald", iconPosition: "prefix", icon: "far fa-save" },
+  // confirm: { text: "Confirm", color: "emerald", iconPosition: "prefix", icon: "far fa-check-circle" },
+  // proceed: { text: "Proceed", color: "emerald", iconPosition: "prefix", icon: "far fa-chevron-circle-right" },
+  // continue: { text: "Continue", color: "emerald", iconPosition: "prefix", icon: "far fa-arrow-right" },
+  // update: { text: "Update", color: "emerald", iconPosition: "prefix", icon: "far fa-sync" },
+  // agree: { text: "Agree", color: "emerald", iconPosition: "prefix", icon: "far fa-check-circle" },
+  // accept: { text: "Accept Terms", color: "emerald", iconPosition: "prefix", icon: "far fa-check-circle" },
+  // delete: { text: "Delete", color: "red", iconPosition: "prefix", icon: "far fa-trash-alt" },
+  // cancel: { text: "Cancel", color: "red", iconPosition: "prefix", icon: "far fa-times" },
+  // close: { text: "Close", color: "red", iconPosition: "prefix", icon: "far fa-times-circle" },
+  // try: { text: "Try Again", color: "red", iconPosition: "prefix", icon: "far fa-redo" },
+  // retry: { text: "Retry", color: "red", iconPosition: "prefix", icon: "far fa-redo" },
+  // decline: { text: "Decline", color: "red", iconPosition: "prefix", icon: "far fa-times-circle" },
+  // reject: { text: "Reject", color: "red", iconPosition: "prefix", icon: "far fa-times-circle" },
+  // warning: { text: "Warning", color: "amber", iconPosition: "prefix", icon: "far fa-exclamation-circle" },
+  // retry: { text: "Retry", color: "amber", iconPosition: "prefix", icon: "far fa-redo" },
+  // skip: { text: "Skip", color: "amber", iconPosition: "prefix", icon: "far fa-chevron-double-right" },
+  // review: { text: "Review", color: "amber", iconPosition: "prefix", icon: "far fa-search" },
+  // back: { text: "Back", color: "amber", iconPosition: "prefix", icon: "far fa-arrow-left" },
 };
 var VariantProps;
 (function (VariantProps) {
+  // Old variant props
   VariantProps["save"] = "save";
-  VariantProps["submit"] = "submit";
   VariantProps["ok"] = "ok";
   VariantProps["new"] = "new";
   VariantProps["add"] = "add";
   VariantProps["create"] = "create";
-  VariantProps["apply"] = "apply";
-  VariantProps["prev"] = "prev";
-  VariantProps["next"] = "next";
   VariantProps["send"] = "send";
   VariantProps["delete"] = "delete";
   VariantProps["cancel"] = "cancel";
@@ -169,57 +94,59 @@ var VariantProps;
   VariantProps["close"] = "close";
   VariantProps["archive"] = "archive";
   VariantProps["remove"] = "remove";
+  VariantProps["prev"] = "prev";
+  VariantProps["next"] = "next";
+  VariantProps["apply"] = "apply";
+  VariantProps["submit"] = "submit";
   VariantProps["edit"] = "edit";
   VariantProps["export"] = "export";
   VariantProps["import"] = "import";
   VariantProps["filter"] = "filter";
   VariantProps["update"] = "update";
-  VariantProps["reset"] = "Reset";
+  VariantProps["reset"] = "reset";
   VariantProps["download"] = "download";
+  // New variant props
+  // edit = "edit",
+  // send = "send",
+  // submit = "submit",
+  // add = "add",
+  // setting = "setting",
+  // download = "download",
+  // export = "export",
+  // import = "import",
+  // filter = "filter",
+  // register = "register",
+  // save = "save",
+  // create = "create",
+  // okey = "okey",
+  // back = "back",
+  // return = "return",
+  // next = "next",
+  // new = "new",
+  // late = "late",
+  // view = "view",
+  // submit = "submit",
+  // save = "save",
+  // confirm = "confirm",
+  // proceed = "proceed",
+  // continue = "continue",
+  // update = "update",
+  // agree = "agree",
+  // accept = "accept",
+  // delete = "delete",
+  // cancel = "cancel",
+  // close = "close",
+  // try = "try",
+  // retry = "retry",
+  // decline = "decline",
+  // reject = "reject",
+  // warning = "warning",
+  // retry = "retry",
+  // skip = "skip",
+  // review = "review",
+  // back = "back",
 })(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" }),
-    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}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{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-500);--bcm-button-solid-border-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-color-hover:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-border-hover:var(--bcm-new-ds-color-blue-600);--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-800);--bcm-button-solid-border-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-color-active:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-border-active:var(--bcm-new-ds-color-blue-700);--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-600);--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-600);--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-600);--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-600);--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-500);--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.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[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)}";
-
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
@@ -234,161 +161,128 @@ 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.kind = Bcm.Kind.solid;
+    this.kind = undefined;
     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,
-      size,
-      type,
-      kind,
-      icon,
-      iconPosition,
-      disabled,
-      outline,
-      href,
-      target,
-      loading,
-      variant,
-      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 + '-500'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-border-disabled`]: ColorHelper.dsColor('slate-400')
-      };
-    }
-    else if (kind == 'link') {
-      return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-500'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-700'),
-        [`${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 + '-600'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
-        [`${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,
-    });
-    const hostClasses = classnames(`${classPrefix}`, {
-      hidden,
-      'full-width': fullWidth,
-    });
-    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 })));
+    /* style definitions */
+    const { color, kind, size, variant, fullWidth, outline } = this;
+    /* Common Attributes */
+    const { _id, 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 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({ "disabled": disabled, "aria-disabled": disabled, "tabindex": disabled && -1 }, (!disabled && {
+      onClick: e => {
+        this.bcmButtonClick.emit(e);
+        this.bcmClick.emit(e);
+      },
+    }));
+    const buttonKind = kind || (outline ? Bcm.Kind.ghost : Bcm.Kind.solid);
+    /** Variant:
+     * The variant prop determines the button's appearance.
+     * If the variant prop is not set, the button will render in the default style.
+     * Props is always a priority.
+     */
+    const variantExists = variant && variantOptions[variant];
+    const buttonText = text || (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 buttonColor = buttonKind != "ghost" && (color || (variantExists && variantOptions[variant].color));
+    return (h(Host, { class: classnames("tw-preflight", "bcm-ui-element bcm-ui-action bcm-button tw-relative tw-inline-flex tw-w-auto", {
+        "tw-w-full": fullWidth,
+        "tw-cursor-not-allowed": disabled,
+        "tw-pointer-events-none": disabled || loading,
+      }) }, h(Tag, Object.assign({ id: _id + "-button", class: classnames("bcm-ui-element-button", buttonKind, size, {
+        "colored": buttonColor,
+        "disabled": disabled,
+        "tw-w-full": fullWidth,
+      }), style: Object.assign({}, Generate.getTwColor({ color: buttonColor })) }, commonAttributes, (this.isLink() ? linkAttributes : buttonAttributes)), buttonIcon && h(IconTemplate, { icon: buttonIcon, className: classnames(buttonIconPosition === Bcm.IconPosition.prefix ? "tw-order-first" : "tw-order-last") }), h("slot", null, buttonText), loading && (h("div", { class: "tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center tw-rounded-md 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],
+    "kind": [1],
+    "outline": [4],
+    "filled": [4],
+    "icon": [1],
+    "loading": [4],
+    "text": [1],
+    "fullWidth": [4, "full-width"],
+    "iconPosition": [1, "icon-position"]
+  }]);
 __decorate([
   IsLoad()
 ], BcmButton.prototype, "el", void 0);