@swiftwc/ui 0.0.0-dev.61 → 0.0.0-dev.63

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 (18) hide show
  1. package/generated/components/date-picker.js +1 -1
  2. package/generated/components/labeled-content.js +5 -5
  3. package/generated/components/menu-view.js +1 -1
  4. package/generated/components/navigation-title.js +2 -2
  5. package/generated/components/picker-view.d.ts +2 -0
  6. package/generated/components/picker-view.js +60 -54
  7. package/generated/components/progress-view.js +1 -1
  8. package/generated/components/scroll-view.js +2 -2
  9. package/generated/components/section-view.js +2 -2
  10. package/generated/components/text-field.js +1 -1
  11. package/generated/css/index.css +39 -88
  12. package/generated/internal/utils/render-label.d.ts +1 -1
  13. package/generated/internal/utils/render-label.js +3 -3
  14. package/package.json +1 -1
  15. package/scss/components/_labeled-content.scss +1 -1
  16. package/scss/components/_picker-view.scss +73 -57
  17. package/scss/components/_tab-bar.scss +7 -3
  18. package/scss/components/_text-field.scss +6 -2
package/generated/components/date-picker.js CHANGED
@@ -89,7 +89,7 @@ export class DatePicker extends FormAssociatedBase {
89
89
  input.setAttribute('placeholder', map[input.name] ?? '');
90
90
  break;
91
91
  case 'label':
92
- renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, newValue);
92
+ renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue);
93
93
  // this.#sendValueToForm()
94
94
  break;
95
95
  case 'disabled':
package/generated/components/labeled-content.js CHANGED
@@ -36,7 +36,7 @@ export class LabeledContent extends HTMLElement {
36
36
  let header = this.querySelector(':scope>[slot=header]');
37
37
  if (newValue) {
38
38
  const el = header ?? $(`<header slot="header"></header>`, '>1');
39
- renderLabel(el, ':scope>label-view', `<label-view font="callout"><span></span></label-view>`, newValue);
39
+ renderLabel(':scope>label-view', `<label-view font="callout"><span></span></label-view>`, el, newValue);
40
40
  header ??= this.appendChild(el);
41
41
  }
42
42
  else
@@ -46,20 +46,20 @@ export class LabeledContent extends HTMLElement {
46
46
  let footer = this.querySelector(':scope>[slot=footer]');
47
47
  if (newValue) {
48
48
  const el = footer ?? $(`<footer slot="footer"></footer>`, '>1');
49
- renderLabel(el, ':scope>label-view', `<label-view font="callout"><span></span></label-view>`, newValue);
49
+ renderLabel(':scope>label-view', `<label-view font="callout"><span></span></label-view>`, el, newValue);
50
50
  footer ??= this.appendChild(el);
51
51
  }
52
52
  else
53
53
  footer?.remove();
54
54
  break;
55
55
  case 'value':
56
- renderLabel(this, ':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this.#fmt(newValue, this.getAttribute('format')));
56
+ renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(newValue, this.getAttribute('format')));
57
57
  break;
58
58
  case 'format':
59
- renderLabel(this, ':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this.#fmt(this.getAttribute('value'), newValue));
59
+ renderLabel(':scope>label-view:not([slot])', `<label-view><span></span></label-view>`, this, this.#fmt(this.getAttribute('value'), newValue));
60
60
  break;
61
61
  case 'label':
62
- renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, newValue);
62
+ renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue);
63
63
  break;
64
64
  }
65
65
  }
package/generated/components/menu-view.js CHANGED
@@ -58,7 +58,7 @@ export class MenuView extends HTMLElement {
58
58
  }
59
59
  break;
60
60
  case 'label':
61
- renderLabel(this, ':scope>[slot=label]', `<label-view slot="label"><span></span></label-view>`, newValue);
61
+ renderLabel(':scope>[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, newValue);
62
62
  break;
63
63
  }
64
64
  }
package/generated/components/navigation-title.js CHANGED
@@ -30,8 +30,8 @@ let NavigationTitle = NavigationTitle_1 = class NavigationTitle extends HTMLElem
30
30
  #render = (title, subtitle) => {
31
31
  const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`, vStactTemplate = `<v-stack spacing="0" alignment="fill">${titleTemplate}${subtitleTemplate}</v-stack>`;
32
32
  const el = this.querySelector(':scope>:not([slot])') ?? this.appendChild($(`<navigation-large-title>${vStactTemplate}</navigation-large-title>`, '>1')), vStack = el.querySelector(':scope>v-stack') ?? el.appendChild($(vStactTemplate, '>1'));
33
- renderLabel(vStack, ':scope>label-view:nth-child(1)', titleTemplate, title);
34
- renderLabel(vStack, ':scope>label-view:nth-child(2)', subtitleTemplate, subtitle);
33
+ renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title);
34
+ renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle);
35
35
  };
36
36
  };
37
37
  NavigationTitle = NavigationTitle_1 = __decorate([
package/generated/components/picker-view.d.ts CHANGED
@@ -17,11 +17,13 @@ export declare class PickerView extends FormAssociatedBase {
17
17
  #private;
18
18
  static get ATTR(): {
19
19
  PLACEHOLDER: string;
20
+ PLACEHOLDER_ICON: string;
20
21
  LABEL: string;
21
22
  PICKER_STYLE: string;
22
23
  SELECTION: string;
23
24
  SEARCHABLE: string;
24
25
  CURRENT_VALUE_LABEL: string;
26
+ CURRENT_VALUE_ICON: string;
25
27
  TRIGGER_HELP: string;
26
28
  DICTIONARY: string;
27
29
  };
package/generated/components/picker-view.js CHANGED
@@ -118,12 +118,14 @@ const collectLeafValues = (node) => (node.children.length ? node.children.flatMa
118
118
  export class PickerView extends FormAssociatedBase {
119
119
  static get ATTR() {
120
120
  return {
121
- PLACEHOLDER: 'placeholder',
121
+ PLACEHOLDER: 'prompt',
122
+ PLACEHOLDER_ICON: 'prompt-icon',
122
123
  LABEL: 'label',
123
124
  PICKER_STYLE: 'picker-style',
124
125
  SELECTION: 'selection',
125
126
  SEARCHABLE: 'searchable',
126
127
  CURRENT_VALUE_LABEL: 'current-value-label',
128
+ CURRENT_VALUE_ICON: 'current-value-icon',
127
129
  TRIGGER_HELP: 'help',
128
130
  DICTIONARY: 'dictionary',
129
131
  };
@@ -154,7 +156,7 @@ export class PickerView extends FormAssociatedBase {
154
156
  #spawnPage = (elements, tag, parentGroupId, searchable = false, title) => {
155
157
  if (devFlags.debug)
156
158
  console.debug(`${_a.name} #spawnPage`);
157
- const body = $(`<${'sheet-view' === tag ? 'dialog is="sheet-view"' : 'body-view'}><scroll-view><v-stack placement="leading fill"><list-view preferred-expanded-style="inset"></list-view></v-stack></scroll-view><tool-bar><tool-bar-item slot="top-bar-leading"><button type="button" tabindex="0"><label-view system-image="caret-left"></label-view></button></tool-bar-item></tool-bar></${'sheet-view' === tag ? 'dialog' : 'body-view'}>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
159
+ const body = $(`<${'sheet-view' === tag ? 'dialog is="sheet-view"' : 'body-view'}><scroll-view><v-stack placement="leading fill"><list-view preferred-expanded-style="inset"></list-view></v-stack></scroll-view><tool-bar><tool-bar-item slot="top-bar-leading"><button type="button" tabindex="0"><label-view system-image="${'sheet-view' === tag ? 'x' : 'caret-left'}"></label-view></button></tool-bar-item></tool-bar></${'sheet-view' === tag ? 'dialog' : 'body-view'}>`, '>1'), sv = body.querySelector('scroll-view'), list = body.querySelector('list-view'), backBtn = body.querySelector('button');
158
160
  if (title)
159
161
  sv?.setAttribute('navigation-inline-title', title);
160
162
  if (searchable) {
@@ -288,28 +290,27 @@ export class PickerView extends FormAssociatedBase {
288
290
  switch (input.mode) {
289
291
  case 'dictionary': {
290
292
  const flattenDictionary = (tree) => {
291
- const out = {};
292
- const stack = [tree];
293
- const idx = [0];
293
+ const out1 = {}, out2 = {}, stack = [tree], idx = [0];
294
294
  while (stack.length) {
295
- const frame = stack[stack.length - 1];
296
- const i = idx[idx.length - 1];
295
+ const frame = stack[stack.length - 1], i = idx[idx.length - 1];
297
296
  if (i >= frame.length) {
298
297
  stack.pop();
299
298
  idx.pop();
300
299
  continue;
301
300
  }
302
301
  idx[idx.length - 1]++;
303
- const { value, label, children } = frame[i];
304
- out[value] = label;
302
+ const { value, label, systemImage, children } = frame[i];
303
+ out1[value] = label;
304
+ out2[value] = systemImage;
305
305
  if (children.length) {
306
306
  stack.push(children);
307
307
  idx.push(0);
308
308
  }
309
309
  }
310
- return out;
310
+ return { labels: out1, icons: out2 };
311
311
  };
312
- this.#lastRenderedLabelMap = flattenDictionary(input.source);
312
+ this.#lastRenderedLabelMap = flattenDictionary(input.source).labels;
313
+ this.#lastRenderedIconMap = flattenDictionary(input.source).icons;
313
314
  // const collectLeafValues = (node: DictEntry): string[] => (node.children.length ? node.children.flatMap(collectLeafValues) : [node.value])
314
315
  // collectGroups = (nodes: DictEntry[]): string[][] => {
315
316
  // const groups: string[][] = []
@@ -328,14 +329,19 @@ export class PickerView extends FormAssociatedBase {
328
329
  }
329
330
  case 'list': {
330
331
  this.#lastRenderedLabelMap = {};
332
+ this.#lastRenderedIconMap = {};
331
333
  for (const el of input.source)
332
334
  if (el.matches('option')) {
333
- const opt = el;
334
- this.#lastRenderedLabelMap[extractTagFromOption(opt)] = opt.getAttribute('label') ?? undefined;
335
+ const k = extractTagFromOption(el);
336
+ this.#lastRenderedLabelMap[k] = el.getAttribute('label') ?? undefined;
337
+ this.#lastRenderedIconMap[k] = extractIconFromOption(el) ?? undefined;
335
338
  }
336
339
  else
337
- for (const opt of el.querySelectorAll('option'))
338
- this.#lastRenderedLabelMap[extractTagFromOption(opt)] = opt.getAttribute('label') ?? undefined;
340
+ for (const opt of el.querySelectorAll('option')) {
341
+ const k = extractTagFromOption(opt);
342
+ this.#lastRenderedLabelMap[k] = opt.getAttribute('label') ?? undefined;
343
+ this.#lastRenderedIconMap[k] = extractIconFromOption(opt) ?? undefined;
344
+ }
339
345
  this.#lastIndexedRoot = input.source;
340
346
  // this.#lastRenderedGroupMap = assigned.flatMap<string[]>((el) =>
341
347
  // [...(el.matches('datalist') ? [el as HTMLDataListElement] : []), ...el.querySelectorAll<HTMLDataListElement>('datalist')].map((dl) =>
@@ -413,8 +419,7 @@ export class PickerView extends FormAssociatedBase {
413
419
  const value = this.getAttribute(this.constructor.ATTR.LABEL);
414
420
  if (value) {
415
421
  const hStack = $(`<h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack>`, '>1');
416
- if (hStack)
417
- renderLabel(hStack, ':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, value);
422
+ renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, value);
418
423
  // if (label) renderLabelTitle(label, value) //label.setAttribute('title', value)
419
424
  section.insertAdjacentElement('beforeend', hStack);
420
425
  }
@@ -462,10 +467,16 @@ export class PickerView extends FormAssociatedBase {
462
467
  this.#sendValueToForm();
463
468
  }
464
469
  #lastRenderedLabelMap = {};
470
+ #lastRenderedIconMap = {};
465
471
  #lastIndexedRoot = [];
466
472
  get #currentValueLabel() {
467
473
  const cvl = this.#lastRenderedLabelMap[this.#selection];
468
- return (this.getAttribute('current-value-label') ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) || cvl;
474
+ return ((this.getAttribute(this.constructor.ATTR.CURRENT_VALUE_LABEL) ?? '').replaceAll('{{selection}}', this.#selection).replaceAll('{{currentValueLabel}}', this.#selection) ||
475
+ cvl);
476
+ }
477
+ get #currentValueIcon() {
478
+ const cvl = this.#lastRenderedIconMap[this.#selection];
479
+ return (this.getAttribute(this.constructor.ATTR.CURRENT_VALUE_ICON) ?? '') || cvl;
469
480
  }
470
481
  get #internals() {
471
482
  return getInternals(this);
@@ -573,7 +584,10 @@ export class PickerView extends FormAssociatedBase {
573
584
  console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
574
585
  switch (name) {
575
586
  case this.constructor.ATTR.PLACEHOLDER:
576
- this.#reflectPlaceholder(newValue);
587
+ case this.constructor.ATTR.PLACEHOLDER_ICON:
588
+ if (oldValue === newValue)
589
+ break;
590
+ this.#reflectSelectionOnCurrentValueLabel(); //this.#reflectPlaceholder(newValue)
577
591
  break;
578
592
  case this.constructor.ATTR.LABEL:
579
593
  this.#reflectLabel(newValue);
@@ -590,6 +604,7 @@ export class PickerView extends FormAssociatedBase {
590
604
  this.#renderSlotted([]);
591
605
  break;
592
606
  case this.constructor.ATTR.CURRENT_VALUE_LABEL:
607
+ case this.constructor.ATTR.CURRENT_VALUE_ICON:
593
608
  // if (oldValue === newValue) break
594
609
  this.#reflectSelectionOnCurrentValueLabel();
595
610
  break;
@@ -751,9 +766,8 @@ export class PickerView extends FormAssociatedBase {
751
766
  static #wrapOptionSpawnTag(node) {
752
767
  if (devFlags.debug)
753
768
  console.debug(`${_a.name} #wrapOptionSpawnTag`);
754
- const btn = $(`<button type="button" tabindex="0" navigation-link><h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack></button>`, '>1'), hStack = btn.querySelector(':scope>h-stack');
755
- if (hStack)
756
- renderLabel(hStack, ':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, extractLabelFromGroup(node), extractImgFromGroup(node));
769
+ const btn = $(`<button type="button" tabindex="0" navigation-link><h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack></button>`, '>1'), hStack = btn.querySelector(':scope>h-stack') ?? undefined;
770
+ renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, extractLabelFromGroup(node), extractImgFromGroup(node));
757
771
  // label = btn.querySelector<LabelView>(':scope>h-stack>label-view:nth-child(2)')
758
772
  // if (label) {
759
773
  // const lbl = extractLabelFromGroup(node as HTMLDataListElement),
@@ -780,12 +794,11 @@ export class PickerView extends FormAssociatedBase {
780
794
  console.debug(`${_a.name} #wrapOptgroupTag`);
781
795
  const labelT = `<label-view><span></span></label-view>`, summaryT = `<summary><h-stack distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view>${labelT}</h-stack></summary>`;
782
796
  const group = $(`<details is="disclosure-group" disclosure-style="marker-trailing">${summaryT}</details>`, '>1'), // NOTE: already applied, here it covers spawned sheets
783
- hStack = group.querySelector(':scope>summary>h-stack'); // ?? group.appendChild($(summaryT, '>1'))
797
+ hStack = group.querySelector(':scope>summary>h-stack') ?? undefined; // ?? group.appendChild($(summaryT, '>1'))
784
798
  // summaryLabel = summary.querySelector(':scope>label-view') ?? summary.appendChild($(labelT, '>1'))
785
799
  // if (node.hasAttribute('label')) summaryLabel.setAttribute('title', node.getAttribute('label') ?? '')
786
800
  // if (node.hasAttribute('data-system-image')) summaryLabel.setAttribute('system-image', node.getAttribute('data-system-image') ?? '')
787
- if (hStack)
788
- renderLabel(hStack, ':scope>label-view:nth-child(2)', labelT, extractLabelFromGroup(node), extractImgFromGroup(node));
801
+ renderLabel(':scope>label-view:nth-child(2)', labelT, hStack, extractLabelFromGroup(node), extractImgFromGroup(node));
789
802
  return group;
790
803
  }
791
804
  // static #reflectButtons(nodes: Element[], container: Element): void
@@ -797,11 +810,11 @@ export class PickerView extends FormAssociatedBase {
797
810
  if (node instanceof Element)
798
811
  switch (node.tagName) {
799
812
  case 'DATALIST': {
800
- const group = $(`<menu-view tabindex="0"></menu-view>`, '>1');
813
+ const group = $(`<menu-view tabindex="0"><h-stack slot="label" distribution="leading" template="auto spacer"><label-view data-role="check" style="visibility: hidden"><image-view slot="icon" system-name="check"></image-view></label-view><label-view><span></span></label-view></h-stack></menu-view>`, '>1'), hStack = group.querySelector(':scope>h-stack[slot=label]') ?? undefined;
801
814
  // label = group.querySelector(':scope>label-view[slot=label]') ?? group.appendChild($(`<label-view slot="label"></label-view>`, '>1'))
802
815
  // if (node.hasAttribute('data-label')) label.setAttribute('title', node.getAttribute('data-label') ?? '')
803
816
  // if (node.hasAttribute('data-system-image')) label.setAttribute('system-image', node.getAttribute('data-system-image') ?? '')
804
- renderLabel(group, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, extractLabelFromGroup(node), extractImgFromGroup(node));
817
+ renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, extractLabelFromGroup(node), extractImgFromGroup(node));
805
818
  _a.#reflectButtons([...node.children], group);
806
819
  container.appendChild(group);
807
820
  break;
@@ -827,7 +840,7 @@ export class PickerView extends FormAssociatedBase {
827
840
  }
828
841
  else {
829
842
  const group = $(`<menu-view tabindex="0"></menu-view>`, '>1');
830
- renderLabel(group, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, extractLabelFromGroup(node), extractImgFromGroup(node));
843
+ renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, group, extractLabelFromGroup(node), extractImgFromGroup(node));
831
844
  _a.#reflectButtons(node.children, group);
832
845
  container.appendChild(group);
833
846
  }
@@ -835,21 +848,18 @@ export class PickerView extends FormAssociatedBase {
835
848
  container.appendChild(_a.#wrapOptionTag(node));
836
849
  }
837
850
  }
838
- #reflectPlaceholder(value) {
839
- if (devFlags.debug)
840
- console.debug(`#reflectPlaceholder`);
841
- const input = this.#shadowRoot.querySelector('input');
842
- if (input) {
843
- if (value)
844
- input.setAttribute('placeholder', value);
845
- else
846
- input.removeAttribute('placeholder');
847
- }
848
- }
851
+ // #reflectPlaceholder(value: string | null) {
852
+ // if (devFlags.debug) console.debug(`#reflectPlaceholder`)
853
+ // const input = this.#shadowRoot.querySelector('input')
854
+ // if (input) {
855
+ // if (value) input.setAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER, value)
856
+ // else input.removeAttribute((this.constructor as typeof PickerView).ATTR.PLACEHOLDER)
857
+ // }
858
+ // }
849
859
  #reflectLabel(value) {
850
860
  if (devFlags.debug)
851
861
  console.debug(`${_a.name} #reflectLabel`);
852
- renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, value);
862
+ renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, value);
853
863
  this.#renderSlotted([]);
854
864
  }
855
865
  #reflectSelectionOnButtons() {
@@ -896,26 +906,22 @@ export class PickerView extends FormAssociatedBase {
896
906
  const currentValueLabel = this.querySelector(':scope>label-view:not([slot])');
897
907
  if (!currentValueLabel)
898
908
  break;
899
- const cvl = this.#currentValueLabel;
900
- if (!cvl)
901
- currentValueLabel.setAttribute('foreground', 'secondary');
902
- else
903
- currentValueLabel.removeAttribute('foreground');
904
- renderLabelTitle(currentValueLabel, cvl || this.getAttribute('placeholder') || this.#selection);
905
- renderLabelIcon(currentValueLabel, 'dots-three');
909
+ const cvl = this.#currentValueLabel, cvi = this.#currentValueIcon;
910
+ // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
911
+ // else currentValueLabel.removeAttribute('foreground')
912
+ renderLabelTitle(currentValueLabel, cvl || this.getAttribute(this.constructor.ATTR.PLACEHOLDER) || this.#selection);
913
+ renderLabelIcon(currentValueLabel, cvi || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON));
906
914
  break;
907
915
  }
908
916
  case 'menu': {
909
917
  const currentValueLabel = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]');
910
918
  if (!currentValueLabel)
911
919
  break;
912
- const cvl = this.#currentValueLabel;
913
- if (!cvl)
914
- currentValueLabel.setAttribute('foreground', 'secondary');
915
- else
916
- currentValueLabel.removeAttribute('foreground');
917
- renderLabelTitle(currentValueLabel, cvl || this.getAttribute('placeholder') || this.#selection);
918
- renderLabelIcon(currentValueLabel, 'dots-three');
920
+ const cvl = this.#currentValueLabel, cvi = this.#currentValueIcon;
921
+ // if (!cvl) currentValueLabel.setAttribute('foreground', 'secondary')
922
+ // else currentValueLabel.removeAttribute('foreground')
923
+ renderLabelTitle(currentValueLabel, cvl || this.getAttribute(this.constructor.ATTR.PLACEHOLDER) || this.#selection);
924
+ renderLabelIcon(currentValueLabel, cvi || this.getAttribute(this.constructor.ATTR.PLACEHOLDER_ICON));
919
925
  break;
920
926
  }
921
927
  case 'inline':
package/generated/components/progress-view.js CHANGED
@@ -68,7 +68,7 @@ export class ProgressView extends HTMLElement {
68
68
  break;
69
69
  }
70
70
  case 'current-value-label': {
71
- renderLabel(this, ':scope>[slot=current-value]', `<label-view slot="current-value" font="callout" foreground="secondary"><span></span></label-view>`, newValue);
71
+ renderLabel(':scope>[slot=current-value]', `<label-view slot="current-value" font="callout" foreground="secondary"><span></span></label-view>`, this, newValue);
72
72
  break;
73
73
  }
74
74
  }
package/generated/components/scroll-view.js CHANGED
@@ -188,8 +188,8 @@ export class ScrollView extends HTMLElement {
188
188
  #renderNavTitle = (title, subtitle) => {
189
189
  const titleTemplate = `<label-view line-limit="1" truncation-mode="tail" font="headline"><span></span></label-view>`, subtitleTemplate = `<label-view line-limit="1" truncation-mode="tail" foreground="secondary" font="callout"><span></span></label-view>`;
190
190
  const vStack = this.querySelector(':scope>[slot=top-bar-principal]') ?? this.appendChild($(`<v-stack spacing="0" alignment="fill" slot="top-bar-principal">${titleTemplate}${subtitleTemplate}</v-stack>`, '>1'));
191
- renderLabel(vStack, ':scope>label-view:nth-child(1)', titleTemplate, title);
192
- renderLabel(vStack, ':scope>label-view:nth-child(2)', subtitleTemplate, subtitle);
191
+ renderLabel(':scope>label-view:nth-child(1)', titleTemplate, vStack, title);
192
+ renderLabel(':scope>label-view:nth-child(2)', subtitleTemplate, vStack, subtitle);
193
193
  };
194
194
  }
195
195
  _a = ScrollView;
package/generated/components/section-view.js CHANGED
@@ -40,7 +40,7 @@ export class SectionView extends HTMLElement {
40
40
  let header = this.querySelector(':scope>[slot=header]');
41
41
  if (newValue) {
42
42
  const el = header ?? $(`<header slot="header"></header>`, '>1');
43
- renderLabel(el, ':scope>label-view', `<label-view line-limit="1" truncation-mode="tail" font="callout"><span></span></label-view>`, newValue);
43
+ renderLabel(':scope>label-view', `<label-view line-limit="1" truncation-mode="tail" font="callout"><span></span></label-view>`, el, newValue);
44
44
  header ??= this.appendChild(el);
45
45
  }
46
46
  else
@@ -50,7 +50,7 @@ export class SectionView extends HTMLElement {
50
50
  let footer = this.querySelector(':scope>[slot=footer]');
51
51
  if (newValue) {
52
52
  const el = footer ?? $(`<footer slot="footer"></footer>`, '>1');
53
- renderLabel(el, ':scope>label-view', `<label-view line-limit="1" truncation-mode="tail" font="callout"><span></span></label-view>`, newValue);
53
+ renderLabel(':scope>label-view', `<label-view line-limit="1" truncation-mode="tail" font="callout"><span></span></label-view>`, el, newValue);
54
54
  footer ??= this.appendChild(el);
55
55
  }
56
56
  else
package/generated/components/text-field.js CHANGED
@@ -137,7 +137,7 @@ export class TextField extends FormAssociatedBase {
137
137
  this.#sendValueToForm();
138
138
  break;
139
139
  case 'label':
140
- renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, newValue);
140
+ renderLabel(':scope>label-view[slot=label]', `<label-view slot="label" foreground="secondary"><span></span></label-view>`, this, newValue);
141
141
  // this.#sendValueToForm()
142
142
  break;
143
143
  case 'disabled':
package/generated/css/index.css CHANGED
@@ -3105,7 +3105,7 @@
3105
3105
  :where(labeled-content)::part(labeled-content-value-stack) {
3106
3106
  color: var(--secondary);
3107
3107
  justify-items: var(--labeled-content--value-stack-justify-items, flex-end);
3108
- word-break: break-all;
3108
+ word-break: break-word;
3109
3109
  }
3110
3110
  @media (pointer: fine) {
3111
3111
  :where(labeled-content) {
@@ -4635,6 +4635,9 @@
4635
4635
  grid-template-rows: minmax(0, 1fr);
4636
4636
  column-gap: var(--labeled-content-column-gap);
4637
4637
  }
4638
+ :where(text-field)::part(text-field-label-stack) {
4639
+ color: var(--secondary);
4640
+ }
4638
4641
  :where(text-field)::part(text-field-input-stack) {
4639
4642
  place-items: stretch;
4640
4643
  place-content: stretch;
@@ -4644,8 +4647,7 @@
4644
4647
  appearance: none;
4645
4648
  border: 0;
4646
4649
  outline: 0;
4647
- padding-block: 0.1rem;
4648
- padding-inline-start: 0.3rem;
4650
+ padding: 0;
4649
4651
  background-color: transparent;
4650
4652
  }
4651
4653
  }
@@ -4678,19 +4680,14 @@
4678
4680
  border: var(--picker--stack-grid-border, );
4679
4681
  color: var(--picker--stack-grid-color, );
4680
4682
  }
4681
- :where(picker-view > :not([slot])) {
4682
- place-self: var(--picker--input-stack-child-place-self, );
4683
- }
4684
4683
  :where(picker-view)::part(picker-stack) {
4685
- display: var(--picker--stack-display, );
4686
- flex-wrap: var(--picker--stack-flex-wrap, );
4687
- justify-content: var(--picker--stack-justify-content, );
4684
+ grid-template-columns: var(--picker--stack-grid-template-columns, );
4685
+ grid-template-rows: var(--picker--stack-grid-template-rows, );
4688
4686
  row-gap: var(--picker--stack-row-gap, );
4689
4687
  column-gap: var(--picker--stack-column-gap, );
4690
4688
  }
4691
4689
  :where(picker-view)::part(picker-input-stack) {
4692
- flex-shrink: var(--picker--input-stack-flex-shrink, );
4693
- max-width: var(--picker--input-stack-max-width, );
4690
+ text-align: var(--picker--input-stack-text-align, );
4694
4691
  }
4695
4692
  :where(picker-view)::part(picker-label-stack) {
4696
4693
  display: var(--picker--labelstack-display, none);
@@ -4698,10 +4695,9 @@
4698
4695
  --label-truncation-mode: tail;
4699
4696
  --label-line-limit: 1;
4700
4697
  }
4701
- @container style(--picker-style: menu) {
4702
- :where(picker-view menu-view > menu-view > label-view[slot=label]) {
4703
- margin-inline-start: 3rem;
4704
- }
4698
+ :where(picker-view) {
4699
+ --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
4700
+ --picker--stack-grid-template-rows: minmax(0, 1fr);
4705
4701
  }
4706
4702
  @container not style(--picker-style) {
4707
4703
  :where(picker-view > list-view > section-view > :not(button):first-child) {
@@ -4741,27 +4737,14 @@
4741
4737
  --picker--stack-grid-border: if(
4742
4738
  style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
4743
4739
  );
4744
- --picker--input-stack-child-place-self: if(style(--picker-style: sheet): flex-end ; style(--picker-style: navigation-link): flex-end ; style(--picker-style: menu): flex-end ;);
4745
- --picker--input-stack-flex-shrink: if(
4746
- style(--picker-style: sheet) or style(--picker-style: navigation-link) or
4747
- style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): 1 ; else: 0 ;)
4748
- );
4749
- --picker--stack-flex-wrap: if(
4750
- style(--picker-style: sheet) or style(--picker-style: navigation-link) or
4751
- style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): wrap ;)
4752
- );
4753
- --picker--input-stack-max-width: if(
4754
- style(--picker-style: sheet) or style(--picker-style: navigation-link) or
4755
- style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): 70% ;)
4756
- );
4740
+ --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
4757
4741
  }
4758
4742
  }
4759
4743
  @supports not (x: if(else:red)) {
4760
4744
  @container style(--picker-style: menu) {
4761
4745
  :where(picker-view:not([picker-style])) {
4762
4746
  --picker--labelstack-display: grid;
4763
- --picker--stack-display: flex;
4764
- --picker--stack-justify-content: space-between;
4747
+ --picker--input-stack-text-align: end;
4765
4748
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4766
4749
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4767
4750
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4770,16 +4753,12 @@
4770
4753
  --picker--stack-grid-background: var(--itemface, );
4771
4754
  --picker--stack-grid-color: var(--itemtext, );
4772
4755
  --picker--stack-grid-border: var(--itemborder, );
4773
- --picker--input-stack-child-place-self: flex-end;
4774
- --picker--input-stack-flex-shrink: 0;
4775
- --picker--input-stack-max-width: 70%;
4776
4756
  }
4777
4757
  }
4778
4758
  @container style(--picker-style: navigation-link) {
4779
4759
  :where(picker-view:not([picker-style])) {
4780
4760
  --picker--labelstack-display: grid;
4781
- --picker--stack-display: flex;
4782
- --picker--stack-justify-content: space-between;
4761
+ --picker--input-stack-text-align: end;
4783
4762
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4784
4763
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4785
4764
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4788,16 +4767,12 @@
4788
4767
  --picker--stack-grid-background: var(--itemface, );
4789
4768
  --picker--stack-grid-color: var(--itemtext, );
4790
4769
  --picker--stack-grid-border: var(--itemborder, );
4791
- --picker--input-stack-child-place-self: flex-end;
4792
- --picker--input-stack-flex-shrink: 0;
4793
- --picker--input-stack-max-width: 70%;
4794
4770
  }
4795
4771
  }
4796
4772
  @container style(--picker-style: sheet) {
4797
4773
  :where(picker-view:not([picker-style])) {
4798
4774
  --picker--labelstack-display: grid;
4799
- --picker--stack-display: flex;
4800
- --picker--stack-justify-content: space-between;
4775
+ --picker--input-stack-text-align: end;
4801
4776
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4802
4777
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4803
4778
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4806,15 +4781,11 @@
4806
4781
  --picker--stack-grid-background: var(--itemface, );
4807
4782
  --picker--stack-grid-color: var(--itemtext, );
4808
4783
  --picker--stack-grid-border: var(--itemborder, );
4809
- --picker--input-stack-child-place-self: flex-end;
4810
- --picker--input-stack-flex-shrink: 0;
4811
- --picker--input-stack-max-width: 70%;
4812
4784
  }
4813
4785
  }
4814
4786
  :where(form picker-view[picker-style=menu]) {
4815
4787
  --picker--labelstack-display: grid;
4816
- --picker--stack-display: flex;
4817
- --picker--stack-justify-content: space-between;
4788
+ --picker--input-stack-text-align: end;
4818
4789
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4819
4790
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4820
4791
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4823,17 +4794,10 @@
4823
4794
  --picker--stack-grid-background: var(--itemface, );
4824
4795
  --picker--stack-grid-color: var(--itemtext, );
4825
4796
  --picker--stack-grid-border: var(--itemborder, );
4826
- --picker--input-stack-child-place-self: flex-end;
4827
- --picker--input-stack-flex-shrink: 0;
4828
- --picker--input-stack-max-width: 70%;
4829
- }
4830
- :where(:where(picker-view[picker-style=menu]) menu-view > menu-view > label-view[slot=label]) {
4831
- margin-inline-start: 3rem;
4832
4797
  }
4833
4798
  :where(form picker-view[picker-style=navigation-link]) {
4834
4799
  --picker--labelstack-display: grid;
4835
- --picker--stack-display: flex;
4836
- --picker--stack-justify-content: space-between;
4800
+ --picker--input-stack-text-align: end;
4837
4801
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4838
4802
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4839
4803
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4842,17 +4806,10 @@
4842
4806
  --picker--stack-grid-background: var(--itemface, );
4843
4807
  --picker--stack-grid-color: var(--itemtext, );
4844
4808
  --picker--stack-grid-border: var(--itemborder, );
4845
- --picker--input-stack-child-place-self: flex-end;
4846
- --picker--input-stack-flex-shrink: 0;
4847
- --picker--input-stack-max-width: 70%;
4848
- }
4849
- :where(:where(picker-view[picker-style=navigation-link]) menu-view > menu-view > label-view[slot=label]) {
4850
- margin-inline-start: 3rem;
4851
4809
  }
4852
4810
  :where(form picker-view[picker-style=sheet]) {
4853
4811
  --picker--labelstack-display: grid;
4854
- --picker--stack-display: flex;
4855
- --picker--stack-justify-content: space-between;
4812
+ --picker--input-stack-text-align: end;
4856
4813
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4857
4814
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4858
4815
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4861,46 +4818,32 @@
4861
4818
  --picker--stack-grid-background: var(--itemface, );
4862
4819
  --picker--stack-grid-color: var(--itemtext, );
4863
4820
  --picker--stack-grid-border: var(--itemborder, );
4864
- --picker--input-stack-child-place-self: flex-end;
4865
- --picker--input-stack-flex-shrink: 0;
4866
- --picker--input-stack-max-width: 70%;
4867
- }
4868
- :where(:where(picker-view[picker-style=sheet]) menu-view > menu-view > label-view[slot=label]) {
4869
- margin-inline-start: 3rem;
4870
4821
  }
4871
4822
  }
4872
4823
  }
4873
4824
  @layer sw-final {
4874
4825
  @supports not (x: attr(x type(*))) {
4875
- @container style(--label-value-placement: vertical) {
4876
- :where(picker-view:not([label-value-placement])) {
4877
- --label-value-placement: vertical;
4878
- }
4879
- }
4880
- @container style(--label-value-placement: horizontal) {
4826
+ @container style(--picker-label-value-placement: vertical) {
4881
4827
  :where(picker-view:not([label-value-placement])) {
4882
- --label-value-placement: horizontal;
4828
+ --picker-label-value-placement: vertical;
4883
4829
  }
4884
4830
  }
4885
- @container style(--label-value-placement: auto) {
4831
+ @container style(--picker-label-value-placement: horizontal) {
4886
4832
  :where(picker-view:not([label-value-placement])) {
4887
- --label-value-placement: auto;
4833
+ --picker-label-value-placement: horizontal;
4888
4834
  }
4889
4835
  }
4890
4836
  :where(picker-view[label-value-placement=vertical]) {
4891
- --label-value-placement: vertical;
4837
+ --picker-label-value-placement: vertical;
4892
4838
  }
4893
4839
  :where(picker-view[label-value-placement=horizontal]) {
4894
- --label-value-placement: horizontal;
4895
- }
4896
- :where(picker-view[label-value-placement=auto]) {
4897
- --label-value-placement: auto;
4840
+ --picker-label-value-placement: horizontal;
4898
4841
  }
4899
4842
  }
4900
4843
  @supports (x: attr(x type(*))) {
4901
4844
  :where(picker-view) {
4902
4845
  --picker-style: attr(picker-style type(<custom-ident>), inherit);
4903
- --label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
4846
+ --picker-label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
4904
4847
  }
4905
4848
  }
4906
4849
  }
@@ -5397,6 +5340,10 @@
5397
5340
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar]):after {
5398
5341
  background-image: linear-gradient(to top, var(--face) 0, oklch(0% 0 0deg / 0) 100%);
5399
5342
  }
5343
+ :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar]) {
5344
+ --toolbaritempadistart: 1rem;
5345
+ --toolbaritempadiend: 1rem;
5346
+ }
5400
5347
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar] > [is=form-view]) {
5401
5348
  margin-block-end: max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
5402
5349
  max-inline-size: var(--iphone-tabbar-max-inline-size);
@@ -5407,9 +5354,7 @@
5407
5354
  --label-flow: vertical;
5408
5355
  --label-line-limit: 2;
5409
5356
  --label-truncation-mode: tail;
5410
- --label--titlestack-font-size: var(--label-caption2-font-size);
5411
- --label--titlestack-line-height: var(--label-caption2-line-height);
5412
- --label--titlestack-font-weight: var(--label-caption2-font-weight);
5357
+ --label-font: caption2;
5413
5358
  }
5414
5359
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar] > [is=form-view] button) {
5415
5360
  min-inline-size: calc(var(--iphone-tabbar-block-size) + 0.1rem);
@@ -5422,6 +5367,8 @@
5422
5367
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar]) {
5423
5368
  --tab-bar-width: 100lvw;
5424
5369
  inset: 0 0 auto 0;
5370
+ --toolbaritempadistart: 0.3rem;
5371
+ --toolbaritempadiend: 0.3rem;
5425
5372
  }
5426
5373
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar] > [is=form-view]) {
5427
5374
  grid-auto-columns: minmax(max-content, 1fr);
@@ -5471,6 +5418,10 @@
5471
5418
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]):after {
5472
5419
  background-image: linear-gradient(to top, var(--face) 0, oklch(0% 0 0deg / 0) 100%);
5473
5420
  }
5421
+ :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]) {
5422
+ --toolbaritempadistart: 1rem;
5423
+ --toolbaritempadiend: 1rem;
5424
+ }
5474
5425
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar] > [is=form-view]) {
5475
5426
  margin-block-end: max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
5476
5427
  max-inline-size: var(--iphone-tabbar-max-inline-size);
@@ -5481,9 +5432,7 @@
5481
5432
  --label-flow: vertical;
5482
5433
  --label-line-limit: 2;
5483
5434
  --label-truncation-mode: tail;
5484
- --label--titlestack-font-size: var(--label-caption2-font-size);
5485
- --label--titlestack-line-height: var(--label-caption2-line-height);
5486
- --label--titlestack-font-weight: var(--label-caption2-font-weight);
5435
+ --label-font: caption2;
5487
5436
  }
5488
5437
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar] > [is=form-view] button) {
5489
5438
  min-inline-size: calc(var(--iphone-tabbar-block-size) + 0.1rem);
@@ -5496,6 +5445,8 @@
5496
5445
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]) {
5497
5446
  --tab-bar-width: 100lvw;
5498
5447
  inset: 0 0 auto 0;
5448
+ --toolbaritempadistart: 0.3rem;
5449
+ --toolbaritempadiend: 0.3rem;
5499
5450
  }
5500
5451
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar] > [is=form-view]) {
5501
5452
  grid-auto-columns: minmax(max-content, 1fr);
package/generated/internal/utils/render-label.d.ts CHANGED
@@ -1 +1 @@
1
- export default function (container: Element, selector: string, template: string, title?: string | null, systemImage?: string | null): void;
1
+ export default function (selector: string, template: string, container?: Element, title?: string | null, systemImage?: string | null): void;
package/generated/internal/utils/render-label.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import $ from './cash';
2
2
  import renderLabelIcon from './render-label-icon';
3
3
  import renderLabelTitle from './render-label-title';
4
- export default function (container, selector, template, title, systemImage) {
5
- const existing = container.querySelector(selector);
4
+ export default function (selector, template, container, title, systemImage) {
5
+ const existing = container?.querySelector(selector);
6
6
  if (existing) {
7
7
  for (const { name, value } of $(template, '>1').attributes)
8
8
  if (!existing.hasAttribute(name))
@@ -14,6 +14,6 @@ export default function (container, selector, template, title, systemImage) {
14
14
  const newLabel = $(template, '>1');
15
15
  renderLabelIcon(newLabel, systemImage ?? null);
16
16
  renderLabelTitle(newLabel, title ?? null);
17
- container.appendChild(newLabel);
17
+ container?.appendChild(newLabel);
18
18
  }
19
19
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swiftwc/ui",
3
- "version": "0.0.0-dev.61",
3
+ "version": "0.0.0-dev.63",
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/_labeled-content.scss CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
  justify-items: var(--labeled-content--value-stack-justify-items, flex-end);
36
36
 
37
- word-break: break-all;
37
+ word-break: break-word;
38
38
  }
39
39
 
40
40
  @media (pointer: fine) {
package/scss/components/_picker-view.scss CHANGED
@@ -6,9 +6,10 @@
6
6
  $picker-ifs: (
7
7
  menu: (
8
8
  --picker--labelstack-display: grid,
9
+ --picker--input-stack-text-align: end,
9
10
  // copy from labeled-content
10
- --picker--stack-display: flex,
11
- --picker--stack-justify-content: space-between,
11
+ // --picker--stack-display: flex,
12
+ // --picker--stack-justify-content: space-between,
12
13
  --picker--stack-row-gap: var(--labeled-content-row-gap),
13
14
  --picker--stack-column-gap: var(--labeled-content-column-gap),
14
15
  //
@@ -18,17 +19,18 @@ $picker-ifs: (
18
19
  --picker--stack-grid-background: var(--itemface,),
19
20
  --picker--stack-grid-color: var(--itemtext,),
20
21
  --picker--stack-grid-border: var(--itemborder,),
21
- --picker--input-stack-child-place-self: flex-end,
22
+ // --picker--input-stack-child-place-self: end,
22
23
  //
23
24
  // --picker--stack-flex-wrap: wrap,
24
- --picker--input-stack-flex-shrink: 0,
25
- --picker--input-stack-max-width: 70%,
25
+ // --picker--input-stack-flex-shrink: 0,
26
+ // --picker--input-stack-max-width: 70%,
26
27
  ),
27
28
  navigation-link: (
28
29
  --picker--labelstack-display: grid,
30
+ --picker--input-stack-text-align: end,
29
31
  // copy from labeled-content
30
- --picker--stack-display: flex,
31
- --picker--stack-justify-content: space-between,
32
+ // --picker--stack-display: flex,
33
+ // --picker--stack-justify-content: space-between,
32
34
  --picker--stack-row-gap: var(--labeled-content-row-gap),
33
35
  --picker--stack-column-gap: var(--labeled-content-column-gap),
34
36
  //
@@ -38,17 +40,18 @@ $picker-ifs: (
38
40
  --picker--stack-grid-background: var(--itemface,),
39
41
  --picker--stack-grid-color: var(--itemtext,),
40
42
  --picker--stack-grid-border: var(--itemborder,),
41
- --picker--input-stack-child-place-self: flex-end,
43
+ // --picker--input-stack-child-place-self: end,
42
44
  //
43
45
  // --picker--stack-flex-wrap: wrap,
44
- --picker--input-stack-flex-shrink: 0,
45
- --picker--input-stack-max-width: 70%,
46
+ // --picker--input-stack-flex-shrink: 0,
47
+ // --picker--input-stack-max-width: 70%,
46
48
  ),
47
49
  sheet: (
48
50
  --picker--labelstack-display: grid,
51
+ --picker--input-stack-text-align: end,
49
52
  // copy from labeled-content
50
- --picker--stack-display: flex,
51
- --picker--stack-justify-content: space-between,
53
+ // --picker--stack-display: flex,
54
+ // --picker--stack-justify-content: space-between,
52
55
  --picker--stack-row-gap: var(--labeled-content-row-gap),
53
56
  --picker--stack-column-gap: var(--labeled-content-column-gap),
54
57
  //
@@ -58,11 +61,11 @@ $picker-ifs: (
58
61
  --picker--stack-grid-background: var(--itemface,),
59
62
  --picker--stack-grid-color: var(--itemtext,),
60
63
  --picker--stack-grid-border: var(--itemborder,),
61
- --picker--input-stack-child-place-self: flex-end,
64
+ // --picker--input-stack-child-place-self: end,
62
65
  //
63
66
  // --picker--stack-flex-wrap: wrap,
64
- --picker--input-stack-flex-shrink: 0,
65
- --picker--input-stack-max-width: 70%,
67
+ // --picker--input-stack-flex-shrink: 0,
68
+ // --picker--input-stack-max-width: 70%,
66
69
  ),
67
70
  );
68
71
 
@@ -109,21 +112,27 @@ $picker-ifs: (
109
112
  color: var(--picker--stack-grid-color,);
110
113
  }
111
114
 
112
- > :not([slot]) {
113
- :where(&) {
114
- place-self: var(--picker--input-stack-child-place-self,);
115
- }
116
- }
115
+ // > :not([slot]) {
116
+ // :where(&) {
117
+ // place-self: var(--picker--input-stack-child-place-self,);
118
+ // }
119
+ // }
117
120
 
118
121
  :where(&)::part(picker-stack) {
119
- display: var(--picker--stack-display,);
120
-
121
- flex-wrap: var(--picker--stack-flex-wrap,);
122
-
123
- justify-content: var(--picker--stack-justify-content,);
122
+ // grid-auto-flow: column;
123
+ grid-template-columns: var(--picker--stack-grid-template-columns,); //minmax(30%, 1fr) auto;
124
124
 
125
+ grid-template-rows: var(--picker--stack-grid-template-rows,); //minmax(0, 1fr);
125
126
  row-gap: var(--picker--stack-row-gap,);
127
+
126
128
  column-gap: var(--picker--stack-column-gap,);
129
+
130
+ // display: var(--picker--stack-display,);
131
+
132
+ // flex-wrap: var(--picker--stack-flex-wrap,);
133
+
134
+ // justify-content: var(--picker--stack-justify-content,);
135
+
127
136
  // grid-template-columns: var(--picker--stack-grid-template-columns,);
128
137
 
129
138
  // grid-template-rows: minmax(0, 1fr);
@@ -140,9 +149,10 @@ $picker-ifs: (
140
149
  }
141
150
 
142
151
  :where(&)::part(picker-input-stack) {
143
- flex-shrink: var(--picker--input-stack-flex-shrink,); //none;
152
+ text-align: var(--picker--input-stack-text-align,);
153
+ // flex-shrink: var(--picker--input-stack-flex-shrink,); //none;
144
154
 
145
- max-width: var(--picker--input-stack-max-width,); //70%;
155
+ // max-width: var(--picker--input-stack-max-width,); //70%;
146
156
  }
147
157
 
148
158
  :where(&)::part(picker-label-stack) {
@@ -155,6 +165,11 @@ $picker-ifs: (
155
165
  --label-line-limit: 1;
156
166
  }
157
167
 
168
+ :where(&) {
169
+ --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
170
+
171
+ --picker--stack-grid-template-rows: minmax(0, 1fr);
172
+ }
158
173
  // :where(&) {
159
174
  // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
160
175
  // @include mixins.write-props($picker-elses); NOT Needed for now since all defaults/fallbacks are already the elses
@@ -170,11 +185,11 @@ $picker-ifs: (
170
185
  // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
171
186
  // }
172
187
 
173
- :where(& menu-view > menu-view > label-view[slot='label']) {
174
- @container style(--picker-style: menu) {
175
- margin-inline-start: 3rem;
176
- }
177
- }
188
+ // :where(& menu-view > menu-view > label-view[slot='label']) {
189
+ // @container style(--picker-style: menu) {
190
+ // margin-inline-start: 3rem;
191
+ // }
192
+ // }
178
193
  // NOTE: make first inline list item secondary
179
194
  :where(& > list-view > section-view > :not(button):first-child) {
180
195
  @container not style(--picker-style) {
@@ -226,24 +241,25 @@ $picker-ifs: (
226
241
  --picker--stack-grid-border: if(
227
242
  style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
228
243
  );
229
- --picker--input-stack-child-place-self: if(style(--picker-style: sheet): flex-end ; style(--picker-style: navigation-link): flex-end ; style(--picker-style: menu): flex-end ;);
244
+ // --picker--input-stack-child-place-self: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
245
+ --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
230
246
 
231
247
  // SECTION experimental only in chrome
232
- --picker--input-stack-flex-shrink: if(
233
- style(--picker-style: sheet) or style(--picker-style: navigation-link) or
234
- style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): 1 ; else: 0 ;)
235
- );
236
- --picker--stack-flex-wrap: if(
237
- style(--picker-style: sheet) or style(--picker-style: navigation-link) or
238
- style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): wrap ;)
239
- );
240
- --picker--input-stack-max-width: if(
241
- style(--picker-style: sheet) or style(--picker-style: navigation-link) or
242
- style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): 70% ;)
243
- );
244
248
  // --picker--input-stack-flex-shrink: if(
245
- // style(--label-value-placement: vertical) or
246
- // style(--label-value-placement: auto): if(style(--picker-style: sheet) or style(--picker-style: navigation-link) or style(--picker-style: menu): 1 ;) ; ;
249
+ // style(--picker-style: sheet) or style(--picker-style: navigation-link) or
250
+ // style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): 1 ; else: 0 ;)
251
+ // );
252
+ // --picker--stack-flex-wrap: if(
253
+ // style(--picker-style: sheet) or style(--picker-style: navigation-link) or
254
+ // style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): wrap ;)
255
+ // );
256
+ // --picker--input-stack-max-width: if(
257
+ // style(--picker-style: sheet) or style(--picker-style: navigation-link) or
258
+ // style(--picker-style: menu): if(style(--picker-label-value-placement: vertical) or style(--picker-label-value-placement: auto): 70% ;)
259
+ // );
260
+ // --picker--input-stack-flex-shrink: if(
261
+ // style(--picker-label-value-placement: vertical) or
262
+ // style(--picker-label-value-placement: auto): if(style(--picker-style: sheet) or style(--picker-style: navigation-link) or style(--picker-style: menu): 1 ;) ; ;
247
263
  // else: if(style(--picker-style: sheet) or style(--picker-style: navigation-link) or style(--picker-style: menu): 0 ;) ; ;
248
264
  // );
249
265
  // --picker--input-stack-max-width: if(style(--picker-style: sheet): 70% ; style(--picker-style: navigation-link): 70% ; style(--picker-style: menu): 70% ;);
@@ -265,9 +281,9 @@ $picker-ifs: (
265
281
  @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
266
282
  }
267
283
  :where(&[picker-style='#{$v}']) {
268
- :where(& menu-view > menu-view > label-view[slot='label']) {
269
- margin-inline-start: 3rem;
270
- }
284
+ // :where(& menu-view > menu-view > label-view[slot='label']) {
285
+ // margin-inline-start: 3rem;
286
+ // }
271
287
 
272
288
  // :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
273
289
  // @include make-button-affordance;
@@ -280,18 +296,18 @@ $picker-ifs: (
280
296
 
281
297
  @layer #{vars.$final-layer} {
282
298
  picker-view {
283
- //--label-value-placement
299
+ //--picker-label-value-placement
284
300
  @supports not (x: #{string.unquote('attr(x type(*))')}) {
285
301
  :where(&:not([label-value-placement])) {
286
- @each $v in vertical, horizontal, auto {
287
- @container style(--label-value-placement: #{$v}) {
288
- --label-value-placement: #{$v};
302
+ @each $v in vertical, horizontal {
303
+ @container style(--picker-label-value-placement: #{$v}) {
304
+ --picker-label-value-placement: #{$v};
289
305
  }
290
306
  }
291
307
  }
292
- @each $v in vertical, horizontal, auto {
308
+ @each $v in vertical, horizontal {
293
309
  :where(&[label-value-placement='#{$v}']) {
294
- --label-value-placement: #{$v};
310
+ --picker-label-value-placement: #{$v};
295
311
  }
296
312
  }
297
313
  }
@@ -300,7 +316,7 @@ $picker-ifs: (
300
316
  @supports (x: #{string.unquote('attr(x type(*))')}) {
301
317
  :where(&) {
302
318
  --picker-style: attr(picker-style type(<custom-ident>), inherit);
303
- --label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
319
+ --picker-label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
304
320
  }
305
321
  }
306
322
  }
package/scss/components/_tab-bar.scss CHANGED
@@ -40,6 +40,9 @@
40
40
  inset: auto 0 0 0;
41
41
 
42
42
  @include mixins.make-toolbar-pseudos(top);
43
+
44
+ --toolbaritempadistart: 1rem;
45
+ --toolbaritempadiend: 1rem;
43
46
  }
44
47
 
45
48
  > [is='form-view'] {
@@ -64,9 +67,7 @@
64
67
  --label-line-limit: 2;
65
68
  --label-truncation-mode: tail;
66
69
 
67
- --label--titlestack-font-size: var(--label-caption2-font-size);
68
- --label--titlestack-line-height: var(--label-caption2-line-height);
69
- --label--titlestack-font-weight: var(--label-caption2-font-weight);
70
+ --label-font: caption2;
70
71
  }
71
72
 
72
73
  :where(& button) {
@@ -85,6 +86,9 @@
85
86
  --tab-bar-width: 100lvw;
86
87
 
87
88
  inset: 0 0 auto 0;
89
+
90
+ --toolbaritempadistart: 0.3rem;
91
+ --toolbaritempadiend: 0.3rem;
88
92
  }
89
93
 
90
94
  > [is='form-view'] {
package/scss/components/_text-field.scss CHANGED
@@ -23,6 +23,8 @@
23
23
 
24
24
  :where(&)::part(text-field-label-stack) {
25
25
  // display: grid;
26
+
27
+ color: var(--secondary);
26
28
  }
27
29
 
28
30
  :where(&)::part(text-field-input-stack) {
@@ -43,9 +45,11 @@
43
45
 
44
46
  outline: 0;
45
47
 
46
- padding-block: 0.1rem;
48
+ padding: 0;
49
+
50
+ // padding-block: 0.1rem;
47
51
 
48
- padding-inline-start: 0.3rem;
52
+ // padding-inline: 0.3rem;
49
53
 
50
54
  background-color: transparent;
51
55
  }