@odx/foundation 1.0.0-beta.13 → 1.0.0-beta.15

package/dist/cdk/control/listbox-form-control.d.ts

@@ -14,7 +14,7 @@ export declare abstract class ListboxFormControl<Option extends OptionControl> e
     canSelect(option: Option): boolean;
     toggleOption(option: Option, state?: boolean): void;
     connectedCallback(): void;
-    protected updateValue(option: Option): void;
+    protected updateValue(option?: Option): void;
     protected willUpdate(props: PropertyValues<this>): void;
     protected updateSelection(): void;
 }

package/dist/cdk.js

@@ -1,4 +1,4 @@
-import { FormControl, CustomElement, getKeyboardEventInfo, toAriaBooleanAttribute, CanBeHighlighted, CanBeDisabled, toggleAttribute, getUniqueId, getElementFromEvent, ActiveDescendantsController, dedupeMixin, optionalAttr, requestUpdateOnAriaChange, WithLoadingState, getAssignedElements, toPx, waitForAnimations, findClosestDocument, createMutationObserver, customElement } from '@odx/foundation';
+import { FormControl, CustomElement, getKeyboardEventInfo, toAriaBooleanAttribute, CanBeHighlighted, CanBeDisabled, getUniqueId, getElementFromEvent, ActiveDescendantsController, dedupeMixin, optionalAttr, requestUpdateOnAriaChange, WithLoadingState, getAssignedElements, toPx, waitForAnimations, findClosestDocument, createMutationObserver, customElement } from '@odx/foundation';
 import { isServer, html, unsafeCSS } from 'lit';
 import { property, queryAssignedElements, query, state } from 'lit/decorators.js';
 import { R as RovingTabindexController, m as minBy } from './vendor-dJxQG085.js';
@@ -207,7 +207,7 @@ class OptionControl extends CanBeHighlighted(CanBeDisabled(CustomElement)) {
     return this.textContent?.trim() ?? "";
   }
   toggle(force) {
-    toggleAttribute(this, "odx-active", force ?? !this.hasAttribute("odx-active"));
+    this.toggleAttribute("odx-active", force ?? !this.hasAttribute("odx-active"));
   }
   connectedCallback() {
     super.connectedCallback();
@@ -319,11 +319,13 @@ class ListboxFormControl extends FormControl(CustomElement) {
   updateValue(option) {
     if (this.multiple) {
       const value = typeof this.value === "string" ? [this.value].filter(Boolean) : this.value;
-      this.value = option.selected ? [...value, option.value] : value.filter((value2) => value2 !== option.value);
+      this.value = option?.selected ? [...value, option.value] : value.filter((value2) => value2 !== option?.value);
     } else {
-      this.value = option.selected ? option.value : "";
+      this.value = option?.selected ? option.value : "";
+    }
+    if (option) {
+      this.#activeDecendants.select(option);
     }
-    this.#activeDecendants.select(option);
     this.updateSelection();
     this.emit("change");
   }
@@ -912,7 +914,7 @@ __decorateClass$1([
   property({ reflect: true })
 ], PopoverHost.prototype, "placement", 2);
 
-const styles = ":host{--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));display:flex;background-color:transparent;border-radius:var(--_border-radius);padding-block:var(--_outer-padding);box-shadow:var(--_popover-shadow)}:host::part(arrow),:host{background-color:var(--_popover-color-background)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;color:var(--_popover-color-foreground);padding-inline:var(--_outer-padding);border-radius:inherit;z-index:2;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-block:calc(var(--odx-size-150) + var(--_outer-padding))}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
+const styles = ":host{--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));display:flex;background-color:var(--_popover-color-background);border-radius:var(--_border-radius);padding-block:var(--_outer-padding);box-shadow:var(--_popover-shadow)}[part~=content]{display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;color:var(--_popover-color-foreground);padding-inline:var(--_outer-padding);border-radius:inherit;z-index:2;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-block:calc(var(--odx-size-150) + var(--_outer-padding))}[part~=arrow]{background-color:inherit;border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

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

@@ -1,11 +1,15 @@
 import { CustomElement } from '../../lib/main.js';
+import { OdxAccordionHeader } from './accordion-header.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordion;
     }
 }
 export declare class OdxAccordion extends CustomElement {
+    items: OdxAccordionHeader[];
+    controlPosition?: 'start';
     multiple: boolean;
     constructor();
+    toggleAll(force?: boolean, emitEvent?: boolean): void;
 }
 //# sourceMappingURL=accordion.d.ts.map

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

@@ -6,7 +6,6 @@ declare global {
         'odx-button': OdxButton;
     }
 }
-declare const OdxButton_base: import('../../lib/main.js').Constructor<import('../../lib/main.js').HasLoadingState> & typeof InteractiveElement;
 /**
  * A button is clickable text or an icon that triggers an action on the page or in the background.
  * Depending on the action, content, and hierarchy, a button can be used on its own or grouped with
@@ -19,7 +18,7 @@ declare const OdxButton_base: import('../../lib/main.js').Constructor<import('..
  * @slot suffix - Contains the button's icon or state indicator, e.g. a spinner.
  * @slot - Contains button text
  */
-export declare class OdxButton extends OdxButton_base {
+export declare class OdxButton extends InteractiveElement {
     #private;
     static readonly formAssociated = true;
     alignBadge?: ButtonBadgeAlign;
@@ -39,5 +38,4 @@ export declare class OdxButton extends OdxButton_base {
     constructor();
     protected render(): TemplateResult;
 }
-export {};
 //# sourceMappingURL=button.d.ts.map

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

@@ -1,5 +1,6 @@
 export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
 export declare const ButtonSize: {
+    readonly XS: "xs";
     readonly SM: "sm";
     readonly MD: "md";
     readonly LG: "lg";

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

@@ -10,11 +10,14 @@ declare const OdxInput_base: import('../../lib/main.js').Constructor<import('../
 export declare class OdxInput extends OdxInput_base {
     #private;
     static readonly formAssociated = true;
+    private focusableElement;
+    block: boolean;
     clearable: boolean;
     placeholder: string;
     type: HTMLInputElement['type'];
     variant?: InputVariant | null;
     clear(): void;
+    focus(): void;
     protected render(): TemplateResult;
 }
 export {};

package/dist/components/select/select.d.ts

@@ -9,10 +9,13 @@ declare global {
 }
 export declare class OdxSelect extends ListboxFormControl<OptionControl> {
     #private;
+    private focusableElement;
     protected options: OdxOption[];
     protected readonly dropdown: OdxDropdown;
     maxVisibleSelectedOptions: number;
     constructor();
+    clear(): void;
+    focus(): void;
     protected render(): TemplateResult;
     protected renderSelectedOptions(): TemplateResult;
 }