@vonage/vivid 4.3.0 → 4.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/api-extractor.json +25 -0
- package/custom-elements.json +444 -692
- package/index.cjs +18 -17
- package/index.js +3 -3
- package/lib/dialog/dialog.d.ts +1 -0
- package/lib/empty-state/definition.d.ts +1 -0
- package/lib/empty-state/empty-state.d.ts +5 -0
- package/lib/enums.d.ts +4 -0
- package/lib/fab/fab.d.ts +1 -1
- package/lib/icon/icon.d.ts +1 -1
- package/lib/popup/popup.d.ts +5 -0
- package/lib/range-slider/range-slider.d.ts +2 -0
- package/lib/select/select.d.ts +1 -0
- package/lib/slider/slider.d.ts +5 -0
- package/lib/slider/slider.template.d.ts +2 -2
- package/lib/tabs/tabs.d.ts +2 -0
- package/lib/video-player/video-player.d.ts +0 -1
- package/listbox/index.cjs +1 -1
- package/listbox/index.js +1 -1
- package/package.json +6 -1
- package/shared/anchored.js +1 -1
- package/shared/calendar-event.js +1 -1
- package/shared/definition.cjs +2 -2
- package/shared/definition.js +2 -2
- package/shared/definition11.cjs +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.cjs +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition13.js +1 -1
- package/shared/definition15.cjs +7 -8
- package/shared/definition15.js +2 -3
- package/shared/definition16.cjs +10 -6
- package/shared/definition16.js +9 -5
- package/shared/definition17.cjs +2 -2
- package/shared/definition17.js +2 -2
- package/shared/definition18.cjs +3 -4
- package/shared/definition18.js +1 -2
- package/shared/definition19.cjs +3 -4
- package/shared/definition19.js +1 -2
- package/shared/definition20.cjs +2 -4
- package/shared/definition20.js +3 -5
- package/shared/definition21.cjs +72 -34
- package/shared/definition21.js +73 -35
- package/shared/definition23.cjs +18 -3
- package/shared/definition23.js +18 -3
- package/shared/definition24.cjs +2 -2
- package/shared/definition24.js +2 -2
- package/shared/definition25.cjs +7 -8
- package/shared/definition25.js +3 -4
- package/shared/definition26.js +1 -1
- package/shared/definition27.cjs +1 -1
- package/shared/definition27.js +1 -1
- package/shared/definition28.js +1 -1
- package/shared/definition29.cjs +4 -4
- package/shared/definition29.js +4 -4
- package/shared/definition3.cjs +1 -1
- package/shared/definition3.js +2 -2
- package/shared/definition30.cjs +3 -2
- package/shared/definition30.js +3 -2
- package/shared/definition31.cjs +1 -1
- package/shared/definition31.js +2 -2
- package/shared/definition32.cjs +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition34.cjs +2 -3
- package/shared/definition34.js +2 -3
- package/shared/definition35.cjs +10 -10
- package/shared/definition35.js +5 -5
- package/shared/definition36.cjs +1 -1
- package/shared/definition36.js +1 -1
- package/shared/definition37.js +1 -1
- package/shared/definition38.cjs +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition4.cjs +5 -3
- package/shared/definition4.js +6 -4
- package/shared/definition41.cjs +1 -1
- package/shared/definition41.js +1 -1
- package/shared/definition42.cjs +127 -23
- package/shared/definition42.js +127 -23
- package/shared/definition43.cjs +18 -11
- package/shared/definition43.js +13 -6
- package/shared/definition44.cjs +1 -1
- package/shared/definition44.js +2 -2
- package/shared/definition45.cjs +3 -2
- package/shared/definition45.js +4 -3
- package/shared/definition46.cjs +97 -14
- package/shared/definition46.js +98 -15
- package/shared/definition47.cjs +2 -3
- package/shared/definition47.js +3 -4
- package/shared/definition48.cjs +1 -1
- package/shared/definition48.js +1 -1
- package/shared/definition5.cjs +4 -5
- package/shared/definition5.js +4 -5
- package/shared/definition50.cjs +1 -1
- package/shared/definition50.js +1 -1
- package/shared/definition51.cjs +56 -10
- package/shared/definition51.js +56 -10
- package/shared/definition52.js +1 -1
- package/shared/definition53.cjs +1 -1
- package/shared/definition53.js +2 -2
- package/shared/definition54.cjs +8 -9
- package/shared/definition54.js +2 -3
- package/shared/definition55.cjs +8 -8
- package/shared/definition55.js +2 -2
- package/shared/definition56.cjs +9 -9
- package/shared/definition56.js +7 -7
- package/shared/definition57.cjs +10 -1
- package/shared/definition57.js +11 -2
- package/shared/definition58.cjs +7 -1
- package/shared/definition58.js +8 -2
- package/shared/definition59.cjs +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition6.cjs +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition61.cjs +65845 -2
- package/shared/definition61.js +65845 -2
- package/shared/definition62.js +1 -1
- package/shared/definition63.cjs +155 -2
- package/shared/definition63.js +156 -4
- package/shared/definition7.cjs +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.cjs +2 -3
- package/shared/definition8.js +3 -4
- package/shared/definition9.cjs +1 -1
- package/shared/definition9.js +1 -1
- package/shared/dialog/index.d.ts +1 -0
- package/shared/enums.cjs +6 -0
- package/shared/enums.js +6 -1
- package/shared/form-elements.cjs +236 -0
- package/shared/form-elements.js +229 -0
- package/shared/icon.js +1 -1
- package/shared/index2.cjs +6 -256
- package/shared/index2.js +6 -249
- package/shared/localized.cjs +26 -2
- package/shared/localized.js +25 -2
- package/shared/patterns/anchored.d.ts +4 -4
- package/shared/playbackRates.cjs +13 -0
- package/shared/playbackRates.js +11 -0
- package/shared/presentationDate.cjs +9 -9
- package/shared/presentationDate.js +9 -9
- package/shared/slider.template.cjs +27 -4
- package/shared/slider.template.js +27 -4
- package/shared/text-anchor.cjs +1 -1
- package/shared/text-anchor.js +1 -1
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/shared/utils/playbackRates.d.ts +1 -0
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/tsdoc-metadata.json +11 -0
- package/vivid.api.json +228 -8
- package/appearance-ui/index.cjs +0 -102
- package/appearance-ui/index.js +0 -100
- package/lib/appearance-ui/appearance-ui.d.ts +0 -12
- package/lib/appearance-ui/appearance-ui.template.d.ts +0 -4
- package/lib/appearance-ui/definition.d.ts +0 -3
- package/shared/video-player.cjs +0 -65860
- package/shared/video-player.js +0 -65857
package/shared/definition5.cjs
CHANGED
|
@@ -5,12 +5,10 @@ const definition$1 = require('./definition11.cjs');
|
|
|
5
5
|
const definition$2 = require('./definition46.cjs');
|
|
6
6
|
const definition$3 = require('./definition30.cjs');
|
|
7
7
|
const enums = require('./enums.cjs');
|
|
8
|
-
require('./affix.cjs');
|
|
9
|
-
require('./index2.cjs');
|
|
10
|
-
const localized = require('./localized.cjs');
|
|
11
8
|
const applyMixins = require('./apply-mixins.cjs');
|
|
12
|
-
const
|
|
9
|
+
const localized = require('./localized.cjs');
|
|
13
10
|
const definition = require('./definition29.cjs');
|
|
11
|
+
const playbackRates = require('./playbackRates.cjs');
|
|
14
12
|
const when = require('./when.cjs');
|
|
15
13
|
const repeat = require('./repeat.cjs');
|
|
16
14
|
const classNames = require('./class-names.cjs');
|
|
@@ -153,6 +151,7 @@ class AudioPlayer extends index.FoundationElement {
|
|
|
153
151
|
disconnectedCallback() {
|
|
154
152
|
super.disconnectedCallback();
|
|
155
153
|
this.#setSliderInteractionListeners(false);
|
|
154
|
+
this.pause();
|
|
156
155
|
}
|
|
157
156
|
play() {
|
|
158
157
|
this.#pausedChanged(PLAY);
|
|
@@ -332,7 +331,7 @@ const AudioPlayerTemplate = (context) => {
|
|
|
332
331
|
></${buttonTag}>
|
|
333
332
|
|
|
334
333
|
${repeat.repeat(
|
|
335
|
-
(x) =>
|
|
334
|
+
(x) => playbackRates.getPlaybackRatesArray(x.playbackRates),
|
|
336
335
|
index.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
|
|
337
336
|
role="menuitemradio"
|
|
338
337
|
class="playback-rate"
|
package/shared/definition5.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, O as Observable, a as attr, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { B as Button, a as buttonRegistries } from './definition11.js';
|
|
3
3
|
import { S as Slider, a as sliderRegistries } from './definition46.js';
|
|
4
4
|
import { a as menuRegistries } from './definition30.js';
|
|
5
5
|
import { M as MediaSkipBy } from './enums.js';
|
|
6
|
-
import './affix.js';
|
|
7
|
-
import './index2.js';
|
|
8
|
-
import { L as Localized } from './localized.js';
|
|
9
6
|
import { a as applyMixins } from './apply-mixins.js';
|
|
10
|
-
import {
|
|
7
|
+
import { L as Localized } from './localized.js';
|
|
11
8
|
import { b as Menu, c as MenuItem } from './definition29.js';
|
|
9
|
+
import { g as getPlaybackRatesArray } from './playbackRates.js';
|
|
12
10
|
import { w as when } from './when.js';
|
|
13
11
|
import { r as repeat } from './repeat.js';
|
|
14
12
|
import { c as classNames } from './class-names.js';
|
|
@@ -151,6 +149,7 @@ class AudioPlayer extends FoundationElement {
|
|
|
151
149
|
disconnectedCallback() {
|
|
152
150
|
super.disconnectedCallback();
|
|
153
151
|
this.#setSliderInteractionListeners(false);
|
|
152
|
+
this.pause();
|
|
154
153
|
}
|
|
155
154
|
play() {
|
|
156
155
|
this.#pausedChanged(PLAY);
|
package/shared/definition50.cjs
CHANGED
|
@@ -19,7 +19,7 @@ index.__decorate([
|
|
|
19
19
|
index.attr({ mode: "boolean" })
|
|
20
20
|
], Tab$1.prototype, "disabled", void 0);
|
|
21
21
|
|
|
22
|
-
const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{
|
|
22
|
+
const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;border-radius:2px;background:currentColor;block-size:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}";
|
|
23
23
|
|
|
24
24
|
var __defProp = Object.defineProperty;
|
|
25
25
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition50.js
CHANGED
|
@@ -17,7 +17,7 @@ __decorate([
|
|
|
17
17
|
attr({ mode: "boolean" })
|
|
18
18
|
], Tab$1.prototype, "disabled", void 0);
|
|
19
19
|
|
|
20
|
-
const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{
|
|
20
|
+
const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;border-radius:2px;background:currentColor;block-size:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}";
|
|
21
21
|
|
|
22
22
|
var __defProp = Object.defineProperty;
|
|
23
23
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition51.cjs
CHANGED
|
@@ -383,7 +383,7 @@ index.__decorate([
|
|
|
383
383
|
], Tabs$1.prototype, "showActiveIndicator", void 0);
|
|
384
384
|
applyMixins.applyMixins(Tabs$1, startEnd.StartEnd);
|
|
385
385
|
|
|
386
|
-
const styles = ":host{display:block}.base{
|
|
386
|
+
const styles = ":host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;inline-size:100%;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:\"\";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tablist{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;position:relative;display:grid;box-sizing:border-box;color:var(--_appearance-color-text)}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-flow:column;grid-template-columns:auto;grid-template-rows:auto auto;inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;border-bottom:1px solid var(--vvd-color-neutral-300);inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.tablist-wrapper::-webkit-scrollbar{display:none}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1/auto/auto;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);grid-column:1/auto;inline-size:calc(var(--_tabs-active-tab-inline-size) - 32px);inset-block-end:0;inset-inline-start:8px;justify-self:center;padding-inline:var(--_tabs-tablist-gutter)}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition){opacity:0}";
|
|
387
387
|
|
|
388
388
|
var __defProp = Object.defineProperty;
|
|
389
389
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -421,6 +421,10 @@ class Tabs extends Tabs$1 {
|
|
|
421
421
|
super.tabsChanged();
|
|
422
422
|
this.patchIndicatorStyleTransition();
|
|
423
423
|
this.#patchActiveID();
|
|
424
|
+
this.#updateScrollStatus();
|
|
425
|
+
}
|
|
426
|
+
#updateScrollStatus() {
|
|
427
|
+
this.tablist.parentElement.dispatchEvent(new Event("scroll"));
|
|
424
428
|
}
|
|
425
429
|
tabpanelsChanged() {
|
|
426
430
|
super.tabpanelsChanged();
|
|
@@ -434,6 +438,20 @@ class Tabs extends Tabs$1 {
|
|
|
434
438
|
const width = this.activetab.getBoundingClientRect().width;
|
|
435
439
|
this.activeIndicatorRef.style.setProperty(ACTIVE_TAB_WIDTH, `${width}px`);
|
|
436
440
|
}
|
|
441
|
+
connectedCallback() {
|
|
442
|
+
super.connectedCallback();
|
|
443
|
+
requestAnimationFrame(() => this.#updateScrollStatus());
|
|
444
|
+
const scrollWrapper = this.tablist.parentElement;
|
|
445
|
+
this.#resizeObserver = new ResizeObserver(() => {
|
|
446
|
+
this.#updateScrollStatus();
|
|
447
|
+
});
|
|
448
|
+
this.#resizeObserver.observe(scrollWrapper);
|
|
449
|
+
}
|
|
450
|
+
#resizeObserver;
|
|
451
|
+
disconnectedCallback() {
|
|
452
|
+
super.disconnectedCallback();
|
|
453
|
+
this.#resizeObserver.disconnect();
|
|
454
|
+
}
|
|
437
455
|
#updateTabsConnotation() {
|
|
438
456
|
if (this.tabs) {
|
|
439
457
|
this.tabs.forEach((tab) => {
|
|
@@ -504,22 +522,50 @@ const getClasses = ({
|
|
|
504
522
|
`gutters-${gutters ?? "small"}`,
|
|
505
523
|
["scroll", Boolean(scrollablePanel)]
|
|
506
524
|
);
|
|
525
|
+
function setNoScrollState(scrollShadow, scrollWrapper) {
|
|
526
|
+
if (scrollWrapper.scrollWidth <= scrollWrapper.clientWidth) {
|
|
527
|
+
scrollShadow.classList.toggle("start-scroll", false);
|
|
528
|
+
scrollShadow.classList.toggle("end-scroll", false);
|
|
529
|
+
return true;
|
|
530
|
+
}
|
|
531
|
+
return false;
|
|
532
|
+
}
|
|
533
|
+
function addStartShadow(scrollShadow, scrollWrapper) {
|
|
534
|
+
scrollShadow.classList.toggle("start-scroll", scrollWrapper.scrollLeft > 0);
|
|
535
|
+
}
|
|
536
|
+
function addEndShadow(scrollShadow, scrollWrapper) {
|
|
537
|
+
scrollShadow.classList.toggle(
|
|
538
|
+
"end-scroll",
|
|
539
|
+
scrollWrapper.scrollLeft < scrollWrapper.scrollWidth - scrollWrapper.clientWidth
|
|
540
|
+
);
|
|
541
|
+
}
|
|
542
|
+
function setShadowWhenScrollTabs(_, { event }) {
|
|
543
|
+
const scrollWrapper = event.target;
|
|
544
|
+
const scrollShadow = scrollWrapper.parentElement;
|
|
545
|
+
if (setNoScrollState(scrollShadow, scrollWrapper)) {
|
|
546
|
+
return;
|
|
547
|
+
}
|
|
548
|
+
addStartShadow(scrollShadow, scrollWrapper);
|
|
549
|
+
addEndShadow(scrollShadow, scrollWrapper);
|
|
550
|
+
}
|
|
507
551
|
function TabsTemplate() {
|
|
508
552
|
return index.html`
|
|
509
553
|
<template>
|
|
510
554
|
<div class="${getClasses}">
|
|
511
|
-
<div class="
|
|
512
|
-
<div class="tablist"
|
|
513
|
-
<
|
|
514
|
-
|
|
555
|
+
<div class="scroll-shadow">
|
|
556
|
+
<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
|
|
557
|
+
<div class="tablist" role="tablist" ${ref.ref("tablist")}>
|
|
558
|
+
<slot name="tab" ${slotted.slotted("tabs")}></slot>
|
|
559
|
+
${when.when(
|
|
515
560
|
(x) => x.showActiveIndicator,
|
|
516
561
|
index.html`
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
562
|
+
<div
|
|
563
|
+
${ref.ref("activeIndicatorRef")}
|
|
564
|
+
class="active-indicator"
|
|
565
|
+
></div>
|
|
566
|
+
`
|
|
522
567
|
)}
|
|
568
|
+
</div>
|
|
523
569
|
</div>
|
|
524
570
|
</div>
|
|
525
571
|
<div class="tabpanel">
|
package/shared/definition51.js
CHANGED
|
@@ -381,7 +381,7 @@ __decorate([
|
|
|
381
381
|
], Tabs$1.prototype, "showActiveIndicator", void 0);
|
|
382
382
|
applyMixins(Tabs$1, StartEnd);
|
|
383
383
|
|
|
384
|
-
const styles = ":host{display:block}.base{
|
|
384
|
+
const styles = ":host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;inline-size:100%;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:\"\";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tablist{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;position:relative;display:grid;box-sizing:border-box;color:var(--_appearance-color-text)}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-flow:column;grid-template-columns:auto;grid-template-rows:auto auto;inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;border-bottom:1px solid var(--vvd-color-neutral-300);inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.tablist-wrapper::-webkit-scrollbar{display:none}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1/auto/auto;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;block-size:var(--_tabs-active-indicator-stroke-width);grid-column:1/auto;inline-size:calc(var(--_tabs-active-tab-inline-size) - 32px);inset-block-end:0;inset-inline-start:8px;justify-self:center;padding-inline:var(--_tabs-tablist-gutter)}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}.base:not(.orientation-vertical) .active-indicator:not(.activeIndicatorTransition){opacity:0}";
|
|
385
385
|
|
|
386
386
|
var __defProp = Object.defineProperty;
|
|
387
387
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -419,6 +419,10 @@ class Tabs extends Tabs$1 {
|
|
|
419
419
|
super.tabsChanged();
|
|
420
420
|
this.patchIndicatorStyleTransition();
|
|
421
421
|
this.#patchActiveID();
|
|
422
|
+
this.#updateScrollStatus();
|
|
423
|
+
}
|
|
424
|
+
#updateScrollStatus() {
|
|
425
|
+
this.tablist.parentElement.dispatchEvent(new Event("scroll"));
|
|
422
426
|
}
|
|
423
427
|
tabpanelsChanged() {
|
|
424
428
|
super.tabpanelsChanged();
|
|
@@ -432,6 +436,20 @@ class Tabs extends Tabs$1 {
|
|
|
432
436
|
const width = this.activetab.getBoundingClientRect().width;
|
|
433
437
|
this.activeIndicatorRef.style.setProperty(ACTIVE_TAB_WIDTH, `${width}px`);
|
|
434
438
|
}
|
|
439
|
+
connectedCallback() {
|
|
440
|
+
super.connectedCallback();
|
|
441
|
+
requestAnimationFrame(() => this.#updateScrollStatus());
|
|
442
|
+
const scrollWrapper = this.tablist.parentElement;
|
|
443
|
+
this.#resizeObserver = new ResizeObserver(() => {
|
|
444
|
+
this.#updateScrollStatus();
|
|
445
|
+
});
|
|
446
|
+
this.#resizeObserver.observe(scrollWrapper);
|
|
447
|
+
}
|
|
448
|
+
#resizeObserver;
|
|
449
|
+
disconnectedCallback() {
|
|
450
|
+
super.disconnectedCallback();
|
|
451
|
+
this.#resizeObserver.disconnect();
|
|
452
|
+
}
|
|
435
453
|
#updateTabsConnotation() {
|
|
436
454
|
if (this.tabs) {
|
|
437
455
|
this.tabs.forEach((tab) => {
|
|
@@ -502,22 +520,50 @@ const getClasses = ({
|
|
|
502
520
|
`gutters-${gutters ?? "small"}`,
|
|
503
521
|
["scroll", Boolean(scrollablePanel)]
|
|
504
522
|
);
|
|
523
|
+
function setNoScrollState(scrollShadow, scrollWrapper) {
|
|
524
|
+
if (scrollWrapper.scrollWidth <= scrollWrapper.clientWidth) {
|
|
525
|
+
scrollShadow.classList.toggle("start-scroll", false);
|
|
526
|
+
scrollShadow.classList.toggle("end-scroll", false);
|
|
527
|
+
return true;
|
|
528
|
+
}
|
|
529
|
+
return false;
|
|
530
|
+
}
|
|
531
|
+
function addStartShadow(scrollShadow, scrollWrapper) {
|
|
532
|
+
scrollShadow.classList.toggle("start-scroll", scrollWrapper.scrollLeft > 0);
|
|
533
|
+
}
|
|
534
|
+
function addEndShadow(scrollShadow, scrollWrapper) {
|
|
535
|
+
scrollShadow.classList.toggle(
|
|
536
|
+
"end-scroll",
|
|
537
|
+
scrollWrapper.scrollLeft < scrollWrapper.scrollWidth - scrollWrapper.clientWidth
|
|
538
|
+
);
|
|
539
|
+
}
|
|
540
|
+
function setShadowWhenScrollTabs(_, { event }) {
|
|
541
|
+
const scrollWrapper = event.target;
|
|
542
|
+
const scrollShadow = scrollWrapper.parentElement;
|
|
543
|
+
if (setNoScrollState(scrollShadow, scrollWrapper)) {
|
|
544
|
+
return;
|
|
545
|
+
}
|
|
546
|
+
addStartShadow(scrollShadow, scrollWrapper);
|
|
547
|
+
addEndShadow(scrollShadow, scrollWrapper);
|
|
548
|
+
}
|
|
505
549
|
function TabsTemplate() {
|
|
506
550
|
return html`
|
|
507
551
|
<template>
|
|
508
552
|
<div class="${getClasses}">
|
|
509
|
-
<div class="
|
|
510
|
-
<div class="tablist"
|
|
511
|
-
<
|
|
512
|
-
|
|
553
|
+
<div class="scroll-shadow">
|
|
554
|
+
<div class="tablist-wrapper" @scroll="${setShadowWhenScrollTabs}">
|
|
555
|
+
<div class="tablist" role="tablist" ${ref("tablist")}>
|
|
556
|
+
<slot name="tab" ${slotted("tabs")}></slot>
|
|
557
|
+
${when(
|
|
513
558
|
(x) => x.showActiveIndicator,
|
|
514
559
|
html`
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
560
|
+
<div
|
|
561
|
+
${ref("activeIndicatorRef")}
|
|
562
|
+
class="active-indicator"
|
|
563
|
+
></div>
|
|
564
|
+
`
|
|
520
565
|
)}
|
|
566
|
+
</div>
|
|
521
567
|
</div>
|
|
522
568
|
</div>
|
|
523
569
|
<div class="tabpanel">
|
package/shared/definition52.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { c as classNames } from './class-names.js';
|
|
3
3
|
|
|
4
4
|
const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}";
|
package/shared/definition53.cjs
CHANGED
|
@@ -79,7 +79,7 @@ __decorateClass([
|
|
|
79
79
|
], Tag.prototype, "selected");
|
|
80
80
|
applyMixins.applyMixins(Tag, affix.AffixIcon);
|
|
81
81
|
|
|
82
|
-
const styles = ".base
|
|
82
|
+
const styles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer}";
|
|
83
83
|
|
|
84
84
|
const getClasses = ({
|
|
85
85
|
connotation,
|
package/shared/definition53.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as iconRegistries } from './definition27.js';
|
|
3
3
|
import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
4
4
|
import { a as applyMixins } from './apply-mixins.js';
|
|
@@ -77,7 +77,7 @@ __decorateClass([
|
|
|
77
77
|
], Tag.prototype, "selected");
|
|
78
78
|
applyMixins(Tag, AffixIcon);
|
|
79
79
|
|
|
80
|
-
const styles = ".base
|
|
80
|
+
const styles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer}";
|
|
81
81
|
|
|
82
82
|
const getClasses = ({
|
|
83
83
|
connotation,
|
package/shared/definition54.cjs
CHANGED
|
@@ -2,13 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition27.cjs');
|
|
5
|
-
require('./affix.cjs');
|
|
6
|
-
const index$1 = require('./index2.cjs');
|
|
7
5
|
const Reflector = require('./Reflector.cjs');
|
|
8
6
|
const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
|
|
9
7
|
const textField = require('./text-field2.cjs');
|
|
10
8
|
const applyMixins = require('./apply-mixins.cjs');
|
|
11
9
|
const formAssociated = require('./form-associated.cjs');
|
|
10
|
+
const formElements = require('./form-elements.cjs');
|
|
12
11
|
const when = require('./when.cjs');
|
|
13
12
|
const ref = require('./ref.cjs');
|
|
14
13
|
const classNames = require('./class-names.cjs');
|
|
@@ -190,7 +189,7 @@ index.__decorate([
|
|
|
190
189
|
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
191
190
|
applyMixins.applyMixins(TextArea$1, textField.DelegatesARIATextbox);
|
|
192
191
|
|
|
193
|
-
const styles = ":host{display:inline-block}.base{
|
|
192
|
+
const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";
|
|
194
193
|
|
|
195
194
|
var __defProp = Object.defineProperty;
|
|
196
195
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -230,14 +229,14 @@ __decorateClass([
|
|
|
230
229
|
index.attr
|
|
231
230
|
], TextArea.prototype, "wrap", 2);
|
|
232
231
|
TextArea = __decorateClass([
|
|
233
|
-
|
|
234
|
-
|
|
232
|
+
formElements.errorText,
|
|
233
|
+
formElements.formElements
|
|
235
234
|
], TextArea);
|
|
236
235
|
applyMixinsWithObservables.applyMixinsWithObservables(
|
|
237
236
|
TextArea,
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
237
|
+
formElements.FormElementCharCount,
|
|
238
|
+
formElements.FormElementHelperText,
|
|
239
|
+
formElements.FormElementSuccessText
|
|
241
240
|
);
|
|
242
241
|
|
|
243
242
|
const getClasses = ({
|
|
@@ -307,7 +306,7 @@ const TextAreaTemplate = (context) => {
|
|
|
307
306
|
${ref.ref("control")}
|
|
308
307
|
>
|
|
309
308
|
</textarea>
|
|
310
|
-
${
|
|
309
|
+
${formElements.getFeedbackTemplate(context)}
|
|
311
310
|
</div>
|
|
312
311
|
`;
|
|
313
312
|
};
|
package/shared/definition54.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as iconRegistries } from './definition27.js';
|
|
3
|
-
import './affix.js';
|
|
4
|
-
import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
|
|
5
3
|
import { R as Reflector } from './Reflector.js';
|
|
6
4
|
import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
|
|
7
5
|
import { D as DelegatesARIATextbox } from './text-field2.js';
|
|
8
6
|
import { a as applyMixins } from './apply-mixins.js';
|
|
9
7
|
import { F as FormAssociated } from './form-associated.js';
|
|
8
|
+
import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './form-elements.js';
|
|
10
9
|
import { w as when } from './when.js';
|
|
11
10
|
import { r as ref } from './ref.js';
|
|
12
11
|
import { c as classNames } from './class-names.js';
|
|
@@ -188,7 +187,7 @@ __decorate([
|
|
|
188
187
|
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
189
188
|
applyMixins(TextArea$1, DelegatesARIATextbox);
|
|
190
189
|
|
|
191
|
-
const styles = ":host{display:inline-block}.base{
|
|
190
|
+
const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";
|
|
192
191
|
|
|
193
192
|
var __defProp = Object.defineProperty;
|
|
194
193
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition55.cjs
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
const index = require('./index.cjs');
|
|
4
4
|
const definition = require('./definition27.cjs');
|
|
5
|
-
const affix = require('./affix.cjs');
|
|
6
|
-
const index$1 = require('./index2.cjs');
|
|
7
5
|
const Reflector = require('./Reflector.cjs');
|
|
8
6
|
const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
|
|
9
7
|
const icon = require('./icon.cjs');
|
|
10
8
|
const textField = require('./text-field2.cjs');
|
|
9
|
+
const formElements = require('./form-elements.cjs');
|
|
10
|
+
const affix = require('./affix.cjs');
|
|
11
11
|
const textField$1 = require('./text-field.cjs');
|
|
12
12
|
const when = require('./when.cjs');
|
|
13
13
|
const slotted = require('./slotted.cjs');
|
|
@@ -298,15 +298,15 @@ __decorateClass([
|
|
|
298
298
|
index.observable
|
|
299
299
|
], exports.TextField.prototype, "leadingActionItemsSlottedContent", 2);
|
|
300
300
|
exports.TextField = __decorateClass([
|
|
301
|
-
|
|
302
|
-
|
|
301
|
+
formElements.errorText,
|
|
302
|
+
formElements.formElements
|
|
303
303
|
], exports.TextField);
|
|
304
304
|
applyMixinsWithObservables.applyMixinsWithObservables(
|
|
305
305
|
exports.TextField,
|
|
306
306
|
affix.AffixIcon,
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
307
|
+
formElements.FormElementCharCount,
|
|
308
|
+
formElements.FormElementHelperText,
|
|
309
|
+
formElements.FormElementSuccessText
|
|
310
310
|
);
|
|
311
311
|
|
|
312
312
|
const getStateClasses = ({
|
|
@@ -368,7 +368,7 @@ const TextfieldTemplate = (context) => {
|
|
|
368
368
|
></slot>
|
|
369
369
|
</div>
|
|
370
370
|
</div>
|
|
371
|
-
${
|
|
371
|
+
${formElements.getFeedbackTemplate(context)}
|
|
372
372
|
</div>
|
|
373
373
|
<slot name="_mirrored-helper-text"></slot>`;
|
|
374
374
|
};
|
package/shared/definition55.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { a as attr, o as observable, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { a as iconRegistries } from './definition27.js';
|
|
3
|
-
import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
|
|
4
|
-
import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
|
|
5
3
|
import { R as Reflector } from './Reflector.js';
|
|
6
4
|
import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
|
|
7
5
|
import { m as memoizeWith } from './icon.js';
|
|
8
6
|
import { T as TextField$1 } from './text-field2.js';
|
|
7
|
+
import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './form-elements.js';
|
|
8
|
+
import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
|
|
9
9
|
import { s as styles } from './text-field.js';
|
|
10
10
|
import { w as when } from './when.js';
|
|
11
11
|
import { s as slotted } from './slotted.js';
|