@odx/foundation 0.1.0-alpha.0 → 0.1.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/icon-button/icon-button.component.d.ts +24 -0
  2. package/dist/components/icon-button/icon-button.component.d.ts.map +1 -0
  3. package/dist/components/icon-button/index.d.ts +2 -0
  4. package/dist/components/icon-button/index.d.ts.map +1 -0
  5. package/dist/components/main.d.ts +1 -0
  6. package/dist/components/main.d.ts.map +1 -1
  7. package/dist/components.js +139 -115
  8. package/dist/elements/main-menu/elements/main-menu-button.element.d.ts.map +1 -1
  9. package/dist/elements.js +2 -3
  10. package/package.json +1 -1
package/dist/components/icon-button/icon-button.component.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { TemplateResult } from 'lit';
2
+ import { OdxButtonElement } from '../button';
3
+ declare global {
4
+ interface HTMLElementTagNameMap {
5
+ 'odx-icon-button': OdxIconButtonComponent;
6
+ }
7
+ }
8
+ /**
9
+ * A button is clickable text or an icon that triggers an action on the page or in the background.
10
+ * Depending on the action, content, and hierarchy, a button can be used on its own or grouped with
11
+ * other buttons.
12
+ * @summary Triggers actions on the page or in the background
13
+ * @csspart button - Internal button element
14
+ * @csspart prefix - Container for the prefix slot
15
+ * @csspart suffix - Container for the suffix slot
16
+ * @slot prefix - Contains the button's icon or state indicator, e.g. a spinner.
17
+ * @slot suffix - Contains the button's icon or state indicator, e.g. a spinner.
18
+ * @slot - Contains button text
19
+ */
20
+ export declare class OdxIconButtonComponent extends OdxButtonElement {
21
+ icon?: string | null;
22
+ protected renderContent(): TemplateResult;
23
+ }
24
+ //# sourceMappingURL=icon-button.component.d.ts.map
package/dist/components/icon-button/icon-button.component.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-button.component.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE7C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,sBAAsB,CAAC;KAC3C;CACF;AAED;;;;;;;;;;;GAWG;AACH,qBACa,sBAAuB,SAAQ,gBAAgB;IAE1D,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;cAEF,aAAa,IAAI,cAAc;CAKnD"}
package/dist/components/icon-button/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './icon-button.component';
2
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/icon-button/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC"}
package/dist/components/main.d.ts CHANGED
@@ -4,6 +4,7 @@ export * from './button-group';
4
4
  export * from './format';
5
5
  export * from './header';
6
6
  export * from './headline';
7
+ export * from './icon-button';
7
8
  export * from './link';
8
9
  export * from './loading-indicator';
9
10
  export * from './logo';
package/dist/components/main.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/components/main.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,iBAAiB,CAAC;AAEzB,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,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"}
1
+ {"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/components/main.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,iBAAiB,CAAC;AAEzB,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"}
package/dist/components.js CHANGED
@@ -9,14 +9,14 @@ import { clamp, debounce } from 'es-toolkit';
9
9
 
10
10
  const styles$h = ":host{display:inline}:host::part(anchor){padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-base);color:var(--odx-link-color, var(--odx-palette-blue-50));text-decoration:underline}:host::part(anchor):hover{--odx-link-color: var(--odx-palette-blue-80)}:host([disabled])::part(anchor),:host([subtle]:not([subtle=\"false\"]):not(:hover))::part(anchor){text-decoration:none}:host([disabled])::part(anchor){color:var(--odx-palette-coolgray-60);cursor:default;text-decoration:none}";
11
11
 
12
- var __defProp$h = Object.defineProperty;
13
- var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
14
- var __decorateClass$m = (decorators, target, key, kind) => {
15
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
12
+ var __defProp$i = Object.defineProperty;
13
+ var __getOwnPropDesc$m = Object.getOwnPropertyDescriptor;
14
+ var __decorateClass$n = (decorators, target, key, kind) => {
15
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$m(target, key) : target;
16
16
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
17
17
  if (decorator = decorators[i])
18
18
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
19
- if (kind && result) __defProp$h(target, key, result);
19
+ if (kind && result) __defProp$i(target, key, result);
20
20
  return result;
21
21
  };
22
22
  let OdxLinkComponent = class extends BaseLink {
@@ -25,21 +25,21 @@ let OdxLinkComponent = class extends BaseLink {
25
25
  this.subtle = false;
26
26
  }
27
27
  };
28
- __decorateClass$m([
28
+ __decorateClass$n([
29
29
  property({ type: Boolean, reflect: true })
30
30
  ], OdxLinkComponent.prototype, "subtle", 2);
31
- OdxLinkComponent = __decorateClass$m([
31
+ OdxLinkComponent = __decorateClass$n([
32
32
  customElement("odx-link", [styles$h])
33
33
  ], OdxLinkComponent);
34
34
 
35
35
  const styles$g = ":host{display:contents}:host([aria-hidden=\"true\"]){display:none}:host::part(separator){color:var(--odx-color-foreground-muted)}";
36
36
 
37
- var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
37
+ var __getOwnPropDesc$l = Object.getOwnPropertyDescriptor;
38
38
  var __typeError$5 = (msg) => {
39
39
  throw TypeError(msg);
40
40
  };
41
- var __decorateClass$l = (decorators, target, key, kind) => {
42
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
41
+ var __decorateClass$m = (decorators, target, key, kind) => {
42
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$l(target, key) : target;
43
43
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
44
44
  if (decorator = decorators[i])
45
45
  result = (decorator(result)) || result;
@@ -78,23 +78,23 @@ updateVisibility_fn = function() {
78
78
  this.interactiveElement.subtle = true;
79
79
  this.interactiveElement.ariaCurrent = this.isLast() ? "page" : null;
80
80
  };
81
- OdxBreadcrumbItemComponent = __decorateClass$l([
81
+ OdxBreadcrumbItemComponent = __decorateClass$m([
82
82
  customElement("odx-breadcrumb-item", [styles$g])
83
83
  ], OdxBreadcrumbItemComponent);
84
84
 
85
85
  const styles$f = ":host{--_breadcrumb-gap: var(--odx-size-37);display:flex;column-gap:var(--_breadcrumb-gap);flex-wrap:wrap;cursor:default;place-items:center;padding-inline:var(--odx-size-37);margin-block:var(--odx-size-37)}::slotted(odx-breadcrumb-item){gap:var(--_breadcrumb-gap)}";
86
86
 
87
- var __defProp$g = Object.defineProperty;
88
- var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
87
+ var __defProp$h = Object.defineProperty;
88
+ var __getOwnPropDesc$k = Object.getOwnPropertyDescriptor;
89
89
  var __typeError$4 = (msg) => {
90
90
  throw TypeError(msg);
91
91
  };
92
- var __decorateClass$k = (decorators, target, key, kind) => {
93
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
92
+ var __decorateClass$l = (decorators, target, key, kind) => {
93
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$k(target, key) : target;
94
94
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
95
95
  if (decorator = decorators[i])
96
96
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
97
- if (kind && result) __defProp$g(target, key, result);
97
+ if (kind && result) __defProp$h(target, key, result);
98
98
  return result;
99
99
  };
100
100
  var __accessCheck$4 = (obj, member, msg) => member.has(obj) || __typeError$4("Cannot " + msg);
@@ -133,35 +133,35 @@ updateContext_fn = async function() {
133
133
  item.ariaHidden = toAriaBooleanAttribute(this.max < 2 || visibleItems.length === items.length);
134
134
  }
135
135
  };
136
- __decorateClass$k([
136
+ __decorateClass$l([
137
137
  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true })
138
138
  ], OdxBreadcrumbComponent.prototype, "items", 2);
139
- __decorateClass$k([
139
+ __decorateClass$l([
140
140
  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "fallback" })
141
141
  ], OdxBreadcrumbComponent.prototype, "fallbackItems", 2);
142
- __decorateClass$k([
142
+ __decorateClass$l([
143
143
  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "root" })
144
144
  ], OdxBreadcrumbComponent.prototype, "rootItems", 2);
145
- __decorateClass$k([
145
+ __decorateClass$l([
146
146
  property({ type: Number })
147
147
  ], OdxBreadcrumbComponent.prototype, "max", 2);
148
- OdxBreadcrumbComponent = __decorateClass$k([
148
+ OdxBreadcrumbComponent = __decorateClass$l([
149
149
  customElement("odx-breadcrumb", [styles$f])
150
150
  ], OdxBreadcrumbComponent);
151
151
 
152
- const styles$e = ":host{--_color-fill: var(--odx-color-neutral-rest);--_color-fill-hover: var(--odx-color-neutral-hover);--_color-fill-pressed: var(--odx-color-neutral-down);--_color-text: inherit;--_color-border: transparent;--_color-border-hover: transparent;--_color-border-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,: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;background:transparent;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-border);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-fill);color:var(--_color-text);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)}:host::part(spinner){--_size: var(--odx-size-50);color:var(--_color-text);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-fill: var(--_color-fill-hover);--_color-border: var(--_color-border-hover)}:host(:active)::part(anchor){--_color-fill: var(--_color-fill-pressed);--_color-border: var(--_color-border-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"]))::part(anchor){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);--_color-border: var(--odx-color-disabled-stroke);cursor:not-allowed;box-shadow:none}:host(:not([variant]):not([disabled])){box-shadow:0 1px 2px #0c0c0c1a;--_color-border: var(--odx-color-outline-neutral);--_color-border-hover: var(--odx-color-outline-neutral-hover);--_color-border-pressed: var(--odx-color-outline-neutral-down)}:host,:host([variant=\"primary\"]){--_color-fill: var(--odx-color-primary-rest);--_color-fill-hover: var(--odx-color-primary-hover);--_color-fill-pressed: var(--odx-color-primary-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-fill: var(--odx-color-highlight-rest);--_color-fill-hover: var(--odx-color-highlight-hover);--_color-fill-pressed: var(--odx-color-highlight-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host([variant=\"secondary\"]){--_color-fill: var(--odx-experience-color-secondary-rest);--_color-fill-hover: var(--odx-experience-color-secondary-hover);--_color-fill-pressed: var(--odx-experience-color-secondary-pressed);--_color-text: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-fill: var(--odx-color-transparent);--_color-text: var(--odx-color-foreground);--_color-fill-hover: var(--odx-color-transparent-hover);--_color-fill-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-fill: var(--odx-color-danger-rest);--_color-fill-hover: var(--odx-color-danger-hover);--_color-fill-pressed: var(--odx-color-danger-pressed);--_color-text: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-fill: var(--odx-color-success-rest);--_color-fill-hover: var(--odx-color-success-hover);--_color-fill-pressed: var(--odx-color-success-pressed);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-fill: var(--odx-color-confirmation-rest);--_color-fill-hover: var(--odx-color-confirmation-hover);--_color-fill-pressed: var(--odx-color-confirmation-pressed);--_color-text: 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}: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}::slotted(odx-icon){font-size:var(--_icon-size)!important;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}";
152
+ const styles$e = ":host{--_color-fill: var(--odx-color-neutral-rest);--_color-fill-hover: var(--odx-color-neutral-hover);--_color-fill-pressed: var(--odx-color-neutral-down);--_color-text: inherit;--_color-border: transparent;--_color-border-hover: transparent;--_color-border-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);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;background:transparent;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-border);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-fill);color:var(--_color-text);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-text);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-fill: var(--_color-fill-hover);--_color-border: var(--_color-border-hover)}:host(:active)::part(anchor){--_color-fill: var(--_color-fill-pressed);--_color-border: var(--_color-border-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([disabled]:not([disabled=\"false\"]))::part(anchor){--_color-fill: var(--odx-color-disabled-fill);--_color-text: var(--odx-color-disabled-foreground);--_color-border: var(--odx-color-disabled-stroke);cursor:not-allowed}:host(:not([variant]):not([disabled])){--_color-border: var(--odx-color-outline-neutral);--_color-border-hover: var(--odx-color-outline-neutral-hover);--_color-border-pressed: var(--odx-color-outline-neutral-down)}:host([variant=\"primary\"]){--_color-fill: var(--odx-color-primary-rest);--_color-fill-hover: var(--odx-color-primary-hover);--_color-fill-pressed: var(--odx-color-primary-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host([variant=\"highlight\"]){--_color-fill: var(--odx-color-highlight-rest);--_color-fill-hover: var(--odx-color-highlight-hover);--_color-fill-pressed: var(--odx-color-highlight-pressed);--_color-text: var(--odx-color-foreground-inverse)}:host,:host([variant=\"secondary\"]){--_color-fill: var(--odx-experience-color-secondary-rest);--_color-fill-hover: var(--odx-experience-color-secondary-hover);--_color-fill-pressed: var(--odx-experience-color-secondary-pressed);--_color-text: var(--odx-experience-color-secondary-foreground)}:host([variant=\"ghost\"]){--_color-fill: var(--odx-color-transparent);--_color-text: var(--odx-color-foreground);--_color-fill-hover: var(--odx-color-transparent-hover);--_color-fill-pressed: var(--odx-color-transparent-pressed)}:host([variant=\"danger\"]){--_color-fill: var(--odx-color-danger-rest);--_color-fill-hover: var(--odx-color-danger-hover);--_color-fill-pressed: var(--odx-color-danger-pressed);--_color-text: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-fill: var(--odx-color-success-rest);--_color-fill-hover: var(--odx-color-success-hover);--_color-fill-pressed: var(--odx-color-success-pressed);--_color-text: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-fill: var(--odx-color-confirmation-rest);--_color-fill-hover: var(--odx-color-confirmation-hover);--_color-fill-pressed: var(--odx-color-confirmation-pressed);--_color-text: 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){font-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}";
153
153
 
154
- var __defProp$f = Object.defineProperty;
155
- var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
154
+ var __defProp$g = Object.defineProperty;
155
+ var __getOwnPropDesc$j = Object.getOwnPropertyDescriptor;
156
156
  var __typeError$3 = (msg) => {
157
157
  throw TypeError(msg);
158
158
  };
159
- var __decorateClass$j = (decorators, target, key, kind) => {
160
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
159
+ var __decorateClass$k = (decorators, target, key, kind) => {
160
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$j(target, key) : target;
161
161
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
162
162
  if (decorator = decorators[i])
163
163
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
164
- if (kind && result) __defProp$f(target, key, result);
164
+ if (kind && result) __defProp$g(target, key, result);
165
165
  return result;
166
166
  };
167
167
  var __accessCheck$3 = (obj, member, msg) => member.has(obj) || __typeError$3("Cannot " + msg);
@@ -188,7 +188,6 @@ let OdxButtonElement = class extends WithLoadingState(BaseLink) {
188
188
  <slot name="start"></slot>
189
189
  <slot></slot>
190
190
  <slot name="end"></slot>
191
- ${when(this.loading, () => html`<odx-loading-indicator part="spinner"></odx-loading-indicator>`)}
192
191
  `;
193
192
  }
194
193
  };
@@ -206,6 +205,7 @@ renderButton_fn = function() {
206
205
  @click=${__privateMethod$2(this, _OdxButtonElement_instances, handleClick_fn)}
207
206
  >
208
207
  ${this.renderContent()}
208
+ ${when(this.loading, () => html`<odx-loading-indicator class="spinner"></odx-loading-indicator>`)}
209
209
  </button>`;
210
210
  };
211
211
  handleClick_fn = function(_event) {
@@ -219,16 +219,16 @@ handleClick_fn = function(_event) {
219
219
  }
220
220
  };
221
221
  OdxButtonElement.formAssociated = true;
222
- __decorateClass$j([
222
+ __decorateClass$k([
223
223
  property({ reflect: true })
224
224
  ], OdxButtonElement.prototype, "size", 2);
225
- __decorateClass$j([
225
+ __decorateClass$k([
226
226
  property({ reflect: true })
227
227
  ], OdxButtonElement.prototype, "variant", 2);
228
- __decorateClass$j([
228
+ __decorateClass$k([
229
229
  property()
230
230
  ], OdxButtonElement.prototype, "type", 2);
231
- OdxButtonElement = __decorateClass$j([
231
+ OdxButtonElement = __decorateClass$k([
232
232
  customElement("odx-button", [styles$e])
233
233
  ], OdxButtonElement);
234
234
 
@@ -248,16 +248,16 @@ const ButtonVariant = {
248
248
  CONFIRMATION: "confirmation"
249
249
  };
250
250
 
251
- const styles$d = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}:host([block]){display:flex;::slotted(odx-button){width:100%}}:host([connected]){--_gap: 0;::slotted(odx-button:not(:first-of-type):not(:last-of-type)){border-radius:0}}:host([vertical]){--_direction: column;::slotted(odx-button){margin-block:0}}:host([connected]:not([vertical])){::slotted(odx-button:first-of-type:not(:last-of-type)){border-start-end-radius:0;border-end-end-radius:0}::slotted(odx-button:last-of-type:not(:first-of-type)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(odx-button:first-of-type){border-end-start-radius:0;border-end-end-radius:0}::slotted(odx-button:last-of-type){border-start-start-radius:0;border-start-end-radius:0}}";
251
+ const styles$d = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button):not(:first-of-type):not(:last-of-type)){border-radius:0}::slotted(:is(odx-button,odx-icon-button):focus-within){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button):first-of-type:not(:last-of-type)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button):last-of-type:not(:first-of-type)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button):first-of-type){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button):last-of-type){border-start-start-radius:0;border-start-end-radius:0}}";
252
252
 
253
- var __defProp$e = Object.defineProperty;
254
- var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
255
- var __decorateClass$i = (decorators, target, key, kind) => {
256
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
253
+ var __defProp$f = Object.defineProperty;
254
+ var __getOwnPropDesc$i = Object.getOwnPropertyDescriptor;
255
+ var __decorateClass$j = (decorators, target, key, kind) => {
256
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$i(target, key) : target;
257
257
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
258
258
  if (decorator = decorators[i])
259
259
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
260
- if (kind && result) __defProp$e(target, key, result);
260
+ if (kind && result) __defProp$f(target, key, result);
261
261
  return result;
262
262
  };
263
263
  let OdxButtonGroupComponent = class extends CustomElement {
@@ -268,26 +268,26 @@ let OdxButtonGroupComponent = class extends CustomElement {
268
268
  this.vertical = false;
269
269
  }
270
270
  };
271
- __decorateClass$i([
271
+ __decorateClass$j([
272
272
  property({ type: Boolean, reflect: true })
273
273
  ], OdxButtonGroupComponent.prototype, "block", 2);
274
- __decorateClass$i([
274
+ __decorateClass$j([
275
275
  property({ type: Boolean, reflect: true })
276
276
  ], OdxButtonGroupComponent.prototype, "connected", 2);
277
- __decorateClass$i([
277
+ __decorateClass$j([
278
278
  property({ type: Boolean, reflect: true })
279
279
  ], OdxButtonGroupComponent.prototype, "vertical", 2);
280
- OdxButtonGroupComponent = __decorateClass$i([
280
+ OdxButtonGroupComponent = __decorateClass$j([
281
281
  customElement("odx-button-group", [styles$d])
282
282
  ], OdxButtonGroupComponent);
283
283
 
284
- var __defProp$d = Object.defineProperty;
285
- var __decorateClass$h = (decorators, target, key, kind) => {
284
+ var __defProp$e = Object.defineProperty;
285
+ var __decorateClass$i = (decorators, target, key, kind) => {
286
286
  var result = void 0 ;
287
287
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
288
288
  if (decorator = decorators[i])
289
289
  result = (decorator(target, key, result) ) || result;
290
- if (result) __defProp$d(target, key, result);
290
+ if (result) __defProp$e(target, key, result);
291
291
  return result;
292
292
  };
293
293
  class FormatComponent extends IsLocalized(CustomElement) {
@@ -305,18 +305,18 @@ class FormatComponent extends IsLocalized(CustomElement) {
305
305
  return html`${this.fallbackValue ?? nothing}`;
306
306
  }
307
307
  }
308
- __decorateClass$h([
308
+ __decorateClass$i([
309
309
  property()
310
310
  ], FormatComponent.prototype, "fallbackValue");
311
311
 
312
- var __defProp$c = Object.defineProperty;
313
- var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
314
- var __decorateClass$g = (decorators, target, key, kind) => {
315
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
312
+ var __defProp$d = Object.defineProperty;
313
+ var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
314
+ var __decorateClass$h = (decorators, target, key, kind) => {
315
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
316
316
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
317
317
  if (decorator = decorators[i])
318
318
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
319
- if (kind && result) __defProp$c(target, key, result);
319
+ if (kind && result) __defProp$d(target, key, result);
320
320
  return result;
321
321
  };
322
322
  let OdxFormatBytesComponent = class extends FormatComponent {
@@ -339,24 +339,24 @@ OdxFormatBytesComponent.UNIT_PREFIXES = {
339
339
  bit: ["bit", "kilobit", "megabit", "gigabit", "terabit"],
340
340
  byte: ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"]
341
341
  };
342
- __decorateClass$g([
342
+ __decorateClass$h([
343
343
  property({ type: Number })
344
344
  ], OdxFormatBytesComponent.prototype, "value", 2);
345
- __decorateClass$g([
345
+ __decorateClass$h([
346
346
  property()
347
347
  ], OdxFormatBytesComponent.prototype, "unit", 2);
348
- OdxFormatBytesComponent = __decorateClass$g([
348
+ OdxFormatBytesComponent = __decorateClass$h([
349
349
  customElement("odx-format-bytes")
350
350
  ], OdxFormatBytesComponent);
351
351
 
352
- var __defProp$b = Object.defineProperty;
353
- var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
354
- var __decorateClass$f = (decorators, target, key, kind) => {
355
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
352
+ var __defProp$c = Object.defineProperty;
353
+ var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
354
+ var __decorateClass$g = (decorators, target, key, kind) => {
355
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
356
356
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
357
357
  if (decorator = decorators[i])
358
358
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
359
- if (kind && result) __defProp$b(target, key, result);
359
+ if (kind && result) __defProp$c(target, key, result);
360
360
  return result;
361
361
  };
362
362
  let OdxFormatDateComponent = class extends FormatComponent {
@@ -370,24 +370,24 @@ let OdxFormatDateComponent = class extends FormatComponent {
370
370
  return this.formatDate(value, { dateStyle: this.dateStyle });
371
371
  }
372
372
  };
373
- __decorateClass$f([
373
+ __decorateClass$g([
374
374
  property()
375
375
  ], OdxFormatDateComponent.prototype, "value", 2);
376
- __decorateClass$f([
376
+ __decorateClass$g([
377
377
  property()
378
378
  ], OdxFormatDateComponent.prototype, "dateStyle", 2);
379
- OdxFormatDateComponent = __decorateClass$f([
379
+ OdxFormatDateComponent = __decorateClass$g([
380
380
  customElement("odx-format-date")
381
381
  ], OdxFormatDateComponent);
382
382
 
383
- var __defProp$a = Object.defineProperty;
384
- var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
385
- var __decorateClass$e = (decorators, target, key, kind) => {
386
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
383
+ var __defProp$b = Object.defineProperty;
384
+ var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
385
+ var __decorateClass$f = (decorators, target, key, kind) => {
386
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
387
387
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
388
388
  if (decorator = decorators[i])
389
389
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
390
- if (kind && result) __defProp$a(target, key, result);
390
+ if (kind && result) __defProp$b(target, key, result);
391
391
  return result;
392
392
  };
393
393
  let OdxFormatNumberComponent = class extends FormatComponent {
@@ -403,48 +403,48 @@ let OdxFormatNumberComponent = class extends FormatComponent {
403
403
  });
404
404
  }
405
405
  };
406
- __decorateClass$e([
406
+ __decorateClass$f([
407
407
  property({ type: Number })
408
408
  ], OdxFormatNumberComponent.prototype, "value", 2);
409
- __decorateClass$e([
409
+ __decorateClass$f([
410
410
  property()
411
411
  ], OdxFormatNumberComponent.prototype, "currency", 2);
412
- __decorateClass$e([
412
+ __decorateClass$f([
413
413
  property()
414
414
  ], OdxFormatNumberComponent.prototype, "currencyDisplay", 2);
415
- __decorateClass$e([
415
+ __decorateClass$f([
416
416
  property({ type: Number })
417
417
  ], OdxFormatNumberComponent.prototype, "minimumFractionDigits", 2);
418
- __decorateClass$e([
418
+ __decorateClass$f([
419
419
  property({ type: Number })
420
420
  ], OdxFormatNumberComponent.prototype, "maximumFractionDigits", 2);
421
- __decorateClass$e([
421
+ __decorateClass$f([
422
422
  property({ type: Number })
423
423
  ], OdxFormatNumberComponent.prototype, "minimumIntegerDigits", 2);
424
- __decorateClass$e([
424
+ __decorateClass$f([
425
425
  property()
426
426
  ], OdxFormatNumberComponent.prototype, "type", 2);
427
- __decorateClass$e([
427
+ __decorateClass$f([
428
428
  property()
429
429
  ], OdxFormatNumberComponent.prototype, "unit", 2);
430
- __decorateClass$e([
430
+ __decorateClass$f([
431
431
  property()
432
432
  ], OdxFormatNumberComponent.prototype, "unitDisplay", 2);
433
- OdxFormatNumberComponent = __decorateClass$e([
433
+ OdxFormatNumberComponent = __decorateClass$f([
434
434
  customElement("odx-format-number")
435
435
  ], OdxFormatNumberComponent);
436
436
 
437
- var __defProp$9 = Object.defineProperty;
438
- var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
437
+ var __defProp$a = Object.defineProperty;
438
+ var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
439
439
  var __typeError$2 = (msg) => {
440
440
  throw TypeError(msg);
441
441
  };
442
- var __decorateClass$d = (decorators, target, key, kind) => {
443
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
442
+ var __decorateClass$e = (decorators, target, key, kind) => {
443
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
444
444
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
445
445
  if (decorator = decorators[i])
446
446
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
447
- if (kind && result) __defProp$9(target, key, result);
447
+ if (kind && result) __defProp$a(target, key, result);
448
448
  return result;
449
449
  };
450
450
  var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
@@ -489,30 +489,30 @@ setupSyncInterval_fn = function() {
489
489
  if (typeof this.syncInterval !== "number") return;
490
490
  __privateSet$1(this, _syncInterval, window.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3)));
491
491
  };
492
- __decorateClass$d([
492
+ __decorateClass$e([
493
493
  property()
494
494
  ], OdxRelativeTimeComponent.prototype, "value", 2);
495
- __decorateClass$d([
495
+ __decorateClass$e([
496
496
  property()
497
497
  ], OdxRelativeTimeComponent.prototype, "format", 2);
498
- __decorateClass$d([
498
+ __decorateClass$e([
499
499
  property()
500
500
  ], OdxRelativeTimeComponent.prototype, "minUnit", 2);
501
- __decorateClass$d([
501
+ __decorateClass$e([
502
502
  property()
503
503
  ], OdxRelativeTimeComponent.prototype, "numeric", 2);
504
- __decorateClass$d([
504
+ __decorateClass$e([
505
505
  property({ type: Number })
506
506
  ], OdxRelativeTimeComponent.prototype, "syncInterval", 2);
507
- OdxRelativeTimeComponent = __decorateClass$d([
507
+ OdxRelativeTimeComponent = __decorateClass$e([
508
508
  customElement("odx-relative-time")
509
509
  ], OdxRelativeTimeComponent);
510
510
 
511
511
  const styles$c = "::slotted(odx-separator){--block-space: var(--odx-size-50);--inline-space: 0}:host{display:flex;block-size:100%;gap:var(--odx-size-75)}";
512
512
 
513
- var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
514
- var __decorateClass$c = (decorators, target, key, kind) => {
515
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
513
+ var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
514
+ var __decorateClass$d = (decorators, target, key, kind) => {
515
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
516
516
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
517
517
  if (decorator = decorators[i])
518
518
  result = (decorator(result)) || result;
@@ -524,20 +524,20 @@ let OdxHeaderActionsComponent = class extends CustomElement {
524
524
  this.slot = "actions";
525
525
  }
526
526
  };
527
- OdxHeaderActionsComponent = __decorateClass$c([
527
+ OdxHeaderActionsComponent = __decorateClass$d([
528
528
  customElement("odx-header-actions", [styles$c])
529
529
  ], OdxHeaderActionsComponent);
530
530
 
531
531
  const styles$b = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--_font-weight);line-height:var(--_line-height);color:inherit}:host,:host([size=\"xs\"]){--_font-size: var(--odx-breakpoint-font-size-heading-6);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-6)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-heading-5);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-5)}:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-heading-4);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-4)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-heading-3);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-3)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-2);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-2)}:host([size=\"xxl\"]){--_font-size: var(--odx-breakpoint-font-size-heading-1);--_font-weight: var(--odx-typography-font-weight-semibold);--_line-height: var(--odx-breakpoint-line-height-heading-1)}";
532
532
 
533
- var __defProp$8 = Object.defineProperty;
534
- var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
535
- var __decorateClass$b = (decorators, target, key, kind) => {
536
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
533
+ var __defProp$9 = Object.defineProperty;
534
+ var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
535
+ var __decorateClass$c = (decorators, target, key, kind) => {
536
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
537
537
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
538
538
  if (decorator = decorators[i])
539
539
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
540
- if (kind && result) __defProp$8(target, key, result);
540
+ if (kind && result) __defProp$9(target, key, result);
541
541
  return result;
542
542
  };
543
543
  let OdxTitleComponent = class extends CustomElement {
@@ -548,10 +548,10 @@ let OdxTitleComponent = class extends CustomElement {
548
548
  }
549
549
  }
550
550
  };
551
- __decorateClass$b([
551
+ __decorateClass$c([
552
552
  property({ reflect: true })
553
553
  ], OdxTitleComponent.prototype, "size", 2);
554
- OdxTitleComponent = __decorateClass$b([
554
+ OdxTitleComponent = __decorateClass$c([
555
555
  requestUpdateOnAriaChange(["ariaLevel"]),
556
556
  customElement("odx-title", [styles$b])
557
557
  ], OdxTitleComponent);
@@ -567,17 +567,17 @@ const TitleSize = {
567
567
 
568
568
  const styles$a = ":host{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-foreground-light);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-75);place-items:center;box-shadow:0 0 0 100vmax var(--odx-color-foreground-light);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){width:max-content}::slotted(odx-main-menu-button){margin-inline-end:calc(-1 * var(--odx-size-75))}::slotted(odx-header-actions){margin-inline-start:auto}@media screen and (max-width: 600px){odx-logo{display:none}}";
569
569
 
570
- var __defProp$7 = Object.defineProperty;
571
- var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
570
+ var __defProp$8 = Object.defineProperty;
571
+ var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
572
572
  var __typeError$1 = (msg) => {
573
573
  throw TypeError(msg);
574
574
  };
575
- var __decorateClass$a = (decorators, target, key, kind) => {
576
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
575
+ var __decorateClass$b = (decorators, target, key, kind) => {
576
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
577
577
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
578
578
  if (decorator = decorators[i])
579
579
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
580
- if (kind && result) __defProp$7(target, key, result);
580
+ if (kind && result) __defProp$8(target, key, result);
581
581
  return result;
582
582
  };
583
583
  var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
@@ -610,23 +610,23 @@ let OdxHeaderComponent = class extends CustomElement {
610
610
  }
611
611
  };
612
612
  _handleSlotChange$1 = new WeakMap();
613
- __decorateClass$a([
613
+ __decorateClass$b([
614
614
  queryAssignedElements({ selector: OdxTitleComponent.selector, flatten: true })
615
615
  ], OdxHeaderComponent.prototype, "titleElements", 2);
616
- OdxHeaderComponent = __decorateClass$a([
616
+ OdxHeaderComponent = __decorateClass$b([
617
617
  customElement("odx-header", [styles$a])
618
618
  ], OdxHeaderComponent);
619
619
 
620
620
  const styles$9 = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-display-sm);--_line-height: var(--odx-breakpoint-line-height-display-sm)}:host,:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-display-md);--_line-height: var(--odx-breakpoint-line-height-display-md)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-display-lg);--_line-height: var(--odx-breakpoint-line-height-display-lg)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-display-xl);--_line-height: var(--odx-breakpoint-line-height-display-xl)}";
621
621
 
622
- var __defProp$6 = Object.defineProperty;
623
- var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
624
- var __decorateClass$9 = (decorators, target, key, kind) => {
625
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
622
+ var __defProp$7 = Object.defineProperty;
623
+ var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
624
+ var __decorateClass$a = (decorators, target, key, kind) => {
625
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
626
626
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
627
627
  if (decorator = decorators[i])
628
628
  result = (kind ? decorator(target, key, result) : decorator(result)) || result;
629
- if (kind && result) __defProp$6(target, key, result);
629
+ if (kind && result) __defProp$7(target, key, result);
630
630
  return result;
631
631
  };
632
632
  let OdxHeadlineComponent = class extends CustomElement {
@@ -637,10 +637,10 @@ let OdxHeadlineComponent = class extends CustomElement {
637
637
  }
638
638
  }
639
639
  };
640
- __decorateClass$9([
640
+ __decorateClass$a([
641
641
  property({ reflect: true })
642
642
  ], OdxHeadlineComponent.prototype, "size", 2);
643
- OdxHeadlineComponent = __decorateClass$9([
643
+ OdxHeadlineComponent = __decorateClass$a([
644
644
  requestUpdateOnAriaChange(["ariaLevel"]),
645
645
  customElement("odx-headline", [styles$9])
646
646
  ], OdxHeadlineComponent);
@@ -652,7 +652,31 @@ const HeadlineSize = {
652
652
  XL: "xl"
653
653
  };
654
654
 
655
- const styles$8 = "@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}:host::part(dot){background-color:currentColor;border-radius:50%;block-size:var(--_size);inline-size:var(--_size);z-index:3;animation:loading-indicator-animation var(--_animation-duration) var(--_animation-delay) infinite var(--_animation-timing-function) forwards}:host::part(last){--_animation-delay: 0s}:host::part(middle){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}:host::part(first){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}";
655
+ var __defProp$6 = Object.defineProperty;
656
+ var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
657
+ var __decorateClass$9 = (decorators, target, key, kind) => {
658
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
659
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
660
+ if (decorator = decorators[i])
661
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
662
+ if (kind && result) __defProp$6(target, key, result);
663
+ return result;
664
+ };
665
+ let OdxIconButtonComponent = class extends OdxButtonElement {
666
+ renderContent() {
667
+ return html`
668
+ <odx-icon name=${optionalAttr(this.icon)}></odx-icon>
669
+ `;
670
+ }
671
+ };
672
+ __decorateClass$9([
673
+ property()
674
+ ], OdxIconButtonComponent.prototype, "icon", 2);
675
+ OdxIconButtonComponent = __decorateClass$9([
676
+ customElement("odx-icon-button")
677
+ ], OdxIconButtonComponent);
678
+
679
+ const styles$8 = "@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}:host::part(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}:host::part(last){--_animation-delay: 0s}:host::part(middle){--_animation-delay: calc(-1 * var(--_animation-duration) / 12)}:host::part(first){--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}";
656
680
 
657
681
  var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
658
682
  var __decorateClass$8 = (decorators, target, key, kind) => {
@@ -1072,4 +1096,4 @@ OdxVisuallyHiddenComponent = __decorateClass([
1072
1096
  customElement("odx-visually-hidden", [styles])
1073
1097
  ], OdxVisuallyHiddenComponent);
1074
1098
 
1075
- export { BaseLink, ButtonSize, ButtonVariant, HeadlineSize, LogoSize, OdxBreadcrumbComponent, OdxBreadcrumbItemComponent, OdxButtonElement, OdxButtonGroupComponent, OdxFormatBytesComponent, OdxFormatDateComponent, OdxFormatNumberComponent, OdxHeaderActionsComponent, OdxHeaderComponent, OdxHeadlineComponent, OdxLinkComponent, OdxLoadingIndicatorComponent, OdxLogoComponent, OdxPageComponent, OdxPageLayoutComponent, OdxRelativeTimeComponent, OdxSearchBarComponent, OdxSeparatorComponent, OdxStackComponent, OdxTextComponent, OdxTitleComponent, OdxVisuallyHiddenComponent, PageAlignment, PageLayout, SearchBarBehavior, SearchEvent, StackAlignItems, StackGap, StackJustifyContent, TextSize, TextVariant, TitleSize };
1099
+ export { BaseLink, ButtonSize, ButtonVariant, HeadlineSize, LogoSize, OdxBreadcrumbComponent, OdxBreadcrumbItemComponent, OdxButtonElement, OdxButtonGroupComponent, OdxFormatBytesComponent, OdxFormatDateComponent, OdxFormatNumberComponent, OdxHeaderActionsComponent, OdxHeaderComponent, OdxHeadlineComponent, OdxIconButtonComponent, OdxLinkComponent, OdxLoadingIndicatorComponent, OdxLogoComponent, OdxPageComponent, OdxPageLayoutComponent, OdxRelativeTimeComponent, OdxSearchBarComponent, OdxSeparatorComponent, OdxStackComponent, OdxTextComponent, OdxTitleComponent, OdxVisuallyHiddenComponent, PageAlignment, PageLayout, SearchBarBehavior, SearchEvent, StackAlignItems, StackGap, StackJustifyContent, TextSize, TextVariant, TitleSize };
package/dist/elements/main-menu/elements/main-menu-button.element.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"main-menu-button.element.d.ts","sourceRoot":"","sources":["../../../../src/elements/main-menu/elements/main-menu-button.element.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,wBAAwB,CAAC;KAClD;CACF;AAED,qBACa,wBAAyB,SAAQ,aAAa;;cACtC,MAAM,IAAI,cAAc;CAW5C"}
1
+ {"version":3,"file":"main-menu-button.element.d.ts","sourceRoot":"","sources":["../../../../src/elements/main-menu/elements/main-menu-button.element.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,wBAAwB,CAAC;KAClD;CACF;AAED,qBACa,wBAAyB,SAAQ,aAAa;;cACtC,MAAM,IAAI,cAAc;CAU5C"}
package/dist/elements.js CHANGED
@@ -1234,9 +1234,8 @@ let OdxMainMenuButtonElement = class extends CustomElement {
1234
1234
  }
1235
1235
  render() {
1236
1236
  return html`
1237
- <odx-button aria-label="Open main menu" variant="ghost" @click=${__privateGet$9(this, _handleClick$2)}>
1238
- <odx-icon name="menu"></odx-icon>
1239
- </odx-button>
1237
+ <odx-icon-button aria-label="Open main menu" icon="menu" variant="ghost" @click=${__privateGet$9(this, _handleClick$2)}>
1238
+ </odx-icon-button>
1240
1239
  `;
1241
1240
  }
1242
1241
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@odx/foundation",
3
3
  "description": "A library of Web Component building blocks for ODX",
4
- "version": "0.1.0-alpha.0",
4
+ "version": "0.1.0-alpha.1",
5
5
  "author": "Drägerwerk AG & Co.KGaA",
6
6
  "license": "SEE LICENSE IN LICENSE",
7
7
  "homepage": "https://odx.draeger.com",