@vonage/vivid 3.46.0 → 3.47.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/accordion/index.js +0 -1
- package/accordion-item/index.js +0 -1
- package/appearance-ui/index.js +1 -1
- package/breadcrumb-item/index.js +0 -1
- package/custom-elements.json +76 -0
- package/index.js +1 -1
- package/listbox/index.js +1 -1
- package/nav-item/index.js +0 -1
- package/package.json +1 -1
- package/shared/definition.js +1 -4
- package/shared/definition10.js +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition13.js +1 -1
- package/shared/definition14.js +1 -1
- package/shared/definition15.js +1 -1
- package/shared/definition16.js +1 -1
- package/shared/definition17.js +3 -3
- package/shared/definition2.js +1 -1
- package/shared/definition20.js +2 -2
- package/shared/definition21.js +1 -1
- package/shared/definition22.js +1 -1
- package/shared/definition23.js +1 -1
- package/shared/definition24.js +1 -1
- package/shared/definition25.js +1 -1
- package/shared/definition26.js +1 -1
- package/shared/definition27.js +1 -1
- package/shared/definition28.js +1 -1
- package/shared/definition29.js +1 -1
- package/shared/definition3.js +1 -1
- package/shared/definition30.js +1 -1
- package/shared/definition31.js +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition33.js +1 -1
- package/shared/definition34.js +1 -1
- package/shared/definition35.js +1 -1
- package/shared/definition36.js +1 -1
- package/shared/definition37.js +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition39.js +1 -1
- package/shared/definition4.js +1 -1
- package/shared/definition40.js +1 -1
- package/shared/definition41.js +1 -1
- package/shared/definition42.js +1 -1
- package/shared/definition43.js +1 -1
- package/shared/definition44.js +2 -5
- package/shared/definition45.js +1 -1
- package/shared/definition46.js +1 -1
- package/shared/definition48.js +1 -1
- package/shared/definition49.js +1 -1
- package/shared/definition5.js +1 -1
- package/shared/definition50.js +1 -1
- package/shared/definition51.js +1 -1
- package/shared/definition52.js +1 -1
- package/shared/definition54.js +1 -1
- package/shared/definition55.js +1 -1
- package/shared/definition56.js +1 -1
- package/shared/definition57.js +1 -1
- package/shared/definition58.js +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition60.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +1 -1
- package/shared/definition9.js +1 -1
- package/shared/index2.js +1 -1
- package/shared/presentationDate.js +3 -2
- package/shared/text-anchor.template.js +0 -3
- package/shared/text-field.js +1 -1
- package/slider/index.js +0 -1
- package/style.css +1 -7101
- package/styles/core/all.css +1 -3
- package/styles/core/theme.css +1 -3
- package/styles/core/typography.css +1 -3
- package/styles/fonts/spezia-variable.css +0 -2
- package/styles/tokens/theme-dark.css +4 -6
- package/styles/tokens/theme-light.css +4 -6
- package/styles/tokens/vivid-2-compat.css +1 -3
- package/text-anchor/index.js +0 -2
package/shared/definition52.js
CHANGED
|
@@ -188,7 +188,7 @@ __decorate([
|
|
|
188
188
|
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
189
189
|
applyMixins(TextArea$1, DelegatesARIATextbox);
|
|
190
190
|
|
|
191
|
-
const styles = "
|
|
191
|
+
const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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-backdrop: var(--vvd-text-area-success-backdrop, var(--vvd-color-success-50));--_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-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-backdrop: var(--vvd-text-area-alert-backdrop, var(--vvd-color-alert-50));--_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-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-backdrop: var(--vvd-text-area-accent-backdrop, var(--vvd-color-canvas));--_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-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))}@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{padding:8px 16px;border:0 none;appearance:none;background-color:var(--_appearance-color-fill);border-radius:8px;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*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}.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{outline:2px solid var(--focus-stroke-color, currentColor);outline-offset:-2px}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}\n";
|
|
192
192
|
|
|
193
193
|
var __defProp = Object.defineProperty;
|
|
194
194
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition54.js
CHANGED
|
@@ -4,7 +4,7 @@ import { a as anchored } from './anchored.js';
|
|
|
4
4
|
import { w as when } from './when.js';
|
|
5
5
|
import { c as classNames } from './class-names.js';
|
|
6
6
|
|
|
7
|
-
const styles = "
|
|
7
|
+
const styles = ".control{display:inline-block}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}\n";
|
|
8
8
|
|
|
9
9
|
var __defProp = Object.defineProperty;
|
|
10
10
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition55.js
CHANGED
|
@@ -3,7 +3,7 @@ import { P as Popup, p as popupRegistries } from './definition60.js';
|
|
|
3
3
|
import { a as anchored } from './anchored.js';
|
|
4
4
|
import { c as classNames } from './class-names.js';
|
|
5
5
|
|
|
6
|
-
const styles = "
|
|
6
|
+
const styles = ".control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}\n";
|
|
7
7
|
|
|
8
8
|
var __defProp = Object.defineProperty;
|
|
9
9
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition56.js
CHANGED
|
@@ -12,7 +12,7 @@ import { w as when } from './when.js';
|
|
|
12
12
|
import { c as classNames } from './class-names.js';
|
|
13
13
|
import { r as ref } from './ref.js';
|
|
14
14
|
|
|
15
|
-
const styles = "
|
|
15
|
+
const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports selector(:focus-visible){.control:focus-visible{outline:none}}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}:host(:not(:focus-visible)) .focus-indicator{display:none}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
|
|
16
16
|
|
|
17
17
|
var __defProp = Object.defineProperty;
|
|
18
18
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition57.js
CHANGED
|
@@ -270,7 +270,7 @@ __decorate([
|
|
|
270
270
|
observable
|
|
271
271
|
], TreeView$1.prototype, "slottedTreeItems", void 0);
|
|
272
272
|
|
|
273
|
-
const styles = ".control
|
|
273
|
+
const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}\n";
|
|
274
274
|
|
|
275
275
|
class TreeView extends TreeView$1 {
|
|
276
276
|
}
|
package/shared/definition58.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { F as Focus } from './focus.js';
|
|
3
3
|
|
|
4
|
-
const styles = "
|
|
4
|
+
const styles = ":host{display:contents;border-radius:inherit}.control{position:absolute;z-index:1;box-sizing:border-box;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);inset:var(--focus-inset, 0);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:-2px}\n";
|
|
5
5
|
|
|
6
6
|
const focusTemplate = () => html`
|
|
7
7
|
<span class="control"></span>`;
|
package/shared/definition59.js
CHANGED
|
@@ -21,7 +21,7 @@ __decorateClass([
|
|
|
21
21
|
attr({ attribute: "no-shadow", mode: "boolean" })
|
|
22
22
|
], Elevation.prototype, "noShadow", 2);
|
|
23
23
|
|
|
24
|
-
const styles = ":host
|
|
24
|
+
const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp)}.control.dp-4{--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp)}.control.dp-8{--_elevation-fill: var(--vvd-color-surface-8dp);--_elevation-shadow: var(--vvd-shadow-surface-8dp)}.control.dp-12{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control.dp-16{--_elevation-fill: var(--vvd-color-surface-16dp);--_elevation-shadow: var(--vvd-shadow-surface-16dp)}.control.dp-24{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--vvd-color-surface-2dp);--_elevation-shadow: var(--vvd-shadow-surface-2dp)}.control ::slotted(*){position:relative;isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;background:var(--_elevation-fill);block-size:100%;border-radius:inherit;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control.no-shadow ::slotted(*):before{filter:none}\n";
|
|
25
25
|
|
|
26
26
|
const getClasses = ({
|
|
27
27
|
dp,
|
package/shared/definition6.js
CHANGED
|
@@ -4,7 +4,7 @@ import { I as Icon } from './icon.js';
|
|
|
4
4
|
import { w as when } from './when.js';
|
|
5
5
|
import { c as classNames } from './class-names.js';
|
|
6
6
|
|
|
7
|
-
const styles = "
|
|
7
|
+
const styles = ".base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_size);border-radius:var(--_avatar-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.size-condensed{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}\n";
|
|
8
8
|
|
|
9
9
|
var __defProp = Object.defineProperty;
|
|
10
10
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition60.js
CHANGED
|
@@ -1761,7 +1761,7 @@ __decorateClass([
|
|
|
1761
1761
|
observable
|
|
1762
1762
|
], Popup.prototype, "anchor", 2);
|
|
1763
1763
|
|
|
1764
|
-
const styles = ".control
|
|
1764
|
+
const styles = ".control{background:var(--vvd-color-surface-4dp);border-radius:inherit;contain:layout}.control:not(.open){display:none}.popup-wrapper{z-index:10;border-radius:8px;inline-size:max-content}.popup-wrapper:not(.absolute){position:fixed}.popup-wrapper.absolute{position:absolute;top:0;left:0}.popup-content{display:grid;color:var(--vvd-color-canvas-text)}.dismissible .popup-content{align-content:start;grid-template-columns:1fr auto}.arrow{position:absolute;z-index:-1;width:8px;height:8px;background:var(--vvd-color-surface-4dp);transform:rotate(45deg)}.dismissible-button{align-self:flex-start;margin-block-start:4px;margin-inline-end:4px}\n";
|
|
1765
1765
|
|
|
1766
1766
|
const getClasses = ({
|
|
1767
1767
|
open,
|
package/shared/definition7.js
CHANGED
|
@@ -32,7 +32,7 @@ __decorateClass([
|
|
|
32
32
|
], Badge.prototype, "text", 2);
|
|
33
33
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
34
34
|
|
|
35
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_badge-block-size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 8px;\n font: var(--vvd-typography-base-condensed-bold);\n inline-size: 100%;\n padding-inline: 8px;\n vertical-align: middle;\n}\n.base.connotation-cta {\n /* @cssprop [--vvd-badge-cta-primary=var(--vvd-color-cta-500)] */\n --_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-badge-cta-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-cta-intermediate=var(--vvd-color-cta-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));\n /* @cssprop [--vvd-badge-cta-soft=var(--vvd-color-cta-100)] */\n --_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));\n /* @cssprop [--vvd-badge-cta-contrast=var(--vvd-color-cta-800)] */\n --_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));\n /* @cssprop [--vvd-badge-cta-pale=var(--vvd-color-cta-300)] */\n --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));\n /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */\n --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));\n /* @cssprop [--vvd-badge-cta-firm=var(--vvd-color-cta-600)] */\n --_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));\n}\n.base.connotation-success {\n /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-badge-success-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-success-intermediate=var(--vvd-color-success-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));\n /* @cssprop [--vvd-badge-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));\n /* @cssprop [--vvd-badge-success-contrast=var(--vvd-color-success-800)] */\n --_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));\n /* @cssprop [--vvd-badge-success-pale=var(--vvd-color-success-300)] */\n --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));\n /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */\n --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));\n /* @cssprop [--vvd-badge-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-badge-alert-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-alert-intermediate=var(--vvd-color-alert-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-badge-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));\n /* @cssprop [--vvd-badge-alert-contrast=var(--vvd-color-alert-800)] */\n --_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));\n /* @cssprop [--vvd-badge-alert-pale=var(--vvd-color-alert-300)] */\n --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));\n /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */\n --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));\n /* @cssprop [--vvd-badge-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));\n}\n.base.connotation-warning {\n /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */\n --_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-badge-warning-primary-text=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-badge-warning-intermediate=var(--vvd-color-warning-300)] */\n --_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-badge-warning-soft=var(--vvd-color-warning-100)] */\n --_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));\n /* @cssprop [--vvd-badge-warning-contrast=var(--vvd-color-warning-800)] */\n --_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));\n /* @cssprop [--vvd-badge-warning-pale=var(--vvd-color-warning-300)] */\n --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));\n /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */\n --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));\n /* @cssprop [--vvd-badge-warning-firm=var(--vvd-color-warning-600)] */\n --_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));\n}\n.base.connotation-information {\n /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */\n --_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));\n /* @cssprop [--vvd-badge-information-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-information-intermediate=var(--vvd-color-information-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));\n /* @cssprop [--vvd-badge-information-soft=var(--vvd-color-information-100)] */\n --_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));\n /* @cssprop [--vvd-badge-information-contrast=var(--vvd-color-information-800)] */\n --_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));\n /* @cssprop [--vvd-badge-information-pale=var(--vvd-color-information-300)] */\n --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));\n /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */\n --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));\n /* @cssprop [--vvd-badge-information-firm=var(--vvd-color-information-600)] */\n --_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-badge-accent-primary-text=var(--vvd-color-canvas)] */\n --_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));\n /* @cssprop [--vvd-badge-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-badge-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));\n /* @cssprop [--vvd-badge-accent-contrast=var(--vvd-color-neutral-800)] */\n --_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));\n /* @cssprop [--vvd-badge-accent-pale=var(--vvd-color-neutral-300)] */\n --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));\n /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */\n --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));\n /* @cssprop [--vvd-badge-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base.appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-pale);\n}\n.base.appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.base:not(.icon-only) {\n max-inline-size: 100%;\n}\n.base.icon-only {\n contain: size;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .base.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .base.icon-only {\n inline-size: var(--_badge-block-size);\n }\n}\n\n.text {\n overflow: hidden;\n max-inline-size: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n border-radius: 4px;\n}\n\n.base.shape-pill {\n border-radius: 14px;\n}\n\n/* Icon */\nslot[name=icon] {\n flex-shrink: 0;\n font-size: calc(var(--_badge-block-size) / 1.6667);\n line-height: 1;\n}\n.icon-trailing slot[name=icon] {\n display: flex;\n order: 1;\n}";
|
|
35
|
+
const styles = ":host{display:inline-block}.base{--_badge-block-size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-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-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}\n";
|
|
36
36
|
|
|
37
37
|
const getClasses = ({
|
|
38
38
|
connotation,
|
package/shared/definition8.js
CHANGED
|
@@ -10,7 +10,7 @@ import { s as slotted } from './slotted.js';
|
|
|
10
10
|
import { w as when } from './when.js';
|
|
11
11
|
import { c as classNames } from './class-names.js';
|
|
12
12
|
|
|
13
|
-
const styles = "
|
|
13
|
+
const styles = ":host{display:block}.control{overflow:hidden;max-height:160px;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);transition:max-height var(--transition-delay, .2s)}.control.connotation-success{--_connotation-color-primary: var(--vvd-banner-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-banner-success-primary-text, var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-banner-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-banner-alert-primary-text, var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-banner-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-banner-announcement-primary-text, var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-banner-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-banner-warning-primary-text, var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary: var(--vvd-banner-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-banner-information-primary-text, var(--vvd-color-canvas))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.removing{max-height:0}.header{display:flex;min-height:calc(1px*(60 + 4*clamp(-1,var(--vvd-size-density, 0),2)));align-items:center;font:var(--vvd-typography-base-bold);inline-size:100%}.header .content{display:flex;flex-grow:1;align-items:center;justify-content:center;column-gap:16px;inline-size:100%;padding-inline:16px}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}\n";
|
|
14
14
|
|
|
15
15
|
var __defProp = Object.defineProperty;
|
|
16
16
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/definition9.js
CHANGED
|
@@ -7,7 +7,7 @@ import { I as Icon } from './icon.js';
|
|
|
7
7
|
import { w as when } from './when.js';
|
|
8
8
|
import { c as classNames } from './class-names.js';
|
|
9
9
|
|
|
10
|
-
const styles = "
|
|
10
|
+
const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{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));--focus-stroke-gap-color: transparent;--focus-inset: -4px;border-radius:2px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}\n";
|
|
11
11
|
|
|
12
12
|
var __defProp = Object.defineProperty;
|
|
13
13
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
package/shared/index2.js
CHANGED
|
@@ -3,7 +3,7 @@ import { a as attr, o as observable, h as html } from './index.js';
|
|
|
3
3
|
import { w as when } from './when.js';
|
|
4
4
|
import enUS from '../locales/en-US.js';
|
|
5
5
|
|
|
6
|
-
const messageStyles = "
|
|
6
|
+
const messageStyles = ".message{display:flex;contain:inline-size;font:var(--vvd-typography-base-condensed);gap:4px;grid-column:1/-1}.message-text{color:var(--vvd-color-canvas-text)}.helper-message .message-text{color:var(--_low-ink-color)}.message-icon{font-size:16px}.success-message .message-icon{color:var(--vvd-color-success-500)}.error-message .message-icon{color:var(--vvd-color-alert-500)}\n";
|
|
7
7
|
|
|
8
8
|
var __defProp$1 = Object.defineProperty;
|
|
9
9
|
var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
|
|
@@ -14,7 +14,7 @@ import { L as Localized } from './localized.js';
|
|
|
14
14
|
import { F as FormAssociated } from './form-associated.js';
|
|
15
15
|
import { a as applyMixins } from './apply-mixins.js';
|
|
16
16
|
|
|
17
|
-
const styles = "
|
|
17
|
+
const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display:flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{block-size:24px;border-radius:8px;font:var(--vvd-typography-base-extended);padding-inline:6px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1/1;block-size:28px;border-radius:50%;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;aspect-ratio:1/1;block-size:48px;border-radius:50%;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.button:where(.selected,[aria-current]):where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button .focus-indicator{color:var(--vvd-color-canvas-text);--focus-stroke-gap-color: transparent}.button:focus-visible{outline:none}.button:not(:focus-visible) .focus-indicator{display:none}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}\n";
|
|
18
18
|
|
|
19
19
|
function _typeof(obj) {
|
|
20
20
|
"@babel/helpers - typeof";
|
|
@@ -5530,7 +5530,8 @@ const DatePickerBaseTemplate = (context, _) => {
|
|
|
5530
5530
|
class="vwc-button"
|
|
5531
5531
|
size="condensed"
|
|
5532
5532
|
label="${(x) => x.locale.datePicker.clearLabel}"
|
|
5533
|
-
@click="${(x) => x._onClearClick()}
|
|
5533
|
+
@click="${(x) => x._onClearClick()},
|
|
5534
|
+
${(x) => x.$emit("clear-click")}"
|
|
5534
5535
|
></${buttonTag}>
|
|
5535
5536
|
<${buttonTag}
|
|
5536
5537
|
tabindex="3"
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
|
|
2
|
-
import { f as focusTemplateFactory } from './focus2.js';
|
|
3
2
|
import { h as html } from './index.js';
|
|
4
3
|
import { r as ref } from './ref.js';
|
|
5
4
|
import { c as classNames } from './class-names.js';
|
|
@@ -10,7 +9,6 @@ const getClasses = ({ text }) => classNames(
|
|
|
10
9
|
);
|
|
11
10
|
const textAnchorTemplate = (context) => {
|
|
12
11
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
13
|
-
const focusTemplate = focusTemplateFactory(context);
|
|
14
12
|
return html`<a
|
|
15
13
|
class="${getClasses}"
|
|
16
14
|
download="${(x) => x.download}"
|
|
@@ -38,7 +36,6 @@ const textAnchorTemplate = (context) => {
|
|
|
38
36
|
aria-roledescription="${(x) => x.ariaRoledescription}"
|
|
39
37
|
${ref("control")}
|
|
40
38
|
>
|
|
41
|
-
${() => focusTemplate}
|
|
42
39
|
${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
|
|
43
40
|
${(x) => x.text}
|
|
44
41
|
${(x) => x.getBodyTemplate?.() ?? ""}
|
package/shared/text-field.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
const styles = "/**\n * Do not edit directly\n * Generated on Mon, 15 Jan 2024 13:38:12 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n --_text-field-gutter-start: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n --_text-field-gutter-end: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: min-content 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-600);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: notSet;\n --_appearance-color-fill: var(--vvd-color-alert-50);\n --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: notSet;\n --_appearance-color-fill: var(--vvd-color-alert-50);\n --_appearance-color-outline: transparent;\n}\n.base:where(.success):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: notSet;\n --_appearance-color-fill: var(--vvd-color-success-50);\n --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: notSet;\n --_appearance-color-fill: var(--vvd-color-success-50);\n --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-text-field-success-backdrop=var(--vvd-color-success-50)] */\n --_connotation-color-backdrop: var(--vvd-text-field-success-backdrop, var(--vvd-color-success-50));\n /* @cssprop [--vvd-text-field-success-intermediate=var(--vvd-color-success-500)] */\n --_connotation-color-intermediate: var(--vvd-text-field-success-intermediate, var(--vvd-color-success-500));\n /* @cssprop [--vvd-text-field-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-text-field-success-firm, var(--vvd-color-success-600));\n /* @cssprop [--vvd-text-field-success-faint=var(--vvd-color-success-50)] */\n --_connotation-color-faint: var(--vvd-text-field-success-faint, var(--vvd-color-success-50));\n /* @cssprop [--vvd-text-field-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-text-field-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-text-field-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-text-field-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-text-field-alert-backdrop=var(--vvd-color-alert-50)] */\n --_connotation-color-backdrop: var(--vvd-text-field-alert-backdrop, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-text-field-alert-intermediate=var(--vvd-color-alert-500)] */\n --_connotation-color-intermediate: var(--vvd-text-field-alert-intermediate, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-text-field-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-text-field-alert-firm, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-text-field-alert-faint=var(--vvd-color-alert-50)] */\n --_connotation-color-faint: var(--vvd-text-field-alert-faint, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-text-field-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-text-field-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n /* @cssprop [--vvd-text-field-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-text-field-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-text-field-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-text-field-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-text-field-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-text-field-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-text-field-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label:not(slot),\n.label::slotted(label) {\n /* As label is in light dom, use !important and initial to prevent values getting overridden by global CSS resets etc. */\n box-sizing: initial !important;\n padding: initial !important;\n margin: initial !important;\n color: var(--vvd-color-canvas-text) !important;\n contain: inline-size !important;\n font: var(--vvd-typography-base);\n grid-column: 1/4;\n grid-row: 1;\n}\n.char-count + .label:not(slot),\n.char-count + .label::slotted(label) {\n grid-column: 1/3;\n}\n\n.char-count {\n color: var(--_low-ink-color);\n font: var(--vvd-typography-base);\n grid-column: 3/4;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n font: var(--vvd-typography-base);\n grid-column: 1/4;\n padding-block: 0;\n transition: color 0.2s, background-color 0.2s;\n /* Shape */\n}\n.fieldset::after {\n position: absolute;\n display: block;\n block-size: 100%;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n content: \"\";\n inline-size: 100%;\n pointer-events: none;\n transition: box-shadow 0.2s;\n}\n.fieldset:focus-visible {\n outline: none;\n}\n.base > .fieldset {\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n border-radius: 8px;\n}\n.base.shape-pill .fieldset {\n border-radius: 24px;\n}\n\n.wrapper {\n block-size: 100%;\n border-radius: inherit;\n inline-size: 100%;\n}\n.wrapper:focus-visible {\n outline: none;\n}\n\n.control:not(slot), .control::slotted(input) {\n /* As input is in light dom, use !important and initial to prevent values getting overridden by global CSS resets etc. */\n width: 100% !important;\n box-sizing: border-box !important;\n border: 0 none !important;\n margin: initial !important;\n appearance: none !important; /* for box-shadow visibility on IOS */\n background-color: transparent !important;\n block-size: 100% !important;\n border-radius: inherit !important;\n color: inherit !important;\n font: inherit;\n padding-block: 0 !important;\n padding-inline-end: var(--_text-field-gutter-end) !important;\n padding-inline-start: var(--_text-field-gutter-start) !important;\n}\n.control:not(slot):disabled, .control::slotted(input:disabled) {\n cursor: not-allowed !important;\n opacity: 1 !important; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_appearance-color-text) !important; /* 1. sets text fill to current `color` for safari */\n}\n.control:not(slot)::placeholder {\n opacity: 1 !important; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_low-ink-color) !important; /* 1. sets text fill to current `color` for safari */\n}\n.control:not(slot):focus-visible, .control::slotted(input:focus-visible) {\n outline: none;\n}\n.has-icon .control:not(slot), .has-icon .control::slotted(input) {\n padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2) !important;\n}\n\n.icon {\n position: absolute;\n z-index: 1;\n color: var(--_low-ink-color);\n font-size: var(--_text-field-icon-size);\n inset-block-start: 50%;\n inset-inline-start: calc(100% + var(--_text-field-gutter-start));\n line-height: 1;\n transform: translateY(-50%);\n}\n\n.leading-items-wrapper {\n position: relative;\n}\n.base.no-leading .leading-items-wrapper {\n display: none;\n}\n\n.action-items-wrapper {\n margin-inline-end: 4px;\n}\n.base:not(.action-items) .action-items-wrapper {\n display: none;\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.wrapper:not(:focus-visible, :focus-within) > .focus-indicator, .fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
|
|
1
|
+
const styles = ":host{display:inline-block}.base{--_text-field-gutter-start:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-gutter-end:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4);--_text-field-icon-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2);display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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(--_connotation-color-backdrop);--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_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-field-success-primary, var(--vvd-color-success-500));--_connotation-color-backdrop: var(--vvd-text-field-success-backdrop, var(--vvd-color-success-50));--_connotation-color-intermediate: var(--vvd-text-field-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-field-success-firm, var(--vvd-color-success-600));--_connotation-color-faint: var(--vvd-text-field-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-field-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-field-alert-primary, var(--vvd-color-alert-500));--_connotation-color-backdrop: var(--vvd-text-field-alert-backdrop, var(--vvd-color-alert-50));--_connotation-color-intermediate: var(--vvd-text-field-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-field-alert-firm, var(--vvd-color-alert-600));--_connotation-color-faint: var(--vvd-text-field-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-field-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-backdrop: var(--vvd-text-field-accent-backdrop, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}@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)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;block-size:100%;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.shape-pill) .fieldset{border-radius:8px}.base.shape-pill .fieldset{border-radius:24px}.wrapper{block-size:100%;border-radius:inherit;inline-size:100%}.wrapper:focus-visible{outline:none}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;border-radius:inherit!important;color:inherit!important;font:inherit;padding-block:0!important;padding-inline-end:var(--_text-field-gutter-end)!important;padding-inline-start:var(--_text-field-gutter-start)!important}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control:not(slot):focus-visible,.control::slotted(input:focus-visible){outline:none}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}.focus-indicator{--focus-stroke-gap-color: transparent;pointer-events:none}.wrapper:not(:focus-visible,:focus-within)>.focus-indicator,.fieldset:not(:focus-visible,:focus-within)>.focus-indicator{display:none}\n";
|
|
2
2
|
|
|
3
3
|
export { styles as s };
|
package/slider/index.js
CHANGED
|
@@ -7,7 +7,6 @@ import '../shared/numbers.js';
|
|
|
7
7
|
import '../shared/form-associated.js';
|
|
8
8
|
import '../shared/key-codes.js';
|
|
9
9
|
import '../shared/aria.js';
|
|
10
|
-
import '../shared/focus2.js';
|
|
11
10
|
import '../shared/aria2.js';
|
|
12
11
|
import '../shared/ref.js';
|
|
13
12
|
import '../shared/class-names.js';
|