wj-elements 0.1.128 → 0.1.130

package/dist/wje-toast.js

@@ -2,43 +2,40 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { WjElementUtils, event } from "./wje-element.js";
-const styles = '/*\n[ WJ Toast ]\n*/\n\n:host {\n  position: relative;\n  z-index: 9999;\n  width: 300px;\n  margin: .5rem 0;\n  display: block;\n}\n\n.native-toast {\n  display: flex;\n  align-items: center;\n  padding: 1rem;\n  overflow: hidden;\n  margin: 0;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: var(--wje-border-radius-large);\n  position: relative;\n\n  &.has-media slot[name="media"] {\n    flex: 0 0 1.5rem;\n    width: 1.5rem;\n    display: flex;\n    margin-right: .5rem;\n    justify-content: center;\n  }\n\n  .content {\n    font-size: var(--wje-font-size-small);\n    .headline {\n      font-size: var(--wje-font-size);\n      font-weight: var(--wje-font-weight-bold);\n    }\n  }\n\n  wje-button {\n    --wje-button-margin-inline: auto 0;\n    margin-left: auto !important;\n  }\n\n  .countdown {\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n    height: 4px;\n    .countdown-bar {\n      height: 100%;\n    }\n  }\n}\n\n:host([position=top]) {\n  animation: slideDown .3s ease-out forwards;\n  top: 1rem;\n  left: auto;\n  right: auto;\n}\n\n:host::part(icon) {\n  margin-right: .5rem;\n}\n\n@keyframes slideDown {\n  0% {\n    transform: translateY(-100%);\n  }\n  100% {\n    transform: translateY(0);\n  }\n}\n\n/*PRIMARY*/\n:host([color=primary]) .native-toast {\n  background-color: var(--wje-color-primary-1);\n  color: var(--wje-color-primary-9);\n  border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([color=complete]) .native-toast {\n  background-color: var(--wje-color-complete-1);\n  color: var(--wje-color-complete-9);\n  border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([color=success]) .native-toast {\n  background-color: var(--wje-color-success-1);\n  color: var(--wje-color-success-9);\n  border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([color=warning]) .native-toast{\n  background-color: var(--wje-color-warning-1);\n  color: var(--wje-color-warning-11);\n  border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([color=danger]) .native-toast {\n  background-color: var(--wje-color-danger-1);\n  color: var(--wje-color-danger-9);\n  border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([color=info]) .native-toast {\n  background-color: var(--wje-color-info-1);\n  color: var(--wje-color-info-11);\n  border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([color=contrast]) .native-toast {\n  background-color: var(--wje-color-contrast-2);\n  color: var(--wje-color-contrast-9);\n  border-color: var(--wje-color-contrast-3);\n}\n\n\n\n\n\n\n\n\n\n/*PRIMARY*/\n:host([color=primary]) .countdown-bar {\n  background-color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n:host([color=complete]) .countdown-bar {\n  background-color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n:host([color=success]) .countdown-bar {\n  background-color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n:host([color=warning]) .countdown-bar{\n  background-color: var(--wje-color-warning-9);\n}\n\n/*DANGER*/\n:host([color=danger]) .countdown-bar {\n  background-color: var(--wje-color-danger-9);\n}\n\n/*INFO*/\n:host([color=info]) .countdown-bar {\n  background-color: var(--wje-color-info-9);\n}\n\n/*CONTRAST*/\n:host([color=contrast]) .countdown-bar {\n  background-color: var(--wje-color-contrast-9);\n}';
+const styles = "/*\n[ WJ Toast ]\n*/\n\n:host {\n    position: relative;\n    z-index: 9999;\n    width: 300px;\n    margin: 0.5rem 0;\n    display: none;\n}\n\n:host([open]) {\n    display: block;\n}\n\n.native-toast {\n    display: flex;\n    align-items: center;\n    padding: 1rem;\n    overflow: hidden;\n    margin: 0;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--wje-border-radius-large);\n    position: relative;\n\n    &.has-media slot[name='media'] {\n        flex: 0 0 1.5rem;\n        width: 1.5rem;\n        display: flex;\n        margin-right: 0.5rem;\n        justify-content: center;\n    }\n\n    .content {\n        font-size: var(--wje-font-size-small);\n        .headline {\n            font-size: var(--wje-font-size);\n            font-weight: var(--wje-font-weight-bold);\n        }\n    }\n\n    wje-button {\n        --wje-button-margin-inline: auto 0;\n        margin-left: auto !important;\n    }\n\n    .countdown {\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        width: 100%;\n        height: 4px;\n        .countdown-bar {\n            height: 100%;\n        }\n    }\n}\n\n:host([position='top']) {\n    animation: slideDown 0.3s ease-out forwards;\n    top: 1rem;\n    left: auto;\n    right: auto;\n}\n\n:host::part(icon) {\n    margin-right: 0.5rem;\n}\n\n@keyframes slideDown {\n    0% {\n        transform: translateY(-100%);\n    }\n    100% {\n        transform: translateY(0);\n    }\n}\n\n/*PRIMARY*/\n:host([color='primary']) .native-toast {\n    background-color: var(--wje-color-primary-1);\n    color: var(--wje-color-primary-9);\n    border-color: var(--wje-color-primary-3);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .native-toast {\n    background-color: var(--wje-color-complete-1);\n    color: var(--wje-color-complete-9);\n    border-color: var(--wje-color-complete-3);\n}\n\n/*SUCCESS*/\n:host([color='success']) .native-toast {\n    background-color: var(--wje-color-success-1);\n    color: var(--wje-color-success-9);\n    border-color: var(--wje-color-success-3);\n}\n\n/*WARNING*/\n:host([color='warning']) .native-toast {\n    background-color: var(--wje-color-warning-1);\n    color: var(--wje-color-warning-11);\n    border-color: var(--wje-color-warning-3);\n}\n\n/*DANGER*/\n:host([color='danger']) .native-toast {\n    background-color: var(--wje-color-danger-1);\n    color: var(--wje-color-danger-9);\n    border-color: var(--wje-color-danger-3);\n}\n\n/*INFO*/\n:host([color='info']) .native-toast {\n    background-color: var(--wje-color-info-1);\n    color: var(--wje-color-info-11);\n    border-color: var(--wje-color-info-4);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .native-toast {\n    background-color: var(--wje-color-contrast-2);\n    color: var(--wje-color-contrast-9);\n    border-color: var(--wje-color-contrast-3);\n}\n\n/*PRIMARY*/\n:host([color='primary']) .countdown-bar {\n    background-color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n:host([color='complete']) .countdown-bar {\n    background-color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n:host([color='success']) .countdown-bar {\n    background-color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n:host([color='warning']) .countdown-bar {\n    background-color: var(--wje-color-warning-9);\n}\n\n/*DANGER*/\n:host([color='danger']) .countdown-bar {\n    background-color: var(--wje-color-danger-9);\n}\n\n/*INFO*/\n:host([color='info']) .countdown-bar {\n    background-color: var(--wje-color-info-9);\n}\n\n/*CONTRAST*/\n:host([color='contrast']) .countdown-bar {\n    background-color: var(--wje-color-contrast-9);\n}\n";
 class Toast extends WJElement {
   /**
-   * Toast constructor
-   * @constructor
+   * Creates an instance of Toast.
    */
   constructor() {
     super();
     /**
-     * Class name
+     * The class name for the component.
      * @type {string}
      */
     __publicField(this, "className", "Toast");
     /**
      * Asynchronously shows the toast notification.
-     *
      * This method sets the `open` property to `true` and dispatches the
      * `wje-toast:after-show` custom event. If the toast is already open,
      * the method returns `undefined`.
      */
     __publicField(this, "show", () => {
       if (this.open) {
-        return void 0;
+        return;
       }
       this.open = true;
       event.dispatchCustomEvent(this, "wje-toast:after-show");
     });
     /**
      * Asynchronously hides the toast notification.
-     *
      * This method sets the `open` property to `false` and dispatches the
      * `wje-toast:after-hide` custom event. If the toast is already hidden,
      * the method returns `undefined`.
      */
     __publicField(this, "hide", () => {
       if (!this.open) {
-        return void 0;
+        return;
       }
       this.open = false;
       event.dispatchCustomEvent(this, "wje-toast:after-hide");
@@ -46,7 +43,7 @@ class Toast extends WJElement {
     /**
      * Pauses the countdown animation and stops the timer.
      */
-    __publicField(this, "pause", async () => {
+    __publicField(this, "pause", () => {
       var _a;
       (_a = this.countdownAnimation) == null ? void 0 : _a.pause();
       this.stopTimer();
@@ -54,18 +51,16 @@ class Toast extends WJElement {
     /**
      * Resumes the countdown animation and resumes the timer.
      */
-    __publicField(this, "resume", async () => {
+    __publicField(this, "resume", () => {
       var _a;
       (_a = this.countdownAnimation) == null ? void 0 : _a.play();
       this.resumeTimer();
     });
     /**
      * Asynchronously starts the toast notification.
-     *
      * This method appends the toast notification to the document body and
      * shows the toast notification. The method returns a promise that
      * resolves when the toast notification is shown.
-     *
      * @returns {Promise<unknown>}
      */
     __publicField(this, "start", () => {
@@ -85,145 +80,123 @@ class Toast extends WJElement {
     this.toastStack = Object.assign(document.createElement("div"), { className: "wje-toast-stack" });
   }
   /**
-   * Set headline
+   * Set headline value of the toast.
    * @param value
    */
   set headline(value) {
     this.setAttribute("headline", value);
   }
   /**
-   * Get headline
+   * Get headline value of the toast.
    * @returns {string}
    */
   get headline() {
     return this.getAttribute("headline");
   }
   /**
-   * Set open
+   * Set open value of the toast.
    * @param value
    */
   set open(value) {
-    this.setAttribute("open", value);
+    this.removeAttribute("open");
+    if (WjElementUtils.stringToBoolean(value)) this.setAttribute("open", value);
   }
   /**
-   * Get open
-   * @returns {string}
+   * Get open value of the toast.
+   * @returns {boolean}
    */
   get open() {
-    return this.getAttribute("open");
+    return this.hasAttribute("open");
   }
   /**
-   * Set duration
+   * Set duration value of the toast.
    * @param value
    */
   set duration(value) {
     this.setAttribute("duration", value);
   }
   /**
-   * Get duration
+   * Get duration value of the toast.
    * @returns {number}
    */
   get duration() {
     return +this.getAttribute("duration");
   }
   /**
-   * Set closable
+   * Set closable value of the toast.
    * @param value
    */
   set closable(value) {
-    if (value)
-      this.setAttribute("closable", value);
+    this.setAttribute("closable", value || "");
   }
   /**
-   * Get closable
-   * @returns {string}
+   * Get closable value of the toast.
+   * @returns {boolean}
    */
   get closable() {
-    return this.getAttribute("closable");
+    return this.hasAttribute("closable");
   }
   /**
-   * Set color
+   * Set color value of the toast.
    * @param value
    */
   set color(value) {
     this.setAttribute("color", value);
   }
   /**
-   * Get color
+   * Get color value of the toast.
    * @returns {string}
    */
   get color() {
     return this.getAttribute("color");
   }
   /**
-   * Set countdown
+   * Set countdown value of the toast.
    * @param value
    */
   set countdown(value) {
-    if (value)
-      this.setAttribute("countdown", value);
+    if (value) this.setAttribute("countdown", value);
   }
   /**
-   * Get countdown
+   * Get countdown value of the toast.
    * @returns {boolean}
    */
   get countdown() {
     return this.hasAttribute("countdown");
   }
   /**
-   * Set icon
+   * Set icon value of the toast.
    * @param value
    */
   set icon(value) {
     this.setAttribute("icon", value);
   }
   /**
-   * Get icon
+   * Get icon value of the toast.
    * @returns {string}
    */
   get icon() {
     return this.getAttribute("icon");
   }
   /**
-   * Get CSS stylesheet
+   * Returns the CSS stylesheet for the component.
    * @static
-   * @returns {Object} styles
+   * @returns {CSSStyleSheet} The CSS stylesheet
    */
   static get cssStyleSheet() {
     return styles;
   }
   /**
-   * Returns the list of attributes to observe for changes.
-   *
-   * @static
-   * @returns {Array<string>}
-   */
-  // static get observedAttributes() {
-  //     return ["open", "color", "duration"];
-  // }
-  /**
-   * Called when an attribute changes.
-   *
-   * @param {string} name - The name of the attribute.
-   * @param {string} old - The old value of the attribute.
-   * @param {string} newName - The new value of the attribute.
-   */
-  attributeChangedCallback(name, old, newName) {
-  }
-  /**
-   * Setup attributes
+   * Setup attributes for the Button element.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
   /**
-   * Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
+   * Draw method for the toast notification.
+   * @returns {object} Document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");
@@ -264,20 +237,15 @@ class Toast extends WJElement {
     }
     native.appendChild(mediaSlot);
     native.appendChild(content);
-    if (this.hasAttribute("closable"))
-      native.appendChild(closeBtn);
-    if (this.hasAttribute("countdown"))
-      native.appendChild(countdownEl);
+    if (this.closable) native.appendChild(closeBtn);
+    if (this.hasAttribute("countdown")) native.appendChild(countdownEl);
     fragment.appendChild(native);
     this.closeBtn = closeBtn;
     this.countdownBar = countdownBar;
     return fragment;
   }
   /**
-   * After draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
+   * After draw method for the toast notification.
    */
   afterDraw() {
     this.closeBtn.addEventListener("wje-button:click", this.hide);
@@ -298,7 +266,6 @@ class Toast extends WJElement {
   }
   /**
    * Before disconnect method
-   *
    * This method is called before the element is disconnected from the document.
    */
   beforeDisconnect() {
@@ -310,7 +277,6 @@ class Toast extends WJElement {
   }
   /**
    * Starts the timer.
-   *
    * This method sets the `startTime` property to the current time and sets
    * the `timeoutID` property to the ID of the timeout. The method also
    * dispatches the `wje-toast:after-hide` custom event when the timeout
@@ -327,7 +293,6 @@ class Toast extends WJElement {
   }
   /**
    * Stops the timer.
-   *
    * This method clears the timeout and calculates the remaining time.
    * The method is called when the toast notification is paused.
    */
@@ -340,7 +305,6 @@ class Toast extends WJElement {
   }
   /**
    * Resumes the timer.
-   *
    * This method resumes the timer if the remaining time is greater
    * than zero. The method is called when the toast notification is resumed.
    */

package/dist/wje-toggle.js

@@ -2,79 +2,72 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement, { event } from "./wje-element.js";
-const styles = '/*\n[ WJ Toggle ]\n*/\n\n:host {\n  --wje-toggle-color-base: var(--wje-color-contrast-3);\n  --wje-toggle-width: 30px;\n  --wje-toggle-height: 18px;\n  --wje-toggle-border-radius: 50px;\n  --wje-toggle-handle-width: 13px;\n  --wje-toggle-handle-height: 13px;\n  --wje-toggle-handle-border-radius: 9px;\n  --wje-toggle-handle-color: #fff;\n  --wje-toggle-handle-shadow:  1px 0 1px 0.5px rgba(0,0,0,0.12), 2px 4px 6px rgba(0,0,0,0.2);\n  --wje-toggle-handle-shadow-checked:  1px 1px 0 rgba(0,0,0,0.08), -3px 3px 6px rgba(0,0,0,0.3);\n  --wje-toggle-duration: 250ms;\n  --wje-toggle-curve: cubic-bezier(.4,0,.2,1);\n}\n\n:host([color=primary]) input:checked + label > .label-wrapper  {\n  --wje-toggle-color-base: var(--wje-color-primary-9) !important;\n}\n\n:host([color=complete]) input:checked + label > .label-wrapper {\n  --wje-toggle-color-base: var(--wje-color-complete-9);\n}\n\n:host([color=success]) input:checked + label > .label-wrapper {\n  --wje-toggle-color-base: var(--wje-color-success-9) !important;\n}\n\n:host([color=warning]) input:checked + label > .label-wrapper {\n  --wje-toggle-color-base: var(--wje-color-warning-9);\n}\n\n:host([color=danger]) input:checked + label > .label-wrapper {\n  --wje-toggle-color-base: var(--wje-color-danger-9);\n}\n\n:host([color=info]) input:checked + label > .label-wrapper {\n  --wje-toggle-color-base: var(--wje-color-info-9);\n}\n\n.native-toggle {\n  display: flex;\n}\n\nlabel {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  user-select: none;\n  .label-wrapper {\n    width: var(--wje-toggle-width) !important;\n    min-width: var(--wje-toggle-width);\n    height: var(--wje-toggle-height);\n    position: relative;\n    display: flex;\n    align-items: center;\n    &:before {\n      content: "";\n      position: absolute;\n      cursor: pointer;\n      width: 100%;\n      height: 100%;\n      top: auto;\n      left: 0;\n      background: var(--wje-toggle-color-base);\n      background-size: 300%;\n      background-position: right;\n      border-radius: var(--wje-toggle-border-radius);\n      border: none;\n      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);\n      transition: background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * 0.24)), box-shadow var(--wje-toggle-duration);\n      transition-timing-function: var(--wje-toggle-curve);\n    }\n    &:after {\n      content: "";\n      position: absolute;\n      transform: translateX(0%);\n      background: var(--wje-toggle-handle-color);\n      width: var(--wje-toggle-handle-width);\n      height: var(--wje-toggle-handle-height);\n      border-radius: var(--wje-toggle-handle-border-radius);\n      top: auto;\n      left: 2px;\n      box-shadow: var(--wje-toggle-handle-shadow);\n      transition: transform, box-shadow;\n      transition-duration: var(--wje-toggle-duration);\n      transition-timing-function: var(--wje-toggle-curve);\n    }\n  }\n}\ninput[type="checkbox"][disabled] {\n  & + label {\n    cursor: not-allowed !important;\n    color: var(--wje-color-contrast-9);\n    opacity: 0.58;\n\n    &:before {\n      cursor: not-allowed !important;\n    }\n  }\n}\n\ninput[type="checkbox"]{\n  position: absolute;\n  z-index: -1;\n  opacity: 0;\n  &:checked{\n    & + label {\n      .label-wrapper:before {\n        background-position: left;\n        box-shadow: inset 0 0 0 1px rgba(0,0, 0,0.12);\n      }\n      .label-wrapper:after{\n        transform: translateX(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));\n        box-shadow: var(--wje-toggle-handle-shadow-checked);\n      }\n    }\n  }\n  &:focus {\n    & + label {\n      .label-wrapper:before{\n        outline: none !important;\n        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 0 0 0 #78c8fe;\n      }\n    }\n  }\n  &[disabled]:active{\n    & + label {\n      .label-wrapper:after {\n        transform: scaleX(1.1);\n        transform-origin: center left;\n        transition: transform step-start;\n      }\n    }\n  }\n  &:checked{\n    &[disabled]:active{\n      & + label {\n        .label-wrapper:after{\n          transform: translateX(calc(100% - 6px)) scaleX(1.1);\n          transform-origin: center right;\n        }\n      }\n    }\n  }\n  &:hover{\n    &:active{\n      & + label {\n        .label-wrapper:before{\n          background-color:transparent;\n        }\n      }\n    }\n  }\n}\n\n:host .text {\n  margin-inline: .5rem 0;\n}\n\n/*Placememt*/\n:host([placement=end]) {\n  label {\n    width: 100%;\n  }\n  .text {\n    margin-inline: 0 .5rem;\n    width: 100%;\n  }\n}\n\nslot {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}';
+const styles = "/*\n[ WJ Toggle ]\n*/\n\n:host {\n    --wje-toggle-color-base: var(--wje-color-contrast-3);\n    --wje-toggle-width: 30px;\n    --wje-toggle-height: 18px;\n    --wje-toggle-border-radius: 50px;\n    --wje-toggle-handle-width: 13px;\n    --wje-toggle-handle-height: 13px;\n    --wje-toggle-handle-border-radius: 9px;\n    --wje-toggle-handle-color: #fff;\n    --wje-toggle-handle-shadow: 1px 0 1px 0.5px rgba(0, 0, 0, 0.12), 2px 4px 6px rgba(0, 0, 0, 0.2);\n    --wje-toggle-handle-shadow-checked: 1px 1px 0 rgba(0, 0, 0, 0.08), -3px 3px 6px rgba(0, 0, 0, 0.3);\n    --wje-toggle-duration: 250ms;\n    --wje-toggle-curve: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([color='primary']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-primary-9) !important;\n}\n\n:host([color='complete']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-complete-9);\n}\n\n:host([color='success']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-success-9) !important;\n}\n\n:host([color='warning']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-warning-9);\n}\n\n:host([color='danger']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-danger-9);\n}\n\n:host([color='info']) input:checked + label > .label-wrapper {\n    --wje-toggle-color-base: var(--wje-color-info-9);\n}\n\n.native-toggle {\n    display: flex;\n}\n\nlabel {\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    user-select: none;\n    .label-wrapper {\n        width: var(--wje-toggle-width) !important;\n        min-width: var(--wje-toggle-width);\n        height: var(--wje-toggle-height);\n        position: relative;\n        display: flex;\n        align-items: center;\n        &:before {\n            content: '';\n            position: absolute;\n            cursor: pointer;\n            width: 100%;\n            height: 100%;\n            top: auto;\n            left: 0;\n            background: var(--wje-toggle-color-base);\n            background-size: 300%;\n            background-position: right;\n            border-radius: var(--wje-toggle-border-radius);\n            border: none;\n            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n            transition:\n                background calc(var(--wje-toggle-duration) + (var(--wje-toggle-duration) * 0.24)),\n                box-shadow var(--wje-toggle-duration);\n            transition-timing-function: var(--wje-toggle-curve);\n        }\n        &:after {\n            content: '';\n            position: absolute;\n            transform: translateX(0%);\n            background: var(--wje-toggle-handle-color);\n            width: var(--wje-toggle-handle-width);\n            height: var(--wje-toggle-handle-height);\n            border-radius: var(--wje-toggle-handle-border-radius);\n            top: auto;\n            left: 2px;\n            box-shadow: var(--wje-toggle-handle-shadow);\n            transition: transform, box-shadow;\n            transition-duration: var(--wje-toggle-duration);\n            transition-timing-function: var(--wje-toggle-curve);\n        }\n    }\n}\ninput[type='checkbox'][disabled] {\n    & + label {\n        cursor: not-allowed !important;\n        color: var(--wje-color-contrast-9);\n        opacity: 0.58;\n\n        &:before {\n            cursor: not-allowed !important;\n        }\n    }\n}\n\ninput[type='checkbox'] {\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    &:checked {\n        & + label {\n            .label-wrapper:before {\n                background-position: left;\n                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);\n            }\n            .label-wrapper:after {\n                transform: translateX(calc(var(--wje-toggle-width) - var(--wje-toggle-handle-width) - 4px));\n                box-shadow: var(--wje-toggle-handle-shadow-checked);\n            }\n        }\n    }\n    &:focus {\n        & + label {\n            .label-wrapper:before {\n                outline: none !important;\n                box-shadow:\n                    inset 0 0 0 1px rgba(0, 0, 0, 0.12),\n                    0 0 0 0 #78c8fe;\n            }\n        }\n    }\n    &[disabled]:active {\n        & + label {\n            .label-wrapper:after {\n                transform: scaleX(1.1);\n                transform-origin: center left;\n                transition: transform step-start;\n            }\n        }\n    }\n    &:checked {\n        &[disabled]:active {\n            & + label {\n                .label-wrapper:after {\n                    transform: translateX(calc(100% - 6px)) scaleX(1.1);\n                    transform-origin: center right;\n                }\n            }\n        }\n    }\n    &:hover {\n        &:active {\n            & + label {\n                .label-wrapper:before {\n                    background-color: transparent;\n                }\n            }\n        }\n    }\n}\n\n:host .text {\n    margin-inline: 0.5rem 0;\n}\n\n/*Placememt*/\n:host([placement='end']) {\n    label {\n        width: 100%;\n    }\n    .text {\n        margin-inline: 0 0.5rem;\n        width: 100%;\n    }\n}\n\nslot {\n    display: flex;\n    align-items: center;\n    width: 100%;\n}\n";
 class Toggle extends WJElement {
   /**
-   * @constructor
-   * @summary Toggle constructor
+   * Creates an instance of Toggle.
    */
   constructor() {
     super();
     /**
-     * @summary Class name
+     * Set color attribute for the toggle element.
      * @type {string}
      */
     __publicField(this, "className", "Toggle");
   }
   /**
-   * @summary Set checked attribute
-   * @returns {boolean} true if the toggle is checked, false otherwise
+   * Set checked attribute for the toggle element.
    */
   set disabled(value) {
-    if (value)
-      this.setAttribute("disabled", "");
-    else
-      this.removeAttribute("disabled");
+    if (value) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
   }
   /**
-   * @summary Get disabled attribute
+   * Get checked attribute for the toggle element.
    * @returns {boolean} true if the toggle is disabled, false otherwise
    */
   get disabled() {
     return this.hasAttribute("disabled");
   }
   /**
-   * @summary Set checked attribute
-   * @returns {boolean} true if the toggle is checked, false otherwise
+   * Set checked attribute for the toggle element.
    */
   set checked(value) {
-    if (value)
-      this.setAttribute("checked", "");
-    else
-      this.removeAttribute("checked");
+    if (value) this.setAttribute("checked", "");
+    else this.removeAttribute("checked");
   }
   /**
-   * @summary Get checked attribute
+   * Get checked attribute for the toggle element.
    * @returns {boolean} true if the toggle is checked, false otherwise
    */
   get checked() {
     return this.hasAttribute("checked");
   }
   /**
-   * @summary Get CSS stylesheet
+   * Get CSS stylesheet for the Button element.
    * @static
-   * @returns {Object} styles
+   * @returns {CSSStyleSheet} styles - The CSS stylesheet for the Button element.
    */
   static get cssStyleSheet() {
     return styles;
   }
+  /**
+   * Get observed attributes for the toggle element.
+   * @returns {string[]}
+   */
   static get observedAttributes() {
     return ["checked", "disabled"];
   }
   /**
-   * @summary Setup attributes
+   * Set up the attributes for the toggle element.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
   /**
-   * @summary Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
+   * Draw the toggle element for the component.
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let element = document.createElement("div");
     element.setAttribute("part", "native");
@@ -94,8 +87,7 @@ class Toggle extends WJElement {
     let text = document.createElement("div");
     text.classList.add("text");
     text.innerHTML = "<slot></slot>";
-    if (this.color)
-      this.classList.add("wje-color-" + this.color, "wje-color");
+    if (this.color) this.classList.add("wje-color-" + this.color, "wje-color");
     element.appendChild(input);
     element.appendChild(label);
     if (this.placement === "end") {
@@ -110,6 +102,9 @@ class Toggle extends WJElement {
     this.input = input;
     return fragment;
   }
+  /**
+   * After draw method for the toggle element to add event listeners for the input element after the element is drawn.
+   */
   afterDraw() {
     if (!this.disabled) {
       this.input.addEventListener("input", (e) => {

package/dist/wje-toolbar-action.js

@@ -2,30 +2,29 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-const styles = "/*\n[ WJ Toolbar Action ]\n*/\n\n:host {\n  .native-toolbar-action {\n    display: flex;\n  }\n}";
+const styles = "/*\n[ WJ Toolbar Action ]\n*/\n\n:host {\n    .native-toolbar-action {\n        display: flex;\n    }\n}\n";
 class ToolbarAction extends WJElement {
   /**
-   * @constructor
-   * @summary ToolbarAction constructor
+   * Creates an instance of ToolbarAction.
    */
   constructor() {
     super();
     /**
-     * @summary Class name
+     * The class name for the component.
      * @type {string}
      */
     __publicField(this, "className", "ToolbarAction");
   }
   /**
-   * @summary Get CSS stylesheet
+   * Returns the CSS stylesheet for the component.
    * @static
-   * @returns {Object} styles
+   * @returns {CSSStyleSheet} The CSS stylesheet
    */
   static get cssStyleSheet() {
     return styles;
   }
   /**
-   * @summary Get observed attributes
+   * Returns the list of observed attributes.
    * @static
    * @returns {Array} An empty array
    */
@@ -33,19 +32,16 @@ class ToolbarAction extends WJElement {
     return [];
   }
   /**
-   * @summary Setup attributes
+   * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
   /**
-   * @summary Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
+   * Draws the component for the toolbar action.
+   * @returns {object} Document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let maxItems = +this.maxItems || 0;
     let actions = this.getActions();
@@ -62,7 +58,7 @@ class ToolbarAction extends WJElement {
     return fragment;
   }
   /**
-   * @summary Get actions
+   * Returns the actions for the toolbar action.
    * @returns {Array} An array of wje-button elements
    */
   getActions() {

package/dist/wje-toolbar.js

@@ -2,31 +2,29 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import WJElement from "./wje-element.js";
-import { w as withRouterLinks } from "./router-links-I2vcmVCs.js";
-const styles = '/*\n[ WJ Toolbar ]\n*/\n\n:host {\n  --wje-toolbar-background: var(--wje-background);\n  --wje-toolbar-height: auto;\n  --wje-toolbar-min-height: 70px;\n  --wje-toolbar-padding-top: 1rem;\n  --wje-toolbar-padding-bottom: 1rem;\n  --wje-toolbar-padding-inline: 1.5rem;\n  --wje-toolbar-border-color: var(--wje-border-color);\n  --wje-toolbar-top: 0;\n  width: 100%;\n  height: var(--wje-toolbar-height);\n}\n\n.native-toolbar {\n  background-color: var(--wje-toolbar-background);\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  border-bottom: 1px solid var(--wje-toolbar-border-color);\n  padding-inline: var(--wje-toolbar-padding-inline);\n  padding-top: var(--wje-toolbar-padding-top);\n  padding-bottom: var(--wje-toolbar-padding-bottom);\n  box-shadow: 0 10px 30px 0 rgba(82,63,105,.05);\n}\n\n::slotted {\n  grid-column: span 4;\n}\n\n::slotted([slot="start"]) {\n  margin-right: auto;\n}\n\n:host([sticky]) {\n  position: sticky;\n  top: var(--wje-toolbar-top);\n  z-index: 99;\n}';
-class Toolbar extends withRouterLinks(WJElement) {
+const styles = "/*\n[ WJ Toolbar ]\n*/\n\n:host {\n    --wje-toolbar-background: var(--wje-background);\n    --wje-toolbar-height: auto;\n    --wje-toolbar-min-height: 70px;\n    --wje-toolbar-padding-top: 1rem;\n    --wje-toolbar-padding-bottom: 1rem;\n    --wje-toolbar-padding-inline: 1.5rem;\n    --wje-toolbar-border-color: var(--wje-border-color);\n    --wje-toolbar-top: 0;\n    width: 100%;\n    height: var(--wje-toolbar-height);\n}\n\n.native-toolbar {\n    background-color: var(--wje-toolbar-background);\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    border-bottom: 1px solid var(--wje-toolbar-border-color);\n    padding-inline: var(--wje-toolbar-padding-inline);\n    padding-top: var(--wje-toolbar-padding-top);\n    padding-bottom: var(--wje-toolbar-padding-bottom);\n    box-shadow: 0 10px 30px 0 rgba(82, 63, 105, 0.05);\n}\n\n::slotted {\n    grid-column: span 4;\n}\n\n::slotted([slot='start']) {\n    margin-right: auto;\n}\n\n:host([sticky]) {\n    position: sticky;\n    top: var(--wje-toolbar-top);\n    z-index: 99;\n}\n";
+class Toolbar extends WJElement {
   /**
-   * @constructor
-   * @summary Toolbar constructor
+   * Creates an instance of Toolbar.
    */
   constructor() {
     super();
     /**
-     * @summary Class name
+     * The class name for the component.
      * @type {string}
      */
     __publicField(this, "className", "Toolbar");
   }
   /**
-   * @summary Get CSS stylesheet
+   * Returns the CSS stylesheet for the component.
    * @static
-   * @returns {Object} styles
+   * @returns {CSSStyleSheet} The CSS stylesheet
    */
   static get cssStyleSheet() {
     return styles;
   }
   /**
-   * @summary Get observed attributes
+   * Returns the list of observed attributes.
    * @static
    * @returns {Array} An empty array
    */
@@ -34,19 +32,16 @@ class Toolbar extends withRouterLinks(WJElement) {
     return [];
   }
   /**
-   * @summary Setup attributes
+   * Sets up the attributes for the component.
    */
   setupAttributes() {
     this.isShadowRoot = "open";
   }
   /**
-   * @summary Draw method
-   * @param {Object} context - The context
-   * @param {Object} store - The store
-   * @param {Object} params - The parameters
-   * @returns {Object} Document fragment
+   * Draws the component for the toolbar.
+   * @returns {object} Document fragment
    */
-  draw(context, store, params) {
+  draw() {
     let fragment = document.createDocumentFragment();
     let native = document.createElement("div");
     native.setAttribute("part", "native");