@odx/foundation 1.0.0-alpha.3 → 1.0.0-alpha.30

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

@@ -1,83 +0,0 @@
-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/area-header/area-header.component.css.js

@@ -1,3 +0,0 @@
-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.js

@@ -1,37 +0,0 @@
-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="prefix"></slot>
-      <div class="content">
-        <slot></slot>
-      </div>
-      <slot name="suffix"></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.js

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

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

@@ -1,3 +0,0 @@
-const styles = "@layer base{:host{--_size: var(--odx-size-225);--_spacing: var(--odx-size-25);--_font-size: var(--odx-typography-font-size-3)}:host{--_color-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-context(odx-avatar-group[size=\"lg\"]),:host([size=\"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-size-400);--_spacing: 0;--_font-size: var(--odx-typography-font-size-7)}:host-context(odx-navigation-item),:host-context(odx-button){--_color-background: var(--odx-color-transparent-pressed);--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-3);--_spacing: calc(var(--odx-size-75) - var(--odx-size-px));margin:0 calc(-1 * var(--_spacing))}:host-context(odx-button[size=\"sm\"]){--_size: var(--odx-size-125);--_font-size: var(--odx-typography-font-size-1);--_spacing: calc(var(--odx-size-37) + var(--odx-size-px))}:host-context(odx-button[size=\"lg\"]){--_size: var(--odx-size-250);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-75) + var(--odx-size-px))}:host-context(odx-navigation-item[size=\"lg\"]){--_size: var(--odx-size-200);--_font-size: var(--odx-typography-font-size-5);--_spacing: calc(var(--odx-size-50))}::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.js

@@ -1,31 +0,0 @@
-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.js

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

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

@@ -1,3 +0,0 @@
-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.js

@@ -1,31 +0,0 @@
-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/badge/badge.component.css.js

@@ -1,3 +0,0 @@
-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/components/badge/badge.component.js

@@ -1,32 +0,0 @@
-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/components/badge/badge.models.js

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

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

@@ -1,3 +0,0 @@
-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

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

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

@@ -1,56 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,17 +0,0 @@
-import { CustomElement } from '@odx/foundation';
-import { PropertyValues, TemplateResult } from 'lit';
-declare global {
-    interface HTMLElementTagNameMap {
-        'odx-breadcrumb': OdxBreadcrumbComponent;
-    }
-}
-export declare class OdxBreadcrumbComponent extends CustomElement {
-    #private;
-    private items;
-    private fallbackItems;
-    private rootItems;
-    max: number;
-    protected render(): TemplateResult;
-    protected updated(props: PropertyValues<this>): void;
-}
-//# sourceMappingURL=breadcrumb.component.d.ts.map

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

@@ -1,72 +0,0 @@
-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

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

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

@@ -1,3 +0,0 @@
-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}}";
-
-export { styles as default };

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

@@ -1,78 +0,0 @@
-import { WithLoadingState, getAssignedElements, optionalAttr, requestUpdateOnAriaChange, customElement } from '@odx/foundation';
-import { html } from 'lit';
-import { when } from 'lit/directives/when.js';
-import styles from './base-button.css.js';
-import { BaseLink } from '../link/base-link.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 _BaseButtonComponent_instances, renderSlot_fn;
-let BaseButtonComponent = class extends WithLoadingState(BaseLink) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _BaseButtonComponent_instances);
-  }
-  render() {
-    return html`${when(
-      this.href,
-      () => super.render(),
-      () => this.renderButton()
-    )}`;
-  }
-  renderContent() {
-    return html`
-      ${__privateMethod(this, _BaseButtonComponent_instances, renderSlot_fn).call(this, "prefix")}
-      <odx-line-clamp class="content" .max=${2}>
-        <slot></slot>
-      </odx-line-clamp>
-      ${__privateMethod(this, _BaseButtonComponent_instances, renderSlot_fn).call(this, "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}
-      <button
-        class="base"
-        part="anchor button"
-        aria-label="${optionalAttr(ariaLabel)}"
-        aria-haspopup="${optionalAttr(ariaHasPopup)}"
-        aria-expanded="${optionalAttr(ariaExpanded)}"
-        type=${type}
-        ?disabled=${this.disabled || this.loading}
-      >
-        ${this.renderContent()}
-      </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>`;
-  }
-  return html`<slot name=${name}></slot>`;
-};
-BaseButtonComponent = __decorateClass([
-  requestUpdateOnAriaChange(["ariaLabel", "ariaHasPopup", "ariaExpanded"]),
-  customElement(void 0, [styles])
-], BaseButtonComponent);
-
-export { BaseButtonComponent };

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

@@ -1,3 +0,0 @@
-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)}}";
-
-export { styles as default };

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

@@ -1,66 +0,0 @@
-import { WithLoadingState, customElement } from '@odx/foundation';
-import { isServer } from 'lit';
-import { property } from 'lit/decorators.js';
-import { BaseButtonComponent } from './base-button.js';
-import styles from './button.component.css.js';
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _internals, _OdxButtonComponent_instances, handleClick_fn;
-let OdxButtonComponent = class extends WithLoadingState(BaseButtonComponent) {
-  constructor() {
-    super();
-    __privateAdd(this, _OdxButtonComponent_instances);
-    __privateAdd(this, _internals, this.attachInternals());
-    this.block = false;
-    this.type = "button";
-    if (!isServer) {
-      this.addEventListener("click", __privateMethod(this, _OdxButtonComponent_instances, handleClick_fn));
-    }
-  }
-};
-_internals = new WeakMap();
-_OdxButtonComponent_instances = new WeakSet();
-handleClick_fn = function(_event) {
-  if (this.type === "submit") {
-    __privateGet(this, _internals).form?.requestSubmit();
-    return;
-  }
-  if (this.type === "reset") {
-    __privateGet(this, _internals).form?.reset();
-    return;
-  }
-};
-OdxButtonComponent.formAssociated = true;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], OdxButtonComponent.prototype, "block", 2);
-__decorateClass([
-  property()
-], OdxButtonComponent.prototype, "type", 2);
-__decorateClass([
-  property({ reflect: true })
-], OdxButtonComponent.prototype, "size", 2);
-__decorateClass([
-  property({ reflect: true })
-], OdxButtonComponent.prototype, "variant", 2);
-OdxButtonComponent = __decorateClass([
-  customElement("odx-button", [styles])
-], OdxButtonComponent);
-
-export { OdxButtonComponent };

package/dist/components/button/button.models.js

@@ -1,16 +0,0 @@
-const ButtonSize = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg"
-};
-const ButtonVariant = {
-  PRIMARY: "primary",
-  HIGHLIGHT: "highlight",
-  SECONDARY: "secondary",
-  GHOST: "ghost",
-  DANGER: "danger"
-  // SUCCESS: 'success',
-  // CONFIRMATION: 'confirmation',
-};
-
-export { ButtonSize, ButtonVariant };

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

@@ -1,3 +0,0 @@
-const styles = ":host{--_gap: var(--odx-size-75);--_direction: row;display:inline-flex;align-items:center;flex-direction:var(--_direction);gap:var(--_gap)}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin:0}:host([block]){display:flex;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){width:100%}}:host([connected]){--_gap: var(--odx-size-px);::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):not(:first-child):not(:last-child)){border-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):is(:hover,:focus-within)){z-index:1}}:host([vertical]){--_direction: column;::slotted(:is(odx-button,odx-icon-button,odx-toggle-button)){margin-block:0}}:host([connected]:not([vertical])){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child:not(:last-child)){border-start-end-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child:not(:first-child)){border-start-start-radius:0;border-end-start-radius:0}}:host([connected][vertical]){::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):first-child){border-end-start-radius:0;border-end-end-radius:0}::slotted(:is(odx-button,odx-icon-button,odx-toggle-button):last-child){border-start-start-radius:0;border-start-end-radius:0}}";
-
-export { styles as default };