@odx/foundation 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/cdk/drag-drop/drag.controller.d.ts

@@ -1,5 +1,5 @@
 import { ReactiveController, ReactiveElement } from 'lit';
-import { DraggableElement } from './is-draggable';
+import { DraggableElement } from './is-draggable.js';
 export interface DragControllerOptions<T extends DraggableElement = DraggableElement> {
     getDraggableElements: () => T[];
     getContainer?: () => HTMLElement;

package/dist/cdk/drag-drop/is-draggable.d.ts

@@ -1,6 +1,6 @@
 import { Constructor } from '@odx/foundation';
 import { LitElement } from 'lit';
-import { DragEvent, Position } from './drag-events';
+import { DragEvent, Position } from './drag-events.js';
 export declare const IS_DRAG_ACTIVE_ATTRIBUTE = "odx-drag-active";
 export declare class CanBeDragged {
     dragDisabled: boolean;

package/dist/cdk/main.d.ts

@@ -1,7 +1,7 @@
-export * from './drag-drop/drag-events';
-export * from './drag-drop/drag.controller';
-export * from './drag-drop/is-draggable';
-export * from './popover/popover-host.mixin';
-export * from './popover/popover.component';
-export * from './popover/popover.models';
+export * from './drag-drop/drag-events.js';
+export * from './drag-drop/drag.controller.js';
+export * from './drag-drop/is-draggable.js';
+export * from './popover/popover-host.mixin.js';
+export * from './popover/popover.component.js';
+export * from './popover/popover.models.js';
 //# sourceMappingURL=main.d.ts.map

package/dist/cdk/popover/popover-host.mixin.d.ts

@@ -1,5 +1,5 @@
 import { Constructor, CustomElement } from '@odx/foundation';
-import { PopoverPlacement } from './popover.models';
+import { PopoverPlacement } from './popover.models.js';
 export interface PopoverHost {
     referenceElement: HTMLElement | null;
     anchor: string;

package/dist/cdk/popover/popover.component.js

@@ -1,4 +1,4 @@
-import { CustomElement, customElement } from '@odx/foundation';
+import { customElement, CustomElement } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';

package/dist/cdk/popover/popover.utils.d.ts

@@ -1,5 +1,5 @@
 import { FloatingElement, ReferenceElement } from '@floating-ui/dom';
-import { PopoverPlacement, PopoverPlacementOptions, PopoverSide } from './popover.models';
+import { PopoverPlacement, PopoverPlacementOptions, PopoverSide } from './popover.models.js';
 export declare function getPopoverSide(placement: PopoverPlacement): PopoverSide;
 export declare function computePopoverPlacement(referenceElement: ReferenceElement, floatingElement: FloatingElement, options: PopoverPlacementOptions): Promise<void>;
 //# sourceMappingURL=popover.utils.d.ts.map

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

@@ -5,7 +5,7 @@ declare global {
         'odx-accordion-header': OdxAccordionHeaderComponent;
     }
 }
-declare const OdxAccordionHeaderComponent_base: import('@odx/foundation').Constructor<WithAriaControls> & typeof CustomElement;
+declare const OdxAccordionHeaderComponent_base: import('@odx/foundation/dist/lib', { with: { "resolution-mode": "import" } }).Constructor<WithAriaControls> & typeof CustomElement;
 export declare class OdxAccordionHeaderComponent extends OdxAccordionHeaderComponent_base {
     set expanded(value: boolean);
     get expanded(): boolean;

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

@@ -1,4 +1,4 @@
-import { CustomElement, customElement } from '@odx/foundation';
+import { customElement, CustomElement } from '@odx/foundation';
 import { html } from 'lit';
 import styles from './accordion-panel.component.css.js';
 

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

@@ -1,6 +1,6 @@
 import { CustomElement } from '@odx/foundation';
 import { PropertyValues, TemplateResult } from 'lit';
-import { OdxAccordionHeaderComponent } from './accordion-header.component';
+import { OdxAccordionHeaderComponent } from './accordion-header.component.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordionComponent;

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

@@ -1,4 +1,4 @@
-import { CustomElement, getKeyboardEventInfo, customElement } from '@odx/foundation';
+import { customElement, CustomElement, getKeyboardEventInfo } from '@odx/foundation';
 import { isServer, html } from 'lit';
 import { queryAssignedElements, property } from 'lit/decorators.js';
 import { OdxAccordionHeaderComponent } from './accordion-header.component.js';

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

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

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

@@ -1,6 +1,6 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { AreaHeaderSize, AreaHeaderVariant } from './area-header.models';
+import { AreaHeaderSize, AreaHeaderVariant } from './area-header.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-area-header': OdxAreaHeaderComponent;

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

@@ -1,4 +1,4 @@
-import { CustomElement, customElement } from '@odx/foundation';
+import { customElement, CustomElement } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './area-header.component.css.js';

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

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

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

@@ -1,6 +1,6 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { AvatarSize, AvatarVariant } from './avatar.models';
+import { AvatarSize, AvatarVariant } from './avatar.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-avatar': OdxAvatarComponent;

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

@@ -1,4 +1,4 @@
-import { CustomElement, customElement } from '@odx/foundation';
+import { customElement, CustomElement } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './avatar.component.css.js';

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

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

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

@@ -1,6 +1,6 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { AvatarSize, AvatarVariant, OdxAvatarComponent } from '../avatar';
+import { AvatarSize, AvatarVariant, OdxAvatarComponent } from '../avatar/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-avatar-group': OdxAvatarGroupComponent;

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

@@ -1,4 +1,4 @@
-import { CustomElement, customElement } from '@odx/foundation';
+import { customElement, CustomElement } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './avatar-group.component.css.js';

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

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

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

@@ -1,6 +1,6 @@
 import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
-import { BadgeVariant } from './badge.models';
+import { BadgeVariant } from './badge.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-badge': OdxBadgeComponent;

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

@@ -1,4 +1,4 @@
-import { CustomElement, customElement } from '@odx/foundation';
+import { customElement, CustomElement } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './badge.component.css.js';

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

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

package/dist/components/{breadcrumb/breadcrumb-item.component.d.ts → breadcrumbs/breadcrumbs-item.component.d.ts}

@@ -1,16 +1,17 @@
 import { CustomElement } from '@odx/foundation';
 import { PropertyValues, TemplateResult } from 'lit';
-import { OdxLinkComponent } from '../link';
+import { OdxLinkComponent } from '../link/index.js';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-breadcrumb-item': OdxBreadcrumbItemComponent;
+        'odx-breadcrumbs-item': OdxBreadcrumbsItemComponent;
     }
 }
-export declare class OdxBreadcrumbItemComponent extends CustomElement {
-    #private;
+export declare class OdxBreadcrumbsItemComponent extends CustomElement {
+    private linkElements;
+    fallback: boolean;
+    isLast(): boolean;
     protected get interactiveElement(): OdxLinkComponent | null;
-    protected updated(props: PropertyValues<this>): void;
     protected render(): TemplateResult;
-    protected isLast(): boolean;
+    protected updated(props: PropertyValues<this>): void;
 }
-//# sourceMappingURL=breadcrumb-item.component.d.ts.map
+//# sourceMappingURL=breadcrumbs-item.component.d.ts.map

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

@@ -0,0 +1,56 @@
+import { requestUpdateOnAriaChange, customElement, CustomElement } from '@odx/foundation';
+import { html } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import '../link/base-link.js';
+import { OdxLinkComponent } from '../link/link.component.js';
+import styles from './breadcrumbs-item.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 OdxBreadcrumbsItemComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.fallback = false;
+  }
+  isLast() {
+    return !this.nextElementSibling;
+  }
+  get interactiveElement() {
+    return this.linkElements[0] ?? null;
+  }
+  render() {
+    return html`
+      <slot></slot>
+      ${when(!this.isLast(), () => html`<odx-icon class="separator" name="chevron-right"></odx-icon>`)}
+    `;
+  }
+  updated(props) {
+    super.updated?.(props);
+    if (this.interactiveElement) {
+      this.interactiveElement.subtle = true;
+      this.interactiveElement.emphasized = this.isLast();
+      this.interactiveElement.ariaCurrent = this.isLast() ? "page" : null;
+    }
+  }
+};
+__decorateClass([
+  queryAssignedElements({ selector: OdxLinkComponent.selector, flatten: true })
+], OdxBreadcrumbsItemComponent.prototype, "linkElements", 2);
+__decorateClass([
+  property({ type: Boolean })
+], OdxBreadcrumbsItemComponent.prototype, "fallback", 2);
+OdxBreadcrumbsItemComponent = __decorateClass([
+  requestUpdateOnAriaChange(["ariaHidden"]),
+  customElement("odx-breadcrumbs-item", [styles])
+], OdxBreadcrumbsItemComponent);
+
+export { OdxBreadcrumbsItemComponent };

package/dist/components/{breadcrumb/breadcrumb.component.css.js → breadcrumbs/breadcrumbs.component.css.js}

@@ -1,3 +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)}";
+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)}odx-breadcrumb-item,::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
 
 export { styles as default };

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

@@ -0,0 +1,23 @@
+import { CustomElement } from '@odx/foundation';
+import { PropertyValues, TemplateResult } from 'lit';
+interface BreadcrumbsItem {
+    href: string;
+    label: string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-breadcrumbs': OdxBreadcrumbsComponent;
+    }
+}
+export declare class OdxBreadcrumbsComponent extends CustomElement {
+    #private;
+    private itemElements;
+    private renderedItemElements;
+    max: number;
+    items?: BreadcrumbsItem[] | null;
+    protected firstUpdated(props: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+    protected updated(props: PropertyValues<this>): void;
+}
+export {};
+//# sourceMappingURL=breadcrumbs.component.d.ts.map

package/dist/components/breadcrumbs/breadcrumbs.component.js

@@ -0,0 +1,88 @@
+import { customElement, CustomElement, toAriaBooleanAttribute } from '@odx/foundation';
+import { html } from 'lit';
+import { queryAssignedElements, queryAll, property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { OdxBreadcrumbsItemComponent } from './breadcrumbs-item.component.js';
+import styles from './breadcrumbs.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 _OdxBreadcrumbsComponent_instances, isItemVisible_fn, renderItems_fn, updateContext_fn;
+let OdxBreadcrumbsComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxBreadcrumbsComponent_instances);
+    this.max = 4;
+  }
+  firstUpdated(props) {
+    super.firstUpdated?.(props);
+    this.role = "navigation";
+    this.ariaLabel ||= "Breadcrumbs";
+  }
+  render() {
+    if (Array.isArray(this.items)) {
+      return __privateMethod(this, _OdxBreadcrumbsComponent_instances, renderItems_fn).call(this, this.items);
+    }
+    return html`<slot @slotchange=${__privateMethod(this, _OdxBreadcrumbsComponent_instances, updateContext_fn)}></slot>`;
+  }
+  updated(props) {
+    super.updated(props);
+    if (props.has("max")) {
+      __privateMethod(this, _OdxBreadcrumbsComponent_instances, updateContext_fn).call(this);
+    }
+  }
+};
+_OdxBreadcrumbsComponent_instances = new WeakSet();
+isItemVisible_fn = function(_, index, items) {
+  return index === 0 || index > items.length - this.max;
+};
+renderItems_fn = function(items) {
+  return html`
+      ${repeat(
+    items.filter(__privateMethod(this, _OdxBreadcrumbsComponent_instances, isItemVisible_fn).bind(this)),
+    (item) => item.href,
+    ({ label, href }) => html`
+          <odx-breadcrumbs-item><odx-link href=${href}>${label}</odx-link></odx-breadcrumbs-item>
+        `
+  )}
+    `;
+};
+updateContext_fn = function() {
+  for (const [index, item] of this.itemElements.entries()) {
+    item.ariaHidden = toAriaBooleanAttribute(!__privateMethod(this, _OdxBreadcrumbsComponent_instances, isItemVisible_fn).call(this, item, index, this.itemElements));
+  }
+  for (const [, item] of Array.from(this.renderedItemElements).entries()) {
+    item.requestUpdate();
+  }
+};
+__decorateClass([
+  queryAssignedElements({ selector: OdxBreadcrumbsItemComponent.selector, flatten: true })
+], OdxBreadcrumbsComponent.prototype, "itemElements", 2);
+__decorateClass([
+  queryAll(OdxBreadcrumbsItemComponent.selector)
+], OdxBreadcrumbsComponent.prototype, "renderedItemElements", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxBreadcrumbsComponent.prototype, "max", 2);
+__decorateClass([
+  property({ attribute: false })
+], OdxBreadcrumbsComponent.prototype, "items", 2);
+OdxBreadcrumbsComponent = __decorateClass([
+  customElement("odx-breadcrumbs", [styles])
+], OdxBreadcrumbsComponent);
+
+export { OdxBreadcrumbsComponent };

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

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

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

@@ -1,3 +1,3 @@
-const styles = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground);--_color-foreground-hover: var(--odx-color-foreground);--_color-foreground-pressed: var(--odx-color-foreground);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-5);--_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-controls);margin-block:var(--_margin-block);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,.base{display:inline-flex;place-items:center;place-content:center}.base{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-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);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.base::-moz-focus-inner{padding:0;border:0}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);margin-inline:var(--_margin-icon);&.overlay{position:absolute;margin:auto}}.content{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-inline:inherit}.overlay~.base{color:var(--odx-color-transparent)}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}}@layer state{:host(:not([aria-busy=\"true\"]):hover){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"]):active){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}}";
+const styles = "@layer base{:host{--_color-background: var(--odx-color-transparent);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed);--_color-foreground: var(--odx-color-foreground);--_color-foreground-hover: var(--odx-color-foreground);--_color-foreground-pressed: var(--odx-color-foreground);--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-typography-font-size-5);--_padding-block: var(--odx-size-37);--_padding-inline: var(--odx-size-75);--_margin-block: 0;--_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-controls);margin-block:var(--_margin-block);max-inline-size:100%;-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,.base{display:inline-flex;place-items:center;place-content:center}.base{overflow:clip;border-radius:inherit;cursor:inherit;-webkit-appearance:none;vertical-align:middle;text-decoration:none;font:inherit;block-size:100%;inline-size:100%;padding:0;gap:inherit;text-transform:inherit;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,outline-color,transform;background-color:var(--_color-background, transparent);color:var(--_color-foreground);font-size:var(--_font-size);gap:var(--_padding-inline);font-weight:var(--odx-typography-font-weight-normal);outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);line-height:min(calc(var(--_block-size) / 2 - var(--odx-size-25)),1em);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}.base::-moz-focus-inner{padding:0;border:0}.spinner{--_size: var(--_icon-size);color:var(--_color-foreground);margin-inline:var(--_margin-icon);&.overlay{position:absolute;margin:auto}}.content{margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding:inherit}.overlay~.base{color:var(--odx-color-transparent)}odx-icon,::slotted(odx-icon){--size: var(--_icon-size);margin-inline:var(--_margin-icon)}}@layer state{:host(:not([aria-busy=\"true\"]):hover){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:not([aria-busy=\"true\"]):active){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([aria-busy=\"true\"]){cursor:default}:host([aria-disabled=\"true\"]){--_color-background: var(--odx-color-disabled-fill);--_color-background-hover: var(--odx-color-disabled-fill);--_color-background-pressed: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}}";
 
 export { styles as default };

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

@@ -1,6 +1,6 @@
-import { TemplateResult } from 'lit';
-import { BaseLink } from '../link';
-declare const BaseButtonComponent_base: import('@odx/foundation').Constructor<import('@odx/foundation').HasLoadingState> & typeof BaseLink;
+import { TemplateResult, nothing } from 'lit';
+import { BaseLink } from '../link/index.js';
+declare const BaseButtonComponent_base: import('@odx/foundation/dist/lib', { with: { "resolution-mode": "import" } }).Constructor<import('@odx/foundation/dist/lib', { with: { "resolution-mode": "import" } }).HasLoadingState> & typeof BaseLink;
 /**
  * A button is clickable text or an icon that triggers an action on the page or in the background.
  * Depending on the action, content, and hierarchy, a button can be used on its own or grouped with
@@ -14,10 +14,12 @@ declare const BaseButtonComponent_base: import('@odx/foundation').Constructor<im
  * @slot - Contains button text
  */
 export declare class BaseButtonComponent extends BaseButtonComponent_base {
-    #private;
     protected render(): TemplateResult;
     protected renderContent(): TemplateResult;
     protected renderButton(): TemplateResult<1>;
+    protected renderSlot(name: 'prefix' | 'suffix'): TemplateResult;
+    protected renderOverlay(): TemplateResult | typeof nothing;
+    protected renderSpinner(overlay?: boolean): TemplateResult;
 }
 export {};
 //# sourceMappingURL=base-button.d.ts.map

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

@@ -1,13 +1,12 @@
-import { WithLoadingState, getAssignedElements, optionalAttr, requestUpdateOnAriaChange, customElement } from '@odx/foundation';
-import { html } from 'lit';
+import { WithLoadingState, optionalAttr, getAssignedElements, customElement } from '@odx/foundation';
+import { html, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
-import styles from './base-button.css.js';
 import { BaseLink } from '../link/base-link.js';
+import '../link/link.component.js';
+import styles from './base-button.css.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--)
@@ -15,15 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
       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 _BaseButtonComponent_instances, renderSlot_fn;
 let BaseButtonComponent = class extends WithLoadingState(BaseLink) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _BaseButtonComponent_instances);
-  }
   render() {
     return html`${when(
       this.href,
@@ -33,22 +24,18 @@ let BaseButtonComponent = class extends WithLoadingState(BaseLink) {
   }
   renderContent() {
     return html`
-      ${__privateMethod(this, _BaseButtonComponent_instances, renderSlot_fn).call(this, "prefix")}
+      ${this.renderSlot("prefix")}
       <odx-line-clamp class="content" .max=${2}>
         <slot></slot>
       </odx-line-clamp>
-      ${__privateMethod(this, _BaseButtonComponent_instances, renderSlot_fn).call(this, "suffix")}
+      ${this.renderSlot("suffix")}
     `;
   }
   renderButton() {
     const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
     const type = "type" in this ? this.type : "button";
-    const loadingOverlay = when(
-      this.loading && getAssignedElements(this, "prefix", "suffix").length === 0,
-      () => html`<odx-loading-spinner class="spinner overlay"></odx-loading-spinner>`
-    );
     return html`
-      ${loadingOverlay}
+      ${this.renderOverlay()}
       <button
         class="base"
         part="anchor button"
@@ -62,16 +49,23 @@ let BaseButtonComponent = class extends WithLoadingState(BaseLink) {
       </button>
     `;
   }
-};
-_BaseButtonComponent_instances = new WeakSet();
-renderSlot_fn = function(name) {
-  if (this.loading && getAssignedElements(this, name).length > 0) {
-    return html`<odx-loading-spinner class="spinner" slot=${name}></odx-loading-spinner>`;
+  renderSlot(name) {
+    if (this.loading && getAssignedElements(this, name).length > 0) {
+      return this.renderSpinner();
+    }
+    return html`<slot name=${name}></slot>`;
+  }
+  renderOverlay() {
+    if (this.loading && getAssignedElements(this, "prefix", "suffix").length === 0) {
+      return this.renderSpinner(true);
+    }
+    return nothing;
+  }
+  renderSpinner(overlay = false) {
+    return html`<odx-loading-spinner class=${classMap({ spinner: true, overlay })}></odx-loading-spinner>`;
   }
-  return html`<slot name=${name}></slot>`;
 };
 BaseButtonComponent = __decorateClass([
-  requestUpdateOnAriaChange(["ariaLabel", "ariaHasPopup", "ariaExpanded"]),
   customElement(void 0, [styles])
 ], BaseButtonComponent);
 

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

@@ -1,3 +1,3 @@
-const styles = "@layer variant{:host([block]){display:flex}:host-context(odx-input),:host-context(odx-button-group[size=\"sm\"]),:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host-context(odx-button-group[size=\"lg\"]),:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host-context(odx-button-group[variant=\"primary\"]),:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host-context(odx-button-group[variant=\"highlight\"]),:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host-context(odx-button-group[variant=\"secondary\"]),:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host-context(odx-input),:host-context(odx-button-group[variant=\"ghost\"]),:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host-context(odx-button-group[variant=\"danger\"]),:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host-context(odx-input){--_icon-size: var(--odx-typography-font-size-5)}}";
+const styles = "@layer base{:host{--_margin-block: var(--odx-size-37)}.base{font-weight:var(--odx-typography-font-weight-medium)}}@layer variant{:host([block]){display:flex}:host-context(odx-input),:host-context(odx-button-group[size=\"sm\"]),:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_font-size: var(--odx-typography-font-size-1);--_icon-size: var(--odx-typography-font-size-4);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host-context(odx-button-group[size=\"lg\"]),:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host-context(odx-button-group[variant=\"primary\"]),:host([variant=\"primary\"]){--_color-background: var(--odx-color-primary-rest);--_color-background-hover: var(--odx-color-primary-hover);--_color-background-pressed: var(--odx-color-primary-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host-context(odx-button-group[variant=\"highlight\"]),:host([variant=\"highlight\"]){--_color-background: var(--odx-color-highlight-rest);--_color-background-hover: var(--odx-color-highlight-hover);--_color-background-pressed: var(--odx-color-highlight-pressed);--_color-foreground: var(--odx-color-foreground-inverse)}:host,:host-context(odx-button-group[variant=\"secondary\"]),:host([variant=\"secondary\"]){--_color-background: var(--odx-experience-color-secondary-rest);--_color-background-hover: var(--odx-experience-color-secondary-hover);--_color-background-pressed: var(--odx-experience-color-secondary-pressed);--_color-foreground: var(--odx-experience-color-secondary-foreground)}:host-context(odx-input),:host-context(odx-button-group[variant=\"ghost\"]),:host([variant=\"ghost\"]){--_color-background: var(--odx-color-transparent);--_color-foreground: var(--odx-color-foreground);--_color-background-hover: var(--odx-color-transparent-hover);--_color-background-pressed: var(--odx-color-transparent-pressed)}:host-context(odx-button-group[variant=\"danger\"]),:host([variant=\"danger\"]){--_color-background: var(--odx-color-danger-rest);--_color-background-hover: var(--odx-color-danger-hover);--_color-background-pressed: var(--odx-color-danger-pressed);--_color-foreground: var(--odx-color-foreground-light)}:host-context(odx-input){--_icon-size: var(--odx-typography-font-size-5)}}";
 
 export { styles as default };

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

@@ -1,11 +1,11 @@
-import { BaseButtonComponent } from './base-button';
-import { ButtonSize, ButtonVariant } from './button.models';
+import { BaseButtonComponent } from './base-button.js';
+import { ButtonSize, ButtonVariant } from './button.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button': OdxButtonComponent;
     }
 }
-declare const OdxButtonComponent_base: import('@odx/foundation').Constructor<import('@odx/foundation').HasLoadingState> & typeof BaseButtonComponent;
+declare const OdxButtonComponent_base: import('@odx/foundation/dist/lib', { with: { "resolution-mode": "import" } }).Constructor<import('@odx/foundation/dist/lib', { with: { "resolution-mode": "import" } }).HasLoadingState> & typeof BaseButtonComponent;
 /**
  * A button is clickable text or an icon that triggers an action on the page or in the background.
  * Depending on the action, content, and hierarchy, a button can be used on its own or grouped with

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

@@ -1,4 +1,4 @@
-export * from './base-button';
-export * from './button.component';
-export * from './button.models';
+export * from './base-button.js';
+export * from './button.component.js';
+export * from './button.models.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,11 @@
 import { CanBeDisabled, CustomElement } from '@odx/foundation';
-import { ButtonSize, ButtonVariant } from '../button';
+import { ButtonSize, ButtonVariant } from '../button/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button-group': OdxButtonGroupComponent;
     }
 }
-declare const OdxButtonGroupComponent_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
+declare const OdxButtonGroupComponent_base: import('@odx/foundation/dist/lib', { with: { "resolution-mode": "import" } }).Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxButtonGroupComponent extends OdxButtonGroupComponent_base {
     block: boolean;
     connected: boolean;

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

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

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

@@ -5,7 +5,7 @@ declare global {
         'odx-card': OdxCardComponent;
     }
 }
-declare const OdxCardComponent_base: import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
+declare const OdxCardComponent_base: import('@odx/foundation/dist/lib', { with: { "resolution-mode": "import" } }).Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxCardComponent extends OdxCardComponent_base {
     protected render(): TemplateResult;
 }

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

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

package/dist/components/checkbox/checkbox.component.js

@@ -1,4 +1,4 @@
-import { CheckboxFormControl, customElement } from '@odx/foundation';
+import { customElement, CheckboxFormControl } from '@odx/foundation';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import styles from './checkbox.component.css.js';

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

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