@odx/foundation 0.1.0-alpha.21 → 0.1.0-alpha.23

package/dist/components/button/base-button.d.ts

@@ -1,5 +1,6 @@
 import { TemplateResult } from 'lit';
 import { BaseLink } from '../link';
+declare const BaseButtonComponent_base: import('@odx/foundation').Constructor<import('@odx/foundation').HasLoadingState> & typeof BaseLink;
 /**
  * A button is clickable text or an icon that triggers an action on the page or in the background.
  * Depending on the action, content, and hierarchy, a button can be used on its own or grouped with
@@ -12,13 +13,14 @@ import { BaseLink } from '../link';
  * @slot suffix - Contains the button's icon or state indicator, e.g. a spinner.
  * @slot - Contains button text
  */
-export declare class BaseButtonComponent extends BaseLink {
-    #private;
+export declare class BaseButtonComponent extends BaseButtonComponent_base {
     /**
      * The type of the button.
      */
     type: 'button' | 'submit' | 'reset';
     protected render(): TemplateResult;
     protected renderContent(): TemplateResult;
+    protected renderButton(): TemplateResult<1>;
 }
+export {};
 //# sourceMappingURL=base-button.d.ts.map

package/dist/components/button/base-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../components/button/base-button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC;;;;;;;;;;;GAWG;AACH,qBACa,mBAAoB,SAAQ,QAAQ;;IAC/C;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;cAE5B,MAAM,IAAI,cAAc;cAQxB,aAAa,IAAI,cAAc;CAsBnD"}
+{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../components/button/base-button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;;AAEnC;;;;;;;;;;;GAWG;AACH,qBACa,mBAAoB,SAAQ,wBAA0B;IACjE;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;cAE5B,MAAM,IAAI,cAAc;cAQxB,aAAa,IAAI,cAAc;IASlD,SAAS,CAAC,YAAY;CAgBvB"}

package/dist/components/button/base-button.js

@@ -1,4 +1,4 @@
-import { optionalAttr, requestUpdateOnAriaChange } from '@odx/foundation';
+import { WithLoadingState, optionalAttr, requestUpdateOnAriaChange } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
@@ -6,9 +6,6 @@ import { BaseLink } from '../link/base-link.js';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
@@ -17,21 +14,16 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _BaseButtonComponent_instances, renderButton_fn;
-let BaseButtonComponent = class extends BaseLink {
+let BaseButtonComponent = class extends WithLoadingState(BaseLink) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _BaseButtonComponent_instances);
     this.type = "button";
   }
   render() {
     return html`${when(
       this.href,
       () => super.render(),
-      () => __privateMethod(this, _BaseButtonComponent_instances, renderButton_fn).call(this)
+      () => this.renderButton()
     )}`;
   }
   renderContent() {
@@ -39,22 +31,24 @@ let BaseButtonComponent = class extends BaseLink {
       <slot name="start"></slot>
       <slot></slot>
       <slot name="end"></slot>
+      ${when(this.loading, () => html`<odx-loading-spinner class="spinner" variant="dots"></odx-loading-spinner>`)}
     `;
   }
-};
-_BaseButtonComponent_instances = new WeakSet();
-renderButton_fn = function() {
-  const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
-  return html`<button
-      part="anchor button"
-      aria-label="${optionalAttr(ariaLabel)}"
-      aria-haspopup="${optionalAttr(ariaHasPopup)}"
-      aria-expanded="${optionalAttr(ariaExpanded)}"
-      type=${this.type}
-      ?disabled=${this.disabled}
-    >
+  renderButton() {
+    const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
+    return html`
+      <button
+        part="anchor button"
+        aria-label="${optionalAttr(ariaLabel)}"
+        aria-haspopup="${optionalAttr(ariaHasPopup)}"
+        aria-expanded="${optionalAttr(ariaExpanded)}"
+        type=${this.type}
+        ?disabled=${this.disabled || this.loading}
+      >
       ${this.renderContent()}
-    </button>`;
+    </button>
+    `;
+  }
 };
 __decorateClass([
   property()

package/dist/components/button/button.component.css.js

@@ -1,3 +1,3 @@
-const styles = ":host{--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_icon-size: var(--odx-typography-font-size-5);--_text-size: var(--odx-typography-font-size-3);--_spinner-size: var(--odx-size-50);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: var(--odx-size-37);--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);inline-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_text-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.spinner{--_size: var(--_spinner-size);color:var(--_color-foreground);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:active)::part(anchor){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"])::part(anchor){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-background-pressed: var(--odx-color-success-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-background: var(--odx-color-confirmation-rest);--_color-background-hover: var(--odx-color-confirmation-hover);--_color-background-pressed: var(--odx-color-confirmation-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-100);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_text-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
+const styles = ":host{--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_icon-size: var(--odx-typography-font-size-5);--_text-size: var(--odx-typography-font-size-3);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: var(--odx-size-37);--_margin-icon: calc(-.5 * (var(--_icon-size) - var(--_padding-inline)) - var(--odx-size-px));block-size:var(--_block-size);cursor:pointer;position:relative;user-select:none;vertical-align:top;border-radius:var(--odx-border-radius-sm);white-space:nowrap;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:calc(var(--_padding-block));padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_text-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-medium);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset)}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);position:absolute;margin:auto}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-background-pressed: var(--odx-color-success-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-background: var(--odx-color-confirmation-rest);--_color-background-hover: var(--odx-color-confirmation-hover);--_color-background-pressed: var(--odx-color-confirmation-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host(:hover){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"]):active){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){--_color-background: var(--_color-background-hover);cursor:default;[part~=anchor]{color:transparent}}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-100);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_text-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
 
 export { styles as default };

package/dist/components/button/button.component.d.ts

@@ -1,4 +1,3 @@
-import { TemplateResult } from 'lit';
 import { BaseButtonComponent } from './base-button';
 import { ButtonSize, ButtonVariant } from './button.models';
 declare global {
@@ -31,7 +30,6 @@ export declare class OdxButtonComponent extends OdxButtonComponent_base {
      */
     variant?: ButtonVariant;
     constructor();
-    protected renderContent(): TemplateResult;
 }
 export {};
 //# sourceMappingURL=button.component.d.ts.map

package/dist/components/button/button.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../components/button/button.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAkB,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF;;AAED;;;;;;;;;;;GAWG;AACH,qBACa,kBAAmB,SAAQ,uBAAqC;;IAC3E,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAGtC;;OAEG;IAEH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,aAAa,CAAC;;cASL,aAAa,IAAI,cAAc;CAmBnD"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../components/button/button.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF;;AAED;;;;;;;;;;;GAWG;AACH,qBACa,kBAAmB,SAAQ,uBAAqC;;IAC3E,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAGtC;;OAEG;IAEH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,aAAa,CAAC;;CAmBzB"}

package/dist/components/button/button.component.js

@@ -1,7 +1,6 @@
 import { WithLoadingState, customElement } from '@odx/foundation';
-import { isServer, html } from 'lit';
+import { isServer } from 'lit';
 import { property } from 'lit/decorators.js';
-import { when } from 'lit/directives/when.js';
 import { BaseButtonComponent } from './base-button.js';
 import styles from './button.component.css.js';
 
@@ -32,14 +31,6 @@ let OdxButtonComponent = class extends WithLoadingState(BaseButtonComponent) {
       this.addEventListener("click", __privateMethod(this, _OdxButtonComponent_instances, handleClick_fn));
     }
   }
-  renderContent() {
-    return html`
-      <slot name="start"></slot>
-      <slot></slot>
-      <slot name="end"></slot>
-      ${when(this.loading, () => html`<odx-loading-indicator class="spinner"></odx-loading-indicator>`)}
-    `;
-  }
 };
 _internals = new WeakMap();
 _OdxButtonComponent_instances = new WeakSet();

package/dist/components/icon-button/icon-button.component.js

@@ -18,10 +18,10 @@ let OdxIconButtonComponent = class extends OdxButtonComponent {
   renderContent() {
     return html`
       <odx-icon name=${optionalAttr(this.icon)}></odx-icon>
+      ${when(this.loading, () => html`<odx-loading-spinner class="spinner"></odx-loading-spinner>`)}
       <odx-visually-hidden>
         <slot></slot>
       </odx-visually-hidden>
-      ${when(this.loading, () => html`<odx-loading-indicator class="spinner"></odx-loading-indicator>`)}
     `;
   }
 };

package/dist/components/loading-overlay/loading-overlay.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-overlay.component.d.ts","sourceRoot":"","sources":["../../../components/loading-overlay/loading-overlay.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4E,MAAM,iBAAiB,CAAC;AAC1H,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIrE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,eAAO,MAAM,8BAA8B,6BAA6B,CAAC;;AAEzE,qBACa,0BAA2B,SAAQ,+BAA+B;;IAI7E,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAe;IAEvC,IAAa,gBAAgB,IAAI,WAAW,CAE3C;IAEQ,oBAAoB,IAAI,IAAI;cAKZ,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAWzD,MAAM,IAAI,cAAc;IAY3C,SAAS,CAAC,WAAW,IAAI,IAAI;IAO7B,SAAS,CAAC,WAAW,IAAI,IAAI;CAK9B"}
+{"version":3,"file":"loading-overlay.component.d.ts","sourceRoot":"","sources":["../../../components/loading-overlay/loading-overlay.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAA4E,MAAM,iBAAiB,CAAC;AAC1H,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIrE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,eAAO,MAAM,8BAA8B,6BAA6B,CAAC;;AAEzE,qBACa,0BAA2B,SAAQ,+BAA+B;;IAI7E,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAe;IAEvC,IAAa,gBAAgB,IAAI,WAAW,CAE3C;IAEQ,oBAAoB,IAAI,IAAI;cAKZ,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cAWzD,MAAM,IAAI,cAAc;IAY3C,SAAS,CAAC,WAAW,IAAI,IAAI;IAQ7B,SAAS,CAAC,WAAW,IAAI,IAAI;CAM9B"}

package/dist/components/loading-overlay/loading-overlay.component.js

@@ -49,7 +49,7 @@ let OdxLoadingOverlayComponent = class extends WithLoadingState(CustomElement) {
       <div part="overlay">
         <div class="content">
           <slot ${emptySlotFallbackFix()}>
-            <odx-loading-indicator></odx-loading-indicator>
+            <odx-loading-spinner></odx-loading-spinner>
           </slot>
         </div>
       </div>
@@ -60,11 +60,13 @@ let OdxLoadingOverlayComponent = class extends WithLoadingState(CustomElement) {
     __privateSet(this, _loadingContainerPosition, window.getComputedStyle(this.loadingContainer).position);
     if (__privateGet(this, _loadingContainerPosition) !== "static") return;
     this.loadingContainer.style.position = "relative";
+    this.loadingContainer.inert = true;
   }
   hideOverlay() {
     this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, false);
     if (__privateGet(this, _loadingContainerPosition) !== "static") return;
     this.loadingContainer.style.position = "";
+    this.loadingContainer.inert = false;
   }
 };
 _loadingContainerPosition = new WeakMap();

package/dist/components/loading-spinner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './loading-spinner.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/loading-spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/loading-spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC"}

package/dist/components/loading-spinner/loading-spinner.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_animation-duration: 1.5s;--_animation-delay: 0s;--_size: var(--odx-size-225);--_space: var(--odx-size-37);--_track-size: calc(var(--odx-size-37) - var(--odx-size-px));--_track-color: var(--odx-color-transparent-pressed);display:flex;place-content:center;place-items:center;color:inherit;font-size:var(--_size);block-size:1em}:not(svg){transform-origin:0px 0px}.base{display:block;block-size:100%;inline-size:100%;aspect-ratio:1;animation:loading-spinner-rotation-animation 1.5s linear infinite}:host(:not([variant=\"dots\"])){inline-size:1em;.track,.indicator{stroke-width:var(--_track-size)}.track{stroke:var(--_track-color)}.indicator{stroke:currentColor;color:inherit;stroke-dasharray:90,180;stroke-dashoffset:-5;animation:loading-spinner-animation 1.5s ease-in-out infinite;stroke-linecap:round}}:host([variant=\"dots\"]){gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-spinner-dots-entry-animation .25s linear both;.indicator{background-color:currentColor;border-radius:50%;block-size:calc(var(--_size) / 3);flex:0 0 calc(var(--_size) / 3);z-index:3;animation:loading-spinner-dots-animation var(--_animation-duration) var(--_animation-delay) infinite cubic-bezier(.96,.21,.41,.76) forwards;&:nth-child(1){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:nth-child(2){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}&:nth-child(3){--_animation-delay: 0s}}}@keyframes loading-spinner-animation{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes loading-spinner-rotation-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-spinner-dots-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-spinner-dots-animation{0%,75%,to{transform:scale(.667);background-color:var(--odx-color-transparent-pressed)}50%{transform:scale(1);background-color:currentColor}}";
+
+export { styles as default };

package/dist/components/loading-spinner/loading-spinner.component.d.ts

@@ -0,0 +1,13 @@
+import { CustomElement } from '@odx/foundation';
+import { TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-loading-spinner': OdxLoadingSpinnerComponent;
+    }
+}
+export declare class OdxLoadingSpinnerComponent extends CustomElement {
+    #private;
+    variant?: 'dots' | null;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=loading-spinner.component.d.ts.map

package/dist/components/loading-spinner/loading-spinner.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-spinner.component.d.ts","sourceRoot":"","sources":["../../../components/loading-spinner/loading-spinner.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,aAAa;;IAE3D,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;cAEL,MAAM,IAAI,cAAc;CAuB5C"}

package/dist/components/loading-spinner/loading-spinner.component.js

@@ -0,0 +1,58 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './loading-spinner.component.css.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _OdxLoadingSpinnerComponent_instances, renderSpinner_fn, renderDots_fn;
+let OdxLoadingSpinnerComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxLoadingSpinnerComponent_instances);
+  }
+  render() {
+    if (this.variant === "dots") {
+      return __privateMethod(this, _OdxLoadingSpinnerComponent_instances, renderDots_fn).call(this);
+    }
+    return __privateMethod(this, _OdxLoadingSpinnerComponent_instances, renderSpinner_fn).call(this);
+  }
+};
+_OdxLoadingSpinnerComponent_instances = new WeakSet();
+renderSpinner_fn = function() {
+  return html`
+      <svg class="base" role="progressbar" aria-label="Loading" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <circle class="track" cx="24" cy="24" r="20" fill="none"></circle>
+        <circle class="indicator" cx="24" cy="24" r="20" fill="none"></circle>
+      </svg>
+    `;
+};
+renderDots_fn = function() {
+  return html`
+      <div class="indicator"></div>
+      <div class="indicator"></div>
+      <div class="indicator"></div>
+    `;
+};
+__decorateClass([
+  property({ reflect: true })
+], OdxLoadingSpinnerComponent.prototype, "variant", 2);
+OdxLoadingSpinnerComponent = __decorateClass([
+  customElement("odx-loading-spinner", [styles])
+], OdxLoadingSpinnerComponent);
+
+export { OdxLoadingSpinnerComponent };

package/dist/components/main.d.ts

@@ -19,8 +19,8 @@ export * from './icon-button';
 export * from './inline-message';
 export * from './link';
 export * from './list';
-export * from './loading-indicator';
 export * from './loading-overlay';
+export * from './loading-spinner';
 export * from './logo';
 export * from './main-menu';
 export * from './navigation-item';

package/dist/components/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../components/main.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAElC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../components/main.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAElC,cAAc,kBAAkB,CAAC"}

package/dist/components/main.js

@@ -38,8 +38,8 @@ export { BaseLink } from './link/base-link.js';
 export { OdxLinkComponent } from './link/link.component.js';
 export { OdxListItemComponent } from './list/list-item.component.js';
 export { OdxListComponent } from './list/list.component.js';
-export { OdxLoadingIndicatorComponent } from './loading-indicator/loading-indicator.component.js';
 export { LOADING_OVERLAY_HOST_DIRECTIVE, OdxLoadingOverlayComponent } from './loading-overlay/loading-overlay.component.js';
+export { OdxLoadingSpinnerComponent } from './loading-spinner/loading-spinner.component.js';
 export { OdxLogoComponent } from './logo/logo.component.js';
 export { LogoSize } from './logo/logo.models.js';
 export { OdxMainMenuButtonComponent } from './main-menu/main-menu-button.component.js';

package/dist/src/lib/mixins/with-loading-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-loading-state.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/with-loading-state.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,gBAAgB,IAAI,WAAW,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAgB5D,WAAW,CAAC,eAAe,CAAC,GAAG,CACjE,CAAC"}
+{"version":3,"file":"with-loading-state.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/with-loading-state.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,gBAAgB,IAAI,WAAW,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAe5D,WAAW,CAAC,eAAe,CAAC,GAAG,CACjE,CAAC"}

package/dist/src/lib/mixins/with-loading-state.js

@@ -19,7 +19,6 @@ const WithLoadingState = dedupeMixin((superClass) => {
     }
     set loading(value) {
       this.loadingContainer.ariaBusy = toAriaBooleanAttribute(value);
-      this.loadingContainer.inert = value;
     }
     get loading() {
       return fromAriaBooleanAttribute(this.loadingContainer.ariaBusy);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/foundation",
   "description": "A library of Web Component building blocks for ODX",
-  "version": "0.1.0-alpha.21",
+  "version": "0.1.0-alpha.23",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@odx/typescript-config": "*",
     "ts-lit-plugin": "2.0.2",
-    "vite": "6.2.0",
+    "vite": "6.2.1",
     "vite-plugin-checker": "0.9.0",
     "vite-plugin-dts": "4.5.3"
   },

package/dist/components/loading-indicator/index.d.ts

@@ -1,2 +0,0 @@
-export * from './loading-indicator.component';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/loading-indicator/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/loading-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC"}

package/dist/components/loading-indicator/loading-indicator.component.css.js

@@ -1,3 +0,0 @@
-const styles = "@keyframes loading-indicator-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-indicator-animation{0%,75%,to{transform:scale(.667);opacity:.5}50%{transform:scale(1);opacity:1;background-color:currentColor}}:host{--_animation-timing-function: cubic-bezier(.96, .21, .41, .76);--_animation-duration: 1.25s;--_animation-delay: 0s;--_size: var(--odx-size-75);--_space: var(--odx-size-37);display:flex;place-content:center;place-items:center;color:currentColor;gap:calc(var(--_space) / 2);padding:var(--_space);animation:loading-indicator-entry-animation .25s linear both}.dot{background-color:currentColor;border-radius:50%;block-size:var(--_size);flex:0 0 var(--_size);z-index:3;animation:loading-indicator-animation var(--_animation-duration) var(--_animation-delay) infinite var(--_animation-timing-function) forwards;&:nth-child(1){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:nth-child(2){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}&:nth-child(3){--_animation-delay: 0s}}";
-
-export { styles as default };

package/dist/components/loading-indicator/loading-indicator.component.d.ts

@@ -1,11 +0,0 @@
-import { CustomElement } from '@odx/foundation';
-import { TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-loading-indicator': OdxLoadingIndicatorComponent;
-    }
-}
-export declare class OdxLoadingIndicatorComponent extends CustomElement {
-    protected render(): TemplateResult;
-}
-//# sourceMappingURL=loading-indicator.component.d.ts.map

package/dist/components/loading-indicator/loading-indicator.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"loading-indicator.component.d.ts","sourceRoot":"","sources":["../../../components/loading-indicator/loading-indicator.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,4BAA4B,CAAC;KACvD;CACF;AAED,qBACa,4BAA6B,SAAQ,aAAa;cAC1C,MAAM,IAAI,cAAc;CAO5C"}

package/dist/components/loading-indicator/loading-indicator.component.js

@@ -1,26 +0,0 @@
-import { CustomElement, customElement } from '@odx/foundation';
-import { html } from 'lit';
-import styles from './loading-indicator.component.css.js';
-
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(result)) || result;
-  return result;
-};
-let OdxLoadingIndicatorComponent = class extends CustomElement {
-  render() {
-    return html`
-      <div class="dot"></div>
-      <div class="dot"></div>
-      <div class="dot"></div>
-    `;
-  }
-};
-OdxLoadingIndicatorComponent = __decorateClass([
-  customElement("odx-loading-indicator", [styles])
-], OdxLoadingIndicatorComponent);
-
-export { OdxLoadingIndicatorComponent };