@vialiq/web-components 0.22.0 → 0.23.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.
Files changed (4) hide show
  1. package/label/vi-label.d.ts +1 -0
  2. package/label/vi-label.d.ts.map +1 -1
  3. package/label/vi-label.js +30 -4
  4. package/package.json +3 -3
package/label/vi-label.d.ts CHANGED
@@ -43,6 +43,7 @@ export declare class ViLabel extends ViElement {
43
43
  private _hasTooltip;
44
44
  private _handleSlotChange;
45
45
  private _handleClick;
46
+ updated(changedProperties: Map<string | number | symbol, unknown>): void;
46
47
  render(): TemplateResult;
47
48
  }
48
49
  declare global {
package/label/vi-label.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vi-label.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/label/vi-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,0BAEpB;IAEF,mCAAmC;IACP,QAAQ,CAAC,GAAG,SAAM;IAE9C,kCAAkC;IACL,QAAQ,CAAC,QAAQ,UAAS;IAEvD,6BAA6B;IACA,QAAQ,CAAC,QAAQ,UAAS;IAEvD,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAEtE,wBAAwB;IACI,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE5D,8BAA8B;IACa,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAa;IAEpF,0BAA0B;IACiB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAa;IAEhF,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,YAAY;IAeX,MAAM,IAAI,cAAc;CA6BlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
1
+ {"version":3,"file":"vi-label.d.ts","sourceRoot":"","sources":["../../../../libs/web-components/src/label/vi-label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,0BAEpB;IAEF,mCAAmC;IACP,QAAQ,CAAC,GAAG,SAAM;IAE9C,kCAAkC;IACL,QAAQ,CAAC,QAAQ,UAAS;IAEvD,6BAA6B;IACA,QAAQ,CAAC,QAAQ,UAAS;IAEvD,6BAA6B;IACe,QAAQ,CAAC,QAAQ,UAAS;IAEtE,wBAAwB;IACI,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAQ;IAE5D,8BAA8B;IACa,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAa;IAEpF,0BAA0B;IACiB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAa;IAEhF,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,YAAY;IAuBX,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAuBxE,MAAM,IAAI,cAAc;CA6BlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
package/label/vi-label.js CHANGED
@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
3
3
  import { classMap } from 'lit/directives/class-map.js';
4
4
  import { V as ViElement } from '../vi-element-C6GfDPs3.js';
5
5
 
6
- const labelStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.vi-label{--vi-label-font-size: var(--vi-font-size-sm, var(--vi-font-size-sm, 14px));--vi-label-font-weight: var(--vi-font-weight-medium, var(--vi-font-weight-medium, 500));--vi-label-color: var(--vi-text-primary, var(--vi-text-primary, #111827));--vi-label-color-disabled: var(--vi-text-disabled, var(--vi-text-disabled, #9e9e9e));--vi-label-required-color: var(--vi-color-error, var(--vi-color-error, #ef4444));--vi-label-optional-color: var(--vi-text-helper, var(--vi-text-helper, #9e9e9e));--vi-label-gap: 4px}.vi-label{display:inline-flex;align-items:center;gap:var(--vi-label-gap);font-size:var(--vi-label-font-size);font-weight:var(--vi-label-font-weight);color:var(--vi-label-color);line-height:1.5;margin:0}.vi-label.size-sm{--vi-label-font-size: var(--vi-font-size-xs, var(--vi-font-size-xs, 12px))}.vi-label.size-lg{--vi-label-font-size: var(--vi-font-size-base, var(--vi-font-size-base, 16px))}.vi-label.is-disabled{color:var(--vi-label-color-disabled);cursor:default}.vi-label-required{color:var(--vi-label-required-color)}.vi-label-optional{color:var(--vi-label-optional-color);font-weight:400}}:host{vertical-align:middle}:host([layout=stacked]){display:block;margin-bottom:var(--vi-label-margin-bottom, 8px)}:host([layout=inline]){display:inline-flex;align-items:center;margin-right:var(--vi-label-margin-inline, 12px);margin-bottom:0}:host([type=primary]) .vi-label{--vi-label-color: var(--vi-color-text-primary, var(--vi-text-primary, #111827))}:host([type=secondary]) .vi-label{--vi-label-color: var(--vi-color-text-secondary, var(--vi-text-secondary, #4b5563))}";
6
+ const labelStyles = "@charset \"UTF-8\";@layer reset,components,utilities;@layer components{.vi-label{--vi-label-font-size: var(--vi-font-size-sm, var(--vi-font-size-sm, 14px));--vi-label-font-weight: var(--vi-font-weight-medium, var(--vi-font-weight-medium, 500));--vi-label-color: var(--vi-text-primary, var(--vi-text-primary, #111827));--vi-label-color-disabled: var(--vi-text-disabled, var(--vi-text-disabled, #9e9e9e));--vi-label-required-color: var(--vi-color-error, var(--vi-color-error, #ef4444));--vi-label-optional-color: var(--vi-text-helper, var(--vi-text-helper, #9e9e9e));--vi-label-gap: 4px}.vi-label{display:inline-flex;align-items:center;gap:var(--vi-label-gap);font-size:var(--vi-label-font-size);font-weight:var(--vi-label-font-weight);color:var(--vi-label-color);line-height:1.5;margin:0}.vi-label.size-sm{--vi-label-font-size: var(--vi-font-size-xs, var(--vi-font-size-xs, 12px))}.vi-label.size-lg{--vi-label-font-size: var(--vi-font-size-base, var(--vi-font-size-base, 16px))}.vi-label.is-disabled{color:var(--vi-label-color-disabled);cursor:default}.vi-label-required{color:var(--vi-label-required-color)}.vi-label-optional{color:var(--vi-label-optional-color);font-weight:400}}:host{display:inline-block;vertical-align:middle;color:var(--vi-label-color, var(--vi-text-primary, var(--vi-text-primary, #111827)));font-size:var(--vi-label-font-size, var(--vi-font-size-sm, var(--vi-font-size-sm, 14px)));font-weight:var(--vi-label-font-weight, var(--vi-font-weight-medium, var(--vi-font-weight-medium, 500)))}:host([layout=stacked]){display:block;margin-bottom:var(--vi-label-margin-bottom, 8px)}:host([layout=inline]){display:inline-flex;align-items:center;margin-right:var(--vi-label-margin-inline, 12px);margin-bottom:0}:host([size=sm]){--vi-label-font-size: var(--vi-font-size-xs, var(--vi-font-size-xs, 12px))}:host([size=lg]){--vi-label-font-size: var(--vi-font-size-base, var(--vi-font-size-base, 16px))}:host([disabled]){color:var(--vi-label-color-disabled, var(--vi-text-disabled, var(--vi-text-disabled, #9e9e9e)));cursor:default}:host([type=primary]){--vi-label-color: var(--vi-color-text-primary, var(--vi-text-primary, #111827))}:host([type=secondary]){--vi-label-color: var(--vi-color-text-secondary, var(--vi-text-secondary, #4b5563))}::slotted(vi-tooltip){margin-inline-start:var(--vi-label-gap, 4px)}";
7
7
 
8
8
  function applyDecs2203RFactory() {
9
9
  function createAddInitializerMethod(initializers, decoratorFinishedRef) {
@@ -509,18 +509,44 @@ new class extends _identity {
509
509
  this.requestUpdate();
510
510
  }
511
511
  _handleClick(e) {
512
- if (this.disabled || !this.for) return;
513
- e.preventDefault();
514
- // Cross shadow boundary workaround
512
+ if (this.disabled) {
513
+ e.preventDefault();
514
+ return;
515
+ }
516
+ if (!this.for) {
517
+ return; // Do not prevent default if it's wrapping an input normally
518
+ }
519
+ // Custom elements are not natively 'labelable' by the browser, so we must
520
+ // manually route the focus/click.
515
521
  const rootNode = this.getRootNode();
516
522
  const target = rootNode.getElementById(this.for);
517
523
  if (target) {
524
+ e.preventDefault();
518
525
  target.focus();
519
526
  if ('click' in target && typeof target.click === 'function') {
520
527
  target.click();
521
528
  }
522
529
  }
523
530
  }
531
+ updated(changedProperties) {
532
+ super.updated(changedProperties);
533
+ // Cross shadow boundary workaround for screen readers
534
+ // Link the aria-labelledby of the target to this label's ID natively in Light DOM
535
+ if (changedProperties.has('for') && this.for) {
536
+ const rootNode = this.getRootNode();
537
+ const target = rootNode.getElementById(this.for);
538
+ if (target) {
539
+ if (!this.id) {
540
+ this.id = `vi-label-${Math.random().toString(36).substring(2, 9)}`;
541
+ }
542
+ const currentAria = target.getAttribute('aria-labelledby') || '';
543
+ if (!currentAria.includes(this.id)) {
544
+ const newAria = currentAria ? `${currentAria} ${this.id}` : this.id;
545
+ target.setAttribute('aria-labelledby', newAria);
546
+ }
547
+ }
548
+ }
549
+ }
524
550
  render() {
525
551
  const classes = {
526
552
  'vi-label': true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vialiq/web-components",
3
- "version": "0.22.0",
3
+ "version": "0.23.0",
4
4
  "private": false,
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -123,8 +123,8 @@
123
123
  },
124
124
  "peerDependencies": {
125
125
  "@floating-ui/dom": ">=1.0.0",
126
- "@vialiq/flux-ui": "^0.18.0",
127
- "@vialiq/icons": "^0.4.1",
126
+ "@vialiq/flux-ui": ">=0.0.4 <0.1.0",
127
+ "@vialiq/icons": ">=0.0.3 <0.1.0",
128
128
  "flatpickr": ">=4.6.0",
129
129
  "lit": "^3.0.0"
130
130
  },