bromcom-ui 2.9.1-rc.0 → 2.9.1-rc.1

package/dist/cjs/{number-helper-6c8e0d90.js → number-helper-b178b610.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const generate = require('./generate-7bd78318.js');
+const generate = require('./generate-efeda203.js');
 
 class NumberHelper {
 }

package/dist/cjs/old-bcm-popover-box.cjs.entry.js

@@ -8,16 +8,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 require('./element-dragger-a8562f82.js');
-const popoverPlacement = require('./popover-placement-f20020a6.js');
-const floatingUi = require('./floating-ui-b441ea7c.js');
+const popoverPlacement = require('./popover-placement-4156a9ec.js');
+const floatingUi = require('./floating-ui-4a2c2bd4.js');
 const index$1 = require('./index-95ae50d0.js');
-const generate = require('./generate-7bd78318.js');
-const numberHelper = require('./number-helper-6c8e0d90.js');
-const stringHelper = require('./string-helper-fda7cbba.js');
+const generate = require('./generate-efeda203.js');
+const numberHelper = require('./number-helper-b178b610.js');
+const stringHelper = require('./string-helper-4cd32dbb.js');
 require('./utils-fc077139.js');
-require('./bcm-7f703055.js');
+require('./bcm-9e47c4b2.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-21f7555f.js');
+require('./package-2899048c.js');
 require('./colors-078851ec.js');
 
 const oldPopoverBoxCss = "@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-popover-box{display:none;position:absolute;transition:transform 0.2s ease-in-out;}.bcm-popover-box .bcm-pop-box{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:10px;line-height:calc(10px + 8px);box-shadow:0 4px 12px 2px rgba(17, 24, 38, 0.1);border-radius:4px;position:absolute;box-sizing:border-box;background-color:#FFFFFF;border:1px solid #FFFFFF;z-index:-99999;overflow:hidden;visibility:hidden;width:fit-content;position:absolute;display:block;overflow:hidden;visibility:hidden;z-index:-99999;filter:drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.25))}.bcm-popover-box .bcm-pop-box.bcm-pop-open{overflow:unset;visibility:visible;height:unset}.bcm-popover-box .bcm-pop-box .bcm-pop-heading,.bcm-popover-box .bcm-pop-box .bcm-pop-content{display:block}.bcm-popover-box .bcm-pop-box .bcm-pop-heading:not(:empty){padding:4px 16px;border-bottom:1px solid #D9D9D9;color:var(--bcm-color-grey-9)}.bcm-popover-box .bcm-pop-box .bcm-pop-content:not(:empty){padding:8px 16px;color:var(--bcm-color-grey-8)}.bcm-popover-box::after{content:\"\";position:absolute;display:none;border:6px solid;z-index:10900;pointer-events:none}.bcm-popover-box.bcm-pop-open{display:block;z-index:10900}.bcm-popover-box.bcm-pop-open .bcm-pop-box{z-index:10900;overflow:unset;visibility:unset}.bcm-popover-box.bcm-pop-open::after{display:block}.bcm-popover-box.top .bcm-pop-box{bottom:100%;margin-bottom:16px}.bcm-popover-box.top::after{bottom:100%;margin-bottom:4px;border-color:#FFFFFF transparent transparent transparent}.bcm-popover-box.bottom .bcm-pop-box{top:100%;margin-top:16px}.bcm-popover-box.bottom::after{top:100%;margin-top:4px;border-color:transparent transparent #FFFFFF transparent}.bcm-popover-box.left .bcm-pop-box{right:100%;margin-right:16px}.bcm-popover-box.left::after{right:100%;margin-right:4px;border-color:transparent transparent transparent #FFFFFF}.bcm-popover-box.right .bcm-pop-box{left:100%;margin-left:16px}.bcm-popover-box.right::after{left:100%;margin-left:4px;border-color:transparent #FFFFFF transparent transparent}.bcm-popover-box.top.center .bcm-pop-box,.bcm-popover-box.bottom.center .bcm-pop-box{left:50%;transform:translateX(-50%)}.bcm-popover-box.top.center::after,.bcm-popover-box.bottom.center::after{left:50%;transform:translateX(-50%)}.bcm-popover-box.top.start .bcm-pop-box,.bcm-popover-box.bottom.start .bcm-pop-box{left:0}.bcm-popover-box.top.start::after,.bcm-popover-box.bottom.start::after{left:16px}.bcm-popover-box.top.end .bcm-pop-box,.bcm-popover-box.bottom.end .bcm-pop-box{right:0}.bcm-popover-box.top.end::after,.bcm-popover-box.bottom.end::after{right:16px}.bcm-popover-box.left.center .bcm-pop-box,.bcm-popover-box.right.center .bcm-pop-box{top:50%;transform:translateY(-50%)}.bcm-popover-box.left.center::after,.bcm-popover-box.right.center::after{top:50%;transform:translateY(-50%)}.bcm-popover-box.left.start .bcm-pop-box,.bcm-popover-box.right.start .bcm-pop-box{top:0}.bcm-popover-box.left.start::after,.bcm-popover-box.right.start::after{top:12px}.bcm-popover-box.left.end .bcm-pop-box,.bcm-popover-box.right.end .bcm-pop-box{bottom:0}.bcm-popover-box.left.end::after,.bcm-popover-box.right.end::after{bottom:12px}.bcm-popover-box.top{transform:translateY(1px)}.bcm-popover-box.bottom{transform:translateY(-1px)}.bcm-popover-box.left{transform:translateX(1px)}.bcm-popover-box.right{transform:translateX(-1px)}.bcm-popover-box.top.bcm-pop-open,.bcm-popover-box.bottom.bcm-pop-open{transform:translateY(0)}.bcm-popover-box.left.bcm-pop-open,.bcm-popover-box.right.bcm-pop-open{transform:translateX(0)}.bcm-popover-box.bcm-pop-linked.top .bcm-pop-box{margin:0 0 2px 0}.bcm-popover-box.bcm-pop-linked.bottom .bcm-pop-box{margin:2px 0 0 0}.bcm-popover-box.bcm-pop-linked.left .bcm-pop-box{margin:0 2px 0 0}.bcm-popover-box.bcm-pop-linked.right .bcm-pop-box{margin:0 0 0 2px}.bcm-popover-box.bcm-pop-linked .bcm-pop-box{filter:unset;border-radius:8px;box-shadow:0 2px 6px 1px rgba(17, 24, 38, 0.1)}.bcm-popover-box.bcm-pop-linked::after{display:none}";

package/dist/cjs/old-bcm-popover.cjs.entry.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c591ecec.js');
 const index$1 = require('./index-95ae50d0.js');
-const bcm = require('./bcm-7f703055.js');
-const generate = require('./generate-7bd78318.js');
+const bcm = require('./bcm-9e47c4b2.js');
+const generate = require('./generate-efeda203.js');
 require('./_commonjsHelpers-ed84c3ca.js');
-require('./package-21f7555f.js');
+require('./package-2899048c.js');
 require('./colors-078851ec.js');
 
 const oldPopoverCss = "@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}.bcm-popover{display:inline-flex}";
@@ -24,8 +24,8 @@ const OldBcmPopover = class {
     this._title = undefined;
     this._id = generate.Generate.UID();
     this.message = undefined;
-    this.placement = bcm.Bcm.Placement.top;
-    this.trigger = bcm.Bcm.TriggerType.click;
+    this.placement = bcm.Bcm$1.Placement.top;
+    this.trigger = bcm.Bcm$1.TriggerType.click;
     this.open = false;
     this.linkedComponent = undefined;
   }

package/dist/cjs/{package-21f7555f.js → package-2899048c.js}

@@ -4,6 +4,6 @@
  */
 'use strict';
 
-const version = "2.9.1-rc.0";
+const version = "2.9.1-rc.1";
 
 exports.version = version;

package/dist/cjs/{popover-placement-f20020a6.js → popover-placement-4156a9ec.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const stringHelper = require('./string-helper-fda7cbba.js');
+const stringHelper = require('./string-helper-4cd32dbb.js');
 
 const opposites = {
   left: 'right',

package/dist/cjs/{slot-template-873b0cd5.js → slot-template-46018683.js}

@@ -5,7 +5,7 @@
 'use strict';
 
 const index = require('./index-c591ecec.js');
-const stringHelper = require('./string-helper-fda7cbba.js');
+const stringHelper = require('./string-helper-4cd32dbb.js');
 
 const SlotTemplate = ({ value, className, name }) => {
   return stringHelper.StringHelper.isNullOrEmpty(value) ? index.h("span", { class: className },

package/dist/cjs/{stepper-states-736e2aa7.js → stepper-states-9bd52bd4.js}

@@ -5,7 +5,7 @@
 'use strict';
 
 const index = require('./index-d321de96.js');
-const generate = require('./generate-7bd78318.js');
+const generate = require('./generate-efeda203.js');
 const index$1 = require('./index-c591ecec.js');
 
 const { state } = index.createStore({

package/dist/cjs/{string-helper-fda7cbba.js → string-helper-4cd32dbb.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const bcm = require('./bcm-7f703055.js');
+const bcm = require('./bcm-9e47c4b2.js');
 const _commonjsHelpers = require('./_commonjsHelpers-ed84c3ca.js');
 
 var slugify = _commonjsHelpers.createCommonjsModule(function (module, exports) {
@@ -94,7 +94,7 @@ StringHelper.replace = (str, search, replace) => str.replace(search, replace);
 StringHelper.remove = (str, search) => str.replace(search, '');
 StringHelper.isNullOrEmpty = (str) => str === null || str === undefined || str === '';
 StringHelper.localizationMessage = (str, args) => str.replace(/{(\d+)}/g, (match, number) => (typeof args[number] != 'undefined' ? args[number] : match));
-StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(bcm.Bcm.FormErrorMessages[type], args);
+StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(bcm.Bcm$1.FormErrorMessages[type], args);
 StringHelper.split = (str, separator) => str.split(separator);
 StringHelper.textContains = (str, search) => str && str.indexOf(search) !== -1;
 StringHelper.textLimitter = (str, limit, newLine = false) => (str && str.length > limit ? `${str.substring(0, limit)}...` : str) + `${newLine ? ' <br /> ' : ''}`;

package/dist/cjs/{tooltip-helper-0475ad78.js → tooltip-helper-f828ebee.js}

@@ -5,14 +5,15 @@
 'use strict';
 
 require('./element-dragger-a8562f82.js');
-const stringHelper = require('./string-helper-fda7cbba.js');
+const stringHelper = require('./string-helper-4cd32dbb.js');
 const utils = require('./utils-fc077139.js');
-const floatingUi = require('./floating-ui-b441ea7c.js');
+const floatingUi = require('./floating-ui-4a2c2bd4.js');
 const colorHelper = require('./color-helper-c3a819ea.js');
-require('./validators-9b9662d9.js');
-const generate = require('./generate-7bd78318.js');
-require('./number-helper-6c8e0d90.js');
-const bcm = require('./bcm-7f703055.js');
+require('./datetime-helper-eaf4fadb.js');
+const generate = require('./generate-efeda203.js');
+require('./number-helper-b178b610.js');
+require('./validators-2adde99d.js');
+const bcm = require('./bcm-9e47c4b2.js');
 
 class Tooltip {
   constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
@@ -27,11 +28,11 @@ class Tooltip {
     this.target = () => document.getElementById(this.targetId);
     this.sizeClass = () => {
       switch (this.size) {
-        case bcm.Bcm$1.Size.small:
+        case bcm.Bcm.Size.small:
           return "tw-text-1";
-        case bcm.Bcm$1.Size.medium:
+        case bcm.Bcm.Size.medium:
           return "tw-text-2";
-        case bcm.Bcm$1.Size.large:
+        case bcm.Bcm.Size.large:
           return "tw-text-3";
         default:
           return "tw-text-2";

package/dist/cjs/{validators-9b9662d9.js → validators-2adde99d.js}

@@ -4,11 +4,7 @@
  */
 'use strict';
 
-const generate = require('./generate-7bd78318.js');
-
-class DateTimeHelper {
-}
-DateTimeHelper.convertTimeStampToDate = (timestamp) => new Date(timestamp);
+const generate = require('./generate-efeda203.js');
 
 class Validators {
 }
@@ -34,5 +30,4 @@ Validators.isValidate = (str, type) => {
   }
 };
 
-exports.DateTimeHelper = DateTimeHelper;
 exports.Validators = Validators;

package/dist/collection/components/molecules/modal/modal.js

@@ -58,6 +58,7 @@ export class BcmModal {
     if (obj === null || obj === void 0 ? void 0 : obj.force) {
       this.isShow = false;
       this.close.emit(); // Deprecated
+      this.modalClose.emit();
       return;
     }
     this.modalBeforeClose.emit(this.el);
@@ -94,6 +95,7 @@ export class BcmModal {
     if (e.target === this.el) {
       this.isShow = false;
       this.close.emit(); // Deprecated
+      this.modalClose.emit();
     }
   }
   _openHandler() {
@@ -291,7 +293,22 @@ export class BcmModal {
     return [{
         "method": "close",
         "name": "bcm-close",
-        "bubbles": true,
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "modalClose",
+        "name": "bcm-modal-close",
+        "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {
@@ -306,7 +323,7 @@ export class BcmModal {
       }, {
         "method": "modalBeforeClose",
         "name": "bcm-modal-before-close",
-        "bubbles": true,
+        "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {
@@ -321,7 +338,7 @@ export class BcmModal {
       }, {
         "method": "modalBeforeOpen",
         "name": "bcm-modal-before-open",
-        "bubbles": true,
+        "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {
@@ -400,13 +417,13 @@ export class BcmModal {
       }, {
         "name": "bcm-modal-before-open",
         "method": "showModal",
-        "target": "document",
+        "target": undefined,
         "capture": false,
         "passive": false
       }, {
         "name": "bcm-modal-before-close",
         "method": "hideModal",
-        "target": "document",
+        "target": undefined,
         "capture": false,
         "passive": false
       }];

package/dist/collection/components/molecules/skeleton/skeleton.css

@@ -0,0 +1,133 @@
+@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;
+}
+
+/**
+ * Generator
+ */
+.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;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host {
+  display: block;
+  position: relative;
+  overflow: hidden;
+}

package/dist/collection/components/molecules/skeleton/skeleton.js

@@ -2,35 +2,51 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h } from "@stencil/core";
-import { Generate } from "../../../helper/generate";
+import { Generate } from "@bcm/helpers";
+import { Host, h } from "@stencil/core";
+import { skeletonStyle } from "./skeleton.style";
 export class BcmSkeleton {
   constructor() {
+    this.items = [];
     this._id = Generate.UID();
-    this.loading = true;
+    this.effect = "pulse";
+    this.variant = "rect";
+    this.count = 1;
+    this.hidden = false;
+    this.width = null;
+    this.height = "16px";
+    this.marginBottom = null;
+    this.customStyles = {};
   }
-  componentDidLoad() {
-    var _a;
-    const parentElement = (_a = this.el) === null || _a === void 0 ? void 0 : _a.parentElement;
-    if (parentElement) {
-      const hidden = document.createElement("span");
-      hidden.setAttribute("id", `${this._id}-span`);
-      hidden.classList.add("tw-hidden");
-      hidden.innerHTML = `<slot />`;
-      parentElement.appendChild(hidden);
-      if (parentElement.isConnected) {
-        this.loading = false;
-        parentElement.querySelector(`#${this._id}-span`).remove();
-      }
-    }
+  componentWillLoad() {
+    this.init();
+  }
+  componentWillUpdate() {
+    this.init();
+  }
+  init() {
+    this.items.length = this.count;
+    this.items.fill(1);
   }
   render() {
-    const SkeletonAnimate = () => {
-      return (h("div", { class: "tw-mx-auto tw-w-full tw-max-w-sm tw-rounded-md tw-border tw-border-blue-300 tw-p-4 tw-shadow" }, h("span", { class: "tw-hidden" }, h("slot", null)), h("div", { class: "tw-flex tw-animate-pulse tw-space-x-4" }, h("div", { class: "tw-h-10 tw-w-10 tw-rounded-full tw-bg-slate-200" }), h("div", { class: "tw-flex-1 tw-space-y-6 tw-py-1" }, h("div", { class: "tw-h-2 tw-rounded tw-bg-slate-200" }), h("div", { class: "tw-space-y-3" }, h("div", { class: "tw-grid tw-grid-cols-3 tw-gap-4" }, h("div", { class: "tw-col-span-2 tw-h-2 tw-rounded tw-bg-slate-200" }), h("div", { class: "tw-col-span-1 tw-h-2 tw-rounded tw-bg-slate-200" })), h("div", { class: "tw-h-2 tw-rounded tw-bg-slate-200" }))))));
-    };
-    return this.loading ? h(SkeletonAnimate, null) : h("slot", null);
+    const { variant, effect, width, height, marginBottom, customStyles } = this;
+    const style = Object.assign(Object.assign(Object.assign(Object.assign({}, (width ? { width } : {})), (height ? { height } : {})), (marginBottom ? { marginBottom } : {})), (typeof customStyles === "string" ? JSON.parse(customStyles) : customStyles));
+    const { host } = skeletonStyle({ variant, effect });
+    return (h(Host, null, this.items.map((_, index) => {
+      return h("div", { role: "status", part: "base", key: index, class: host(), "aria-busy": "true", "aria-live": "polite", style: style });
+    })));
   }
   static get is() { return "bcm-skeleton"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["skeleton.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["skeleton.css"]
+    };
+  }
   static get properties() {
     return {
       "_id": {
@@ -51,9 +67,63 @@ export class BcmSkeleton {
         "reflect": true,
         "defaultValue": "Generate.UID()"
       },
-      "loading": {
+      "effect": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"pulse\" | \"ping\" | \"none\"",
+          "resolved": "\"none\" | \"ping\" | \"pulse\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "effect",
+        "reflect": true,
+        "defaultValue": "\"pulse\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"circle\" | \"rect\"",
+          "resolved": "\"circle\" | \"rect\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"rect\""
+      },
+      "count": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "count",
+        "reflect": true,
+        "defaultValue": "1"
+      },
+      "hidden": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -65,11 +135,82 @@ export class BcmSkeleton {
           "tags": [],
           "text": ""
         },
-        "attribute": "loading",
+        "attribute": "hidden",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "width": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "width",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "height",
+        "reflect": false,
+        "defaultValue": "\"16px\""
+      },
+      "marginBottom": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "margin-bottom",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "customStyles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "{ [key: string]: string } | string",
+          "resolved": "string | { [key: string]: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "custom-styles",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "{}"
       }
     };
   }
-  static get elementRef() { return "el"; }
 }

package/dist/collection/components/molecules/skeleton/skeleton.style.js

@@ -0,0 +1,35 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { tv } from "tailwind-variants";
+export const skeletonStyle = tv({
+  slots: {
+    host: "tw-bg-gray-200 tw-w-full tw-inline-block",
+  },
+  variants: {
+    variant: {
+      rect: {
+        host: "tw-rounded-md",
+      },
+      circle: {
+        host: "tw-rounded-full tw-w-8 tw-h-8",
+      },
+    },
+    effect: {
+      pulse: {
+        host: "tw-animate-pulse",
+      },
+      ping: {
+        host: "tw-animate-ping",
+      },
+      none: {
+        host: "tw-animate-none",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "rect",
+    effect: "pulse",
+  },
+});

package/dist/collection/components/organism/list/list.js

@@ -1643,7 +1643,7 @@ export class BcmList {
       }, {
         "method": "open",
         "name": "bcm-open",
-        "bubbles": true,
+        "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {
@@ -1658,7 +1658,7 @@ export class BcmList {
       }, {
         "method": "close",
         "name": "bcm-close",
-        "bubbles": true,
+        "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {