@riverty/web-components 5.3.0 → 5.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +47 -1
- package/custom-elements.json +40 -4
- package/dist/cjs/{index-BnETQtSf.js → index-DJ4H_bFj.js} +382 -5
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/r-accordion-item.cjs.entry.js +1 -1
- package/dist/cjs/r-accordion-panel.cjs.entry.js +1 -1
- package/dist/cjs/r-accordion-section.cjs.entry.js +1 -1
- package/dist/cjs/r-accordion-trigger.cjs.entry.js +1 -1
- package/dist/cjs/r-accordion.cjs.entry.js +1 -1
- package/dist/cjs/r-alert.cjs.entry.js +1 -1
- package/dist/cjs/r-badge.cjs.entry.js +2 -2
- package/dist/cjs/r-button.cjs.entry.js +1 -1
- package/dist/cjs/r-checkbox-group.cjs.entry.js +1 -1
- package/dist/cjs/r-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/r-design-system-devtools.cjs.entry.js +1 -1
- package/dist/cjs/r-dialog.cjs.entry.js +12 -15
- package/dist/cjs/r-hint_3.cjs.entry.js +5 -5
- package/dist/cjs/r-icon-button.cjs.entry.js +4 -4
- package/dist/cjs/r-icon.cjs.entry.js +1 -1
- package/dist/cjs/r-input-code.cjs.entry.js +24 -8
- package/dist/cjs/r-input-date.cjs.entry.js +29 -8
- package/dist/cjs/r-input-password.cjs.entry.js +16 -5
- package/dist/cjs/r-input-phone-number.cjs.entry.js +58 -20
- package/dist/cjs/r-input.cjs.entry.js +31 -8
- package/dist/cjs/r-list-item.cjs.entry.js +17 -14
- package/dist/cjs/r-pagination.cjs.entry.js +1 -1
- package/dist/cjs/r-panel.cjs.entry.js +3 -3
- package/dist/cjs/r-popover-action.cjs.entry.js +2 -2
- package/dist/cjs/r-popover-content.cjs.entry.js +2 -2
- package/dist/cjs/r-popover-headline.cjs.entry.js +2 -2
- package/dist/cjs/r-popover-trigger.cjs.entry.js +2 -2
- package/dist/cjs/r-popover.cjs.entry.js +3 -3
- package/dist/cjs/r-progress-bar.cjs.entry.js +2 -2
- package/dist/cjs/r-radio-button-description.cjs.entry.js +2 -2
- package/dist/cjs/r-radio-button-leading.cjs.entry.js +2 -2
- package/dist/cjs/r-radio-button-title.cjs.entry.js +2 -2
- package/dist/cjs/r-radio-button-trailing.cjs.entry.js +2 -2
- package/dist/cjs/r-radio-button.cjs.entry.js +6 -6
- package/dist/cjs/r-radio-group.cjs.entry.js +7 -7
- package/dist/cjs/r-select-option.cjs.entry.js +2 -2
- package/dist/cjs/r-select.cjs.entry.js +6 -5
- package/dist/cjs/r-skip-link.cjs.entry.js +2 -2
- package/dist/cjs/r-stepper-item.cjs.entry.js +3 -3
- package/dist/cjs/r-stepper.cjs.entry.js +2 -2
- package/dist/cjs/r-tab-panel.cjs.entry.js +2 -2
- package/dist/cjs/r-tab.cjs.entry.js +2 -2
- package/dist/cjs/r-tabs-list.cjs.entry.js +2 -2
- package/dist/cjs/r-tabs.cjs.entry.js +4 -4
- package/dist/cjs/r-textarea.cjs.entry.js +18 -4
- package/dist/cjs/r-toast-group.cjs.entry.js +15 -5
- package/dist/cjs/r-toast.cjs.entry.js +16 -10
- package/dist/cjs/web-components.cjs.js +2 -2
- package/dist/collection/components/badge/badge.css +7 -7
- package/dist/collection/components/dialog/dialog.css +14 -14
- package/dist/collection/components/dialog/dialog.js +27 -13
- package/dist/collection/components/icon-button/icon-button.js +3 -3
- package/dist/collection/components/input/input.css +17 -2
- package/dist/collection/components/input/input.js +48 -6
- package/dist/collection/components/input-code/input-code.css +17 -2
- package/dist/collection/components/input-code/input-code.js +41 -6
- package/dist/collection/components/input-date/input-date.css +13 -2
- package/dist/collection/components/input-date/input-date.js +46 -6
- package/dist/collection/components/input-password/input-password.js +34 -4
- package/dist/collection/components/input-phone-number/input-phone-number.js +79 -18
- package/dist/collection/components/label/label.js +3 -3
- package/dist/collection/components/list-item/list-item/list-item.css +39 -32
- package/dist/collection/components/list-item/list-item/list-item.js +77 -14
- package/dist/collection/components/panel/panel.js +2 -2
- package/dist/collection/components/popover/popover.js +2 -2
- package/dist/collection/components/popover-action/popover-action.js +1 -1
- package/dist/collection/components/popover-content/popover-content.js +1 -1
- package/dist/collection/components/popover-headline/popover-headline.js +1 -1
- package/dist/collection/components/popover-trigger/popover-trigger.js +1 -1
- package/dist/collection/components/progress-bar/progress-bar.js +1 -1
- package/dist/collection/components/radio-button/radio-button.js +5 -5
- package/dist/collection/components/radio-button-description/radio-button-description.js +1 -1
- package/dist/collection/components/radio-button-leading/radio-button-leading.js +1 -1
- package/dist/collection/components/radio-button-title/radio-button-title.js +1 -1
- package/dist/collection/components/radio-button-trailing/radio-button-trailing.js +1 -1
- package/dist/collection/components/radio-group/radio-group.js +6 -6
- package/dist/collection/components/select/select.js +5 -4
- package/dist/collection/components/select-option/select-option.js +1 -1
- package/dist/collection/components/skip-link/skip-link.js +1 -1
- package/dist/collection/components/stepper/stepper.js +1 -1
- package/dist/collection/components/stepper-item/stepper-item.js +2 -2
- package/dist/collection/components/tab/tab.js +1 -1
- package/dist/collection/components/tab-panel/tab-panel.js +1 -1
- package/dist/collection/components/tabs/tabs.js +3 -3
- package/dist/collection/components/tabs-list/tabs-list.js +1 -1
- package/dist/collection/components/textarea/textarea.css +52 -21
- package/dist/collection/components/textarea/textarea.js +36 -3
- package/dist/collection/components/toast/toast.css +10 -3
- package/dist/collection/components/toast/toast.js +19 -10
- package/dist/collection/components/toast-group/toast-group.css +14 -13
- package/dist/collection/components/toast-group/toast-group.js +14 -4
- package/dist/collection/components/tooltip/tooltip.js +1 -1
- package/dist/esm/{index-CTxpqopm.js → index-Da7qOBFr.js} +382 -5
- package/dist/esm/loader.js +3 -3
- package/dist/esm/r-accordion-item.entry.js +1 -1
- package/dist/esm/r-accordion-panel.entry.js +1 -1
- package/dist/esm/r-accordion-section.entry.js +1 -1
- package/dist/esm/r-accordion-trigger.entry.js +1 -1
- package/dist/esm/r-accordion.entry.js +1 -1
- package/dist/esm/r-alert.entry.js +1 -1
- package/dist/esm/r-badge.entry.js +2 -2
- package/dist/esm/r-button.entry.js +1 -1
- package/dist/esm/r-checkbox-group.entry.js +1 -1
- package/dist/esm/r-checkbox.entry.js +1 -1
- package/dist/esm/r-design-system-devtools.entry.js +1 -1
- package/dist/esm/r-dialog.entry.js +12 -15
- package/dist/esm/r-hint_3.entry.js +5 -5
- package/dist/esm/r-icon-button.entry.js +4 -4
- package/dist/esm/r-icon.entry.js +1 -1
- package/dist/esm/r-input-code.entry.js +24 -8
- package/dist/esm/r-input-date.entry.js +29 -8
- package/dist/esm/r-input-password.entry.js +16 -5
- package/dist/esm/r-input-phone-number.entry.js +58 -20
- package/dist/esm/r-input.entry.js +31 -8
- package/dist/esm/r-list-item.entry.js +17 -14
- package/dist/esm/r-pagination.entry.js +1 -1
- package/dist/esm/r-panel.entry.js +3 -3
- package/dist/esm/r-popover-action.entry.js +2 -2
- package/dist/esm/r-popover-content.entry.js +2 -2
- package/dist/esm/r-popover-headline.entry.js +2 -2
- package/dist/esm/r-popover-trigger.entry.js +2 -2
- package/dist/esm/r-popover.entry.js +3 -3
- package/dist/esm/r-progress-bar.entry.js +2 -2
- package/dist/esm/r-radio-button-description.entry.js +2 -2
- package/dist/esm/r-radio-button-leading.entry.js +2 -2
- package/dist/esm/r-radio-button-title.entry.js +2 -2
- package/dist/esm/r-radio-button-trailing.entry.js +2 -2
- package/dist/esm/r-radio-button.entry.js +6 -6
- package/dist/esm/r-radio-group.entry.js +7 -7
- package/dist/esm/r-select-option.entry.js +2 -2
- package/dist/esm/r-select.entry.js +6 -5
- package/dist/esm/r-skip-link.entry.js +2 -2
- package/dist/esm/r-stepper-item.entry.js +3 -3
- package/dist/esm/r-stepper.entry.js +2 -2
- package/dist/esm/r-tab-panel.entry.js +2 -2
- package/dist/esm/r-tab.entry.js +2 -2
- package/dist/esm/r-tabs-list.entry.js +2 -2
- package/dist/esm/r-tabs.entry.js +4 -4
- package/dist/esm/r-textarea.entry.js +18 -4
- package/dist/esm/r-toast-group.entry.js +15 -5
- package/dist/esm/r-toast.entry.js +16 -10
- package/dist/esm/web-components.js +3 -3
- package/dist/types/components/dialog/dialog.d.ts +7 -1
- package/dist/types/components/input/input.d.ts +7 -0
- package/dist/types/components/input-code/input-code.d.ts +6 -0
- package/dist/types/components/input-date/input-date.d.ts +6 -0
- package/dist/types/components/input-password/input-password.d.ts +5 -0
- package/dist/types/components/input-phone-number/input-phone-number.d.ts +7 -0
- package/dist/types/components/list-item/list-item/list-item.d.ts +16 -3
- package/dist/types/components/textarea/textarea.d.ts +8 -1
- package/dist/types/components/toast/toast.d.ts +6 -0
- package/dist/types/components/toast-group/toast-group.d.ts +2 -0
- package/dist/types/components.d.ts +101 -8
- package/dist/web-components/p-00ca474f.entry.js +1 -0
- package/dist/web-components/p-00eb6986.entry.js +1 -0
- package/dist/web-components/{p-a45fd808.entry.js → p-0735fd75.entry.js} +1 -1
- package/dist/web-components/{p-7545038f.entry.js → p-0bb04d79.entry.js} +1 -1
- package/dist/web-components/{p-ef0f43e0.entry.js → p-0f4eea22.entry.js} +1 -1
- package/dist/web-components/{p-4cf01f30.entry.js → p-1c2497de.entry.js} +1 -1
- package/dist/web-components/p-2265dae1.entry.js +1 -0
- package/dist/web-components/{p-03ff9abf.entry.js → p-230e44ae.entry.js} +1 -1
- package/dist/web-components/{p-4dae8c19.entry.js → p-24bbf3b6.entry.js} +1 -1
- package/dist/web-components/p-28718c50.entry.js +1 -0
- package/dist/web-components/{p-59aa588e.entry.js → p-2b2f581a.entry.js} +1 -1
- package/dist/web-components/p-3b4e3faf.entry.js +1 -0
- package/dist/web-components/p-3bc93d65.entry.js +1 -0
- package/dist/web-components/{p-8968ddf6.entry.js → p-429213ea.entry.js} +1 -1
- package/dist/web-components/{p-c60294d4.entry.js → p-43eff76a.entry.js} +1 -1
- package/dist/web-components/{p-87bb4b91.entry.js → p-44ae9f33.entry.js} +1 -1
- package/dist/web-components/{p-806b173d.entry.js → p-4652635a.entry.js} +1 -1
- package/dist/web-components/{p-832dca22.entry.js → p-4bd3e077.entry.js} +1 -1
- package/dist/web-components/{p-512d3a60.entry.js → p-4e3df002.entry.js} +1 -1
- package/dist/web-components/p-51a5804b.entry.js +1 -0
- package/dist/web-components/{p-a81a67da.entry.js → p-72fa1fd1.entry.js} +1 -1
- package/dist/web-components/{p-5bc9fe5e.entry.js → p-755cc697.entry.js} +1 -1
- package/dist/web-components/{p-e74c363a.entry.js → p-77155630.entry.js} +1 -1
- package/dist/web-components/{p-77335ae7.entry.js → p-7fccc301.entry.js} +1 -1
- package/dist/web-components/{p-651522b6.entry.js → p-85a9af42.entry.js} +1 -1
- package/dist/web-components/{p-24130cdb.entry.js → p-87f39749.entry.js} +1 -1
- package/dist/web-components/{p-c9b2389b.entry.js → p-89136369.entry.js} +1 -1
- package/dist/web-components/p-8c577cda.entry.js +1 -0
- package/dist/web-components/{p-6b7d5236.entry.js → p-99ba15d9.entry.js} +1 -1
- package/dist/web-components/{p-d35303a6.entry.js → p-9eb1f262.entry.js} +1 -1
- package/dist/web-components/p-Da7qOBFr.js +2 -0
- package/dist/web-components/p-a022f356.entry.js +1 -0
- package/dist/web-components/p-a58124c4.entry.js +1 -0
- package/dist/web-components/{p-8d2f4097.entry.js → p-a683612d.entry.js} +1 -1
- package/dist/web-components/{p-9891afb8.entry.js → p-a7e7f8fa.entry.js} +1 -1
- package/dist/web-components/p-ad4292d8.entry.js +1 -0
- package/dist/web-components/p-c09a863b.entry.js +1 -0
- package/dist/web-components/{p-26e4816a.entry.js → p-c7f8e59b.entry.js} +1 -1
- package/dist/web-components/{p-f625b739.entry.js → p-c937bd92.entry.js} +1 -1
- package/dist/web-components/p-cbcd7699.entry.js +1 -0
- package/dist/web-components/p-e0e2f2b2.entry.js +1 -0
- package/dist/web-components/{p-0930ee1d.entry.js → p-e49b1ec3.entry.js} +1 -1
- package/dist/web-components/p-e4b66277.entry.js +1 -0
- package/dist/web-components/p-e6a31881.entry.js +1 -0
- package/dist/web-components/p-f1e22caa.entry.js +1 -0
- package/dist/web-components/{p-5dd43433.entry.js → p-f22696e0.entry.js} +1 -1
- package/dist/web-components/p-f6a92287.entry.js +1 -0
- package/dist/web-components/p-f7adb875.entry.js +1 -0
- package/dist/web-components/web-components.esm.js +1 -1
- package/package.json +1 -1
- package/dist/web-components/p-0bd10e93.entry.js +0 -1
- package/dist/web-components/p-15d10c68.entry.js +0 -1
- package/dist/web-components/p-1cfa9a0e.entry.js +0 -1
- package/dist/web-components/p-23ff25a1.entry.js +0 -1
- package/dist/web-components/p-50f01d6b.entry.js +0 -1
- package/dist/web-components/p-547fc56c.entry.js +0 -1
- package/dist/web-components/p-5cd1ad6a.entry.js +0 -1
- package/dist/web-components/p-73adec9b.entry.js +0 -1
- package/dist/web-components/p-8388221b.entry.js +0 -1
- package/dist/web-components/p-8cc4be0c.entry.js +0 -1
- package/dist/web-components/p-90d390f4.entry.js +0 -1
- package/dist/web-components/p-98628a15.entry.js +0 -1
- package/dist/web-components/p-9f583ed1.entry.js +0 -1
- package/dist/web-components/p-CTxpqopm.js +0 -2
- package/dist/web-components/p-aff51d37.entry.js +0 -1
- package/dist/web-components/p-b07be088.entry.js +0 -1
- package/dist/web-components/p-b5c8e978.entry.js +0 -1
- package/dist/web-components/p-d6ef5fff.entry.js +0 -1
- package/dist/web-components/p-dfd8bed6.entry.js +0 -1
- package/dist/web-components/p-e138c70a.entry.js +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const radioButtonTitleCss = ":host{font-weight:var(--r-font-weight-semibold, 600);font-size:var(--r-font-size-400, 1rem);line-height:var(--r-line-height-m, 1.5);color:var(--r-text-regular, #282828);text-align:left;cursor:inherit}";
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ const RadioButtonTitle = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '623feed7834a4702b83257202de4505b6c08145d', slot: "title" }, h("div", { key: 'ca7b90c670583ba4a874df1da73dad9db67d0bf7', class: "r-radio-button-title", style: { display: 'contents' } }, h("slot", { key: 'fd7ac8a7ee5e2cd05dab3d061328eecb5ee14800' }))));
|
|
11
11
|
}
|
|
12
12
|
get host() { return getElement(this); }
|
|
13
13
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const radioButtonTrailingCss = ":host{font-weight:var(--r-font-weight-regular, 400);font-size:var(--r-font-size-400, 1rem);text-align:right;color:var(--r-text-regular, #282828)}";
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ const RadioButtonTrailing = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: 'a1c1c9d525cd2fb7b6223677f216b8398c3dac9f', slot: "trailing" }, h("div", { key: '554e798bcd117d7a56024097041609dc532ad2c1', class: "r-radio-button-trailing", style: { display: 'contents' } }, h("slot", { key: 'f48cef26f06bedf6e37439dd1f406d5c789b06a0' }))));
|
|
11
11
|
}
|
|
12
12
|
get host() { return getElement(this); }
|
|
13
13
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const radioButtonCss = ":host{display:inline-flex;outline:none;position:relative;pointer-events:auto;border:0.0625rem solid transparent;cursor:pointer;min-width:17.5rem}:host slot{display:contents}:host(:hover:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--cursor:pointer;--r-radio-button--box--background-color:var(--r-background-interactive-hovered, rgba(40, 40, 40, 0.04))}:host(:active:not([disabled]:not([disabled=false])):not([checked]:not([checked=false]))){--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-pressed, rgba(40, 40, 40, 0.12))}:host(:focus-within),:host(.focused){--r-radio-button--box--box-shadow:0 0 0 4px var(--r-border-focused-outlined, #fff);--r-radio-button--box--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--box--outline-offset:1px}:host([checked]:not([checked=false])),:host([checked]:not([checked=false]):hover){cursor:default;--r-radio-button--box--border-color:var(--r-border-regular, #282828);--r-radio-button--box--background-color:var(--r-background-interactive-softest, #fff);--r-radio-button--marker--transform:scale(1)}:host([invalid]:not([invalid=false])),:host([invalid]:not([invalid=false])[checked]:not([checked=false])){--r-radio-button--box--border-color:var(--r-status-error-regular, #da1e28);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6)}:host([disabled]:not([disabled=false])){--r-radio-button--box--opacity:0.4;cursor:not-allowed}.r-radio-button{display:var(--r-radio-button--display, flex);flex:var(--r-radio-button--flex, 1);gap:var(--r-radio-button--gap, var(--r-spacing-075, 0.75rem));position:var(--r-radio-button--position, relative);min-height:var(--r-radio-button--min-height, 24px);user-select:var(--r-radio-button--user-select, none);box-sizing:var(--r-radio-button--box-sizing, border-box);font-family:var(--r-radio-button--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-radio-button--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-radio-button--line-height, var(--r-line-height-m, 1.5rem));text-align:var(--r-radio-button--text-align, left);color:var(--r-radio-button--color, var(--r-text-regular, #282828));opacity:var(--r-radio-button--opacity, 1);box-shadow:var(--r-radio-button--box-shadow, none);outline:var(--r-radio-button--outline, none);cursor:var(--r-radio-button--cursor, inherit);padding:var(--r-radio-button--padding, var(--r-spacing-100, 1rem));margin:var(--r-radio-button--margin, 0);background-color:var(--r-radio-button--background-color, transparent);border-color:var(--r-radio-button--border-color, transparent);border-width:var(--r-radio-button--border-width, 0);border-style:var(--r-radio-button--border-style, solid)}.r-radio-button--input{position:var(--r-radio-button--input--position, absolute);z-index:var(--r-radio-button--input--z-index, -1);opacity:var(--r-radio-button--input--opacity, 0)}.r-radio-button--box{position:var(--r-radio-button--box--position, relative);display:var(--r-radio-button--box--display, block);top:var(--r-radio-button--box--top, 0);left:var(--r-radio-button--box--left, 0);width:var(--r-radio-button--box--width, 1.5rem);height:var(--r-radio-button--box--height, 1.5rem);background-color:var(--r-radio-button--box--background-color, var(--r-background-interactive-softest, #fff));border-width:var(--r-radio-button--box--border-width, 0.0625rem);border-style:var(--r-radio-button--box--border-style, solid);border-color:var(--r-radio-button--box--border-color, var(--r-border-soft, #686868));border-radius:var(--r-radio-button--box--border-radius, 50%);box-sizing:var(--r-radio-button--box--box-sizing, border-box);box-shadow:var(--r-radio-button--box--box-shadow, none);outline:var(--r-radio-button--box--outline, none);outline-offset:var(--r-radio-button--box--outline-offset, 0);cursor:var(--r-radio-button--box--cursor, inherit);opacity:var(--r-radio-button--box--opacity, 1)}.r-radio-button--box::before{content:var(--r-radio-button--marker--content, \"\");display:var(--r-radio-button--marker--display, block);width:var(--r-radio-button--marker--width, 0.75rem);height:var(--r-radio-button--marker--height, 0.75rem);position:var(--r-radio-button--marker--position, absolute);top:var(--r-radio-button--marker--top, calc(50% - 0.375rem));left:var(--r-radio-button--marker--left, calc(50% - 0.375rem));border-radius:var(--r-radio-button--marker--border-radius, 50%);background-color:var(--r-radio-button--marker--background-color, var(--r-background-interactive-regular, #282828));transition:var(--r-radio-button--marker--transition, 0.1s all);transform:var(--r-radio-button--marker--transform, scale(0));transform-origin:var(--r-radio-button--marker--transform-origin, center)}.r-radio-button--text{flex:var(--r-radio-button--text--flex, 1);display:var(--r-radio-button--text--display, flex);flex-direction:var(--r-radio-button--text--flex-direction, column);gap:var(--r-radio-button--text--gap, var(--r-spacing-025, 0.25rem));font-weight:var(--r-radio-button--text--font-weight, var(--r-font-weight-semibold, 600))}.r-radio-button--leading{min-height:var(--r-radio-button--leading--min-height, var(--r-spacing-150, 1.5rem));min-width:var(--r-radio-button--leading--min-width, calc(var(--r-spacing-150, 1.5rem) + 2 * var(--r-spacing-075, 0.75rem)));color:var(--r-radio-button--leading--color, var(--r-icon-soft, #686868));display:var(--r-radio-button--leading--display, flex);justify-content:var(--r-radio-button--leading--justify-content, center);align-items:var(--r-radio-button--leading--align-items, start)}";
|
|
4
4
|
|
|
@@ -106,11 +106,11 @@ const RadioButton = class {
|
|
|
106
106
|
checked,
|
|
107
107
|
required
|
|
108
108
|
};
|
|
109
|
-
return (h(Host, { key: '
|
|
110
|
-
h("div", { key: '
|
|
111
|
-
h("div", { key: '
|
|
112
|
-
h("r-hint", { key: '
|
|
113
|
-
h("r-hint", { key: '
|
|
109
|
+
return (h(Host, { key: '862574a20e04e55e3e7e0b8cb48131652f029030' }, h("label", { key: 'b916e9d5740605bad9a1f88c6bb07d0564b63f16', class: "r-radio-button", onClick: this.onClick, onKeyDown: this.onKeydown }, h("input", Object.assign({ key: 'd0ca90e85e619d8c5b9a8c71ae1582db65562036' }, inputAttrs, { id: `${uniqueId}-input`, class: "r-radio-button--input", ref: el => this.nativeEl = el, onFocus: this.onFocus, onBlur: this.onBlur })), h("span", { key: 'f77f3e56e88c5e3ad1f3e36e5f96715edb7e91cc', class: "r-radio-button--box" }), this.isLeading &&
|
|
110
|
+
h("div", { key: '60d6a15880fafd8007d20a80137b30f19d4f641e', class: "r-radio-button--leading" }, h("slot", { key: '9329c56d97e5e357ea70d165ee11ac171c605519', name: "leading" }, this.icon && h("r-icon", { key: 'ace86d3b61cd39f05ca3146e54d3ae4820d7b66d', name: this.icon, size: "m" }))), h("div", { key: '7773e0c5b2348245e4b4dafc06a6b10a6dc245c3', class: "r-radio-button--text" }, h("slot", { key: 'f060b0853a7a6ed0108d0182669807fd0236da33', name: "title" }, h("div", { key: '1ca5059e718a0bda9a53e2e0f630a617d0252638', style: { display: 'contents' } }, h("slot", { key: 'cb9128b915d2a71cff7e8960d5bd86973c615232' }))), h("slot", { key: 'f07a62e2caa36ceb27bc547cf86c7dfcdce1c5b4', name: "description" }, this.description)), this.isTrailing &&
|
|
111
|
+
h("div", { key: 'cc5e6dff1c324fdce239f8d4e553e154bdb73eac', class: "r-radio-button--trailing" }, h("slot", { key: '3d5e862c5830adb7a480fbb71ff92fef054bf1f7', name: "trailing" }))), invalid && error &&
|
|
112
|
+
h("r-hint", { key: '997b440b69a23cb432b8376b0351a947ec3b162e', role: "alert", variant: "error", id: `${uniqueId}-hint` }, this.error), hint &&
|
|
113
|
+
h("r-hint", { key: 'd3c41065b4924f42a2971d1cb91154e8e3041238', role: "note", variant: "information", id: `${uniqueId}-hint` }, hint)));
|
|
114
114
|
}
|
|
115
115
|
get host() { return getElement(this); }
|
|
116
116
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
|
|
3
3
|
|
|
4
4
|
const radioGroupCss = ":host{display:flex;flex-direction:column;box-sizing:border-box;margin-bottom:var(--r-spacing-100)}:host ::slotted(r-radio-button){display:var(--r-radio-group--slotted-radio-button--display, flex)}:host ::slotted(.focused){--r-radio-button--box-shadow:0 0 0 3px var(--r-border-focused-outlined, #fff), inset 0 0 0 1px var(--r-border-focused-outlined, #fff);--r-radio-button--outline:2px solid var(--r-border-focused, #0071e3);--r-radio-button--outline-offset:2px}:host slot{display:contents}:host([variant=contained]) ::slotted(r-radio-button){padding:0;--r-radio-button--padding:var(--r-spacing-100, 1rem);--r-radio-button--border-color:var(--r-border-soft, #686868);--r-radio-button--border-width:1px}:host([invalid]:not([invalid=false])) ::slotted(r-radio-button){--r-radio-button--box--border-color:var(--r-status-error-regular, #da1e28);--r-radio-button--box--background-color:var(--r-status-error-soft, #fef6f6);--r-radio-button--marker--background-color:var(--r-status-error-regular, #da1e28)}:host .r-radio-group{display:var(--r-radio-group--display, flex);flex-direction:var(--r-radio-group--flex-direction, column)}:host .r-radio-group--label-container{display:var(--r-radio-group--label-container--display, flex);gap:var(--r-radio-group--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-radio-group--label-container--align-items, center);justify-content:var(--r-radio-group--label-container--justify-content, space-between)}:host .r-radio-group--label-container ::slotted([slot=popover]){display:var(--r-radio-group--popover--display, inline-flex);height:var(--r-radio-group--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-radio-group--popover--align-items, center);justify-content:var(--r-radio-group--popover--justify-content, center);margin-right:var(--r-radio-group--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-radio-group--popover-trigger--min-width, var(--r-spacing-150, 1.5));--r-popover--trigger--min-height:var(--r-radio-group--popover--trigger--min-height, var(--r-spacing-150, 1.5))}:host .r-radio-group--hint{margin-bottom:var(--r-radio-group--hint--margin-bottom, var(--r-spacing-100, 1rem))}:host .r-radio-group--content{display:var(--r-radio-group--content--display, flex);flex-direction:var(--r-radio-group--content--flex-direction, column);flex-wrap:var(--r-radio-group--content--flex-wrap, nowrap);gap:var(--r-radio-group--content--gap, var(--r-spacing-050, 0.5rem))}:host .r-radio-group+r-hint{margin-top:var(--r-radio-group--hint--margin-top, var(--r-spacing-050, 0.5rem))}";
|
|
@@ -336,12 +336,12 @@ const RadioGroup = class {
|
|
|
336
336
|
'tooltip-icon': tooltipIcon,
|
|
337
337
|
'tooltip-icon-color': tooltipIconColor
|
|
338
338
|
};
|
|
339
|
-
return (h(Host, { key: '
|
|
340
|
-
h("div", { key: '
|
|
341
|
-
h("r-hint", { key: '
|
|
342
|
-
h("r-hint", { key: '
|
|
343
|
-
h("r-hint", { key: '
|
|
344
|
-
h("r-hint", { key: '
|
|
339
|
+
return (h(Host, { key: '899b3d8d509fa3d6f37a81279e6fc58b98e1314c' }, h("div", { key: 'dc1c47c966aac6ebaab2b8ec9061342b6c1e81e3', class: "r-radio-group", onClick: this.onLabelClick }, label &&
|
|
340
|
+
h("div", { key: '5b39dcc6952d971f8c03e2dab554b25bb1be3ccf', class: "r-radio-group--label-container" }, h("r-label", Object.assign({ key: '7f13b1571bccb986a0e36903399c8f15536de539', id: `${uniqueId}-label`, class: "r-radio-group--label", "field-indicator": fieldIndicator }, labelAttr), label), h("slot", { key: 'bfd151ce64e670722a6a1f3254763b6f514c99ab', name: "popover" })), hint &&
|
|
341
|
+
h("r-hint", { key: 'edb8bbe44470579a5638e5dbee0b7b843cc998b4', id: `${uniqueId}-hint`, class: "r-radio-group--hint", role: "note" }, hint), h("div", { key: '1727429f1c36de0fd13567af448aed7c84f7c7b1', class: "r-radio-group--content" }, h("slot", { key: 'f7d712be6351c44e5f072f85a407b5e73837b48b' }))), invalid && error &&
|
|
342
|
+
h("r-hint", { key: '71feb492e87164e485bb10a0e856d86ef3c57a7d', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, error), this.validityState !== 'valid' && this.validityMessage &&
|
|
343
|
+
h("r-hint", { key: '0ddc4636948329a97e8140c9efc267a4a054ff3b', "aria-live": "polite", id: `${uniqueId}-message`, role: "alert", variant: "error" }, this.customErrorMessage || this.validityMessage), this.valid && this.validMessage && this.showValid &&
|
|
344
|
+
h("r-hint", { key: 'e7cfa4eccf754e90ad30b22b24dd9f2ce1fcadc8', role: "alert", variant: "success" }, this.validMessage)));
|
|
345
345
|
}
|
|
346
346
|
get host() { return getElement(this); }
|
|
347
347
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const selectOptionCss = ":host(:hover){--r-select-option--background-color:var(--r-background-interactive-hovered)}:host(:not([aria-disabled=true]):focus){outline:var(--outline, none);--r-select-option--background-color:var(--r-background-interactive-hovered);--r-select-option--border-color:var(--r-background-interactive-softest);--r-select-option--box-shadow:inset 0px 0px 0px 1px var(--r-border-focused-outlined, #fff), inset 0 0 0 3px var(--r-border-focused, #0071e3), inset 0 0 0 4px var(--r-border-focused-outlined, #fff);--r-select-option--outline:2px solid var(--r-border-focused, #0071e3);--r-select-option--outline-offset:-4px;--r-select-option--z-index:1}:host([data-focused=true]){outline:var(--outline, none);--r-select-option--background-color:var(--r-background-interactive-hovered);--r-select-option--border-color:var(--r-background-interactive-softest);--r-select-option--box-shadow:inset 0px 0px 0px 1px var(--r-border-focused-outlined, #fff), inset 0 0 0 3px var(--r-border-focused, #0071e3), inset 0 0 0 4px var(--r-border-focused-outlined, #fff);--r-select-option--outline:2px solid var(--r-border-focused, #0071e3);--r-select-option--outline-offset:-4px}:host(:not([aria-disabled=true]):active){--r-select-option--background-color:var(--r-background-interactive-pressed)}:host([aria-disabled=true]),:host([aria-disabled=true]:hover),:host([aria-disabled=true]:focus){--r-select-option--opacity:0.4;--r-select-option--background-color:transparent}:host([aria-selected=true]){--r-select-option--font-weight:600;--r-select-option--background-color:var(--r-background-interactive-hovered)}:host([aria-hidden=true]){--r-select-option--display:none}:host([icon-position=end]){--r-select-option--flex-direction:row-reverse;--r-select-option--icon--margin-left:0.75em;--r-select-option--icon--margin-right:0}.r-select-option{box-sizing:var(--r-select-option--box-sizing);position:var(--r-select-option--position);display:var(--r-select-option--display, flex);flex-direction:var(--r-select-option--flex-direction, row);min-height:var(--r-select-option--min-height, 1.125em);width:var(--r-select-option--width, auto);font-size:var(--r-select-option--font-size, 1rem);line-height:var(--r-select-option--line-height, 1.2);font-weight:var(--r-select-option--font-weight, normal);padding-top:var(--r-select-option--padding-top, 0.75em);padding-right:var(--r-select-option--padding-right, 0.75em);padding-bottom:var(--r-select-option--padding-bottom, 0.75em);padding-left:var(--r-select-option--padding-left, 0.75em);align-items:var(--r-select-option--align-items, center);color:var(--r-select-option--color, inherit);background-color:var(--r-select-option--background-color, rgba(0, 0, 0, 0));border-color:var(--r-select-option--border-color, rgba(0, 0, 0, 0));border-radius:var(--r-select-option--border-radius, 0);border-width:var(--r-select-option--border-width, 1px);border-style:var(--r-select-option--border-style, solid);box-shadow:var(--r-select-option--box-shadow, none);outline:var(--r-select-option--outline, none);outline-offset:var(--r-select-option--outline-offset, 0);transform:var(--r-select-option--transform, none);z-index:var(--r-select-option--z-index, 0);opacity:var(--r-select-option--opacity, 1)}.r-select-option--icon{display:var(--r-select-option--icon--display, inline-flex);align-items:var(--r-select-option--icon--align-items, center);justify-content:var(--r-select-option--icon--justify-content, center);margin-top:var(--r-select-option--icon--margin-top, 0.05em);margin-left:var(--r-select-option--icon--margin-left, 0);margin-right:var(--r-select-option--icon--margin-right, 0.75em)}.r-select-option--icon svg{display:var(--r-select-option--icon--svg--display, inline-flex)}.r-select-option--label{max-width:var(--r-select-option--label--max-width, 100%);text-overflow:var(--r-select-option--label--text-overflow, ellipsis);white-space:var(--r-select-option--label--white-space, normal)}";
|
|
4
4
|
|
|
@@ -119,7 +119,7 @@ const SelectOption = class {
|
|
|
119
119
|
size: iconSize,
|
|
120
120
|
color: iconColor
|
|
121
121
|
};
|
|
122
|
-
return (h(Host, { key: '
|
|
122
|
+
return (h(Host, { key: '1f3440961f3c606f5b2b1eef77ae3c53fc1ea4a0', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, h("div", { key: '9a29dd16478d39c905f8cb54ca603e6982c3a24e', class: "r-select-option" }, icon && h("span", { key: 'fdcecb70781424749e0527f06eff5140a8a79ccc', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '5a1906d39a27bc70729d26e93fd8f0d77e80e972' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '572b0e90b5695e0233505f28fb7c9b3dbc90a73f', class: "r-select-option--icon" }, h("slot", { key: 'bc04c317491e690281b0f4442aaff3f86a5ddb12', name: "icon" })), h("span", { key: '77bf634b415a36d8463212918cf200fda8647f85', class: "r-select-option--label" }, h("slot", { key: '83dd97fa580d18f4a9e27beca4835adf6c746240' })))));
|
|
123
123
|
}
|
|
124
124
|
get host() { return getElement(this); }
|
|
125
125
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
|
|
3
3
|
import { S as StyleObserver } from './style-observer-4Uv3PpKT.js';
|
|
4
4
|
|
|
@@ -865,8 +865,9 @@ const Select = class {
|
|
|
865
865
|
const isTopSpace = ((_b = this.listboxElement) === null || _b === void 0 ? void 0 : _b.offsetHeight) < this.top;
|
|
866
866
|
const isTop = this.listboxPosition === 'top';
|
|
867
867
|
const isBottom = this.listboxPosition === 'bottom';
|
|
868
|
-
|
|
869
|
-
|
|
868
|
+
/** Don't change the position if there is sufficient space for the listbox
|
|
869
|
+
* or insufficient space for another position.
|
|
870
|
+
* */
|
|
870
871
|
if ((isTop && (isTopSpace || !isBottomSpace)) || (isBottom && (isBottomSpace || !isTopSpace))) {
|
|
871
872
|
this.listboxPositionState = this.listboxPosition;
|
|
872
873
|
return;
|
|
@@ -1004,8 +1005,8 @@ const Select = class {
|
|
|
1004
1005
|
disabled,
|
|
1005
1006
|
required: isRequired
|
|
1006
1007
|
};
|
|
1007
|
-
return (h(Host, { key: '
|
|
1008
|
-
h("r-hint", { key: '
|
|
1008
|
+
return (h(Host, { key: 'aca9ddac308a41221f08de7fde92f45fcd89162f', "data-value": this.currentValue, expanded: !this.disabled && this.isExpanded, "data-listbox-position": this.listboxPositionState, "data-initial-value": this.initial['value'], "data-is-placeholder": `${!!this.isPlaceholder}`, "data-value-focused": `${!!this.isValueFocused}`, "data-option-focused": `${!!this.focusedOption}`, "data-validity-state": `${this.validityState || ''}`, "data-validity-message": `${this.validityMessage || ''}`, "data-readonly": `${!!this.isReadonly}` }, h("div", { key: '34c00c70c0b73cdd7afdcd65f175a94e82c900d2', class: `r-select--label ${!internal ? 'r-select--label__margin-bottom' : ''}` }, h("div", { key: '5a2b30341687b152eb17c2fc5ca2f65b1fda886f', class: internal ? 'visually-hidden' : 'r-select--label-container' }, h("label", { key: '10021c02cfe8a697ee3a0e452e0052044f2b80a7', id: `${uniqueId}-label`, onClick: this.isInteractive ? this.onValueClick : null }, h("r-label", Object.assign({ key: 'cc7173f5b427c9fca7e08a12552227d3f20ad64c' }, labelAttr), label)), h("slot", { key: '625e1bd9f1fa11950ff75e1875e03510f55022c0', name: "popover" })), hint &&
|
|
1009
|
+
h("r-hint", { key: '6d22db79a4375ddd901f5ea6b25d9c456e8f1ab2', id: `${uniqueId}-hint`, class: "r-select--hint" }, hint)), h("div", { key: 'a243a731bdd150386ea47ad0897831b37eed6621', class: "r-select" }, h("select", Object.assign({ key: 'e1878ed06636fad3768d8b4b1f4a944d30730346', class: "r-select--native", ref: el => this.nativeElement = el }, nativeAttrs)), h("div", { key: 'b47cd423033129e827a99f8fcff39173f4c74ed9', class: "r-select--container" }, this.combobox ? this.renderCombobox(comboboxAttrs) : this.renderSelect(comboboxAttrs), h("div", Object.assign({ key: '04db58929d97226614d344f7f419c3e8aa7e250d', role: "listbox", tabindex: "-1", id: `${uniqueId}-list`, class: "r-select--options", ref: el => this.listboxElement = el }, listboxAttrs), (this.isNoResultsFound || !((_a = this.optionElements) === null || _a === void 0 ? void 0 : _a.length)) && h("r-select-option", { key: 'b23380c2c75c33e6a8a99737189c43400e29940b', "data-no-results": "true", value: "no_results" }, this.noResultsFound), h("slot", { key: '83e215daafbd8909f9788e8918691b08417a5f2d', onSlotchange: this.handleSlotChange })))), h("div", { key: '57acdd7994fa67813e60641493e99f29afafcaf4', id: `${uniqueId}-message`, "aria-live": "polite", "aria-atomic": "true", ref: (el) => this.messageContainer = el, class: this.hasMessage && !internal ? 'r-select--message' : 'visually-hidden' }, this.hasMessage && h("r-hint", { key: 'f14bc3026b6bee74b1192f37af64381958c0c87b', variant: this.invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && this.validityMessage, this.hasValidationSuccess && this.validMessage))));
|
|
1009
1010
|
}
|
|
1010
1011
|
get host() { return getElement(this); }
|
|
1011
1012
|
static get watchers() { return {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const skipLinkCss = ":host{display:inline-block;position:absolute;z-index:99999}:host:has(:not(:focus-within)){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host:has(:focus-within){top:var(--r-spacing-100);padding:var(--r-spacing-100);border:1px solid var(--r-border-regular);background:var(--r-background-softest);left:var(--r-skip-link--left, 50%);transform:var(--r-skip-link--transform, translateX(-50%))}:host([position=left]){--r-skip-link--left:var(--r-spacing-100);--r-skip-link--transform:none}::slotted(*:not(:focus-within)){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";
|
|
4
4
|
|
|
@@ -9,7 +9,7 @@ const SkipLink = class {
|
|
|
9
9
|
this.position = 'center';
|
|
10
10
|
}
|
|
11
11
|
render() {
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '7ca2f29a347197be2951841e6b59807360e76f9d' }, h("slot", { key: '6d26f29f7dbec9d60e302de3cbbf0d8d2afd3009' })));
|
|
13
13
|
}
|
|
14
14
|
};
|
|
15
15
|
SkipLink.style = skipLinkCss;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const stepperItemCss = ":host([active]){--r-stepper-item--indicator--background-color:var(--r-background-inverse, #282828);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}:host([complete]){--r-stepper-item--indicator--background-color:var(--r-status-success-regular, #298535);--r-stepper-item--color:var(--r-text-inverse, #FFF);--r-stepper-item--text--color:var(--r-text-regular, #282828);--r-stepper-item--indicator--border-color:transparent}.r-stepper-item{display:var(--r-stepper-item--display, flex);flex-direction:var(--r-stepper-item--flex-direction, column);align-items:var(--r-stepper-item--align-items, center);justify-content:var(--r-stepper-item--justify-content, center);font-size:var(--r-stepper-item--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--color, var(--r-text-soft, #686868));font-family:var(--r-stepper-item--font-family, var(--r-font-family-text, system-ui));width:var(--r-stepper-item--width, 36px);white-space:var(--r-stepper-item--white-space, nowrap);gap:var(--r-stepper-item--gap, 8px)}.r-stepper-item--indicator{width:var(--r-stepper-item--indicator--width, 20px);height:var(--r-stepper-item--indicator--height, 20px);line-height:var(--r-stepper-item--indicator--line-height, 20px);border-radius:var(--r-stepper-item--indicator--border-radius, 50%);background-color:var(--r-stepper-item--indicator--background-color, transparent);display:var(--r-stepper-item--indicator--display, flex);justify-content:var(--r-stepper-item--indicator--justify-content, center);align-items:var(--r-stepper-item--indicator--align-items, center);border-width:var(--r-stepper-item--indicator--border-width, 1px);border-style:var(--r-stepper-item--indicator--border-style, solid);border-color:var(--r-stepper-item--indicator--border-color, var(--r-border-soft, #686868));margin-left:var(--r-stepper-item--indicator--margin-left, 8px);margin-right:var(--r-stepper-item--indicator--margin-right, 8px)}.r-stepper-item--indicator--step-number{vertical-align:var(--r-stepper-item--step-number--vertical-align, middle)}.r-stepper-item--text{font-size:var(--r-stepper-item--text--font-size, var(--r-font-size-200, 13px));color:var(--r-stepper-item--text--color, var(--r-text-soft, #686868));text-align:var(--r-stepper-item--text--text-align, center)}";
|
|
4
4
|
|
|
@@ -15,8 +15,8 @@ const StepperItem = class {
|
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
17
|
const number = this.number || this.stepNumber;
|
|
18
|
-
return (h(Host, { key: '
|
|
19
|
-
h("div", { key: '
|
|
18
|
+
return (h(Host, { key: 'a5004ade661b4abfacb920a256f6a12bbd32a6ea' }, h("div", { key: '1358044cc918c2988a2f32198b0a8260cf439ec0', class: "r-stepper-item" }, h("div", { key: 'ec2afea7c0b6d603ebce7dda25e93246fafb248a', class: "r-stepper-item--indicator" }, this.complete ? (h("r-icon", { name: "check", size: "s" })) : this.icon ? (h("r-icon", { name: this.icon, size: "s" })) : number !== undefined ? (h("span", { class: "r-stepper-item--indicator--step-number" }, number)) : null), this.hasText &&
|
|
19
|
+
h("div", { key: '6cf7607d13bdd0bd58885e5cc4c74c0068448dfc', class: "r-stepper-item--text" }, h("slot", { key: '8c47f057e435924f8c004be5f3112743127bf885' })))));
|
|
20
20
|
}
|
|
21
21
|
get host() { return getElement(this); }
|
|
22
22
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const stepperCss = ".r-stepper{display:var(--r-stepper--display, flex);align-items:var(--r-stepper--align-items, top)}.r-stepper>r-stepper-item,.r-stepper ::slotted(r-stepper-item){display:var(--r-stepper--slotted--stepper-item--display, flex)}.r-stepper>r-stepper-item:not(:last-of-type),.r-stepper ::slotted(r-stepper-item:not(:last-child)){flex:var(--r-stepper--slotted--stepper-item--flex, 1)}.r-stepper>r-stepper-item:not(:last-of-type)::after,.r-stepper ::slotted(r-stepper-item:not(:last-child))::after{content:var(--r-stepper-divider--content, \"\");display:var(--r-stepper-divider--display, block);position:var(--r-stepper-divider--position, relative);width:var(--r-stepper-divider--width, 100%);height:var(--r-stepper-divider--height, 1px);top:var(--r-stepper-divider--top, 10px);background-color:var(--r-stepper-divider--background-color, var(--r-border-soft, #686868))}";
|
|
4
4
|
|
|
@@ -15,7 +15,7 @@ const Stepper = class {
|
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
17
|
const completed = this.completed || this.completeSteps;
|
|
18
|
-
return (h(Host, { key: '
|
|
18
|
+
return (h(Host, { key: 'd501495c36f83cfc14c706f46936d5acc925d6d2' }, h("div", { key: 'a2952de15ea74093ea41663438bc8fec866d428b', class: "r-stepper" }, !this.hasSteps && Array.from({ length: this.total }, (_, index) => (h("r-stepper-item", { number: index + 1, complete: completed > index, active: completed === index, key: index }))), h("slot", { key: '4834a5947ae40241607131dcbb3dfa56354fdc13' }))));
|
|
19
19
|
}
|
|
20
20
|
get host() { return getElement(this); }
|
|
21
21
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const tabPanelCss = ":host([active]:not([active=false])){display:block}:host{display:none;outline:none}:host(:focus-visible){box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);outline:2px solid var(--r-border-focused, #0071e3);outline-offset:2px}.r-tab-panel{font-family:var(--r-tab-panel--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-tab-panel--font-size, var(--r-font-size-text-400, 1rem))}";
|
|
4
4
|
|
|
@@ -16,7 +16,7 @@ const RTabPanel = class {
|
|
|
16
16
|
active,
|
|
17
17
|
'aria-labelledby': tabId
|
|
18
18
|
};
|
|
19
|
-
return (h(Host, Object.assign({ key: '
|
|
19
|
+
return (h(Host, Object.assign({ key: '042aba1f5eebeafdff7035d8ad5afc9ec204eb8a', class: "r-typography" }, hostAttrs), h("div", { key: '0e9c72a859b07c1e4c2cb4a5d936fbadc07f23ca', class: "r-tab-panel" }, h("slot", { key: '2d588c5c67cfd26d7762a2be0c8400faa12a96c8' }))));
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
RTabPanel.style = tabPanelCss;
|
package/dist/esm/r-tab.entry.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const tabCss = ":host{display:flex;outline:none;opacity:1;cursor:pointer}:host(:hover:not([disabled]:not([disabled=false]))){--r-tab--color:var(--r-text-strong);--r-tab--marker--height:5px;--r-tab--marker--background-color:var(--r-border-softer, #c9c9c9);--r-tab--marker--visibility:visible}:host(:active:not([disabled]:not([disabled=false]))){--r-tab--background-color:var(--r-background-interactive-pressed, rgba(40,40,40,0.12))}:host(:focus-visible){--r-tab--marker--visibility:visible;--r-tab--marker--height:5px;--r-tab--marker--background-color:var(--r-background-interactive-pressed, rgba(40,40,40,0.12));--r-tab--slot--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-tab--slot--outline:2px solid var(--r-border-focused, #0071e3);--r-tab--slot--outline-offset:2px}:host([active]:not([active=false])){cursor:default;--r-tab--font-weight:var(--r-font-weight-semibold, 600);--r-tab--color:var(--r-text-strong, #000);--r-tab--padding-left:0.5625rem;--r-tab--padding-right:0.5625rem;--r-tab--marker--background-color:var(--r-border-regular, #282828);--r-tab--marker--visibility:visible;--r-tab--marker--height:3px}:host([disabled]:not([disabled=false])){opacity:0.4;cursor:not-allowed;--r-tab--pointer-events:none;--r-tab--marker--visibility:hidden;--r-tab--slot--box-shadow:none}.r-tab{position:var(--r-tab--position, relative);font-family:var(--r-tab--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-tab--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-tab--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-tab--line-height, 1);cursor:var(--r-tab--cursor, inherit);pointer-events:var(--r-tab--pointer-events, initial);padding-top:var(--r-tab--padding-top, 0);padding-right:var(--r-tab--padding-right, 0.625rem);padding-bottom:var(--r-tab--padding-bottom, 1.25rem);padding-left:var(--r-tab--padding-left, 0.625rem);opacity:var(--r-tab--opacity, 1);background:var(--r-tab--background, none);color:var(--r-tab--color, var(--r-text-regular, #282828));border:var(--r-tab--border, none);box-shadow:var(--r-tab--box-shadow, none);outline:var(--r-tab--outline, none)}.r-tab::after{content:var(--r-tab--marker--content, \"\");width:var(--r-tab--marker--width, 100%);height:var(--r-tab--marker--height, 3px);position:var(--r-tab--marker--position, absolute);bottom:var(--r-tab--marker--bottom, 0);left:var(--r-tab--marker--left, 0);visibility:var(--r-tab--marker--visibility, hidden);background-color:var(--r-tab--marker--background-color, rgba(0, 0, 0, 0));transition:var(--r-tab--marker--transition, all 0.1s ease-in)}.r-tab--slot{box-shadow:var(--r-tab--slot--box-shadow, none);outline:var(--r-tab--slot--outline, none);outline-offset:var(--r-tab--slot--outline-offset, 0)}";
|
|
4
4
|
|
|
@@ -47,7 +47,7 @@ const RTab = class {
|
|
|
47
47
|
'aria-selected': `${active}`,
|
|
48
48
|
'aria-disabled': `${disabled}`
|
|
49
49
|
};
|
|
50
|
-
return (h(Host, Object.assign({ key: '
|
|
50
|
+
return (h(Host, Object.assign({ key: '2e2b2d84376e097c80a84a1e7224c0f026c16277', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: 'c38098d413b17ba8b8ddd3436687879d1b37114f', class: "r-tab" }, h("span", { key: '3f7bfedd8a933da7ec52f34dd64f3a4e862cb836', class: "r-tab--slot" }, h("slot", { key: 'bc056a0d06188ddd1b47c3c062a4d51367e48393' })))));
|
|
51
51
|
}
|
|
52
52
|
get host() { return getElement(this); }
|
|
53
53
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const tabsListCss = ":host{display:block}.r-tabs-list{display:var(--r-tabs-list--display, flex);margin-bottom:var(--r-tabs-list--margin-bottom, 40px);border-bottom-width:var(--r-tabs-list--border-bottom-width, 1px);border-bottom-style:var(--r-tabs-list--border-bottom-style, solid);border-bottom-color:var(--r-tabs-list--border-bottom-color, var(--r-border-softer, #c9c9c9))}.r-tabs-list ::slotted(r-tab){margin-right:var(--r-tabs-list--r-tab--margin-right, 40px)}.r-tabs-list ::slotted(r-tab:last-of-type){margin-right:var(--r-tabs-list--r-tab--last-of-type--margin-right, 0)}";
|
|
4
4
|
|
|
@@ -7,7 +7,7 @@ const RTabsList = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h(Host, { key: '
|
|
10
|
+
return (h(Host, { key: '323b36e7d276c42c72764c34f2564153d80b64d2', role: "tablist" }, h("div", { key: 'bab777186d6d538c6f541e08bda090ab228f38d3', class: "r-tabs-list" }, h("slot", { key: '60a0d80ba3ada9d218ca8058cdcdf720277e19d0' }))));
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
RTabsList.style = tabsListCss;
|
package/dist/esm/r-tabs.entry.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
3
|
const tabsCss = ":host{display:block;margin-top:var(--r-spacing-150, 1.5rem)}";
|
|
4
4
|
|
|
@@ -68,8 +68,8 @@ const RTabs = class {
|
|
|
68
68
|
var _a, _b;
|
|
69
69
|
const label = this.transliterateToKebabCase(tab.textContent);
|
|
70
70
|
// Unique id per each tab-panel pair
|
|
71
|
-
const tabId =
|
|
72
|
-
const panelId =
|
|
71
|
+
const tabId = `r-tab-${label}`;
|
|
72
|
+
const panelId = `r-tab-panel-${label}`;
|
|
73
73
|
// Assign `id` and `panel-id` to each tab
|
|
74
74
|
tab.setAttribute('id', tabId);
|
|
75
75
|
tab.setAttribute('panel-id', panelId);
|
|
@@ -238,7 +238,7 @@ const RTabs = class {
|
|
|
238
238
|
this._changeFocusTab(e.target, e.detail.keycode);
|
|
239
239
|
}
|
|
240
240
|
render() {
|
|
241
|
-
return (h(Host, { key: '
|
|
241
|
+
return (h(Host, { key: 'ddb0847ae3eb4a03c446b2dd193f2fa9603081df', class: "r-tabs" }, h("slot", { key: 'd60346bd45b58534e6ac922ac66c09c1bb04c532' })));
|
|
242
242
|
}
|
|
243
243
|
get host() { return getElement(this); }
|
|
244
244
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
import { a as appendControlToFormData } from './formData-DvLT8-y3.js';
|
|
3
3
|
|
|
4
|
-
const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--
|
|
4
|
+
const textareaCss = ":host{opacity:1;display:block;outline:none;--r-label--margin-bottom:0}:host(:focus-visible){outline:none}:host([resize=none]){--r-textarea--input--resize:none}:host([resize=both]){--r-textarea--input--resize:both}:host([resize=horizontal]){--r-textarea--input--resize:horizontal}:host([resize=vertical]){--r-textarea--input--resize:vertical}:host([resize=initial]){--r-textarea--input--resize:initial}:host([resize=inherit]){--r-textarea--input--resize:inherit}:host([invalid]:not([invalid=false])){--r-textarea--container--background-color:var(--r-status-error-soft, #fef6f6);--r-textarea--container--border-color:var(--r-status-error-regular, #da1e28)}.r-textarea--label-container{display:var(--r-textarea--label-container--display, flex);gap:var(--r-textarea--label-container--gap, var(--r-spacing-100, 1rem));align-items:var(--r-textarea--label-container--align-items, center);justify-content:var(--r-textarea--label-container--align-items, space-between)}.r-textarea--label-container ::slotted([slot=popover]){display:var(--r-textarea--popover--display, inline-flex);height:var(--r-textarea--popover--height, var(--r-spacing-150, 1.5));align-items:var(--r-textarea--popover--align-items, center);justify-content:var(--r-textarea--popover--justify-content, center);margin-right:var(--r-textarea--popover--margin-right, -0.25rem);--r-popover--trigger--min-width:var(--r-textarea--popover-trigger--min-width, var(--r-spacing-150, 1.5))}.r-textarea--input::placeholder{color:var(--r-textarea--input--placeholder--color, var(--r-text-soft, #686868))}.r-textarea--input{vertical-align:top;width:var(--r-textarea--input--width, 100%);max-width:var(--r-textarea--input--max-width, 100%);min-height:var(--r-textarea--input--min-height, 8.875em);font-family:var(--r-textarea--input--font-family, var(--r-font-family-text, system-ui));font-weight:var(--r-textarea--input--font-weight, var(--r-font-weight-regular, 400));font-size:var(--r-textarea--input--font-size, var(--r-font-size-400, 1rem));line-height:var(--r-textarea--input--line-height, var(--r-line-height-m, 1.5));color:var(--r-textarea--input--color, var(--r-text-regular, #282828));background-color:var(--r-textarea--input--background-color, transparent);opacity:var(--r-textarea--input--opacity, 1);border-width:var(--r-textarea--input--border-width, 0px);border-style:var(--r-textarea--input--border-style, solid);border-color:var(--r-textarea--input--border-color, var(--r-border-soft, #686868));border-radius:var(--r-textarea--input--border-radius, 0);box-sizing:var(--r-textarea--input--box-sizing, border-box);box-shadow:var(--r-textarea--input--box-shadow, none);padding:var(--r-textarea--input--padding, var(--r-textarea--input--padding-top, 0.688em) var(--r-textarea--input--padding-right, 0.625em) var(--r-textarea--input--padding-bottom, 0.688em) var(--r-textarea--input--padding-left, 0.625em));margin-top:var(--r-textarea--input--margin-top, 0);resize:var(--r-textarea--input--resize, both);z-index:var(--r-textarea--input--z-index, 1);outline:var(--r-textarea--input--outline, none);outline-offset:var(--r-textarea--input--outline-offset, 0);pointer-events:var(--r-textarea--input--pointer-events, auto);cursor:var(--r-textarea--input--cursor, inherit)}.r-textarea--container{display:flex;align-items:start;overflow:visible;background-color:var(--r-textarea--container--background-color, var(--r-background-interactive-softest, #f7f7f7));border-width:var(--r-textarea--container--border-width, 1px);border-style:var(--r-textarea--container--border-style, solid);border-color:var(--r-textarea--container--border-color, var(--r-border-soft, #686868));padding:var(--r-textarea--container--padding, 0);margin-top:var(--r-textarea--container--margin-top, var(--r-spacing-025, 0.25rem));box-shadow:var(--r-textarea--container--box-shadow, none);outline:var(--r-textarea--container--outline, none);outline-offset:var(--r-textarea--container--outline-offset, none)}.r-textarea--container[data-readonly=true]{--r-textarea--container--background-color:var(--r-background-soft, #f3f1f0);--r-textarea--container--border-color:transparent transparent var(--r-border-soft, #686868) transparent;--r-textarea--container--cursor:text}.r-textarea--container:hover:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-hovered)}.r-textarea--container:active:not([data-disabled=true]):not([data-readonly=true]){--r-textarea--container--background-color:var(--r-background-interactive-pressed)}.r-textarea--container:focus-within{--r-textarea--container--box-shadow:0 0 0 6px var(--r-border-focused-outlined, #fff);--r-textarea--container--outline:2px solid var(--r-border-focused, #0071e3);--r-textarea--container--outline-offset:2px}.r-textarea--trailing{display:var(--r-textarea--trailing--display, flex);margin-top:var(--r-textarea--trailing--margin-top, 0.688em);margin-right:var(--r-textarea--trailing--margin-right, 0.625em);margin-left:var(--r-textarea--trailing--margin-left, auto);gap:var(--r-textarea--trailing--gap, 0.625rem)}.r-textarea--trailing:empty{display:none}.r-textarea--readonly-icon{color:var(--r-textarea--readonly-icon--color, var(--r-icon-soft, #686868))}.r-textarea--messages{display:flex;gap:var(--r-textarea--messages--gap, var(--r-spacing-025, 0.25rem))}.r-textarea--messages--counter{margin-left:auto}.r-textarea--messages:has(r-hint){margin-top:var(--r-spacing-025, 0.25rem)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
|
|
5
5
|
|
|
6
6
|
const RTextarea = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -37,6 +37,8 @@ const RTextarea = class {
|
|
|
37
37
|
/** Unique id */
|
|
38
38
|
this.uniqueId = `r-textarea-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
|
|
39
39
|
this.onInput = event => {
|
|
40
|
+
if (this.readonly)
|
|
41
|
+
return;
|
|
40
42
|
this.value = event.target.value;
|
|
41
43
|
this.validateFormElement(this.nativeElement);
|
|
42
44
|
const { host, value } = this;
|
|
@@ -49,6 +51,8 @@ const RTextarea = class {
|
|
|
49
51
|
}
|
|
50
52
|
};
|
|
51
53
|
this.onChange = event => {
|
|
54
|
+
if (this.readonly)
|
|
55
|
+
return;
|
|
52
56
|
this.value = event.target.value;
|
|
53
57
|
this.validateFormElement(this.nativeElement);
|
|
54
58
|
const { host, value } = this;
|
|
@@ -64,6 +68,8 @@ const RTextarea = class {
|
|
|
64
68
|
}
|
|
65
69
|
};
|
|
66
70
|
this.onResetForm = () => {
|
|
71
|
+
if (this.readonly)
|
|
72
|
+
return;
|
|
67
73
|
// Return to initial state
|
|
68
74
|
this.validityState = null;
|
|
69
75
|
this.validityMessage = null;
|
|
@@ -107,6 +113,8 @@ const RTextarea = class {
|
|
|
107
113
|
}
|
|
108
114
|
/** Sets the value of the element. */
|
|
109
115
|
async setValue(value) {
|
|
116
|
+
if (this.readonly)
|
|
117
|
+
return;
|
|
110
118
|
this.value = value;
|
|
111
119
|
}
|
|
112
120
|
/** Gets the value of the element. */
|
|
@@ -115,6 +123,8 @@ const RTextarea = class {
|
|
|
115
123
|
}
|
|
116
124
|
/** Resets value and validity state to initial. */
|
|
117
125
|
async reset() {
|
|
126
|
+
if (this.readonly)
|
|
127
|
+
return;
|
|
118
128
|
this.validityState = null;
|
|
119
129
|
this.validityMessage = null;
|
|
120
130
|
this.value = this.initial['value'];
|
|
@@ -181,6 +191,9 @@ const RTextarea = class {
|
|
|
181
191
|
this.novalidate ||
|
|
182
192
|
false);
|
|
183
193
|
}
|
|
194
|
+
get hasTrailingSlot() {
|
|
195
|
+
return !!this.host.querySelector('[slot="trailing"]');
|
|
196
|
+
}
|
|
184
197
|
get textareaSlotValue() {
|
|
185
198
|
return this.host.textContent;
|
|
186
199
|
}
|
|
@@ -207,7 +220,7 @@ const RTextarea = class {
|
|
|
207
220
|
this.disconnectFormEventListeners();
|
|
208
221
|
}
|
|
209
222
|
render() {
|
|
210
|
-
const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, tooltip, tooltipIcon, tooltipIconColor } = this;
|
|
223
|
+
const { name, rows, cols, placeholder, required, showCounter, maxlength, minlength, form, value, disabled, resize, hint, invalid, label, uniqueId, fieldIndicator, tooltip, tooltipIcon, tooltipIconColor, readonly } = this;
|
|
211
224
|
const textareaAttrs = {
|
|
212
225
|
name,
|
|
213
226
|
rows,
|
|
@@ -220,6 +233,7 @@ const RTextarea = class {
|
|
|
220
233
|
value,
|
|
221
234
|
disabled,
|
|
222
235
|
resize,
|
|
236
|
+
readonly,
|
|
223
237
|
id: uniqueId,
|
|
224
238
|
'aria-describedby': this.ariaDescribedBy,
|
|
225
239
|
'aria-invalid': `${!!invalid}`,
|
|
@@ -243,7 +257,7 @@ const RTextarea = class {
|
|
|
243
257
|
}, {});
|
|
244
258
|
return (h(Host, null, h("div", { class: "r-textarea--label-container" }, h("label", { htmlFor: uniqueId }, label &&
|
|
245
259
|
h("r-label", Object.assign({ id: `${uniqueId}-label` }, labelAttr), label)), h("slot", { name: "popover" })), hint &&
|
|
246
|
-
h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), h("div", { class: "r-textarea--messages" }, h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage), this.hasValidationSuccess && this.validMessage), showCounter && h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, value.length
|
|
260
|
+
h("r-hint", { id: `${uniqueId}-hint`, role: "note" }, hint), h("div", { class: "r-textarea--container", "data-disabled": `${!!disabled}`, "data-readonly": `${!!readonly}` }, h("textarea", Object.assign({ class: "r-textarea--input" }, textareaAttrs, eventListeners, { ref: el => this.nativeElement = el, onChange: this.onChange, onInput: this.onInput })), h("div", { class: "r-textarea--trailing" }, this.readonly && h("r-icon", { class: "r-textarea--readonly-icon", name: "pen-disabled", size: "s" }), this.hasTrailingSlot && h("slot", { name: "trailing" }))), h("div", { class: "r-textarea--messages" }, h("r-hint", { "aria-live": "polite", "aria-atomic": "true", id: `${uniqueId}-message`, class: !this.hasMessage && 'visually-hidden', variant: invalid ? 'error' : 'success' }, this.hasError && this.error, this.hasValidationError && (this.customErrorMessage || this.validityMessage), this.hasValidationSuccess && this.validMessage), showCounter && h("r-hint", { "aria-hidden": true, class: "r-textarea--messages--counter" }, `${value.length}${maxlength ? '/' : ''}${maxlength}`), maxlength &&
|
|
247
261
|
h("div", { class: "visually-hidden", ref: el => this.characterLimitReachedAlert = el, "aria-live": "assertive" }))));
|
|
248
262
|
}
|
|
249
263
|
get host() { return getElement(this); }
|
|
@@ -1,22 +1,32 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const toastGroupCss = "@media (max-width:
|
|
3
|
+
const toastGroupCss = "@media (max-width: 48rem){.sc-r-toast-group-h{--width:auto;--right:24px;--bottom:auto;--left:24px;--padding-right:0}}[data-visually-hidden=true].sc-r-toast-group-h{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sc-r-toast-group-h{display:var(--display, block);position:var(--position, fixed);top:var(--top, 32px);right:var(--right, 0);bottom:var(--bottom, auto);left:var(--left, auto);overflow:var(--overflow, hidden);overflow-y:var(--overflow-y, auto);width:var(--width, 352px);max-height:var(--max-height, calc(100vh - 64px));padding-right:var(--padding-right, 32px);padding-bottom:var(--padding-bottom, 32px);z-index:var(--z-index, 1)}.r-toast-group.sc-r-toast-group{position:relative;display:var(--r-toast-group--display, flex);flex-direction:var(--r-toast-group--flex-direction, column);justify-content:var(--r-toast-group--justify-content, flex-start);gap:var(--r-toast-group--gap, var(--r-spacing-100, 1rem))}";
|
|
4
4
|
|
|
5
5
|
const ToastGroup = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
this.updateHiddenState = () => {
|
|
9
|
-
this.host.setAttribute('
|
|
9
|
+
this.host.setAttribute('data-visually-hidden', `${!this.hasChildren}`);
|
|
10
|
+
};
|
|
11
|
+
this.observeSlotContentChange = () => {
|
|
12
|
+
this.observer = new MutationObserver(() => {
|
|
13
|
+
this.updateHiddenState();
|
|
14
|
+
});
|
|
15
|
+
this.observer.observe(this.host, {
|
|
16
|
+
childList: true,
|
|
17
|
+
subtree: true
|
|
18
|
+
});
|
|
10
19
|
};
|
|
11
20
|
}
|
|
12
21
|
get hasChildren() {
|
|
13
|
-
return this.host.
|
|
22
|
+
return this.host.querySelectorAll('r-toast').length > 0;
|
|
14
23
|
}
|
|
15
24
|
componentWillLoad() {
|
|
16
25
|
this.updateHiddenState();
|
|
26
|
+
this.observeSlotContentChange();
|
|
17
27
|
}
|
|
18
28
|
render() {
|
|
19
|
-
return (h(Host, { key: '
|
|
29
|
+
return (h(Host, { key: '95e0b29bb1b6a45aabb4e7f5da283997c6b707a8' }, h("div", { key: '4b42e40646381d78f2b812f483ea993992ec7f12', class: "r-toast-group" }, h("slot", { key: 'db3cca9551652a78d9c1579532894fc86ca02b73' }))));
|
|
20
30
|
}
|
|
21
31
|
get host() { return getElement(this); }
|
|
22
32
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-
|
|
1
|
+
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Da7qOBFr.js';
|
|
2
2
|
|
|
3
|
-
const toastCss = ":host([status=info]){--r-toast--border-color:var(--r-status-info-regular, #466882);--r-toast--background-color:var(--r-status-info-soft, #f8fafb);--r-toast--leading-icon--color:var(--r-status-info-regular, #466882)}:host([status=warning]){--r-toast--border-color:var(--r-status-warning-regular, #f26a20);--r-toast--background-color:var(--r-status-warning-soft, #fef9f5);--r-toast--leading-icon--color:var(--r-status-warning-strong, #89411A)}:host([status=error]){--r-toast--border-color:var(--r-status-error-regular, #da1e28);--r-toast--background-color:var(--r-status-error-soft, #fef6f6);--r-toast--leading-icon--color:var(--r-status-error-regular, #da1e28)}:host([status=success]){--r-toast--border-color:var(--r-status-success-regular, #298535);--r-toast--background-color:var(--r-status-success-soft, #f7fdf8);--r-toast--leading-icon--color:var(--r-status-success-regular, #298535)}:host([is-content=false]){--r-toast--content--display:none}:host([headline]){--r-toast--content--margin-top:var(--r-spacing-050, 0.5rem)}:host([
|
|
3
|
+
const toastCss = ":host([status=info]){--r-toast--border-color:var(--r-status-info-regular, #466882);--r-toast--background-color:var(--r-status-info-soft, #f8fafb);--r-toast--leading-icon--color:var(--r-status-info-regular, #466882)}:host([status=warning]){--r-toast--border-color:var(--r-status-warning-regular, #f26a20);--r-toast--background-color:var(--r-status-warning-soft, #fef9f5);--r-toast--leading-icon--color:var(--r-status-warning-strong, #89411A)}:host([status=error]){--r-toast--border-color:var(--r-status-error-regular, #da1e28);--r-toast--background-color:var(--r-status-error-soft, #fef6f6);--r-toast--leading-icon--color:var(--r-status-error-regular, #da1e28)}:host([status=success]){--r-toast--border-color:var(--r-status-success-regular, #298535);--r-toast--background-color:var(--r-status-success-soft, #f7fdf8);--r-toast--leading-icon--color:var(--r-status-success-regular, #298535)}:host([is-content=false]){--r-toast--content--display:none}:host([headline]){--r-toast--content--margin-top:var(--r-spacing-050, 0.5rem)}:host([data-visually-hidden=true]){--r-toast--host--transition:all 0.15s;--r-toast--host--transition-delay:0.15s;--r-toast--host--opacity:0;--r-toast--host--height-expanded:0}:host{animation-duration:var(--r-toast--host--animation-duration, 0.3s);animation-fill-mode:var(--r-toast--host--animation-fill-mode, forwards);animation-name:var(--r-toast--host--animation-name, none);box-sizing:var(--r-toast--host--box-sizing, border-box);display:var(--r-toast--host--display, block);height:var(--r-toast--host--height, var(--r-toast--host--height-expanded, auto));opacity:var(--r-toast--host--opacity, 1);overflow:var(--r-toast--host--overflow, hidden);position:var(--r-toast--host--position, relative);transition:var(--r-toast--host--transition, all 0.3s);transition-delay:var(--r-toast--host--transition-delay, 0s)}:host ::slotted(p){margin:0}:host ::slotted(p+p),:host ::slotted(p+ul),:host ::slotted(p+ol){margin-top:1rem}:host .r-toast--action-link:hover{--r-toast--action--color:var(--r-text-strong, #000000)}:host .r-toast--action-link:focus{outline:var(--r-toast--action-link--outline, 2px solid var(--r-border-focused, #0071e3));box-shadow:var(--r-toast--action-link--box-shadow, 0 0 0 1px var(--r-border-focused-outlined, #fff), 0 0 0 3px var(--r-border-focused, #0071e3), 0 0 0 4px var(--r-border-focused-outlined, #fff))}:host .r-toast--trailing-button{--r-button--width:2.75rem;--r-button--height:2.75rem;--r-button--color:var(--r-text-regular, #282828);--r-button--border-color:transparent;--r-button--background-color:transparent;position:relative;top:-8px;right:-8px}:host .r-toast--trailing-button:hover{--r-button--color:var(--r-text-strong, #000000);--r-button--background-color:var(--r-background-interactive-hovered, #000000)}:host .r-toast--trailing-button:active{--r-button--transform:scale(0.94)}@media (prefers-reduced-motion){:host{--r-toast--transition:none;--r-toast--host--animation-name:none}}.r-toast{font-family:var(--r-toast--font-family, var(--r-font-family-text, system-ui));font-size:var(--r-toast--font-size, var(--r-font-size-400, 1rem));display:var(--r-toast--display, flex);flex-direction:var(--r-toast--flex-direction, row);align-items:var(--r-toast--align-items, stretch);gap:var(--r-toast--gap, var(--r-spacing-075, 0.75rem));padding:var(--r-toast--padding, 16px);border-width:var(--r-toast--border-width, 1px);border-style:var(--r-toast--border-style, solid);border-color:var(--r-toast--border-color, var(--r-status-info-regular, #466882));background-color:var(--r-toast--background-color, var(--r-status-info-soft, #f8fafb));box-sizing:var(--r-toast--box-sizing, border-box);transition:var(--r-toast--transition, all 0.3s)}.r-toast--main{flex:var(--r-toast--content--flex, 1)}.r-toast--leading-icon{color:var(--r-toast--leading-icon--color, var(--r-status-info-regular, #466882));margin-top:var(--r-toast--leading-icon--margin-top, 0)}.r-toast--headline{color:var(--r-toast--headline--color, var(--r-text-regular, #282828));font-size:var(--r-toast--headline--font-size, var(--r-font-size-400, 1rem));font-weight:var(--r-toast--headline--font-weight, var(--r-font-weight-semibold, 600));line-height:var(--r-toast--headline--line-height, 1);margin:var(--r-toast--headline--margin, 0)}.r-toast--content{display:var(--r-toast--content--display, block);color:var(--r-toast--content--color, var(--r-text-regular, #282828));line-height:var(--r-toast--content--line-height, var(--r-line-height-m, 1.5));font-size:var(--r-toast--content--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--content--font-weight, var(--r-font-weight-light, 300));margin-top:var(--r-toast--content--margin-top, 0)}.r-toast--action{display:var(--r-toast--action--display, flex);margin-top:var(--r-toast--action--margin-top, var(--r-spacing-050, 0.5rem));color:var(--r-toast--action--color, var(--r-text-regular, #282828));font-size:var(--r-toast--action--font-size, var(--r-font-size-300, 0.875rem));font-weight:var(--r-toast--action--font-weight, var(--r-font-weight-light, 300))}.r-toast--action-link{color:var(--r-toast--action--color, var(--r-text-regular, #282828))}.r-toast--action ::slotted(*){font-size:inherit;color:inherit}.r-toast--action ::slotted(a){color:var(--r-toast--action--color, var(--r-text-regular, #282828))}";
|
|
4
4
|
|
|
5
5
|
const Toast = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -30,6 +30,12 @@ const Toast = class {
|
|
|
30
30
|
* @default 3000
|
|
31
31
|
*/
|
|
32
32
|
this.delay = 3000;
|
|
33
|
+
/**
|
|
34
|
+
* Defines the behavior of the component's dismissing.
|
|
35
|
+
* - `auto`: The component will be dismissed automatically after number of ms set by `delay` property.
|
|
36
|
+
* - `manual`: The component requires explicit user action to close.
|
|
37
|
+
* @default "auto"
|
|
38
|
+
*/
|
|
33
39
|
this.dismissMode = 'auto';
|
|
34
40
|
/** Provides content for `aria-label` attribute of the dismiss button. */
|
|
35
41
|
this.dismissLabel = 'Dismiss the toast';
|
|
@@ -160,14 +166,14 @@ const Toast = class {
|
|
|
160
166
|
name: trailingIcon,
|
|
161
167
|
size: 'm'
|
|
162
168
|
};
|
|
163
|
-
return (h(Host, { key: '
|
|
164
|
-
h("div", { key: '
|
|
165
|
-
h("h2", { key: '
|
|
166
|
-
h("div", { key: '
|
|
167
|
-
h("div", { key: '
|
|
168
|
-
h("a", Object.assign({ key: '
|
|
169
|
-
h("div", { key: '
|
|
170
|
-
h("r-icon-button", Object.assign({ key: '
|
|
169
|
+
return (h(Host, { key: 'd89f4e9245d32cd1f622beed7c053442c1977e7f', id: this.uniqueId, role: "alert", "aria-live": `${this.isError ? 'assertive' : 'polite'}`, "data-visually-hidden": `${this.isOpen ? 'false' : 'true'}` }, h("div", { key: '5292d419fa8122136b8694a47140418a2c3bbf1c', class: "r-toast" }, this.hasLeading &&
|
|
170
|
+
h("div", { key: '39d348a25e1dffb2c0dc6c550d94e0ee5a791089', class: "r-toast--leading" }, this.hasLeadingSlot && h("slot", { key: '92693e79818ea57423bd56364bad96c4e85a8fb7', name: "leading" }), this.hasLeadingIcon && h("r-icon", Object.assign({ key: 'a6c8491b3bf1af387c228ab110775d380dc33afd', class: "r-toast--leading-icon" }, leadingIconAttrs))), h("div", { key: '78e914e294adb359116045937146caaf9f82b4e6', class: "r-toast--main" }, this.hasHeadline &&
|
|
171
|
+
h("h2", { key: 'f33e94e74a2f93dc7bfb28f83120d79f07d3b254', class: "r-toast--headline" }, h("slot", { key: '3e61d7eb3b319dd00205bd010074edd1f2f809ba', name: "headline" }, headline)), this.hasContent &&
|
|
172
|
+
h("div", { key: '6d098697465a8c84c5dca4abcf5b7eab04ff4a23', class: "r-toast--content r-typography" }, h("slot", { key: '8ad7f7ce97edcbd601a7e08b48a2cd766d32e8bf', onSlotchange: this.handleSlotChange })), this.hasAction &&
|
|
173
|
+
h("div", { key: '7b0df2b4f747b7436ddaa34c87b876d5d8023921', class: "r-toast--action" }, h("slot", { key: '9811a95fc1261f7565d31b2a54ca97a9a36ec236', name: "action" }, this.hasActionLink &&
|
|
174
|
+
h("a", Object.assign({ key: 'bbbd7f3f63da45f374d40152269fe68b359e298d', class: "r-toast--action-link" }, actionAttrs), action)))), this.hasTrailing &&
|
|
175
|
+
h("div", { key: '6a000a3e1e6dfbbbfe83b64ad550b39df030bef3', class: "r-toast--trailing" }, this.hasTrailingSlot && h("slot", { key: '90ab154036ef2206394d1c43ad48a4973eec520f', name: "trailing" }), this.isDismissManual &&
|
|
176
|
+
h("r-icon-button", Object.assign({ key: '1433d0151fb3673d98b51f476e8bbe43d8f7ebd6' }, trailingIconAttrs, { class: "r-toast--trailing-button", onClick: this.handleTrailingButtonClick, "aria-label": this.dismissLabel }), h("slot", { key: 'c47c59fbc4097fdaf4f3a4f27beab833dcef4f0e', name: "dismiss" }))))));
|
|
171
177
|
}
|
|
172
178
|
get host() { return getElement(this); }
|
|
173
179
|
static get watchers() { return {
|