@odx/foundation 1.0.0-beta.275 → 1.0.0-beta.276
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -0
- package/dist/components/accordion/accordion.d.ts +0 -2
- package/dist/components/accordion-item/accordion-item.d.ts +12 -6
- package/dist/components/main.d.ts +0 -1
- package/dist/components.js +43 -83
- package/dist/main.js +1 -0
- package/package.json +3 -3
- package/dist/components/accordion-panel/accordion-panel.d.ts +0 -21
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
## 1.0.0-beta.276
|
|
2
|
+
|
|
3
|
+
### Major Changes
|
|
4
|
+
|
|
5
|
+
- Remove `odx-accordion-panel` component, use default slot of `odx-accordion-item` instead:
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<odx-accordion-item label="Accordion Label">
|
|
9
|
+
Accordion Item Content
|
|
10
|
+
</odx-accordion-item>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
With custom label:
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<odx-accordion-item >
|
|
17
|
+
<odx-title>Custom Accordion Label</odx-title>
|
|
18
|
+
Accordion Item Content
|
|
19
|
+
</odx-accordion-item>
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### Bug Fixes
|
|
23
|
+
|
|
24
|
+
- Fix `aria-expanded` attribute not updating correctly on `odx-accordion-item` component
|
|
25
|
+
- Fix nested `odx-accordion` not collapsing when parent item is collapsed
|
|
26
|
+
- Fix cursor style when `odx-accordion-item` is in loading state
|
|
27
|
+
- Fix expandable controller not detecting nested controls correctly
|
|
28
|
+
- Fix dialog commands handling foreign dialog commands by mistake
|
|
29
|
+
- Fix `odx-dialog` dismiss behavior when clicking inside another dialog
|
|
30
|
+
|
|
31
|
+
|
|
1
32
|
## 1.0.0-beta.275
|
|
2
33
|
|
|
3
34
|
### Minor Changes
|
|
@@ -25,12 +25,10 @@ export declare const AccordionIndicatorPlacement: Pick<{
|
|
|
25
25
|
* @event collapse - Emitted when an accordion item is collapsed. Can be canceled to prevent collapse.
|
|
26
26
|
*/
|
|
27
27
|
export declare class OdxAccordion extends CustomElement implements ExpandableItemManagerHost<OdxAccordionItem> {
|
|
28
|
-
#private;
|
|
29
28
|
indicatorPlacement: AccordionIndicatorPlacement;
|
|
30
29
|
multiple: boolean;
|
|
31
30
|
size: AccordionItemSize;
|
|
32
31
|
constructor();
|
|
33
|
-
connectedCallback(): void;
|
|
34
32
|
getItems(): OdxAccordionItem[];
|
|
35
33
|
toggleAll(state?: boolean, emitEvent?: boolean): void;
|
|
36
34
|
protected updated(props: PropertyValues<this>): void;
|
|
@@ -2,7 +2,7 @@ import { PropertyValues, TemplateResult } from 'lit';
|
|
|
2
2
|
import { ButtonControlElement } from '../abstract/button-control-element.js';
|
|
3
3
|
import { CanBeExpanded } from '../abstract/controllers/expandable-controller.js';
|
|
4
4
|
import { ValuesOf } from '../abstract/models.js';
|
|
5
|
-
import {
|
|
5
|
+
import { OdxAccordion } from '../accordion/accordion.js';
|
|
6
6
|
declare global {
|
|
7
7
|
interface HTMLElementTagNameMap {
|
|
8
8
|
'odx-accordion-item': OdxAccordionItem;
|
|
@@ -16,19 +16,25 @@ export declare const AccordionItemSize: Pick<{
|
|
|
16
16
|
}, "MD" | "LG">;
|
|
17
17
|
/**
|
|
18
18
|
* @summary An accordion item component that can be expanded or collapsed to show or hide content.
|
|
19
|
-
* @dependencies odx-accordion-panel
|
|
20
19
|
*
|
|
21
|
-
* @
|
|
22
|
-
*
|
|
20
|
+
* @csspart content - The content container
|
|
21
|
+
*
|
|
22
|
+
* @slot label - Slot for a custom label of the accordion item
|
|
23
|
+
*
|
|
24
|
+
* @event toggle - Emitted when an accordion item changes its open state. Can be canceled to prevent expansion.
|
|
23
25
|
*/
|
|
24
26
|
export declare class OdxAccordionItem extends ButtonControlElement implements CanBeExpanded {
|
|
25
27
|
expanded: boolean;
|
|
28
|
+
label: string;
|
|
26
29
|
size: AccordionItemSize;
|
|
27
30
|
connectedCallback(): void;
|
|
28
|
-
|
|
31
|
+
protected firstUpdated(props: PropertyValues<this>): void;
|
|
32
|
+
getChildAccordions(): OdxAccordion[];
|
|
29
33
|
isExpandable(): boolean;
|
|
30
34
|
toggle(state?: boolean, emitEvent?: boolean): void;
|
|
31
|
-
protected
|
|
35
|
+
protected render(): TemplateResult;
|
|
32
36
|
protected updated(props: PropertyValues<this>): void;
|
|
37
|
+
protected renderContent(): TemplateResult;
|
|
38
|
+
protected renderLabel(): TemplateResult;
|
|
33
39
|
}
|
|
34
40
|
//# sourceMappingURL=accordion-item.d.ts.map
|
|
@@ -15,7 +15,6 @@ export * from './abstract/listbox-control-element.js';
|
|
|
15
15
|
export * from './abstract/models.js';
|
|
16
16
|
export * from './accordion/accordion.js';
|
|
17
17
|
export * from './accordion-item/accordion-item.js';
|
|
18
|
-
export * from './accordion-panel/accordion-panel.js';
|
|
19
18
|
export * from './action-button/action-button.js';
|
|
20
19
|
export * from './action-group/action-group.js';
|
|
21
20
|
export * from './anchor-navigation/anchor-navigation.js';
|
package/dist/components.js
CHANGED
|
@@ -225,7 +225,7 @@ const CheckboxControl = dedupeMixin((superClass) => {
|
|
|
225
225
|
return CheckboxControlBehavior;
|
|
226
226
|
});
|
|
227
227
|
|
|
228
|
-
const styles$1s = "@layer reset{:not(:defined){visibility:hidden}*,:before,:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}input,button,textarea,select{appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}input:-webkit-autofill{&,&:hover,&:focus,&:active{border-radius:var(--odx-border-radius-sm);box-shadow:inset 0 0 1em 1em var(--odx-color-background-transparent-selected);font-weight:inherit;-webkit-text-fill-color:var(--odx-color-foreground-rest);background-clip:text;transition:background-color 5000s ease-in-out!important}}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-layout-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-shrink{flex:none}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-spacing-layout-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :where(table),.odx-table{--cell-size:var(--odx-size-300);border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& caption{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-semibold)}& thead{background-color:inherit}& tr{transition:var(--odx-motion-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& th{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle);cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}& td{height:var(--cell-size);vertical-align:middle}& tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle)}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-motion-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-border-radius-control);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}@media(hover:hover)and (pointer:fine){&:not([disabled]):where(:hover){color:var(--odx-color-foreground-accent-hover)}}}odx-title,[class*=odx-title],h1,h2,h3,h4,h5,h6{font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;display:block}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,h6{line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,h5{line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,h4{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,h3{line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,h2,odx-title[size=xxl],.odx-title-xxl,h1,odx-title[size^=display-],[class*=odx-title-display-]{font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-medium)}odx-title[size=xl],.odx-title-xl,h2{line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,h1{line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-content-box>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-spacing-layout-lg))}.odx-content :is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}[data-odx-control]:has([data-odx-control]):not([disabled]):active{--_color-background-pressed:var(--_color-background-hover)}[data-odx-control]:has([data-odx-control]:hover):not([disabled]){--_color-background-hover:var(--_color-background);--_color-foreground-hover:var(--_color-foreground)}[data-odx-button]:has(odx-icon:only-child){min-width:auto}:is(odx-navigation-item-group,odx-navigation-item){odx-rail-navigation &::part(label){transition-delay:var(--odx-motion-duration-fast)}odx-rail-navigation[collapsed] &::part(label){opacity:0;white-space:nowrap;transition-delay:0s}}}@layer variant,state;@layer overrides{.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}.odx-g-sm{--gap:var(--odx-spacing-layout-sm);gap:var(--odx-spacing-layout-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-layout-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-layout-sm)}.odx-g-md{--gap:var(--odx-spacing-layout-md);gap:var(--odx-spacing-layout-md)}.odx-gx-md{column-gap:var(--odx-spacing-layout-md)}.odx-gy-md{row-gap:var(--odx-spacing-layout-md)}.odx-g-lg{--gap:var(--odx-spacing-layout-lg);gap:var(--odx-spacing-layout-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-layout-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-layout-lg)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-sm{padding:var(--odx-spacing-layout-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-layout-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-layout-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-layout-sm)}.odx-py-sm{padding-block:var(--odx-spacing-layout-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-layout-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-layout-sm)}.odx-p-md{padding:var(--odx-spacing-layout-md)}.odx-px-md{padding-inline:var(--odx-spacing-layout-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-layout-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-layout-md)}.odx-py-md{padding-block:var(--odx-spacing-layout-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-layout-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-layout-md)}.odx-p-lg{padding:var(--odx-spacing-layout-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-layout-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-layout-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-layout-lg)}.odx-py-lg{padding-block:var(--odx-spacing-layout-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-layout-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-layout-lg)}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-m-sm{margin:var(--odx-spacing-layout-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-layout-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-layout-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-layout-sm)}.odx-my-sm{margin-block:var(--odx-spacing-layout-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-layout-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-layout-sm)}.odx-m-md{margin:var(--odx-spacing-layout-md)}.odx-mx-md{margin-inline:var(--odx-spacing-layout-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-layout-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-layout-md)}.odx-my-md{margin-block:var(--odx-spacing-layout-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-layout-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-layout-md)}.odx-m-lg{margin:var(--odx-spacing-layout-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-layout-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-layout-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-layout-lg)}.odx-my-lg{margin-block:var(--odx-spacing-layout-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-layout-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-layout-lg)}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}}@layer odx.base{.odx-content{--_content-spacing-sm:var(--odx-spacing-layout-sm);--_content-spacing-md:var(--odx-spacing-layout-md);--_content-spacing-lg:var(--odx-spacing-layout-lg);line-height:var(--odx-typography-line-height-text-md);& table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe{margin:var(--_content-spacing-md)0}>:is(odx-title,[class*=odx-title]),>:is(.odx-text,odx-text),li>:is(ul,ol,dl),h1,h2,h3,h4,h5,h6,p,li{margin:var(--_content-spacing-sm)0}& h1,h2,h3,h4,h5,h6{margin-block-start:var(--_content-spacing-lg)}& table,ul,ol,dl,blockquote{padding-inline-start:var(--odx-spacing-150)}& code,pre,mark{border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}& code,pre{background-color:var(--odx-color-background-control-rest);font-size:var(--odx-typography-font-size-text-sm)}& blockquote{padding-inline-end:var(--odx-spacing-150)}& dt{font-weight:var(--odx-typography-font-weight-medium)}& a{text-decoration:underline}& del{color:var(--odx-color-foreground-danger-rest)}& figure{flex-direction:column;display:flex}& figcaption{border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}& ins{color:var(--odx-color-foreground-success-rest);text-decoration:none}& mark{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}& pre{padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}& small{font-size:var(--odx-typography-font-size-text-sm)}& var{font-weight:var(--odx-typography-font-weight-medium)}}.odx-content-sm{--_content-spacing-md:var(--odx-spacing-layout-sm);--_content-spacing-lg:var(--odx-spacing-layout-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-layout-lg)}}";
|
|
228
|
+
const styles$1r = "@layer reset{:not(:defined){visibility:hidden}*,:before,:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}img,picture,video,canvas,embed,iframe,object{max-width:100%;display:block}input,button,textarea,select{appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}input:-webkit-autofill{&,&:hover,&:focus,&:active{border-radius:var(--odx-border-radius-sm);box-shadow:inset 0 0 1em 1em var(--odx-color-background-transparent-selected);font-weight:inherit;-webkit-text-fill-color:var(--odx-color-foreground-rest);background-clip:text;transition:background-color 5000s ease-in-out!important}}[popover]{border:none;outline:none}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}}@layer base{.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-spacing-layout-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-shrink{flex:none}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-spacing-layout-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}.odx-content :where(table),.odx-table{--cell-size:var(--odx-size-300);border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& caption{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-semibold)}& thead{background-color:inherit}& tr{transition:var(--odx-motion-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& th{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle);cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none}& td{height:var(--cell-size);vertical-align:middle}& tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle)}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}:where(a){column-gap:var(--odx-control-spacing-sm);transition:var(--odx-motion-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-border-radius-control);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&[disabled]{color:var(--odx-color-foreground-disabled-rest);pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:none}>:is(odx-icon,.odx-icon){vertical-align:middle}@media(hover:hover)and (pointer:fine){&:not([disabled]):where(:hover){color:var(--odx-color-foreground-accent-hover)}}}odx-title,[class*=odx-title],h1,h2,h3,h4,h5,h6{font-weight:var(--odx-typography-font-weight-semibold);text-wrap:balance;overflow-wrap:break-word;display:block}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,h6{line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,h5{line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,h4{line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,h3{line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,h2,odx-title[size=xxl],.odx-title-xxl,h1,odx-title[size^=display-],[class*=odx-title-display-]{font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-medium)}odx-title[size=xl],.odx-title-xl,h2{line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,h1{line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{font-weight:var(--odx-typography-font-weight-normal);overflow-wrap:break-word;display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}.odx-content-box>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-spacing-layout-lg))}.odx-content :is(odx-key-value-list,odx-list){margin-block:var(--_content-spacing-md);:is(odx-key-value-list,odx-list){margin-block:0}}[data-odx-control]:has([data-odx-control]):not([disabled]):active{--_color-background-pressed:var(--_color-background-hover)}[data-odx-control]:has([data-odx-control]:hover):not([disabled]){--_color-background-hover:var(--_color-background);--_color-foreground-hover:var(--_color-foreground)}[data-odx-button]:has(odx-icon:only-child){min-width:auto}:is(odx-navigation-item-group,odx-navigation-item){odx-rail-navigation &::part(label){transition-delay:var(--odx-motion-duration-fast)}odx-rail-navigation[collapsed] &::part(label){opacity:0;white-space:nowrap;transition-delay:0s}}}@layer variant,state;@layer overrides{.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-motion-disabled{scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}.odx-g-sm{--gap:var(--odx-spacing-layout-sm);gap:var(--odx-spacing-layout-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-layout-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-layout-sm)}.odx-g-md{--gap:var(--odx-spacing-layout-md);gap:var(--odx-spacing-layout-md)}.odx-gx-md{column-gap:var(--odx-spacing-layout-md)}.odx-gy-md{row-gap:var(--odx-spacing-layout-md)}.odx-g-lg{--gap:var(--odx-spacing-layout-lg);gap:var(--odx-spacing-layout-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-layout-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-layout-lg)}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-sm{padding:var(--odx-spacing-layout-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-layout-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-layout-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-layout-sm)}.odx-py-sm{padding-block:var(--odx-spacing-layout-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-layout-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-layout-sm)}.odx-p-md{padding:var(--odx-spacing-layout-md)}.odx-px-md{padding-inline:var(--odx-spacing-layout-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-layout-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-layout-md)}.odx-py-md{padding-block:var(--odx-spacing-layout-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-layout-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-layout-md)}.odx-p-lg{padding:var(--odx-spacing-layout-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-layout-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-layout-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-layout-lg)}.odx-py-lg{padding-block:var(--odx-spacing-layout-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-layout-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-layout-lg)}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-m-sm{margin:var(--odx-spacing-layout-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-layout-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-layout-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-layout-sm)}.odx-my-sm{margin-block:var(--odx-spacing-layout-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-layout-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-layout-sm)}.odx-m-md{margin:var(--odx-spacing-layout-md)}.odx-mx-md{margin-inline:var(--odx-spacing-layout-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-layout-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-layout-md)}.odx-my-md{margin-block:var(--odx-spacing-layout-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-layout-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-layout-md)}.odx-m-lg{margin:var(--odx-spacing-layout-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-layout-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-layout-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-layout-lg)}.odx-my-lg{margin-block:var(--odx-spacing-layout-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-layout-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-layout-lg)}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}}@layer odx.base{.odx-content{--_content-spacing-sm:var(--odx-spacing-layout-sm);--_content-spacing-md:var(--odx-spacing-layout-md);--_content-spacing-lg:var(--odx-spacing-layout-lg);line-height:var(--odx-typography-line-height-text-md);& table,ul,ol,dl,blockquote,pre,figure,video,embed,iframe{margin:var(--_content-spacing-md)0}>:is(odx-title,[class*=odx-title]),>:is(.odx-text,odx-text),li>:is(ul,ol,dl),h1,h2,h3,h4,h5,h6,p,li{margin:var(--_content-spacing-sm)0}& h1,h2,h3,h4,h5,h6{margin-block-start:var(--_content-spacing-lg)}& table,ul,ol,dl,blockquote{padding-inline-start:var(--odx-spacing-150)}& code,pre,mark{border-radius:var(--odx-border-radius-sm);padding:0 var(--odx-spacing-12)}& code,pre{background-color:var(--odx-color-background-control-rest);font-size:var(--odx-typography-font-size-text-sm)}& blockquote{padding-inline-end:var(--odx-spacing-150)}& dt{font-weight:var(--odx-typography-font-weight-medium)}& a{text-decoration:underline}& del{color:var(--odx-color-foreground-danger-rest)}& figure{flex-direction:column;display:flex}& figcaption{border-top:var(--odx-border-width-thick)solid var(--odx-color-stroke-neutral-subtle);padding:var(--_content-spacing-sm);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}& ins{color:var(--odx-color-foreground-success-rest);text-decoration:none}& mark{background-color:var(--odx-color-background-selection);color:var(--odx-color-foreground-rest)}& pre{padding:var(--odx-control-spacing-md)calc(2*var(--odx-control-spacing-inline-md))}& small{font-size:var(--odx-typography-font-size-text-sm)}& var{font-weight:var(--odx-typography-font-weight-medium)}}.odx-content-sm{--_content-spacing-md:var(--odx-spacing-layout-sm);--_content-spacing-lg:var(--odx-spacing-layout-md);line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-layout-lg)}}";
|
|
229
229
|
|
|
230
230
|
function customElement(tagName, ...styles2) {
|
|
231
231
|
return (target) => {
|
|
@@ -253,7 +253,7 @@ class CustomElement extends LitElement {
|
|
|
253
253
|
this.internals = this.attachInternals();
|
|
254
254
|
}
|
|
255
255
|
static {
|
|
256
|
-
this.styles = unsafeCSS(styles$
|
|
256
|
+
this.styles = unsafeCSS(styles$1r);
|
|
257
257
|
}
|
|
258
258
|
static {
|
|
259
259
|
this.observeSlots = false;
|
|
@@ -444,9 +444,9 @@ const WithPresets = dedupeMixin((superClass) => {
|
|
|
444
444
|
return WithPresetsMixin;
|
|
445
445
|
});
|
|
446
446
|
|
|
447
|
-
const styles$
|
|
447
|
+
const styles$1q = "@layer base{#label{margin:var(--odx-spacing-negative-12)var(--odx-spacing-negative-25);padding:var(--odx-spacing-12)var(--odx-spacing-25);text-transform:capitalize}#spinner{--size:var(--_addon-size);color:var(--_color-foreground)}}@layer state{:host([loading]){--_color-background-hover:var(--_color-background);--_color-background-pressed:var(--_color-background);--_color-foreground-hover:var(--_color-foreground);--_color-foreground-pressed:var(--_color-foreground);--_color-stroke-hover:var(--_color-stroke);--_color-stroke-pressed:var(--_color-stroke);cursor:wait}}";
|
|
448
448
|
|
|
449
|
-
const styles$
|
|
449
|
+
const styles$1p = "@layer base{:host{--_color-background:transparent;--_color-background-hover:var(--odx-color-background-transparent-hover);--_color-background-pressed:var(--odx-color-background-transparent-pressed);--_color-foreground:inherit;--_color-foreground-hover:var(--_color-foreground);--_color-foreground-pressed:var(--_color-foreground-hover);--_color-stroke:transparent;--_color-stroke-hover:transparent;--_color-stroke-pressed:transparent;--_height:var(--odx-control-height-md);--_addon-size:var(--odx-control-addon-size-md);--_spacing:var(--odx-control-spacing-md);--_spacing-inline:var(--odx-control-spacing-inline-md);--_font-size:var(--odx-control-font-size-md);--_icon-spacing:0px;transition:var(--odx-motion-transition-reduced);border-radius:var(--odx-border-radius-control);cursor:pointer;min-width:auto;max-width:100%;height:var(--_height);min-height:var(--_height);color:var(--_color-foreground);font-weight:var(--odx-typography-font-weight-normal);-webkit-user-select:none;user-select:none;touch-action:manipulation;margin:0;transition-property:border-color,border-radius;position:relative}:host,#base{place-items:center;display:inline-flex}#base{column-gap:var(--_spacing-inline);transition:var(--odx-motion-transition-reduced);border:var(--odx-border-width-thin)solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background,transparent);cursor:inherit;padding-block:calc(var(--_spacing) - var(--odx-border-width-thin));padding-inline:calc(var(--_spacing-inline) - var(--odx-border-width-thin));width:100%;min-width:var(--_height);height:100%;min-height:inherit;text-align:inherit;color:inherit;line-height:1em;font-size:var(--_font-size);font-weight:inherit;touch-action:manipulation;margin:0;text-decoration:none;transition-property:background-color,border-color,color,opacity,transform,height,width;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}&:active{--_color-background:var(--_color-background-pressed);--_color-foreground:var(--_color-foreground-pressed);--_color-stroke:var(--_color-stroke-pressed);color:inherit}@media(hover:hover)and (pointer:fine){&:where(:hover){--_color-background:var(--_color-background-hover);--_color-stroke:var(--_color-stroke-hover);--_color-foreground:var(--_color-foreground-hover);color:inherit}}}#label{min-width:0;text-align:inherit;pointer-events:none;flex:1}::slotted(odx-badge:not([slot=badge])){margin-inline:var(--odx-spacing-12)}odx-icon:not([size]),::slotted(odx-icon:not([size])){padding:var(--_icon-spacing);font-size:var(--_addon-size);flex-shrink:0}odx-avatar:not([size]),::slotted(odx-avatar:not([size])){width:var(--_addon-size);font-size:var(--odx-typography-font-size-text-xs)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}#base>odx-icon:not([slot]),::slotted(odx-icon:not([slot])){margin-inline:calc(-1*var(--_spacing-inline))}::slotted(:not([slot])){line-height:inherit}[data-odx-control],::slotted([data-odx-control]){margin:var(--odx-spacing-negative-25)}}@layer variant{:host([size=sm]){--_height:var(--odx-control-height-sm);--_addon-size:var(--odx-control-addon-size-sm);--_spacing:var(--odx-control-spacing-sm);--_spacing-inline:var(--odx-control-spacing-inline-sm);--_font-size:var(--odx-control-font-size-sm)}:host([size=lg]){--_height:var(--odx-control-height-lg);--_addon-size:var(--odx-control-addon-size-lg);--_spacing:var(--odx-control-spacing-lg);--_spacing-inline:var(--odx-control-spacing-inline-lg);::slotted(odx-avatar:not([size])),odx-avatar:not([size]){font-size:var(--odx-typography-font-size-text-md)}}}@layer overrides{:host([disabled]) #base{pointer-events:none;-webkit-user-select:none;user-select:none}:host([disabled]){--_color-background:var(--odx-color-background-disabled-rest);--_color-background-hover:var(--odx-color-background-disabled-rest);--_color-background-pressed:var(--odx-color-background-disabled-rest);--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);cursor:not-allowed}}";
|
|
450
450
|
|
|
451
451
|
const controlDirective = booleanAttributeDirective({ name: "data-odx-control" });
|
|
452
452
|
const ControlSize = { SM: "sm", MD: "md", LG: "lg" };
|
|
@@ -459,7 +459,7 @@ class ControlElement extends CanBeDisabled(CustomElement) {
|
|
|
459
459
|
};
|
|
460
460
|
}
|
|
461
461
|
static {
|
|
462
|
-
this.styles = unsafeCSS(styles$
|
|
462
|
+
this.styles = unsafeCSS(styles$1p);
|
|
463
463
|
}
|
|
464
464
|
get nestedControlSize() {
|
|
465
465
|
return this.size === ControlSize.LG ? ControlSize.MD : ControlSize.SM;
|
|
@@ -512,7 +512,7 @@ class ButtonControlElement extends ControlElement {
|
|
|
512
512
|
this.lineClamp = 2;
|
|
513
513
|
}
|
|
514
514
|
static {
|
|
515
|
-
this.styles = [ControlElement.styles, unsafeCSS(styles$
|
|
515
|
+
this.styles = [ControlElement.styles, unsafeCSS(styles$1q)];
|
|
516
516
|
}
|
|
517
517
|
static {
|
|
518
518
|
this.shadowRootOptions = {
|
|
@@ -773,7 +773,7 @@ class ExpandableItemManager {
|
|
|
773
773
|
}
|
|
774
774
|
}
|
|
775
775
|
#validateToggleEvent(item, event) {
|
|
776
|
-
return
|
|
776
|
+
return !getElementFromEvent(event, (node) => controlDirective.applied(node) && node !== item.expandControl, item);
|
|
777
777
|
}
|
|
778
778
|
#handleClick = (event) => {
|
|
779
779
|
const items = new WeakSet(this.#host.getItems());
|
|
@@ -803,7 +803,7 @@ class ExpandableItemManager {
|
|
|
803
803
|
});
|
|
804
804
|
}
|
|
805
805
|
|
|
806
|
-
const styles$
|
|
806
|
+
const styles$1o = "@layer base{:host{--dialog-width:750px;--dialog-color-backdrop:var(--odx-color-background-transparent-backdrop);--dialog-spacing-top:0px;--dialog-spacing-outer:var(--odx-spacing-layout-lg);transition:var(--odx-motion-transition-slow)allow-discrete;opacity:0;padding:var(--dialog-spacing-outer);width:auto;height:auto;color:inherit;pointer-events:all;touch-action:manipulation;overscroll-behavior:contain;background:0 0;margin:0;transition-property:opacity,overlay,display;display:none;inset:0;overflow:hidden}#base{transition:var(--odx-motion-transition-slow);z-index:var(--odx-z-level-base);margin:var(--dialog-spacing-top)auto auto;box-shadow:var(--odx-elevation-shadow-level-2);width:100%;max-width:var(--dialog-width);height:max-content;max-height:100%;transition-property:translate,opacity,transform,max-width,max-height;display:flex;overflow:hidden auto;translate:0}#base>*{flex:auto}::slotted(*){max-height:100%}}@layer variant{:host([layer=page]){top:var(--page-header-height,0)}}@layer state{:host(:not([backdrop-disabled])){background:var(--dialog-color-backdrop);backdrop-filter:blur(var(--odx-elevation-backdrop-blur))}:host([backdrop-disabled]){pointer-events:none;#base{pointer-events:all}}:host([layer=container]){z-index:var(--odx-z-level-overlay);max-height:100%;display:none;position:absolute}:host([open]){opacity:1;display:flex;@starting-style{opacity:0}}}";
|
|
807
807
|
|
|
808
808
|
const dialogDirective = booleanAttributeDirective({ name: "odx-dialog" });
|
|
809
809
|
const DialogLayer = { SCREEN: "screen", PAGE: "page", CONTAINER: "container" };
|
|
@@ -834,15 +834,16 @@ const _DialogElement = class _DialogElement extends CanBeDisabled(CustomElement)
|
|
|
834
834
|
this.layer = DialogLayer.SCREEN;
|
|
835
835
|
this.open = false;
|
|
836
836
|
this.#handleGlobalMouseDown = (() => {
|
|
837
|
-
const requestDismiss = (event) => {
|
|
837
|
+
const requestDismiss = ((event) => {
|
|
838
838
|
removeGlobalEventListener("mouseup", requestDismiss);
|
|
839
839
|
if (!this.canDismiss) return;
|
|
840
840
|
if (this.layer === DialogLayer.CONTAINER && clickedOutside(event, this, true)) return;
|
|
841
841
|
const container = this.renderRoot.querySelector("#base");
|
|
842
842
|
if (container && !clickedOutside(event, container, true)) return;
|
|
843
|
+
if (!this.backdropDisabled && this !== event.target.closest(dialogDirective.selector)) return;
|
|
843
844
|
event.preventDefault();
|
|
844
845
|
this.dismiss();
|
|
845
|
-
};
|
|
846
|
+
});
|
|
846
847
|
addGlobalEventListener("mouseup", requestDismiss);
|
|
847
848
|
});
|
|
848
849
|
this.#handleGlobalKeydown = ((event) => {
|
|
@@ -863,7 +864,7 @@ const _DialogElement = class _DialogElement extends CanBeDisabled(CustomElement)
|
|
|
863
864
|
}
|
|
864
865
|
}
|
|
865
866
|
static {
|
|
866
|
-
this.styles = unsafeCSS(styles$
|
|
867
|
+
this.styles = unsafeCSS(styles$1o);
|
|
867
868
|
}
|
|
868
869
|
static {
|
|
869
870
|
_DialogElement.initializer = () => {
|
|
@@ -885,6 +886,7 @@ const _DialogElement = class _DialogElement extends CanBeDisabled(CustomElement)
|
|
|
885
886
|
super.connectedCallback();
|
|
886
887
|
this.popover = "manual";
|
|
887
888
|
this.role ||= "modal";
|
|
889
|
+
dialogDirective.toggle(this, true);
|
|
888
890
|
}
|
|
889
891
|
disconnectedCallback() {
|
|
890
892
|
super.disconnectedCallback();
|
|
@@ -986,7 +988,7 @@ __decorateClass([
|
|
|
986
988
|
], _DialogElement.prototype, "open", 2);
|
|
987
989
|
let DialogElement = _DialogElement;
|
|
988
990
|
|
|
989
|
-
const styles$
|
|
991
|
+
const styles$1n = "@layer base{:host{--_color-background:var(--odx-color-background-control-rest);--_color-background-hover:var(--odx-color-background-control-hover);--_color-background-pressed:var(--_color-background-hover);--_color-stroke:var(--odx-color-stroke-control-rest);--_color-stroke-hover:var(--odx-color-stroke-control-hover);--_color-stroke-pressed:var(--_color-stroke-hover);--_color-foreground-unit:var(--odx-color-foreground-subtle);border-radius:var(--odx-border-radius-control);cursor:text;min-width:var(--odx-control-width-lg);text-align:left;max-width:100%;font-weight:var(--odx-typography-font-weight-medium);overflow:hidden}#base{border-width:0;border-bottom-width:var(--odx-border-width-thin);padding-inline:var(--_spacing-inline);border-radius:0}#base:has(input:focus){outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}#input-container{gap:var(--odx-spacing-12);margin-block:calc(-1*var(--_spacing));max-width:100%;height:var(--_height);flex:1;align-items:baseline;display:flex;overflow:hidden}#input{appearance:textfield;box-sizing:content-box;transition:var(--odx-motion-transition-default);cursor:inherit;width:auto;min-width:1ch;height:100%;text-align:inherit;text-overflow:ellipsis;color:inherit;font-weight:inherit;background-color:#0000;border:none;outline:none;margin:0;padding:0;transition-property:color;display:block;&::placeholder{color:var(--odx-color-foreground-subtle);font-weight:var(--odx-typography-font-weight-normal)}&::-webkit-search-decoration{appearance:none;margin:0}&::-webkit-search-cancel-button{appearance:none;margin:0}&::-webkit-search-results-button{appearance:none;margin:0}&::-webkit-search-results-decoration{appearance:none;margin:0}&::-webkit-inner-spin-button{appearance:none;margin:0}&::-webkit-outer-spin-button{appearance:none;margin:0}&::-webkit-calendar-picker-indicator{display:none}}#unit{color:var(--_color-foreground-unit);font-size:var(--odx-typography-font-size-text-sm);font-weight:var(--odx-typography-font-weight-normal)}#measure-input{max-width:100%;white-space:pre!important;width:auto!important;font-size:var(--_font-size)!important}::slotted(odx-label){margin:0}}@layer state{:host([invalid]:not(:is([disabled],[readonly]))){--_color-background:var(--odx-color-background-control-invalid);--_color-background-hover:var(--odx-color-background-control-invalid-hover);--_color-stroke:var(--odx-color-stroke-control-invalid);--_color-stroke-hover:var(--odx-color-stroke-control-invalid-hover)}:host([disabled]:not([readonly])){--_color-foreground:var(--odx-color-foreground-disabled-rest);--_color-foreground-unit:var(--odx-color-foreground-disabled-rest);--_color-background:var(--odx-color-background-disabled-rest);--_color-stroke:var(--odx-color-stroke-disabled-rest);& slot[name=placeholder]{color:var(---_color-foreground)}}:host([readonly]){--_color-background:var(--odx-color-background-control-readonly);--_color-stroke:var(--odx-color-stroke-control-readonly);--_color-background-hover:var(--_color-background);--_color-stroke-hover:var(--_color-stroke);cursor:default}}@layer variant{:host(.odx-fill){min-width:auto;display:flex}:host([alignment=center]){text-align:center;#input-container{justify-content:center}}:host([alignment=end]){text-align:right;#input-container{justify-content:flex-end}}:host([size=lg]){--_font-size:var(--odx-typography-font-size-text-lg);#unit{font-size:var(--odx-typography-font-size-text-md)}}}";
|
|
990
992
|
|
|
991
993
|
const Alignment = {
|
|
992
994
|
START: "start",
|
|
@@ -1023,7 +1025,7 @@ class InputControlElement extends FormAssociated(ControlElement) {
|
|
|
1023
1025
|
}
|
|
1024
1026
|
}
|
|
1025
1027
|
static {
|
|
1026
|
-
this.styles = [ControlElement.styles, unsafeCSS(styles$
|
|
1028
|
+
this.styles = [ControlElement.styles, unsafeCSS(styles$1n)];
|
|
1027
1029
|
}
|
|
1028
1030
|
static {
|
|
1029
1031
|
this.shadowRootOptions = {
|
|
@@ -1232,46 +1234,14 @@ __decorateClass([
|
|
|
1232
1234
|
property()
|
|
1233
1235
|
], ListboxControlElement.prototype, "value", 2);
|
|
1234
1236
|
|
|
1235
|
-
const styles$
|
|
1236
|
-
|
|
1237
|
-
const _OdxAccordionPanel = class _OdxAccordionPanel extends CustomElement {
|
|
1238
|
-
constructor() {
|
|
1239
|
-
super(...arguments);
|
|
1240
|
-
this.expanded = false;
|
|
1241
|
-
this.size = ControlSize.MD;
|
|
1242
|
-
}
|
|
1243
|
-
static {
|
|
1244
|
-
customElement("odx-accordion-panel", styles$1n)(_OdxAccordionPanel);
|
|
1245
|
-
}
|
|
1246
|
-
connectedCallback() {
|
|
1247
|
-
super.connectedCallback();
|
|
1248
|
-
this.role = "region";
|
|
1249
|
-
}
|
|
1250
|
-
updated(props) {
|
|
1251
|
-
super.updated(props);
|
|
1252
|
-
if (props.has("expanded") && !this.expanded) {
|
|
1253
|
-
this.querySelector("odx-accordion")?.toggleAll(false);
|
|
1254
|
-
}
|
|
1255
|
-
}
|
|
1256
|
-
render() {
|
|
1257
|
-
return html`<odx-toggle-content ?expanded="${this.expanded}"><div id="content"><slot></slot></div></odx-toggle-content>`;
|
|
1258
|
-
}
|
|
1259
|
-
};
|
|
1260
|
-
__decorateClass([
|
|
1261
|
-
property({ type: Boolean, reflect: true, useDefault: true })
|
|
1262
|
-
], _OdxAccordionPanel.prototype, "expanded", 2);
|
|
1263
|
-
__decorateClass([
|
|
1264
|
-
property({ reflect: true, useDefault: true })
|
|
1265
|
-
], _OdxAccordionPanel.prototype, "size", 2);
|
|
1266
|
-
let OdxAccordionPanel = _OdxAccordionPanel;
|
|
1267
|
-
|
|
1268
|
-
const styles$1m = "@layer base{:host{--_indent-level:1;--_expand-indicator-rotation:0deg;--_expand-indicator-position:unset;height:auto;display:flex}#base{border-radius:0;padding-inline-start:calc(var(--_indent-level)*var(--_spacing-inline))}#label{font-weight:var(--odx-typography-font-weight-medium);flex-direction:column;display:flex}#expand-indicator{order:var(--_expand-indicator-position);transform:rotate(var(--_expand-indicator-rotation));transition:var(--odx-motion-transition-reduced);transition-property:transform}}@layer variant{:host([size=lg]){#expand-indicator{padding:var(--odx-spacing-25)}}}@layer overrides{:host([disabled]){--_color-background:transparent;::slotted(*){pointer-events:none}}:host([expanded]){--_expand-indicator-rotation:180deg}}";
|
|
1237
|
+
const styles$1m = "@layer base{:host{--_indent-level:1;--_expand-indicator-rotation:0deg;--_expand-indicator-position:unset;--_spacing-indented:calc(max(var(--_indent-level) + 1,1)*var(--_spacing-inline));place-items:unset;cursor:auto;height:auto;display:block}#base{cursor:pointer;border-radius:0;align-items:center;padding-inline-start:calc(var(--_indent-level)*var(--_spacing-inline))}#label{font-weight:var(--odx-typography-font-weight-medium);flex-direction:column;display:flex}#expand-indicator{order:var(--_expand-indicator-position);transform:rotate(var(--_expand-indicator-rotation));transition:var(--odx-motion-transition-reduced);transition-property:transform}#content{padding-block:0 calc(2*var(--_spacing));padding-inline:var(--_spacing-indented)calc(2*var(--_spacing-inline));width:100%}:host(:not(:last-of-type)){border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle);min-height:calc(var(--_height) - var(--odx-border-width-thin));#base{border-bottom:0}}::slotted(odx-accordion){--_accordion-indent-level:calc(var(--_indent-level) + 1);margin-block:0 calc(-2*var(--_spacing));margin-inline:calc(-1*var(--_spacing-indented))calc(-2*var(--_spacing-inline))}::slotted(odx-title){font-weight:var(--odx-typography-font-weight-medium)!important}}@layer variant{:host([size=lg]){#expand-indicator{padding:var(--odx-spacing-25)}}:host([loading]){#base{cursor:default}}}@layer overrides{:host([disabled]){--_color-background:transparent;::slotted(*){pointer-events:none}}:host([expanded]){--_expand-indicator-rotation:180deg}}";
|
|
1269
1238
|
|
|
1270
1239
|
const AccordionItemSize = pick(ControlSize, ["MD", "LG"]);
|
|
1271
1240
|
const _OdxAccordionItem = class _OdxAccordionItem extends ButtonControlElement {
|
|
1272
1241
|
constructor() {
|
|
1273
1242
|
super(...arguments);
|
|
1274
1243
|
this.expanded = false;
|
|
1244
|
+
this.label = "";
|
|
1275
1245
|
this.size = AccordionItemSize.MD;
|
|
1276
1246
|
}
|
|
1277
1247
|
static {
|
|
@@ -1281,45 +1251,50 @@ const _OdxAccordionItem = class _OdxAccordionItem extends ButtonControlElement {
|
|
|
1281
1251
|
super.connectedCallback();
|
|
1282
1252
|
this.role = "heading";
|
|
1283
1253
|
}
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
panelCandidate = panelCandidate.nextElementSibling;
|
|
1291
|
-
}
|
|
1292
|
-
return null;
|
|
1254
|
+
firstUpdated(props) {
|
|
1255
|
+
super.firstUpdated(props);
|
|
1256
|
+
this.focusTarget.setAttribute("aria-controls", "content");
|
|
1257
|
+
}
|
|
1258
|
+
getChildAccordions() {
|
|
1259
|
+
return getAssignedElements(this.renderRoot, { selector: (node) => node instanceof OdxAccordion });
|
|
1293
1260
|
}
|
|
1294
1261
|
isExpandable() {
|
|
1295
|
-
return !this.disabled;
|
|
1262
|
+
return !this.disabled && !this.loading;
|
|
1296
1263
|
}
|
|
1297
1264
|
toggle(state, emitEvent = true) {
|
|
1298
1265
|
toggleExpandableItem(this, state, emitEvent);
|
|
1299
1266
|
}
|
|
1300
|
-
|
|
1301
|
-
return html`${
|
|
1267
|
+
render() {
|
|
1268
|
+
return html`${super.render()}<odx-toggle-content ?expanded="${this.expanded}"><div id="content" part="content"><slot></slot></div></odx-toggle-content>`;
|
|
1302
1269
|
}
|
|
1303
1270
|
updated(props) {
|
|
1304
1271
|
super.updated(props);
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
const
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
panel.size = this.size;
|
|
1272
|
+
this.focusTarget.ariaExpanded = toAriaBooleanAttribute(!this.disabled && !this.loading && this.expanded, false);
|
|
1273
|
+
if (props.has("expanded") && !this.expanded) {
|
|
1274
|
+
for (const accordion of this.getChildAccordions()) {
|
|
1275
|
+
accordion.toggleAll(false);
|
|
1276
|
+
}
|
|
1311
1277
|
}
|
|
1312
1278
|
}
|
|
1279
|
+
renderContent() {
|
|
1280
|
+
return html`${super.renderContent()}<odx-icon id="expand-indicator" name="core::chevron-down" slot="suffix"></odx-icon>`;
|
|
1281
|
+
}
|
|
1282
|
+
renderLabel() {
|
|
1283
|
+
return html`<div id="label" part="label">${this.label.trim() || nothing}<slot name="label"></slot></div>`;
|
|
1284
|
+
}
|
|
1313
1285
|
};
|
|
1314
1286
|
__decorateClass([
|
|
1315
1287
|
property({ type: Boolean, reflect: true, useDefault: true })
|
|
1316
1288
|
], _OdxAccordionItem.prototype, "expanded", 2);
|
|
1289
|
+
__decorateClass([
|
|
1290
|
+
property()
|
|
1291
|
+
], _OdxAccordionItem.prototype, "label", 2);
|
|
1317
1292
|
__decorateClass([
|
|
1318
1293
|
property({ reflect: true, useDefault: true })
|
|
1319
1294
|
], _OdxAccordionItem.prototype, "size", 2);
|
|
1320
1295
|
let OdxAccordionItem = _OdxAccordionItem;
|
|
1321
1296
|
|
|
1322
|
-
const styles$1l = ":host{--_accordion-indent-level:1;display:block;overflow:hidden}::slotted(
|
|
1297
|
+
const styles$1l = ":host{--_accordion-indent-level:1;display:block;overflow:hidden}::slotted(odx-accordion-item){--_indent-level:var(--_accordion-indent-level)}:host([indicator-placement=start]){::slotted(odx-accordion-item){--_expand-indicator-position:-1;--_expand-indicator-rotation:-90deg}::slotted(odx-accordion-item[expanded]){--_expand-indicator-rotation:0deg}}";
|
|
1323
1298
|
|
|
1324
1299
|
const AccordionIndicatorPlacement = pick(Alignment, ["START", "END"]);
|
|
1325
1300
|
const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
@@ -1328,25 +1303,11 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
|
1328
1303
|
this.indicatorPlacement = AccordionIndicatorPlacement.END;
|
|
1329
1304
|
this.multiple = false;
|
|
1330
1305
|
this.size = AccordionItemSize.MD;
|
|
1331
|
-
this.#handleSlotChange = async () => {
|
|
1332
|
-
for (const item of this.getItems()) {
|
|
1333
|
-
await item.updateComplete;
|
|
1334
|
-
const panel = item.getPanel();
|
|
1335
|
-
item.focusTarget.ariaControlsElements = panel ? [panel] : null;
|
|
1336
|
-
if (!panel) return;
|
|
1337
|
-
panel.ariaLabelledByElements = [item];
|
|
1338
|
-
}
|
|
1339
|
-
this.requestUpdate();
|
|
1340
|
-
};
|
|
1341
1306
|
new ExpandableItemManager(this);
|
|
1342
1307
|
}
|
|
1343
1308
|
static {
|
|
1344
1309
|
customElement("odx-accordion", styles$1l)(_OdxAccordion);
|
|
1345
1310
|
}
|
|
1346
|
-
connectedCallback() {
|
|
1347
|
-
super.connectedCallback();
|
|
1348
|
-
this.renderRoot.addEventListener("slotchange", this.#handleSlotChange);
|
|
1349
|
-
}
|
|
1350
1311
|
getItems() {
|
|
1351
1312
|
return getAssignedElements(this.renderRoot, { selector: OdxAccordionItem.tagName });
|
|
1352
1313
|
}
|
|
@@ -1361,13 +1322,12 @@ const _OdxAccordion = class _OdxAccordion extends CustomElement {
|
|
|
1361
1322
|
item.size = this.size;
|
|
1362
1323
|
}
|
|
1363
1324
|
}
|
|
1364
|
-
#handleSlotChange;
|
|
1365
1325
|
};
|
|
1366
1326
|
__decorateClass([
|
|
1367
1327
|
property({ attribute: "indicator-placement" })
|
|
1368
1328
|
], _OdxAccordion.prototype, "indicatorPlacement", 2);
|
|
1369
1329
|
__decorateClass([
|
|
1370
|
-
property({ type: Boolean })
|
|
1330
|
+
property({ type: Boolean, reflect: true, useDefault: true })
|
|
1371
1331
|
], _OdxAccordion.prototype, "multiple", 2);
|
|
1372
1332
|
__decorateClass([
|
|
1373
1333
|
property()
|
|
@@ -6599,4 +6559,4 @@ __decorateClass([
|
|
|
6599
6559
|
], _OdxTranslate.prototype, "context", 2);
|
|
6600
6560
|
let OdxTranslate = _OdxTranslate;
|
|
6601
6561
|
|
|
6602
|
-
export { AccordionIndicatorPlacement, AccordionItemSize, ActiveDescendantsController, Alignment, AreaFooterAlignment, AreaFooterSize, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, BaseFormat, BreadcrumbsVariant, ButtonBadgePlacement, ButtonControlElement, ButtonVariant, CanBeDisabled, CardVariant, CheckboxControl, CheckboxControlPlacement, CheckboxGroupControl, CheckboxSize, ChipVariant, CollapseEvent, ControlElement, ControlSize, CustomElement, DialogCloseCommand, DialogCloseEvent, DialogDismissCommand, DialogElement, DialogLayer, DialogShowCommand, DialogShowEvent, DragController, DragControllerOptions, DrawerPlacement, DrawerSize, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, ExpandEvent, ExpandableItemManager, FormAssociated, GradientOverlaySize, HeaderSize, HighlightVariant, IconButtonPreset, InlineMessageSize, InlineMessageVariant, InputBehavior, InputControlElement, InputNumberStepBehavior, InputType, KeyValueAlignment, KeyValueSize, KeyValueVariant, LinkControlElement, ListItemVariant, ListboxControlElement, LogoSize, MenuItemSize, MenuItemVariant, ModalSize, NavigationItemType, OdxAccordion, OdxAccordionItem,
|
|
6562
|
+
export { AccordionIndicatorPlacement, AccordionItemSize, ActiveDescendantsController, Alignment, AreaFooterAlignment, AreaFooterSize, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeSize, BadgeVariant, BaseFormat, BreadcrumbsVariant, ButtonBadgePlacement, ButtonControlElement, ButtonVariant, CanBeDisabled, CardVariant, CheckboxControl, CheckboxControlPlacement, CheckboxGroupControl, CheckboxSize, ChipVariant, CollapseEvent, ControlElement, ControlSize, CustomElement, DialogCloseCommand, DialogCloseEvent, DialogDismissCommand, DialogElement, DialogLayer, DialogShowCommand, DialogShowEvent, DragController, DragControllerOptions, DrawerPlacement, DrawerSize, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, ExpandEvent, ExpandableItemManager, FormAssociated, GradientOverlaySize, HeaderSize, HighlightVariant, IconButtonPreset, InlineMessageSize, InlineMessageVariant, InputBehavior, InputControlElement, InputNumberStepBehavior, InputType, KeyValueAlignment, KeyValueSize, KeyValueVariant, LinkControlElement, ListItemVariant, ListboxControlElement, LogoSize, MenuItemSize, MenuItemVariant, ModalSize, NavigationItemType, OdxAccordion, OdxAccordionItem, OdxActionButton, OdxActionGroup, OdxAnchorNavigation, OdxAreaFooter, OdxAreaHeader, OdxAutocomplete, OdxAvatar, OdxBadge, OdxBreadcrumbs, OdxButton, OdxButtonGroup, OdxCard, OdxCheckbox, OdxCheckboxGroup, OdxChip, OdxDrawer, OdxDropdown, OdxEmptyState, OdxFormField, OdxFormatBytes, OdxFormatDate, OdxFormatNumber, OdxGradientOverlay, OdxHeader, OdxHighlight, OdxIconButton, OdxImage, OdxInlineMessage, OdxInput, OdxInputNumber, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxListbox, OdxLoadingDots, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSelect, OdxSeparator, OdxSheet, OdxSidebar, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, PopoverHost, PopoverHostPlacement, PopoverPlacementOptions, PopoverToggleCommand, ProgressRingSize, ProgressVariant, SearchEvent, SheetPlacement, SidebarPosition, SidebarSize, SkeletonType, SliderHandleVariant, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonVariant, TooltipPlacement, TooltipSize, TooltipVariant, Variant, WithPresets, activeDirective, buttonDirective, checkboxControlDirective, computePopoverPlacement, controlDirective, createModal, customElement, dialogDirective, dragActiveDirective, loadCustomElements, scrollContainerNext, scrollContainerPrevious, sliderContext, toggleExpandableItem };
|
package/dist/main.js
CHANGED
|
@@ -403,6 +403,7 @@ function commandDirective(options) {
|
|
|
403
403
|
subscribe(target, handler) {
|
|
404
404
|
const handleCommand = ((event) => {
|
|
405
405
|
if (!this.applied(event.detail.source)) return;
|
|
406
|
+
if (target.id !== this.value(event.detail.source) && !target.contains(event.detail.source)) return;
|
|
406
407
|
handler(event);
|
|
407
408
|
});
|
|
408
409
|
target.addEventListener(CommandEvent.type, handleCommand);
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@odx/foundation",
|
|
3
3
|
"displayName": "ODX Design System Foundation",
|
|
4
4
|
"description": "A library of Web Component building blocks for ODX",
|
|
5
|
-
"version": "1.0.0-beta.
|
|
5
|
+
"version": "1.0.0-beta.276",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"stylelint": "16.26.1",
|
|
32
32
|
"@odx-internal/config-stylelint": "0.0.0",
|
|
33
33
|
"@odx-internal/config-vite": "0.0.0",
|
|
34
|
-
"@odx-internal/utils-storybook": "0.0.0",
|
|
35
34
|
"@odx-internal/config-typescript": "0.0.0",
|
|
36
|
-
"@odx/design-tokens": "3.4.0"
|
|
35
|
+
"@odx/design-tokens": "3.4.0",
|
|
36
|
+
"@odx-internal/utils-storybook": "0.0.0"
|
|
37
37
|
},
|
|
38
38
|
"sideEffects": [
|
|
39
39
|
"dist/components-loader.js",
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { PropertyValues, TemplateResult } from 'lit';
|
|
2
|
-
import { ControlSize } from '../abstract/control-element.js';
|
|
3
|
-
import { CustomElement } from '../custom-element.js';
|
|
4
|
-
declare global {
|
|
5
|
-
interface HTMLElementTagNameMap {
|
|
6
|
-
'odx-accordion-panel': OdxAccordionPanel;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
/**
|
|
10
|
-
* @summary A panel component that is used within an accordion to show or hide content.
|
|
11
|
-
*
|
|
12
|
-
* @slot - Default slot for panel content
|
|
13
|
-
*/
|
|
14
|
-
export declare class OdxAccordionPanel extends CustomElement {
|
|
15
|
-
expanded: boolean;
|
|
16
|
-
size: ControlSize;
|
|
17
|
-
connectedCallback(): void;
|
|
18
|
-
protected updated(props: PropertyValues<this>): void;
|
|
19
|
-
protected render(): TemplateResult;
|
|
20
|
-
}
|
|
21
|
-
//# sourceMappingURL=accordion-panel.d.ts.map
|