@odx/foundation 0.1.0-alpha.13 → 0.1.0-alpha.14

package/dist/cdk.js

@@ -1,344 +1,5 @@
-import { dedupeMixin, createOptions, toPx, waitForAnimations, findClosestDocument, createMutationObserver, CustomElement, customElement } from '@odx/foundation';
-import { minBy } from 'es-toolkit';
-import { property, state } from 'lit/decorators.js';
-import { arrow, flip, computePosition, offset, shift, size, hide, autoUpdate } from '@floating-ui/dom';
-import { isServer, unsafeCSS, html } from 'lit';
-import { when } from 'lit/directives/when.js';
-
-var __defProp$2 = Object.defineProperty;
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$2(target, key, result);
-  return result;
-};
-const IS_DRAG_ACTIVE_ATTRIBUTE = "odx-drag-active";
-function isDraggableElement(element) {
-  if (element instanceof HTMLElement) {
-    return "isDragActive" in element;
-  }
-  return false;
-}
-const IsDraggable = dedupeMixin((superClass) => {
-  class IsDraggableElement extends superClass {
-    constructor() {
-      super(...arguments);
-      this.dragDisabled = false;
-    }
-    get isDragActive() {
-      return this.hasAttribute(IS_DRAG_ACTIVE_ATTRIBUTE);
-    }
-    dragStart() {
-      this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, true);
-    }
-    afterDragEnd() {
-      this.toggleAttribute(IS_DRAG_ACTIVE_ATTRIBUTE, false);
-    }
-  }
-  __decorateClass$2([
-    property({ type: Boolean })
-  ], IsDraggableElement.prototype, "dragDisabled");
-  return IsDraggableElement;
-});
-
-const DragControllerOptions = createOptions({
-  getDraggableElements: () => []
-});
-class DragController {
-  #host;
-  #options;
-  #dragTargets = /* @__PURE__ */ new WeakSet();
-  #listeners = /* @__PURE__ */ new Map();
-  get draggableElements() {
-    return this.#options.getDraggableElements().filter((element) => !element.dragDisabled);
-  }
-  get container() {
-    return this.#options.getContainer?.() ?? this.#host;
-  }
-  constructor(host, options) {
-    this.#host = host;
-    this.#options = DragControllerOptions(options);
-    this.#host.addController(this);
-  }
-  hostConnected() {
-    this.#host.style.touchAction = "none";
-  }
-  hostDisconnected() {
-    this.#host.style.touchAction = "";
-    for (const removeListener of this.#listeners.values()) {
-      removeListener();
-    }
-  }
-  hostUpdated() {
-    this.#dragTargets = new WeakSet(this.draggableElements);
-    this.#host.removeEventListener("pointerdown", this.#handleDragStart);
-    this.#host.addEventListener("pointerdown", this.#handleDragStart);
-  }
-  isDraggable(element) {
-    return isDraggableElement(element) && this.#dragTargets.has(element);
-  }
-  #handleDragStart = async (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    const target = this.#getDragTarget(event);
-    if (!target) return;
-    const onPointerMove = (event2) => this.#handleDragMove(event2, target);
-    const onPointerUp = (event2) => this.#handleDragEnd(event2, target);
-    target.beforeDragStart?.({ event, position: this.#calculatePosition(event) });
-    this.#host.setPointerCapture(event.pointerId);
-    this.#host.addEventListener("pointermove", onPointerMove);
-    this.#host.addEventListener("pointerup", onPointerUp, { once: true });
-    this.#listeners.set(target, () => {
-      this.#host.removeEventListener("pointermove", onPointerMove);
-      this.#host.removeEventListener("pointerup", onPointerUp);
-    });
-    await 0;
-    target.dragStart?.({ event, position: this.#calculatePosition(event) });
-  };
-  #handleDragMove = (event, target) => {
-    event.preventDefault();
-    event.stopPropagation();
-    target.dragMove?.({ event, position: this.#calculatePosition(event) });
-  };
-  #handleDragEnd = async (event, target) => {
-    event.preventDefault();
-    event.stopPropagation();
-    target.dragEnd?.({ event, position: this.#calculatePosition(event) });
-    this.#host.releasePointerCapture(event.pointerId);
-    this.#listeners.get(target)?.();
-    this.#listeners.delete(target);
-    this.#host.requestUpdate();
-    await this.#host.updateComplete;
-    target.afterDragEnd?.({ event, position: this.#calculatePosition(event) });
-  };
-  #calculatePosition(event) {
-    const { left, top, width } = this.container.getBoundingClientRect();
-    return { x: (event.clientX - left) / width * 100, y: (event.clientY - top) / width * 100 };
-  }
-  #getDragTarget(event) {
-    if (event.target === this.#host) {
-      return minBy(this.draggableElements, (element) => element.getDistance?.(this.container, event) ?? Number.MAX_SAFE_INTEGER) ?? null;
-    }
-    if (this.isDraggable(event.target)) {
-      return event.target;
-    }
-    return null;
-  }
-}
-
-const styles$1 = ":host{--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration));--_popover-offset: var(--odx-size-50);background-color:transparent;opacity:0;padding:var(--_popover-offset);position-try:flip-block,flip-inline,flip-inline flip-block;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;max-block-size:var(--_popover-max-block-size, 100%);max-inline-size:var(--_popover-max-inline-size, 100%);margin:0;top:var(--_popover-position-y);left:var(--_popover-position-x)}:host(:popover-open){display:flex;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y))}}:host,:host([placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset))}:host([placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0}:host([placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset)}:host([placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0}";
-
-const PopoverPlacement = {
-  TOP: "top",
-  TOP_START: "top-start",
-  TOP_END: "top-end",
-  RIGHT: "right",
-  RIGHT_START: "right-start",
-  RIGHT_END: "right-end",
-  BOTTOM: "bottom",
-  BOTTOM_START: "bottom-start",
-  BOTTOM_END: "bottom-end",
-  LEFT: "left",
-  LEFT_START: "left-start",
-  LEFT_END: "left-end"
-};
-const PopoverPlacementOptions = createOptions({
-  placement: PopoverPlacement.BOTTOM,
-  enableFallback: true,
-  fallbackAxisSideDirection: "end",
-  matchReferenceWidth: false,
-  offset: 0,
-  outerPadding: 24
-});
-const PopoverSide = {
-  TOP: PopoverPlacement.TOP,
-  RIGHT: PopoverPlacement.RIGHT,
-  BOTTOM: PopoverPlacement.BOTTOM,
-  LEFT: PopoverPlacement.LEFT
-};
-
-function getPopoverSide(placement) {
-  return placement.split("-")[0];
-}
-async function computePopoverPlacement(referenceElement, floatingElement, options) {
-  const { arrowElement, placement, offset: offset$1, matchReferenceWidth, enableFallback, fallbackAxisSideDirection, minHeight, outerPadding } = options;
-  const arrowSize = arrowElement?.offsetWidth ?? 0;
-  const arrowMiddleware = arrowElement ? arrow({ element: arrowElement, padding: arrowSize * 3 }) : void 0;
-  const flipMiddleWare = enableFallback ? flip({ fallbackAxisSideDirection }) : void 0;
-  const result = await computePosition(referenceElement, floatingElement, {
-    placement,
-    middleware: [
-      offset(offset$1 + arrowSize / 2),
-      shift({ padding: 0 }),
-      flipMiddleWare,
-      size({
-        padding: 0,
-        apply: ({ availableHeight, availableWidth, rects }) => {
-          floatingElement.style.setProperty("--_popover-min-inline-size", matchReferenceWidth ? toPx(rects.reference.width) : null);
-          floatingElement.style.setProperty("--_popover-max-inline-size", toPx(availableWidth));
-          floatingElement.style.setProperty("--_popover-min-block-size", minHeight ? toPx(Math.min(availableHeight, minHeight)) : null);
-          floatingElement.style.setProperty("--_popover-max-block-size", toPx(availableHeight));
-        }
-      }),
-      arrowMiddleware,
-      hide()
-    ]
-  });
-  let arrowPositionX = null;
-  let arrowPositionY = null;
-  if (arrowElement && result.middlewareData.arrow) {
-    const popoverSide = getPopoverSide(result.placement);
-    const { arrow: arrow2 } = result.middlewareData;
-    const arrowOffsetX = popoverSide === PopoverSide.LEFT ? floatingElement.offsetWidth - outerPadding - 0.5 * arrowSize : outerPadding - 0.5 * arrowSize;
-    const arrowOffsetY = popoverSide === PopoverSide.TOP ? floatingElement.offsetHeight - outerPadding - 0.5 * arrowSize : outerPadding - 0.5 * arrowSize;
-    arrowPositionX = arrow2.x ?? arrowOffsetX;
-    arrowPositionY = arrow2.y ?? arrowOffsetY;
-  }
-  floatingElement.style.setProperty("--_popover-position-x", toPx(result.x));
-  floatingElement.style.setProperty("--_popover-position-y", toPx(result.y));
-  floatingElement.style.setProperty("--_popover-arrow-position-x", toPx(arrowPositionX));
-  floatingElement.style.setProperty("--_popover-arrow-position-y", toPx(arrowPositionY));
-}
-
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp$1(target, key, result);
-  return result;
-};
-const PopoverHost = dedupeMixin((superClass) => {
-  class PopoverHostClass extends superClass {
-    // biome-ignore lint/suspicious/noExplicitAny: This is a mixin
-    constructor(...args) {
-      super(...args);
-      this.isOpen = false;
-      this.referenceElement = null;
-      this.anchor = "";
-      this.#handleToggle = async ({ newState }) => {
-        this.isOpen = newState === "open";
-        if (this.isOpen) {
-          this.onBeforePopoverShow?.();
-          await waitForAnimations(this);
-          this.onPopoverShow?.();
-        } else {
-          this.onBeforePopoverHide?.();
-          await waitForAnimations(this);
-          this.onPopoverHide?.();
-        }
-      };
-      if (!isServer) {
-        this.addEventListener("toggle", this.#handleToggle);
-      }
-    }
-    static {
-      this.styles = [superClass.styles ?? [], unsafeCSS(styles$1)];
-    }
-    #observer;
-    connectedCallback() {
-      super.connectedCallback?.();
-      this.popover ??= "auto";
-      this.#connectObserver();
-    }
-    disconnectedCallback() {
-      super.disconnectedCallback?.();
-      this.#disconnectObserver();
-    }
-    mountPopover(referenceElement) {
-      if (this.referenceElement && this.referenceElement !== referenceElement) {
-        this.unmountPopover(this.referenceElement);
-      }
-      if (!referenceElement) {
-        this.referenceElement = null;
-        return;
-      }
-      this.referenceElement = referenceElement;
-      autoUpdate(this.referenceElement, this, () => computePopoverPlacement(this.referenceElement, this, PopoverPlacementOptions()));
-    }
-    unmountPopover(referenceElement) {
-      this.hidePopover();
-    }
-    isPopoverOpen() {
-      return this.isOpen || this.matches(":popover-open");
-    }
-    togglePopover(force) {
-      const isOpen = force ?? !this.isPopoverOpen();
-      if (isOpen) {
-        this.showPopover();
-      } else {
-        this.hidePopover();
-      }
-      return isOpen;
-    }
-    #findReferenceElement(anchor) {
-      return findClosestDocument(this)?.getElementById(anchor);
-    }
-    #connectObserver() {
-      this.#disconnectObserver();
-      this.mountPopover(this.#findReferenceElement(this.anchor));
-      this.#observer = createMutationObserver(() => {
-        const referenceElement = this.anchor ? this.#findReferenceElement(this.anchor) : null;
-        if (this.referenceElement === referenceElement) return;
-        this.mountPopover(referenceElement);
-      });
-      this.#observer.observe(document.documentElement, { subtree: true, attributeFilter: ["id", "anchor"] });
-    }
-    #disconnectObserver() {
-      this.#observer?.disconnect();
-      this.#observer = void 0;
-    }
-    #handleToggle;
-  }
-  __decorateClass$1([
-    state()
-  ], PopoverHostClass.prototype, "isOpen");
-  __decorateClass$1([
-    state()
-  ], PopoverHostClass.prototype, "referenceElement");
-  __decorateClass$1([
-    property({ reflect: true })
-  ], PopoverHostClass.prototype, "anchor");
-  __decorateClass$1([
-    property({ reflect: true })
-  ], PopoverHostClass.prototype, "placement");
-  return PopoverHostClass;
-});
-
-const styles = ":host{--color-fill: transparent;--color-text: inherit;--min-block-size: inherit;--max-block-size: 100%;--min-inline-size: inherit;--max-inline-size: inherit;--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-md));display:flex;background-color:transparent}:host::part(arrow),:host::part(content){background-color:var(--color-fill)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--min-block-size);max-block-size:var(--max-block-size);min-inline-size:var(--min-inline-size);max-inline-size:var(--max-inline-size);box-shadow:var(--_shadow);color:var(--color-text);padding:var(--_outer-padding);border-radius:var(--_border-radius);z-index:2;overflow:auto}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
-
-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 OdxPopoverElement = class extends CustomElement {
-  constructor() {
-    super(...arguments);
-    this.showArrow = false;
-  }
-  render() {
-    return html`
-      <div part="content">
-        <slot></slot>
-      </div>
-      ${when(this.showArrow, () => html`<div part="arrow"></div>`)}
-    `;
-  }
-};
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OdxPopoverElement.prototype, "showArrow", 2);
-OdxPopoverElement = __decorateClass([
-  customElement("odx-popover", [styles])
-], OdxPopoverElement);
-
-export { DragController, IS_DRAG_ACTIVE_ATTRIBUTE, IsDraggable, OdxPopoverElement, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, isDraggableElement };
+export { DragController } from './cdk/drag-drop/drag.controller.js';
+export { IS_DRAG_ACTIVE_ATTRIBUTE, IsDraggable, isDraggableElement } from './cdk/drag-drop/is-draggable.js';
+export { PopoverHost } from './cdk/popover/popover-host.mixin.js';
+export { OdxPopoverElement } from './cdk/popover/popover.element.js';
+export { PopoverPlacement, PopoverPlacementOptions, PopoverSide } from './cdk/popover/popover.models.js';

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-background: var(--odx-palette-transparent);--_color-foreground: var(--odx-color-foreground);display:flex;user-select:none;place-items:center;cursor:pointer;gap:var(--odx-size-50);min-block-size:var(--odx-size-225);border-radius:var(--odx-border-radius-controls);background-color:var(--_color-background);margin-block:var(--odx-size-37);padding-block:var(--odx-size-25);padding-inline:var(--odx-size-50);color:var(--_color-foreground);transition:var(--odx-transition-default);transition-property:background-color,color,outline-color;outline:var(--odx-focus-ring-outline)}.indicator{--size: var(--odx-size-150);display:block;margin-inline-start:auto;aspect-ratio:1;transition:var(--odx-transition-slow);transition-property:transform}:host(:not([disabled]):hover){--_color-background: var(--odx-color-transparent-hover)}:host(:not([disabled]):active){--_color-background: var(--odx-color-transparent-pressed)}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-color-disabled-foreground);cursor:default}:host([aria-expanded=\"true\"]){.indicator{transform:rotateX(180deg)}}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}";
+
+export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"accordion-header.component.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion-header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAmE,MAAM,iBAAiB,CAAC;AACnI,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIrE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,2BAA2B,CAAC;KACrD;CACF;;AAED,qBACa,2BAA4B,SAAQ,gCAA+B;IAC9E,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAEQ,oBAAoB,IAAI,IAAI;IAOrC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;cAeV,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAOzC,MAAM,IAAI,cAAc;CAW5C"}
+{"version":3,"file":"accordion-header.component.d.ts","sourceRoot":"","sources":["../../../components/accordion/accordion-header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAmE,MAAM,iBAAiB,CAAC;AACnI,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIrE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,2BAA2B,CAAC;KACrD;CACF;;AAED,qBACa,2BAA4B,SAAQ,gCAA+B;IAC9E,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAEQ,oBAAoB,IAAI,IAAI;IAOrC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;cAeV,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAOzC,MAAM,IAAI,cAAc;CAW5C"}

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

@@ -0,0 +1,69 @@
+import { WithAriaControls, CustomElement, toAriaBooleanAttribute, fromAriaBooleanAttribute, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './accordion-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 OdxAccordionHeaderComponent = class extends WithAriaControls(CustomElement) {
+  set expanded(value) {
+    if (this.disabled) return;
+    this.ariaExpanded = toAriaBooleanAttribute(value);
+  }
+  get expanded() {
+    return fromAriaBooleanAttribute(this.ariaExpanded);
+  }
+  updateA11yAttributes() {
+    if (!this.region) return;
+    this.region.ariaHidden = toAriaBooleanAttribute(!this.expanded);
+    this.region.inert = !this.expanded;
+    super.updateA11yAttributes();
+  }
+  toggle(force) {
+    if (this.disabled) return;
+    const state = force ?? !this.expanded;
+    if (this.expanded === state) return;
+    this.expanded = state;
+    if (state) {
+      this.emit("expand");
+    } else {
+      this.emit("collapse");
+    }
+    if (this.expanded) return;
+    const childAccordion = this.region?.querySelector("odx-accordion");
+    childAccordion?.toggleAll(false);
+  }
+  update(props) {
+    super.update(props);
+    if (props.has("expanded")) {
+      this.updateA11yAttributes();
+    }
+  }
+  render() {
+    return html`
+      <div class="label">
+        <odx-text ?emphasized=${this.expanded}>
+          <slot></slot>
+        </odx-text>
+        <slot name="end"></slot>
+      </div>
+      <odx-icon class="indicator" name="core::chevron-down" aria-hidden="true"></odx-icon>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: Boolean })
+], OdxAccordionHeaderComponent.prototype, "expanded", 1);
+OdxAccordionHeaderComponent = __decorateClass([
+  customElement("odx-accordion-header", [styles])
+], OdxAccordionHeaderComponent);
+
+export { OdxAccordionHeaderComponent };

package/dist/components/accordion/accordion-panel.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:grid;grid-template-rows:1fr;transition:var(--odx-transition-slow)}odx-separator{margin:0}.container{overflow:hidden}.content{padding:var(--odx-size-50);padding-block-start:var(--odx-size-12);transition:var(--odx-transition-slow);transition-property:opacity,transform,visibility}:host(:last-of-type) odx-separator{display:none}:host([aria-hidden=\"true\"]){grid-template-rows:0fr;.content{opacity:0;transform:translateY(var(--odx-size-25));visibility:hidden}}:host ::slotted(*){display:block;background-color:transparent}";
+
+export { styles as default };

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

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

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

@@ -0,0 +1,29 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import styles from './accordion-panel.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 OdxAccordionPanelComponent = class extends CustomElement {
+  render() {
+    return html`
+      <div class="container">
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+      <odx-separator></odx-separator>
+    `;
+  }
+};
+OdxAccordionPanelComponent = __decorateClass([
+  customElement("odx-accordion-panel", [styles])
+], OdxAccordionPanelComponent);
+
+export { OdxAccordionPanelComponent };

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

@@ -0,0 +1,3 @@
+const styles = ":host{display:block}:host-context(odx-accordion-panel){margin-block:calc(-1 * var(--odx-size-37));margin-inline-end:calc(-1 * var(--odx-size-50))}";
+
+export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.component.d.ts","sourceRoot":"","sources":["../../../src/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"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,uBAAuB,CAAC"}
+{"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/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-base);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/components/avatar/avatar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.component.d.ts","sourceRoot":"","sources":["../../../src/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"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.models.d.ts","sourceRoot":"","sources":["../../../src/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"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.component.d.ts","sourceRoot":"","sources":["../../../src/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"}
+{"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"}