@vonage/vivid 5.15.1 → 5.17.0

package/bundled/definition12.cjs

@@ -1,19 +1,73 @@
-"use strict";const v=require("./definition2.cjs"),t=require("./vivid-element.cjs"),p=require("./affix.cjs"),h=require("./host-semantics.cjs"),f=require("./dom.cjs"),l=require("./when.cjs"),m=require("./class-names.cjs");var x=Object.defineProperty,_=Object.getOwnPropertyDescriptor,n=(e,o,i,a)=>{for(var c=a>1?void 0:a?_(o,i):o,s=e.length-1,d;s>=0;s--)(d=e[s])&&(c=(a?d(o,i,c):d(c))||c);return a&&c&&x(o,i,c),c};function u(e){return f.isHTMLElement(e)&&(e.getAttribute("role")==="option"||e instanceof HTMLOptionElement||e instanceof r)}class r extends h.HostSemantics(p.AffixIconWithTrailing(t.VividElement)){constructor(o,i,a,c){super(),this.defaultSelected=!1,this.dirtySelected=!1,this.value="",this._highlighted=!1,this._displayCheckmark=!1,this._vvdSearchText="",this._isNotMatching=!1,o&&(this.text=o),i&&(this.value=i),a&&(this.defaultSelected=a),c&&(this.selected=c),this.proxy=new Option(this.text,this.value,this.defaultSelected,this.selected),this.proxy.disabled=this.disabled}defaultSelectedChanged(){this.dirtySelected||(this.selected=this.defaultSelected,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.defaultSelected)),this.proxy instanceof HTMLOptionElement&&(this.proxy.defaultSelected=this.defaultSelected)}disabledChanged(){this.proxy instanceof HTMLOptionElement&&(this.proxy.disabled=this.disabled)}get selectedAttribute(){return this.defaultSelected}set selectedAttribute(o){this.defaultSelected=o}selectedChanged(){this.dirtySelected||(this.dirtySelected=!0),this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.selected)}valueChanged(){if(typeof this.value!="string"){this.value="";return}this.proxy instanceof HTMLOptionElement&&(this.proxy.value=this.value)}get label(){return this._label??this.text}set label(o){this._label=o}set text(o){this._text=o}get text(){return this._text??""}_getAccessibleName(){return this.ariaLabel||`${this.text}${this.textSecondary?` ${this.textSecondary}`:""}`}get form(){return null}get _hasMatchedText(){return!!(this.matchedText??this._vvdSearchText)}get _matchedRange(){const o=this.matchedText??this._vvdSearchText;if(o){const i=this.text.toLowerCase().indexOf(o.toLowerCase());return i===-1?{from:0,to:0}:{from:i,to:i+o.length}}return{from:0,to:0}}connectedCallback(){super.connectedCallback(),this.dirtySelected||(this.selected=this.defaultSelected,this.dirtySelected=!1)}}n([t.attr({converter:{fromView:e=>{if(e===!0||e==="true")return!0;if(e===!1||e==="false")return!1},toView:e=>e}})],r.prototype,"checked",2);n([t.attr({attribute:"selected",mode:"boolean"})],r.prototype,"defaultSelected",2);n([t.attr({mode:"boolean"})],r.prototype,"disabled",2);n([t.attr({attribute:"current-selected",mode:"boolean"})],r.prototype,"selected",2);n([t.attr({attribute:"value"})],r.prototype,"value",2);n([t.attr({attribute:"label"})],r.prototype,"_label",2);n([t.attr({attribute:"text"})],r.prototype,"_text",2);n([t.attr({attribute:"text-secondary"})],r.prototype,"textSecondary",2);n([t.observable],r.prototype,"_highlighted",2);n([t.observable],r.prototype,"_displayCheckmark",2);n([t.attr({attribute:"matched-text"})],r.prototype,"matchedText",2);n([t.observable],r.prototype,"_vvdSearchText",2);n([t.volatile],r.prototype,"_hasMatchedText",1);n([t.observable],r.prototype,"_isNotMatching",2);n([t.volatile],r.prototype,"_matchedRange",1);n([t.attr({attribute:"tag-connotation"})],r.prototype,"tagConnotation",2);const y=e=>m.classNames("base",["disabled",e.disabled],["selected",!!e.selected],["hover",!!e._highlighted],["active",!!e.checked],["icon",!!e.icon],["two-lines",!!e.text?.length&&!!e.textSecondary?.length]);function g(){return t.html`${l.when(e=>e.text||e.textSecondary,t.html`<span class="text">
-			${l.when(e=>e.text,t.html`<span class="text-primary">
-					${l.when(e=>e._hasMatchedText,t.html`${e=>e.text.slice(0,e._matchedRange.from)}<span class="match"
-								>${e=>e.text.slice(e._matchedRange.from,e._matchedRange.to)}</span
-							>`)}${e=>e.text.slice(e._matchedRange.to)}
-				</span>`)}
-			${l.when(e=>e.textSecondary,t.html`<span class="text-secondary">${e=>e.textSecondary}</span>`)}
-		</span>`)}`}const S=e=>{const o=p.affixIconTemplateFactory(e),i=e.tagFor(v.Icon);return t.html`
-		<template
-			${h.applyHostSemantics({role:"option",ariaChecked:a=>a.checked,ariaSelected:a=>a.selected,ariaDisabled:a=>a.disabled})}
-			style="${a=>a._isNotMatching?"display: none":""}"
-		>
-			<div class="${y}">
-				${a=>o(a.icon,p.IconWrapper.Slot)} ${g()}
-				<slot name="trailing-meta"></slot>
-				${l.when(a=>a._displayCheckmark&&a.selected,t.html`<${i} class="checkmark" name="check-line"></${i}>`)}
+const e=require(`./vivid-element.cjs`),t=require(`./ref.cjs`),n=require(`./when.cjs`),r=require(`./slotted.cjs`),i=require(`./definition.cjs`),a=require(`./definition2.cjs`),o=require(`./decorate.cjs`),s=require(`./affix.cjs`),c=require(`./form-element.cjs`),l=require(`./with-success-text.cjs`),u=require(`./with-error-text.cjs`),d=require(`./with-contextual-help.cjs`),f=require(`./delegates-aria.cjs`),p=require(`./char-count.cjs`),m=require(`./class-names.cjs`),h=require(`./form-associated.cjs`),g=require(`./mixins.cjs`),_=require(`./definition11.cjs`),v=require(`./text-field.cjs`);var y={email:`email`,password:`password`,tel:`tel`,text:`text`,url:`url`},b=new e.y([`
+	._vvd-3-text-field-safari-workaround::placeholder {
+		opacity: 1 !important;
+		-webkit-text-fill-color: var(--_low-ink-color) !important;
+	}
+`]),x=e=>{let t=e.getRootNode();b.isAttachedTo(t)||b.addStylesTo(t)},S=class extends d.t(g.n(p.t(u.t(l.t(c.t(s.t(f.t(h.n(e.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.type=y.text}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.O.enqueue(()=>{this.focus()}),this._updateControlValueIfNeeded(),x(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e=g.i();get _uniqueId(){return this.id||this.#e}};o.t([e.l({attribute:`readonly`,mode:`boolean`})],S.prototype,`readOnly`,void 0),o.t([e.l({mode:`boolean`})],S.prototype,`autofocus`,void 0),o.t([e.l],S.prototype,`placeholder`,void 0),o.t([e.l],S.prototype,`type`,void 0),o.t([e.l],S.prototype,`list`,void 0),o.t([e.l({converter:e.u})],S.prototype,`maxlength`,void 0),o.t([e.l({converter:e.u})],S.prototype,`minlength`,void 0),o.t([e.l],S.prototype,`pattern`,void 0),o.t([e.l({converter:e.u})],S.prototype,`size`,void 0),o.t([e.l({mode:`boolean`})],S.prototype,`spellcheck`,void 0),o.t([e.l],S.prototype,`appearance`,void 0),o.t([e.l],S.prototype,`shape`,void 0),o.t([e.l],S.prototype,`autoComplete`,void 0),o.t([e.l()],S.prototype,`scale`,void 0),o.t([e.l({attribute:`inputmode`})],S.prototype,`inputMode`,void 0),o.t([e.T],S.prototype,`actionItemsSlottedContent`,void 0),o.t([e.T],S.prototype,`leadingActionItemsSlottedContent`,void 0);var C=e=>`vvd-text-field-control-${e}`,w=({errorValidationMessage:e,disabled:t,value:n,readOnly:r,placeholder:i,appearance:a,shape:o,label:s,successText:c,actionItemsSlottedContent:l,leadingActionItemsSlottedContent:u,icon:d,scale:f})=>m.t([`error`,!!e],[`disabled`,t],[`has-value`,!!n],[`readonly`,r],[`placeholder`,!!i],[`appearance-${a}`,!!a],[`shape-${o}`,!!o],[`no-label`,!s],[`has-icon`,!!d],[`success`,!!c],[`action-items`,!!l?.length],[`leading-action-items`,!!u?.length],[`no-leading`,!(u?.length||d)],[`size-${f}`,!!f]),T=e.o(`text-field`,S,i=>{let a=s.a(i);return e.d`
+		<div class="base ${w}">
+			${n.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"
+					${r.t(`_contextualHelpSlottedContent`)}
+				></slot>
 			</div>
-		</template>
-	`},w=":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media(hover:hover){.base: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.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:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media(hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--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))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}",b=t.defineVividComponent("option",r,S,[v.iconDefinition],{styles:w}),k=t.createRegisterFunction(b);exports.ListboxOption=r;exports.isListboxOption=u;exports.listboxOptionDefinition=b;exports.registerOption=k;
+			${g.r(e.d`
+				${n.t(e=>e.label,e.d`
+						<label slot="_label" for="${e=>C(e._uniqueId)}">
+							${e=>e.label}
+						</label>
+					`)}
+			`)}
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${r.t(`leadingActionItemsSlottedContent`)}
+					></slot>
+					${e=>a(e.icon)}
+				</div>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+					${g.r(e.d`<input
+							slot="_control"
+							id="${e=>C(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}"
+							aria-describedby="${e=>e._feedbackDescribedBy} ${e=>e.charCount&&e.maxlength?e._charCountDescribedBy:null}"
+							value="${e=>e.initialValue}"
+							${f.n()}
+							${t.t(`control`)}
+						/>`)}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${r.t(`actionItemsSlottedContent`)}
+					></slot>
+				</div>
+			</div>
+			${e=>e._getFeedbackTemplate(i)}
+		</div>
+	`},[a.t,g.a,i.n,_.t],{styles:v.t,shadowOptions:{delegatesFocus:!0}}),E=e.s(T);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});

package/bundled/definition12.js

@@ -1,225 +1,195 @@
-import { I as b, i as f } from "./definition2.js";
-import { V as m, a as c, o as d, v as h, h as l, c as x, d as _ } from "./vivid-element.js";
-import { A as y, a as u, I as g } from "./affix.js";
-import { H as S, a as k } from "./host-semantics.js";
-import { i as w } from "./dom.js";
-import { w as s } from "./when.js";
-import { c as z } from "./class-names.js";
-var T = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (e, a, n, t) => {
-  for (var i = t > 1 ? void 0 : t ? $(a, n) : a, p = e.length - 1, v; p >= 0; p--)
-    (v = e[p]) && (i = (t ? v(a, n, i) : v(i)) || i);
-  return t && i && T(a, n, i), i;
+import { O as e, T as t, d as n, l as r, o as i, s as a, t as o, u as s, y as c } from "./vivid-element.js";
+import { t as l } from "./ref.js";
+import { t as u } from "./when.js";
+import { t as d } from "./slotted.js";
+import { n as f } from "./definition.js";
+import { t as p } from "./definition2.js";
+import { t as m } from "./decorate.js";
+import { a as h, t as g } from "./affix.js";
+import { t as _ } from "./form-element.js";
+import { t as v } from "./with-success-text.js";
+import { t as y } from "./with-error-text.js";
+import { t as b } from "./with-contextual-help.js";
+import { n as x, t as S } from "./delegates-aria.js";
+import { t as C } from "./char-count.js";
+import { t as w } from "./class-names.js";
+import { n as T } from "./form-associated.js";
+import { a as E, i as D, n as O, r as k } from "./mixins.js";
+import { t as A } from "./definition11.js";
+import { t as j } from "./text-field.js";
+//#region src/lib/text-field/text-field.ts
+var M = {
+	email: "email",
+	password: "password",
+	tel: "tel",
+	text: "text",
+	url: "url"
+}, N = 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"]), P = (e) => {
+	let t = e.getRootNode();
+	N.isAttachedTo(t) || N.addStylesTo(t);
+}, F = class extends b(O(C(y(v(_(g(S(T(o))))))))) {
+	constructor(...e) {
+		super(...e), this.proxy = document.createElement("input"), this.type = M.text;
+	}
+	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 && e.enqueue(() => {
+			this.focus();
+		}), this._updateControlValueIfNeeded(), P(this), this._renderCharCountRemaining();
+	}
+	focus() {
+		this.control?.focus();
+	}
+	#e = D();
+	get _uniqueId() {
+		return this.id || this.#e;
+	}
 };
-function V(e) {
-  return w(e) && (e.getAttribute("role") === "option" || e instanceof HTMLOptionElement || e instanceof o);
-}
-class o extends S(
-  y(m)
-) {
-  constructor(a, n, t, i) {
-    super(), this.defaultSelected = !1, this.dirtySelected = !1, this.value = "", this._highlighted = !1, this._displayCheckmark = !1, this._vvdSearchText = "", this._isNotMatching = !1, a && (this.text = a), n && (this.value = n), t && (this.defaultSelected = t), i && (this.selected = i), this.proxy = new Option(
-      this.text,
-      this.value,
-      this.defaultSelected,
-      this.selected
-    ), this.proxy.disabled = this.disabled;
-  }
-  defaultSelectedChanged() {
-    this.dirtySelected || (this.selected = this.defaultSelected, this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.defaultSelected)), this.proxy instanceof HTMLOptionElement && (this.proxy.defaultSelected = this.defaultSelected);
-  }
-  disabledChanged() {
-    this.proxy instanceof HTMLOptionElement && (this.proxy.disabled = this.disabled);
-  }
-  /**
-   * @deprecated Use `defaultSelected` instead.
-   */
-  get selectedAttribute() {
-    return this.defaultSelected;
-  }
-  set selectedAttribute(a) {
-    this.defaultSelected = a;
-  }
-  selectedChanged() {
-    this.dirtySelected || (this.dirtySelected = !0), this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.selected);
-  }
-  valueChanged() {
-    if (typeof this.value != "string") {
-      this.value = "";
-      return;
-    }
-    this.proxy instanceof HTMLOptionElement && (this.proxy.value = this.value);
-  }
-  get label() {
-    return this._label ?? this.text;
-  }
-  set label(a) {
-    this._label = a;
-  }
-  set text(a) {
-    this._text = a;
-  }
-  get text() {
-    return this._text ?? "";
-  }
-  /**
-   * Provides an accessible name for use by parent components.
-   * Note: Does not implement full accessible name computation, e.g. slotted content is missed.
-   * @internal
-   */
-  _getAccessibleName() {
-    return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
-  }
-  get form() {
-    return null;
-  }
-  get _hasMatchedText() {
-    return !!(this.matchedText ?? this._vvdSearchText);
-  }
-  get _matchedRange() {
-    const a = this.matchedText ?? this._vvdSearchText;
-    if (a) {
-      const n = this.text.toLowerCase().indexOf(a.toLowerCase());
-      return n === -1 ? { from: 0, to: 0 } : {
-        from: n,
-        to: n + a.length
-      };
-    }
-    return { from: 0, to: 0 };
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback(), this.dirtySelected || (this.selected = this.defaultSelected, this.dirtySelected = !1);
-  }
-}
-r([
-  c({
-    converter: {
-      fromView: (e) => {
-        if (e === !0 || e === "true")
-          return !0;
-        if (e === !1 || e === "false")
-          return !1;
-      },
-      toView: (e) => e
-    }
-  })
-], o.prototype, "checked", 2);
-r([
-  c({ attribute: "selected", mode: "boolean" })
-], o.prototype, "defaultSelected", 2);
-r([
-  c({ mode: "boolean" })
-], o.prototype, "disabled", 2);
-r([
-  c({ attribute: "current-selected", mode: "boolean" })
-], o.prototype, "selected", 2);
-r([
-  c({ attribute: "value" })
-], o.prototype, "value", 2);
-r([
-  c({
-    attribute: "label"
-  })
-], o.prototype, "_label", 2);
-r([
-  c({
-    attribute: "text"
-  })
-], o.prototype, "_text", 2);
-r([
-  c({ attribute: "text-secondary" })
-], o.prototype, "textSecondary", 2);
-r([
-  d
-], o.prototype, "_highlighted", 2);
-r([
-  d
-], o.prototype, "_displayCheckmark", 2);
-r([
-  c({ attribute: "matched-text" })
-], o.prototype, "matchedText", 2);
-r([
-  d
-], o.prototype, "_vvdSearchText", 2);
-r([
-  h
-], o.prototype, "_hasMatchedText", 1);
-r([
-  d
-], o.prototype, "_isNotMatching", 2);
-r([
-  h
-], o.prototype, "_matchedRange", 1);
-r([
-  c({ attribute: "tag-connotation" })
-], o.prototype, "tagConnotation", 2);
-const C = (e) => z(
-  "base",
-  ["disabled", e.disabled],
-  ["selected", !!e.selected],
-  ["hover", !!e._highlighted],
-  ["active", !!e.checked],
-  ["icon", !!e.icon],
-  ["two-lines", !!e.text?.length && !!e.textSecondary?.length]
-);
-function O() {
-  return l`${s(
-    (e) => e.text || e.textSecondary,
-    l`<span class="text">
-			${s(
-      (e) => e.text,
-      l`<span class="text-primary">
-					${s(
-        (e) => e._hasMatchedText,
-        l`${(e) => e.text.slice(0, e._matchedRange.from)}<span class="match"
-								>${(e) => e.text.slice(e._matchedRange.from, e._matchedRange.to)}</span
-							>`
-      )}${(e) => e.text.slice(e._matchedRange.to)}
-				</span>`
-    )}
-			${s(
-      (e) => e.textSecondary,
-      l`<span class="text-secondary">${(e) => e.textSecondary}</span>`
-    )}
-		</span>`
-  )}`;
-}
-const L = (e) => {
-  const a = u(e), n = e.tagFor(b);
-  return l`
-		<template
-			${k({
-    role: "option",
-    ariaChecked: (t) => t.checked,
-    ariaSelected: (t) => t.selected,
-    ariaDisabled: (t) => t.disabled
-  })}
-			style="${(t) => t._isNotMatching ? "display: none" : ""}"
-		>
-			<div class="${C}">
-				${(t) => a(t.icon, g.Slot)} ${O()}
-				<slot name="trailing-meta"></slot>
-				${s(
-    (t) => t._displayCheckmark && t.selected,
-    l`<${n} class="checkmark" name="check-line"></${n}>`
-  )}
+m([r({
+	attribute: "readonly",
+	mode: "boolean"
+})], F.prototype, "readOnly", void 0), m([r({ mode: "boolean" })], F.prototype, "autofocus", void 0), m([r], F.prototype, "placeholder", void 0), m([r], F.prototype, "type", void 0), m([r], F.prototype, "list", void 0), m([r({ converter: s })], F.prototype, "maxlength", void 0), m([r({ converter: s })], F.prototype, "minlength", void 0), m([r], F.prototype, "pattern", void 0), m([r({ converter: s })], F.prototype, "size", void 0), m([r({ mode: "boolean" })], F.prototype, "spellcheck", void 0), m([r], F.prototype, "appearance", void 0), m([r], F.prototype, "shape", void 0), m([r], F.prototype, "autoComplete", void 0), m([r()], F.prototype, "scale", void 0), m([r({ attribute: "inputmode" })], F.prototype, "inputMode", void 0), m([t], F.prototype, "actionItemsSlottedContent", void 0), m([t], F.prototype, "leadingActionItemsSlottedContent", void 0);
+//#endregion
+//#region src/lib/text-field/text-field.template.ts
+var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e, disabled: t, value: n, readOnly: r, placeholder: i, appearance: a, shape: o, label: s, successText: c, actionItemsSlottedContent: l, leadingActionItemsSlottedContent: u, icon: d, scale: f }) => w(["error", !!e], ["disabled", t], ["has-value", !!n], ["readonly", r], ["placeholder", !!i], [`appearance-${a}`, !!a], [`shape-${o}`, !!o], ["no-label", !s], ["has-icon", !!d], ["success", !!c], ["action-items", !!l?.length], ["leading-action-items", !!u?.length], ["no-leading", !(u?.length || d)], [`size-${f}`, !!f]), R = i("text-field", F, (e) => {
+	let t = h(e);
+	return n`
+		<div class="base ${L}">
+			${u((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"
+					${d("_contextualHelpSlottedContent")}
+				></slot>
 			</div>
-		</template>
+			${k(n`
+				${u((e) => e.label, n`
+						<label slot="_label" for="${(e) => I(e._uniqueId)}">
+							${(e) => e.label}
+						</label>
+					`)}
+			`)}
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${d("leadingActionItemsSlottedContent")}
+					></slot>
+					${(e) => t(e.icon)}
+				</div>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+					${k(n`<input
+							slot="_control"
+							id="${(e) => I(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}"
+							aria-describedby="${(e) => e._feedbackDescribedBy} ${(e) => e.charCount && e.maxlength ? e._charCountDescribedBy : null}"
+							value="${(e) => e.initialValue}"
+							${x()}
+							${l("control")}
+						/>`)}
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${d("actionItemsSlottedContent")}
+					></slot>
+				</div>
+			</div>
+			${(t) => t._getFeedbackTemplate(e)}
+		</div>
 	`;
-}, M = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media(hover:hover){.base: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.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:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media(hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--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))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}", H = _(
-  "option",
-  o,
-  L,
-  [f],
-  {
-    styles: M
-  }
-), P = x(H);
-export {
-  o as L,
-  V as i,
-  H as l,
-  P as r
-};
+}, [
+	p,
+	E,
+	f,
+	A
+], {
+	styles: j,
+	shadowOptions: { delegatesFocus: !0 }
+}), z = a(R);
+//#endregion
+export { R as n, F as r, z as t };

package/bundled/definition13.cjs

@@ -1,10 +1,20 @@
-"use strict";const l=require("./definition2.cjs"),i=require("./definition17.cjs"),n=require("./vivid-element.cjs"),v=require("./class-names.cjs");var d=Object.defineProperty,u=(o,r,a,x)=>{for(var t=void 0,e=o.length-1,c;e>=0;e--)(c=o[e])&&(t=c(r,a,t)||t);return t&&d(r,a,t),t};class s extends n.VividElement{constructor(){super(...arguments),this.placement="right"}}u([n.attr({mode:"fromView"})],s.prototype,"placement");const f=o=>v.classNames("control"),_=o=>{const r=o.tagFor(i.Toggletip),a=o.tagFor(l.Icon);return n.html`
-		<${r} class="base" exportparts="vvd-theme-alternate">
-			<button class="${f}" slot="anchor">
-        <slot name="icon" slot="icon">
-          <${a} name="help-solid"></${a}>
-        </slot>
-			</button>
-			<slot></slot>
-		</${r}>
-	`},b=".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))}.control{--_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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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.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;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;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}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.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}",p=n.defineVividComponent("contextual-help",s,_,[l.iconDefinition,i.toggletipDefinition],{styles:b}),m=n.createRegisterFunction(p);exports.contextualHelpDefinition=p;exports.registerContextualHelp=m;
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./definition2.cjs`),r=require(`./decorate.cjs`),i=require(`./affix.cjs`),a=require(`./class-names.cjs`),o=require(`./host-semantics.cjs`);var s=`: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{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.base: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.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:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.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{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;min-block-size:40px;display:flex;position:relative}@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}.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}`,c=class extends o.t(i.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`?!0:(e.stopImmediatePropagation(),this.$emit(`close`),!1)}};r.t([t.l({mode:`boolean`})],c.prototype,`disabled`,void 0),r.t([t.l],c.prototype,`connotation`,void 0),r.t([t.l],c.prototype,`shape`,void 0),r.t([t.l],c.prototype,`label`,void 0),r.t([t.l({mode:`boolean`})],c.prototype,`removable`,void 0),r.t([t.l({mode:`fromView`})],c.prototype,`tabIndex`,void 0),r.t([t.T],c.prototype,`active`,void 0);var l=({connotation:e,disabled:t,active:n,iconTrailing:r,shape:i,removable:o})=>a.t(`base`,[`connotation-${e}`,!!e&&!!n],[`shape-${i}`,!!i],[`disabled`,!!t],[`selected`,!!n],[`icon-trailing`,r],[`removable`,o]);function u(e){let n=i.a(e);return t.d`<button
+		aria-label="${e=>e.locale.tab.dismissButtonLabel}"
+		class="close"
+		id="close-btn"
+		@click="${(e,t)=>e._handleCloseClick(t.event)}"
+	>
+		${()=>n(`close-line`,i.i.Span)}
+	</button>`}var d=t.o(`tab`,c,e=>{let n=i.a(e);return t.d`
+		<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)}"
+		>
+			<div class="${l}">
+				${e=>n(e.icon,i.i.Slot)} ${e=>e.label}
+				${t=>t.removable?u(e):null}
+			</div>
+		</template>
+	`},[n.t],{styles:s}),f=t.s(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});