@vonage/vivid 3.58.0 → 3.59.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/appearance-ui/index.cjs +1 -1
- package/appearance-ui/index.js +1 -1
- package/custom-elements.json +832 -55
- package/lib/audio-player/audio-player.d.ts +3 -0
- package/lib/combobox/combobox.d.ts +3 -0
- package/lib/combobox/definition.d.ts +1 -1
- package/lib/number-field/number-field.d.ts +23 -8
- package/lib/number-field/number-field.form-associated.d.ts +10 -0
- package/lib/video-player/video-player.d.ts +1 -0
- package/listbox/index.cjs +1 -1
- package/listbox/index.js +1 -1
- package/package.json +1 -1
- package/shared/definition.cjs +1 -1
- package/shared/definition.js +1 -1
- package/shared/definition11.cjs +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition16.cjs +11 -2
- package/shared/definition16.js +11 -2
- package/shared/definition20.cjs +13 -13
- package/shared/definition20.js +13 -13
- package/shared/definition29.cjs +1 -0
- package/shared/definition29.js +1 -1
- package/shared/definition3.cjs +1 -1
- package/shared/definition3.js +1 -1
- package/shared/definition31.cjs +1 -1
- package/shared/definition31.js +1 -1
- package/shared/definition32.cjs +1 -1
- package/shared/definition32.js +1 -1
- package/shared/definition35.cjs +240 -331
- package/shared/definition35.js +241 -332
- package/shared/definition38.cjs +1 -1
- package/shared/definition38.js +1 -1
- package/shared/definition42.js +1 -1
- package/shared/definition43.cjs +1 -1
- package/shared/definition43.js +1 -1
- package/shared/definition47.cjs +1 -1
- package/shared/definition47.js +1 -1
- package/shared/definition5.cjs +74 -11
- package/shared/definition5.js +67 -4
- package/shared/definition50.cjs +1 -1
- package/shared/definition50.js +1 -1
- package/shared/definition51.cjs +1 -1
- package/shared/definition51.js +1 -1
- package/shared/definition54.cjs +1 -1
- package/shared/definition54.js +1 -1
- package/shared/definition59.cjs +1 -1
- package/shared/definition59.js +1 -1
- package/shared/definition61.cjs +2 -65859
- package/shared/definition61.js +2 -65859
- package/shared/definition8.cjs +1 -1
- package/shared/definition8.js +1 -1
- package/shared/key-codes2.js +1 -1
- package/shared/patterns/anchored.d.ts +4 -4
- package/shared/text-field.cjs +1 -1
- package/shared/text-field.js +1 -1
- package/shared/video-player.cjs +65864 -0
- package/shared/video-player.js +65861 -0
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +5 -5
- package/styles/tokens/theme-light.css +5 -5
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/vivid.api.json +58 -0
|
@@ -18,10 +18,13 @@ export declare class AudioPlayer extends FoundationElement {
|
|
|
18
18
|
skipBackwardButtonAriaLabel: string | null;
|
|
19
19
|
connotation?: AudioPlayerConnotation;
|
|
20
20
|
src?: string;
|
|
21
|
+
get playbackRate(): number;
|
|
22
|
+
set playbackRate(value: number);
|
|
21
23
|
srcChanged(): void;
|
|
22
24
|
disabled: boolean;
|
|
23
25
|
notime: boolean;
|
|
24
26
|
skipBy?: MediaSkipBy;
|
|
27
|
+
playbackRates: string | null;
|
|
25
28
|
get paused(): boolean;
|
|
26
29
|
set paused(_: boolean);
|
|
27
30
|
get duration(): number;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { Combobox as FoundationCombobox } from '@microsoft/fast-foundation';
|
|
2
2
|
import type { Popup } from '../popup/popup';
|
|
3
|
+
import type { Appearance } from '../enums';
|
|
3
4
|
import { AffixIcon, type FormElement } from '../../shared/patterns';
|
|
4
5
|
export type PopupPlacement = 'top' | 'bottom';
|
|
6
|
+
export type ComboboxAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
|
|
5
7
|
export declare class Combobox extends FoundationCombobox {
|
|
8
|
+
appearance?: ComboboxAppearance;
|
|
6
9
|
placement?: PopupPlacement;
|
|
7
10
|
fixedDropdown: boolean;
|
|
8
11
|
_popup: Popup;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export type { PopupPlacement } from './combobox';
|
|
1
|
+
export type { PopupPlacement, ComboboxAppearance } from './combobox';
|
|
2
2
|
export declare const comboboxRegistries: import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>[];
|
|
3
3
|
export declare const registerCombobox: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
|
|
@@ -1,19 +1,34 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { DelegatesARIATextbox } from '@microsoft/fast-foundation';
|
|
2
2
|
import type { Appearance, Shape } from '../enums';
|
|
3
|
-
import { type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText, Localized } from '../../shared/patterns';
|
|
4
|
-
import {
|
|
3
|
+
import { AffixIcon, type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText, Localized } from '../../shared/patterns';
|
|
4
|
+
import { FormAssociatedNumberField } from './number-field.form-associated';
|
|
5
5
|
export type NumberFieldAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
|
|
6
6
|
export type NumberFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
|
|
7
|
-
export declare class NumberField extends
|
|
7
|
+
export declare class NumberField extends FormAssociatedNumberField {
|
|
8
|
+
#private;
|
|
9
|
+
readOnly: boolean;
|
|
10
|
+
autofocus: boolean;
|
|
11
|
+
placeholder: string;
|
|
12
|
+
list: string;
|
|
13
|
+
maxlength: number;
|
|
14
|
+
minlength: number;
|
|
15
|
+
size: number;
|
|
16
|
+
step: number;
|
|
17
|
+
stepChanged(_: number, next: number): void;
|
|
18
|
+
max: number;
|
|
19
|
+
min: number;
|
|
20
|
+
get valueAsNumber(): number;
|
|
21
|
+
set valueAsNumber(next: number);
|
|
22
|
+
validate(): void;
|
|
23
|
+
stepUp(): void;
|
|
24
|
+
stepDown(): void;
|
|
25
|
+
select(): void;
|
|
8
26
|
incrementButtonAriaLabel: string | null;
|
|
9
27
|
decrementButtonAriaLabel: string | null;
|
|
10
28
|
appearance?: NumberFieldAppearance;
|
|
11
29
|
shape?: NumberFieldShape;
|
|
12
30
|
autoComplete?: string;
|
|
13
|
-
stepChanged(_previous: number, next: number): void;
|
|
14
31
|
attributeChangedCallback(name: string, previous: string, next: string): void;
|
|
15
|
-
stepUp(): void;
|
|
16
|
-
stepDown(): void;
|
|
17
32
|
}
|
|
18
|
-
export interface NumberField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText, Localized {
|
|
33
|
+
export interface NumberField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText, DelegatesARIATextbox, Localized {
|
|
19
34
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
declare class _NumberField extends FoundationElement {
|
|
3
|
+
}
|
|
4
|
+
interface _NumberField extends FormAssociated {
|
|
5
|
+
}
|
|
6
|
+
declare const FormAssociatedNumberField_base: typeof _NumberField;
|
|
7
|
+
export declare class FormAssociatedNumberField extends FormAssociatedNumberField_base {
|
|
8
|
+
proxy: HTMLInputElement;
|
|
9
|
+
}
|
|
10
|
+
export {};
|
|
@@ -2,6 +2,7 @@ import { FoundationElement } from '@microsoft/fast-foundation';
|
|
|
2
2
|
import { MediaSkipBy } from '../enums';
|
|
3
3
|
import { Localized } from '../../shared/patterns';
|
|
4
4
|
export declare const DEFAULT_PLAYBACK_RATES = "0.5, 1, 1.5, 2";
|
|
5
|
+
export declare function getPlaybackRatesArray(playbackRates: string): number[];
|
|
5
6
|
export declare class VideoPlayer extends FoundationElement {
|
|
6
7
|
#private;
|
|
7
8
|
poster?: string;
|
package/listbox/index.cjs
CHANGED
|
@@ -40,7 +40,7 @@ const ListboxTemplate = () => {
|
|
|
40
40
|
`;
|
|
41
41
|
};
|
|
42
42
|
|
|
43
|
-
const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-
|
|
43
|
+
const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.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:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
|
|
44
44
|
|
|
45
45
|
const listboxDefinition = listbox.Listbox.compose({
|
|
46
46
|
baseName: "listbox",
|
package/listbox/index.js
CHANGED
|
@@ -38,7 +38,7 @@ const ListboxTemplate = () => {
|
|
|
38
38
|
`;
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
-
const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-
|
|
41
|
+
const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.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:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
|
|
42
42
|
|
|
43
43
|
const listboxDefinition = Listbox.compose({
|
|
44
44
|
baseName: "listbox",
|
package/package.json
CHANGED
package/shared/definition.cjs
CHANGED
|
@@ -76,7 +76,7 @@ index.__decorate([
|
|
|
76
76
|
], AccordionItem$1.prototype, "id", void 0);
|
|
77
77
|
applyMixins.applyMixins(AccordionItem$1, startEnd.StartEnd);
|
|
78
78
|
|
|
79
|
-
const styles = ":host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-
|
|
79
|
+
const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:20%;flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
|
|
80
80
|
|
|
81
81
|
var __defProp = Object.defineProperty;
|
|
82
82
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition.js
CHANGED
|
@@ -74,7 +74,7 @@ __decorate([
|
|
|
74
74
|
], AccordionItem$1.prototype, "id", void 0);
|
|
75
75
|
applyMixins(AccordionItem$1, StartEnd);
|
|
76
76
|
|
|
77
|
-
const styles = ":host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-
|
|
77
|
+
const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:20%;flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
|
|
78
78
|
|
|
79
79
|
var __defProp = Object.defineProperty;
|
|
80
80
|
var __decorateClass = (decorators, target, key, kind) => {
|
package/shared/definition11.cjs
CHANGED
|
@@ -94,7 +94,7 @@ __decorateClass([
|
|
|
94
94
|
], Button.prototype, "target");
|
|
95
95
|
applyMixins.applyMixins(Button, affix.AffixIconWithTrailing);
|
|
96
96
|
|
|
97
|
-
const styles = ":host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert){--_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-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.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(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.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(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.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))}@supports (user-select: none){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked>slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked)>slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}";
|
|
97
|
+
const styles = ":host{--_vvd-button-accent-firm-wrapper: var( --vvd-button-accent-firm );--_vvd-button-cta-firm-wrapper: var( --vvd-button-cta-firm );--_vvd-button-success-firm-wrapper: var( --vvd-button-success-firm );--_vvd-button-alert-firm-wrapper: var( --vvd-button-alert-firm );--_vvd-button-announcement-firm-wrapper: var( --vvd-button-announcement-firm )}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm: var( --_vvd-button-accent-firm-wrapper, var(--vvd-button-accent-primary) );--vvd-button-cta-firm: var( --_vvd-button-cta-firm-wrapper, var(--vvd-button-cta-primary) );--vvd-button-success-firm: var( --_vvd-button-success-firm-wrapper, var(--vvd-button-success-primary) );--vvd-button-alert-firm: var( --_vvd-button-alert-firm-wrapper, var(--vvd-button-alert-primary) );--vvd-button-announcement-firm: var( --_vvd-button-announcement-firm-wrapper, var(--vvd-button-announcement-primary) )}:host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_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-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.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))}@supports (user-select: none){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked>slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked)>slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}";
|
|
98
98
|
|
|
99
99
|
const getAppearanceClassName = (appearance, disabled) => {
|
|
100
100
|
let className = `appearance-${appearance}`;
|
package/shared/definition11.js
CHANGED
|
@@ -92,7 +92,7 @@ __decorateClass([
|
|
|
92
92
|
], Button.prototype, "target");
|
|
93
93
|
applyMixins(Button, AffixIconWithTrailing);
|
|
94
94
|
|
|
95
|
-
const styles = ":host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert){--_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-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.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(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.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(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.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))}@supports (user-select: none){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked>slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked)>slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}";
|
|
95
|
+
const styles = ":host{--_vvd-button-accent-firm-wrapper: var( --vvd-button-accent-firm );--_vvd-button-cta-firm-wrapper: var( --vvd-button-cta-firm );--_vvd-button-success-firm-wrapper: var( --vvd-button-success-firm );--_vvd-button-alert-firm-wrapper: var( --vvd-button-alert-firm );--_vvd-button-announcement-firm-wrapper: var( --vvd-button-announcement-firm )}.control:not(.appearance-ghost-light,.appearance-filled,.appearance-outlined){--vvd-button-accent-firm: var( --_vvd-button-accent-firm-wrapper, var(--vvd-button-accent-primary) );--vvd-button-cta-firm: var( --_vvd-button-cta-firm-wrapper, var(--vvd-button-cta-primary) );--vvd-button-success-firm: var( --_vvd-button-success-firm-wrapper, var(--vvd-button-success-primary) );--vvd-button-alert-firm: var( --_vvd-button-alert-firm-wrapper, var(--vvd-button-alert-primary) );--vvd-button-announcement-firm: var( --_vvd-button-announcement-firm-wrapper, var(--vvd-button-announcement-primary) )}:host{display:inline-block}.control{display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:var(--_button-border-radius);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);gap:var(--_button-icon-gap);text-decoration:none;vertical-align:middle;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce-primary: var(--vvd-button-cta-fierce-primary, var(--vvd-color-cta-700))}.control.connotation-success{--_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce-primary: var(--vvd-button-success-fierce-primary, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce-primary: var(--vvd-button-alert-fierce-primary, var(--vvd-color-alert-700))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-button-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-button-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-button-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-button-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-button-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-soft: var(--vvd-button-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-faint: var(--vvd-button-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce-primary: var(--vvd-button-announcement-fierce-primary, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-announcement){--_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-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled).appearance-ghost-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control .text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--button-line-clamp, 1);max-inline-size:100%}.control:not(.icon-only){inline-size:100%}.control.appearance-filled{--focus-stroke-gap-color: unset}.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))}@supports (user-select: none){.control{user-select:none}}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_button-block-size)}}.control:not(.stacked).size-super-condensed{--_button-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:8px}.control:not(.stacked).size-condensed{--_button-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control:not(.stacked).size-condensed:not(.icon-only){--_button-icon-gap: 8px;padding-inline:12px}.control:not(.stacked).size-expanded{--_button-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-extended-bold)}.control:not(.stacked).size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed){--_button-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-bold)}.control:not(.stacked):not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_button-border-radius: 8px}.control:not(.shape-pill).size-condensed:not(.stacked),.control:not(.shape-pill).size-super-condensed:not(.stacked){--_button-border-radius: 4px}.control.shape-pill:not(.icon-only,.stacked.size-super-condensed,.stacked.size-condensed,.stacked.normal){--_button-border-radius: 24px}.control.shape-pill.stacked.size-condensed,.control.shape-pill.stacked.size-super-condensed{--_button-border-radius: 16px}.control.shape-pill.stacked.size-normal{--_button-border-radius: 20px}.control.shape-pill.icon-only{--_button-border-radius: 50%}.control.stacked{flex-direction:column;justify-content:center}.control.stacked.size-super-condensed{--stacked-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 20px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-super-condensed:not(.icon-only){--_button-icon-gap: 4px;padding-inline:16px}.control.stacked.size-condensed{--stacked-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 24px);font:var(--vvd-typography-base-condensed-bold)}.control.stacked.size-condensed:not(.icon-only){--_button-icon-gap: 6px;padding-inline:12px}.control.stacked.size-expanded{--stacked-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 32px);font:var(--vvd-typography-base-extended-bold)}.control.stacked.size-expanded:not(.icon-only){--_button-icon-gap: 10px;padding-inline:20px}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed){--stacked-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_button-block-size: calc(var(--stacked-size) + 28px);font:var(--vvd-typography-base-bold)}.control.stacked:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_button-icon-gap: 8px;padding-inline:16px}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}.control.stacked>slot[name=icon]{font-size:calc(var(--stacked-size) / 2)}.control:not(.stacked)>slot[name=icon]{font-size:calc(var(--_button-block-size) / 2)}:host(:not([icon])) .pending{position:absolute}:host(:not([icon])) .pending+.text{visibility:hidden}:host([icon-trailing][pending]) .pending{order:1}";
|
|
96
96
|
|
|
97
97
|
const getAppearanceClassName = (appearance, disabled) => {
|
|
98
98
|
let className = `appearance-${appearance}`;
|
package/shared/definition16.cjs
CHANGED
|
@@ -621,7 +621,7 @@ index.__decorate([
|
|
|
621
621
|
applyMixins.applyMixins(DelegatesARIACombobox, listbox.DelegatesARIAListbox);
|
|
622
622
|
applyMixins.applyMixins(Combobox$1, startEnd.StartEnd, DelegatesARIACombobox);
|
|
623
623
|
|
|
624
|
-
const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0}}";
|
|
624
|
+
const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
|
|
625
625
|
|
|
626
626
|
var __defProp = Object.defineProperty;
|
|
627
627
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -644,6 +644,9 @@ let Combobox = class extends Combobox$1 {
|
|
|
644
644
|
this._popup.anchor = this._anchor;
|
|
645
645
|
}
|
|
646
646
|
};
|
|
647
|
+
__decorateClass([
|
|
648
|
+
index.attr
|
|
649
|
+
], Combobox.prototype, "appearance", 2);
|
|
647
650
|
__decorateClass([
|
|
648
651
|
index.attr
|
|
649
652
|
], Combobox.prototype, "placement", 2);
|
|
@@ -660,10 +663,16 @@ function renderLabel() {
|
|
|
660
663
|
${(x) => x.label}
|
|
661
664
|
</label>`;
|
|
662
665
|
}
|
|
663
|
-
const getStateClasses = ({
|
|
666
|
+
const getStateClasses = ({
|
|
667
|
+
disabled,
|
|
668
|
+
placeholder,
|
|
669
|
+
label,
|
|
670
|
+
appearance
|
|
671
|
+
}) => classNames.classNames(
|
|
664
672
|
"base",
|
|
665
673
|
["disabled", disabled],
|
|
666
674
|
["placeholder", Boolean(placeholder)],
|
|
675
|
+
[`appearance-${appearance}`, Boolean(appearance)],
|
|
667
676
|
["no-label", !label]
|
|
668
677
|
);
|
|
669
678
|
function setFixedDropdownVarWidth(x) {
|
package/shared/definition16.js
CHANGED
|
@@ -619,7 +619,7 @@ __decorate([
|
|
|
619
619
|
applyMixins(DelegatesARIACombobox, DelegatesARIAListbox);
|
|
620
620
|
applyMixins(Combobox$1, StartEnd, DelegatesARIACombobox);
|
|
621
621
|
|
|
622
|
-
const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0}}";
|
|
622
|
+
const styles = ":host{position:relative}.base{--_text-field-gutter-end: 44px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.icon{inset-inline-end:16px;inset-inline-start:unset}:not(.disabled) .icon{cursor:pointer}.disabled .icon{cursor:not-allowed}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.fieldset:focus-within:after{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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}";
|
|
623
623
|
|
|
624
624
|
var __defProp = Object.defineProperty;
|
|
625
625
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -642,6 +642,9 @@ let Combobox = class extends Combobox$1 {
|
|
|
642
642
|
this._popup.anchor = this._anchor;
|
|
643
643
|
}
|
|
644
644
|
};
|
|
645
|
+
__decorateClass([
|
|
646
|
+
attr
|
|
647
|
+
], Combobox.prototype, "appearance", 2);
|
|
645
648
|
__decorateClass([
|
|
646
649
|
attr
|
|
647
650
|
], Combobox.prototype, "placement", 2);
|
|
@@ -658,10 +661,16 @@ function renderLabel() {
|
|
|
658
661
|
${(x) => x.label}
|
|
659
662
|
</label>`;
|
|
660
663
|
}
|
|
661
|
-
const getStateClasses = ({
|
|
664
|
+
const getStateClasses = ({
|
|
665
|
+
disabled,
|
|
666
|
+
placeholder,
|
|
667
|
+
label,
|
|
668
|
+
appearance
|
|
669
|
+
}) => classNames(
|
|
662
670
|
"base",
|
|
663
671
|
["disabled", disabled],
|
|
664
672
|
["placeholder", Boolean(placeholder)],
|
|
673
|
+
[`appearance-${appearance}`, Boolean(appearance)],
|
|
665
674
|
["no-label", !label]
|
|
666
675
|
);
|
|
667
676
|
function setFixedDropdownVarWidth(x) {
|
package/shared/definition20.cjs
CHANGED
|
@@ -13,7 +13,7 @@ const classNames = require('./class-names.cjs');
|
|
|
13
13
|
const ref = require('./ref.cjs');
|
|
14
14
|
const keyCodes = require('./key-codes2.cjs');
|
|
15
15
|
|
|
16
|
-
const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--vvd-button-accent-
|
|
16
|
+
const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
|
|
17
17
|
|
|
18
18
|
var __defProp = Object.defineProperty;
|
|
19
19
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -173,40 +173,40 @@ function renderTextField(textFieldTag, buttonTag) {
|
|
|
173
173
|
}
|
|
174
174
|
function renderDigits(buttonTag, iconTag) {
|
|
175
175
|
return index.html`
|
|
176
|
-
<${buttonTag} id='btn1' value='1' stacked shape="pill" label=" " size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitOneLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
176
|
+
<${buttonTag} id='btn1' value='1' stacked appearance="ghost-light" shape="pill" label=" " size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitOneLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
177
177
|
c.event
|
|
178
178
|
)}"><${iconTag} slot='icon' name='one-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
179
|
-
<${buttonTag} id='btn2' value='2' stacked shape="pill" label='ABC' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitTwoLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
179
|
+
<${buttonTag} id='btn2' value='2' stacked appearance="ghost-light" shape="pill" label='ABC' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitTwoLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
180
180
|
c.event
|
|
181
181
|
)}"><${iconTag} slot='icon' name='two-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
182
|
-
<${buttonTag} id='btn3' value='3' stacked shape="pill" label='DEF' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitThreeLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
182
|
+
<${buttonTag} id='btn3' value='3' stacked appearance="ghost-light" shape="pill" label='DEF' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitThreeLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
183
183
|
c.event
|
|
184
184
|
)}"><${iconTag} slot='icon' name='three-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
185
|
-
<${buttonTag} id='btn4' value='4' stacked shape="pill" label='GHI' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFourLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
185
|
+
<${buttonTag} id='btn4' value='4' stacked appearance="ghost-light" shape="pill" label='GHI' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFourLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
186
186
|
c.event
|
|
187
187
|
)}"><${iconTag} slot='icon' name='four-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
188
|
-
<${buttonTag} id='btn5' value='5' stacked shape="pill" label='JKL' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFiveLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
188
|
+
<${buttonTag} id='btn5' value='5' stacked appearance="ghost-light" shape="pill" label='JKL' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFiveLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
189
189
|
c.event
|
|
190
190
|
)}"><${iconTag} slot='icon' name='five-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
191
|
-
<${buttonTag} id='btn6' value='6' stacked shape="pill" label='MNO' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSixLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
191
|
+
<${buttonTag} id='btn6' value='6' stacked appearance="ghost-light" shape="pill" label='MNO' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSixLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
192
192
|
c.event
|
|
193
193
|
)}"><${iconTag} slot='icon' name='six-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
194
|
-
<${buttonTag} id='btn7' value='7' stacked shape="pill" label='PQRS' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSevenLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
194
|
+
<${buttonTag} id='btn7' value='7' stacked appearance="ghost-light" shape="pill" label='PQRS' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSevenLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
195
195
|
c.event
|
|
196
196
|
)}"><${iconTag} slot='icon' name='seven-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
197
|
-
<${buttonTag} id='btn8' value='8' stacked shape="pill" label='TUV' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitEightLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
197
|
+
<${buttonTag} id='btn8' value='8' stacked appearance="ghost-light" shape="pill" label='TUV' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitEightLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
198
198
|
c.event
|
|
199
199
|
)}"><${iconTag} slot='icon' name='eight-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
200
|
-
<${buttonTag} id='btn9' value='9' stacked shape="pill" label='WXYZ' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitNineLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
200
|
+
<${buttonTag} id='btn9' value='9' stacked appearance="ghost-light" shape="pill" label='WXYZ' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitNineLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
201
201
|
c.event
|
|
202
202
|
)}"><${iconTag} slot='icon' name='nine-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
203
|
-
<${buttonTag} id='btnAsterisk' value='*' shape="pill" stacked size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitAsteriskLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
203
|
+
<${buttonTag} id='btnAsterisk' value='*' appearance="ghost-light" shape="pill" stacked size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitAsteriskLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
204
204
|
c.event
|
|
205
205
|
)}"><${iconTag} slot='icon' name='asterisk-2-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
206
|
-
<${buttonTag} id='btn0' value='0' stacked shape="pill" label='+' size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitZeroLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
206
|
+
<${buttonTag} id='btn0' value='0' stacked appearance="ghost-light" shape="pill" label='+' size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitZeroLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
207
207
|
c.event
|
|
208
208
|
)}"><${iconTag} slot='icon' name='zero-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
209
|
-
<${buttonTag} id='btnHashtag' value='#' stacked shape="pill" size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitHashtagLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
209
|
+
<${buttonTag} id='btnHashtag' value='#' stacked appearance="ghost-light" shape="pill" size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitHashtagLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
210
210
|
c.event
|
|
211
211
|
)}"><${iconTag} slot='icon' name='hashtag-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
212
212
|
`;
|
package/shared/definition20.js
CHANGED
|
@@ -11,7 +11,7 @@ import { c as classNames } from './class-names.js';
|
|
|
11
11
|
import { r as ref } from './ref.js';
|
|
12
12
|
import { b as keyEnter } from './key-codes2.js';
|
|
13
13
|
|
|
14
|
-
const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--vvd-button-accent-
|
|
14
|
+
const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
|
|
15
15
|
|
|
16
16
|
var __defProp = Object.defineProperty;
|
|
17
17
|
var __decorateClass = (decorators, target, key, kind) => {
|
|
@@ -171,40 +171,40 @@ function renderTextField(textFieldTag, buttonTag) {
|
|
|
171
171
|
}
|
|
172
172
|
function renderDigits(buttonTag, iconTag) {
|
|
173
173
|
return html`
|
|
174
|
-
<${buttonTag} id='btn1' value='1' stacked shape="pill" label=" " size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitOneLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
174
|
+
<${buttonTag} id='btn1' value='1' stacked appearance="ghost-light" shape="pill" label=" " size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitOneLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
175
175
|
c.event
|
|
176
176
|
)}"><${iconTag} slot='icon' name='one-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
177
|
-
<${buttonTag} id='btn2' value='2' stacked shape="pill" label='ABC' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitTwoLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
177
|
+
<${buttonTag} id='btn2' value='2' stacked appearance="ghost-light" shape="pill" label='ABC' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitTwoLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
178
178
|
c.event
|
|
179
179
|
)}"><${iconTag} slot='icon' name='two-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
180
|
-
<${buttonTag} id='btn3' value='3' stacked shape="pill" label='DEF' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitThreeLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
180
|
+
<${buttonTag} id='btn3' value='3' stacked appearance="ghost-light" shape="pill" label='DEF' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitThreeLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
181
181
|
c.event
|
|
182
182
|
)}"><${iconTag} slot='icon' name='three-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
183
|
-
<${buttonTag} id='btn4' value='4' stacked shape="pill" label='GHI' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFourLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
183
|
+
<${buttonTag} id='btn4' value='4' stacked appearance="ghost-light" shape="pill" label='GHI' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFourLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
184
184
|
c.event
|
|
185
185
|
)}"><${iconTag} slot='icon' name='four-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
186
|
-
<${buttonTag} id='btn5' value='5' stacked shape="pill" label='JKL' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFiveLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
186
|
+
<${buttonTag} id='btn5' value='5' stacked appearance="ghost-light" shape="pill" label='JKL' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitFiveLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
187
187
|
c.event
|
|
188
188
|
)}"><${iconTag} slot='icon' name='five-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
189
|
-
<${buttonTag} id='btn6' value='6' stacked shape="pill" label='MNO' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSixLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
189
|
+
<${buttonTag} id='btn6' value='6' stacked appearance="ghost-light" shape="pill" label='MNO' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSixLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
190
190
|
c.event
|
|
191
191
|
)}"><${iconTag} slot='icon' name='six-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
192
|
-
<${buttonTag} id='btn7' value='7' stacked shape="pill" label='PQRS' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSevenLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
192
|
+
<${buttonTag} id='btn7' value='7' stacked appearance="ghost-light" shape="pill" label='PQRS' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitSevenLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
193
193
|
c.event
|
|
194
194
|
)}"><${iconTag} slot='icon' name='seven-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
195
|
-
<${buttonTag} id='btn8' value='8' stacked shape="pill" label='TUV' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitEightLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
195
|
+
<${buttonTag} id='btn8' value='8' stacked appearance="ghost-light" shape="pill" label='TUV' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitEightLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
196
196
|
c.event
|
|
197
197
|
)}"><${iconTag} slot='icon' name='eight-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
198
|
-
<${buttonTag} id='btn9' value='9' stacked shape="pill" label='WXYZ' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitNineLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
198
|
+
<${buttonTag} id='btn9' value='9' stacked appearance="ghost-light" shape="pill" label='WXYZ' size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitNineLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
199
199
|
c.event
|
|
200
200
|
)}"><${iconTag} slot='icon' name='nine-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
201
|
-
<${buttonTag} id='btnAsterisk' value='*' shape="pill" stacked size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitAsteriskLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
201
|
+
<${buttonTag} id='btnAsterisk' value='*' appearance="ghost-light" shape="pill" stacked size='condensed' class="digit-btn" aria-label="${(x) => x.locale.dialPad.digitAsteriskLabel}" ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
202
202
|
c.event
|
|
203
203
|
)}"><${iconTag} slot='icon' name='asterisk-2-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
204
|
-
<${buttonTag} id='btn0' value='0' stacked shape="pill" label='+' size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitZeroLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
204
|
+
<${buttonTag} id='btn0' value='0' stacked appearance="ghost-light" shape="pill" label='+' size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitZeroLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
205
205
|
c.event
|
|
206
206
|
)}"><${iconTag} slot='icon' name='zero-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
207
|
-
<${buttonTag} id='btnHashtag' value='#' stacked shape="pill" size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitHashtagLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
207
|
+
<${buttonTag} id='btnHashtag' value='#' stacked appearance="ghost-light" shape="pill" size='condensed' class="digit-btn" aria-label=${(x) => x.locale.dialPad.digitHashtagLabel} ?disabled="${(x) => x.disabled}" @click="${(x, c) => x._onDigit(
|
|
208
208
|
c.event
|
|
209
209
|
)}"><${iconTag} slot='icon' name='hashtag-solid' class='digit-btn-num'></${iconTag}></${buttonTag}>
|
|
210
210
|
`;
|
package/shared/definition29.cjs
CHANGED
|
@@ -911,6 +911,7 @@ const menuItemDefinition = MenuItem.compose({
|
|
|
911
911
|
const menuItemRegistries = [menuItemDefinition(), ...definition.iconRegistries];
|
|
912
912
|
const registerMenuItem = index.registerFactory(menuItemRegistries);
|
|
913
913
|
|
|
914
|
+
exports.MenuItem = MenuItem;
|
|
914
915
|
exports.MenuItemRole = MenuItemRole;
|
|
915
916
|
exports.menuItemDefinition = menuItemDefinition;
|
|
916
917
|
exports.menuItemRegistries = menuItemRegistries;
|
package/shared/definition29.js
CHANGED
|
@@ -909,4 +909,4 @@ const menuItemDefinition = MenuItem.compose({
|
|
|
909
909
|
const menuItemRegistries = [menuItemDefinition(), ...iconRegistries];
|
|
910
910
|
const registerMenuItem = registerFactory(menuItemRegistries);
|
|
911
911
|
|
|
912
|
-
export { MenuItemRole as M, menuItemRegistries as a, Menu as b, menuItemDefinition as m, registerMenuItem as r };
|
|
912
|
+
export { MenuItemRole as M, menuItemRegistries as a, Menu as b, MenuItem as c, menuItemDefinition as m, registerMenuItem as r };
|