@odx/foundation 1.0.0-beta.185 → 1.0.0-beta.187
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/dist/components/loading-spinner/loading-spinner.d.ts +8 -2
- package/dist/components.js +25 -17
- package/dist/css.css +1 -1
- package/dist/main.js +3 -3
- package/dist/styles.css +1 -1
- package/package.json +2 -2
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
import { CustomElement } from '../../main.js';
|
|
1
|
+
import { CustomElement, ValuesOf } from '../../main.js';
|
|
2
2
|
import { TemplateResult } from 'lit';
|
|
3
3
|
declare global {
|
|
4
4
|
interface HTMLElementTagNameMap {
|
|
5
5
|
'odx-loading-spinner': OdxLoadingSpinner;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
+
export type LoadingSpinnerType = ValuesOf<typeof LoadingSpinnerType>;
|
|
9
|
+
export declare const LoadingSpinnerType: {
|
|
10
|
+
readonly SPINNER: "spinner";
|
|
11
|
+
readonly DOTS: "dots";
|
|
12
|
+
readonly INLINE: "inline";
|
|
13
|
+
};
|
|
8
14
|
export declare class OdxLoadingSpinner extends CustomElement {
|
|
9
|
-
|
|
15
|
+
type: LoadingSpinnerType;
|
|
10
16
|
protected render(): TemplateResult;
|
|
11
17
|
}
|
package/dist/components.js
CHANGED
|
@@ -522,8 +522,8 @@ class OdxActionGroup extends CustomElement {
|
|
|
522
522
|
const prefixIcon = "icon" in item ? item.icon : item.querySelector("odx-icon")?.name;
|
|
523
523
|
const suffixIcon = item.querySelector('odx-icon[slot="suffix"]')?.name;
|
|
524
524
|
const variant = item.variant === MenuItemVariant.DANGER || item.variant === "danger-subtle" ? MenuItemVariant.DANGER : null;
|
|
525
|
-
const itemLabel = item.
|
|
526
|
-
return html`<odx-menu-item icon="${optionalAttr(prefixIcon)}" variant="${optionalAttr(variant)}" ?disabled="${item.disabled}" @click="${() => !item.disabled && item.click()}">${itemLabel} ${when(suffixIcon, (icon) => html`<odx-icon name="${icon}" slot="suffix"></odx-icon>`)}</odx-menu-item>`;
|
|
525
|
+
const itemLabel = item.getAttribute("label") || item.textContent || item.ariaLabel;
|
|
526
|
+
return html`<odx-menu-item icon="${optionalAttr(prefixIcon)}" size="${item.size}" variant="${optionalAttr(variant)}" ?disabled="${item.disabled}" @click="${() => !item.disabled && item.click()}">${itemLabel} ${when(suffixIcon, (icon) => html`<odx-icon name="${icon}" slot="suffix"></odx-icon>`)}</odx-menu-item>`;
|
|
527
527
|
})}</odx-menu>`;
|
|
528
528
|
}
|
|
529
529
|
updated(props) {
|
|
@@ -731,7 +731,7 @@ __decorateClass([
|
|
|
731
731
|
], _OdxTabBar.prototype, "vertical", 2);
|
|
732
732
|
let OdxTabBar = _OdxTabBar;
|
|
733
733
|
|
|
734
|
-
const styles$1b = ":host{display:flex
|
|
734
|
+
const styles$1b = ":host{display:flex}odx-tab-bar{width:100%}:host([vertical]){odx-tab-bar{min-inline-size:15ch}}";
|
|
735
735
|
|
|
736
736
|
const _OdxAnchorNavigation = class _OdxAnchorNavigation extends e(CustomElement) {
|
|
737
737
|
constructor() {
|
|
@@ -1019,7 +1019,7 @@ __decorateClass([
|
|
|
1019
1019
|
], _OdxLink.prototype, "subtle", 2);
|
|
1020
1020
|
let OdxLink = _OdxLink;
|
|
1021
1021
|
|
|
1022
|
-
const styles$14 = ":host{display:flex;flex-wrap:wrap;place-items:center;
|
|
1022
|
+
const styles$14 = ":host{display:flex;flex-wrap:wrap;place-items:center;min-block-size:var(--odx-size-300)}::slotted(odx-link){display:inline-flex;gap:var(--odx-spacing-sm);align-items:center;padding-inline:var(--odx-spacing-control-x-md)}::slotted(odx-link:last-of-type){color:var(--odx-color-foreground-rest)}::slotted(odx-link[hidden]){display:none}::slotted([odx-breadcrumbs-separator]){margin-inline:calc(-1 * var(--odx-spacing-control-x-md));color:var(--odx-color-foreground-rest-subtle);pointer-events:none}";
|
|
1023
1023
|
|
|
1024
1024
|
const breadcrumbsItemSeparator = (() => {
|
|
1025
1025
|
const element = new OdxIconElement();
|
|
@@ -1172,7 +1172,7 @@ __decorateClass([
|
|
|
1172
1172
|
], _OdxCheckbox.prototype, "indeterminate", 2);
|
|
1173
1173
|
let OdxCheckbox = _OdxCheckbox;
|
|
1174
1174
|
|
|
1175
|
-
const styles$10 = ":host{display:flex;column-gap:var(--odx-spacing-
|
|
1175
|
+
const styles$10 = ":host{display:flex;column-gap:var(--odx-spacing-sm)}::slotted(odx-checkbox-group){margin-inline-start:var(--odx-spacing-md)}::slotted(odx-separator){--inner-spacing: var(--odx-spacing-sm);--spacing: var(--odx-spacing-sm)}:host(:not([layout=\"horizontal\"])){flex-direction:column}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch):not(:last-of-type)){border-block-end:var(--odx-border-width-thin) solid var(--odx-color-stroke-neutral-subtle)}:host([layout=\"list\"]) ::slotted(:is(odx-checkbox,odx-switch)){margin:0;padding:var(--odx-spacing-sm);inline-size:auto}";
|
|
1176
1176
|
|
|
1177
1177
|
const CheckboxGroupLayout = { VERTICAL: "vertical", HORIZONTAL: "horizontal", LIST: "list" };
|
|
1178
1178
|
const _OdxCheckboxGroup = class _OdxCheckboxGroup extends CheckboxGroupFormControl {
|
|
@@ -1611,7 +1611,7 @@ const _OdxDrawer = class _OdxDrawer extends CustomElement {
|
|
|
1611
1611
|
this.popover = null;
|
|
1612
1612
|
}
|
|
1613
1613
|
render() {
|
|
1614
|
-
return html`<div class="base"><slot></slot></div
|
|
1614
|
+
return html`<div class="base"><slot></slot></div>`;
|
|
1615
1615
|
}
|
|
1616
1616
|
};
|
|
1617
1617
|
__decorateClass([
|
|
@@ -1888,7 +1888,7 @@ __decorateClass([
|
|
|
1888
1888
|
], _OdxGradientOverlay.prototype, "size", 2);
|
|
1889
1889
|
let OdxGradientOverlay = _OdxGradientOverlay;
|
|
1890
1890
|
|
|
1891
|
-
const styles$T = ":host{display:block;position:relative;block-size:var(--odx-size-300)}.base{display:flex;position:relative;gap:var(--odx-spacing-
|
|
1891
|
+
const styles$T = ":host{display:block;position:relative;block-size:var(--odx-size-300)}.base{display:flex;position:relative;gap:var(--odx-spacing-md);place-items:center;z-index:var(--odx-z-level-foreground);padding-inline:var(--odx-spacing-lg);block-size:100%}.background{position:absolute;inset:0;z-index:var(--odx-z-level-base);box-shadow:0 0 0 100vmax var(--odx-color-background-level-1);background-color:var(--odx-color-background-level-1);clip-path:inset(0 -100vmax)}odx-logo{flex:0 0 auto}::slotted(odx-action-group){gap:var(--odx-spacing-sm)}::slotted(odx-search-bar){flex:1 1 auto;max-inline-size:25ch}::slotted(odx-separator){--size: var(--odx-size-125);--inner-spacing: 0px;--spacing: var(--odx-spacing-sm)}.actions{display:flex;flex-wrap:nowrap;gap:var(--odx-spacing-sm);align-items:center;margin-inline-start:auto;block-size:100%;max-width:60%}odx-logo.compact{display:none}:host([size=\"lg\"]){block-size:var(--odx-size-500);.base{gap:var(--odx-spacing-lg)}::slotted(odx-action-group),.actions{gap:var(--odx-spacing-md)}}@media screen and (width <= 600px){odx-logo{display:none}odx-logo.compact{display:block}}@media screen and (width <= 450px){odx-logo.compact{display:none}}";
|
|
1892
1892
|
|
|
1893
1893
|
const HeaderSize = pick(Size, ["SM", "MD", "LG"]);
|
|
1894
1894
|
const _OdxHeader = class _OdxHeader extends CustomElement {
|
|
@@ -2250,7 +2250,7 @@ __decorateClass([
|
|
|
2250
2250
|
], _OdxImage.prototype, "width", 2);
|
|
2251
2251
|
let OdxImage = _OdxImage;
|
|
2252
2252
|
|
|
2253
|
-
const styles$P = ":host{display:flex;gap:var(--odx-spacing-
|
|
2253
|
+
const styles$P = ":host{display:flex;gap:var(--odx-spacing-md);align-items:flex-start;transition:var(--odx-transition-reduced);transition-property:background-color,color,display,opacity;border-color:var(--odx-color-stroke-neutral-subtle);background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-md);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);transition-behavior:allow-discrete;@starting-style{opacity:0}}.icon{--size: var(--odx-size-150)}.base{flex:1 1 auto;line-height:var(--odx-typography-line-height-base);font-size:var(--odx-typography-font-size-2)}.action{--_color-foreground: inherit;margin-block-start:var(--odx-spacing-negative-37);margin-inline-end:var(--odx-spacing-negative-37)}:host([strong]){border-block-end-width:var(--odx-border-width-thick);border-block-end-style:solid;padding-block-end:calc(var(--odx-spacing-md) - var(--odx-border-width-thick))}:host([variant=\"primary\"]){border-color:var(--odx-color-stroke-primary-rest);background-color:var(--odx-color-background-primary-subtle)}:host([variant=\"danger\"]){border-color:var(--odx-color-stroke-danger-rest);background-color:var(--odx-color-background-danger-subtle)}:host([variant=\"warning\"]){border-color:var(--odx-color-stroke-warning-rest);background-color:var(--odx-color-background-warning-subtle)}:host([variant=\"success\"]){border-color:var(--odx-color-stroke-success-rest);background-color:var(--odx-color-background-success-subtle)}:host([hidden]){display:none;opacity:0}";
|
|
2254
2254
|
|
|
2255
2255
|
const iconMap = {
|
|
2256
2256
|
neutral: "core::info",
|
|
@@ -2722,22 +2722,30 @@ __decorateClass([
|
|
|
2722
2722
|
], _OdxLoadingOverlay.prototype, "loading", 2);
|
|
2723
2723
|
let OdxLoadingOverlay = _OdxLoadingOverlay;
|
|
2724
2724
|
|
|
2725
|
-
const styles$G = ":host{--size: var(--odx-size-225);display:flex;place-content:center;place-items:center;block-size:1em;color:inherit;font-size:var(--size)}.base{display:
|
|
2725
|
+
const styles$G = ":host{--size: var(--odx-size-225);display:flex;flex-direction:column;place-content:center;place-items:center;text-align:center;font-size:inherit}.base{block-size:1em;color:inherit;font-size:var(--size)}:host(:is([type=\"spinner\"],:not([type]))){.indicator-container,.base{display:flex;position:relative;place-content:center;place-items:center;inline-size:1em}.indicator-container{block-size:1em;animation:loading-spinner-rotation-animation 1.5s linear infinite}.spinner{position:absolute;inset:auto;line-height:0;color:var(--odx-color-foreground-accent-rest);font-size:.5em}.track,.indicator{stroke-width:var(--odx-spacing-37)}.track{stroke:var(--odx-color-background-transparent-pressed)}.indicator{animation:loading-spinner-animation 1.5s ease-in-out infinite;color:inherit;stroke:currentcolor;stroke-dasharray:90,180;stroke-dashoffset:-5;stroke-linecap:round}:not(svg){transform-origin:0 0}}:host(:is([type=\"dots\"],[type=\"inline\"])){--size: var(--odx-size-150);.base{--_animation-duration: 1.5s;--_animation-delay: calc(-1 * var(--_animation-duration) / 12);display:flex;gap:calc(var(--odx-spacing-37) / 2);align-items:center;padding:var(--odx-spacing-37);animation:loading-spinner-dots-entry-animation .25s linear both;&:before,&:after{content:\"\"}&:before{--_animation-delay: calc(-1 * var(--_animation-duration) / 6)}&:after{--_animation-delay: 0s}.indicator,&:after,&:before{display:block;flex:0 0 calc(var(--size) / 3);z-index:var(--odx-z-level-foreground);border-radius:var(--odx-border-radius-circle);background-color:currentcolor;block-size:calc(var(--size) / 3);animation:loading-spinner-dots-animation var(--_animation-duration) var(--_animation-delay) infinite cubic-bezier(.96,.21,.41,.76) forwards}}}:host([type=\"inline\"]){flex-direction:row;gap:var(--odx-spacing-12);align-items:baseline;.base{--size: .75em;padding:0}}@keyframes loading-spinner-animation{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes loading-spinner-rotation-animation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-spinner-dots-entry-animation{0%{opacity:0}to{opacity:1}}@keyframes loading-spinner-dots-animation{0%,75%,to{transform:scale(.667);background-color:var(--odx-color-background-transparent-pressed)}50%{transform:scale(1);background-color:currentcolor}}";
|
|
2726
2726
|
|
|
2727
|
+
const LoadingSpinnerType = { SPINNER: "spinner", DOTS: "dots", INLINE: "inline" };
|
|
2727
2728
|
const _OdxLoadingSpinner = class _OdxLoadingSpinner extends CustomElement {
|
|
2729
|
+
constructor() {
|
|
2730
|
+
super(...arguments);
|
|
2731
|
+
this.type = LoadingSpinnerType.SPINNER;
|
|
2732
|
+
}
|
|
2728
2733
|
static {
|
|
2729
2734
|
customElement("odx-loading-spinner", styles$G)(_OdxLoadingSpinner);
|
|
2730
2735
|
}
|
|
2731
2736
|
render() {
|
|
2732
|
-
|
|
2733
|
-
|
|
2737
|
+
switch (this.type) {
|
|
2738
|
+
case LoadingSpinnerType.INLINE:
|
|
2739
|
+
case LoadingSpinnerType.DOTS:
|
|
2740
|
+
return html`<slot></slot><div class="base"><div class="indicator"></div></div>`;
|
|
2741
|
+
default:
|
|
2742
|
+
return html`<div class="base"><svg class="indicator-container" role="progressbar" aria-label="Loading" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><circle class="track" cx="24" cy="24" r="20" fill="none"></circle><circle class="indicator" cx="24" cy="24" r="20" fill="none"></circle></svg> ${optionalSlot(this, "spinner")}</div><slot></slot>`;
|
|
2734
2743
|
}
|
|
2735
|
-
return html`<svg class="base" role="progressbar" aria-label="Loading" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><circle class="track" cx="24" cy="24" r="20" fill="none"></circle><circle class="indicator" cx="24" cy="24" r="20" fill="none"></circle></svg>`;
|
|
2736
2744
|
}
|
|
2737
2745
|
};
|
|
2738
2746
|
__decorateClass([
|
|
2739
|
-
property({ reflect: true })
|
|
2740
|
-
], _OdxLoadingSpinner.prototype, "
|
|
2747
|
+
property({ reflect: true, useDefault: true })
|
|
2748
|
+
], _OdxLoadingSpinner.prototype, "type", 2);
|
|
2741
2749
|
let OdxLoadingSpinner = _OdxLoadingSpinner;
|
|
2742
2750
|
|
|
2743
2751
|
const styles$F = ":host{display:inline-block;margin-block:var(--odx-spacing-37);background-color:currentcolor;aspect-ratio:92 / 36;mask-image:url(\"data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'%20?%3e%3csvg%20id='Layer_1'%20data-name='Layer%201'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2091.6%2035.43'%3e%3cpath%20d='m81.18,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56Zm-12.11-10.93v-4.24c0-1.59.74-2.44,2.34-2.44,1.49,0,2.34.85,2.34,2.33v4.35h-4.68Zm10.31,3.29v-8.06c0-3.4-1.81-4.99-5.63-4.99h-4.68c-2.02,0-2.87.21-3.93,1.06-1.06.96-1.7,2.33-1.7,3.93v10.71c0,1.48.43,2.55,1.38,3.61,1.06,1.06,2.02,1.38,4.25,1.38h10.2v-4.24c-2.87.85-4.57,1.06-6.69,1.06-2.44,0-3.51-.53-3.51-1.91v-2.55h10.31Zm-27.63,6.37c0-1.59.74-2.44,2.34-2.44s2.44.85,2.44,2.44v2.33c0,1.38-.85,2.23-2.34,2.23-1.59,0-2.44-.85-2.44-2.23v-2.33Zm10.41-.53c0-1.59-.32-2.65-1.17-3.61-1.06-1.17-2.23-1.49-4.46-1.49h-4.68c-2.12,0-2.97.21-4.04,1.06-1.06.95-1.7,2.44-1.7,4.03v3.08c0,1.49.53,2.76,1.38,3.61,1.06,1.17,2.02,1.48,4.36,1.48h4.68c2.02,0,2.98-.21,4.04-1.06,1.06-.95,1.59-2.12,1.59-4.03v-3.08Zm-10.41-13.58c0-1.38.85-2.23,2.44-2.23s2.44.85,2.44,2.23v2.44c0,1.38-.96,2.23-2.44,2.23-1.59,0-2.44-.85-2.44-2.23v-2.44Zm9.99-5.3h-9.99c-1.91,0-2.66.21-3.72,1.06-1.06.96-1.59,2.33-1.59,3.93v3.08c0,1.27.43,2.55,1.28,3.5,1.06,1.17,1.91,1.49,4.04,1.49h4.57c2.02,0,2.87-.32,3.83-1.06,1.06-.95,1.59-2.23,1.59-3.93v-8.06Zm-22.63,17.4h-2.44c-.96,0-1.7-.32-2.13-1.06-.21-.32-.21-.42-.21-1.38v-1.91c0-1.59.74-2.33,2.34-2.33h2.44v6.68Zm0-9.97h-4.89c-1.91,0-2.76.21-3.72,1.17-1.06.85-1.59,2.12-1.59,3.82v3.29c0,1.48.32,2.55,1.17,3.5,1.06,1.17,2.02,1.48,4.25,1.48h10.52v-15.81c0-1.38-.43-2.55-1.38-3.5-1.17-1.17-2.13-1.49-4.25-1.49h-8.5v4.24c2.13-.85,3.51-1.17,5.42-1.17,2.02,0,2.97.64,2.97,2.02v2.44Zm2.34-15.81c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-7.55,0c-1.81,0-3.19,1.38-3.19,3.08,0,1.8,1.38,3.18,3.19,3.18,1.7,0,3.08-1.38,3.08-3.18,0-1.7-1.38-3.08-3.08-3.08Zm-14.77,29.07h5.63v-14.43c0-1.06,0-1.38.21-1.7.32-.74,1.17-1.17,2.23-1.17.96,0,1.59.21,2.34.74v-4.24c-6.27.11-8.29.53-10.41,2.23v18.56ZM0,.72v2.97h9.14c1.06,0,1.59.21,2.13.74.43.53.43.74.43,2.65v15.29c0,2.87-.53,3.4-3.08,3.4h-2.55V6.67H0v22.4h11.26c2.66,0,3.4-.21,4.68-1.49,1.17-1.17,1.38-2.02,1.38-5.31V6.24c0-2.02-.21-2.76-1.06-3.82-1.06-1.17-2.44-1.7-4.36-1.7H0Z'%20/%3e%3c/svg%3e\");mask-repeat:no-repeat;mask-origin:content-box;mask-position:center center}:host([compact]){aspect-ratio:1;mask-image:url(\"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2017%2028'%3e%3cpath%20d='M0%200v2.97h9.14c1.06%200%201.59.21%202.13.74.43.53.43.74.43%202.65v15.29c0%202.87-.53%203.4-3.08%203.4H6.07V5.95H0v22.4h11.26c2.66%200%203.4-.21%204.68-1.49%201.17-1.17%201.38-2.02%201.38-5.31V5.52c0-2.02-.21-2.76-1.06-3.82C15.2.53%2013.82%200%2011.9%200H0Z'%20/%3e%3c/svg%3e\")}:host,:host([size=\"sm\"]){block-size:var(--odx-size-150)}:host([size=\"xs\"]){margin-block:var(--odx-spacing-25);block-size:calc(var(--odx-size-150) - 2 * var(--odx-spacing-25))}:host([size=\"md\"]){block-size:var(--odx-size-225)}:host([size=\"lg\"]){block-size:var(--odx-size-300)}:host([size=\"xl\"]){block-size:var(--odx-size-400)}";
|
|
@@ -3147,7 +3155,7 @@ class OdxOption extends OptionControl {
|
|
|
3147
3155
|
}
|
|
3148
3156
|
}
|
|
3149
3157
|
|
|
3150
|
-
const styles$y = ":host{--_page-width: var(--odx-page-size, 1600px);--_page-sticky-offset: calc(var(--_page-header-size, 0) + var(--_page-subheader-size, 0));display:grid;grid-template:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto) / 100%;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";min-block-size:100dvh}.header,.subheader{position:sticky
|
|
3158
|
+
const styles$y = ":host{--_page-width: var(--odx-page-size, 1600px);--_page-sticky-offset: calc(var(--_page-header-size, 0) + var(--_page-subheader-size, 0));display:grid;grid-template:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto) / 100%;grid-template-areas:\"header\" \"subheader\" \"content\" \"footer\";min-block-size:100dvh}.header,.subheader{position:sticky}.subheader,.content{background-color:var(--odx-color-background-base);inline-size:100%;max-inline-size:var(--_page-width)}.header{inset-block-start:0;grid-area:header;z-index:calc(var(--odx-z-level-sticky-foreground) + 1)}.subheader{inset-block-start:var(--_page-header-size, 0);grid-area:subheader;z-index:var(--odx-z-level-sticky-foreground);padding-block:calc(var(--odx-spacing-lg) / 2);padding-inline:var(--odx-spacing-lg)}.content{grid-area:content;padding-inline:var(--odx-spacing-lg);block-size:100%}.footer{grid-area:footer}:host([alignment=\"center\"]){.header,.subheader,.content{margin-inline:auto}.header{inline-size:100%;max-inline-size:var(--_page-width)}}:host([layout=\"narrow\"]){--_page-width: 1100px}:host([layout=\"wide\"]){--_page-width: 1600px}::slotted(odx-page-layout){min-block-size:100%}@media (width >= 750px){:host{padding-inline:var(--odx-spacing-lg)}}@media (width < 750px){:host{--odx-spacing-lg: var(--odx-spacing-75);--odx-spacing-md: var(--odx-spacing-50)}}";
|
|
3151
3159
|
|
|
3152
3160
|
const PageAlignment = pick(Alignment, ["START", "CENTER"]);
|
|
3153
3161
|
const PageLayout = { AUTO: "auto", NARROW: "narrow", WIDE: "wide" };
|
|
@@ -3775,7 +3783,7 @@ __decorateClass([
|
|
|
3775
3783
|
], _OdxSelect.prototype, "maxVisibleSelectedOptions", 2);
|
|
3776
3784
|
let OdxSelect = _OdxSelect;
|
|
3777
3785
|
|
|
3778
|
-
const styles$m = ":host{--color: var(--odx-color-stroke-neutral-subtle);--size: var(--odx-
|
|
3786
|
+
const styles$m = ":host{--color: var(--odx-color-stroke-neutral-subtle);--size: var(--odx-spacing-md);--spacing: var(--odx-spacing-sm);--inner-spacing: var(--odx-spacing-md);display:flex;align-items:center;transition:var(--odx-transition-default);transition-property:opacity;margin-block:calc(var(--spacing) - .5 * var(--odx-spacing-px));margin-inline:var(--inner-spacing);text-align:center}:before,:after{display:block;flex:1 1 auto;background-color:var(--color);block-size:var(--odx-size-px);content:\"\";pointer-events:none}:host(:not([vertical],:empty)){:after,:before{margin-inline:var(--odx-spacing-sm);min-inline-size:calc(var(--size) / 2)}:before{margin-inline-start:0}:after{margin-inline-end:0}}:host([vertical]){flex-direction:column;margin-block:var(--inner-spacing);margin-inline:calc(var(--spacing) - .5 * var(--odx-spacing-px));:after,:before{block-size:calc(100% - 2 * var(--inner-spacing));min-block-size:calc(var(--size) / 2);inline-size:var(--odx-size-px)}}:host([strong]){--color: var(--odx-color-stroke-neutral-strong)}:host([alignment=\"start\"]) :before{flex:0 0 var(--odx-spacing-spacing-md)}:host([alignment=\"end\"]) :after{flex:0 0 var(--odx-spacing-spacing-md)}";
|
|
3779
3787
|
|
|
3780
3788
|
const SeparatorAlignment = pick(Alignment, ["START", "CENTER", "END"]);
|
|
3781
3789
|
const _OdxSeparator = class _OdxSeparator extends CustomElement {
|
|
@@ -4899,4 +4907,4 @@ __decorateClass([
|
|
|
4899
4907
|
], _OdxTranslate.prototype, "context", 2);
|
|
4900
4908
|
let OdxTranslate = _OdxTranslate;
|
|
4901
4909
|
|
|
4902
|
-
export { AccordionItemIndicatorPosition, AccordionItemSize, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CardVariant, CheckboxGroupLayout, ChipVariant, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LOADING_OVERLAY_HOST_DIRECTIVE, ListItemSize, LogoSize, MenuItemVariant, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, 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, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, modalToggleDirective, sliderContext, tableContext };
|
|
4910
|
+
export { AccordionItemIndicatorPosition, AccordionItemSize, AreaFooterAlignment, AreaFooterSize, AreaHeaderAlignment, AreaHeaderSize, AvatarShape, AvatarSize, AvatarVariant, BadgeVariant, BaseFormat, ButtonSize, ButtonVariant, CardVariant, CheckboxGroupLayout, ChipVariant, DrawerPosition, DropdownPlacement, EmptyStateAlignment, EmptyStateSize, EmptyStateVariant, GradientOverlaySize, HeaderSize, HighlightVariant, InlineMessageVariant, KeyValueAlignment, KeyValueLayout, KeyValueSize, KeyValueVariant, LOADING_OVERLAY_HOST_DIRECTIVE, ListItemSize, LoadingSpinnerType, LogoSize, MenuItemVariant, ModalLayout, NavigationItemSize, OdxAccordion, OdxAccordionItem, OdxAccordionPanel, 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, OdxKeyValue, OdxKeyValueList, OdxLabel, OdxLineClamp, OdxLink, OdxList, OdxListItem, OdxLoadingOverlay, OdxLoadingSpinner, OdxLogo, OdxMainMenu, OdxMainMenuButton, OdxMainMenuSubtitle, OdxMainMenuTitle, OdxMenu, OdxMenuItem, OdxModal, OdxNavigation, OdxNavigationItem, OdxNavigationItemGroup, OdxOption, OdxPage, OdxPageLayout, OdxPagination, OdxPopover, OdxProgressBar, OdxProgressRing, OdxRadioButton, OdxRadioGroup, OdxRailNavigation, OdxRelativeTime, OdxScrollContainer, OdxSearchBar, OdxSelect, OdxSeparator, OdxSkeleton, OdxSlider, OdxSliderHandle, OdxSliderMarks, OdxSpinbox, OdxStatus, OdxSwitch, OdxTabBar, OdxTable, OdxTableBody, OdxTableCell, OdxTableCheckboxCell, OdxTableHeader, OdxTableHeaderCell, OdxTableRow, OdxText, OdxTextArea, OdxTile, OdxTitle, OdxToast, OdxToggleButton, OdxToggleButtonGroup, OdxToggleContent, OdxToolbar, OdxTooltip, OdxTranslate, PageAlignment, PageLayout, PageLayoutAlignment, ProgressRingSize, RadioGroupLayout, SearchBarBehavior, SearchEvent, SeparatorAlignment, SkeletonShape, SkeletonSize, SliderLabelVisibility, SliderTrackVisibility, StatusVariant, SwitchIndicatorPosition, TabBarAlignment, TextSize, TextVariant, TileAlignment, TileVariant, TitleSize, ToastVariant, ToggleButtonSize, ToggleButtonVariant, ToolbarSize, TooltipPlacement, TooltipSize, TooltipVariant, buttonDirective, modalToggleDirective, sliderContext, tableContext };
|
package/dist/css.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 2;--odx-z-level-sticky: 10;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.odx-fill{flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-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);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.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-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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)}.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-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
|
|
1
|
+
@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.odx-fill{flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-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);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.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-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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)}.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-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}
|
package/dist/main.js
CHANGED
|
@@ -5,7 +5,7 @@ import { r as round, u as uniqBy, R as RovingTabindexController, m as minBy, p a
|
|
|
5
5
|
|
|
6
6
|
const name = "@odx/foundation";
|
|
7
7
|
const displayName = "ODX Design System Foundation";
|
|
8
|
-
const version = "1.0.0-beta.
|
|
8
|
+
const version = "1.0.0-beta.187";
|
|
9
9
|
const pkg = {
|
|
10
10
|
name,
|
|
11
11
|
displayName,
|
|
@@ -111,7 +111,7 @@ function insertChildrenBetween(elements, newChild, shouldInsert) {
|
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
113
|
|
|
114
|
-
const customElementStyles = "@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 2;--odx-z-level-sticky: 10;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.odx-fill{flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-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);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.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-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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)}.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-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),\"Noto Sans\",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header{margin-block-start:calc(-1 * var(--odx-spacing-lg))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
|
|
114
|
+
const customElementStyles = "@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.odx-fill{flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-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);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.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-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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)}.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-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),\"Noto Sans\",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header{margin-block-start:calc(-1 * var(--odx-spacing-lg))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer reset{:host{outline:none;border:none;border-color:transparent}}";
|
|
115
115
|
|
|
116
116
|
async function loadCustomElements(loader) {
|
|
117
117
|
const entries = await loader();
|
|
@@ -1060,7 +1060,7 @@ function optionalSlot(host, slotName, classNames) {
|
|
|
1060
1060
|
return nothing;
|
|
1061
1061
|
}
|
|
1062
1062
|
|
|
1063
|
-
const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_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;--_block-size: var(--odx-size-control-md);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-150);--_padding-block: var(--odx-spacing-control-y-md);--_padding-inline: var(--odx-spacing-control-x-md);position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:calc(var(--_padding-inline) - var(--odx-border-width-thin));block-size:100%;inline-size:100%;min-inline-size:var(--_block-size);overflow:hidden;text-align:inherit;text-decoration:none;line-height:min(calc(var(--_block-size) / 2),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--size: var(--_icon-size);color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:inherit;pointer-events:none}slot:not([name])::slotted(*){line-height:inherit}
|
|
1063
|
+
const styles = "@layer base{:host{--_color-background: var(--odx-color-background-transparent-rest);--_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;--_block-size: var(--odx-size-control-md);--_min-inline-size: var(--odx-size-500);--_font-size: var(--odx-typography-font-size-3);--_icon-size: var(--odx-size-150);--_padding-block: var(--odx-spacing-control-y-md);--_padding-inline: var(--odx-spacing-control-x-md);position:relative;transition:var(--odx-transition-reduced);transition-property:border-color;margin:0;border-radius:var(--odx-border-radius-controls);cursor:pointer;block-size:var(--_block-size);min-inline-size:max(var(--_min-inline-size),min-content);max-inline-size:100%;user-select:none;font-weight:var(--odx-typography-font-weight-normal);-webkit-tap-highlight-color:transparent}:host,[part~=base]{display:inline-flex;place-items:center;touch-action:manipulation}[part~=base]{column-gap:var(--_padding-inline);transition:var(--odx-transition-reduced);transition-property:background-color,border-color,color,opacity,transform,block-size;border:var(--odx-border-width-thin) solid var(--_color-stroke);border-radius:inherit;background-color:var(--_color-background, transparent);cursor:inherit;padding-block:var(--_padding-block);padding-inline:calc(var(--_padding-inline) - var(--odx-border-width-thin));block-size:100%;inline-size:100%;min-inline-size:var(--_block-size);overflow:hidden;text-align:inherit;text-decoration:none;line-height:min(calc(var(--_block-size) / 2),1em);color:var(--_color-foreground);font-size:var(--_font-size);font-weight:inherit;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset)}}[part~=base]::-moz-focus-inner{border:0;padding:0}[part~=spinner]{--size: calc(var(--_icon-size) - var(--odx-spacing-25));margin-inline:calc(-1 * var(--_padding-block) + var(--odx-spacing-12));color:var(--_color-foreground)}[part~=label]{flex:1;margin-block:calc(-1 * var(--_padding-block));margin-inline:calc(-1 * var(--_padding-inline));padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);text-align:inherit;pointer-events:none}slot:not([name])::slotted(*){line-height:inherit}odx-icon,::slotted(odx-icon),::slotted(odx-avatar),slot:is([name=prefix],[name=suffix])::slotted(*){margin-inline:calc(-1 * var(--_padding-block))}slot:is([name=prefix],[name=suffix])::slotted([odx-button]){margin-inline:calc(-1 * var(--_padding-inline))}odx-icon,::slotted(odx-icon),::slotted(odx-avatar){--size: var(--_icon-size)}::slotted(odx-avatar){--size: var(--_icon-size);font-size:var(--odx-typography-font-size-1)}::slotted(odx-avatar:not([variant])){background-color:var(--odx-color-background-transparent-pressed)}::slotted([slot=\"badge\"]){position:absolute;inset-block-start:var(--odx-spacing-12);inset-inline-end:var(--odx-spacing-12);z-index:var(--odx-z-level-overlay);pointer-events:none;translate:var(--_padding-block) -50%}}@layer state{:host([badge-position=\"end\"]) ::slotted([slot=\"badge\"]){inset-block-start:unset;inset-block-end:0;translate:var(--_padding-block) 50%}:host([disabled]) [part~=base]{pointer-events:none;user-select:none}:host(:not([loading])) [part~=base]:hover{--_color-background: var(--_color-background-hover);--_color-stroke: var(--_color-stroke-hover);--_color-foreground: var(--_color-foreground-hover)}:host(:not([loading])) [part~=base]:active{--_color-background: var(--_color-background-pressed);--_color-foreground: var(--_color-foreground-pressed);--_color-stroke: var(--_color-stroke-pressed)}:host([loading]){cursor:default}: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}}@layer variant{:host([size=\"sm\"]){--_block-size: var(--odx-size-control-sm);--_padding-block: var(--odx-spacing-control-y-sm);--_padding-inline: var(--odx-spacing-control-x-sm);--_font-size: var(--odx-typography-font-size-2);--_icon-size: var(--odx-size-125)}:host([size=\"lg\"]){--_block-size: var(--odx-size-control-lg);--_padding-block: var(--odx-spacing-control-y-lg);--_padding-inline: var(--odx-spacing-control-x-lg);--_font-size: var(--odx-typography-font-size-4);--_icon-size: var(--odx-size-200)}}";
|
|
1064
1064
|
|
|
1065
1065
|
class InteractiveLink extends CanBeDisabled(CustomElement) {
|
|
1066
1066
|
constructor() {
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 2;--odx-z-level-sticky: 10;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.odx-fill{flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-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);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.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-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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)}.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-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header{margin-block-start:calc(-1 * var(--odx-spacing-lg))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}
|
|
1
|
+
@layer reset,base,variant,state,theme,utils;:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-focus-ring-outer: var(--odx-size-12) solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner: 0 0 0 calc(-1 * var(--odx-focus-ring-offset)) var(--odx-color-stroke-focus-inner) inset;--odx-focus-ring-offset: var(--odx-spacing-negative-12);--odx-focus-ring-offset-sm: var(--odx-spacing-negative-px);--odx-z-level-background: -1;--odx-z-level-base: 0;--odx-z-level-foreground: 1;--odx-z-level-interactive: 5;--odx-z-level-sticky: 10;--odx-z-level-sticky-foreground: 15;--odx-z-level-overlay: 100;--odx-z-level-topmost: 9999;--odx-size-control-xs: var(--odx-size-175);--odx-size-control-sm: var(--odx-size-200);--odx-size-control-md: var(--odx-size-225);--odx-size-control-lg: var(--odx-size-300);--odx-spacing-sm: var(--odx-spacing-37);--odx-spacing-md: var(--odx-spacing-75);--odx-spacing-lg: var(--odx-spacing-100);--odx-spacing-control-x-sm: var(--odx-spacing-50);--odx-spacing-control-x-md: var(--odx-spacing-75);--odx-spacing-control-x-lg: var(--odx-spacing-100);--odx-spacing-control-y-sm: var(--odx-spacing-25);--odx-spacing-control-y-md: var(--odx-spacing-37);--odx-spacing-control-y-lg: var(--odx-spacing-50);--odx-font-size-text-xs: var(--odx-typography-font-size-1);--odx-line-height-text-xs: var(--odx-typography-line-height-1);--odx-font-size-text-sm: var(--odx-typography-font-size-2);--odx-line-height-text-sm: var(--odx-typography-line-height-2);--odx-font-size-text-md: var(--odx-breakpoint-font-size-p-base);--odx-line-height-text-md: var(--odx-breakpoint-line-height-p-base);--odx-font-size-text-lg: var(--odx-breakpoint-font-size-p-lg);--odx-line-height-text-lg: var(--odx-breakpoint-line-height-p-lg);--odx-font-size-heading-xs: var(--odx-breakpoint-font-size-heading-6);--odx-line-height-heading-xs: var(--odx-breakpoint-line-height-heading-6);--odx-font-size-heading-sm: var(--odx-breakpoint-font-size-heading-5);--odx-line-height-heading-sm: var(--odx-breakpoint-line-height-heading-5);--odx-font-size-heading-md: var(--odx-breakpoint-font-size-heading-4);--odx-line-height-heading-md: var(--odx-breakpoint-line-height-heading-4);--odx-font-size-heading-lg: var(--odx-breakpoint-font-size-heading-3);--odx-line-height-heading-lg: var(--odx-breakpoint-line-height-heading-3);--odx-font-size-heading-xl: var(--odx-breakpoint-font-size-heading-2);--odx-line-height-heading-xl: var(--odx-breakpoint-line-height-heading-2);--odx-font-size-heading-xxl: var(--odx-breakpoint-font-size-heading-1);--odx-line-height-heading-xxl: var(--odx-breakpoint-line-height-heading-1)}@layer reset{:where(*){scrollbar-width:thin}:where(*,:before,:after){box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;margin:0;border:0;padding:0}:where(img,picture,video,canvas){display:block;max-inline-size:100%}:where(input,button,textarea,select){appearance:none;font-family:inherit;font-feature-settings:inherit;font-size:inherit}:where(a){text-decoration:underline;color:var(--odx-color-foreground-accent-rest)}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){outline:none;border:none}@media (prefers-reduced-motion: reduce){:where(*,:before,:after){transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}}@layer base{[class*=odx-title-],:where(h1,h2,h3,h4,h5,h6){display:block;font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold)}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}.odx-title-xs,:where(h6){line-height:var(--odx-line-height-heading-xs);font-size:var(--odx-font-size-heading-xs)}.odx-title-sm,:where(h5){line-height:var(--odx-line-height-heading-sm);font-size:var(--odx-font-size-heading-sm)}.odx-title-md,:where(h4){line-height:var(--odx-line-height-heading-md);font-size:var(--odx-font-size-heading-md)}.odx-title-lg,:where(h3){line-height:var(--odx-line-height-heading-lg);font-size:var(--odx-font-size-heading-lg)}.odx-title-xl,:where(h2){line-height:var(--odx-line-height-heading-xl);font-size:var(--odx-font-size-heading-xl)}.odx-title-xxl,:where(h1){line-height:var(--odx-line-height-heading-xxl);font-size:var(--odx-font-size-heading-xxl)}.odx-title-display-sm{line-height:var(--odx-breakpoint-line-height-display-sm);font-size:var(--odx-breakpoint-font-size-display-sm)}.odx-title-display-md{line-height:var(--odx-breakpoint-line-height-display-md);font-size:var(--odx-breakpoint-font-size-display-md)}.odx-title-display-lg{line-height:var(--odx-breakpoint-line-height-display-lg);font-size:var(--odx-breakpoint-font-size-display-lg)}.odx-title-display-xl{line-height:var(--odx-breakpoint-line-height-display-xl);font-size:var(--odx-breakpoint-font-size-display-xl)}.odx-text-xs{line-height:var(--odx-line-height-text-xs);font-size:var(--odx-font-size-text-xs)}.odx-text-sm{line-height:var(--odx-line-height-text-sm);font-size:var(--odx-font-size-text-sm)}.odx-text-md,:where(p){line-height:var(--odx-line-height-text-md);font-size:var(--odx-font-size-text-md)}.odx-text-lg{line-height:var(--odx-line-height-text-lg);font-size:var(--odx-font-size-text-lg)}}@layer base{odx-content-box,.odx-content-box,.odx-content{>h1,>h2,>h3,>h4,>h5,>h6,>p:not(:last-child){margin-block:0 var(--odx-spacing-md)}ol,ul{margin-block:var(--odx-spacing-md);padding-inline-start:var(--odx-spacing-200)}}odx-content-box,:where(.odx-content-box){background-color:var(--odx-color-background-level-1);padding:var(--odx-spacing-lg)}}@layer base{.odx-cluster,.odx-flank,.odx-stack{display:flex;flex-direction:column;gap:var(--odx-spacing-md);align-items:center;justify-content:flex-start;max-inline-size:100%;text-align:inherit}.odx-cluster{flex-flow:row 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){flex:1}.odx-fill{flex:1}.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}}@layer base{[class*=odx-auto-grid]{--max-columns: 6;--min-column-size: 250px;--gap: var(--odx-spacing-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);display:grid;grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}}@layer utils{.odx-g-auto{--gap: auto;gap:auto}.odx-gx-auto{column-gap:auto}.odx-gy-auto{row-gap:auto}.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-p-auto{padding:auto}.odx-px-auto{padding-inline:auto}.odx-pl-auto{padding-inline-start:auto}.odx-pr-auto{padding-inline-end:auto}.odx-py-auto{padding-block:auto}.odx-pt-auto{padding-block-start:auto}.odx-pb-auto{padding-block-end:auto}.odx-g-0{--gap: 0px;gap:0px}.odx-gx-0{column-gap:0px}.odx-gy-0{row-gap:0px}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0px}.odx-ml-0{margin-inline-start:0px}.odx-mr-0{margin-inline-end:0px}.odx-my-0{margin-block:0px}.odx-mt-0{margin-block-start:0px}.odx-mb-0{margin-block-end:0px}.odx-p-0{padding:0}.odx-px-0{padding-inline:0px}.odx-pl-0{padding-inline-start:0px}.odx-pr-0{padding-inline-end:0px}.odx-py-0{padding-block:0px}.odx-pt-0{padding-block-start:0px}.odx-pb-0{padding-block-end:0px}.odx-g-1{--gap: var(--odx-spacing-px);gap:var(--odx-spacing-px)}.odx-gx-1{column-gap:var(--odx-spacing-px)}.odx-gy-1{row-gap:var(--odx-spacing-px)}.odx-m-1{margin:var(--odx-spacing-px)}.odx-mx-1{margin-inline:var(--odx-spacing-px)}.odx-ml-1{margin-inline-start:var(--odx-spacing-px)}.odx-mr-1{margin-inline-end:var(--odx-spacing-px)}.odx-my-1{margin-block:var(--odx-spacing-px)}.odx-mt-1{margin-block-start:var(--odx-spacing-px)}.odx-mb-1{margin-block-end:var(--odx-spacing-px)}.odx-p-1{padding:var(--odx-spacing-px)}.odx-px-1{padding-inline:var(--odx-spacing-px)}.odx-pl-1{padding-inline-start:var(--odx-spacing-px)}.odx-pr-1{padding-inline-end:var(--odx-spacing-px)}.odx-py-1{padding-block:var(--odx-spacing-px)}.odx-pt-1{padding-block-start:var(--odx-spacing-px)}.odx-pb-1{padding-block-end:var(--odx-spacing-px)}.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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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)}.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-g-200{--gap: var(--odx-spacing-200);gap:var(--odx-spacing-200)}.odx-gx-200{column-gap:var(--odx-spacing-200)}.odx-gy-200{row-gap:var(--odx-spacing-200)}.odx-m-200{margin:var(--odx-spacing-200)}.odx-mx-200{margin-inline:var(--odx-spacing-200)}.odx-ml-200{margin-inline-start:var(--odx-spacing-200)}.odx-mr-200{margin-inline-end:var(--odx-spacing-200)}.odx-my-200{margin-block:var(--odx-spacing-200)}.odx-mt-200{margin-block-start:var(--odx-spacing-200)}.odx-mb-200{margin-block-end:var(--odx-spacing-200)}.odx-p-200{padding:var(--odx-spacing-200)}.odx-px-200{padding-inline:var(--odx-spacing-200)}.odx-pl-200{padding-inline-start:var(--odx-spacing-200)}.odx-pr-200{padding-inline-end:var(--odx-spacing-200)}.odx-py-200{padding-block:var(--odx-spacing-200)}.odx-pt-200{padding-block-start:var(--odx-spacing-200)}.odx-pb-200{padding-block-end:var(--odx-spacing-200)}.odx-g-250{--gap: var(--odx-spacing-250);gap:var(--odx-spacing-250)}.odx-gx-250{column-gap:var(--odx-spacing-250)}.odx-gy-250{row-gap:var(--odx-spacing-250)}.odx-m-250{margin:var(--odx-spacing-250)}.odx-mx-250{margin-inline:var(--odx-spacing-250)}.odx-ml-250{margin-inline-start:var(--odx-spacing-250)}.odx-mr-250{margin-inline-end:var(--odx-spacing-250)}.odx-my-250{margin-block:var(--odx-spacing-250)}.odx-mt-250{margin-block-start:var(--odx-spacing-250)}.odx-mb-250{margin-block-end:var(--odx-spacing-250)}.odx-p-250{padding:var(--odx-spacing-250)}.odx-px-250{padding-inline:var(--odx-spacing-250)}.odx-pl-250{padding-inline-start:var(--odx-spacing-250)}.odx-pr-250{padding-inline-end:var(--odx-spacing-250)}.odx-py-250{padding-block:var(--odx-spacing-250)}.odx-pt-250{padding-block-start:var(--odx-spacing-250)}.odx-pb-250{padding-block-end:var(--odx-spacing-250)}.odx-g-sm{--gap: var(--odx-spacing-sm);gap:var(--odx-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-spacing-sm)}.odx-m-sm{margin:var(--odx-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-spacing-sm)}.odx-my-sm{margin-block:var(--odx-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-spacing-sm)}.odx-p-sm{padding:var(--odx-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-spacing-sm)}.odx-py-sm{padding-block:var(--odx-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-spacing-sm)}.odx-g-md{--gap: var(--odx-spacing-md);gap:var(--odx-spacing-md)}.odx-gx-md{column-gap:var(--odx-spacing-md)}.odx-gy-md{row-gap:var(--odx-spacing-md)}.odx-m-md{margin:var(--odx-spacing-md)}.odx-mx-md{margin-inline:var(--odx-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-spacing-md)}.odx-my-md{margin-block:var(--odx-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-spacing-md)}.odx-p-md{padding:var(--odx-spacing-md)}.odx-px-md{padding-inline:var(--odx-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-spacing-md)}.odx-py-md{padding-block:var(--odx-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-spacing-md)}.odx-g-lg{--gap: var(--odx-spacing-lg);gap:var(--odx-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-spacing-lg)}.odx-m-lg{margin:var(--odx-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-spacing-lg)}.odx-my-lg{margin-block:var(--odx-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-spacing-lg)}.odx-p-lg{padding:var(--odx-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-spacing-lg)}.odx-py-lg{padding-block:var(--odx-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-spacing-lg)}.odx-no-interaction{user-select:none;pointer-events:none}.odx-no-overflow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{position:absolute!important;border:none!important;padding:0!important;width:1px!important;height:1px!important;overflow:hidden!important;white-space:nowrap!important;clip-path:rect(0 0 0 0)!important}}@layer base{:root{scrollbar-color:var(--odx-color-background-brand) transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}}@layer reset{:where(*):not(:defined){display:none}}@layer base{:where(.odx-content),.odx-content-box{>odx-area-header{margin-block-start:calc(-1 * var(--odx-spacing-lg))}>odx-title{margin-block:0 var(--odx-spacing-sm)}>odx-text{margin-block:0 var(--odx-spacing-md)}>odx-key-value-list,>odx-list{margin-block:var(--odx-spacing-md)}}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}odx-list-item:has(:is([odx-button],odx-list-item::part(control)):not([disabled]):active){--_color-background-pressed: var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-inline-size: 0}odx-input{&:has([slot=prefix])::part(input){padding-inline-start:0}&:has([slot=suffix])::part(input){padding-inline-end:0}}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}
|
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.187",
|
|
6
6
|
"author": "Drägerwerk AG & Co.KGaA",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE",
|
|
8
8
|
"homepage": "https://odx.draeger.com",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"stylelint-config-concentric-order": "5.2.1",
|
|
36
36
|
"stylelint-config-standard": "39.0.0",
|
|
37
37
|
"@odx/design-tokens": "1.1.0-rc.6",
|
|
38
|
-
"@odx/typescript-config": "0.0.0",
|
|
39
38
|
"@odx/storybook-utils": "0.0.0",
|
|
39
|
+
"@odx/typescript-config": "0.0.0",
|
|
40
40
|
"@odx/vite-config": "0.0.0"
|
|
41
41
|
},
|
|
42
42
|
"sideEffects": [
|