@six-group/ui-library 3.0.0-beta.1.8 → 4.0.0-beta.1

package/dist/collection/components/six-menu-item/six-menu-item.js

@@ -1,4 +1,5 @@
-import { Component, Method, Prop, State, h } from '@stencil/core';
+import { h } from '@stencil/core';
+import { getTextContent } from '../../utils/slot';
 /**
  * @since 1.0
  * @status stable
@@ -18,11 +19,8 @@ import { Component, Method, Prop, State, h } from '@stencil/core';
 export class SixMenuItem {
   constructor() {
     this.hasFocus = false;
-    /** Set to true to draw the item in a checked state. */
     this.checked = false;
-    /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
     this.value = '';
-    /** Set to true to draw the menu item in a disabled state. */
     this.disabled = false;
   }
   connectedCallback() {
@@ -39,6 +37,10 @@ export class SixMenuItem {
   async removeFocus() {
     this.menuItem.blur();
   }
+  /** Returns a text label based on the contents of the menu item's default slot. */
+  getTextLabel() {
+    return Promise.resolve(getTextContent(this.defaultSlot));
+  }
   handleBlur() {
     this.hasFocus = false;
   }
@@ -57,121 +59,140 @@ export class SixMenuItem {
         'menu-item--checked': this.checked,
         'menu-item--disabled': this.disabled,
         'menu-item--focused': this.hasFocus,
-      }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : null, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave },
-      h("span", { part: "prefix", class: "menu-item__prefix" },
-        h("slot", { name: "prefix" })),
-      h("span", { part: "label", class: "menu-item__label" },
-        h("slot", null)),
-      h("span", { part: "suffix", class: "menu-item__suffix" },
-        h("slot", { name: "suffix" })),
-      h("span", { part: "checked-icon", class: "menu-item__check" },
-        h("six-icon", { size: "small", "aria-hidden": "true" }, "check"))));
+      }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : null, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("span", { part: "prefix", class: "menu-item__prefix" }, h("slot", { name: "prefix" })), h("span", { part: "label", class: "menu-item__label" }, h("slot", { ref: (el) => (this.defaultSlot = el) })), h("span", { part: "suffix", class: "menu-item__suffix" }, h("slot", { name: "suffix" })), h("span", { part: "checked-icon", class: "menu-item__check" }, h("six-icon", { size: "small", "aria-hidden": "true" }, "check"))));
   }
   static get is() { return "six-menu-item"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-menu-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-menu-item.css"]
-  }; }
-  static get properties() { return {
-    "checked": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the item in a checked state."
-      },
-      "attribute": "checked",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected."
-      },
-      "attribute": "value",
-      "reflect": true,
-      "defaultValue": "''"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-menu-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-menu-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw the item in a checked state."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the menu item in a disabled state."
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "A unique value to store in the menu item. This can be used as a way to identify menu items when selected."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "''"
       },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hasFocus": {}
-  }; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to draw the menu item in a disabled state."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasFocus": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
           },
-          "FocusOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Sets focus on the button.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Sets focus on the button.",
-        "tags": []
-      }
-    },
-    "removeFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      "removeFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Removes focus from the button.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Removes focus from the button.",
-        "tags": []
+      "getTextLabel": {
+        "complexType": {
+          "signature": "() => Promise<string>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<string>"
+        },
+        "docs": {
+          "text": "Returns a text label based on the contents of the menu item's default slot.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
 }
+//# sourceMappingURL=six-menu-item.js.map

package/dist/collection/components/six-menu-item/six-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-menu-item.js","sourceRoot":"","sources":["../../../src/components/six-menu-item/six-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Method, Prop, State, h } from '@stencil/core';\nimport { getTextContent } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu item's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @part base - The component's base wrapper.\n * @part checked-icon - The container that wraps the checked icon.\n * @part prefix - The prefix container.\n * @part label - The menu item label.\n * @part suffix - The suffix container.\n */\n\n@Component({\n  tag: 'six-menu-item',\n  styleUrl: 'six-menu-item.scss',\n  shadow: true,\n})\nexport class SixMenuItem {\n  menuItem: HTMLElement;\n  defaultSlot: HTMLSlotElement;\n\n  @State() hasFocus = false;\n\n  /** Set to true to draw the item in a checked state. */\n  @Prop({ reflect: true }) checked = false;\n\n  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the menu item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  connectedCallback() {\n    this.handleBlur = this.handleBlur.bind(this);\n    this.handleFocus = this.handleFocus.bind(this);\n    this.handleMouseEnter = this.handleMouseEnter.bind(this);\n    this.handleMouseLeave = this.handleMouseLeave.bind(this);\n  }\n\n  /** Sets focus on the button. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.menuItem.focus(options);\n  }\n\n  /** Removes focus from the button. */\n  @Method()\n  async removeFocus() {\n    this.menuItem.blur();\n  }\n\n  /** Returns a text label based on the contents of the menu item's default slot. */\n  @Method()\n  getTextLabel() {\n    return Promise.resolve(getTextContent(this.defaultSlot));\n  }\n\n  handleBlur() {\n    this.hasFocus = false;\n  }\n\n  handleFocus() {\n    this.hasFocus = true;\n  }\n\n  handleMouseEnter() {\n    this.setFocus();\n  }\n\n  handleMouseLeave() {\n    this.removeFocus();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.menuItem = el)}\n        part=\"base\"\n        class={{\n          'menu-item': true,\n          'menu-item--checked': this.checked,\n          'menu-item--disabled': this.disabled,\n          'menu-item--focused': this.hasFocus,\n        }}\n        role=\"menuitem\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-checked={this.checked ? 'true' : 'false'}\n        tabIndex={!this.disabled ? 0 : null}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <span part=\"prefix\" class=\"menu-item__prefix\">\n          <slot name=\"prefix\" />\n        </span>\n\n        <span part=\"label\" class=\"menu-item__label\">\n          <slot ref={(el) => (this.defaultSlot = el as HTMLSlotElement)} />\n        </span>\n\n        <span part=\"suffix\" class=\"menu-item__suffix\">\n          <slot name=\"suffix\" />\n        </span>\n\n        <span part=\"checked-icon\" class=\"menu-item__check\">\n          <six-icon size=\"small\" aria-hidden=\"true\">\n            check\n          </six-icon>\n        </span>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-menu-label/six-menu-label.js

@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * @since 1.0
  * @status stable
@@ -11,15 +11,19 @@ import { Component, h } from '@stencil/core';
  */
 export class SixMenuLabel {
   render() {
-    return (h("div", { part: "base", class: "menu-label" },
-      h("slot", null)));
+    return (h("div", { part: "base", class: "menu-label" }, h("slot", null)));
   }
   static get is() { return "six-menu-label"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-menu-label.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-menu-label.css"]
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-menu-label.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-menu-label.css"]
+    };
+  }
 }
+//# sourceMappingURL=six-menu-label.js.map

package/dist/collection/components/six-menu-label/six-menu-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-menu-label.js","sourceRoot":"","sources":["../../../src/components/six-menu-label/six-menu-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;;;;;GASG;AAOH,MAAM,OAAO,YAAY;EACvB,MAAM;IACJ,OAAO,CACL,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY;MACjC,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The menu label's content.\n *\n * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-menu-label',\n  styleUrl: 'six-menu-label.scss',\n  shadow: true,\n})\nexport class SixMenuLabel {\n  render() {\n    return (\n      <div part=\"base\" class=\"menu-label\">\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-picto/six-picto.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, Element, Prop } from '@stencil/core';
+import { Host, h } from '@stencil/core';
 /**
  * @since 1.1
  * @status stable
@@ -7,44 +7,47 @@ import { Component, Host, h, Element, Prop } from '@stencil/core';
  */
 export class SixPicto {
   constructor() {
-    /**
-     * Defines the size of the icon.
-     */
     this.size = 'medium';
   }
   render() {
     var _a;
     const iconName = (_a = this.host.innerHTML) === null || _a === void 0 ? void 0 : _a.trim();
-    return (h(Host, null,
-      h("div", { part: "icon", class: { [`is-size-${this.size}`]: !!this.size, [`${iconName}`]: true } })));
+    return (h(Host, null, h("div", { part: "icon", class: { [`is-size-${this.size}`]: !!this.size, [`${iconName}`]: true } })));
   }
   static get is() { return "six-picto"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-picto.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-picto.css"]
-  }; }
-  static get properties() { return {
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl'",
-        "resolved": "\"4xl\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Defines the size of the icon."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    }
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-picto.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-picto.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl'",
+          "resolved": "\"4xl\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Defines the size of the icon."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      }
+    };
+  }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=six-picto.js.map

package/dist/collection/components/six-picto/six-picto.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-picto.js","sourceRoot":"","sources":["../../../src/components/six-picto/six-picto.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE;;;;;GAKG;AAOH,MAAM,OAAO,QAAQ;;gBAMiF,QAAQ;;EAE5G,MAAM;;IACJ,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,SAAS,0CAAE,IAAI,EAAE,CAAC;IAC7C,OAAO,CACL,EAAC,IAAI;MACH,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,GAAI,CACvF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop } from '@stencil/core';\n\n/**\n * @since 1.1\n * @status stable\n *\n * @part icon - The component's icon wrapper.\n */\n\n@Component({\n  tag: 'six-picto',\n  styleUrl: 'six-picto.scss',\n  shadow: true,\n})\nexport class SixPicto {\n  @Element() host: HTMLSixPictoElement;\n\n  /**\n   * Defines the size of the icon.\n   */\n  @Prop() size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | '4xl' = 'medium';\n\n  render() {\n    const iconName = this.host.innerHTML?.trim();\n    return (\n      <Host>\n        <div part=\"icon\" class={{ [`is-size-${this.size}`]: !!this.size, [`${iconName}`]: true }} />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/six-progress-bar/six-progress-bar.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 /**
  * @since 1.0
  * @status stable
@@ -13,65 +13,68 @@ import { Component, h, Prop } from '@stencil/core';
  */
 export class SixProgressBar {
   constructor() {
-    /** The progress bar's percentage, 0 to 100. */
     this.percentage = 0;
-    /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */
     this.indeterminate = false;
   }
   render() {
     return (h("div", { part: "base", class: {
         'progress-bar': true,
         'progress-bar--indeterminate': this.indeterminate,
-      }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage },
-      h("div", { part: "indicator", class: "progress-bar__indicator", style: {
-          width: `${this.percentage}%`,
-        } }, !this.indeterminate && (h("span", { part: "label", class: "progress-bar__label" },
-        h("slot", null))))));
+      }, role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": this.indeterminate ? null : this.percentage }, h("div", { part: "indicator", class: "progress-bar__indicator", style: {
+        width: `${this.percentage}%`,
+      } }, !this.indeterminate && (h("span", { part: "label", class: "progress-bar__label" }, h("slot", null))))));
   }
   static get is() { return "six-progress-bar"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-progress-bar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-progress-bar.css"]
-  }; }
-  static get properties() { return {
-    "percentage": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The progress bar's percentage, 0 to 100."
-      },
-      "attribute": "percentage",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "indeterminate": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state."
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-progress-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-progress-bar.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "percentage": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The progress bar's percentage, 0 to 100."
+        },
+        "attribute": "percentage",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "indeterminate",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
+      "indeterminate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state."
+        },
+        "attribute": "indeterminate",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
 }
+//# sourceMappingURL=six-progress-bar.js.map

package/dist/collection/components/six-progress-bar/six-progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-progress-bar.js","sourceRoot":"","sources":["../../../src/components/six-progress-bar/six-progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,cAAc;;sBAEJ,CAAC;yBAGE,KAAK;;EAE7B,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,6BAA6B,EAAE,IAAI,CAAC,aAAa;OAClD,EACD,IAAI,EAAC,aAAa,mBACJ,GAAG,mBACH,KAAK,mBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU;MAE1D,WACE,IAAI,EAAC,WAAW,EAChB,KAAK,EAAC,yBAAyB,EAC/B,KAAK,EAAE;UACL,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG;SAC7B,IAEA,CAAC,IAAI,CAAC,aAAa,IAAI,CACtB,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,qBAAqB;QAC5C,eAAQ,CACH,CACR,CACG,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - A label to show inside the indicator.\n *\n * @part base - The component's base wrapper.\n * @part indicator - The progress bar indicator.\n * @part label - The progress bar label.\n */\n\n@Component({\n  tag: 'six-progress-bar',\n  styleUrl: 'six-progress-bar.scss',\n  shadow: true,\n})\nexport class SixProgressBar {\n  /** The progress bar's percentage, 0 to 100. */\n  @Prop() percentage = 0;\n\n  /** When true, percentage is ignored, the label is hidden, and the progress bar is drawn in an indeterminate state. */\n  @Prop() indeterminate = false;\n\n  render() {\n    return (\n      <div\n        part=\"base\"\n        class={{\n          'progress-bar': true,\n          'progress-bar--indeterminate': this.indeterminate,\n        }}\n        role=\"progressbar\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow={this.indeterminate ? null : this.percentage}\n      >\n        <div\n          part=\"indicator\"\n          class=\"progress-bar__indicator\"\n          style={{\n            width: `${this.percentage}%`,\n          }}\n        >\n          {!this.indeterminate && (\n            <span part=\"label\" class=\"progress-bar__label\">\n              <slot />\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"]}