@odx/foundation 0.1.0-alpha.9 → 1.0.0-alpha.2

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

@@ -0,0 +1,3 @@
+const styles = ":host{display:flex;block-size:var(--odx-size-300);background-color:var(--odx-color-foreground-light);column-gap:var(--odx-size-150);padding-inline:var(--odx-size-150);place-items:center;box-shadow:0 0 0 100vmax var(--odx-color-foreground-light);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-title){width:max-content}::slotted(odx-main-menu-button){margin-inline-end:calc(-1 * var(--odx-size-75))}::slotted(odx-header-actions){margin-inline-start:auto}@media screen and (max-width: 600px){odx-logo{display:none}}";
+
+export { styles as default };

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

@@ -0,0 +1,58 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import styles from './header.component.css.js';
+import { TitleSize } from '../title/title.models.js';
+import { OdxTitleComponent } from '../title/title.component.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 _handleSlotChange;
+let OdxHeaderComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _handleSlotChange, () => {
+      const [titleElement] = this.titleElements;
+      if (!titleElement) return;
+      titleElement.ariaLevel = "1";
+      titleElement.role = "heading";
+      titleElement.size = TitleSize.XS;
+      titleElement.setAttribute("odxPreventTextOverflow", "true");
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role = "banner";
+  }
+  render() {
+    return html`
+      <slot name="prefix"></slot>
+      <odx-logo size="sm"></odx-logo>
+      <slot @slotchange=${__privateGet(this, _handleSlotChange)}></slot>
+      <slot name="actions"></slot>
+    `;
+  }
+};
+_handleSlotChange = new WeakMap();
+__decorateClass([
+  queryAssignedElements({ selector: OdxTitleComponent.selector, flatten: true })
+], OdxHeaderComponent.prototype, "titleElements", 2);
+OdxHeaderComponent = __decorateClass([
+  customElement("odx-header", [styles])
+], OdxHeaderComponent);
+
+export { OdxHeaderComponent };

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

@@ -0,0 +1,3 @@
+const styles = ":host{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}:host([size=\"sm\"]){--_font-size: var(--odx-breakpoint-font-size-display-sm);--_line-height: var(--odx-breakpoint-line-height-display-sm)}:host,:host([size=\"md\"]){--_font-size: var(--odx-breakpoint-font-size-display-md);--_line-height: var(--odx-breakpoint-line-height-display-md)}:host([size=\"lg\"]){--_font-size: var(--odx-breakpoint-font-size-display-lg);--_line-height: var(--odx-breakpoint-line-height-display-lg)}:host([size=\"xl\"]){--_font-size: var(--odx-breakpoint-font-size-display-xl);--_line-height: var(--odx-breakpoint-line-height-display-xl)}";
+
+export { styles as default };

package/dist/components/headline/headline.component.js

@@ -0,0 +1,31 @@
+import { CustomElement, requestUpdateOnAriaChange, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './headline.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 OdxHeadlineComponent = class extends CustomElement {
+  willUpdate(props) {
+    super.willUpdate(props);
+    if (props.has("ariaLevel")) {
+      this.role = this.ariaLevel !== null ? "heading" : null;
+    }
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], OdxHeadlineComponent.prototype, "size", 2);
+OdxHeadlineComponent = __decorateClass([
+  requestUpdateOnAriaChange(["ariaLevel"]),
+  customElement("odx-headline", [styles])
+], OdxHeadlineComponent);
+
+export { OdxHeadlineComponent };

package/dist/components/headline/headline.models.js

@@ -0,0 +1,8 @@
+const HeadlineSize = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+  XL: "xl"
+};
+
+export { HeadlineSize };

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

@@ -0,0 +1,35 @@
+import { optionalAttr, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { OdxButtonComponent } from '../button/button.component.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 OdxIconButtonComponent = class extends OdxButtonComponent {
+  renderContent() {
+    return html`
+      <odx-icon name=${optionalAttr(this.icon)}></odx-icon>
+      ${when(this.loading, () => html`<odx-loading-spinner class="spinner"></odx-loading-spinner>`)}
+      <odx-visually-hidden>
+        <slot></slot>
+      </odx-visually-hidden>
+    `;
+  }
+};
+__decorateClass([
+  property()
+], OdxIconButtonComponent.prototype, "icon", 2);
+OdxIconButtonComponent = __decorateClass([
+  customElement("odx-icon-button")
+], OdxIconButtonComponent);
+
+export { OdxIconButtonComponent };

package/dist/components/inline-message/index.d.ts

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

package/dist/components/inline-message/inline-message.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-background: var(--odx-color-background-main);--_color-foreground: var(--odx-color-foreground);--_color-stroke: var(--odx-color-separator);display:block;padding:var(--odx-size-75);background-color:var(--_color-background);color:var(--_color-foreground);border:var(--odx-border-width-thin) solid var(--_color-stroke);transition:var(--odx-transition-reduced);transition-property:background-color,color,border-color}:host([variant=\"info\"]){--_color-background: var(--odx-palette-blue-10);--_color-stroke: var(--odx-palette-blue-30)}:host([variant=\"danger\"]){--_color-background: var(--odx-palette-red-10);--_color-foreground: var(--odx-palette-red-100);--_color-stroke: var(--odx-palette-red-30)}:host([variant=\"warning\"]){--_color-background: var(--odx-palette-yellow-00);--_color-stroke: var(--odx-palette-yellow-60)}:host([variant=\"success\"]){--_color-background: var(--odx-palette-green-00);--_color-stroke: var(--odx-palette-green-60)}:host(:not([emphasized])){--_color-stroke: var(--odx-palette-transparent)}";
+
+export { styles as default };

package/dist/components/inline-message/inline-message.component.d.ts

@@ -0,0 +1,14 @@
+import { CustomElement } from '@odx/foundation';
+import { TemplateResult } from 'lit';
+import { InlineMessageVariant } from './inline-message.models';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-inline-message': OdxInlineMessageComponent;
+    }
+}
+export declare class OdxInlineMessageComponent extends CustomElement {
+    emphasized: boolean;
+    variant?: InlineMessageVariant;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=inline-message.component.d.ts.map

package/dist/components/inline-message/inline-message.component.js

@@ -0,0 +1,39 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './inline-message.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 OdxInlineMessageComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.emphasized = false;
+  }
+  render() {
+    return html`
+      <odx-text size="sm">
+        <slot></slot>
+      </odx-text>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxInlineMessageComponent.prototype, "emphasized", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxInlineMessageComponent.prototype, "variant", 2);
+OdxInlineMessageComponent = __decorateClass([
+  customElement("odx-inline-message", [styles])
+], OdxInlineMessageComponent);
+
+export { OdxInlineMessageComponent };

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

@@ -1,10 +1,9 @@
 export type InlineMessageVariant = (typeof InlineMessageVariant)[keyof typeof InlineMessageVariant];
 export declare const InlineMessageVariant: {
     NEUTRAL: string;
-    PRIMARY: string;
-    ACCENT: string;
-    SUCCESS: string;
-    WARNING: string;
+    INFO: string;
     DANGER: string;
+    WARNING: string;
+    SUCCESS: string;
 };
-//# sourceMappingURL=inline-message-variant.d.ts.map
+//# sourceMappingURL=inline-message.models.d.ts.map

package/dist/components/inline-message/inline-message.models.js

@@ -0,0 +1,9 @@
+const InlineMessageVariant = {
+  NEUTRAL: "neutral",
+  INFO: "info",
+  DANGER: "danger",
+  WARNING: "warning",
+  SUCCESS: "success"
+};
+
+export { InlineMessageVariant };

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

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-stroke: var(--odx-color-input-control-stroke);--_color-background: var(--odx-color-input-control-fill);--_block-size: var(--odx-size-225);display:block}.base{display:flex;place-items:center;background-color:var(--_color-background);border:var(--odx-border-width-thin) solid var(--_color-stroke);block-size:var(--_block-size);border-radius:var(--odx-border-radius-controls);font-size:var(--odx-font-size-text-md);transition:var(--odx-transition-reduced);transition-property:background-color,border-color;padding-inline:var(--odx-size-50);gap:var(--odx-size-50);&:has(:focus-visible){--_color-stroke: var(--odx-color-input-control-stroke-pressed)}&:has(.input:hover){--_color-background: var(--odx-color-input-control-fill-hover);--_color-stroke: var(--odx-color-input-control-stroke-hover)}}.input{background-color:var(--odx-color-transparent);outline:none;border:none;flex:1 1 auto;block-size:100%;padding:0;color:inherit;font-weight:var(--odx-typography-font-weight-medium);&::placeholder{color:var(--odx-color-foreground-muted);font-weight:var(--odx-typography-font-weight-normal)}}::slotted(odx-icon[slot]){--size: var(--odx-typography-font-size-5)}";
+
+export { styles as default };

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

@@ -0,0 +1,20 @@
+import { CustomElement } from '@odx/foundation';
+import { TemplateResult } from 'lit';
+import { InputVariant } from './input.models';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-input': OdxInputComponent;
+    }
+}
+declare const OdxInputComponent_base: import('@odx/foundation').Constructor<import('@odx/foundation').IsFormControl<string>> & typeof CustomElement;
+export declare class OdxInputComponent extends OdxInputComponent_base {
+    #private;
+    static readonly formAssociated = true;
+    clearable: boolean;
+    placeholder: string;
+    type: string;
+    variant?: InputVariant | null;
+    protected render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=input.component.d.ts.map

package/dist/components/input/input.component.js

@@ -0,0 +1,72 @@
+import { FormControl, CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import styles from './input.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 _handleInput, _clearInput;
+let OdxInputComponent = class extends FormControl(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.clearable = true;
+    this.placeholder = "";
+    this.type = "text";
+    __privateAdd(this, _handleInput, (event) => {
+      this.value = event.target.value;
+      this.dispatchEvent(new CustomEvent(event.type, { bubbles: true, composed: true, detail: event }));
+    });
+    __privateAdd(this, _clearInput, () => {
+      this.value = "";
+    });
+  }
+  render() {
+    const clearButton = when(
+      this.clearable && this.value,
+      () => html`<odx-icon-button icon="core::error"  @click=${__privateGet(this, _clearInput)} variant="ghost" tabindex="-1"></odx-icon-button>`
+    );
+    return html`
+      <div class="base">
+        <slot name="prefix"></slot>
+        <input placeholder=${this.placeholder} class="input" .type=${this.type} ?disabled=${this.disabled} ?readonly=${this.readonly} .value=${this.value} @input=${__privateGet(this, _handleInput)} />
+        ${clearButton}
+        <slot name="suffix"></slot>
+      </div>
+    `;
+  }
+};
+_handleInput = new WeakMap();
+_clearInput = new WeakMap();
+OdxInputComponent.formAssociated = true;
+__decorateClass([
+  property({ type: Boolean })
+], OdxInputComponent.prototype, "clearable", 2);
+__decorateClass([
+  property()
+], OdxInputComponent.prototype, "placeholder", 2);
+__decorateClass([
+  property()
+], OdxInputComponent.prototype, "type", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxInputComponent.prototype, "variant", 2);
+OdxInputComponent = __decorateClass([
+  customElement("odx-input", [styles])
+], OdxInputComponent);
+
+export { OdxInputComponent };

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

@@ -0,0 +1,7 @@
+export type InputVariant = (typeof InputVariant)[keyof typeof InputVariant];
+export declare const InputVariant: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+//# sourceMappingURL=input.models.d.ts.map

package/dist/components/input/input.models.js

@@ -0,0 +1,7 @@
+const InputVariant = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+
+export { InputVariant };

package/dist/components/line-clamp/index.d.ts

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

package/dist/components/line-clamp/line-clamp.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:-webkit-box;min-inline-size:min-content;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--max, 2)}";
+
+export { styles as default };

package/dist/components/line-clamp/line-clamp.component.d.ts

@@ -0,0 +1,12 @@
+import { CustomElement } from '@odx/foundation';
+import { PropertyValueMap } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-line-clamp': OdxLineClampComponent;
+    }
+}
+export declare class OdxLineClampComponent extends CustomElement {
+    max?: number | null;
+    protected updated(props: PropertyValueMap<this>): void;
+}
+//# sourceMappingURL=line-clamp.component.d.ts.map

package/dist/components/line-clamp/line-clamp.component.js

@@ -0,0 +1,37 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './line-clamp.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 OdxLineClampComponent = class extends CustomElement {
+  updated(props) {
+    super.updated(props);
+    if (typeof this.max === "number" && this.max > 0) {
+      this.style.setProperty("--max", String(this.max));
+    } else {
+      this.style.removeProperty("--max");
+    }
+    if (typeof this.max === "number" && this.max > 0) {
+      this.style.setProperty("--min", String(this.max));
+    } else {
+      this.style.removeProperty("--max");
+    }
+  }
+};
+__decorateClass([
+  property({ type: Number })
+], OdxLineClampComponent.prototype, "max", 2);
+OdxLineClampComponent = __decorateClass([
+  customElement("odx-line-clamp", [styles])
+], OdxLineClampComponent);
+
+export { OdxLineClampComponent };

package/dist/{base-link-CvZZE13a.js → components/link/base-link.js}

@@ -31,6 +31,7 @@ class BaseLink extends CanBeDisabled(CustomElement) {
   render(role) {
     const { ariaLabel, ariaHasPopup, ariaExpanded, ariaCurrent, ariaHidden } = this;
     return html`<a
+      class="base"
       part="anchor"
       aria-label="${optionalAttr(ariaLabel)}"
       aria-haspopup="${optionalAttr(ariaHasPopup)}"
@@ -66,4 +67,4 @@ __decorateClass([
   property()
 ], BaseLink.prototype, "download");
 
-export { BaseLink as B };
+export { BaseLink };

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-foreground: var(--odx-palette-blue-50);display:inline;text-decoration:underline}:host(:focus-visible){outline:none}.base{padding-inline:calc(1 / 24 * 1rem);transition:var(--odx-transition-reduced);color:var(--_color-foreground);text-decoration:inherit;outline:var(--odx-focus-ring-outline);outline-offset:var(--odx-focus-ring-offset);border-radius:var(--odx-border-radius-controls);&:focus-visible{outline-color:var(--odx-focus-ring-color)}}:host(:hover){--_color-foreground: var(--odx-palette-blue-80)}:host([emphasized]){--_color-foreground: var(--odx-color-foreground);font-weight:var(--odx-typography-font-weight-medium)}:host([aria-disabled=\"true\"]),:host([subtle]:not(:hover)){text-decoration:none}:host([aria-disabled=\"true\"]){--_color-foreground: var(--odx-palette-coolgray-40);.anchor{cursor:default}}";
+
+export { styles as default };

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

@@ -5,6 +5,7 @@ declare global {
     }
 }
 export declare class OdxLinkComponent extends BaseLink {
+    emphasized: boolean;
     subtle: boolean;
 }
 //# sourceMappingURL=link.component.d.ts.map

package/dist/components/link/link.component.js

@@ -0,0 +1,33 @@
+import { customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import { BaseLink } from './base-link.js';
+import styles from './link.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 OdxLinkComponent = class extends BaseLink {
+  constructor() {
+    super(...arguments);
+    this.emphasized = false;
+    this.subtle = false;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxLinkComponent.prototype, "emphasized", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxLinkComponent.prototype, "subtle", 2);
+OdxLinkComponent = __decorateClass([
+  customElement("odx-link", [styles])
+], OdxLinkComponent);
+
+export { OdxLinkComponent };

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

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{display:flex;flex-direction:column;padding:var(--odx-size-75);border-block-end:var(--odx-border-sm)}";
+
+export { styles as default };

package/dist/components/list/list-item.component.d.ts

@@ -0,0 +1,11 @@
+import { TemplateResult } from 'lit';
+import { BaseLink } from '../link';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-list-item': OdxListItemComponent;
+    }
+}
+export declare class OdxListItemComponent extends BaseLink {
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=list-item.component.d.ts.map

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

@@ -0,0 +1,32 @@
+import { customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { when } from 'lit/directives/when.js';
+import styles from './list-item.component.css.js';
+import { BaseLink } from '../link/base-link.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 OdxListItemComponent = class extends BaseLink {
+  render() {
+    return html`
+      <slot name="prefix"></slot>
+      ${when(
+      this.href,
+      () => super.render(),
+      () => html`<slot></slot>`
+    )}
+      <slot name="suffix"></slot>
+    `;
+  }
+};
+OdxListItemComponent = __decorateClass([
+  customElement("odx-list-item", [styles])
+], OdxListItemComponent);
+
+export { OdxListItemComponent };

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

@@ -0,0 +1,3 @@
+const styles = "";
+
+export { styles as default };

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

@@ -2,10 +2,10 @@ import { CustomElement } from '@odx/foundation';
 import { TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-list': OdxListElement;
+        'odx-list': OdxListComponent;
     }
 }
-export declare class OdxListElement extends CustomElement {
+export declare class OdxListComponent extends CustomElement {
     protected render(): TemplateResult;
 }
-//# sourceMappingURL=list.element.d.ts.map
+//# sourceMappingURL=list.component.d.ts.map

package/dist/components/list/list.component.js

@@ -0,0 +1,24 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import styles from './list.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 OdxListComponent = class extends CustomElement {
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+};
+OdxListComponent = __decorateClass([
+  customElement("odx-list", [styles])
+], OdxListComponent);
+
+export { OdxListComponent };

package/dist/components/loading-overlay/index.d.ts

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

package/dist/components/loading-overlay/loading-overlay.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{--_overlay-fill-color: var(--odx-color-backdrop, rgba(255, 255, 255, .25));display:contents;overflow:hidden;border-radius:inherit}:host::part(overlay){display:flex;flex-direction:column;place-content:center;place-items:center;position:absolute;inset:0;pointer-events:none;opacity:0;visibility:hidden;transition:var(--odx-transition-reduced) allow-discrete;overflow:hidden;border-radius:inherit}:host::part(content){min-inline-size:var(--odx-size-225);text-align:center}:host([loading])::part(overlay){background-color:var(--_overlay-fill-color);z-index:9999;opacity:1;backdrop-filter:blur(var(--odx-size-12));pointer-events:all;visibility:visible}";
+
+export { styles as default };

package/dist/{elements/loading-overlay/loading-overlay.element.d.ts → components/loading-overlay/loading-overlay.component.d.ts}

@@ -2,12 +2,12 @@ import { CustomElement } from '@odx/foundation';
 import { PropertyValues, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-loading-overlay': OdxLoadingOverlayElement;
+        'odx-loading-overlay': OdxLoadingOverlayComponent;
     }
 }
 export declare const LOADING_OVERLAY_HOST_DIRECTIVE = "odx-loading-overlay-host";
-declare const OdxLoadingOverlayElement_base: import('@odx/foundation').Constructor<import('@odx/foundation').HasLoadingState> & typeof CustomElement;
-export declare class OdxLoadingOverlayElement extends OdxLoadingOverlayElement_base {
+declare const OdxLoadingOverlayComponent_base: import('@odx/foundation').Constructor<import('@odx/foundation').HasLoadingState> & typeof CustomElement;
+export declare class OdxLoadingOverlayComponent extends OdxLoadingOverlayComponent_base {
     #private;
     private readonly overlay;
     get loadingContainer(): HTMLElement;
@@ -18,4 +18,4 @@ export declare class OdxLoadingOverlayElement extends OdxLoadingOverlayElement_b
     protected hideOverlay(): void;
 }
 export {};
-//# sourceMappingURL=loading-overlay.element.d.ts.map
+//# sourceMappingURL=loading-overlay.component.d.ts.map