@vonage/vivid 5.25.0 → 5.28.0

package/bundled/definition10.js

@@ -1,79 +1,34 @@
-import { t as e } from "./localized.js";
-import { M as t, d as n, m as r, p as i, t as a, u as o } from "./vivid-element.js";
-import { t as s } from "./when.js";
-import { t as c } from "./decorate.js";
-import { t as l } from "./class-names.js";
-import { i as u, t as d } from "./definition8.js";
-import { n as f, t as p } from "./anchored.js";
-import { t as m } from "./dialog.js";
-//#region src/lib/toggletip/toggletip.scss?inline
-var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}", g = class extends e(p(a)) {
+import { d as e, m as t, p as n, t as r, u as i } from "./vivid-element.js";
+import { t as a } from "./decorate.js";
+import { t as o } from "./class-names.js";
+import { t as s } from "./definition2.js";
+import { t as c } from "./icon.js";
+import { n as l, r as u } from "./definition9.js";
+//#region src/lib/contextual-help/contextual-help.ts
+var d = class extends r {
 	constructor(...e) {
-		super(...e), this.#e = null, this.alternate = !1, this.placement = "right", this.open = !1, this.#i = () => {
-			this.open || t.enqueue(() => this.open = !0);
-		}, this.#o = (e) => {
-			let t = !this.contains(e.target), n = this._anchorEl?.contains(e.target);
-			(t || n) && (this.open = !1);
-		}, this.#s = (e) => {
-			/* v8 ignore else -- @preserve */
-			e.key === "Escape" && (this.open = !1);
-		};
+		super(...e), this.placement = "right";
 	}
-	#e;
-	openChanged(e, t) {
-		e !== void 0 && (t ? this.setAttribute("role", "status") : this.removeAttribute("role"), this.#a(), this._anchorEl && this.#n(this._anchorEl));
-	}
-	connectedCallback() {
-		super.connectedCallback(), this.#a();
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this.#a();
-	}
-	_anchorElChanged(e, t) {
-		e && this.#r(e), t && this.#t(t);
-	}
-	#t(e) {
-		e.addEventListener("click", this.#i, !0), this.#e = e.ariaLabel, e.ariaLabel = this.locale.toggletip.anchorLabel(e.ariaLabel || ""), this.#n(e);
-	}
-	#n(e) {
-		e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
-	}
-	#r(e) {
-		/* v8 ignore else -- @preserve */
-		e.removeEventListener("click", this.#i, !0), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.ariaLabel &&= this.#e;
-	}
-	#i;
-	#a() {
-		document.removeEventListener("click", this.#o), document.removeEventListener("keydown", this.#s), this.open && this.isConnected && (document.addEventListener("click", this.#o), document.addEventListener("keydown", this.#s));
-	}
-	#o;
-	#s;
 };
-c([r], g.prototype, "headline", void 0), c([r({ attribute: "text-secondary" })], g.prototype, "textSecondary", void 0), c([r({ mode: "boolean" })], g.prototype, "alternate", void 0), c([r({ mode: "fromView" })], g.prototype, "placement", void 0), c([r({ mode: "boolean" })], g.prototype, "open", void 0);
+a([t({ mode: "fromView" })], d.prototype, "placement", void 0);
 //#endregion
-//#region src/lib/toggletip/toggletip.template.ts
-var _ = (e) => l("control"), v = o("toggletip", g, (e) => {
-	let t = e.tagFor(u);
-	return i`
-		${f()}
+//#region src/lib/contextual-help/contextual-help.template.ts
+var f = (e) => o("control", "connotation-accent", "appearance-ghost", "with-idle", "with-hover", "with-active"), p = i("contextual-help", d, (e) => {
+	let t = e.tagFor(u), r = e.tagFor(c);
+	return n`
 		<${t}
-			@keydown="${(e, { event: t }) => !(e.open && m(t))}"
-			class="${_}"
-			arrow
-			:anchor="${(e) => e._anchorEl}"
-			:open="${(e) => e.open}"
-			?alternate="${(e) => !e.alternate}"
-			placement="${(e) => e.placement}"
+			class="base"
 			exportparts="vvd-theme-alternate"
+			placement="${(e) => e.placement}"
 		>
-			<div class="content-wrapper">
-				${s((e) => e.headline, i`<h2 class="headline">${(e) => e.headline}</h2>`)}
-				${s((e) => e.textSecondary, i`<p class="text-secondary">${(e) => e.textSecondary}</p>`)}
-				<slot></slot>
-				<div class="action-items"><slot name="action-items"></slot></div>
-			</div>
+			<button class="${f}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${r} name="help-solid"></${r}>
+        </slot>
+			</button>
+			<slot></slot>
 		</${t}>
 	`;
-}, [d], { styles: h }), y = n(v);
+}, [s, l], { styles: ".control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = e(p);
 //#endregion
-export { v as n, g as r, y as t };
+export { m as n, p as t };

package/bundled/definition11.cjs

@@ -1,10 +1,74 @@
-const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./class-names.cjs`),r=require(`./definition3.cjs`),i=require(`./icon.cjs`),a=require(`./definition10.cjs`);var o=class extends e.t{constructor(...e){super(...e),this.placement=`right`}};t.t([e.m({mode:`fromView`})],o.prototype,`placement`,void 0);var s=e=>n.t(`control`),c=e.u(`contextual-help`,o,t=>{let n=t.tagFor(a.r),r=t.tagFor(i.t);return e.p`
-		<${n} class="base" exportparts="vvd-theme-alternate">
-			<button class="${s}" slot="anchor">
-        <slot name="icon" slot="icon">
-          <${r} name="help-solid"></${r}>
-        </slot>
-			</button>
-			<slot></slot>
-		</${n}>
-	`},[r.t,a.n],{styles:`.control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}`}),l=e.d(c);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return c}});
+const e=require("./vivid-element.cjs"),t=require("./slotted.cjs"),n=require("./ref.cjs"),r=require("./when.cjs"),i=require("./definition.cjs"),a=require("./decorate.cjs"),o=require("./class-names.cjs"),s=require("./definition2.cjs"),c=require("./affix.cjs"),l=require("./delegates-aria.cjs"),u=require("./component-enum.cjs"),d=require("./form-associated.cjs"),f=require("./render-in-light-dom.cjs"),p=require("./feedback-message.cjs"),m=require("./definition10.cjs"),h=require("./form-element.cjs"),g=require("./char-count.cjs"),_=require("./with-contextual-help.cjs"),v=require("./with-error-text.cjs"),y=require("./with-success-text.cjs"),b=require("./mixins.cjs"),x=require("./text-field.cjs");var S=u.t([`fieldset`,`ghost`],`fieldset`),C={email:`email`,password:`password`,search:`search`,tel:`tel`,text:`text`,url:`url`},w=new e.w([`
+	._vvd-3-text-field-safari-workaround::placeholder {
+		opacity: 1 !important;
+		-webkit-text-fill-color: var(--_low-ink-color) !important;
+	}
+`]),T=e=>{let t=e.getRootNode();w.isAttachedTo(t)||w.addStylesTo(t)},E=class extends _.t(b.n(g.t(v.t(y.t(h.t(c.t(l.t(d.n(e.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.type=C.text,this.#e=f.n()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute(`list`,this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(e,t){super.valueChanged(e,t),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(e){this.value=this.control.value,e.stopPropagation(),this.$emit(`input`)}handleChange(){this.$emit(`change`)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,this.type),this.validate(),this.autofocus&&e.M.enqueue(()=>{this.focus()}),this._updateControlValueIfNeeded(),T(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}};a.t([e.m({attribute:`readonly`,mode:`boolean`})],E.prototype,`readOnly`,void 0),a.t([e.m({mode:`boolean`})],E.prototype,`autofocus`,void 0),a.t([e.m],E.prototype,`placeholder`,void 0),a.t([e.m],E.prototype,`type`,void 0),a.t([e.m],E.prototype,`list`,void 0),a.t([e.m({converter:e.h})],E.prototype,`maxlength`,void 0),a.t([e.m({converter:e.h})],E.prototype,`minlength`,void 0),a.t([e.m],E.prototype,`pattern`,void 0),a.t([e.m({converter:e.h})],E.prototype,`size`,void 0),a.t([e.m({mode:`boolean`})],E.prototype,`spellcheck`,void 0),a.t([e.m],E.prototype,`appearance`,void 0),a.t([e.m],E.prototype,`shape`,void 0),a.t([e.m],E.prototype,`autoComplete`,void 0),a.t([e.m()],E.prototype,`scale`,void 0),a.t([e.m({attribute:`inputmode`})],E.prototype,`inputMode`,void 0),a.t([e.A],E.prototype,`actionItemsSlottedContent`,void 0),a.t([e.A],E.prototype,`leadingActionItemsSlottedContent`,void 0);var D=e=>`vvd-text-field-control-${e}`,O=e.u(`text-field`,E,i=>{let a=c.a(i);return e.p`
+		<div
+			class="base ${e=>o.t(`connotation-accent`,`appearance-${S.parse(e.appearance)}`,`with-idle`,`with-hover`,`with-disabled`,`with-readonly`,`with-error`,`with-success`,[`error`,!!e.errorValidationMessage],[`disabled`,e.disabled],[`has-value`,!!e.value],[`readonly`,e.readOnly],[`placeholder`,!!e.placeholder],[`shape-${e.shape}`,!!e.shape],[`no-label`,!e.label],[`has-icon`,!!e.icon],[`success`,!!e.successText],[`action-items`,!!e.actionItemsSlottedContent?.length],[`leading-action-items`,!!e.leadingActionItemsSlottedContent?.length],[`no-leading`,!(e.leadingActionItemsSlottedContent?.length||e.icon)],[`size-${e.scale}`,!!e.scale])}"
+		>
+			${r.t(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(i))}
+			<div
+				class="label-wrapper"
+				?hidden=${e=>!e.label&&!e._hasContextualHelp}
+			>
+				<slot class="label" name="_label"></slot>
+				<slot
+					name="contextual-help"
+					${t.t(`_contextualHelpSlottedContent`)}
+				></slot>
+			</div>
+			${f.t(e.p`
+				${r.t(e=>e.label,e.p`
+						<label slot="_label" for="${e=>D(e._uniqueId)}">
+							${e=>e.label}
+						</label>
+					`)}
+			`)}
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${t.t(`leadingActionItemsSlottedContent`)}
+					></slot>
+					${e=>a(e.icon)}
+				</div>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+					${f.t(e.p`<input
+							slot="_control"
+							id="${e=>D(e._uniqueId)}"
+							class="_vvd-3-text-field-safari-workaround"
+							@input="${(e,t)=>e.handleTextInput(t.event)}"
+							@change="${e=>e.handleChange()}"
+							@blur="${e=>{e.$emit(`blur`,void 0,{bubbles:!1})}}"
+							@focus="${e=>{e.$emit(`focus`,void 0,{bubbles:!1})}}"
+							?autofocus="${e=>e.autofocus}"
+							?disabled="${e=>e.disabled}"
+							?readonly="${e=>e.readOnly}"
+							?required="${e=>e.required}"
+							?spellcheck="${e=>e.spellcheck}"
+							list="${e=>e.list}"
+							maxlength="${e=>e.maxlength}"
+							minlength="${e=>e.minlength}"
+							pattern="${e=>e.pattern}"
+							placeholder="${e=>e.placeholder}"
+							size="${e=>e.size}"
+							autocomplete="${e=>e.autoComplete}"
+							type="${e=>e.type}"
+							inputmode="${e=>e.inputMode}"
+							value="${e=>e.initialValue}"
+							${l.n({ariaDescribedBy:e=>`${e._feedbackDescribedBy} ${e.charCount&&e.maxlength?e._charCountDescribedBy:null}`})}
+							${n.t(`control`)}
+						/>`)}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${t.t(`actionItemsSlottedContent`)}
+					></slot>
+				</div>
+			</div>
+			${e=>e._getFeedbackTemplate(i)}
+		</div>
+	`},[s.t,p.n,i.n,m.t],{styles:x.t,shadowOptions:{delegatesFocus:!0}}),k=e.d(O);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return k}});

package/bundled/definition11.js

@@ -1,30 +1,200 @@
-import { d as e, m as t, p as n, t as r, u as i } from "./vivid-element.js";
-import { t as a } from "./decorate.js";
-import { t as o } from "./class-names.js";
-import { t as s } from "./definition3.js";
-import { t as c } from "./icon.js";
-import { n as l, r as u } from "./definition10.js";
-//#region src/lib/contextual-help/contextual-help.ts
-var d = class extends r {
+import { A as e, M as t, d as n, h as r, m as i, p as a, t as o, u as s, w as c } from "./vivid-element.js";
+import { t as l } from "./slotted.js";
+import { t as u } from "./ref.js";
+import { t as d } from "./when.js";
+import { n as f } from "./definition.js";
+import { t as p } from "./decorate.js";
+import { t as m } from "./class-names.js";
+import { t as h } from "./definition2.js";
+import { a as g, t as _ } from "./affix.js";
+import { n as v, t as y } from "./delegates-aria.js";
+import { t as b } from "./component-enum.js";
+import { n as x } from "./form-associated.js";
+import { n as S, t as C } from "./render-in-light-dom.js";
+import { n as w } from "./feedback-message.js";
+import { t as T } from "./definition10.js";
+import { t as E } from "./form-element.js";
+import { t as D } from "./char-count.js";
+import { t as O } from "./with-contextual-help.js";
+import { t as k } from "./with-error-text.js";
+import { t as A } from "./with-success-text.js";
+import { n as j } from "./mixins.js";
+import { t as M } from "./text-field.js";
+//#region src/lib/text-field/text-field.ts
+var N = b(["fieldset", "ghost"], "fieldset"), P = {
+	email: "email",
+	password: "password",
+	search: "search",
+	tel: "tel",
+	text: "text",
+	url: "url"
+}, F = new c(["\n	._vvd-3-text-field-safari-workaround::placeholder {\n		opacity: 1 !important;\n		-webkit-text-fill-color: var(--_low-ink-color) !important;\n	}\n"]), I = (e) => {
+	let t = e.getRootNode();
+	F.isAttachedTo(t) || F.addStylesTo(t);
+}, L = class extends O(j(D(k(A(E(_(y(x(o))))))))) {
 	constructor(...e) {
-		super(...e), this.placement = "right";
+		super(...e), this.proxy = document.createElement("input"), this.type = P.text, this.#e = S();
+	}
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly, this.validate());
+	}
+	autofocusChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.autofocus = this.autofocus, this.validate());
+	}
+	placeholderChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
+	}
+	typeChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.type = this.type, this.validate());
+	}
+	listChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.setAttribute("list", this.list), this.validate());
+	}
+	maxlengthChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.maxLength = this.maxlength, this.validate());
+	}
+	minlengthChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.minLength = this.minlength, this.validate());
+	}
+	patternChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.pattern = this.pattern, this.validate());
+	}
+	sizeChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.size = this.size);
+	}
+	spellcheckChanged() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLInputElement && (this.proxy.spellcheck = this.spellcheck);
+	}
+	valueChanged(e, t) {
+		super.valueChanged(e, t), this._updateControlValueIfNeeded(), this.charCount && this.maxlength && this._updateCharCountRemaining();
+	}
+	_updateControlValueIfNeeded() {
+		this.control && this.control.value !== this.value && (this.control.value = this.value);
+	}
+	select() {
+		this.control.select();
+	}
+	handleTextInput(e) {
+		this.value = this.control.value, e.stopPropagation(), this.$emit("input");
+	}
+	handleChange() {
+		this.$emit("change");
+	}
+	validate() {
+		super.validate(this.control);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.validate(), this.autofocus && t.enqueue(() => {
+			this.focus();
+		}), this._updateControlValueIfNeeded(), I(this), this._renderCharCountRemaining();
+	}
+	focus() {
+		this.control?.focus();
+	}
+	#e;
+	get _uniqueId() {
+		return this.id || this.#e;
 	}
 };
-a([t({ mode: "fromView" })], d.prototype, "placement", void 0);
+p([i({
+	attribute: "readonly",
+	mode: "boolean"
+})], L.prototype, "readOnly", void 0), p([i({ mode: "boolean" })], L.prototype, "autofocus", void 0), p([i], L.prototype, "placeholder", void 0), p([i], L.prototype, "type", void 0), p([i], L.prototype, "list", void 0), p([i({ converter: r })], L.prototype, "maxlength", void 0), p([i({ converter: r })], L.prototype, "minlength", void 0), p([i], L.prototype, "pattern", void 0), p([i({ converter: r })], L.prototype, "size", void 0), p([i({ mode: "boolean" })], L.prototype, "spellcheck", void 0), p([i], L.prototype, "appearance", void 0), p([i], L.prototype, "shape", void 0), p([i], L.prototype, "autoComplete", void 0), p([i()], L.prototype, "scale", void 0), p([i({ attribute: "inputmode" })], L.prototype, "inputMode", void 0), p([e], L.prototype, "actionItemsSlottedContent", void 0), p([e], L.prototype, "leadingActionItemsSlottedContent", void 0);
 //#endregion
-//#region src/lib/contextual-help/contextual-help.template.ts
-var f = (e) => o("control"), p = i("contextual-help", d, (e) => {
-	let t = e.tagFor(u), r = e.tagFor(c);
-	return n`
-		<${t} class="base" exportparts="vvd-theme-alternate">
-			<button class="${f}" slot="anchor">
-        <slot name="icon" slot="icon">
-          <${r} name="help-solid"></${r}>
-        </slot>
-			</button>
-			<slot></slot>
-		</${t}>
+//#region src/lib/text-field/text-field.template.ts
+var R = (e) => `vvd-text-field-control-${e}`, z = s("text-field", L, (e) => {
+	let t = g(e);
+	return a`
+		<div
+			class="base ${(e) => m("connotation-accent", `appearance-${N.parse(e.appearance)}`, "with-idle", "with-hover", "with-disabled", "with-readonly", "with-error", "with-success", ["error", !!e.errorValidationMessage], ["disabled", e.disabled], ["has-value", !!e.value], ["readonly", e.readOnly], ["placeholder", !!e.placeholder], [`shape-${e.shape}`, !!e.shape], ["no-label", !e.label], ["has-icon", !!e.icon], ["success", !!e.successText], ["action-items", !!e.actionItemsSlottedContent?.length], ["leading-action-items", !!e.leadingActionItemsSlottedContent?.length], ["no-leading", !(e.leadingActionItemsSlottedContent?.length || e.icon)], [`size-${e.scale}`, !!e.scale])}"
+		>
+			${d((e) => e.charCount && e.maxlength, (t) => t._getCharCountTemplate(e))}
+			<div
+				class="label-wrapper"
+				?hidden=${(e) => !e.label && !e._hasContextualHelp}
+			>
+				<slot class="label" name="_label"></slot>
+				<slot
+					name="contextual-help"
+					${l("_contextualHelpSlottedContent")}
+				></slot>
+			</div>
+			${C(a`
+				${d((e) => e.label, a`
+						<label slot="_label" for="${(e) => R(e._uniqueId)}">
+							${(e) => e.label}
+						</label>
+					`)}
+			`)}
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${l("leadingActionItemsSlottedContent")}
+					></slot>
+					${(e) => t(e.icon)}
+				</div>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+					${C(a`<input
+							slot="_control"
+							id="${(e) => R(e._uniqueId)}"
+							class="_vvd-3-text-field-safari-workaround"
+							@input="${(e, t) => e.handleTextInput(t.event)}"
+							@change="${(e) => e.handleChange()}"
+							@blur="${(e) => {
+		e.$emit("blur", void 0, { bubbles: !1 });
+	}}"
+							@focus="${(e) => {
+		e.$emit("focus", void 0, { bubbles: !1 });
+	}}"
+							?autofocus="${(e) => e.autofocus}"
+							?disabled="${(e) => e.disabled}"
+							?readonly="${(e) => e.readOnly}"
+							?required="${(e) => e.required}"
+							?spellcheck="${(e) => e.spellcheck}"
+							list="${(e) => e.list}"
+							maxlength="${(e) => e.maxlength}"
+							minlength="${(e) => e.minlength}"
+							pattern="${(e) => e.pattern}"
+							placeholder="${(e) => e.placeholder}"
+							size="${(e) => e.size}"
+							autocomplete="${(e) => e.autoComplete}"
+							type="${(e) => e.type}"
+							inputmode="${(e) => e.inputMode}"
+							value="${(e) => e.initialValue}"
+							${v({ ariaDescribedBy: (e) => `${e._feedbackDescribedBy} ${e.charCount && e.maxlength ? e._charCountDescribedBy : null}` })}
+							${u("control")}
+						/>`)}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${l("actionItemsSlottedContent")}
+					></slot>
+				</div>
+			</div>
+			${(t) => t._getFeedbackTemplate(e)}
+		</div>
 	`;
-}, [s, l], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = e(p);
+}, [
+	h,
+	w,
+	f,
+	T
+], {
+	styles: M,
+	shadowOptions: { delegatesFocus: !0 }
+}), B = n(z);
 //#endregion
-export { m as n, p as t };
+export { z as n, L as r, B as t };

package/bundled/definition12.cjs

@@ -1,74 +1,22 @@
-const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./definition3.cjs`),c=require(`./affix.cjs`),l=require(`./delegates-aria.cjs`),u=require(`./form-associated.cjs`),d=require(`./render-in-light-dom.cjs`),f=require(`./mixins.cjs`),p=require(`./definition11.cjs`),m=require(`./form-element.cjs`),h=require(`./char-count.cjs`),g=require(`./with-contextual-help.cjs`),_=require(`./with-error-text.cjs`),v=require(`./with-success-text.cjs`),y=require(`./text-field.cjs`);var b={email:`email`,password:`password`,search:`search`,tel:`tel`,text:`text`,url:`url`},x=new e.w([`
-	._vvd-3-text-field-safari-workaround::placeholder {
-		opacity: 1 !important;
-		-webkit-text-fill-color: var(--_low-ink-color) !important;
-	}
-`]),S=e=>{let t=e.getRootNode();x.isAttachedTo(t)||x.addStylesTo(t)},C=class extends g.t(f.n(h.t(_.t(v.t(m.t(c.t(l.t(u.n(e.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.type=b.text,this.#e=d.n()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute(`list`,this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(e,t){super.valueChanged(e,t),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(e){this.value=this.control.value,e.stopPropagation(),this.$emit(`input`)}handleChange(){this.$emit(`change`)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,this.type),this.validate(),this.autofocus&&e.M.enqueue(()=>{this.focus()}),this._updateControlValueIfNeeded(),S(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}};a.t([e.m({attribute:`readonly`,mode:`boolean`})],C.prototype,`readOnly`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`autofocus`,void 0),a.t([e.m],C.prototype,`placeholder`,void 0),a.t([e.m],C.prototype,`type`,void 0),a.t([e.m],C.prototype,`list`,void 0),a.t([e.m({converter:e.h})],C.prototype,`maxlength`,void 0),a.t([e.m({converter:e.h})],C.prototype,`minlength`,void 0),a.t([e.m],C.prototype,`pattern`,void 0),a.t([e.m({converter:e.h})],C.prototype,`size`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`spellcheck`,void 0),a.t([e.m],C.prototype,`appearance`,void 0),a.t([e.m],C.prototype,`shape`,void 0),a.t([e.m],C.prototype,`autoComplete`,void 0),a.t([e.m()],C.prototype,`scale`,void 0),a.t([e.m({attribute:`inputmode`})],C.prototype,`inputMode`,void 0),a.t([e.A],C.prototype,`actionItemsSlottedContent`,void 0),a.t([e.A],C.prototype,`leadingActionItemsSlottedContent`,void 0);var w=e=>`vvd-text-field-control-${e}`,T=e.u(`text-field`,C,i=>{let a=c.a(i);return e.p`
-		<div
-			class="base ${e=>o.t([`error`,!!e.errorValidationMessage],[`disabled`,e.disabled],[`has-value`,!!e.value],[`readonly`,e.readOnly],[`placeholder`,!!e.placeholder],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape],[`no-label`,!e.label],[`has-icon`,!!e.icon],[`success`,!!e.successText],[`action-items`,!!e.actionItemsSlottedContent?.length],[`leading-action-items`,!!e.leadingActionItemsSlottedContent?.length],[`no-leading`,!(e.leadingActionItemsSlottedContent?.length||e.icon)],[`size-${e.scale}`,!!e.scale])}"
+const e=require("./localized.cjs"),t=require("./vivid-element.cjs"),n=require("./decorate.cjs"),r=require("./class-names.cjs"),i=require("./definition2.cjs"),a=require("./affix.cjs"),o=require("./host-semantics.cjs"),s=require("./component-enum.cjs");var c=`: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){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);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);vertical-align:middle;white-space:nowrap;user-select:none;min-block-size:40px;display:flex;position:relative}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - 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]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}`,l=s.t([`accent`,`cta`],`accent`),u=class extends o.t(a.n(e.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.tabIndex=`-1`,this.active=!1}_handleCloseClick(e){e.stopImmediatePropagation(),this.$emit(`close`)}_onKeyDown(e){return!this.removable||e.key!==`Delete`||(e.stopImmediatePropagation(),this.$emit(`close`),!1)}};n.t([t.m({mode:`boolean`})],u.prototype,`disabled`,void 0),n.t([t.m],u.prototype,`connotation`,void 0),n.t([t.m],u.prototype,`shape`,void 0),n.t([t.m],u.prototype,`label`,void 0),n.t([t.m({mode:`boolean`})],u.prototype,`removable`,void 0),n.t([t.m({mode:`fromView`})],u.prototype,`tabIndex`,void 0),n.t([t.A],u.prototype,`active`,void 0);function d(e){let n=a.a(e);return t.p`<button
+		aria-label="${e=>e.locale.tab.dismissButtonLabel}"
+		class="close"
+		id="close-btn"
+		@click="${(e,t)=>e._handleCloseClick(t.event)}"
+	>
+		${()=>n(`close-line`,a.i.Span)}
+	</button>`}var f=t.u(`tab`,u,e=>{let n=a.a(e);return t.p`
+		<template
+			slot="tab"
+			?active="${e=>e.active}"
+			${o.n({role:`tab`,ariaDisabled:e=>e.disabled,ariaSelected:e=>e.active})}
+			@keydown="${(e,t)=>e._onKeyDown(t.event)}"
 		>
-			${r.t(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(i))}
 			<div
-				class="label-wrapper"
-				?hidden=${e=>!e.label&&!e._hasContextualHelp}
+				class="${e=>r.t(`base`,`connotation-${e.active?l.parse(e.connotation):`accent`}`,`appearance-ghost`,`with-idle`,`with-hover`,`with-active`,`with-disabled`,[`shape-${e.shape}`,!!e.shape],[`disabled`,e.disabled],[`selected`,e.active],[`icon-trailing`,e.iconTrailing],[`removable`,e.removable])}"
 			>
-				<slot class="label" name="_label"></slot>
-				<slot
-					name="contextual-help"
-					${t.t(`_contextualHelpSlottedContent`)}
-				></slot>
+				${e=>n(e.icon,a.i.Slot)} ${e=>e.label}
+				${t=>t.removable?d(e):null}
 			</div>
-			${d.t(e.p`
-				${r.t(e=>e.label,e.p`
-						<label slot="_label" for="${e=>w(e._uniqueId)}">
-							${e=>e.label}
-						</label>
-					`)}
-			`)}
-			<div class="fieldset">
-				<div class="leading-items-wrapper">
-					<slot
-						name="leading-action-items"
-						${t.t(`leadingActionItemsSlottedContent`)}
-					></slot>
-					${e=>a(e.icon)}
-				</div>
-				<div class="wrapper">
-					<slot class="control" name="_control"></slot>
-					${d.t(e.p`<input
-							slot="_control"
-							id="${e=>w(e._uniqueId)}"
-							class="_vvd-3-text-field-safari-workaround"
-							@input="${(e,t)=>e.handleTextInput(t.event)}"
-							@change="${e=>e.handleChange()}"
-							@blur="${e=>{e.$emit(`blur`,void 0,{bubbles:!1})}}"
-							@focus="${e=>{e.$emit(`focus`,void 0,{bubbles:!1})}}"
-							?autofocus="${e=>e.autofocus}"
-							?disabled="${e=>e.disabled}"
-							?readonly="${e=>e.readOnly}"
-							?required="${e=>e.required}"
-							?spellcheck="${e=>e.spellcheck}"
-							list="${e=>e.list}"
-							maxlength="${e=>e.maxlength}"
-							minlength="${e=>e.minlength}"
-							pattern="${e=>e.pattern}"
-							placeholder="${e=>e.placeholder}"
-							size="${e=>e.size}"
-							autocomplete="${e=>e.autoComplete}"
-							type="${e=>e.type}"
-							inputmode="${e=>e.inputMode}"
-							value="${e=>e.initialValue}"
-							${l.n({ariaDescribedBy:e=>`${e._feedbackDescribedBy} ${e.charCount&&e.maxlength?e._charCountDescribedBy:null}`})}
-							${n.t(`control`)}
-						/>`)}
-				</div>
-				<div class="action-items-wrapper">
-					<slot
-						name="action-items"
-						${t.t(`actionItemsSlottedContent`)}
-					></slot>
-				</div>
-			</div>
-			${e=>e._getFeedbackTemplate(i)}
-		</div>
-	`},[s.t,f.r,i.n,p.t],{styles:y.t,shadowOptions:{delegatesFocus:!0}}),E=e.d(T);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});
+		</template>
+	`},[i.t],{styles:c}),p=t.d(f);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});