@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

package/dist/components/six-language-switcher.js

@@ -0,0 +1,82 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const sixLanguageSwitcherCss = ".language-switcher__container{display:flex}.language-switcher__separator{padding:0 0.25rem}.language-switcher__label{cursor:pointer}.language-switcher__label:hover{color:var(--six-color-red)}.language-switcher__label--selected{color:var(--six-color-red)}";
+
+const DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];
+const SixLanguageSwitcher$1 = /*@__PURE__*/ proxyCustomElement(class SixLanguageSwitcher extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sixChange = createEvent(this, "six-language-switcher-change", 7);
+    this.handleLanguageSwitching = (newLanguage, languageValue) => () => {
+      if (languageValue !== undefined) {
+        this.sixChange.emit(languageValue);
+      }
+      else {
+        this.sixChange.emit(newLanguage);
+      }
+      this.selected = newLanguage;
+    };
+    this.selected = undefined;
+    this.languages = DEFAULT_LANGUAGES;
+  }
+  handleChangesLanguages(newValue) {
+    if (!Array.isArray(newValue)) {
+      throw new Error('languages is expected to be an array');
+    }
+    this.updateSelectedLanguage();
+  }
+  componentWillLoad() {
+    if (this.selected === undefined) {
+      this.updateSelectedLanguage();
+    }
+  }
+  updateSelectedLanguage() {
+    const selectedLanguage = this.languages[0];
+    if (typeof selectedLanguage === 'string') {
+      this.selected = selectedLanguage;
+      this.sixChange.emit(this.selected);
+    }
+    else {
+      this.selected = selectedLanguage.key;
+      this.sixChange.emit(selectedLanguage.value);
+    }
+  }
+  render() {
+    return (h("div", { part: "container", class: "language-switcher__container" }, this.languages.map((lang, index) => {
+      const language = typeof lang === 'string' ? lang : lang.key;
+      return (h("div", { onClick: this.handleLanguageSwitching(language, lang.value) }, h("span", { part: "label", class: {
+          'language-switcher__label': true,
+          'language-switcher__label--selected': this.selected === language,
+        } }, language), index < this.languages.length - 1 && (h("span", { part: "separator", class: "language-switcher__separator" }, "/"))));
+    })));
+  }
+  static get watchers() { return {
+    "languages": ["handleChangesLanguages"]
+  }; }
+  static get style() { return sixLanguageSwitcherCss; }
+}, [1, "six-language-switcher", {
+    "selected": [1537],
+    "languages": [16]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-language-switcher"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-language-switcher":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixLanguageSwitcher$1);
+      }
+      break;
+  } });
+}
+
+const SixLanguageSwitcher = SixLanguageSwitcher$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixLanguageSwitcher, defineCustomElement };
+
+//# sourceMappingURL=six-language-switcher.js.map

package/dist/components/six-language-switcher.js.map

@@ -0,0 +1 @@
+{"file":"six-language-switcher.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,gQAAgQ;;ACa/R,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;MAchCA,qBAAmB;;;;;;IAqCtB,4BAAuB,GAAG,CAAC,WAAmB,EAAE,aAAsB,KAAK;MACjF,IAAI,aAAa,KAAK,SAAS,EAAE;QAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;OACpC;WAAM;QACL,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;OAClC;MACD,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;KAC7B,CAAC;;qBAvCyD,iBAAiB;;EAG5E,sBAAsB,CAAC,QAAkB;IACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;MAC5B,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;IAED,IAAI,CAAC,sBAAsB,EAAE,CAAC;GAC/B;EAMD,iBAAiB;IACf,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;MAC/B,IAAI,CAAC,sBAAsB,EAAE,CAAC;KAC/B;GACF;EAEO,sBAAsB;IAC5B,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAC3C,IAAI,OAAO,gBAAgB,KAAK,QAAQ,EAAE;MACxC,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC;MACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC;MACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KAC7C;GACF;EAWD,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,IACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK;MAC9B,MAAM,QAAQ,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;MAC5D,QACE,WAAK,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,IAC9D,YACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE;UACL,0BAA0B,EAAE,IAAI;UAChC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,QAAQ;SACjE,IAEA,QAAQ,CACJ,EACN,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,KAChC,YAAM,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,8BAA8B,QAEpD,CACR,CACG,EACN;KACH,CAAC,CACE,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixLanguageSwitcher"],"sources":["./src/components/six-language-switcher/six-language-switcher.scss?tag=six-language-switcher&encapsulation=shadow","./src/components/six-language-switcher/six-language-switcher.tsx"],"sourcesContent":[".language-switcher {\n  &__container {\n    display: flex;\n  }\n\n  &__separator {\n    padding: 0 0.25rem;\n  }\n\n  &__label {\n    cursor: pointer;\n\n    &:hover {\n      color: var(--six-color-red);\n    }\n\n    &--selected {\n      color: var(--six-color-red);\n    }\n  }\n}\n","import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 2.1.0\n * @status experimental\n **/\n\nexport interface SixLanguageSwitcherInput {\n  key: string;\n  value: string;\n}\nexport type SixLanguageSwitcherChangePayload = string;\n\nconst DEFAULT_LANGUAGES = ['EN', 'DE', 'ES'];\n\n/*\n * @since 2.2.0\n * @status experimental\n * @part container - The whole component container\n * @part label - The language label\n * @part separator - The separator between the language labels\n */\n@Component({\n  tag: 'six-language-switcher',\n  styleUrl: 'six-language-switcher.scss',\n  shadow: true,\n})\nexport class SixLanguageSwitcher {\n  /** The language which should be shown as selected */\n  @Prop({ mutable: true, reflect: true }) selected?: string;\n\n  /** The languages which should be selectable options. */\n  @Prop() languages: string[] | SixLanguageSwitcherInput[] = DEFAULT_LANGUAGES;\n\n  @Watch('languages')\n  handleChangesLanguages(newValue: string[]) {\n    if (!Array.isArray(newValue)) {\n      throw new Error('languages is expected to be an array');\n    }\n\n    this.updateSelectedLanguage();\n  }\n  /**\n   * Emitted when the language switchers value changes\n   */\n  @Event({ eventName: 'six-language-switcher-change' }) sixChange: EventEmitter<SixLanguageSwitcherChangePayload>;\n\n  componentWillLoad() {\n    if (this.selected === undefined) {\n      this.updateSelectedLanguage();\n    }\n  }\n\n  private updateSelectedLanguage() {\n    const selectedLanguage = this.languages[0];\n    if (typeof selectedLanguage === 'string') {\n      this.selected = selectedLanguage;\n      this.sixChange.emit(this.selected);\n    } else {\n      this.selected = selectedLanguage.key;\n      this.sixChange.emit(selectedLanguage.value);\n    }\n  }\n\n  private handleLanguageSwitching = (newLanguage: string, languageValue?: string) => () => {\n    if (languageValue !== undefined) {\n      this.sixChange.emit(languageValue);\n    } else {\n      this.sixChange.emit(newLanguage);\n    }\n    this.selected = newLanguage;\n  };\n\n  render() {\n    return (\n      <div part=\"container\" class=\"language-switcher__container\">\n        {this.languages.map((lang, index) => {\n          const language = typeof lang === 'string' ? lang : lang.key;\n          return (\n            <div onClick={this.handleLanguageSwitching(language, lang.value)}>\n              <span\n                part=\"label\"\n                class={{\n                  'language-switcher__label': true,\n                  'language-switcher__label--selected': this.selected === language,\n                }}\n              >\n                {language}\n              </span>\n              {index < this.languages.length - 1 && (\n                <span part=\"separator\" class=\"language-switcher__separator\">\n                  /\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-layout-grid.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixLayoutGrid extends Components.SixLayoutGrid, HTMLElement {}
+export const SixLayoutGrid: {
+  prototype: SixLayoutGrid;
+  new (): SixLayoutGrid;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-layout-grid.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sixLayoutGridCss = ":host{display:grid;grid-template-columns:repeat(var(--no-of-columns), 1fr);grid-column-gap:1rem}";
+
+const SixLayoutGrid$1 = /*@__PURE__*/ proxyCustomElement(class SixLayoutGrid extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.columns = undefined;
+  }
+  handleColumnsChange() {
+    const columns = this.columns ? this.columns : 12;
+    this.host.style.setProperty('--no-of-columns', String(columns));
+  }
+  componentWillLoad() {
+    this.handleColumnsChange();
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "columns": ["handleColumnsChange"]
+  }; }
+  static get style() { return sixLayoutGridCss; }
+}, [1, "six-layout-grid", {
+    "columns": [8]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-layout-grid"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-layout-grid":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixLayoutGrid$1);
+      }
+      break;
+  } });
+}
+
+const SixLayoutGrid = SixLayoutGrid$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixLayoutGrid, defineCustomElement };
+
+//# sourceMappingURL=six-layout-grid.js.map

package/dist/components/six-layout-grid.js.map

@@ -0,0 +1 @@
+{"file":"six-layout-grid.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,kGAAkG;;MCc9GA,eAAa;;;;;;;EAOxB,mBAAmB;IACjB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IACjD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;GACjE;EAED,iBAAiB;IACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixLayoutGrid"],"sources":["./src/components/six-layout-grid/six-layout-grid.scss?tag=six-layout-grid&encapsulation=shadow","./src/components/six-layout-grid/six-layout-grid.tsx"],"sourcesContent":[":host {\n  display: grid;\n  grid-template-columns: repeat(var(--no-of-columns), 1fr);\n  grid-column-gap: 1rem;\n}\n","import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The grid's content\n */\n\n@Component({\n  tag: 'six-layout-grid',\n  styleUrl: 'six-layout-grid.scss',\n  shadow: true,\n})\nexport class SixLayoutGrid {\n  @Element() host: HTMLSixLayoutGridElement;\n\n  /** Set the number of grid columns */\n  @Prop() columns;\n\n  @Watch('columns')\n  handleColumnsChange() {\n    const columns = this.columns ? this.columns : 12;\n    this.host.style.setProperty('--no-of-columns', String(columns));\n  }\n\n  componentWillLoad() {\n    this.handleColumnsChange();\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-main-container.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixMainContainer extends Components.SixMainContainer, HTMLElement {}
+export const SixMainContainer: {
+  prototype: SixMainContainer;
+  new (): SixMainContainer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-main-container.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const sixMainContainerCss = ":host{display:flex;flex-wrap:nowrap;min-width:fit-content}.left-margin,.right-margin{flex:1 6 10rem;min-width:var(--six-spacing-xxx-large)}.content{flex:6 1 60rem;min-width:48rem;max-width:100rem}.content--padded{padding:var(--six-spacing-xxx-large) 0}";
+
+const SixMainContainer$1 = /*@__PURE__*/ proxyCustomElement(class SixMainContainer extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.padded = true;
+  }
+  render() {
+    return (h(Host, null, h("div", { part: "left-margin", class: "left-margin" }), h("div", { part: "content", class: { content: true, 'content--padded': this.padded } }, h("slot", null)), h("div", { part: "right-margin", class: "right-margin" })));
+  }
+  get host() { return this; }
+  static get style() { return sixMainContainerCss; }
+}, [1, "six-main-container", {
+    "padded": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-main-container"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-main-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixMainContainer$1);
+      }
+      break;
+  } });
+}
+
+const SixMainContainer = SixMainContainer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixMainContainer, defineCustomElement };
+
+//# sourceMappingURL=six-main-container.js.map

package/dist/components/six-main-container.js.map

@@ -0,0 +1 @@
+{"file":"six-main-container.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,8PAA8P;;MCkB7QA,kBAAgB;;;;;kBAIV,IAAI;;EAErB,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,IAAI,EAAC,aAAa,EAAC,KAAK,EAAC,aAAa,GAAG,EAC9C,WAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,MAAM,EAAE,IAC1E,eAAQ,CACJ,EACN,WAAK,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,cAAc,GAAG,CAC3C,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixMainContainer"],"sources":["./src/components/six-main-container/six-main-container.scss?tag=six-main-container&encapsulation=shadow","./src/components/six-main-container/six-main-container.tsx"],"sourcesContent":["$margin-default-width: 10rem;\n$content-default-width: 60rem;\n$content-min-width: 48rem;\n$content-max-width: 100rem;\n\n:host {\n  display: flex;\n  flex-wrap: nowrap;\n  min-width: fit-content;\n}\n\n.left-margin,\n.right-margin {\n  flex: 1 6 $margin-default-width;\n  min-width: var(--six-spacing-xxx-large);\n}\n\n.content {\n  flex: 6 1 $content-default-width;\n  min-width: $content-min-width;\n  max-width: $content-max-width;\n  &--padded {\n    padding: var(--six-spacing-xxx-large) 0;\n  }\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.01\n * @status stable\n *\n * @slot - The main container's content.\n *\n * @part left-margin  - The component's left margin area.\n * @part content      - The component's content area.\n * @part right-margin - The component's right margin area.\n */\n\n@Component({\n  tag: 'six-main-container',\n  styleUrl: 'six-main-container.scss',\n  shadow: true,\n})\nexport class SixMainContainer {\n  @Element() host: HTMLSixMainContainerElement;\n\n  /** Set to false to remove top and bottom padding.  */\n  @Prop() padded = true;\n\n  render() {\n    return (\n      <Host>\n        <div part=\"left-margin\" class=\"left-margin\" />\n        <div part=\"content\" class={{ content: true, 'content--padded': this.padded }}>\n          <slot />\n        </div>\n        <div part=\"right-margin\" class=\"right-margin\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/six-menu-divider.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixMenuDivider extends Components.SixMenuDivider, HTMLElement {}
+export const SixMenuDivider: {
+  prototype: SixMenuDivider;
+  new (): SixMenuDivider;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-menu-divider.js

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sixMenuDividerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-divider{border-top:solid var(--six-border-width) var(--six-menu-divider-color);margin:0}";
+
+const SixMenuDivider$1 = /*@__PURE__*/ proxyCustomElement(class SixMenuDivider extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return h("div", { part: "base", class: "menu-divider", role: "separator", "aria-hidden": "true" });
+  }
+  static get style() { return sixMenuDividerCss; }
+}, [1, "six-menu-divider"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-menu-divider"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-menu-divider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixMenuDivider$1);
+      }
+      break;
+  } });
+}
+
+const SixMenuDivider = SixMenuDivider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixMenuDivider, defineCustomElement };
+
+//# sourceMappingURL=six-menu-divider.js.map

package/dist/components/six-menu-divider.js.map

@@ -0,0 +1 @@
+{"file":"six-menu-divider.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,0NAA0N;;MCgBvOA,gBAAc;;;;;;EACzB,MAAM;IACJ,OAAO,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,WAAW,iBAAa,MAAM,GAAG,CAAC;GACrF;;;;;;;;;;;;;;;;;;;;;;","names":["SixMenuDivider"],"sources":["./src/components/six-menu-divider/six-menu-divider.scss?tag=six-menu-divider&encapsulation=shadow","./src/components/six-menu-divider/six-menu-divider.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu-divider {\n  border-top: solid var(--six-border-width) var(--six-menu-divider-color);\n  margin: 0;\n}\n","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 * @part base - The component's base wrapper.\n */\n\n@Component({\n  tag: 'six-menu-divider',\n  styleUrl: 'six-menu-divider.scss',\n  shadow: true,\n})\nexport class SixMenuDivider {\n  render() {\n    return <div part=\"base\" class=\"menu-divider\" role=\"separator\" aria-hidden=\"true\" />;\n  }\n}\n"],"version":3}

package/dist/components/six-menu-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixMenuItem extends Components.SixMenuItem, HTMLElement {}
+export const SixMenuItem: {
+  prototype: SixMenuItem;
+  new (): SixMenuItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,8 @@
+import { S as SixMenuItem$1, d as defineCustomElement$1 } from './six-menu-item2.js';
+
+const SixMenuItem = SixMenuItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixMenuItem, defineCustomElement };
+
+//# sourceMappingURL=six-menu-item.js.map

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

@@ -0,0 +1 @@
+{"file":"six-menu-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/six-menu-item2.js

@@ -0,0 +1,86 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { a as getTextContent } from './slot.js';
+import { d as defineCustomElement$1 } from './six-icon2.js';
+
+const sixMenuItemCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-item{position:relative;display:flex;align-items:stretch;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);text-align:left;color:var(--six-input-color);border-radius:var(--six-border-radius-medium);padding:var(--six-spacing-medium) var(--six-spacing-medium);transition:var(--six-transition-fast) fill;user-select:none;white-space:nowrap;cursor:pointer}.menu-item.menu-item--focused:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto;align-self:center}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix ::slotted(:last-child){margin-right:0.5em}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix ::slotted(:first-child){margin-left:0.5em}.menu-item .menu-item__check{flex:0 0 auto;display:flex;align-items:center;margin-left:var(--six-spacing-small);visibility:hidden;font-size:inherit}.menu-item--checked .menu-item__check{visibility:visible}";
+
+const SixMenuItem = /*@__PURE__*/ proxyCustomElement(class SixMenuItem extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.hasFocus = false;
+    this.checked = false;
+    this.value = '';
+    this.disabled = false;
+  }
+  connectedCallback() {
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleMouseEnter = this.handleMouseEnter.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+  }
+  /** Sets focus on the button. */
+  async setFocus(options) {
+    this.menuItem.focus(options);
+  }
+  /** Removes focus from the button. */
+  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;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+  }
+  handleMouseEnter() {
+    this.setFocus();
+  }
+  handleMouseLeave() {
+    this.removeFocus();
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.menuItem = el), part: "base", class: {
+        'menu-item': true,
+        '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", { 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 style() { return sixMenuItemCss; }
+}, [1, "six-menu-item", {
+    "checked": [516],
+    "value": [513],
+    "disabled": [516],
+    "hasFocus": [32],
+    "setFocus": [64],
+    "removeFocus": [64],
+    "getTextLabel": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-menu-item", "six-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-menu-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixMenuItem);
+      }
+      break;
+    case "six-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { SixMenuItem as S, defineCustomElement as d };
+
+//# sourceMappingURL=six-menu-item2.js.map

package/dist/components/six-menu-item2.js.map

@@ -0,0 +1 @@
+{"file":"six-menu-item2.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,44CAA44C;;MCyBt5C,WAAW;;;;;oBAIF,KAAK;mBAGU,KAAK;iBAGP,EAAE;oBAGC,KAAK;;EAEzC,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/C,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1D;;EAID,MAAM,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GAC9B;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;;EAID,YAAY;IACV,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;GAC1D;EAED,UAAU;IACR,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;GACvB;EAED,WAAW;IACT,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;GACtB;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,EAAE,CAAC;GACjB;EAED,gBAAgB;IACd,IAAI,CAAC,WAAW,EAAE,CAAC;GACpB;EAED,MAAM;IACJ,QACE,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EACjC,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,oBAAoB,EAAE,IAAI,CAAC,OAAO;QAClC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;QACpC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;OACpC,EACD,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,kBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,YAAY,EAAE,IAAI,CAAC,gBAAgB,IAEnC,YAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mBAAmB,IAC3C,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EAEP,YAAM,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,kBAAkB,IACzC,YAAM,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAqB,CAAC,GAAI,CAC5D,EAEP,YAAM,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mBAAmB,IAC3C,YAAM,IAAI,EAAC,QAAQ,GAAG,CACjB,EAEP,YAAM,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,kBAAkB,IAChD,gBAAU,IAAI,EAAC,OAAO,iBAAa,MAAM,YAE9B,CACN,CACH,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/six-menu-item/six-menu-item.scss?tag=six-menu-item&encapsulation=shadow","./src/components/six-menu-item/six-menu-item.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu-item {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-letter-spacing-normal);\n  text-align: left;\n  color: var(--six-input-color);\n  border-radius: var(--six-border-radius-medium);\n  padding: var(--six-spacing-medium) var(--six-spacing-medium);\n  transition: var(--six-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n\n  &.menu-item--focused:not(.menu-item--disabled) {\n    outline: none;\n    background-color: var(--six-menu-item-background-color);\n  }\n\n  &.menu-item--disabled {\n    outline: none;\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n  }\n\n  .menu-item__label {\n    flex: 1 1 auto;\n    align-self: center;\n  }\n\n  .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:last-child) {\n      margin-right: 0.5em;\n    }\n  }\n\n  .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n\n    ::slotted(:first-child) {\n      margin-left: 0.5em;\n    }\n  }\n\n  .menu-item__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    margin-left: var(--six-spacing-small);\n    visibility: hidden;\n    font-size: inherit;\n  }\n}\n\n.menu-item--checked .menu-item__check {\n  visibility: visible;\n}\n","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"],"version":3}

package/dist/components/six-menu-label.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixMenuLabel extends Components.SixMenuLabel, HTMLElement {}
+export const SixMenuLabel: {
+  prototype: SixMenuLabel;
+  new (): SixMenuLabel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,35 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const sixMenuLabelCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.menu-label{font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);color:var(--six-input-label-color);padding:var(--six-spacing-xx-small) var(--six-spacing-small);user-select:none}";
+
+const SixMenuLabel$1 = /*@__PURE__*/ proxyCustomElement(class SixMenuLabel extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h("div", { part: "base", class: "menu-label" }, h("slot", null)));
+  }
+  static get style() { return sixMenuLabelCss; }
+}, [1, "six-menu-label"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["six-menu-label"];
+  components.forEach(tagName => { switch (tagName) {
+    case "six-menu-label":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SixMenuLabel$1);
+      }
+      break;
+  } });
+}
+
+const SixMenuLabel = SixMenuLabel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixMenuLabel, defineCustomElement };
+
+//# sourceMappingURL=six-menu-label.js.map

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

@@ -0,0 +1 @@
+{"file":"six-menu-label.js","mappings":";;AAAA,MAAM,eAAe,GAAG,mcAAmc;;MCkB9cA,cAAY;;;;;;EACvB,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,IACjC,eAAQ,CACJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;","names":["SixMenuLabel"],"sources":["./src/components/six-menu-label/six-menu-label.scss?tag=six-menu-label&encapsulation=shadow","./src/components/six-menu-label/six-menu-label.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: block;\n}\n\n.menu-label {\n  font-family: var(--six-font-sans);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-normal);\n  line-height: var(--six-line-height-normal);\n  letter-spacing: var(--six-letter-spacing-normal);\n  color: var(--six-input-label-color);\n  padding: var(--six-spacing-xx-small) var(--six-spacing-small);\n  user-select: none;\n}\n","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"],"version":3}

package/dist/components/six-menu.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SixMenu extends Components.SixMenu, HTMLElement {}
+export const SixMenu: {
+  prototype: SixMenu;
+  new (): SixMenu;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/six-menu.js

@@ -0,0 +1,8 @@
+import { S as SixMenu$1, d as defineCustomElement$1 } from './six-menu2.js';
+
+const SixMenu = SixMenu$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SixMenu, defineCustomElement };
+
+//# sourceMappingURL=six-menu.js.map

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

@@ -0,0 +1 @@
+{"file":"six-menu.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}