@swiftwc/ui 1.0.1-canary.1 → 1.0.1-canary.3

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/generated/components/picker-view.js +1 -1
  2. package/generated/css/index.css +19 -21
  3. package/package.json +1 -1
  4. package/scss/components/_label-view.scss +20 -12
package/generated/components/picker-view.js CHANGED
@@ -386,7 +386,7 @@ export class PickerView extends FormAssociatedBase {
386
386
  this.#selection = v;
387
387
  this.#reflectSelectionOnButtons();
388
388
  this.#reflectSelectionOnCurrentValueLabel();
389
- this.#sendValueToForm();
389
+ this.#sendValueToForm(false);
390
390
  }
391
391
  #lastRenderedLabelMap = {};
392
392
  #lastRenderedIconMap = {};
package/generated/css/index.css CHANGED
@@ -3141,7 +3141,7 @@
3141
3141
  --label--overflow: if(style(--label-truncation-mode: tail): hidden; );
3142
3142
  --label--text-overflow: if(style(--label-truncation-mode: tail): ellipsis; );
3143
3143
  --label--host-white-space: if(style(--label-line-limit: 1): nowrap; style(--label-line-limit: 2): normal; );
3144
- --label--titlestack-display: if(style(--label-line-limit: 2): -webkit-box; );
3144
+ --label--titlestack-shown: if(style(--label-line-limit: 1): inline-block; style(--label-line-limit: 2): -webkit-box; );
3145
3145
  --label--box-orient: if(style(--label-line-limit: 2): vertical; );
3146
3146
  --label--line-clamp: if(style(--label-line-limit: 2): 2; );
3147
3147
  --label--host-align-items: if(style(--label-flow: vertical): normal ; else: center ;);
@@ -3160,12 +3160,8 @@
3160
3160
  style(--label-style: icon-only): grid ; style(--label-style: title-only): none ; style(--label-style: title-and-icon): grid ; else: if(style(--label--has-icon: yes): grid ; else: none;) ;
3161
3161
  );
3162
3162
  --label--titlestack-display: if(
3163
- style(--label-style: icon-only): none ; style(--label-style: title-only): inline-block ; style(--label-style: title-and-icon): inline-block ;
3164
- else: if(style(--label--has-title: yes): inline-block ; else: none;) ;
3165
- );
3166
- --label--titlestack-display: if(
3167
- style(--label-style: icon-only): none ; style(--label-style: title-only): -webkit-box ; style(--label-style: title-and-icon): -webkit-box ;
3168
- else: if(style(--label--has-title: yes): -webkit-box ; else: none;) ;
3163
+ style(--label-style: icon-only): none ; style(--label-style: title-only): var(--label--titlestack-shown, inline-block) ;
3164
+ style(--label-style: title-and-icon): var(--label--titlestack-shown, inline-block) ; else: if(style(--label--has-title: yes): var(--label--titlestack-shown, inline-block) ; else: none ;) ;
3169
3165
  );
3170
3166
  }
3171
3167
  }
@@ -3183,7 +3179,7 @@
3183
3179
  --label-style: title-only;
3184
3180
  --label--host-align-items: center;
3185
3181
  --label--host-justify-items: normal;
3186
- --label--titlestack-display: inline-block;
3182
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3187
3183
  }
3188
3184
  }
3189
3185
  @container style(--label-style: title-and-icon) {
@@ -3194,7 +3190,7 @@
3194
3190
  --label--host-align-items: center;
3195
3191
  --label--host-justify-items: normal;
3196
3192
  --label--iconstack-display: grid;
3197
- --label--titlestack-display: inline-block;
3193
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3198
3194
  }
3199
3195
  }
3200
3196
  :where(label-view[label-style=icon-only]) {
@@ -3207,7 +3203,7 @@
3207
3203
  --label-style: title-only;
3208
3204
  --label--host-align-items: center;
3209
3205
  --label--host-justify-items: normal;
3210
- --label--titlestack-display: inline-block;
3206
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3211
3207
  }
3212
3208
  :where(label-view[label-style=title-and-icon]) {
3213
3209
  --label-style: title-and-icon;
@@ -3216,7 +3212,7 @@
3216
3212
  --label--host-align-items: center;
3217
3213
  --label--host-justify-items: normal;
3218
3214
  --label--iconstack-display: grid;
3219
- --label--titlestack-display: inline-block;
3215
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3220
3216
  }
3221
3217
  @container not style(--label-style) {
3222
3218
  :where(label-view:not([label-style]):has(> [slot=icon]):has(> :not([slot]))) {
@@ -3226,7 +3222,7 @@
3226
3222
  --label--host-align-items: center;
3227
3223
  --label--host-justify-items: normal;
3228
3224
  --label--iconstack-display: grid;
3229
- --label--titlestack-display: inline-block;
3225
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3230
3226
  }
3231
3227
  :where(label-view:not([label-style]):has(> [slot=icon]):not(:has(> :not([slot])))) {
3232
3228
  --label-style: icon-only;
@@ -3238,7 +3234,7 @@
3238
3234
  --label-style: title-only;
3239
3235
  --label--host-align-items: center;
3240
3236
  --label--host-justify-items: normal;
3241
- --label--titlestack-display: inline-block;
3237
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3242
3238
  }
3243
3239
  }
3244
3240
  @container style(--label-style: icon-only) and style(--label-flow: vertical) {
@@ -3254,7 +3250,7 @@
3254
3250
  --label-style: title-only;
3255
3251
  --label--host-align-items: normal;
3256
3252
  --label--host-justify-items: center;
3257
- --label--titlestack-display: inline-block;
3253
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3258
3254
  }
3259
3255
  }
3260
3256
  @container style(--label-style: title-and-icon) and style(--label-flow: vertical) {
@@ -3265,7 +3261,7 @@
3265
3261
  --label--host-align-items: normal;
3266
3262
  --label--host-justify-items: center;
3267
3263
  --label--iconstack-display: grid;
3268
- --label--titlestack-display: inline-block;
3264
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3269
3265
  }
3270
3266
  }
3271
3267
  @container style(--label-flow: vertical) {
@@ -3279,7 +3275,7 @@
3279
3275
  --label-style: title-only;
3280
3276
  --label--host-align-items: normal;
3281
3277
  --label--host-justify-items: center;
3282
- --label--titlestack-display: inline-block;
3278
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3283
3279
  }
3284
3280
  :where(label-view[label-style=title-and-icon]) {
3285
3281
  --label-style: title-and-icon;
@@ -3288,7 +3284,7 @@
3288
3284
  --label--host-align-items: normal;
3289
3285
  --label--host-justify-items: center;
3290
3286
  --label--iconstack-display: grid;
3291
- --label--titlestack-display: inline-block;
3287
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3292
3288
  }
3293
3289
  }
3294
3290
  @container (not style(--label-style)) and style(--label-flow: vertical) {
@@ -3299,7 +3295,7 @@
3299
3295
  --label--host-align-items: normal;
3300
3296
  --label--host-justify-items: center;
3301
3297
  --label--iconstack-display: grid;
3302
- --label--titlestack-display: inline-block;
3298
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3303
3299
  }
3304
3300
  :where(label-view:not([label-style]):has(> [slot=icon]):not(:has(> :not([slot])))) {
3305
3301
  --label-style: icon-only;
@@ -3311,23 +3307,25 @@
3311
3307
  --label-style: title-only;
3312
3308
  --label--host-align-items: normal;
3313
3309
  --label--host-justify-items: center;
3314
- --label--titlestack-display: inline-block;
3310
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
3315
3311
  }
3316
3312
  }
3317
3313
  @container style(--label-line-limit: 1) {
3318
3314
  :where(label-view) {
3319
3315
  --label--host-white-space: nowrap;
3316
+ --label--titlestack-shown: inline-block;
3320
3317
  }
3321
3318
  }
3322
3319
  @container not style(--label-line-limit: 1) {
3323
3320
  :where(label-view[line-limit="1"]) {
3324
3321
  --label--host-white-space: nowrap;
3322
+ --label--titlestack-shown: inline-block;
3325
3323
  }
3326
3324
  }
3327
3325
  @container style(--label-line-limit: 2) {
3328
3326
  :where(label-view) {
3329
3327
  --label--host-white-space: normal;
3330
- --label--titlestack-display: -webkit-box;
3328
+ --label--titlestack-shown: -webkit-box;
3331
3329
  --label--box-orient: vertical;
3332
3330
  --label--line-clamp: 2;
3333
3331
  }
@@ -3335,7 +3333,7 @@
3335
3333
  @container not style(--label-line-limit: 2) {
3336
3334
  :where(label-view[line-limit="2"]) {
3337
3335
  --label--host-white-space: normal;
3338
- --label--titlestack-display: -webkit-box;
3336
+ --label--titlestack-shown: -webkit-box;
3339
3337
  --label--box-orient: vertical;
3340
3338
  --label--line-clamp: 2;
3341
3339
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swiftwc/ui",
3
- "version": "1.0.1-canary.1",
3
+ "version": "1.0.1-canary.3",
4
4
  "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/scss/components/_label-view.scss CHANGED
@@ -63,10 +63,11 @@ $label-truncation-ifs: (
63
63
  $label-line-ifs: (
64
64
  1: (
65
65
  --label--host-white-space: nowrap,
66
+ --label--titlestack-shown: inline-block,
66
67
  ),
67
68
  2: (
68
69
  --label--host-white-space: normal,
69
- --label--titlestack-display: -webkit-box,
70
+ --label--titlestack-shown: -webkit-box,
70
71
  --label--box-orient: vertical,
71
72
  --label--line-clamp: 2,
72
73
  ),
@@ -82,7 +83,7 @@ $label-line-ifs: (
82
83
  --label--host-justify-items: normal;
83
84
 
84
85
  --label--iconstack-display: grid;
85
- --label--titlestack-display: inline-block;
86
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
86
87
  } @else if $label-style == h-icon-only {
87
88
  --label-style: icon-only;
88
89
 
@@ -96,7 +97,7 @@ $label-line-ifs: (
96
97
  --label--host-align-items: center;
97
98
  --label--host-justify-items: normal;
98
99
 
99
- --label--titlestack-display: inline-block;
100
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
100
101
  } @else if $label-style == v-title-and-icon {
101
102
  --label-style: title-and-icon;
102
103
 
@@ -106,7 +107,7 @@ $label-line-ifs: (
106
107
  --label--host-justify-items: center;
107
108
 
108
109
  --label--iconstack-display: grid;
109
- --label--titlestack-display: inline-block;
110
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
110
111
  } @else if $label-style == v-icon-only {
111
112
  --label-style: icon-only;
112
113
 
@@ -120,7 +121,7 @@ $label-line-ifs: (
120
121
  --label--host-align-items: normal;
121
122
  --label--host-justify-items: center;
122
123
 
123
- --label--titlestack-display: inline-block;
124
+ --label--titlestack-display: var(--label--titlestack-shown, inline-block);
124
125
  }
125
126
  }
126
127
 
@@ -196,6 +197,9 @@ $label-line-ifs: (
196
197
  line-clamp: var(--label--line-clamp,);
197
198
  -webkit-line-clamp: var(--label--line-clamp,);
198
199
 
200
+ // text-align: var(--label--titlestack-text-align,);
201
+ // -webkit-box-pack: var(--label--titlestack-text-align,);
202
+
199
203
  // text-decoration: underline;
200
204
 
201
205
  font-size: var(--label--titlestack-font-size,);
@@ -265,14 +269,18 @@ $label-line-ifs: (
265
269
  );
266
270
 
267
271
  --label--titlestack-display: if(
268
- style(--label-style: icon-only): none ; style(--label-style: title-only): inline-block ; style(--label-style: title-and-icon): inline-block ;
269
- else: if(style(--label--has-title: yes): inline-block ; else: none;) ;
270
- );
271
- // copy from above, wins if supported!
272
- --label--titlestack-display: if(
273
- style(--label-style: icon-only): none ; style(--label-style: title-only): -webkit-box ; style(--label-style: title-and-icon): -webkit-box ;
274
- else: if(style(--label--has-title: yes): -webkit-box ; else: none;) ;
272
+ style(--label-style: icon-only): none ; style(--label-style: title-only): var(--label--titlestack-shown, inline-block) ;
273
+ style(--label-style: title-and-icon): var(--label--titlestack-shown, inline-block) ; else: if(style(--label--has-title: yes): var(--label--titlestack-shown, inline-block) ; else: none ;) ;
275
274
  );
275
+ // --label--titlestack-display: if(
276
+ // style(--label-style: icon-only): none ; style(--label-style: title-only): inline-block ; style(--label-style: title-and-icon): inline-block ;
277
+ // else: if(style(--label--has-title: yes): inline-block ; else: none;) ;
278
+ // );
279
+ // // copy from above, wins if supported!
280
+ // --label--titlestack-display: if(
281
+ // style(--label-style: icon-only): none ; style(--label-style: title-only): -webkit-box ; style(--label-style: title-and-icon): -webkit-box ;
282
+ // else: if(style(--label--has-title: yes): -webkit-box ; else: none;) ;
283
+ // );
276
284
  }
277
285
  }
278
286