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

package/dist/esm/six-sidebar-item-group.entry.js

@@ -1,49 +1,49 @@
 import { r as registerInstance, h, g as getElement } from './index-a2605a62.js';
-import { h as hasSlot } from './slot-5253e199.js';
+import { h as hasSlot } from './slot-6f3984c7.js';
 
 const sixSidebarItemGroupCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-sidebar-item-group--childless::part(content){padding:0 !important}.six-sidebar-item-group--subgroup::part(header){background-color:transparent !important}.six-sidebar-item-group__header-icon{margin-left:16px;transform:translate(0px, -3px)}.six-sidebar-details__header{display:flex}.six-sidebar-details__header-icon{margin-right:1em}";
 
-let SixSidebarItemGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.hasItems = false;
-    /** Title of item group */
-    this.name = '';
-    /** Icon of the group */
-    this.icon = '';
-    /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */
-    this.value = '';
-    this.open = false;
-    this.provideSlot = (name) => {
-      if (this.summaryIconHasContent) {
-        return (h("div", { slot: name }, h("slot", { name: name })));
-      }
-      return (h("slot", { name: name, onSlotchange: () => {
-          this.summaryIconHasContent =
-            this.host.shadowRoot.querySelector(`slot[name="${name}"]`).assignedNodes().length > 0;
-        } }));
-    };
-  }
-  connectedCallback() {
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-  }
-  handleSlotChange() {
-    this.hasItems = hasSlot(this.host);
-  }
-  isSubgroup() {
-    return !!this.host.parentElement.closest('six-sidebar-item-group');
-  }
-  render() {
-    return (h("six-details", { class: {
-        'six-sidebar-item-group--childless': !this.hasItems,
-        'six-sidebar-item-group--subgroup': this.isSubgroup(),
-      }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems }, h("div", { slot: "summary" }, h("div", { class: "six-sidebar-details__header" }, this.icon && h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), h("slot", null)));
-  }
-  get host() { return getElement(this); }
-};
+let SixSidebarItemGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hasItems = false;
+    /** Title of item group */
+    this.name = '';
+    /** Icon of the group */
+    this.icon = '';
+    /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */
+    this.value = '';
+    this.open = false;
+    this.provideSlot = (name) => {
+      if (this.summaryIconHasContent) {
+        return (h("div", { slot: name }, h("slot", { name: name })));
+      }
+      return (h("slot", { name: name, onSlotchange: () => {
+          this.summaryIconHasContent =
+            this.host.shadowRoot.querySelector(`slot[name="${name}"]`).assignedNodes().length > 0;
+        } }));
+    };
+  }
+  connectedCallback() {
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+  }
+  handleSlotChange() {
+    this.hasItems = hasSlot(this.host);
+  }
+  isSubgroup() {
+    return !!this.host.parentElement.closest('six-sidebar-item-group');
+  }
+  render() {
+    return (h("six-details", { class: {
+        'six-sidebar-item-group--childless': !this.hasItems,
+        'six-sidebar-item-group--subgroup': this.isSubgroup(),
+      }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems }, h("div", { slot: "summary" }, h("div", { class: "six-sidebar-details__header" }, this.icon && h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
 SixSidebarItemGroup.style = sixSidebarItemGroupCss;
 
 export { SixSidebarItemGroup as six_sidebar_item_group };

package/dist/esm/six-sidebar-item.entry.js

@@ -2,24 +2,24 @@ import { r as registerInstance, h } from './index-a2605a62.js';
 
 const sixSidebarItemCss = ":host{display:block}.sidebar-item{font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;padding:8px 8px 16px 16px;font-family:var(--six-font-family)}.sidebar-item:hover:not(.sidebar-item--disabled){color:var(--six-color-web-rock-600)}.sidebar-item.sidebar-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.sidebar-item.sidebar-item--selected{font-weight:var(--six-font-weight-bold)}";
 
-let SixSidebarItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */
-    this.value = '';
-    /** Set to true to draw the item in a selected state. */
-    this.selected = false;
-    /** Set to true to draw the sidebar item in a disabled state. */
-    this.disabled = false;
-  }
-  render() {
-    return (h("div", { class: {
-        'sidebar-item': true,
-        'sidebar-item--selected': this.selected,
-        'sidebar-item--disabled': this.disabled,
-      }, role: "menuitem", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", null)));
-  }
-};
+let SixSidebarItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */
+    this.value = '';
+    /** Set to true to draw the item in a selected state. */
+    this.selected = false;
+    /** Set to true to draw the sidebar item in a disabled state. */
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { class: {
+        'sidebar-item': true,
+        'sidebar-item--selected': this.selected,
+        'sidebar-item--disabled': this.disabled,
+      }, role: "menuitem", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", null)));
+  }
+};
 SixSidebarItem.style = sixSidebarItemCss;
 
 export { SixSidebarItem as six_sidebar_item };

package/dist/esm/six-sidebar.entry.js

@@ -1,178 +1,178 @@
 import { r as registerInstance, c as createEvent, h } from './index-a2605a62.js';
-import { s as scrollIntoView } from './scroll-99b214c2.js';
+import { s as scrollIntoView } from './scroll-180b53fd.js';
 
 const sixSidebarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{box-shadow:var(--six-elevation-1dp)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";
 
-const isSidebarItemGroup = (node) => node.tagName.toLowerCase() === 'six-sidebar-item-group';
-let SixSidebar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sixShow = createEvent(this, "six-sidebar-show", 7);
-    this.sixAfterShow = createEvent(this, "six-sidebar-after-show", 7);
-    this.sixHide = createEvent(this, "six-sidebar-hide", 7);
-    this.sixAfterHide = createEvent(this, "six-sidebar-after-hide", 7);
-    this.sixInitialFocus = createEvent(this, "six-sidebar-initial-focus", 7);
-    this.willShow = false;
-    this.willHide = false;
-    this.isVisible = false;
-    /** Sidebar position */
-    this.position = 'left';
-    /** Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods. */
-    this.open = false;
-    /** Sidebar width */
-    this.width = '16rem';
-    /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/
-    this.toggled = false;
-    this.handleTransitionEnd = (event) => {
-      const target = event.target;
-      // Ensure we only emit one event when the target element is no longer visible
-      if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {
-        this.resetTransitionVariables();
-      }
-    };
-    this.closeSiblingDetailsOnShow = (event) => {
-      const clickedMenuItem = event.target;
-      scrollIntoView(clickedMenuItem, this.sidebar);
-      const closeAllSiblingsBySiblingProperty = (getSibling) => {
-        let node = clickedMenuItem;
-        while (getSibling(node) !== null) {
-          node = getSibling(node);
-          if (isSidebarItemGroup(node)) {
-            node.shadowRoot.querySelector('six-details').open = false;
-          }
-        }
-      };
-      // close all previous siblings
-      closeAllSiblingsBySiblingProperty((node) => node.previousElementSibling);
-      // close all further siblings
-      closeAllSiblingsBySiblingProperty((node) => node.nextElementSibling);
-    };
-  }
-  handleOpenChange() {
-    this.open ? this.show() : this.hide();
-  }
-  componentWillLoad() {
-    // Show on init if open
-    if (this.open) {
-      void this.show();
-      // if the sidebar is open by default we need to manually reset the
-      // transition variables since there will be no transition event
-      this.resetTransitionVariables();
-    }
-  }
-  componentDidRender() {
-    this.setupTogglableMenuItems();
-  }
-  disconnectedCallback() {
-    this.sidebar.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);
-  }
-  setupTogglableMenuItems() {
-    if (!this.toggled) {
-      return;
-    }
-    this.markAllMenuItemsAsSelectableEmpty();
-    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);
-  }
-  markAllMenuItemsAsSelectableEmpty() {
-    // when you have a toggled menu you also want to close other menu items when you click on an item without children
-    // nice benefit this item will then also be highlighted
-    const slot = this.sidebar.querySelector('slot');
-    const nodes = slot.assignedElements();
-    // since we don't just want to make the top level empty menuItems selectable in toggled mode,
-    // but also nested items we need to traverse the whole menu item tree
-    const menuItems = [];
-    while (nodes.length > 0) {
-      const node = nodes.pop();
-      // collect six-details in the current shadowDOM
-      const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');
-      menuItems.push(...menuItemsForCurrentNode);
-      // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too
-      const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);
-      nodes.push(...newItemGroups);
-    }
-    menuItems.forEach((details) => (details.selectableEmpty = true));
-  }
-  /** Toggles whether the sidebar should be shown or hidden */
-  async toggle() {
-    if (this.willShow || this.willHide) {
-      return;
-    }
-    if (this.open) {
-      await this.hide();
-    }
-    else {
-      await this.show();
-    }
-  }
-  /** Shows the sidebar */
-  async show() {
-    if (this.willShow) {
-      return;
-    }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
-    }
-    this.willShow = true;
-    this.isVisible = true;
-    this.open = true;
-  }
-  /** Hides the sidebar */
-  async hide() {
-    if (this.willHide) {
-      return;
-    }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
-    }
-    this.willHide = true;
-    this.open = false;
-  }
-  /** Allows to select a menu item programmatically by index */
-  async selectItemByIndex(index) {
-    const slot = this.sidebar.querySelector('slot');
-    const menuItemsOnRootLevel = slot
-      .assignedElements()
-      .map((el) => el.shadowRoot.querySelector('six-details'));
-    if (index < 0 || index > menuItemsOnRootLevel.length - 1) {
-      console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`);
-      return;
-    }
-    await menuItemsOnRootLevel[index].show();
-  }
-  /** Allows to select a menu item programmatically by name */
-  async selectItemByName(value) {
-    const slot = this.sidebar.querySelector('slot');
-    const sidebarItemGroups = slot.assignedElements();
-    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => (el === null || el === void 0 ? void 0 : el.name) === value);
-    const selectedItem = sidebarItemGroups[indexOfSelectedElement].shadowRoot.querySelector('six-details');
-    await selectedItem.show();
-  }
-  resetTransitionVariables() {
-    this.isVisible = this.open;
-    this.willShow = false;
-    this.willHide = false;
-    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-  }
-  render() {
-    return (h("host", { class: "six-sidebar" }, h("div", { class: {
-        sidebar__container: true,
-        'sidebar--visible': this.isVisible,
-        'sidebar--open': this.open,
-        'sidebar--left': this.position === 'left',
-        'sidebar--right': this.position === 'right',
-      }, style: {
-        width: this.width,
-        [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,
-      }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, h("slot", null))));
-  }
-  static get watchers() { return {
-    "open": ["handleOpenChange"]
-  }; }
-};
+const isSidebarItemGroup = (node) => node.tagName.toLowerCase() === 'six-sidebar-item-group';
+let SixSidebar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixShow = createEvent(this, "six-sidebar-show", 7);
+    this.sixAfterShow = createEvent(this, "six-sidebar-after-show", 7);
+    this.sixHide = createEvent(this, "six-sidebar-hide", 7);
+    this.sixAfterHide = createEvent(this, "six-sidebar-after-hide", 7);
+    this.sixInitialFocus = createEvent(this, "six-sidebar-initial-focus", 7);
+    this.willShow = false;
+    this.willHide = false;
+    this.isVisible = false;
+    /** Sidebar position */
+    this.position = 'left';
+    /** Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** Sidebar width */
+    this.width = '16rem';
+    /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/
+    this.toggled = false;
+    this.handleTransitionEnd = (event) => {
+      const target = event.target;
+      // Ensure we only emit one event when the target element is no longer visible
+      if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {
+        this.resetTransitionVariables();
+      }
+    };
+    this.closeSiblingDetailsOnShow = (event) => {
+      const clickedMenuItem = event.target;
+      scrollIntoView(clickedMenuItem, this.sidebar);
+      const closeAllSiblingsBySiblingProperty = (getSibling) => {
+        let node = clickedMenuItem;
+        while (getSibling(node) !== null) {
+          node = getSibling(node);
+          if (isSidebarItemGroup(node)) {
+            node.shadowRoot.querySelector('six-details').open = false;
+          }
+        }
+      };
+      // close all previous siblings
+      closeAllSiblingsBySiblingProperty((node) => node.previousElementSibling);
+      // close all further siblings
+      closeAllSiblingsBySiblingProperty((node) => node.nextElementSibling);
+    };
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  componentWillLoad() {
+    // Show on init if open
+    if (this.open) {
+      void this.show();
+      // if the sidebar is open by default we need to manually reset the
+      // transition variables since there will be no transition event
+      this.resetTransitionVariables();
+    }
+  }
+  componentDidRender() {
+    this.setupTogglableMenuItems();
+  }
+  disconnectedCallback() {
+    this.sidebar.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);
+  }
+  setupTogglableMenuItems() {
+    if (!this.toggled) {
+      return;
+    }
+    this.markAllMenuItemsAsSelectableEmpty();
+    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);
+  }
+  markAllMenuItemsAsSelectableEmpty() {
+    // when you have a toggled menu you also want to close other menu items when you click on an item without children
+    // nice benefit this item will then also be highlighted
+    const slot = this.sidebar.querySelector('slot');
+    const nodes = slot.assignedElements();
+    // since we don't just want to make the top level empty menuItems selectable in toggled mode,
+    // but also nested items we need to traverse the whole menu item tree
+    const menuItems = [];
+    while (nodes.length > 0) {
+      const node = nodes.pop();
+      // collect six-details in the current shadowDOM
+      const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');
+      menuItems.push(...menuItemsForCurrentNode);
+      // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too
+      const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);
+      nodes.push(...newItemGroups);
+    }
+    menuItems.forEach((details) => (details.selectableEmpty = true));
+  }
+  /** Toggles whether the sidebar should be shown or hidden */
+  async toggle() {
+    if (this.willShow || this.willHide) {
+      return;
+    }
+    if (this.open) {
+      await this.hide();
+    }
+    else {
+      await this.show();
+    }
+  }
+  /** Shows the sidebar */
+  async show() {
+    if (this.willShow) {
+      return;
+    }
+    const sixShow = this.sixShow.emit();
+    if (sixShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.willShow = true;
+    this.isVisible = true;
+    this.open = true;
+  }
+  /** Hides the sidebar */
+  async hide() {
+    if (this.willHide) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    this.willHide = true;
+    this.open = false;
+  }
+  /** Allows to select a menu item programmatically by index */
+  async selectItemByIndex(index) {
+    const slot = this.sidebar.querySelector('slot');
+    const menuItemsOnRootLevel = slot
+      .assignedElements()
+      .map((el) => el.shadowRoot.querySelector('six-details'));
+    if (index < 0 || index > menuItemsOnRootLevel.length - 1) {
+      console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`);
+      return;
+    }
+    await menuItemsOnRootLevel[index].show();
+  }
+  /** Allows to select a menu item programmatically by name */
+  async selectItemByName(value) {
+    const slot = this.sidebar.querySelector('slot');
+    const sidebarItemGroups = slot.assignedElements();
+    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => (el === null || el === void 0 ? void 0 : el.name) === value);
+    const selectedItem = sidebarItemGroups[indexOfSelectedElement].shadowRoot.querySelector('six-details');
+    await selectedItem.show();
+  }
+  resetTransitionVariables() {
+    this.isVisible = this.open;
+    this.willShow = false;
+    this.willHide = false;
+    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+  }
+  render() {
+    return (h("host", { class: "six-sidebar" }, h("div", { class: {
+        sidebar__container: true,
+        'sidebar--visible': this.isVisible,
+        'sidebar--open': this.open,
+        'sidebar--left': this.position === 'left',
+        'sidebar--right': this.position === 'right',
+      }, style: {
+        width: this.width,
+        [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,
+      }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd }, h("slot", null))));
+  }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+};
 SixSidebar.style = sixSidebarCss;
 
 export { SixSidebar as six_sidebar };

package/dist/esm/six-spinner.entry.js

@@ -2,22 +2,22 @@ import { r as registerInstance, h } from './index-a2605a62.js';
 
 const sixSpinnerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";
 
-let SixSpinner = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */
-    this.six = false;
-  }
-  renderSIXLogo() {
-    return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, h("svg", { viewBox: "0 0 40 40" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })))));
-  }
-  renderSimple() {
-    return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
-  }
-  render() {
-    return this.six ? this.renderSIXLogo() : this.renderSimple();
-  }
-};
+let SixSpinner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */
+    this.six = false;
+  }
+  renderSIXLogo() {
+    return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, h("svg", { viewBox: "0 0 40 40" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })))));
+  }
+  renderSimple() {
+    return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
+  }
+  render() {
+    return this.six ? this.renderSIXLogo() : this.renderSimple();
+  }
+};
 SixSpinner.style = sixSpinnerCss;
 
 export { SixSpinner as six_spinner };