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

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

@@ -0,0 +1,26 @@
+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 };

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

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

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

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_overlay-fill-color: var(--odx-overlay-background, rgba(255, 255, 255, .25));display:contents}:host::part(overlay){display:flex;flex-direction:column;place-content:center;place-items:center;position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:var(--odx-transition-reduced) allow-discrete;overflow:hidden}:host::part(content){min-inline-size:var(--odx-size-225);text-align:center}:host([loading])::part(overlay){background-color:var(--_overlay-fill-color);z-index:9999;opacity:1;backdrop-filter:blur(var(--odx-elevation-blur)) grayscale(.75);pointer-events:all;visibility:visible}";
+
+export { styles as default };

package/dist/{elements/loading-overlay/loading-overlay.element.d.ts → components/loading-overlay/loading-overlay.component.d.ts}

@@ -2,12 +2,12 @@ import { CustomElement } from '@odx/foundation';
 import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-loading-overlay': OdxLoadingOverlayElement;
+        'odx-loading-overlay': OdxLoadingOverlayComponent;
     }
 }
 export declare const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
-declare const OdxLoadingOverlayElement_base: import('@odx/foundation').Constructor<import('@odx/foundation').HasLoadingState> & typeof CustomElement;
-export declare class OdxLoadingOverlayElement extends OdxLoadingOverlayElement_base {
+declare const OdxLoadingOverlayComponent_base: import('@odx/foundation').Constructor<import('@odx/foundation').HasLoadingState> & typeof CustomElement;
+export declare class OdxLoadingOverlayComponent extends OdxLoadingOverlayComponent_base {
     #private;
     private readonly overlay;
     get loadingContainer(): HTMLElement;
@@ -18,4 +18,4 @@ export declare class OdxLoadingOverlayElement extends OdxLoadingOverlayElement_b
     protected hideOverlay(): void;
 }
 export {};
-//# sourceMappingURL=loading-overlay.element.d.ts.map
+//# sourceMappingURL=loading-overlay.component.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,78 @@
+import { WithLoadingState, CustomElement, waitForAnimations, emptySlotFallbackFix, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { query } from 'lit/decorators.js';
+import styles from './loading-overlay.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 __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _loadingContainerPosition;
+const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
+let OdxLoadingOverlayComponent = class extends WithLoadingState(CustomElement) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _loadingContainerPosition, "");
+  }
+  get loadingContainer() {
+    return this.parentElement ?? this;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this.hideOverlay();
+  }
+  async updated(props) {
+    if (props.has("loading")) {
+      if (this.loading) {
+        this.showOverlay();
+      } else {
+        await waitForAnimations(this.overlay);
+        this.hideOverlay();
+      }
+    }
+  }
+  render() {
+    return html`
+      <div part="overlay">
+        <div class="content">
+          <slot ${emptySlotFallbackFix()}>
+            <odx-loading-indicator></odx-loading-indicator>
+          </slot>
+        </div>
+      </div>
+    `;
+  }
+  showOverlay() {
+    this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, true);
+    __privateSet(this, _loadingContainerPosition, window.getComputedStyle(this.loadingContainer).position);
+    if (__privateGet(this, _loadingContainerPosition) !== "static") return;
+    this.loadingContainer.style.position = "relative";
+  }
+  hideOverlay() {
+    this.loadingContainer.toggleAttribute(LOADING_OVERLAY_HOST_DIRECTIVE, false);
+    if (__privateGet(this, _loadingContainerPosition) !== "static") return;
+    this.loadingContainer.style.position = "";
+  }
+};
+_loadingContainerPosition = new WeakMap();
+__decorateClass([
+  query('[part="overlay"]', true)
+], OdxLoadingOverlayComponent.prototype, "overlay", 2);
+OdxLoadingOverlayComponent = __decorateClass([
+  customElement("odx-loading-overlay", [styles])
+], OdxLoadingOverlayComponent);
+
+export { LOADING_OVERLAY_HOST_DIRECTIVE, OdxLoadingOverlayComponent };

package/dist/components/logo/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/logo/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/logo/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

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

@@ -0,0 +1,3 @@
+const styles = ":host{aspect-ratio:92 / 36;background-color:currentColor;block-size:var(--_logo-block-size);display:inline-block;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center;margin-block:var(--_logo-spacing)}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host([size=\"xs\"]){--_logo-block-size: calc(var(--odx-size-150) - 2 * var(--odx-size-25));--_logo-spacing: var(--odx-size-25)}:host,:host([size=\"sm\"]){--_logo-block-size: var(--odx-size-150);--_logo-spacing: var(--odx-size-37)}:host([size=\"md\"]){--_logo-block-size: var(--odx-size-225);--_logo-spacing: var(--odx-size-37)}:host([size=\"lg\"]){--_logo-block-size: var(--odx-size-300);--_logo-spacing: var(--odx-size-37)}:host([size=\"xl\"]){--_logo-block-size: var(--odx-size-400);--_logo-spacing: var(--odx-size-37)}";
+
+export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"logo.component.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAG/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF;AAED,qBACa,gBAAiB,SAAQ,aAAa;IAEjD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,OAAO,UAAS;IAEP,iBAAiB,IAAI,IAAI;CAOnC"}
+{"version":3,"file":"logo.component.d.ts","sourceRoot":"","sources":["../../../components/logo/logo.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAG/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF;AAED,qBACa,gBAAiB,SAAQ,aAAa;IAEjD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,OAAO,UAAS;IAEP,iBAAiB,IAAI,IAAI;CAOnC"}

package/dist/components/logo/logo.component.js

@@ -0,0 +1,38 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './logo.component.css.js';
+
+var __defProp = Object.defineProperty;
+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 = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let OdxLogoComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.compact = false;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.ariaLabel ||= "Dräger";
+    this.ariaRoleDescription ||= "Logo";
+    this.role = "img";
+    this.translate = false;
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], OdxLogoComponent.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxLogoComponent.prototype, "compact", 2);
+OdxLogoComponent = __decorateClass([
+  customElement("odx-logo", [styles])
+], OdxLogoComponent);
+
+export { OdxLogoComponent };

package/dist/components/logo/logo.models.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logo.models.d.ts","sourceRoot":"","sources":["../../../src/components/logo/logo.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAChE,eAAO,MAAM,QAAQ;;;;;;CAMX,CAAC"}
+{"version":3,"file":"logo.models.d.ts","sourceRoot":"","sources":["../../../components/logo/logo.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAC;AAChE,eAAO,MAAM,QAAQ;;;;;;CAMX,CAAC"}

package/dist/components/logo/logo.models.js

@@ -0,0 +1,9 @@
+const LogoSize = {
+  XS: "xs",
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+
+export { LogoSize };

package/dist/components/main-menu/index.d.ts

@@ -0,0 +1,6 @@
+export * from './main-menu-button.component';
+export * from './main-menu-link.component';
+export * from './main-menu-subtitle.component';
+export * from './main-menu-title.component';
+export * from './main-menu.component';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/main-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/main-menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC"}

package/dist/{elements/main-menu/main-menu-button.element.d.ts → components/main-menu/main-menu-button.component.d.ts}

@@ -2,11 +2,11 @@ import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-main-menu-button': OdxMainMenuButtonElement;
+        'odx-main-menu-button': OdxMainMenuButtonComponent;
     }
 }
-export declare class OdxMainMenuButtonElement extends CustomElement {
+export declare class OdxMainMenuButtonComponent extends CustomElement {
     #private;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=main-menu-button.element.d.ts.map
+//# sourceMappingURL=main-menu-button.component.d.ts.map

package/dist/components/main-menu/main-menu-button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-menu-button.component.d.ts","sourceRoot":"","sources":["../../../components/main-menu/main-menu-button.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,0BAA0B,CAAC;KACpD;CACF;AAED,qBACa,0BAA2B,SAAQ,aAAa;;cACxC,MAAM,IAAI,cAAc;CAU5C"}

package/dist/components/main-menu/main-menu-button.component.js

@@ -0,0 +1,38 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+
+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 = (decorator(result)) || result;
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+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 _handleClick;
+let OdxMainMenuButtonComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleClick, () => {
+      document.querySelector("odx-main-menu")?.open();
+    });
+  }
+  render() {
+    return html`
+      <odx-icon-button aria-label="Open main menu" icon="core::menu" variant="ghost" @click=${__privateGet(this, _handleClick)}>
+      </odx-icon-button>
+    `;
+  }
+};
+_handleClick = new WeakMap();
+OdxMainMenuButtonComponent = __decorateClass([
+  customElement("odx-main-menu-button", [])
+], OdxMainMenuButtonComponent);
+
+export { OdxMainMenuButtonComponent };

package/dist/components/main-menu/main-menu-link.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-fill: var(--odx-palette-transparent);--_color-text: inherit;--_color-outline: var(--odx-palette-transparent);user-select:none}:host::part(anchor){display:flex;place-items:center;background-color:var(--_color-fill);color:var(--_color-text);gap:var(--odx-size-50);block-size:var(--odx-size-300);padding-inline:var(--odx-size-100);font-weight:var(--odx-font-weight-medium);border-radius:var(--odx-border-radius-sm);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);outline-color:var(--_color-outline);transition:var(--odx-transition-default);text-decoration:none}:host(:hover){--_color-fill: var(--odx-color-foreground-highlight)}:host(:is([active],:active)){--_color-fill: var(--odx-color-foreground-highlight-pressed)}:host::part(anchor):focus-visible{--_color-outline: var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"]){--_color-text: var(--odx-color-disabled-foreground-brand);pointer-events:none}";
+
+export { styles as default };

package/dist/components/main-menu/main-menu-link.component.d.ts

@@ -0,0 +1,9 @@
+import { BaseLink } from '../link';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-main-menu-link': OdxMainMenuLinkComponent;
+    }
+}
+export declare class OdxMainMenuLinkComponent extends BaseLink {
+}
+//# sourceMappingURL=main-menu-link.component.d.ts.map

package/dist/components/main-menu/main-menu-link.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-menu-link.component.d.ts","sourceRoot":"","sources":["../../../components/main-menu/main-menu-link.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,wBAAwB,CAAC;KAChD;CACF;AAED,qBACa,wBAAyB,SAAQ,QAAQ;CAAG"}

package/dist/components/main-menu/main-menu-link.component.js

@@ -0,0 +1,19 @@
+import { customElement } from '@odx/foundation';
+import styles from './main-menu-link.component.css.js';
+import { BaseLink } from '../link/base-link.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 OdxMainMenuLinkComponent = class extends BaseLink {
+};
+OdxMainMenuLinkComponent = __decorateClass([
+  customElement("odx-main-menu-link", [styles])
+], OdxMainMenuLinkComponent);
+
+export { OdxMainMenuLinkComponent };

package/dist/{elements/main-menu/main-menu-subtitle.element.d.ts → components/main-menu/main-menu-subtitle.component.d.ts}

@@ -2,11 +2,11 @@ import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-main-menu-subtitle': OdxMainMenuSubtitleElement;
+        'odx-main-menu-subtitle': OdxMainMenuSubtitleComponent;
     }
 }
-export declare class OdxMainMenuSubtitleElement extends CustomElement {
+export declare class OdxMainMenuSubtitleComponent extends CustomElement {
     slot: string;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=main-menu-subtitle.element.d.ts.map
+//# sourceMappingURL=main-menu-subtitle.component.d.ts.map

package/dist/components/main-menu/main-menu-subtitle.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-menu-subtitle.component.d.ts","sourceRoot":"","sources":["../../../components/main-menu/main-menu-subtitle.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,4BAA4B,CAAC;KACxD;CACF;AAED,qBACa,4BAA6B,SAAQ,aAAa;IACpD,IAAI,SAAc;cAER,MAAM,IAAI,cAAc;CAO5C"}

package/dist/components/main-menu/main-menu-subtitle.component.js

@@ -0,0 +1,29 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+
+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 OdxMainMenuSubtitleComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.slot = "subtitle";
+  }
+  render() {
+    return html`
+      <odx-text size="md">
+        <slot></slot>
+      </odx-text>
+    `;
+  }
+};
+OdxMainMenuSubtitleComponent = __decorateClass([
+  customElement("odx-main-menu-subtitle")
+], OdxMainMenuSubtitleComponent);
+
+export { OdxMainMenuSubtitleComponent };

package/dist/{elements/main-menu/main-menu-title.element.d.ts → components/main-menu/main-menu-title.component.d.ts}

@@ -2,11 +2,11 @@ import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-main-menu-title': OdxMainMenuTitleElement;
+        'odx-main-menu-title': OdxMainMenuTitleComponent;
     }
 }
-export declare class OdxMainMenuTitleElement extends CustomElement {
+export declare class OdxMainMenuTitleComponent extends CustomElement {
     slot: string;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=main-menu-title.element.d.ts.map
+//# sourceMappingURL=main-menu-title.component.d.ts.map

package/dist/components/main-menu/main-menu-title.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-menu-title.component.d.ts","sourceRoot":"","sources":["../../../components/main-menu/main-menu-title.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,yBAAyB,CAAC;KAClD;CACF;AAED,qBACa,yBAA0B,SAAQ,aAAa;IACjD,IAAI,SAAW;cAEL,MAAM,IAAI,cAAc;CAO5C"}

package/dist/components/main-menu/main-menu-title.component.js

@@ -0,0 +1,29 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+
+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 OdxMainMenuTitleComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.slot = "title";
+  }
+  render() {
+    return html`
+      <odx-title size="sm">
+        <slot></slot>
+      </odx-title>
+    `;
+  }
+};
+OdxMainMenuTitleComponent = __decorateClass([
+  customElement("odx-main-menu-title")
+], OdxMainMenuTitleComponent);
+
+export { OdxMainMenuTitleComponent };

package/dist/components/main-menu/main-menu.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--odx-link-color: var(--odx-color-foreground-light);--odx-link-color-hover: var(--odx-color-foreground-light);--odx-link-color-disabled: var(--odx-color-disabled-foreground-brand);--_transition-duration: var(--odx-motion-duration-default);grid-template-rows:auto 1fr auto auto;block-size:100%;inline-size:var(--odx-main-menu-max-width, min(100dvw, 384px));border:none;background-color:var(--odx-color-background-draeger);color:var(--odx-color-foreground-light);margin:0;padding:0;transform:translate(-100%);box-shadow:var(--odx-shadow-level-2);transition:transform var(--_transition-duration) allow-discrete,overlay var(--_transition-duration) allow-discrete,display var(--_transition-duration) allow-discrete}:host(:popover-open){display:grid;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(-100%)}}:host::backdrop{background-color:var(--odx-color-backdrop);backdrop-filter:blur(0);opacity:0;transition:backdrop-filter var(--_transition-duration),opacity var(--_transition-duration);cursor:default}:host(:popover-open)::backdrop{backdrop-filter:blur(var(--odx-elevation-blur));opacity:1}@starting-style{:host(:popover-open)::backdrop{backdrop-filter:blur(0);opacity:0}}[part~=navigation]{padding:var(--odx-size-75);overflow-y:auto}[part~=header]{padding-inline:var(--odx-size-150);padding-block-start:var(--odx-size-75);padding-block-end:clamp(0px,4dvh - calc(var(--odx-size-75)),var(--odx-size-75))}[part~=link-navigation],[part~=footer]{padding:var(--odx-size-150);padding-block:clamp(var(--odx-size-75),4dvh,var(--odx-size-150))}[part~=link-navigation]{padding-block-end:0;padding-block-start:var(--odx-size-75);column-gap:var(--odx-size-100)}";
+
+export { styles as default };

package/dist/{elements/main-menu/main-menu.element.d.ts → components/main-menu/main-menu.component.d.ts}

@@ -2,16 +2,17 @@ import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-main-menu': OdxMainMenuElement;
+        'odx-main-menu': OdxMainMenuComponent;
     }
 }
-export declare class OdxMainMenuElement extends CustomElement {
+export declare class OdxMainMenuComponent extends CustomElement {
     #private;
     private links;
+    constructor();
     connectedCallback(): void;
     toggle(): void;
     open(): void;
     close(): void;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=main-menu.element.d.ts.map
+//# sourceMappingURL=main-menu.component.d.ts.map

package/dist/components/main-menu/main-menu.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-menu.component.d.ts","sourceRoot":"","sources":["../../../components/main-menu/main-menu.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAsC,MAAM,iBAAiB,CAAC;AACpF,OAAO,EAAE,KAAK,cAAc,EAAkB,MAAM,KAAK,CAAC;AAI1D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,oBAAoB,CAAC;KACvC;CACF;AAED,qBACa,oBAAqB,SAAQ,aAAa;;IAIrD,OAAO,CAAC,KAAK,CAAiB;;IASrB,iBAAiB,IAAI,IAAI;IAKlC,MAAM,IAAI,IAAI;IAId,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;cAIM,MAAM,IAAI,cAAc;CA6B5C"}

package/dist/components/main-menu/main-menu.component.js

@@ -0,0 +1,82 @@
+import { CustomElement, FocusTrapController, customElement } from '@odx/foundation';
+import { isServer, html } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import styles from './main-menu.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 __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+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 _focusTrap, _handleSlotChange, _handleToggle;
+let OdxMainMenuComponent = class extends CustomElement {
+  constructor() {
+    super();
+    __privateAdd(this, _focusTrap, new FocusTrapController(this));
+    __privateAdd(this, _handleSlotChange, () => {
+      for (const link of this.links) {
+        link.slot ||= "link-navigation";
+      }
+    });
+    __privateAdd(this, _handleToggle, ({ newState }) => {
+      __privateGet(this, _focusTrap).toggle(newState === "open");
+    });
+    if (!isServer) {
+      this.addEventListener("toggle", __privateGet(this, _handleToggle));
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.popover = "auto";
+  }
+  toggle() {
+    this.togglePopover();
+  }
+  open() {
+    this.showPopover();
+  }
+  close() {
+    this.hidePopover();
+  }
+  render() {
+    return html`
+      <div part="header">
+        <slot name="title"></slot>
+        <slot name="subtitle"></slot>
+      </div>
+      <nav part="navigation">
+        <odx-stack gap="md" align-items="stretch">
+          <slot @slotchange=${__privateGet(this, _handleSlotChange)}></slot>
+        </odx-stack>
+      </nav>
+      <odx-stack part="link-navigation" gap="xs"  wrap horizontal justify-content="start">
+        <slot name="link-navigation"></slot>
+      </odx-stack>
+      <div part="footer">
+        <odx-logo size="sm"></odx-logo>
+      </div>
+    `;
+  }
+};
+_focusTrap = new WeakMap();
+_handleSlotChange = new WeakMap();
+_handleToggle = new WeakMap();
+__decorateClass([
+  queryAssignedElements({ selector: "odx-link", flatten: true })
+], OdxMainMenuComponent.prototype, "links", 2);
+OdxMainMenuComponent = __decorateClass([
+  customElement("odx-main-menu", [styles])
+], OdxMainMenuComponent);
+
+export { OdxMainMenuComponent };

package/dist/components/main.d.ts

@@ -1,19 +1,45 @@
+export * from './accordion';
+export * from './area-header';
+export * from './avatar';
+export * from './avatar-group';
+export * from './badge';
 export * from './breadcrumb';
 export * from './button';
 export * from './button-group';
+export * from './card';
+export * from './checkbox';
+export * from './checkbox-group';
+export * from './chip';
+export * from './content-box';
+export * from './dropdown';
 export * from './format';
 export * from './header';
 export * from './headline';
 export * from './icon-button';
+export * from './inline-message';
 export * from './link';
+export * from './list';
 export * from './loading-indicator';
+export * from './loading-overlay';
 export * from './logo';
+export * from './main-menu';
+export * from './navigation-item';
+export * from './option';
 export * from './page';
 export * from './page-layout';
+export * from './radio-button';
+export * from './radio-group';
+export * from './rail-navigation';
 export * from './search-bar';
+export * from './select';
 export * from './separator';
+export * from './spacer';
+export * from './spinbox';
 export * from './stack';
+export * from './switch';
 export * from './text';
 export * from './title';
+export * from './toggle-button';
 export * from './visually-hidden';
+export * from '../elements/main';
 //# sourceMappingURL=main.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/components/main.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,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,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"}