@proximus/lavender-tile 2.0.0-alpha.200 → 2.0.0-alpha.202

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 (11) hide show
  1. package/dist/Tile.d.ts +2 -0
  2. package/dist/TileButton.d.ts +2 -0
  3. package/dist/TileCheckbox.d.ts +2 -2
  4. package/dist/TileLink.d.ts +2 -2
  5. package/dist/TileRadio.d.ts +2 -2
  6. package/dist/TileSwitch.d.ts +2 -2
  7. package/dist/custom-elements.json +34 -20
  8. package/dist/index.es.js +89 -84
  9. package/dist/vscode.html-custom-data.json +8 -6
  10. package/dist/web-types.json +15 -11
  11. package/package.json +1 -1
package/dist/Tile.d.ts CHANGED
@@ -26,4 +26,6 @@ export declare class Tile extends VerticallyExtendedElement<HTMLDivElement> {
26
26
  set inverted(value: boolean);
27
27
  get disabled(): boolean;
28
28
  set disabled(value: boolean);
29
+ get visual(): string | null;
30
+ set visual(value: string | null);
29
31
  }
package/dist/TileButton.d.ts CHANGED
@@ -22,4 +22,6 @@ export declare class TileButton extends PxElement<HTMLButtonElement> {
22
22
  set inverted(value: boolean);
23
23
  get disabled(): boolean;
24
24
  set disabled(value: boolean);
25
+ get visual(): string | null;
26
+ set visual(value: string | null);
25
27
  }
package/dist/TileCheckbox.d.ts CHANGED
@@ -20,10 +20,10 @@ export declare class TileCheckbox extends WithExtraAttributes {
20
20
  get $checkbox(): Checkbox;
21
21
  get $slotPrefix(): Element | null;
22
22
  get $children(): NodeListOf<Element>;
23
- get centerContent(): boolean;
24
- set centerContent(value: boolean);
25
23
  get backgroundColor(): string | null;
26
24
  set backgroundColor(value: string | null);
25
+ get visual(): string | null;
26
+ set visual(value: string | null);
27
27
  get inverted(): boolean;
28
28
  set inverted(value: boolean);
29
29
  get checked(): boolean;
package/dist/TileLink.d.ts CHANGED
@@ -13,10 +13,10 @@ export declare class TileLink extends PxElement<HTMLLinkElement> {
13
13
  get $slotPrefix(): Element | null;
14
14
  get $children(): NodeListOf<Element>;
15
15
  get $pxIcon(): Icon;
16
- get centerContent(): boolean;
17
- set centerContent(value: boolean);
18
16
  get backgroundColor(): string | null;
19
17
  set backgroundColor(value: string | null);
18
+ get visual(): string | null;
19
+ set visual(value: string | null);
20
20
  get inverted(): boolean;
21
21
  set inverted(value: boolean);
22
22
  get disabled(): boolean;
package/dist/TileRadio.d.ts CHANGED
@@ -21,10 +21,10 @@ export declare class TileRadio extends WithExtraAttributes implements IRadio {
21
21
  get $radio(): Radio;
22
22
  get $slotPrefix(): Element | null;
23
23
  get $children(): NodeListOf<Element>;
24
- get centerContent(): boolean;
25
- set centerContent(value: boolean);
26
24
  get backgroundColor(): string | null;
27
25
  set backgroundColor(value: string | null);
26
+ get visual(): string | null;
27
+ set visual(value: string | null);
28
28
  get inverted(): boolean;
29
29
  set inverted(value: boolean);
30
30
  get checked(): boolean;
package/dist/TileSwitch.d.ts CHANGED
@@ -20,10 +20,10 @@ export declare class TileSwitch extends WithExtraAttributes {
20
20
  get $switch(): Switch;
21
21
  get $slotPrefix(): Element | null;
22
22
  get $children(): NodeListOf<Element>;
23
- get centerContent(): boolean;
24
- set centerContent(value: boolean);
25
23
  get backgroundColor(): string | null;
26
24
  set backgroundColor(value: string | null);
25
+ get visual(): string | null;
26
+ set visual(value: string | null);
27
27
  get inverted(): boolean;
28
28
  set inverted(value: boolean);
29
29
  get checked(): boolean;
package/dist/custom-elements.json CHANGED
@@ -229,6 +229,10 @@
229
229
  "kind": "field",
230
230
  "name": "disabled"
231
231
  },
232
+ {
233
+ "kind": "field",
234
+ "name": "visual"
235
+ },
232
236
  {
233
237
  "kind": "field",
234
238
  "name": "innerHTML"
@@ -249,6 +253,9 @@
249
253
  },
250
254
  {
251
255
  "name": "disabled"
256
+ },
257
+ {
258
+ "name": "visual"
252
259
  }
253
260
  ],
254
261
  "superclass": {
@@ -353,6 +360,10 @@
353
360
  "kind": "field",
354
361
  "name": "disabled"
355
362
  },
363
+ {
364
+ "kind": "field",
365
+ "name": "visual"
366
+ },
356
367
  {
357
368
  "kind": "field",
358
369
  "name": "innerHTML"
@@ -373,6 +384,9 @@
373
384
  },
374
385
  {
375
386
  "name": "disabled"
387
+ },
388
+ {
389
+ "name": "visual"
376
390
  }
377
391
  ],
378
392
  "superclass": {
@@ -506,11 +520,11 @@
506
520
  },
507
521
  {
508
522
  "kind": "field",
509
- "name": "centerContent"
523
+ "name": "backgroundColor"
510
524
  },
511
525
  {
512
526
  "kind": "field",
513
- "name": "backgroundColor"
527
+ "name": "visual"
514
528
  },
515
529
  {
516
530
  "kind": "field",
@@ -553,15 +567,15 @@
553
567
  }
554
568
  ],
555
569
  "attributes": [
556
- {
557
- "name": "center-content"
558
- },
559
570
  {
560
571
  "name": "background-color"
561
572
  },
562
573
  {
563
574
  "name": "inverted"
564
575
  },
576
+ {
577
+ "name": "visual"
578
+ },
565
579
  {
566
580
  "name": "name"
567
581
  },
@@ -650,11 +664,11 @@
650
664
  },
651
665
  {
652
666
  "kind": "field",
653
- "name": "centerContent"
667
+ "name": "backgroundColor"
654
668
  },
655
669
  {
656
670
  "kind": "field",
657
- "name": "backgroundColor"
671
+ "name": "visual"
658
672
  },
659
673
  {
660
674
  "kind": "field",
@@ -674,9 +688,6 @@
674
688
  }
675
689
  ],
676
690
  "attributes": [
677
- {
678
- "name": "center-content"
679
- },
680
691
  {
681
692
  "name": "background-color"
682
693
  },
@@ -686,6 +697,9 @@
686
697
  {
687
698
  "name": "disabled"
688
699
  },
700
+ {
701
+ "name": "visual"
702
+ },
689
703
  {
690
704
  "name": "target-blank-aria-label"
691
705
  }
@@ -821,11 +835,11 @@
821
835
  },
822
836
  {
823
837
  "kind": "field",
824
- "name": "centerContent"
838
+ "name": "backgroundColor"
825
839
  },
826
840
  {
827
841
  "kind": "field",
828
- "name": "backgroundColor"
842
+ "name": "visual"
829
843
  },
830
844
  {
831
845
  "kind": "field",
@@ -868,15 +882,15 @@
868
882
  }
869
883
  ],
870
884
  "attributes": [
871
- {
872
- "name": "center-content"
873
- },
874
885
  {
875
886
  "name": "background-color"
876
887
  },
877
888
  {
878
889
  "name": "inverted"
879
890
  },
891
+ {
892
+ "name": "visual"
893
+ },
880
894
  {
881
895
  "name": "name"
882
896
  },
@@ -1024,11 +1038,11 @@
1024
1038
  },
1025
1039
  {
1026
1040
  "kind": "field",
1027
- "name": "centerContent"
1041
+ "name": "backgroundColor"
1028
1042
  },
1029
1043
  {
1030
1044
  "kind": "field",
1031
- "name": "backgroundColor"
1045
+ "name": "visual"
1032
1046
  },
1033
1047
  {
1034
1048
  "kind": "field",
@@ -1067,15 +1081,15 @@
1067
1081
  }
1068
1082
  ],
1069
1083
  "attributes": [
1070
- {
1071
- "name": "center-content"
1072
- },
1073
1084
  {
1074
1085
  "name": "background-color"
1075
1086
  },
1076
1087
  {
1077
1088
  "name": "inverted"
1078
1089
  },
1090
+ {
1091
+ "name": "visual"
1092
+ },
1079
1093
  {
1080
1094
  "name": "name"
1081
1095
  },
package/dist/index.es.js CHANGED
@@ -22,26 +22,22 @@ function d(e, t, n, r = [], i = {}) {
22
22
  }
23
23
  //#endregion
24
24
  //#region src/tile.css?inline
25
- var f = ".tile{padding:var(--px-padding-s-mobile);text-align:left;font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-main);background:var(--tile-background-color-default,var(--px-color-background-container-light-default));flex-direction:column;display:flex}.tile ::slotted([slot=label]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l)}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-mobile);margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot=suffix]){margin-left:auto;margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-default)}:host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-default)}:host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-default)}@media screen and (width>=48rem){.tile{padding:var(--px-padding-s-tablet)}.tile ::slotted([slot=label]),.tile ::slotted([slot=prefix]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-tablet)}}@media screen and (width>=64.0625rem){.tile{padding:var(--px-padding-s-laptop)}.tile ::slotted([slot=label]),.tile ::slotted([slot=prefix]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-laptop)}}:host([inverted]) .tile{color:var(--px-color-text-neutral-inverted);background:var(--tile-background-color-inverted,var(--px-color-background-container-light-inverted))}:host([inverted]):host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]):host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-inverted)}", p = ":host{outline:none;display:block}:is(:host .tile,:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch),:is(:host .tile,:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch) *{box-sizing:border-box}:host .tile,:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border-radius:var(--px-radius-main);--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);height:100%}:is(:host .tile,:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch) px-tile{height:100%}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{cursor:pointer;border:var(--px-size-border-m) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);width:100%;display:block}:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}:host:host(:not([disabled])):host(:hover) .tile-link,:host:host(:not([disabled])):host(:hover) .tile-button,:host:host(:not([disabled])):host(:hover) .tile-checkbox,:host:host(:not([disabled])):host(:hover) .tile-radio,:host:host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-default)}:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:is(:host:host(:not([disabled])) .tile-link,:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host([checked]) .tile-checkbox,:host:host([checked]) .tile-radio,:host:host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-default)}:host:host([disabled]) .tile-link,:host:host([disabled]) .tile-button,:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{cursor:default;pointer-events:none}:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{border-color:#0000}:host:host([state=error]) .tile-checkbox,:host:host([state=error]) .tile-radio,:host:host([state=error]) .tile-switch{border-color:var(--px-color-border-purpose-error-default)}:host:host([state=error]):hover:not([disabled]) .tile-checkbox,:host:host([state=error]):hover:not([disabled]) .tile-radio,:host:host([state=error]):hover:not([disabled]) .tile-switch{border-color:var(--px-color-border-state-hover-default)}@media screen and (width>=48rem){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(:scope:host:host(:not([disabled])) .tile-link,:scope:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media screen and (width>=64.0625rem){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(:scope:host:host(:not([disabled])) .tile-link,:scope:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .tile-link,:host([inverted]) .tile-button,:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{border-color:var(--px-color-border-neutral-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .tile-link,:host([inverted]):host(:not([disabled])):host(:hover) .tile-button,:host([inverted]):host(:not([disabled])):host(:hover) .tile-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .tile-radio,:host([inverted]):host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host([checked]) .tile-checkbox,:host([inverted]):host([checked]) .tile-radio,:host([inverted]):host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([state=error]) .tile-checkbox,:host([inverted]):host([state=error]) .tile-radio,:host([inverted]):host([state=error]) .tile-switch{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]):host([state=error]):host(:hover:not([disabled])) .tile-checkbox,:host([inverted]):host([state=error]):host(:hover:not([disabled])) .tile-radio,:host([inverted]):host([state=error]):host(:hover:not([disabled])) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}", m = new CSSStyleSheet();
26
- m.replaceSync(f);
27
- var h = new CSSStyleSheet();
28
- h.replaceSync(p);
29
- var g = [
25
+ var f = ":host{display:block}.tile,.tile *{box-sizing:border-box}.tile{height:100%;padding:var(--px-padding-s-mobile);text-align:left;font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-main);background:var(--tile-background-color-default,var(--px-color-background-container-light-default));flex-direction:column;display:flex}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-mobile);margin-bottom:var(--px-spacing-xs-mobile)}.tile ::slotted([slot=suffix]){margin-left:auto;margin-bottom:var(--px-spacing-xs-mobile)}.tile ::slotted([slot=label]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l)}.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([visual=none]) .tile{flex-direction:row-reverse;align-items:flex-start}:host([visual=none]) .tile .tile__content{flex-grow:1}:host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-default)}:host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-default)}:host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-default)}@media screen and (width>=48rem){.tile{padding:var(--px-padding-s-tablet)}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-tablet);margin-bottom:var(--px-spacing-xs-tablet)}.tile ::slotted([slot=suffix]){margin-bottom:var(--px-spacing-xs-tablet)}.tile ::slotted([slot=label]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-tablet)}}@media screen and (width>=64.0625rem){.tile{padding:var(--px-padding-s-laptop)}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-laptop);margin-bottom:var(--px-spacing-xs-laptop)}.tile ::slotted([slot=suffix]){margin-bottom:var(--px-spacing-xs-laptop)}.tile ::slotted([slot=label]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-laptop)}}@media screen and (width>=90.0625rem){.tile{padding:var(--px-padding-s-desktop)}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-desktop);margin-bottom:var(--px-spacing-xs-desktop)}.tile ::slotted([slot=suffix]){margin-bottom:var(--px-spacing-xs-desktop)}.tile ::slotted([slot=label]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) .tile{color:var(--px-color-text-neutral-inverted);background:var(--tile-background-color-inverted,var(--px-color-background-container-light-inverted))}:host([inverted]):host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]):host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-inverted)}", p = new CSSStyleSheet();
26
+ p.replaceSync(f);
27
+ var m = [
30
28
  "",
31
29
  "default",
32
30
  "container-light",
33
31
  "container-default"
34
- ], _ = class e extends t {
32
+ ], h = class extends t {
35
33
  static {
36
34
  this.nativeName = "div";
37
35
  }
38
36
  template() {
39
- return "\n <px-hstack gap=\"s\" align-items=\"center\" class=\"tile__header\">\n <slot name=\"prefix\"></slot>\n <slot name=\"suffix\"></slot>\n </px-hstack>\n <px-vstack gap=\"2xs\" class=\"tile__content\">\n <slot name=\"label\"></slot>\n <slot name=\"description\"></slot>\n </px-vstack>\n ";
37
+ return "\n <div class=\"tile\">\n <px-hstack gap=\"s\" align-items=\"center\" class=\"tile__header\">\n <slot name=\"prefix\"></slot>\n <slot name=\"suffix\"></slot>\n </px-hstack>\n <px-vstack gap=\"none\" class=\"tile__content\">\n <slot name=\"label\"></slot>\n <slot name=\"description\"></slot>\n </px-vstack>\n </div>\n ";
40
38
  }
41
39
  constructor() {
42
- super(h, m);
43
- let t = document.createElement(e.nativeName);
44
- t.classList.add("tile"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
40
+ super(p), this.shadowRoot.innerHTML = this.template();
45
41
  }
46
42
  connectedCallback() {
47
43
  if (super.connectedCallback(), this.$slotPrefix) {
@@ -56,7 +52,8 @@ var g = [
56
52
  "center-content",
57
53
  "background-color",
58
54
  "inverted",
59
- "disabled"
55
+ "disabled",
56
+ "visual"
60
57
  ];
61
58
  }
62
59
  attributeChangedCallback(e, t, n) {
@@ -68,7 +65,7 @@ var g = [
68
65
  this.updateCenterContent();
69
66
  break;
70
67
  case "background-color":
71
- this.updateBackgroundColor(t, n, g);
68
+ this.updateBackgroundColor(t, n, m);
72
69
  break;
73
70
  default: super.attributeChangedCallback(e, t, n);
74
71
  }
@@ -134,15 +131,21 @@ var g = [
134
131
  set disabled(e) {
135
132
  this._updateBooleanAttribute("disabled", e);
136
133
  }
134
+ get visual() {
135
+ return this.getAttribute("visual");
136
+ }
137
+ set visual(e) {
138
+ this._updateAttribute("visual", e);
139
+ }
137
140
  };
138
- customElements.get("px-tile") || customElements.define("px-tile", _);
141
+ customElements.get("px-tile") || customElements.define("px-tile", h);
139
142
  //#endregion
140
143
  //#region src/tile-button.css?inline
141
- var v = ".tile-button{font-size:var(--px-text-size-body-m-mobile);background:0 0;padding:0}@media screen and (width>=48rem){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}", y = new CSSStyleSheet();
142
- y.replaceSync(v);
143
- var b = new CSSStyleSheet();
144
- b.replaceSync(p);
145
- var x = class t extends e {
144
+ var g = ":host(:not([disabled])):host(:active){padding:0}:host(:not([disabled])):host(:active) .tile-button{border-width:var(--px-size-border-m);border-color:var(--px-color-border-state-active-default)}.tile-button{font-size:var(--px-text-size-body-m-mobile);background:0 0;padding:0}@media screen and (width>=48rem){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}@media screen and (width>=90.0625rem){.tile-button{font-size:var(--px-text-size-body-m-desktop)}}:host([inverted]):host(:not([disabled])):host(:active) .tile-button{border-color:var(--px-color-border-state-active-inverted)}", _ = ":host{padding:calc(var(--px-size-border-m) - var(--px-size-border-s));outline:none;display:block}:is(:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch),:is(:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch) *{box-sizing:border-box}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border-radius:var(--px-radius-main);height:100%}:is(:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch) px-tile{height:100%}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{cursor:pointer;border:var(--px-size-border-s) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);border:var(--px-size-border-s) solid var(--px-color-border-main-default);width:100%;display:block}:host:host(:not([disabled])):host(:hover) .tile-link,:host:host(:not([disabled])):host(:hover) .tile-button,:host:host(:not([disabled])):host(:hover) .tile-checkbox,:host:host(:not([disabled])):host(:hover) .tile-radio,:host:host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-default)}:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:is(:host:host(:not([disabled])) .tile-link,:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host([checked]){padding:0}:host:host([checked]) .tile-checkbox,:host:host([checked]) .tile-radio,:host:host([checked]) .tile-switch{border-width:var(--px-size-border-m);border-color:var(--px-color-border-state-active-default)}:host:host([disabled]) .tile-link,:host:host([disabled]) .tile-button,:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{cursor:default;pointer-events:none}:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{border-color:#0000}:host:host([state=error]) .tile-checkbox,:host:host([state=error]) .tile-radio,:host:host([state=error]) .tile-switch{border-color:var(--px-color-border-purpose-error-default)}:host:host([state=error]):hover:not([disabled]) .tile-checkbox,:host:host([state=error]):hover:not([disabled]) .tile-radio,:host:host([state=error]):hover:not([disabled]) .tile-switch{border-color:var(--px-color-border-state-hover-default)}@media screen and (width>=48rem){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(:scope:host:host(:not([disabled])) .tile-link,:scope:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media screen and (width>=64.0625rem){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-laptop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(:scope:host:host(:not([disabled])) .tile-link,:scope:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media screen and (width>=90.0625rem){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(:scope:host:host(:not([disabled])) .tile-link,:scope:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .tile-link,:host([inverted]) .tile-button,:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{outline-color:var(--px-color-border-focus-outline-inverted);border-color:var(--px-color-border-main-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .tile-link,:host([inverted]):host(:not([disabled])):host(:hover) .tile-button,:host([inverted]):host(:not([disabled])):host(:hover) .tile-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .tile-radio,:host([inverted]):host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host(:not([disabled])):host(:active) .tile-link,:host([inverted]):host(:not([disabled])):host(:active) .tile-button{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([checked]) .tile-checkbox,:host([inverted]):host([checked]) .tile-radio,:host([inverted]):host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([state=error]) .tile-checkbox,:host([inverted]):host([state=error]) .tile-radio,:host([inverted]):host([state=error]) .tile-switch{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]):host([state=error]):host(:hover:not([disabled])) .tile-checkbox,:host([inverted]):host([state=error]):host(:hover:not([disabled])) .tile-radio,:host([inverted]):host([state=error]):host(:hover:not([disabled])) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}", v = new CSSStyleSheet();
145
+ v.replaceSync(g);
146
+ var y = new CSSStyleSheet();
147
+ y.replaceSync(_);
148
+ var b = class extends e {
146
149
  static {
147
150
  this.nativeName = "button";
148
151
  }
@@ -150,12 +153,10 @@ var x = class t extends e {
150
153
  this.accessorExclusions = ["disabled"];
151
154
  }
152
155
  template() {
153
- return "\n <px-tile hoverable>\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n </px-tile>\n ";
156
+ return "\n <button class=\"tile-button\">\n <px-tile hoverable>\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <slot name=\"suffix\" slot=\"suffix\"></slot>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n </px-tile>\n </button>\n ";
154
157
  }
155
158
  constructor() {
156
- super(b, y);
157
- let e = document.createElement(t.nativeName);
158
- e.classList.add("tile-button"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
159
+ super(y, v), this.shadowRoot.innerHTML = this.template();
159
160
  }
160
161
  connectedCallback() {
161
162
  if (this.$slotPrefix) {
@@ -171,7 +172,8 @@ var x = class t extends e {
171
172
  "center-content",
172
173
  "background-color",
173
174
  "inverted",
174
- "disabled"
175
+ "disabled",
176
+ "visual"
175
177
  ];
176
178
  }
177
179
  attributeChangedCallback(e, t, n) {
@@ -181,6 +183,7 @@ var x = class t extends e {
181
183
  this.$tile.setAttribute(e, "");
182
184
  break;
183
185
  case "background-color":
186
+ case "visual":
184
187
  this.$tile.setAttribute(e, this.getAttribute(e) || "");
185
188
  break;
186
189
  case "inverted":
@@ -235,18 +238,24 @@ var x = class t extends e {
235
238
  set disabled(e) {
236
239
  this._updateBooleanAttribute("disabled", e);
237
240
  }
241
+ get visual() {
242
+ return this.getAttribute("visual");
243
+ }
244
+ set visual(e) {
245
+ this._updateAttribute("visual", e);
246
+ }
238
247
  };
239
- customElements.get("px-tile-button") || customElements.define("px-tile-button", x);
248
+ customElements.get("px-tile-button") || customElements.define("px-tile-button", b);
240
249
  //#endregion
241
250
  //#region src/TileCheckbox.ts
242
- var S = new CSSStyleSheet();
243
- S.replaceSync(p);
244
- var C = class extends n {
251
+ var x = new CSSStyleSheet();
252
+ x.replaceSync(_);
253
+ var S = class extends n {
245
254
  template() {
246
255
  return "\n <div class=\"tile-checkbox\">\n <px-tile hoverable>\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <px-checkbox slot=\"suffix\" inert></px-checkbox>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n </px-tile>\n </div>\n ";
247
256
  }
248
257
  constructor() {
249
- super(S), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
258
+ super(x), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
250
259
  }
251
260
  connectedCallback() {
252
261
  if (this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotPrefix) {
@@ -265,9 +274,9 @@ var C = class extends n {
265
274
  }
266
275
  static get observedAttributes() {
267
276
  return [
268
- "center-content",
269
277
  "background-color",
270
278
  "inverted",
279
+ "visual",
271
280
  "name",
272
281
  "value",
273
282
  "state",
@@ -277,8 +286,8 @@ var C = class extends n {
277
286
  }
278
287
  attributeChangedCallback(e, t, n) {
279
288
  if (t !== n) switch (e) {
280
- case "center-content":
281
289
  case "background-color":
290
+ case "visual":
282
291
  this.$tile.setAttribute(e, this.getAttribute(e) || "");
283
292
  break;
284
293
  case "inverted":
@@ -344,18 +353,18 @@ var C = class extends n {
344
353
  get $children() {
345
354
  return this.querySelectorAll("px-tile-checkbox > *");
346
355
  }
347
- get centerContent() {
348
- return this.hasAttribute("center-content");
349
- }
350
- set centerContent(e) {
351
- r(this, "center-content", e);
352
- }
353
356
  get backgroundColor() {
354
357
  return this.getAttribute("background-color");
355
358
  }
356
359
  set backgroundColor(e) {
357
360
  o(this, "background-color", e);
358
361
  }
362
+ get visual() {
363
+ return this.getAttribute("visual");
364
+ }
365
+ set visual(e) {
366
+ o(this, "visual", e);
367
+ }
359
368
  get inverted() {
360
369
  return this.hasAttribute("inverted");
361
370
  }
@@ -393,17 +402,17 @@ var C = class extends n {
393
402
  o(this, "value", e);
394
403
  }
395
404
  };
396
- customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox", C);
405
+ customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox", S);
397
406
  //#endregion
398
407
  //#region src/TileRadio.ts
399
- var w = new CSSStyleSheet();
400
- w.replaceSync(p);
401
- var T = class extends n {
408
+ var C = new CSSStyleSheet();
409
+ C.replaceSync(_);
410
+ var w = class extends n {
402
411
  template() {
403
412
  return "\n <div class=\"tile-radio\">\n <px-tile hoverable>\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <px-radio slot=\"suffix\" inert></px-radio>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n </px-tile>\n </div>\n ";
404
413
  }
405
414
  constructor() {
406
- super(w), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
415
+ super(C), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
407
416
  }
408
417
  connectedCallback() {
409
418
  if (this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.tabIndex = this.parentElement?.querySelector("px-tile-radio") === this ? 0 : -1, this.$slotPrefix) {
@@ -422,9 +431,9 @@ var T = class extends n {
422
431
  }
423
432
  static get observedAttributes() {
424
433
  return [
425
- "center-content",
426
434
  "background-color",
427
435
  "inverted",
436
+ "visual",
428
437
  "name",
429
438
  "value",
430
439
  "state",
@@ -434,8 +443,8 @@ var T = class extends n {
434
443
  }
435
444
  attributeChangedCallback(e, t, n) {
436
445
  if (t !== n) switch (e) {
437
- case "center-content":
438
446
  case "background-color":
447
+ case "visual":
439
448
  this.$tile.setAttribute(e, this.getAttribute(e) || "");
440
449
  break;
441
450
  case "inverted":
@@ -501,18 +510,18 @@ var T = class extends n {
501
510
  get $children() {
502
511
  return this.querySelectorAll("px-tile-radio > *");
503
512
  }
504
- get centerContent() {
505
- return this.hasAttribute("center-content");
506
- }
507
- set centerContent(e) {
508
- r(this, "center-content", e);
509
- }
510
513
  get backgroundColor() {
511
514
  return this.getAttribute("background-color");
512
515
  }
513
516
  set backgroundColor(e) {
514
517
  o(this, "background-color", e);
515
518
  }
519
+ get visual() {
520
+ return this.getAttribute("visual");
521
+ }
522
+ set visual(e) {
523
+ o(this, "visual", e);
524
+ }
516
525
  get inverted() {
517
526
  return this.hasAttribute("inverted");
518
527
  }
@@ -550,24 +559,22 @@ var T = class extends n {
550
559
  o(this, "value", e);
551
560
  }
552
561
  };
553
- customElements.get("px-tile-radio") || customElements.define("px-tile-radio", T);
562
+ customElements.get("px-tile-radio") || customElements.define("px-tile-radio", w);
554
563
  //#endregion
555
564
  //#region src/tile-link.css?inline
556
- var E = ".tile-link{text-decoration:none}.tile-link px-icon{color:var(--px-color-icon-brand-default)}.tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) .tile-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}", D = new CSSStyleSheet();
557
- D.replaceSync(E);
558
- var O = new CSSStyleSheet();
559
- O.replaceSync(p);
560
- var k = class t extends e {
565
+ var T = ":host(:not([disabled])):host(:active){padding:0}:host(:not([disabled])):host(:active) .tile-link{border-width:var(--px-size-border-m);border-color:var(--px-color-border-state-active-default)}.tile-link{text-decoration:none}.tile-link px-icon{color:var(--px-color-icon-brand-default)}.tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}:host([inverted]):host(:not([disabled])):host(:active) .tile-link{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .tile-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}", E = new CSSStyleSheet();
566
+ E.replaceSync(T);
567
+ var D = new CSSStyleSheet();
568
+ D.replaceSync(_);
569
+ var O = class extends e {
561
570
  static {
562
571
  this.nativeName = "a";
563
572
  }
564
573
  template() {
565
- return "\n <px-tile hoverable>\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <px-icon\n name=\"chevron_right\"\n slot=\"suffix\"\n from=\"lavender\"\n size=\"s\"\n color=\"inherit\"\n ></px-icon>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n </px-tile>\n ";
574
+ return "\n <a class=\"tile-link\">\n <px-tile hoverable>\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <px-icon\n name=\"chevron_right\"\n slot=\"suffix\"\n from=\"lavender\"\n size=\"s\"\n color=\"inherit\"\n ></px-icon>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n </px-tile>\n </a>\n ";
566
575
  }
567
576
  constructor() {
568
- super(O, D);
569
- let e = document.createElement(t.nativeName);
570
- e.classList.add("tile-link"), e.innerHTML = this.template(), this.shadowRoot.appendChild(e);
577
+ super(D, E), this.shadowRoot.innerHTML = this.template();
571
578
  }
572
579
  connectedCallback() {
573
580
  if (this.$slotPrefix) {
@@ -579,19 +586,17 @@ var k = class t extends e {
579
586
  static get observedAttributes() {
580
587
  return [
581
588
  ...super.observedAttributes,
582
- "center-content",
583
589
  "background-color",
584
590
  "inverted",
585
591
  "disabled",
592
+ "visual",
586
593
  "target-blank-aria-label"
587
594
  ];
588
595
  }
589
596
  attributeChangedCallback(e, t, n) {
590
597
  if (t !== n) switch (e) {
591
- case "center-content":
592
- this.$tile.setAttribute(e, "");
593
- break;
594
598
  case "background-color":
599
+ case "visual":
595
600
  this.$tile.setAttribute(e, this.getAttribute(e) || "");
596
601
  break;
597
602
  case "inverted":
@@ -622,18 +627,18 @@ var k = class t extends e {
622
627
  get $pxIcon() {
623
628
  return this.shadowRoot.querySelector("px-icon[slot=\"suffix\"]");
624
629
  }
625
- get centerContent() {
626
- return this.hasAttribute("center-content");
627
- }
628
- set centerContent(e) {
629
- this._updateBooleanAttribute("center-content", e);
630
- }
631
630
  get backgroundColor() {
632
631
  return this.getAttribute("background-color");
633
632
  }
634
633
  set backgroundColor(e) {
635
634
  this._updateAttribute("background-color", e);
636
635
  }
636
+ get visual() {
637
+ return this.getAttribute("visual");
638
+ }
639
+ set visual(e) {
640
+ this._updateAttribute("visual", e);
641
+ }
637
642
  get inverted() {
638
643
  return this.hasAttribute("inverted");
639
644
  }
@@ -653,17 +658,17 @@ var k = class t extends e {
653
658
  this._updateAttribute("target-blank-aria-label", e);
654
659
  }
655
660
  };
656
- customElements.get("px-tile-link") || customElements.define("px-tile-link", k);
661
+ customElements.get("px-tile-link") || customElements.define("px-tile-link", O);
657
662
  //#endregion
658
663
  //#region src/TileSwitch.ts
659
- var A = new CSSStyleSheet();
660
- A.replaceSync(p);
661
- var j = class extends n {
664
+ var k = new CSSStyleSheet();
665
+ k.replaceSync(_);
666
+ var A = class extends n {
662
667
  template() {
663
668
  return "\n <div class=\"tile-switch\">\n <px-tile hoverable>\n <slot name=\"prefix\" slot=\"prefix\"></slot>\n <px-switch slot=\"suffix\" inert></px-switch>\n <slot name=\"label\" slot=\"label\"></slot>\n <slot name=\"description\" slot=\"description\"></slot>\n </px-tile>\n </div>\n ";
664
669
  }
665
670
  constructor() {
666
- super(A), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
671
+ super(k), this.shadowRoot.innerHTML = this.template(), this.internals = this.attachInternals?.();
667
672
  }
668
673
  connectedCallback() {
669
674
  if (this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotPrefix) {
@@ -682,9 +687,9 @@ var j = class extends n {
682
687
  }
683
688
  static get observedAttributes() {
684
689
  return [
685
- "center-content",
686
690
  "background-color",
687
691
  "inverted",
692
+ "visual",
688
693
  "name",
689
694
  "value",
690
695
  "checked",
@@ -693,8 +698,8 @@ var j = class extends n {
693
698
  }
694
699
  attributeChangedCallback(e, t, n) {
695
700
  if (t !== n) switch (e) {
696
- case "center-content":
697
701
  case "background-color":
702
+ case "visual":
698
703
  this.$tile.setAttribute(e, this.getAttribute(e) || "");
699
704
  break;
700
705
  case "inverted":
@@ -751,18 +756,18 @@ var j = class extends n {
751
756
  get $children() {
752
757
  return this.querySelectorAll("px-tile-switch > *");
753
758
  }
754
- get centerContent() {
755
- return this.hasAttribute("center-content");
756
- }
757
- set centerContent(e) {
758
- r(this, "center-content", e);
759
- }
760
759
  get backgroundColor() {
761
760
  return this.getAttribute("background-color");
762
761
  }
763
762
  set backgroundColor(e) {
764
763
  o(this, "background-color", e);
765
764
  }
765
+ get visual() {
766
+ return this.getAttribute("visual");
767
+ }
768
+ set visual(e) {
769
+ o(this, "visual", e);
770
+ }
766
771
  get inverted() {
767
772
  return this.hasAttribute("inverted");
768
773
  }
@@ -794,6 +799,6 @@ var j = class extends n {
794
799
  o(this, "value", e);
795
800
  }
796
801
  };
797
- customElements.get("px-tile-switch") || customElements.define("px-tile-switch", j);
802
+ customElements.get("px-tile-switch") || customElements.define("px-tile-switch", A);
798
803
  //#endregion
799
- export { _ as Tile, x as TileButton, C as TileCheckbox, k as TileLink, T as TileRadio, j as TileSwitch, g as tileBackgroundColorValues };
804
+ export { h as Tile, b as TileButton, S as TileCheckbox, O as TileLink, w as TileRadio, A as TileSwitch, m as tileBackgroundColorValues };
package/dist/vscode.html-custom-data.json CHANGED
@@ -10,7 +10,8 @@
10
10
  { "name": "center-content", "values": [] },
11
11
  { "name": "background-color", "values": [] },
12
12
  { "name": "inverted", "values": [] },
13
- { "name": "disabled", "values": [] }
13
+ { "name": "disabled", "values": [] },
14
+ { "name": "visual", "values": [] }
14
15
  ],
15
16
  "references": []
16
17
  },
@@ -22,7 +23,8 @@
22
23
  { "name": "center-content", "values": [] },
23
24
  { "name": "background-color", "values": [] },
24
25
  { "name": "inverted", "values": [] },
25
- { "name": "disabled", "values": [] }
26
+ { "name": "disabled", "values": [] },
27
+ { "name": "visual", "values": [] }
26
28
  ],
27
29
  "references": []
28
30
  },
@@ -30,9 +32,9 @@
30
32
  "name": "px-tile-checkbox",
31
33
  "description": "\n---\n\n\n### **Events:**\n - **change**",
32
34
  "attributes": [
33
- { "name": "center-content", "values": [] },
34
35
  { "name": "background-color", "values": [] },
35
36
  { "name": "inverted", "values": [] },
37
+ { "name": "visual", "values": [] },
36
38
  { "name": "name", "values": [] },
37
39
  { "name": "value", "values": [] },
38
40
  { "name": "state", "values": [] },
@@ -45,10 +47,10 @@
45
47
  "name": "px-tile-link",
46
48
  "description": "\n---\n",
47
49
  "attributes": [
48
- { "name": "center-content", "values": [] },
49
50
  { "name": "background-color", "values": [] },
50
51
  { "name": "inverted", "values": [] },
51
52
  { "name": "disabled", "values": [] },
53
+ { "name": "visual", "values": [] },
52
54
  { "name": "target-blank-aria-label", "values": [] }
53
55
  ],
54
56
  "references": []
@@ -57,9 +59,9 @@
57
59
  "name": "px-tile-radio",
58
60
  "description": "\n---\n\n\n### **Events:**\n - **change**",
59
61
  "attributes": [
60
- { "name": "center-content", "values": [] },
61
62
  { "name": "background-color", "values": [] },
62
63
  { "name": "inverted", "values": [] },
64
+ { "name": "visual", "values": [] },
63
65
  { "name": "name", "values": [] },
64
66
  { "name": "value", "values": [] },
65
67
  { "name": "state", "values": [] },
@@ -72,9 +74,9 @@
72
74
  "name": "px-tile-switch",
73
75
  "description": "\n---\n\n\n### **Events:**\n - **change**",
74
76
  "attributes": [
75
- { "name": "center-content", "values": [] },
76
77
  { "name": "background-color", "values": [] },
77
78
  { "name": "inverted", "values": [] },
79
+ { "name": "visual", "values": [] },
78
80
  { "name": "name", "values": [] },
79
81
  { "name": "value", "values": [] },
80
82
  { "name": "checked", "values": [] },
package/dist/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@proximus/lavender-tile",
4
- "version": "2.0.0-alpha.200",
4
+ "version": "2.0.0-alpha.202",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -15,7 +15,8 @@
15
15
  { "name": "center-content", "value": { "type": "string" } },
16
16
  { "name": "background-color", "value": { "type": "string" } },
17
17
  { "name": "inverted", "value": { "type": "string" } },
18
- { "name": "disabled", "value": { "type": "string" } }
18
+ { "name": "disabled", "value": { "type": "string" } },
19
+ { "name": "visual", "value": { "type": "string" } }
19
20
  ],
20
21
  "events": [],
21
22
  "js": {
@@ -30,6 +31,7 @@
30
31
  { "name": "backgroundColor" },
31
32
  { "name": "inverted" },
32
33
  { "name": "disabled" },
34
+ { "name": "visual" },
33
35
  { "name": "innerHTML" }
34
36
  ],
35
37
  "events": []
@@ -44,7 +46,8 @@
44
46
  { "name": "center-content", "value": { "type": "string" } },
45
47
  { "name": "background-color", "value": { "type": "string" } },
46
48
  { "name": "inverted", "value": { "type": "string" } },
47
- { "name": "disabled", "value": { "type": "string" } }
49
+ { "name": "disabled", "value": { "type": "string" } },
50
+ { "name": "visual", "value": { "type": "string" } }
48
51
  ],
49
52
  "events": [],
50
53
  "js": {
@@ -57,6 +60,7 @@
57
60
  { "name": "backgroundColor" },
58
61
  { "name": "inverted" },
59
62
  { "name": "disabled" },
63
+ { "name": "visual" },
60
64
  { "name": "innerHTML" }
61
65
  ],
62
66
  "events": []
@@ -67,9 +71,9 @@
67
71
  "description": "\n---\n\n\n### **Events:**\n - **change**",
68
72
  "doc-url": "",
69
73
  "attributes": [
70
- { "name": "center-content", "value": { "type": "string" } },
71
74
  { "name": "background-color", "value": { "type": "string" } },
72
75
  { "name": "inverted", "value": { "type": "string" } },
76
+ { "name": "visual", "value": { "type": "string" } },
73
77
  { "name": "name", "value": { "type": "string" } },
74
78
  { "name": "value", "value": { "type": "string" } },
75
79
  { "name": "state", "value": { "type": "string" } },
@@ -84,8 +88,8 @@
84
88
  { "name": "$checkbox" },
85
89
  { "name": "$slotPrefix" },
86
90
  { "name": "$children" },
87
- { "name": "centerContent" },
88
91
  { "name": "backgroundColor" },
92
+ { "name": "visual" },
89
93
  { "name": "inverted" },
90
94
  { "name": "checked", "type": "boolean" },
91
95
  { "name": "name" },
@@ -102,10 +106,10 @@
102
106
  "description": "\n---\n",
103
107
  "doc-url": "",
104
108
  "attributes": [
105
- { "name": "center-content", "value": { "type": "string" } },
106
109
  { "name": "background-color", "value": { "type": "string" } },
107
110
  { "name": "inverted", "value": { "type": "string" } },
108
111
  { "name": "disabled", "value": { "type": "string" } },
112
+ { "name": "visual", "value": { "type": "string" } },
109
113
  { "name": "target-blank-aria-label", "value": { "type": "string" } }
110
114
  ],
111
115
  "events": [],
@@ -115,8 +119,8 @@
115
119
  { "name": "$slotPrefix" },
116
120
  { "name": "$children" },
117
121
  { "name": "$pxIcon" },
118
- { "name": "centerContent" },
119
122
  { "name": "backgroundColor" },
123
+ { "name": "visual" },
120
124
  { "name": "inverted" },
121
125
  { "name": "disabled" },
122
126
  { "name": "targetBlankAriaLabel" },
@@ -130,9 +134,9 @@
130
134
  "description": "\n---\n\n\n### **Events:**\n - **change**",
131
135
  "doc-url": "",
132
136
  "attributes": [
133
- { "name": "center-content", "value": { "type": "string" } },
134
137
  { "name": "background-color", "value": { "type": "string" } },
135
138
  { "name": "inverted", "value": { "type": "string" } },
139
+ { "name": "visual", "value": { "type": "string" } },
136
140
  { "name": "name", "value": { "type": "string" } },
137
141
  { "name": "value", "value": { "type": "string" } },
138
142
  { "name": "state", "value": { "type": "string" } },
@@ -147,8 +151,8 @@
147
151
  { "name": "$radio" },
148
152
  { "name": "$slotPrefix" },
149
153
  { "name": "$children" },
150
- { "name": "centerContent" },
151
154
  { "name": "backgroundColor" },
155
+ { "name": "visual" },
152
156
  { "name": "inverted" },
153
157
  { "name": "checked", "type": "boolean" },
154
158
  { "name": "name" },
@@ -165,9 +169,9 @@
165
169
  "description": "\n---\n\n\n### **Events:**\n - **change**",
166
170
  "doc-url": "",
167
171
  "attributes": [
168
- { "name": "center-content", "value": { "type": "string" } },
169
172
  { "name": "background-color", "value": { "type": "string" } },
170
173
  { "name": "inverted", "value": { "type": "string" } },
174
+ { "name": "visual", "value": { "type": "string" } },
171
175
  { "name": "name", "value": { "type": "string" } },
172
176
  { "name": "value", "value": { "type": "string" } },
173
177
  { "name": "checked", "value": { "type": "string" } },
@@ -181,8 +185,8 @@
181
185
  { "name": "$switch" },
182
186
  { "name": "$slotPrefix" },
183
187
  { "name": "$children" },
184
- { "name": "centerContent" },
185
188
  { "name": "backgroundColor" },
189
+ { "name": "visual" },
186
190
  { "name": "inverted" },
187
191
  { "name": "checked", "type": "boolean" },
188
192
  { "name": "name" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-tile",
3
- "version": "2.0.0-alpha.200",
3
+ "version": "2.0.0-alpha.202",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",