@odx/foundation 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/cdk/popover/popover.models.d.ts

@@ -23,7 +23,7 @@ export interface PopoverPlacementOptions {
     offset: number;
     outerPadding: number;
 }
-export declare const PopoverPlacementOptions: (options?: Partial<PopoverPlacementOptions> | null | undefined) => PopoverPlacementOptions;
+export declare const PopoverPlacementOptions: (config?: Partial<PopoverPlacementOptions> | null | undefined) => PopoverPlacementOptions;
 export type PopoverSide = (typeof PopoverSide)[keyof typeof PopoverSide];
 export declare const PopoverSide: {
     readonly TOP: "top";

package/dist/cdk.js

@@ -1,6 +1,6 @@
-import { dedupeMixin, createOptions, toPx, waitForAnimations, findClosestDocument, createMutationObserver, customElement, CustomElement } from '@odx/foundation';
+import { dedupeMixin, createConfig, toPx, waitForAnimations, findClosestDocument, createMutationObserver, customElement, CustomElement } from '@odx/foundation';
 import { property, state } from 'lit/decorators.js';
-import { m as minBy, a as computePosition, o as offset, s as shift, f as flip, b as size, d as arrow, h as hide, e as autoUpdate } from './vendor-C_WVAD3D.js';
+import { m as minBy, a as computePosition, o as offset, s as shift, f as flip, b as size, d as arrow, h as hide, e as autoUpdate } from './vendor-BpQeSxmW.js';
 import { isServer, unsafeCSS, html } from 'lit';
 import { when } from 'lit/directives/when.js';
 
@@ -43,7 +43,7 @@ const IsDraggable = dedupeMixin((superClass) => {
   return IsDraggableElement;
 });
 
-const DragControllerOptions = createOptions({
+const DragControllerOptions = createConfig({
   getDraggableElements: () => []
 });
 class DragController {
@@ -128,7 +128,7 @@ class DragController {
   }
 }
 
-const styles$1 = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-transparent);--_popover-color-foreground: inherit;--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));background-color:transparent;opacity:0;padding:var(--_popover-offset);transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size);margin:0;top:var(--_popover-position-y);left:var(--_popover-position-x)}:host(:popover-open){display:flex;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y))}}}@layer state{:host,:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset));padding-block-start:var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0;padding-inline-end:var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);padding-block-end:var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline-start:var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding))}}";
+const styles$1 = "@layer base{:host{--max-block-size: 100%;--max-inline-size: 100%;--_popover-color-background: var(--odx-color-transparent);--_popover-color-foreground: var(--odx-color-foreground-base);--_popover-min-block-size: inherit;--_popover-max-block-size: 100%;--_popover-min-inline-size: inherit;--_popover-max-inline-size: 100%;--_popover-transition: var(--odx-popover-transition, var(--odx-motion-duration-default));--_popover-offset: var(--odx-size-50);--_popover-shadow: var(--odx-popover-shadow, var(--odx-shadow-level-1));--_popover-outer-padding: var(--odx-size-75);--_max-block-size: min(var(--_popover-max-block-size), var(--max-block-size));--_max-inline-size: min(var(--_popover-max-inline-size), var(--max-inline-size));background-color:transparent;opacity:0;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y));transition:opacity var(--_popover-transition),transform var(--_popover-transition) allow-discrete,overlay var(--_popover-transition) allow-discrete,display var(--_popover-transition) allow-discrete;max-block-size:var(--_max-block-size);max-inline-size:var(--_max-inline-size);margin:0;top:var(--_popover-position-y);left:var(--_popover-position-x)}:host(:popover-open){display:flex;opacity:1;transform:translate(0);@starting-style{opacity:0;transform:translate(var(--_popover-transition-offset-x),var(--_popover-transition-offset-y))}}}@layer state{:host,:host([popover-placement^=\"top\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: calc(-1 * var(--_popover-offset));padding-block:var(--_popover-outer-padding) var(--_popover-offset);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"right\"]){--_popover-transition-offset-x: var(--_popover-offset);--_popover-transition-offset-y: 0;padding-inline:var(--_popover-offset) var(--_popover-outer-padding);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"bottom\"]){--_popover-transition-offset-x: 0;--_popover-transition-offset-y: var(--_popover-offset);padding-block:var(--_popover-offset) var(--_popover-outer-padding);max-block-size:calc(var(--_max-block-size) - var(--_popover-outer-padding))}:host([popover-placement^=\"left\"]){--_popover-transition-offset-x: calc(-1 * var(--_popover-offset));--_popover-transition-offset-y: 0;padding-inline:var(--_popover-outer-padding) var(--_popover-offset);max-inline-size:calc(var(--_max-inline-size) - var(--_popover-outer-padding))}}";
 
 const PopoverPlacement = {
   TOP: "top",
@@ -144,7 +144,7 @@ const PopoverPlacement = {
   LEFT_START: "left-start",
   LEFT_END: "left-end"
 };
-const PopoverPlacementOptions = createOptions({
+const PopoverPlacementOptions = createConfig({
   placement: PopoverPlacement.BOTTOM,
   enableFallback: true,
   fallbackAxisSideDirection: "end",
@@ -169,10 +169,11 @@ async function computePopoverPlacement(referenceElement, floatingElement, option
   const flipMiddleWare = enableFallback ? flip({ fallbackAxisSideDirection }) : void 0;
   floatingElement.setAttribute("popover-placement", placement);
   const result = await computePosition(referenceElement, floatingElement, {
+    strategy: "fixed",
     placement,
     middleware: [
       offset(offset$1 + arrowSize / 2),
-      shift({ padding: 0 }),
+      shift({ padding: 12 }),
       flipMiddleWare,
       size({
         apply: ({ availableHeight, availableWidth, rects, placement: currentPlacement }) => {

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

@@ -13,7 +13,7 @@ export declare class OdxAccordionHeader extends OdxAccordionHeader_base {
     get panel(): OdxAccordionPanel | null;
     connectedCallback(): void;
     protected render(): TemplateResult;
-    protected willUpdate(props: PropertyValues<this>): void;
+    protected updated(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=accordion-header.d.ts.map

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

@@ -6,6 +6,7 @@ declare global {
     }
 }
 export declare class OdxAccordionPanel extends CustomElement {
+    hidden: boolean;
     connectedCallback(): void;
     protected render(): TemplateResult;
 }

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

@@ -1,15 +1,11 @@
 import { CustomElement } from '../../lib/main.js';
-import { PropertyValues } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-accordion': OdxAccordion;
     }
 }
 export declare class OdxAccordion extends CustomElement {
-    #private;
-    private controls;
     multiple: boolean;
     constructor();
-    protected updated(props: PropertyValues): void;
 }
 //# sourceMappingURL=accordion.d.ts.map

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

@@ -1,5 +1,6 @@
 import { TemplateResult, nothing } from 'lit';
 import { BaseLink } from '../link/index.js';
+import { ButtonLoaderSlot } from './button.models.js';
 declare const BaseButton_base: import('../../lib/main.js').Constructor<import('../../lib/main.js').HasLoadingState> & typeof BaseLink;
 /**
  * A button is clickable text or an icon that triggers an action on the page or in the background.
@@ -14,14 +15,16 @@ declare const BaseButton_base: import('../../lib/main.js').Constructor<import('.
  * @slot - Contains button text
  */
 export declare class BaseButton extends BaseButton_base {
+    #private;
     static readonly styles: import('lit').CSSResult;
+    protected naviveButton: HTMLButtonElement;
     lineClamp: 1 | 2;
+    loaderSlot?: ButtonLoaderSlot;
     protected render(): TemplateResult;
     protected renderContent(withSpinner?: boolean): TemplateResult;
     protected renderButton(): TemplateResult<1>;
-    protected renderSlot(name: 'prefix' | 'suffix', force?: boolean): TemplateResult;
     protected renderOverlay(): TemplateResult | typeof nothing;
-    protected renderSpinner(overlay?: boolean): TemplateResult;
+    protected renderLoader(): TemplateResult;
 }
 export {};
 //# sourceMappingURL=base-button.d.ts.map

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

@@ -1,6 +1,6 @@
 import { TemplateResult } from 'lit';
 import { BaseButton } from './base-button.js';
-import { ButtonSize, ButtonVariant } from './button.models.js';
+import { ButtonBadgeAlign, ButtonSize, ButtonVariant } from './button.models.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button': OdxButton;
@@ -22,7 +22,7 @@ declare const OdxButton_base: import('../../lib/main.js').Constructor<import('..
 export declare class OdxButton extends OdxButton_base {
     #private;
     static readonly formAssociated = true;
-    alignBadge?: 'center' | 'end';
+    alignBadge?: ButtonBadgeAlign;
     block: boolean;
     /**
      * The type of the button.

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

@@ -12,4 +12,15 @@ export declare const ButtonVariant: {
     readonly GHOST: "ghost";
     readonly DANGER: "danger";
 };
+export type ButtonLoaderSlot = (typeof ButtonLoaderSlot)[keyof typeof ButtonLoaderSlot];
+export declare const ButtonLoaderSlot: {
+    readonly PREFIX: "prefix";
+    readonly SUFFIX: "suffix";
+};
+export type ButtonBadgeAlign = (typeof ButtonBadgeAlign)[keyof typeof ButtonBadgeAlign];
+export declare const ButtonBadgeAlign: {
+    readonly START: "start";
+    readonly CENTER: "center";
+    readonly END: "end";
+};
 //# sourceMappingURL=button.models.d.ts.map

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

@@ -1,6 +1,4 @@
 import { CanBeDisabled, CustomElement } from '../../lib/main.js';
-import { PropertyValues } from 'lit';
-import { ButtonSize, ButtonVariant, OdxButton } from '../button/index.js';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-button-group': OdxButtonGroup;
@@ -8,14 +6,8 @@ declare global {
 }
 declare const OdxButtonGroup_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
 export declare class OdxButtonGroup extends OdxButtonGroup_base {
-    protected buttons: OdxButton[];
-    constructor();
     block: boolean;
-    connected: boolean;
     vertical: boolean;
-    size?: ButtonSize;
-    variant?: ButtonVariant;
-    protected updated(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=button-group.d.ts.map

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

@@ -9,17 +9,17 @@ declare global {
 declare const OdxListItem_base: import('../../lib/main.js').Constructor<CanBeSelected> & import('../../lib/main.js').Constructor<CanBeExpanded> & typeof BaseButton;
 export declare class OdxListItem extends OdxListItem_base {
     #private;
+    private expandableItems;
     compact: boolean;
     muted: boolean;
-    withControl: boolean;
-    withExpandedIndicator: boolean;
+    withExpandControl: boolean;
+    withExpandIndicator: boolean;
     constructor();
     isExpandable(): boolean;
     connectedCallback(): void;
     protected render(): TemplateResult;
     protected renderContent(): TemplateResult;
-    protected renderSpinner(overlay?: boolean): TemplateResult;
-    protected willUpdate(props: PropertyValues<this>): void;
+    protected updated(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=list-item.d.ts.map

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

@@ -5,6 +5,8 @@ declare global {
     }
 }
 export declare class OdxList extends CustomElement {
+    multiple: boolean;
+    constructor();
     connectedCallback(): void;
 }
 //# sourceMappingURL=list.d.ts.map

package/dist/components/stack/stack.d.ts

@@ -1,5 +1,5 @@
 import { CustomElement } from '../../lib/main.js';
-import { TemplateResult } from 'lit';
+import { PropertyValues, TemplateResult } from 'lit';
 import { StackAlign, StackGap, StackJustify } from './stack.models.js';
 declare global {
     interface HTMLElementTagNameMap {
@@ -10,8 +10,9 @@ export declare class OdxStack extends CustomElement {
     align?: StackAlign;
     justify?: StackJustify;
     gap?: StackGap | null;
-    vertical: boolean;
+    horizontal: boolean;
     wrap: boolean;
     protected render(): TemplateResult;
+    protected updated(props: PropertyValues<this>): void;
 }
 //# sourceMappingURL=stack.d.ts.map

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

@@ -1,8 +1,8 @@
 export type StackAlign = (typeof StackAlign)[keyof typeof StackAlign];
 export declare const StackAlign: {
     readonly START: "start";
-    readonly END: "end";
     readonly CENTER: "center";
+    readonly END: "end";
 };
 export type StackGap = (typeof StackGap)[keyof typeof StackGap];
 export declare const StackGap: {

package/dist/components/toggle-content/toggle-content.d.ts

@@ -1,13 +1,12 @@
 import { CustomElement } from '../../lib/main.js';
-import { HTMLTemplateResult, PropertyValues, TemplateResult } from 'lit';
+import { HTMLTemplateResult, TemplateResult } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
         'odx-toggle-content': OdxToggleContent;
     }
 }
 export declare class OdxToggleContent extends CustomElement {
-    expanded: boolean;
+    hidden: boolean;
     protected render(): HTMLTemplateResult | TemplateResult | string;
-    protected willUpdate(props: PropertyValues<this>): void;
 }
 //# sourceMappingURL=toggle-content.d.ts.map