@vialiq/web-components 0.3.0 → 0.4.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/button/vi-button.js +1 -1
- package/index.d.ts +4 -1
- package/index.js +1 -0
- package/input/index.d.ts +1 -1
- package/input/index.d.ts.map +1 -1
- package/input/vi-input.d.ts +3 -0
- package/input/vi-input.d.ts.map +1 -1
- package/input/vi-input.js +22 -7
- package/package.json +2 -2
package/button/vi-button.js
CHANGED
|
@@ -3,7 +3,7 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|
|
3
3
|
import { F as FocusableMixin } from '../focusable-mixin-CmxOyPX5.js';
|
|
4
4
|
import { V as ViElement } from '../vi-element-C6GfDPs3.js';
|
|
5
5
|
|
|
6
|
-
const buttonStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--vi-spacing-xs, 8px);border:var(--vi-border-width-thin, 1px) solid transparent;border-radius:var(--vi-button-shape-border-radius, var(--vi-border-radius-md, 4px));padding:var(--vi-button-spacing-padding-block, var(--vi-spacing-sm, 16px)) var(--vi-button-spacing-padding-inline, var(--vi-spacing-md, 24px));font-size:var(--vi-button-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-button-typography-font-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-line-height-tight, 1.2);cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity var(--vi-button-effect-transition-duration, .16s) ease,box-shadow var(--vi-button-effect-transition-duration, .16s) ease,transform var(--vi-button-effect-transition-duration, .16s) ease}}:host{display:inline-block}:host([size=xs]){--vi-button-spacing-padding-block: 2px;--vi-button-spacing-padding-inline: 8px;--vi-button-typography-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-button-spacing-padding-block: 4px;--vi-button-spacing-padding-inline: 12px;--vi-button-typography-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-button-spacing-padding-block: 12px;--vi-button-spacing-padding-inline: 24px;--vi-button-typography-font-size: var(--vi-font-size-lg, 18px)}:host([full-width]){display:block}:host([full-width]) .button{width:100%}:host([icon-only]) .button{aspect-ratio:1/1;padding:var(--vi-button-spacing-padding-block, var(--vi-spacing-sm, 16px));justify-content:center}:host([icon-only]) .label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([variant=primary]) .button{background-color:var(--vi-button-surface-primary-background-color, var(--vi-color-primary, #3676d0));color:var(--vi-button-surface-primary-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=secondary]) .button{background-color:var(--vi-button-surface-secondary-background-color, var(--vi-color-secondary, #f0f4f8));color:var(--vi-button-surface-secondary-text-color, var(--vi-color-foreground, #111827));border-color:var(--vi-color-border, #e5e7eb)}:host([variant=danger]) .button{background-color:var(--vi-button-surface-danger-background-color, var(--vi-color-error, #ef4444));color:var(--vi-button-surface-danger-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=success]) .button{background-color:var(--vi-button-surface-success-background-color, var(--vi-color-success, #489167));color:var(--vi-button-surface-success-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=info]) .button{background-color:var(--vi-button-surface-info-background-color, var(--vi-color-info, #3676d0));color:var(--vi-button-surface-info-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=ghost]) .button{background-color:var(--vi-button-surface-ghost-background-color, transparent);color:var(--vi-button-surface-ghost-text-color, var(--vi-color-primary, #3676d0))}:host([disabled]) .button,.button:disabled{opacity:.6;cursor:not-allowed}.button:not(:disabled){box-shadow:var(--vi-button-effect-shadow-raised, inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .08))}.button:hover:not(:disabled){opacity:.92;box-shadow:var(--vi-button-effect-shadow-hover, inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 8px rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .1));transform:translateY(-1px)}.button:active:not(:disabled){box-shadow:var(--vi-button-effect-shadow-pressed, inset 0 2px 4px rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .06));transform:translateY(1px);opacity:1}:host([variant=ghost]) .button:hover:not(:disabled){background-color:#0000000a;text-decoration:underline;opacity:1}:host([variant=ghost]) .button:not(:disabled){box-shadow:none}:host([variant=ghost]) .button:active:not(:disabled){box-shadow:inset 0 1px 3px #00000024;transform:translateY(0)}.button:focus-visible:not(:disabled){outline:var(--vi-border-width-base, 2px) solid var(--vi-button-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:3px;box-shadow:var(--vi-button-effect-shadow-raised, inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .08)),0 0 0 3px var(--vi-button-focus-ring-glow, var(--vi-color-
|
|
6
|
+
const buttonStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--vi-spacing-xs, 8px);border:var(--vi-border-width-thin, 1px) solid transparent;border-radius:var(--vi-button-shape-border-radius, var(--vi-border-radius-md, 4px));padding:var(--vi-button-spacing-padding-block, var(--vi-spacing-sm, 16px)) var(--vi-button-spacing-padding-inline, var(--vi-spacing-md, 24px));font-size:var(--vi-button-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-button-typography-font-weight, var(--vi-font-weight-semibold, 600));line-height:var(--vi-line-height-tight, 1.2);cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity var(--vi-button-effect-transition-duration, .16s) ease,box-shadow var(--vi-button-effect-transition-duration, .16s) ease,transform var(--vi-button-effect-transition-duration, .16s) ease}}:host{display:inline-block}:host([size=xs]){--vi-button-spacing-padding-block: 2px;--vi-button-spacing-padding-inline: 8px;--vi-button-typography-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-button-spacing-padding-block: 4px;--vi-button-spacing-padding-inline: 12px;--vi-button-typography-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-button-spacing-padding-block: 12px;--vi-button-spacing-padding-inline: 24px;--vi-button-typography-font-size: var(--vi-font-size-lg, 18px)}:host([full-width]){display:block}:host([full-width]) .button{width:100%}:host([icon-only]) .button{aspect-ratio:1/1;padding:var(--vi-button-spacing-padding-block, var(--vi-spacing-sm, 16px));justify-content:center}:host([icon-only]) .label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([variant=primary]) .button{background-color:var(--vi-button-surface-primary-background-color, var(--vi-color-primary, #3676d0));color:var(--vi-button-surface-primary-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=secondary]) .button{background-color:var(--vi-button-surface-secondary-background-color, var(--vi-color-secondary, #f0f4f8));color:var(--vi-button-surface-secondary-text-color, var(--vi-color-foreground, #111827));border-color:var(--vi-color-border, #e5e7eb)}:host([variant=danger]) .button{background-color:var(--vi-button-surface-danger-background-color, var(--vi-color-error, #ef4444));color:var(--vi-button-surface-danger-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=success]) .button{background-color:var(--vi-button-surface-success-background-color, var(--vi-color-success, #489167));color:var(--vi-button-surface-success-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=info]) .button{background-color:var(--vi-button-surface-info-background-color, var(--vi-color-info, #3676d0));color:var(--vi-button-surface-info-text-color, var(--vi-color-grey-100, #f5f5f5))}:host([variant=ghost]) .button{background-color:var(--vi-button-surface-ghost-background-color, transparent);color:var(--vi-button-surface-ghost-text-color, var(--vi-color-primary, #3676d0))}:host([disabled]) .button,.button:disabled{opacity:.6;cursor:not-allowed}.button:not(:disabled){box-shadow:var(--vi-button-effect-shadow-raised, inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .08))}.button:hover:not(:disabled){opacity:.92;box-shadow:var(--vi-button-effect-shadow-hover, inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 8px rgba(0, 0, 0, .22), 0 2px 4px rgba(0, 0, 0, .1));transform:translateY(-1px)}.button:active:not(:disabled){box-shadow:var(--vi-button-effect-shadow-pressed, inset 0 2px 4px rgba(0, 0, 0, .22), 0 1px 1px rgba(0, 0, 0, .06));transform:translateY(1px);opacity:1}:host([variant=ghost]) .button:hover:not(:disabled){background-color:#0000000a;text-decoration:underline;opacity:1}:host([variant=ghost]) .button:not(:disabled){box-shadow:none}:host([variant=ghost]) .button:active:not(:disabled){box-shadow:inset 0 1px 3px #00000024;transform:translateY(0)}.button:focus-visible:not(:disabled){outline:var(--vi-border-width-base, 2px) solid var(--vi-button-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:3px;box-shadow:var(--vi-button-effect-shadow-raised, inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .08)),0 0 0 3px var(--vi-button-focus-ring-glow, var(--vi-color-primary, #3676d0))}@media(prefers-reduced-motion:reduce){.button{transform:none!important;transition-property:color,background-color,border-color,box-shadow,opacity!important}}.icon{order:-1;display:inline-flex;flex-shrink:0}.icon[hidden]{display:none}:host([icon-placement=end]) .icon{order:1}::slotted(vi-icon),::slotted(svg){--vi-icon-size: 1em;width:1em;height:1em}.label{flex:1 1 auto;min-width:0}";
|
|
7
7
|
|
|
8
8
|
function applyDecs2203RFactory() {
|
|
9
9
|
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
package/index.d.ts
CHANGED
|
@@ -4,11 +4,14 @@ export type { ControlStatus } from './base/validity-mixin.js';
|
|
|
4
4
|
export { ViButton } from './button/vi-button.js';
|
|
5
5
|
export type { ButtonVariant, ButtonSize, ButtonIconPlacement } from './button/vi-button.js';
|
|
6
6
|
export { ViInput } from './input/vi-input.js';
|
|
7
|
-
export type { InputType } from './input/vi-input.js';
|
|
7
|
+
export type { InputType, InputSize } from './input/vi-input.js';
|
|
8
8
|
export { ViIcon } from './icons/vi-icon.js';
|
|
9
9
|
export { registerIcons, getIcon } from './icons/registry.js';
|
|
10
10
|
export type { SvgIconDef } from './icons/registry.js';
|
|
11
11
|
export { ViRadio } from './radio/vi-radio.js';
|
|
12
|
+
export type { RadioSize } from './radio/vi-radio.js';
|
|
12
13
|
export { ViRadioGroup } from './radio/vi-radio-group.js';
|
|
13
14
|
export type { RadioGroupOrientation } from './radio/vi-radio-group.js';
|
|
15
|
+
export { ViCheckbox } from './checkbox/vi-checkbox.js';
|
|
16
|
+
export type { CheckboxSize } from './checkbox/vi-checkbox.js';
|
|
14
17
|
//# sourceMappingURL=index.d.ts.map
|
package/index.js
CHANGED
package/input/index.d.ts
CHANGED
package/input/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}
|
package/input/vi-input.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ import { ViElement } from '../base/vi-element.js';
|
|
|
8
8
|
* separate components.
|
|
9
9
|
*/
|
|
10
10
|
export type InputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
|
|
11
|
+
export type InputSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
11
12
|
declare const ViInput_base: typeof ViElement & (new (...args: any[]) => import("../base/focusable-mixin.js").FocusableInterface) & (new (...args: any[]) => import("../base/validity-mixin.js").ValidityInterface);
|
|
12
13
|
/**
|
|
13
14
|
* vi-input
|
|
@@ -66,6 +67,8 @@ export declare class ViInput extends ViInput_base {
|
|
|
66
67
|
accessor value: string;
|
|
67
68
|
/** When true, disables the input and removes it from the tab order. */
|
|
68
69
|
accessor disabled: boolean;
|
|
70
|
+
/** Size scale — controls padding and font-size. */
|
|
71
|
+
accessor size: InputSize;
|
|
69
72
|
/** When true, the value cannot be edited but is still submitted. */
|
|
70
73
|
accessor readonly: boolean;
|
|
71
74
|
protected _testValidity(): Partial<ValidityStateFlags>;
|
package/input/vi-input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vi-input.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/vi-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAC;;
|
|
1
|
+
{"version":3,"file":"vi-input.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/input/vi-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAGb,OAAO,EAAiB,KAAK,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAIlD;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAC;AAEb,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,OAAQ,SAAQ,YAAwC;IACnE,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAgB,MAAM,0BAEpB;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,mBAA0B;IAEvD,cAAuB,iBAAiB,IAAI,gBAAgB,GAAG,IAAI,CAElE;IAI4B,QAAQ,CAAC,MAAM,EAAE,aAAa,CAAa;IAC5B,QAAQ,CAAC,QAAQ,UAAS;IAC1D,QAAQ,CAAC,eAAe,SAAM;IAI1C,uFAAuF;IAC5C,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAU;IAE7E,qCAAqC;IACzB,QAAQ,CAAC,WAAW,SAAM;IAEtC,yDAAyD;IAC7C,QAAQ,CAAC,IAAI,SAAM;IAE/B,wEAAwE;IAC5D,QAAQ,CAAC,KAAK,SAAM;IAEhC,uEAAuE;IAC3B,QAAQ,CAAC,QAAQ,UAAS;IAEtE,mDAAmD;IACR,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE3E,oEAAoE;IACxB,QAAQ,CAAC,QAAQ,UAAS;IAOtE,SAAS,CAAC,aAAa,IAAI,OAAO,CAAC,kBAAkB,CAAC;IAmC7C,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAU/C,yEAAyE;IACzE,iBAAiB,IAAI,IAAI;IAMzB,6EAA6E;IAC7E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAM7C,OAAO,CAAC,QAAQ;IAahB,OAAO,CAAC,SAAS;IAejB,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,KAAK,kBAAkB,GAgB7B;IAEQ,MAAM,IAAI,cAAc;CAkClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|
package/input/vi-input.js
CHANGED
|
@@ -66,7 +66,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
|
|
|
66
66
|
* - The binding is to a custom element property — use .prop=${val} instead
|
|
67
67
|
*/ const ifNonEmpty = (value)=>ifDefined(value === '' ? undefined : value ?? undefined);
|
|
68
68
|
|
|
69
|
-
const inputStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.input-field{display:flex;flex-direction:column;gap:var(--vi-input-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.input-control{appearance:none;-webkit-appearance:none;display:block;width:100%;box-sizing:border-box;min-height:var(--vi-input-sizing-min-height, 40px);border:var(--vi-border-width-thin, 1px) solid var(--vi-input-border-color, var(--vi-color-grey-300, #e0e0e0));border-radius:var(--vi-input-shape-border-radius, var(--vi-border-radius-lg, 8px));padding:var(--vi-input-spacing-padding-block, var(--vi-spacing-xs, 8px)) var(--vi-input-spacing-padding-inline, var(--vi-spacing-sm, 16px));font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-input-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-normal, 400);line-height:var(--vi-input-typography-line-height, var(--vi-line-height-normal, 1.5));color:var(--vi-input-text-color, var(--vi-color-foreground, #111827));background-color:var(--vi-input-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease}.input-control:hover:not(:focus-visible){border-color:var(--vi-input-border-color-hover, var(--vi-color-grey-500, #9e9e9e))}.input-control:focus-visible,.input-control:focus{outline:var(--vi-border-width-base, 2px) solid var(--vi-input-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-input-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.input-control::placeholder{color:var(--vi-input-placeholder-color, var(--vi-color-grey-500, #9e9e9e))}.input-helper{font-size:var(--vi-input-helper-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-helper-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}.input-error{font-size:var(--vi-input-error-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-error-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}@media(prefers-reduced-motion:reduce){.input-control{transition:none}}}:host{display:block;outline:none}:host([disabled]){opacity:.6;cursor:not-allowed;pointer-events:none}:host([status=invalid]){--vi-input-border-color: var(--vi-color-error, #ef4444);--vi-input-border-color-hover: var(--vi-color-
|
|
69
|
+
const inputStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.input-field{display:flex;flex-direction:column;gap:var(--vi-input-spacing-field-gap, var(--vi-spacing-xs, 8px));width:100%}.input-control{appearance:none;-webkit-appearance:none;display:block;width:100%;box-sizing:border-box;min-height:var(--vi-input-sizing-min-height, 40px);border:var(--vi-border-width-thin, 1px) solid var(--vi-input-border-color, var(--vi-color-grey-300, #e0e0e0));border-radius:var(--vi-input-shape-border-radius, var(--vi-border-radius-lg, 8px));padding:var(--vi-input-spacing-padding-block, var(--vi-spacing-xs, 8px)) var(--vi-input-spacing-padding-inline, var(--vi-spacing-sm, 16px));font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-input-typography-font-size, var(--vi-font-size-base, 16px));font-weight:var(--vi-font-weight-normal, 400);line-height:var(--vi-input-typography-line-height, var(--vi-line-height-normal, 1.5));color:var(--vi-input-text-color, var(--vi-color-foreground, #111827));background-color:var(--vi-input-background-color, var(--vi-color-background, #ffffff));transition:border-color .15s ease,box-shadow .15s ease}.input-control:hover:not(:focus-visible){border-color:var(--vi-input-border-color-hover, var(--vi-color-grey-500, #9e9e9e))}.input-control:focus-visible,.input-control:focus{outline:var(--vi-border-width-base, 2px) solid var(--vi-input-focus-ring-color, var(--vi-color-primary, #3676d0));outline-offset:0;box-shadow:0 0 0 3px var(--vi-input-focus-ring-glow, var(--vi-color-blue-200, #cee6ff))}.input-control::placeholder{color:var(--vi-input-placeholder-color, var(--vi-color-grey-500, #9e9e9e))}.input-helper{font-size:var(--vi-input-helper-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-helper-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}.input-error{font-size:var(--vi-input-error-size, var(--vi-font-size-xs, 12px));line-height:var(--vi-input-error-leading, var(--vi-line-height-normal, 1.5));color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}@media(prefers-reduced-motion:reduce){.input-control{transition:none}}}:host{display:block;outline:none}:host([disabled]){opacity:.6;cursor:not-allowed;pointer-events:none}:host([status=invalid]){--vi-input-border-color: var(--vi-color-error, #ef4444);--vi-input-border-color-hover: var(--vi-color-error, #ef4444);--vi-input-focus-ring-color: var(--vi-color-error, #ef4444);--vi-input-focus-ring-glow: var(--vi-color-red-100, #ffccce);--vi-input-label-color: var(--vi-color-error, #ef4444)}:host([status=valid]){--vi-input-border-color: var(--vi-color-success, #489167);--vi-input-border-color-hover: var(--vi-color-success, #489167);--vi-input-focus-ring-color: var(--vi-color-success, #489167);--vi-input-focus-ring-glow: var(--vi-color-green-100, #e6f0eb)}.input-validation{font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}.input-validation--invalid{color:var(--vi-input-error-color, var(--vi-color-error, #ef4444))}.input-validation--valid{color:var(--vi-input-success-color, var(--vi-color-success, #489167))}::slotted([slot=helper]){font-family:var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif);font-size:var(--vi-font-size-xs, 12px);line-height:var(--vi-line-height-normal, 1.5);letter-spacing:var(--vi-letter-spacing-wider, .05em);color:var(--vi-input-helper-color, var(--vi-color-grey-500, #9e9e9e))}:host([size=xs]){--vi-input-spacing-padding-block: 2px;--vi-input-spacing-padding-inline: 8px;--vi-input-typography-font-size: var(--vi-font-size-xs, 12px)}:host([size=sm]){--vi-input-spacing-padding-block: 4px;--vi-input-spacing-padding-inline: 12px;--vi-input-typography-font-size: var(--vi-font-size-sm, 14px)}:host([size=lg]){--vi-input-spacing-padding-block: 12px;--vi-input-spacing-padding-inline: 20px;--vi-input-typography-font-size: var(--vi-font-size-lg, 18px)}";
|
|
70
70
|
|
|
71
71
|
function applyDecs2203RFactory() {
|
|
72
72
|
function createAddInitializerMethod(initializers, decoratorFinishedRef) {
|
|
@@ -443,9 +443,9 @@ function _apply_decs_2203_r(targetClass, memberDecs, classDecs, parentClass) {
|
|
|
443
443
|
function _identity(x) {
|
|
444
444
|
return x;
|
|
445
445
|
}
|
|
446
|
-
var _dec, _initClass, _ValidityMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, // ── ValidityMixin contract — must be declared as @property —————————————
|
|
446
|
+
var _dec, _initClass, _ValidityMixin, _dec1, _dec2, _dec3, _dec4, _dec5, _dec6, _dec7, _dec8, _dec9, _dec10, // ── ValidityMixin contract — must be declared as @property —————————————
|
|
447
447
|
_init_status, _init_required, _init_validityMessage, // ── Public API ─────────────────────────────────────────────────────────────
|
|
448
|
-
/** Input type. Controls the keyboard/picker on mobile and browser validation hints. */ _init_type, /** Native input placeholder text. */ _init_placeholder, /** Form field name. Submitted with the form when set. */ _init_name, /** Current value. Synced to ElementInternals for form participation. */ _init_value, /** When true, disables the input and removes it from the tab order. */ _init_disabled, /** When true, the value cannot be edited but is still submitted. */ _init_readonly, _initProto;
|
|
448
|
+
/** Input type. Controls the keyboard/picker on mobile and browser validation hints. */ _init_type, /** Native input placeholder text. */ _init_placeholder, /** Form field name. Submitted with the form when set. */ _init_name, /** Current value. Synced to ElementInternals for form participation. */ _init_value, /** When true, disables the input and removes it from the tab order. */ _init_disabled, /** Size scale — controls padding and font-size. */ _init_size, /** When true, the value cannot be edited but is still submitted. */ _init_readonly, _initProto;
|
|
449
449
|
let _ViInput;
|
|
450
450
|
_dec = customElement('vi-input'), _dec1 = property({
|
|
451
451
|
reflect: true
|
|
@@ -459,6 +459,9 @@ _dec = customElement('vi-input'), _dec1 = property({
|
|
|
459
459
|
type: Boolean,
|
|
460
460
|
reflect: true
|
|
461
461
|
}), _dec9 = property({
|
|
462
|
+
type: String,
|
|
463
|
+
reflect: true
|
|
464
|
+
}), _dec10 = property({
|
|
462
465
|
type: Boolean,
|
|
463
466
|
reflect: true
|
|
464
467
|
});
|
|
@@ -469,7 +472,7 @@ new class extends _identity {
|
|
|
469
472
|
static{
|
|
470
473
|
class ViInput extends (_ValidityMixin = ValidityMixin(FocusableMixin(ViElement))) {
|
|
471
474
|
static{
|
|
472
|
-
({ e: [_init_status, _init_required, _init_validityMessage, _init_type, _init_placeholder, _init_name, _init_value, _init_disabled, _init_readonly, _initProto], c: [_ViInput, _initClass] } = _apply_decs_2203_r(this, [
|
|
475
|
+
({ e: [_init_status, _init_required, _init_validityMessage, _init_type, _init_placeholder, _init_name, _init_value, _init_disabled, _init_size, _init_readonly, _initProto], c: [_ViInput, _initClass] } = _apply_decs_2203_r(this, [
|
|
473
476
|
[
|
|
474
477
|
_dec1,
|
|
475
478
|
1,
|
|
@@ -513,6 +516,11 @@ new class extends _identity {
|
|
|
513
516
|
[
|
|
514
517
|
_dec9,
|
|
515
518
|
1,
|
|
519
|
+
"size"
|
|
520
|
+
],
|
|
521
|
+
[
|
|
522
|
+
_dec10,
|
|
523
|
+
1,
|
|
516
524
|
"readonly"
|
|
517
525
|
]
|
|
518
526
|
], [
|
|
@@ -583,12 +591,19 @@ new class extends _identity {
|
|
|
583
591
|
set disabled(_v) {
|
|
584
592
|
this.#___private_disabled_8 = _v;
|
|
585
593
|
}
|
|
586
|
-
#
|
|
594
|
+
#___private_size_9 = _init_size(this, 'md');
|
|
595
|
+
get size() {
|
|
596
|
+
return this.#___private_size_9;
|
|
597
|
+
}
|
|
598
|
+
set size(_v) {
|
|
599
|
+
this.#___private_size_9 = _v;
|
|
600
|
+
}
|
|
601
|
+
#___private_readonly_10 = _init_readonly(this, false);
|
|
587
602
|
get readonly() {
|
|
588
|
-
return this.#
|
|
603
|
+
return this.#___private_readonly_10;
|
|
589
604
|
}
|
|
590
605
|
set readonly(_v) {
|
|
591
|
-
this.#
|
|
606
|
+
this.#___private_readonly_10 = _v;
|
|
592
607
|
}
|
|
593
608
|
// ── ValidityMixin hook ─────────────────────────────────────────────────────
|
|
594
609
|
// _testValidity is declared protected in ValidityInterface, but TypeScript's
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vialiq/web-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
}
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
|
-
"@vialiq/flux-ui": "^0.
|
|
53
|
+
"@vialiq/flux-ui": "^0.3.0",
|
|
54
54
|
"@vialiq/icons": ">=0.0.3 <0.1.0",
|
|
55
55
|
"lit": "^3.0.0"
|
|
56
56
|
},
|