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

package/dist/components/circular-progress-bar/circular-progress-bar.component.js

@@ -0,0 +1,123 @@
+import { CustomElement, SharedResizeObserver, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './circular-progress-bar.component.css.js';
+import { CircularProgressBarSize } from './circular-progress-bar.models.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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _value, _OdxCircularProgressBarComponent_instances, circumference_get, radius_get, progressValue_get, normalizedStrokeWidth_get;
+let OdxCircularProgressBarComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxCircularProgressBarComponent_instances);
+    __privateAdd(this, _value, 0);
+    this.viewPortSize = 100;
+    this.stroke = 4;
+    this.indeterminate = false;
+    this.size = CircularProgressBarSize.MEDIUM;
+  }
+  set value(val) {
+    if (val >= -1 && val <= 100) {
+      __privateSet(this, _value, val);
+      this.indeterminate = val === -1;
+      this.setAttribute("aria-valuenow", `${this.indeterminate ? 0 : val}`);
+    } else {
+      console.warn(`Invalid value (${val}). Value must be between -1 and 100.`);
+    }
+  }
+  get value() {
+    return __privateGet(this, _value);
+  }
+  firstUpdated(changes) {
+    super.firstUpdated?.(changes);
+    SharedResizeObserver.observe(this, () => {
+      this.requestUpdate();
+    });
+    this.setAttributes();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    SharedResizeObserver.unobserve(this);
+  }
+  render() {
+    return html`
+      <svg part="inner" viewBox="0 0 ${this.viewPortSize} ${this.viewPortSize}">
+        <circle
+          part="track"
+          stroke-width="${__privateGet(this, _OdxCircularProgressBarComponent_instances, normalizedStrokeWidth_get)}"
+          r="${__privateGet(this, _OdxCircularProgressBarComponent_instances, radius_get)}"
+          cx="50%"
+          cy="50%"
+        />
+        <circle
+          part="indicator"
+          stroke-dasharray="${__privateGet(this, _OdxCircularProgressBarComponent_instances, circumference_get)}"
+          stroke-dashoffset="${__privateGet(this, _OdxCircularProgressBarComponent_instances, progressValue_get)}"
+          stroke-width="${__privateGet(this, _OdxCircularProgressBarComponent_instances, normalizedStrokeWidth_get)}"
+          r="${__privateGet(this, _OdxCircularProgressBarComponent_instances, radius_get)}"
+          cx="50%"
+          cy="50%"
+        />
+      </svg>
+    `;
+  }
+  setAttributes() {
+    this.setAttribute("aria-valuenow", `${this.indeterminate ? 0 : this.value}`);
+    this.setAttribute("aria-valuemax", "100");
+    this.setAttribute("aria-valuemin", "0");
+    this.setAttribute("role", "meter");
+  }
+};
+_value = new WeakMap();
+_OdxCircularProgressBarComponent_instances = new WeakSet();
+circumference_get = function() {
+  return Math.floor(2 * __privateGet(this, _OdxCircularProgressBarComponent_instances, radius_get) * Math.PI);
+};
+radius_get = function() {
+  return Math.max(0, this.viewPortSize / 2 - __privateGet(this, _OdxCircularProgressBarComponent_instances, normalizedStrokeWidth_get) / 2);
+};
+progressValue_get = function() {
+  return this.indeterminate ? __privateGet(this, _OdxCircularProgressBarComponent_instances, circumference_get) : Math.floor((1 - __privateGet(this, _value) / 100) * __privateGet(this, _OdxCircularProgressBarComponent_instances, circumference_get));
+};
+normalizedStrokeWidth_get = function() {
+  if (this.stroke < 0) return 0;
+  const normalizeFactor = this.viewPortSize / (this.offsetWidth || 1);
+  let stroke = normalizeFactor * this.stroke;
+  if (normalizeFactor >= 3) {
+    stroke = Math.max(0, stroke - normalizeFactor);
+  }
+  return stroke;
+};
+__decorateClass([
+  property({ type: Number })
+], OdxCircularProgressBarComponent.prototype, "value", 1);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], OdxCircularProgressBarComponent.prototype, "stroke", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxCircularProgressBarComponent.prototype, "indeterminate", 2);
+__decorateClass([
+  property({ reflect: true })
+], OdxCircularProgressBarComponent.prototype, "size", 2);
+OdxCircularProgressBarComponent = __decorateClass([
+  customElement("odx-circular-progress-bar", [styles])
+], OdxCircularProgressBarComponent);
+
+export { OdxCircularProgressBarComponent };

package/dist/{elements/circular-progress-bar/models/circular-progress-bar-size.d.ts → components/circular-progress-bar/circular-progress-bar.models.d.ts}

@@ -4,4 +4,4 @@ export declare const CircularProgressBarSize: {
     readonly MEDIUM: "medium";
     readonly LARGE: "large";
 };
-//# sourceMappingURL=circular-progress-bar-size.d.ts.map
+//# sourceMappingURL=circular-progress-bar.models.d.ts.map

package/dist/components/circular-progress-bar/circular-progress-bar.models.js

@@ -0,0 +1,7 @@
+const CircularProgressBarSize = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+};
+
+export { CircularProgressBarSize };

package/dist/components/circular-progress-bar/index.d.ts

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

package/dist/components/content-box/content-box.component.css.js

@@ -0,0 +1,3 @@
+const styles = ":host{display:block;padding:var(--odx-size-75);background-color:var(--odx-color-background-main)}::slotted(:is([slot=\"header\"],[slot=\"footer\"])){margin-inline:calc(-1 * var(--odx-size-75))}";
+
+export { styles as default };

package/dist/components/content-box/content-box.component.d.ts

@@ -0,0 +1,11 @@
+import { CustomElement } from '@odx/foundation';
+import { TemplateResult } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-content-box': OdxContentBoxComponent;
+    }
+}
+export declare class OdxContentBoxComponent extends CustomElement {
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=content-box.component.d.ts.map

package/dist/components/content-box/content-box.component.js

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

package/dist/components/content-box/content-box.models.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=content-box.models.d.ts.map

package/dist/components/content-box/index.d.ts

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

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_popover-offset: var(--odx-size-37)}odx-popover{--color-background: var(--odx-color-background-main)}:host([matchReferenceWidth]:not([matchReferenceWidth=\"false\"])){odx-popover{--min-inline-size: var(--_reference-inline-size, 0)}}";
+
+export { styles as default };

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

@@ -1,16 +1,16 @@
 import { CanBeDisabled, CustomElement } from '@odx/foundation';
-import { OdxPopoverElement, PopoverHost } from '@odx/foundation/cdk';
+import { OdxPopoverComponent, PopoverHost } from '@odx/foundation/cdk';
 import { PropertyValues, TemplateResult } from 'lit';
-import { DropdownPlacement } from './models';
+import { DropdownPlacement } from './dropdown.models';
 declare global {
     interface HTMLElementTagNameMap {
-        'odx-dropdown': OdxDropdownElement;
+        'odx-dropdown': OdxDropdownComponent;
     }
 }
-declare const OdxDropdownElement_base: import('@odx/foundation').Constructor<PopoverHost> & import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare class OdxDropdownElement extends OdxDropdownElement_base {
+declare const OdxDropdownComponent_base: import('@odx/foundation').Constructor<PopoverHost> & import('@odx/foundation').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare class OdxDropdownComponent extends OdxDropdownComponent_base {
     #private;
-    protected popoverElement: OdxPopoverElement;
+    protected popoverElement: OdxPopoverComponent;
     matchReferenceWidth: boolean;
     placement: DropdownPlacement;
     connectedCallback(): void;
@@ -20,4 +20,4 @@ export declare class OdxDropdownElement extends OdxDropdownElement_base {
     protected willUpdate(changes: PropertyValues<this>): void;
 }
 export {};
-//# sourceMappingURL=dropdown.element.d.ts.map
+//# sourceMappingURL=dropdown.component.d.ts.map

package/dist/components/dropdown/dropdown.component.js

@@ -0,0 +1,121 @@
+import { CanBeDisabled, CustomElement, getUniqueId, SharedResizeObserver, toggleAttribute, customElement } from '@odx/foundation';
+import { PopoverHost } from '@odx/foundation/cdk';
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import styles from './dropdown.component.css.js';
+import { DropdownPlacement } from './dropdown.models.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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _OdxDropdownComponent_instances, observeReferenceElement_fn, unobserveReferenceElement_fn, updateAriaAttributes_fn, _handleMouseEvent, _handleKeyboardEvent;
+let OdxDropdownComponent = class extends PopoverHost(CanBeDisabled(CustomElement)) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxDropdownComponent_instances);
+    this.matchReferenceWidth = false;
+    this.placement = DropdownPlacement.BOTTOM;
+    __privateAdd(this, _handleMouseEvent, (event) => {
+      this.togglePopover();
+    });
+    __privateAdd(this, _handleKeyboardEvent, (event) => {
+      if (event.key !== "Enter") return;
+      this.togglePopover();
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.id ||= getUniqueId("odx-dropdown");
+  }
+  mountPopover(referenceElement) {
+    super.mountPopover(referenceElement);
+    if (this.disabled || !referenceElement) return;
+    __privateMethod(this, _OdxDropdownComponent_instances, updateAriaAttributes_fn).call(this, referenceElement, this.id);
+    referenceElement.addEventListener("click", __privateGet(this, _handleMouseEvent));
+    referenceElement.addEventListener("keydown", __privateGet(this, _handleKeyboardEvent));
+    if (this.matchReferenceWidth) {
+      __privateMethod(this, _OdxDropdownComponent_instances, observeReferenceElement_fn).call(this);
+    }
+  }
+  unmountPopover(referenceElement) {
+    super.unmountPopover(referenceElement);
+    __privateMethod(this, _OdxDropdownComponent_instances, updateAriaAttributes_fn).call(this, referenceElement, null);
+    referenceElement.removeEventListener("click", __privateGet(this, _handleMouseEvent));
+    referenceElement.removeEventListener("keydown", __privateGet(this, _handleKeyboardEvent));
+    __privateMethod(this, _OdxDropdownComponent_instances, unobserveReferenceElement_fn).call(this);
+  }
+  render() {
+    return html`
+      <odx-popover>
+        <slot></slot>
+      </odx-popover>
+    `;
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("id")) {
+      __privateMethod(this, _OdxDropdownComponent_instances, updateAriaAttributes_fn).call(this, this.referenceElement, this.id);
+    }
+    if (changes.has("disabled")) {
+      if (this.disabled) {
+        this.referenceElement && this.unmountPopover(this.referenceElement);
+      } else {
+        this.mountPopover(this.referenceElement);
+      }
+    }
+    if (changes.has("matchReferenceWidth")) {
+      if (this.matchReferenceWidth) {
+        __privateMethod(this, _OdxDropdownComponent_instances, observeReferenceElement_fn).call(this);
+      } else {
+        __privateMethod(this, _OdxDropdownComponent_instances, unobserveReferenceElement_fn).call(this);
+      }
+    }
+  }
+};
+_OdxDropdownComponent_instances = new WeakSet();
+observeReferenceElement_fn = function() {
+  if (!this.referenceElement) return;
+  SharedResizeObserver.observe(this.referenceElement, () => {
+    const referenceWidth = this.referenceElement?.offsetWidth ?? null;
+    if (referenceWidth !== null) {
+      this.popoverElement.style.setProperty("--_reference-inline-size", `${referenceWidth}px`);
+    }
+  });
+};
+unobserveReferenceElement_fn = function() {
+  if (!this.referenceElement) return;
+  SharedResizeObserver.unobserve(this.referenceElement);
+};
+updateAriaAttributes_fn = function(referenceElement, id) {
+  toggleAttribute(referenceElement, "aria-describedby", id);
+};
+_handleMouseEvent = new WeakMap();
+_handleKeyboardEvent = new WeakMap();
+__decorateClass([
+  query("odx-popover", true)
+], OdxDropdownComponent.prototype, "popoverElement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxDropdownComponent.prototype, "matchReferenceWidth", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], OdxDropdownComponent.prototype, "placement", 2);
+OdxDropdownComponent = __decorateClass([
+  customElement("odx-dropdown", [styles])
+], OdxDropdownComponent);
+
+export { OdxDropdownComponent };

package/dist/{elements/dropdown/models/dropdown-placement.d.ts → components/dropdown/dropdown.models.d.ts}

@@ -3,4 +3,4 @@ export declare const DropdownPlacement: {
     readonly TOP: "top";
     readonly BOTTOM: "bottom";
 };
-//# sourceMappingURL=dropdown-placement.d.ts.map
+//# sourceMappingURL=dropdown.models.d.ts.map

package/dist/components/dropdown/dropdown.models.js

@@ -0,0 +1,8 @@
+import { PopoverPlacement } from '@odx/foundation/cdk';
+
+const DropdownPlacement = {
+  TOP: PopoverPlacement.TOP,
+  BOTTOM: PopoverPlacement.BOTTOM
+};
+
+export { DropdownPlacement };

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

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

package/dist/components/format/format-bytes.component.js

@@ -0,0 +1,46 @@
+import { customElement } from '@odx/foundation';
+import { clamp } from 'es-toolkit';
+import { property } from 'lit/decorators.js';
+import { FormatComponent } from './format.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 OdxFormatBytesComponent = class extends FormatComponent {
+  constructor() {
+    super(...arguments);
+    this.unit = "byte";
+  }
+  transform(value) {
+    const units = OdxFormatBytesComponent.UNIT_PREFIXES[this.unit];
+    const index = clamp(Math.floor(Math.log10(value) / 3), 0, units.length - 1);
+    const transformedValue = value / 1e3 ** index;
+    return this.formatNumber(transformedValue, {
+      maximumFractionDigits: 2,
+      style: "unit",
+      unit: units[index]
+    });
+  }
+};
+OdxFormatBytesComponent.UNIT_PREFIXES = {
+  bit: ["bit", "kilobit", "megabit", "gigabit", "terabit"],
+  byte: ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"]
+};
+__decorateClass([
+  property({ type: Number })
+], OdxFormatBytesComponent.prototype, "value", 2);
+__decorateClass([
+  property()
+], OdxFormatBytesComponent.prototype, "unit", 2);
+OdxFormatBytesComponent = __decorateClass([
+  customElement("odx-format-bytes")
+], OdxFormatBytesComponent);
+
+export { OdxFormatBytesComponent };

package/dist/components/format/format-date.component.js

@@ -0,0 +1,36 @@
+import { parseDate, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import { FormatComponent } from './format.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 OdxFormatDateComponent = class extends FormatComponent {
+  get valueAsDate() {
+    if (this.value === null || this.value === void 0) {
+      return null;
+    }
+    return parseDate(this.value);
+  }
+  transform(value) {
+    return this.formatDate(value, { dateStyle: this.dateStyle });
+  }
+};
+__decorateClass([
+  property()
+], OdxFormatDateComponent.prototype, "value", 2);
+__decorateClass([
+  property()
+], OdxFormatDateComponent.prototype, "dateStyle", 2);
+OdxFormatDateComponent = __decorateClass([
+  customElement("odx-format-date")
+], OdxFormatDateComponent);
+
+export { OdxFormatDateComponent };

package/dist/components/format/format-number.component.js

@@ -0,0 +1,59 @@
+import { customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import { FormatComponent } from './format.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 OdxFormatNumberComponent = class extends FormatComponent {
+  transform(value) {
+    return this.formatNumber(value, {
+      currency: this.currency,
+      currencyDisplay: this.currencyDisplay,
+      minimumFractionDigits: this.minimumFractionDigits,
+      maximumFractionDigits: this.maximumFractionDigits,
+      minimumIntegerDigits: this.minimumIntegerDigits,
+      unit: this.unit,
+      style: this.type
+    });
+  }
+};
+__decorateClass([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "value", 2);
+__decorateClass([
+  property()
+], OdxFormatNumberComponent.prototype, "currency", 2);
+__decorateClass([
+  property()
+], OdxFormatNumberComponent.prototype, "currencyDisplay", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "minimumFractionDigits", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "maximumFractionDigits", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxFormatNumberComponent.prototype, "minimumIntegerDigits", 2);
+__decorateClass([
+  property()
+], OdxFormatNumberComponent.prototype, "type", 2);
+__decorateClass([
+  property()
+], OdxFormatNumberComponent.prototype, "unit", 2);
+__decorateClass([
+  property()
+], OdxFormatNumberComponent.prototype, "unitDisplay", 2);
+OdxFormatNumberComponent = __decorateClass([
+  customElement("odx-format-number")
+], OdxFormatNumberComponent);
+
+export { OdxFormatNumberComponent };

package/dist/components/format/format.component.js

@@ -0,0 +1,33 @@
+import { IsLocalized, CustomElement } from '@odx/foundation';
+import { css, html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class FormatComponent extends IsLocalized(CustomElement) {
+  static {
+    this.styles = [css`:host { display: inline; }`];
+  }
+  render() {
+    if (this.value !== null && this.value !== void 0) {
+      try {
+        return html`${this.transform(this.value) || this.fallbackValue}`;
+      } catch (error) {
+        console.warn(error);
+      }
+    }
+    return html`${this.fallbackValue ?? nothing}`;
+  }
+}
+__decorateClass([
+  property()
+], FormatComponent.prototype, "fallbackValue");
+
+export { FormatComponent };

package/dist/components/format/relative-time.component.js

@@ -0,0 +1,80 @@
+import { parseDate, optionalAttr, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { FormatComponent } from './format.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"), 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 __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _syncInterval, _OdxRelativeTimeComponent_instances, setupSyncInterval_fn;
+let OdxRelativeTimeComponent = class extends FormatComponent {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _OdxRelativeTimeComponent_instances);
+    __privateAdd(this, _syncInterval);
+    this.value = Date.now();
+    this.syncInterval = null;
+  }
+  get valueAsDate() {
+    if (this.value === null || this.value === void 0) {
+      return null;
+    }
+    return parseDate(this.value);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearInterval(__privateGet(this, _syncInterval));
+  }
+  willUpdate(props) {
+    super.willUpdate?.(props);
+    if (props.has("syncInterval")) {
+      __privateMethod(this, _OdxRelativeTimeComponent_instances, setupSyncInterval_fn).call(this);
+    }
+  }
+  transform(value) {
+    const relativeTime = this.formatRelativeTime(value, { style: this.format, numeric: this.numeric, minUnit: this.minUnit });
+    return html`<time datetime=${optionalAttr(this.valueAsDate?.toISOString())}>${relativeTime}</time>`;
+  }
+};
+_syncInterval = new WeakMap();
+_OdxRelativeTimeComponent_instances = new WeakSet();
+setupSyncInterval_fn = function() {
+  clearInterval(__privateGet(this, _syncInterval));
+  if (typeof this.syncInterval !== "number") return;
+  __privateSet(this, _syncInterval, window.setInterval(() => this.requestUpdate(), Math.max(this.syncInterval, 1e3)));
+};
+__decorateClass([
+  property()
+], OdxRelativeTimeComponent.prototype, "value", 2);
+__decorateClass([
+  property()
+], OdxRelativeTimeComponent.prototype, "format", 2);
+__decorateClass([
+  property()
+], OdxRelativeTimeComponent.prototype, "minUnit", 2);
+__decorateClass([
+  property()
+], OdxRelativeTimeComponent.prototype, "numeric", 2);
+__decorateClass([
+  property({ type: Number })
+], OdxRelativeTimeComponent.prototype, "syncInterval", 2);
+OdxRelativeTimeComponent = __decorateClass([
+  customElement("odx-relative-time")
+], OdxRelativeTimeComponent);
+
+export { OdxRelativeTimeComponent };

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

@@ -0,0 +1,3 @@
+const styles = ":host{display:flex;block-size:100%;gap:var(--odx-size-75)}::slotted(odx-separator){--block-space: var(--odx-size-50);--inline-space: 0}";
+
+export { styles as default };

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

@@ -0,0 +1,22 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import styles from './header-actions.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 OdxHeaderActionsComponent = class extends CustomElement {
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.slot = "actions";
+  }
+};
+OdxHeaderActionsComponent = __decorateClass([
+  customElement("odx-header-actions", [styles])
+], OdxHeaderActionsComponent);
+
+export { OdxHeaderActionsComponent };