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

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.component.d.ts","sourceRoot":"","sources":["../../../components/accordion/accordion.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuC,MAAM,iBAAiB,CAAC;AACrF,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAkB,MAAM,KAAK,CAAC;AAE/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAG3E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,qBAAqB,CAAC;KACxC;CACF;AAED,qBACa,qBAAsB,SAAQ,aAAa;;IAEtD,OAAO,CAAC,QAAQ,CAAiC;IAGjD,QAAQ,UAAS;;IAYjB,SAAS,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,GAAG,cAAc,EAAE,KAAK,CAAC,2BAA2B,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,IAAI;cAO5F,OAAO,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;cAQpC,MAAM,IAAI,cAAc;CAwB5C"}

package/dist/components/accordion/accordion.component.js

@@ -0,0 +1,83 @@
+import { CustomElement, getKeyboardEventInfo, customElement } from '@odx/foundation';
+import { isServer, html } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import { OdxAccordionHeaderComponent } from './accordion-header.component.js';
+import styles from './accordion.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 _handleClick, _handleExpand, _handleKeyboardEvent;
+let OdxAccordionComponent = class extends CustomElement {
+  constructor() {
+    super();
+    this.multiple = false;
+    __privateAdd(this, _handleClick, (event) => {
+      event.stopPropagation();
+      if (!(event.target instanceof OdxAccordionHeaderComponent)) return;
+      event.target.toggle();
+    });
+    __privateAdd(this, _handleExpand, (event) => {
+      event.stopPropagation();
+      if (!(event.target instanceof OdxAccordionHeaderComponent) || this.multiple) return;
+      this.toggleAll(false, event.target);
+    });
+    __privateAdd(this, _handleKeyboardEvent, (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      if (!(actions.enter || actions.space) || !(event.target instanceof OdxAccordionHeaderComponent)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (event.type === "keydown") return;
+      event.target.toggle();
+    });
+    if (!isServer) {
+      this.addEventListener("click", __privateGet(this, _handleClick));
+      this.addEventListener("expand", __privateGet(this, _handleExpand));
+      this.addEventListener("keydown", __privateGet(this, _handleKeyboardEvent));
+      this.addEventListener("keyup", __privateGet(this, _handleKeyboardEvent));
+    }
+  }
+  toggleAll(forceState, ...exceptElements) {
+    for (const control of this.controls) {
+      if (control.expanded === forceState || exceptElements.includes(control)) continue;
+      control.toggle(forceState);
+    }
+  }
+  updated(props) {
+    super.updated(props);
+    if (props.has("multiple") && !this.multiple) {
+      const expandedControls = this.controls.find((control) => control.expanded);
+      this.toggleAll(false, expandedControls);
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_handleClick = new WeakMap();
+_handleExpand = new WeakMap();
+_handleKeyboardEvent = new WeakMap();
+__decorateClass([
+  queryAssignedElements({ selector: OdxAccordionHeaderComponent.selector, flatten: true })
+], OdxAccordionComponent.prototype, "controls", 2);
+__decorateClass([
+  property({ type: Boolean })
+], OdxAccordionComponent.prototype, "multiple", 2);
+OdxAccordionComponent = __decorateClass([
+  customElement("odx-accordion", [styles])
+], OdxAccordionComponent);
+
+export { OdxAccordionComponent };

package/dist/components/accordion/index.d.ts

@@ -0,0 +1,4 @@
+export * from './accordion-header.component';
+export * from './accordion-panel.component';
+export * from './accordion.component';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/area-header/area-header.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:flex;justify-content:space-between;align-items:center;gap:var(--odx-size-150);padding:var(--odx-size-75)}.content{margin-inline-end:auto}::slotted(odx-avatar){flex:0 0 auto}";
+
+export { styles as default };

package/dist/components/area-header/area-header.component.d.ts

@@ -0,0 +1,14 @@
+import { CustomElement } from '@odx/foundation';
+import { TemplateResult } from 'lit';
+import { AreaHeaderSize, AreaHeaderVariant } from './area-header.models';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-area-header': OdxAreaHeaderComponent;
+    }
+}
+export declare class OdxAreaHeaderComponent extends CustomElement {
+    size?: AreaHeaderSize;
+    variant?: AreaHeaderVariant;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=area-header.component.d.ts.map

package/dist/components/area-header/area-header.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-header.component.d.ts","sourceRoot":"","sources":["../../../components/area-header/area-header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,sBAAsB,CAAC;KAC3C;CACF;AAED,qBACa,sBAAuB,SAAQ,aAAa;IAEvD,IAAI,CAAC,EAAE,cAAc,CAAC;IAGtB,OAAO,CAAC,EAAE,iBAAiB,CAAC;cAET,MAAM,IAAI,cAAc;CAS5C"}

package/dist/components/area-header/area-header.component.js

@@ -0,0 +1,37 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './area-header.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 OdxAreaHeaderComponent = class extends CustomElement {
+  render() {
+    return html`
+      <slot name="start"></slot>
+      <div class="content">
+        <slot></slot>
+      </div>
+      <slot name="end"></slot>
+    `;
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], OdxAreaHeaderComponent.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxAreaHeaderComponent.prototype, "variant", 2);
+OdxAreaHeaderComponent = __decorateClass([
+  customElement("odx-area-header", [styles])
+], OdxAreaHeaderComponent);
+
+export { OdxAreaHeaderComponent };

package/dist/components/area-header/area-header.models.d.ts

@@ -0,0 +1,12 @@
+export type AreaHeaderSize = (typeof AreaHeaderSize)[keyof typeof AreaHeaderSize];
+export declare const AreaHeaderSize: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+};
+export type AreaHeaderVariant = (typeof AreaHeaderVariant)[keyof typeof AreaHeaderVariant];
+export declare const AreaHeaderVariant: {
+    readonly DEFAULT: "default";
+};
+//# sourceMappingURL=area-header.models.d.ts.map

package/dist/components/area-header/area-header.models.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"area-header.models.d.ts","sourceRoot":"","sources":["../../../components/area-header/area-header.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,OAAO,cAAc,CAAC,CAAC;AAClF,eAAO,MAAM,cAAc;;;;;CAKjB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,CAAC;AAC3F,eAAO,MAAM,iBAAiB;;CAEpB,CAAC"}

package/dist/components/area-header/area-header.models.js

@@ -0,0 +1,11 @@
+const AreaHeaderSize = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+const AreaHeaderVariant = {
+  DEFAULT: "default"
+};
+
+export { AreaHeaderSize, AreaHeaderVariant };

package/dist/components/area-header/index.d.ts

@@ -0,0 +1,3 @@
+export * from './area-header.component';
+export * from './area-header.models';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/area-header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/area-header/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-background: var(--odx-avatar-background, var(--odx-experience-color-secondary-rest));--_color-foreground: inherit;--_border-radius: 50%;display:flex;flex-direction:column;place-content:center;place-items:center;position:relative;user-select:none;vertical-align:middle;overflow:clip;block-size:var(--_size);inline-size:var(--_size);margin-block:var(--_spacing);font-size:var(--_font-size);border-radius:var(--_border-radius);background-color:var(--_color-background);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,outline-color,box-shadow}:host-context(odx-avatar-group[variant=\"rectangle\"]),:host([variant=\"rectangle\"]){--_border-radius: var(--odx-border-radius-sm)}:host-context(odx-avatar-group[size=\"sm\"]),:host([size=\"sm\"]){--_size: var(--odx-size-150);--_spacing: 0;--_font-size: var(--odx-typography-font-size-1)}:host,:host-context(odx-avatar-group[size=\"md\"]),:host([size=\"md\"]){--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host-context(odx-avatar-group[size=\"lg\"]),:host([size=\"lg\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-300));--_spacing: var(--odx-size-37);--_font-size: var(--odx-typography-font-size-5)}:host-context(odx-avatar-group[size=\"xl\"]),:host([size=\"xl\"]){--_size: var(--odx-avatar-lg-size, var(--odx-size-600));--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:has(img){--odx-avatar-background: red}::slotted(img){object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}::slotted(odx-icon){font-size:inherit}";
+
+export { styles as default };

package/dist/{elements/avatar/avatar.element.d.ts → components/avatar/avatar.component.d.ts}

@@ -1,14 +1,14 @@
-import { TemplateResult } from 'lit';
 import { CustomElement } from '@odx/foundation';
-import { AvatarSize, AvatarVariant } from './models';
+import { TemplateResult } from 'lit';
+import { AvatarSize, AvatarVariant } from './avatar.models';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-avatar': OdxAvatarElement;
+        'odx-avatar': OdxAvatarComponent;
     }
 }
-export declare class OdxAvatarElement extends CustomElement {
+export declare class OdxAvatarComponent extends CustomElement {
     size?: AvatarSize;
     variant?: AvatarVariant;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=avatar.element.d.ts.map
+//# sourceMappingURL=avatar.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.component.d.ts","sourceRoot":"","sources":["../../../components/avatar/avatar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,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,qBACa,kBAAmB,SAAQ,aAAa;IAEnD,IAAI,CAAC,EAAE,UAAU,CAAC;IAGlB,OAAO,CAAC,EAAE,aAAa,CAAC;cAEL,MAAM,IAAI,cAAc;CAG5C"}

package/dist/components/avatar/avatar.component.js

@@ -0,0 +1,31 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './avatar.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 OdxAvatarComponent = class extends CustomElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], OdxAvatarComponent.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxAvatarComponent.prototype, "variant", 2);
+OdxAvatarComponent = __decorateClass([
+  customElement("odx-avatar", [styles])
+], OdxAvatarComponent);
+
+export { OdxAvatarComponent };

package/dist/components/avatar/avatar.models.d.ts

@@ -0,0 +1,13 @@
+export type AvatarSize = (typeof AvatarSize)[keyof typeof AvatarSize];
+export declare const AvatarSize: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+    readonly XL: "xl";
+};
+export type AvatarVariant = (typeof AvatarVariant)[keyof typeof AvatarVariant];
+export declare const AvatarVariant: {
+    readonly CIRCLE: "circle";
+    readonly RECTANGLE: "rectangle";
+};
+//# sourceMappingURL=avatar.models.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.models.d.ts","sourceRoot":"","sources":["../../../components/avatar/avatar.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AACtE,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAC/E,eAAO,MAAM,aAAa;;;CAGhB,CAAC"}

package/dist/components/avatar/avatar.models.js

@@ -0,0 +1,12 @@
+const AvatarSize = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+const AvatarVariant = {
+  CIRCLE: "circle",
+  RECTANGLE: "rectangle"
+};
+
+export { AvatarSize, AvatarVariant };

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './avatar.component';
+export * from './avatar.models';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}

package/dist/components/avatar-group/avatar-group.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:flex;padding-inline:var(--odx-size-25);width:min-content}::slotted(odx-avatar){flex:0 0 auto;z-index:1;border:var(--odx-border-width-thin) solid var(--odx-color-separator)}::slotted(odx-avatar:not(:first-of-type)){margin-inline-start:calc(-.33 * var(--_size))}:host(:is([size=\"lg\"],[size=\"xl\"])){gap:var(--odx-size-50)}";
+
+export { styles as default };

package/dist/components/avatar-group/avatar-group.component.d.ts

@@ -0,0 +1,14 @@
+import { CustomElement } from '@odx/foundation';
+import { TemplateResult } from 'lit';
+import { AvatarSize, AvatarVariant, OdxAvatarComponent } from '../avatar';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-avatar-group': OdxAvatarGroupComponent;
+    }
+}
+export declare class OdxAvatarGroupComponent extends CustomElement implements Pick<OdxAvatarComponent, 'size' | 'variant'> {
+    size?: AvatarSize;
+    variant?: AvatarVariant;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=avatar-group.component.d.ts.map

package/dist/components/avatar-group/avatar-group.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.component.d.ts","sourceRoot":"","sources":["../../../components/avatar-group/avatar-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAEhD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAG/E,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,uBAAuB,CAAC;KAC7C;CACF;AAED,qBACa,uBAAwB,SAAQ,aAAc,YAAW,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IAEhH,IAAI,CAAC,EAAE,UAAU,CAAC;IAGlB,OAAO,CAAC,EAAE,aAAa,CAAC;cAEL,MAAM,IAAI,cAAc;CAG5C"}

package/dist/components/avatar-group/avatar-group.component.js

@@ -0,0 +1,31 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './avatar-group.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 OdxAvatarGroupComponent = class extends CustomElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], OdxAvatarGroupComponent.prototype, "size", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxAvatarGroupComponent.prototype, "variant", 2);
+OdxAvatarGroupComponent = __decorateClass([
+  customElement("odx-avatar-group", [styles])
+], OdxAvatarGroupComponent);
+
+export { OdxAvatarGroupComponent };

package/dist/components/avatar-group/index.d.ts

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

package/dist/components/avatar-group/index.d.ts.map

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-background: var(--odx-color-surface);--_color-foreground: var(--odx-color-text);display:inline-block;line-height:0}.content{--_font-size: var(--odx-typography-font-size-1);block-size:var(--odx-size-100);line-height:var(--odx-size-100);min-inline-size:var(--odx-size-100);border-radius:var(--odx-border-radius-circle);background-color:var(--_color-background);color:var(--_color-foreground);cursor:default;user-select:none;font-weight:var(--odx-typography-font-weight-medium);padding-inline:var(--odx-size-37);text-align:center}:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-foreground: var(--odx-color-foreground-light)}:host,:host([variant=\"neutral\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host([variant=\"accent\"]){--_color-background: var(--odx-color-highlight-rest);--_color-foreground: var(--odx-color-foreground-light)}:host([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"warning\"]){--_color-background: var(--odx-color-warning-rest);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-foreground: var(--odx-color-foreground-light)}";
+
+export { styles as default };

package/dist/{elements/badge/badge.element.d.ts → components/badge/badge.component.d.ts}

@@ -1,13 +1,13 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { BadgeVariant } from './models';
+import { BadgeVariant } from './badge.models';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-badge': OdxBadgeElement;
+        'odx-badge': OdxBadgeComponent;
     }
 }
-export declare class OdxBadgeElement extends CustomElement {
+export declare class OdxBadgeComponent extends CustomElement {
     variant?: BadgeVariant;
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=badge.element.d.ts.map
+//# sourceMappingURL=badge.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../components/badge/badge.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF;AAED,qBACa,iBAAkB,SAAQ,aAAa;IAElD,OAAO,CAAC,EAAE,YAAY,CAAC;cAEJ,MAAM,IAAI,cAAc;CAO5C"}

package/dist/components/badge/badge.component.js

@@ -0,0 +1,32 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './badge.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 OdxBadgeComponent = class extends CustomElement {
+  render() {
+    return html`
+      <odx-text size="sm" highlight class="content" odxPreventTextOverflow>
+        <slot></slot>
+      </odx-text>
+    `;
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], OdxBadgeComponent.prototype, "variant", 2);
+OdxBadgeComponent = __decorateClass([
+  customElement("odx-badge", [styles])
+], OdxBadgeComponent);
+
+export { OdxBadgeComponent };

package/dist/{elements/badge/models/badge-variant.d.ts → components/badge/badge.models.d.ts}

@@ -7,4 +7,4 @@ export declare const BadgeVariant: {
     WARNING: string;
     DANGER: string;
 };
-//# sourceMappingURL=badge-variant.d.ts.map
+//# sourceMappingURL=badge.models.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.models.d.ts","sourceRoot":"","sources":["../../../components/badge/badge.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAC5E,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}

package/dist/components/badge/badge.models.js

@@ -0,0 +1,10 @@
+const BadgeVariant = {
+  NEUTRAL: "neutral",
+  PRIMARY: "primary",
+  ACCENT: "accent",
+  SUCCESS: "success",
+  WARNING: "warning",
+  DANGER: "danger"
+};
+
+export { BadgeVariant };

package/dist/components/badge/index.d.ts

@@ -0,0 +1,3 @@
+export * from './badge.component';
+export * from './badge.models';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}

package/dist/components/breadcrumb/breadcrumb-item.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:contents}.separator{--size: var(--odx-size-75);color:var(--odx-color-foreground-muted);margin:var(--odx-size-37)}:host([aria-hidden=\"true\"]){display:none}:host([aria-current=\"page\"]) ::slotted(odx-link){color:var(--odx-color-foreground-muted)!important}::slotted(*){margin:0}";
+
+export { styles as default };

package/dist/components/breadcrumb/breadcrumb-item.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,aAAa;;IAC3D,SAAS,KAAK,kBAAkB,IAAI,gBAAgB,GAAG,IAAI,CAE1D;cAEkB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK1C,MAAM,IAAI,cAAc;IAS3C,SAAS,CAAC,MAAM,IAAI,OAAO;CAS5B"}
+{"version":3,"file":"breadcrumb-item.component.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/breadcrumb-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,aAAa;;IAC3D,SAAS,KAAK,kBAAkB,IAAI,gBAAgB,GAAG,IAAI,CAE1D;cAEkB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK1C,MAAM,IAAI,cAAc;IAS3C,SAAS,CAAC,MAAM,IAAI,OAAO;CAU5B"}

package/dist/components/breadcrumb/breadcrumb-item.component.js

@@ -0,0 +1,56 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { when } from 'lit/directives/when.js';
+import styles from './breadcrumb-item.component.css.js';
+import { OdxLinkComponent } from '../link/link.component.js';
+
+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 __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 _OdxBreadcrumbItemComponent_instances, updateVisibility_fn;
+let OdxBreadcrumbItemComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxBreadcrumbItemComponent_instances);
+  }
+  get interactiveElement() {
+    return this.querySelector(OdxLinkComponent.selector);
+  }
+  updated(props) {
+    super.updated(props);
+    __privateMethod(this, _OdxBreadcrumbItemComponent_instances, updateVisibility_fn).call(this);
+  }
+  render() {
+    const isLast = this.isLast();
+    return html`
+      <slot></slot>
+      ${when(!isLast, () => html`<odx-icon class="separator" name="chevron-right"></odx-icon>`)}
+    `;
+  }
+  isLast() {
+    return this.nextElementSibling === null;
+  }
+};
+_OdxBreadcrumbItemComponent_instances = new WeakSet();
+updateVisibility_fn = function() {
+  if (this.slot === "fallback" || !this.interactiveElement) return;
+  this.interactiveElement.subtle = true;
+  this.interactiveElement.emphasized = this.isLast();
+  this.interactiveElement.ariaCurrent = this.isLast() ? "page" : null;
+};
+OdxBreadcrumbItemComponent = __decorateClass([
+  customElement("odx-breadcrumb-item", [styles])
+], OdxBreadcrumbItemComponent);
+
+export { OdxBreadcrumbItemComponent };

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_gap: var(--odx-size-37);display:flex;column-gap:var(--_gap);flex-wrap:wrap;cursor:default;place-items:center;padding-block:var(--odx-size-37);padding-inline:var(--odx-size-75);min-block-size:var(--odx-size-225)}::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
+
+export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.component.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAyC,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKrE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,sBAAsB,CAAC;KAC1C;CACF;AACD,qBACa,sBAAuB,SAAQ,aAAa;;IAEvD,OAAO,CAAC,KAAK,CAAgC;IAG7C,OAAO,CAAC,aAAa,CAAgC;IAGrD,OAAO,CAAC,SAAS,CAAgC;IAGjD,GAAG,SAAK;cAEW,MAAM,IAAI,cAAc;cAQxB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAkB9D"}
+{"version":3,"file":"breadcrumb.component.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/breadcrumb.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAyC,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKrE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,sBAAsB,CAAC;KAC1C;CACF;AACD,qBACa,sBAAuB,SAAQ,aAAa;;IAEvD,OAAO,CAAC,KAAK,CAAgC;IAG7C,OAAO,CAAC,aAAa,CAAgC;IAGrD,OAAO,CAAC,SAAS,CAAgC;IAGjD,GAAG,SAAK;cAEW,MAAM,IAAI,cAAc;cAQxB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAkB9D"}

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -0,0 +1,72 @@
+import { CustomElement, toAriaBooleanAttribute, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import { OdxBreadcrumbItemComponent } from './breadcrumb-item.component.js';
+import styles from './breadcrumb.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 _OdxBreadcrumbComponent_instances, updateContext_fn;
+let OdxBreadcrumbComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxBreadcrumbComponent_instances);
+    this.max = 5;
+  }
+  render() {
+    return html`
+      <slot name="root"></slot>
+      <slot @slotchange=${__privateMethod(this, _OdxBreadcrumbComponent_instances, updateContext_fn)} name="fallback"></slot>
+      <slot @slotchange=${__privateMethod(this, _OdxBreadcrumbComponent_instances, updateContext_fn)}></slot>
+    `;
+  }
+  updated(props) {
+    super.updated(props);
+    if (props.has("max")) {
+      __privateMethod(this, _OdxBreadcrumbComponent_instances, updateContext_fn).call(this);
+    }
+  }
+};
+_OdxBreadcrumbComponent_instances = new WeakSet();
+updateContext_fn = async function() {
+  await this.updateComplete;
+  const items = [...this.rootItems, ...this.items];
+  const visibleItems = items.filter((item, index) => item.slot === "root" || index > items.length - this.max);
+  for (const [index, item] of items.entries()) {
+    item.ariaHidden = toAriaBooleanAttribute(this.slot !== "fallback" && !(item.slot === "root" || index > items.length - this.max));
+  }
+  for (const item of this.fallbackItems) {
+    item.ariaHidden = toAriaBooleanAttribute(this.max < 2 || visibleItems.length === items.length);
+  }
+};
+__decorateClass([
+  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true })
+], OdxBreadcrumbComponent.prototype, "items", 2);
+__decorateClass([
+  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "fallback" })
+], OdxBreadcrumbComponent.prototype, "fallbackItems", 2);
+__decorateClass([
+  queryAssignedElements({ selector: OdxBreadcrumbItemComponent.selector, flatten: true, slot: "root" })
+], OdxBreadcrumbComponent.prototype, "rootItems", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxBreadcrumbComponent.prototype, "max", 2);
+OdxBreadcrumbComponent = __decorateClass([
+  customElement("odx-breadcrumb", [styles])
+], OdxBreadcrumbComponent);
+
+export { OdxBreadcrumbComponent };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC"}