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

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

@@ -0,0 +1,31 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './avatar-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/avatar-group/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/avatar-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

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

@@ -0,0 +1,3 @@
+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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF;AAED,qBACa,iBAAkB,SAAQ,aAAa;IAElD,OAAO,CAAC,EAAE,YAAY,CAAC;cAEJ,MAAM,IAAI,cAAc;CAO5C"}
+{"version":3,"file":"badge.component.d.ts","sourceRoot":"","sources":["../../../components/badge/badge.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF;AAED,qBACa,iBAAkB,SAAQ,aAAa;IAElD,OAAO,CAAC,EAAE,YAAY,CAAC;cAEJ,MAAM,IAAI,cAAc;CAO5C"}

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

@@ -0,0 +1,32 @@
+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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.models.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAC5E,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}
+{"version":3,"file":"badge.models.d.ts","sourceRoot":"","sources":["../../../components/badge/badge.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAC5E,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}

package/dist/components/badge/badge.models.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/badge/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}

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

@@ -0,0 +1,3 @@
+const styles = ":host{display:contents}:host([aria-hidden=\"true\"]){display:none}.separator{color:var(--odx-color-foreground-muted)}";
+
+export { styles as default };

package/dist/components/breadcrumb/breadcrumb-item.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.component.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,aAAa;;IAC3D,SAAS,KAAK,kBAAkB,IAAI,gBAAgB,GAAG,IAAI,CAE1D;cAEkB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK1C,MAAM,IAAI,cAAc;IAS3C,SAAS,CAAC,MAAM,IAAI,OAAO;CAS5B"}
+{"version":3,"file":"breadcrumb-item.component.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/breadcrumb-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAErE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,0BAA0B,CAAC;KACnD;CACF;AAED,qBACa,0BAA2B,SAAQ,aAAa;;IAC3D,SAAS,KAAK,kBAAkB,IAAI,gBAAgB,GAAG,IAAI,CAE1D;cAEkB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAK1C,MAAM,IAAI,cAAc;IAS3C,SAAS,CAAC,MAAM,IAAI,OAAO;CAS5B"}

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

@@ -0,0 +1,55 @@
+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 name="chevron-right" class="separator" role="presentation"></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.ariaCurrent = this.isLast() ? "page" : null;
+};
+OdxBreadcrumbItemComponent = __decorateClass([
+  customElement("odx-breadcrumb-item", [styles])
+], OdxBreadcrumbItemComponent);
+
+export { OdxBreadcrumbItemComponent };

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_gap: var(--odx-size-37);display:flex;column-gap:var(--_gap);flex-wrap:wrap;cursor:default;place-items:center;padding-inline:var(--odx-size-37);margin-block:var(--odx-size-37)}::slotted(odx-breadcrumb-item){gap:var(--_gap)}";
+
+export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.component.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAyC,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKrE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,sBAAsB,CAAC;KAC1C;CACF;AACD,qBACa,sBAAuB,SAAQ,aAAa;;IAEvD,OAAO,CAAC,KAAK,CAAgC;IAG7C,OAAO,CAAC,aAAa,CAAgC;IAGrD,OAAO,CAAC,SAAS,CAAgC;IAGjD,GAAG,SAAK;cAEW,MAAM,IAAI,cAAc;cAQxB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAkB9D"}
+{"version":3,"file":"breadcrumb.component.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/breadcrumb.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAyC,MAAM,iBAAiB,CAAC;AACvF,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKrE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,sBAAsB,CAAC;KAC1C;CACF;AACD,qBACa,sBAAuB,SAAQ,aAAa;;IAEvD,OAAO,CAAC,KAAK,CAAgC;IAG7C,OAAO,CAAC,aAAa,CAAgC;IAGrD,OAAO,CAAC,SAAS,CAAgC;IAGjD,GAAG,SAAK;cAEW,MAAM,IAAI,cAAc;cAQxB,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAkB9D"}

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/base-button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC;;;;;;;;;;;GAWG;AACH,qBACa,mBAAoB,SAAQ,QAAQ;;IAC/C;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;cAE5B,MAAM,IAAI,cAAc;cAQxB,aAAa,IAAI,cAAc;CAsBnD"}
+{"version":3,"file":"base-button.d.ts","sourceRoot":"","sources":["../../../components/button/base-button.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAEnC;;;;;;;;;;;GAWG;AACH,qBACa,mBAAoB,SAAQ,QAAQ;;IAC/C;;OAEG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;cAE5B,MAAM,IAAI,cAAc;cAQxB,aAAa,IAAI,cAAc;CAsBnD"}

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

@@ -0,0 +1,66 @@
+import { optionalAttr, requestUpdateOnAriaChange } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.js';
+import { BaseLink } from '../link/base-link.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 _BaseButtonComponent_instances, renderButton_fn;
+let BaseButtonComponent = class extends BaseLink {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _BaseButtonComponent_instances);
+    this.type = "button";
+  }
+  render() {
+    return html`${when(
+      this.href,
+      () => super.render(),
+      () => __privateMethod(this, _BaseButtonComponent_instances, renderButton_fn).call(this)
+    )}`;
+  }
+  renderContent() {
+    return html`
+      <slot name="start"></slot>
+      <slot></slot>
+      <slot name="end"></slot>
+    `;
+  }
+};
+_BaseButtonComponent_instances = new WeakSet();
+renderButton_fn = function() {
+  const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
+  return html`<button
+      part="anchor button"
+      aria-label="${optionalAttr(ariaLabel)}"
+      aria-haspopup="${optionalAttr(ariaHasPopup)}"
+      aria-expanded="${optionalAttr(ariaExpanded)}"
+      type=${this.type}
+      ?disabled=${this.disabled}
+    >
+      ${this.renderContent()}
+    </button>`;
+};
+__decorateClass([
+  property()
+], BaseButtonComponent.prototype, "type", 2);
+BaseButtonComponent = __decorateClass([
+  requestUpdateOnAriaChange(["ariaLabel", "ariaHasPopup", "ariaExpanded"])
+], BaseButtonComponent);
+
+export { BaseButtonComponent };

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_color-stroke: transparent;--_color-stroke-hover: transparent;--_color-stroke-pressed: transparent;--_block-size: var(--odx-size-225);--_icon-size: var(--odx-typography-font-size-5);--_text-size: var(--odx-typography-font-size-3);--_spinner-size: var(--odx-size-50);--_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-sm);white-space:nowrap;margin-block:var(--_margin-block);-webkit-tap-highlight-color:transparent}:host(:focus-visible){outline:none}:host,:host::part(anchor){display:inline-flex;place-items:center;place-content:center}:host::part(anchor){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:calc(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(--_text-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)}.spinner{--_size: var(--_spinner-size);color:var(--_color-foreground);position:absolute;inset:var(--odx-border-width-thin)}:host::part(anchor)::-moz-focus-inner{padding:0;border:0}:host(:hover)::part(anchor){--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover)}:host(:active)::part(anchor){--_color-background: var(--_color-background-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host::part(anchor):focus-visible{outline-color:var(--odx-focus-ring-color)}:host([aria-disabled=\"true\"])::part(anchor){--_color-background: var(--odx-color-disabled-fill);--_color-foreground: var(--odx-color-disabled-foreground);--_color-stroke: var(--odx-color-disabled-stroke);cursor:not-allowed}: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([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([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([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([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([variant=\"success\"]){--_color-background: var(--odx-color-success-rest);--_color-background-hover: var(--odx-color-success-hover);--_color-background-pressed: var(--odx-color-success-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([variant=\"confirmation\"]){--_color-background: var(--odx-color-confirmation-rest);--_color-background-hover: var(--odx-color-confirmation-hover);--_color-background-pressed: var(--odx-color-confirmation-pressed);--_color-foreground: var(--odx-color-foreground-dark)}:host([size=\"sm\"]){--_block-size: var(--odx-size-150);--_padding-inline: var(--odx-size-50);--_text-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-100);--_margin-block: 0;--_spinner-size: var(--odx-size-37)}:host([size=\"lg\"]){--_block-size: var(--odx-size-300);--_padding-inline: var(--odx-size-100);--_text-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-typography-font-size-6);--_margin-block: 0}:host([loading]:not([loading=\"false\"]))::part(anchor){color:transparent}odx-icon,::slotted(odx-icon){font-size:var(--_icon-size);margin-inline:var(--_margin-icon)}:host-context(odx-button-group[connected]:not([vertical])):host(:not(:last-of-type))::part(anchor){border-inline-end-width:0}:host-context(odx-button-group[connected][vertical]):host(:not(:last-of-type))::part(anchor){border-block-end-width:0}";
+
+export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAkB,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF;;AAED;;;;;;;;;;;GAWG;AACH,qBACa,kBAAmB,SAAQ,uBAAqC;;IAC3E,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAGtC;;OAEG;IAEH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,aAAa,CAAC;;cASL,aAAa,IAAI,cAAc;CAmBnD"}
+{"version":3,"file":"button.component.d.ts","sourceRoot":"","sources":["../../../components/button/button.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAkB,MAAM,KAAK,CAAC;AAG1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEjE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,kBAAkB,CAAC;KAClC;CACF;;AAED;;;;;;;;;;;GAWG;AACH,qBACa,kBAAmB,SAAQ,uBAAqC;;IAC3E,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAQ;IAGtC;;OAEG;IAEH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;OAEG;IAEH,OAAO,CAAC,EAAE,aAAa,CAAC;;cASL,aAAa,IAAI,cAAc;CAmBnD"}

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

@@ -0,0 +1,67 @@
+import { WithLoadingState, customElement } from '@odx/foundation';
+import { isServer, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { when } from 'lit/directives/when.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());
+    if (!isServer) {
+      this.addEventListener("click", __privateMethod(this, _OdxButtonComponent_instances, handleClick_fn));
+    }
+  }
+  renderContent() {
+    return html`
+      <slot name="start"></slot>
+      <slot></slot>
+      <slot name="end"></slot>
+      ${when(this.loading, () => html`<odx-loading-indicator class="spinner"></odx-loading-indicator>`)}
+    `;
+  }
+};
+_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({ 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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.models.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AACtE,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAC/E,eAAO,MAAM,aAAa;;;;;;;;CAQhB,CAAC"}
+{"version":3,"file":"button.models.d.ts","sourceRoot":"","sources":["../../../components/button/button.models.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AACtE,eAAO,MAAM,UAAU;;;;CAIb,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAC/E,eAAO,MAAM,aAAa;;;;;;;;CAQhB,CAAC"}

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

@@ -0,0 +1,16 @@
+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/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.component.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/button-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAI/D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,uBAAuB,CAAC;KAC7C;CACF;AAED,qBACa,uBAAwB,SAAQ,aAAa;IAExD,KAAK,UAAS;IAGd,SAAS,UAAS;IAGlB,QAAQ,UAAS;CAClB"}
+{"version":3,"file":"button-group.component.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAiB,MAAM,iBAAiB,CAAC;AAI/D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,uBAAuB,CAAC;KAC7C;CACF;AAED,qBACa,uBAAwB,SAAQ,aAAa;IAExD,KAAK,UAAS;IAGd,SAAS,UAAS;IAGlB,QAAQ,UAAS;CAClB"}

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

@@ -0,0 +1,36 @@
+import { CustomElement, customElement } from '@odx/foundation';
+import { property } from 'lit/decorators.js';
+import styles from './button-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 OdxButtonGroupComponent = class extends CustomElement {
+  constructor() {
+    super(...arguments);
+    this.block = false;
+    this.connected = false;
+    this.vertical = false;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "block", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "connected", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxButtonGroupComponent.prototype, "vertical", 2);
+OdxButtonGroupComponent = __decorateClass([
+  customElement("odx-button-group", [styles])
+], OdxButtonGroupComponent);
+
+export { OdxButtonGroupComponent };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/button-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_card-padding: var(--odx-size-150);display:grid;place-content:flex-start;background-color:var(--odx-color-background-main);grid-template-columns:1fr auto;border-radius:var(--odx-border-radius-md);padding:var(--_card-padding);overflow:clip;max-width:100%;grid-template-areas:\"image image\" \"avatar avatar\" \"title header-actions\" \"content content\" \"footer footer\"}.header,.title{display:flex;place-items:center;overflow:hidden;min-block-size:var(--odx-size-225);margin-block-end:var(--odx-size-50)}.title{grid-area:title}.header{grid-area:header-actions}.avatar{display:flex;place-items:flex-end;grid-area:avatar;margin-block-start:calc(-1 * var(--odx-size-50))}.image{grid-area:image;margin:calc(-1 * var(--_card-padding));margin-block-end:var(--odx-size-150);position:relative}.image:after{content:\"\";position:absolute;inset:0;background-color:var(--odx-color-transparent-hover);opacity:0;pointer-events:none;transition:var(--odx-transition-default);backdrop-filter:blur(var(--odx-elevation-blur))}:host::part(content){grid-area:content}:host::part(footer){grid-area:footer}[part=image-container]+[part=avatar-container]{block-size:0}slot[name=image]::slotted(*){max-inline-size:100%;max-block-size:100%;object-fit:cover;aspect-ratio:16 / 9;user-select:none;pointer-events:none}slot[name=avatar]::slotted(*){margin:0}:host(:hover){cursor:pointer}:host(:hover) .image:after{opacity:1}";
+
+export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"card.component.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAA+B,MAAM,iBAAiB,CAAC;AAC5F,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF;;AAED,qBACa,gBAAiB,SAAQ,qBAA4B;cAC7C,MAAM,IAAI,cAAc;CAW5C"}
+{"version":3,"file":"card.component.d.ts","sourceRoot":"","sources":["../../../components/card/card.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAA+B,MAAM,iBAAiB,CAAC;AAC5F,OAAO,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,gBAAgB,CAAC;KAC9B;CACF;;AAED,qBACa,gBAAiB,SAAQ,qBAA4B;cAC7C,MAAM,IAAI,cAAc;CAW5C"}

package/dist/components/card/card.component.js

@@ -0,0 +1,30 @@
+import { CanBeDisabled, CustomElement, optionalSlot, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import styles from './card.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 OdxCardComponent = class extends CanBeDisabled(CustomElement) {
+  render() {
+    return html`
+      ${optionalSlot(this, "header")}
+      ${optionalSlot(this, "image")}
+      ${optionalSlot(this, "avatar")}
+      ${optionalSlot(this, "title")}
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+OdxCardComponent = __decorateClass([
+  customElement("odx-card", [styles])
+], OdxCardComponent);
+
+export { OdxCardComponent };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/card/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

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

@@ -0,0 +1,3 @@
+const styles = ":host{--_indicator-space: var(--odx-size-12);--_indicator-size: calc(var(--odx-size-150) - var(--_indicator-space) * 2);--_indicator-color-background: var(--odx-color-selection-control-fill);--_indicator-color-stroke: var(--odx-color-selection-control-stroke);--_indicator-color-foreground: var(--odx-palette-transparent);--_label-color-foreground: var(--odx-color-text);cursor:pointer;display:inline-flex;margin:var(--odx-size-37) var(--odx-size-75);user-select:none;border-radius:var(--odx-border-radius-controls);outline:var(--odx-focus-ring-outline);padding:var(--_indicator-space);transition-property:outline-color}:host,.indicator,.content{transition:var(--odx-transition-reduced)}.indicator{display:flex;place-content:center;place-items:center;block-size:var(--_indicator-size);inline-size:var(--_indicator-size);flex-shrink:0;border-radius:var(--odx-border-radius-controls);background-color:var(--_indicator-color-background);border:var(--odx-border-width-thin) solid var(--_indicator-color-stroke);border-color:var(--_indicator-color-stroke);color:var(--_indicator-color-foreground);transition-property:background-color,border-color}.label{display:inline-block}.content{color:var(--_label-color-foreground);margin-block:calc(-1 * var(--_indicator-space));transition-property:color}:host(:not(:empty)) .indicator{margin-inline-end:var(--odx-size-75)}:host(:empty) .content{display:none}:host(:hover){--_indicator-color-stroke: var(--odx-color-selection-control-stroke-hover);--_indicator-color-background: var(--odx-color-selection-control-fill-hover)}:host(:focus-visible){outline-color:var(--odx-focus-ring-color)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-selection-control-fill-selected);--_indicator-color-foreground: var(--odx-color-foreground-light);--_indicator-color-stroke: var(--odx-color-selection-control-stroke-selected)}:host(:is([aria-checked=\"true\"],[aria-checked=\"mixed\"]):not(:is([aria-disabled],[aria-readonly])):hover){--_indicator-color-background: var(--odx-color-selection-control-fill-selected-hover)}:host([aria-disabled=\"true\"]){--_indicator-color-background: var(--odx-color-disabled-fill);--_indicator-color-foreground: var(--odx-palette-transparent);--_indicator-color-stroke: var(--odx-selection-control-color-border-disabled);--_label-color-foreground: var(--odx-color-disabled-foreground);cursor:not-allowed}:host([aria-disabled=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-background: var(--odx-color-disabled-fill-selected);--_indicator-color-foreground: var(--odx-color-disabled-foreground-selected);--_indicator-color-stroke: var(--_indicator-color-background)}:host([aria-readonly=\"true\"]){--_indicator-color-background: var(--odx-color-selection-control-fill-readonly);--_indicator-color-stroke: var(--odx-color-input-control-stroke-readonly);cursor:default}:host([aria-readonly=\"true\"]:is([aria-checked=\"true\"],[aria-checked=\"mixed\"])){--_indicator-color-foreground: var(--odx-color-foreground)}";
+
+export { styles as default };

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAiB,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIvE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,oBAAoB,CAAC;KACtC;CACF;AAED,qBACa,oBAAqB,SAAQ,mBAAmB;IAE3D,aAAa,UAAS;cAEH,MAAM,IAAI,cAAc;cAgBxB,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAS3D,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,aAAa,UAAQ,GAAG,IAAI;CAK9D"}
+{"version":3,"file":"checkbox.component.d.ts","sourceRoot":"","sources":["../../../components/checkbox/checkbox.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAiB,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAQ,MAAM,KAAK,CAAC;AAIvE,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,oBAAoB,CAAC;KACtC;CACF;AAED,qBACa,oBAAqB,SAAQ,mBAAmB;IAE3D,aAAa,UAAS;cAEH,MAAM,IAAI,cAAc;cAgBxB,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAS3D,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,aAAa,UAAQ,GAAG,IAAI;CAK9D"}

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

@@ -0,0 +1,57 @@
+import { CheckboxFormControl, customElement } from '@odx/foundation';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './checkbox.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 OdxCheckboxComponent = class extends CheckboxFormControl {
+  constructor() {
+    super(...arguments);
+    this.indeterminate = false;
+  }
+  render() {
+    return html`
+      <div class="indicator">
+        <odx-icon name=${this.indeterminate ? "core::minus" : "core::check"}></odx-icon>
+      </div>
+      <div class="content">
+        <div class="label">
+          <slot></slot>
+        </div>
+        <div class="description">
+          <slot name="description"></slot>
+        </div>
+      </div>
+    `;
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("indeterminate")) {
+      if (this.indeterminate) {
+        this.ariaChecked = "mixed";
+      }
+    }
+  }
+  toggle(state, dispatchEvent = false) {
+    super.toggle(state, dispatchEvent);
+    if (this.disabled || this.readonly) return;
+    this.indeterminate = false;
+  }
+};
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], OdxCheckboxComponent.prototype, "indeterminate", 2);
+OdxCheckboxComponent = __decorateClass([
+  customElement("odx-checkbox", [styles])
+], OdxCheckboxComponent);
+
+export { OdxCheckboxComponent };