@swiftwc/ui 0.0.0-dev.62 → 0.0.0-dev.64

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 (8) hide show
  1. package/generated/components/picker-view.d.ts +10 -0
  2. package/generated/components/picker-view.js +51 -42
  3. package/generated/css/index.css +40 -75
  4. package/package.json +1 -1
  5. package/scss/components/_labeled-content.scss +1 -1
  6. package/scss/components/_picker-view.scss +65 -49
  7. package/scss/components/_tab-bar.scss +7 -3
  8. package/scss/components/_text-field.scss +6 -2
package/generated/components/picker-view.d.ts CHANGED
@@ -1,6 +1,14 @@
1
1
  import { FormAssociatedBase } from '../internal/class/form-associated-base';
2
2
  declare const pickerStyles: readonly ["menu", "inline", "navigation-link", "sheet", "automatic"];
3
3
  export type PickerStyle = (typeof pickerStyles)[number];
4
+ export type DictEntry = {
5
+ value: string;
6
+ label?: string;
7
+ subtitle?: string;
8
+ systemImage?: string;
9
+ children: DictEntry[];
10
+ };
11
+ export type Dictionary = DictEntry[];
4
12
  /**
5
13
  *
6
14
  * @attr {menu|inline|navigation-link|sheet|automatic} picker-style
@@ -17,11 +25,13 @@ export declare class PickerView extends FormAssociatedBase {
17
25
  #private;
18
26
  static get ATTR(): {
19
27
  PLACEHOLDER: string;
28
+ PLACEHOLDER_ICON: string;
20
29
  LABEL: string;
21
30
  PICKER_STYLE: string;
22
31
  SELECTION: string;
23
32
  SEARCHABLE: string;
24
33
  CURRENT_VALUE_LABEL: string;
34
+ CURRENT_VALUE_ICON: string;
25
35
  TRIGGER_HELP: string;
26
36
  DICTIONARY: string;
27
37
  };
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) =>
@@ -461,10 +467,16 @@ export class PickerView extends FormAssociatedBase {
461
467
  this.#sendValueToForm();
462
468
  }
463
469
  #lastRenderedLabelMap = {};
470
+ #lastRenderedIconMap = {};
464
471
  #lastIndexedRoot = [];
465
472
  get #currentValueLabel() {
466
473
  const cvl = this.#lastRenderedLabelMap[this.#selection];
467
- 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;
468
480
  }
469
481
  get #internals() {
470
482
  return getInternals(this);
@@ -572,7 +584,10 @@ export class PickerView extends FormAssociatedBase {
572
584
  console.debug(`${_a.name} ⚡️ attr-change [${name}] ("${oldValue}" → "${newValue}")`);
573
585
  switch (name) {
574
586
  case this.constructor.ATTR.PLACEHOLDER:
575
- this.#reflectPlaceholder(newValue);
587
+ case this.constructor.ATTR.PLACEHOLDER_ICON:
588
+ if (oldValue === newValue)
589
+ break;
590
+ this.#reflectSelectionOnCurrentValueLabel(); //this.#reflectPlaceholder(newValue)
576
591
  break;
577
592
  case this.constructor.ATTR.LABEL:
578
593
  this.#reflectLabel(newValue);
@@ -589,6 +604,7 @@ export class PickerView extends FormAssociatedBase {
589
604
  this.#renderSlotted([]);
590
605
  break;
591
606
  case this.constructor.ATTR.CURRENT_VALUE_LABEL:
607
+ case this.constructor.ATTR.CURRENT_VALUE_ICON:
592
608
  // if (oldValue === newValue) break
593
609
  this.#reflectSelectionOnCurrentValueLabel();
594
610
  break;
@@ -832,17 +848,14 @@ export class PickerView extends FormAssociatedBase {
832
848
  container.appendChild(_a.#wrapOptionTag(node));
833
849
  }
834
850
  }
835
- #reflectPlaceholder(value) {
836
- if (devFlags.debug)
837
- console.debug(`#reflectPlaceholder`);
838
- const input = this.#shadowRoot.querySelector('input');
839
- if (input) {
840
- if (value)
841
- input.setAttribute('placeholder', value);
842
- else
843
- input.removeAttribute('placeholder');
844
- }
845
- }
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
+ // }
846
859
  #reflectLabel(value) {
847
860
  if (devFlags.debug)
848
861
  console.debug(`${_a.name} #reflectLabel`);
@@ -893,26 +906,22 @@ export class PickerView extends FormAssociatedBase {
893
906
  const currentValueLabel = this.querySelector(':scope>label-view:not([slot])');
894
907
  if (!currentValueLabel)
895
908
  break;
896
- const cvl = this.#currentValueLabel;
897
- if (!cvl)
898
- currentValueLabel.setAttribute('foreground', 'secondary');
899
- else
900
- currentValueLabel.removeAttribute('foreground');
901
- renderLabelTitle(currentValueLabel, cvl || this.getAttribute('placeholder') || this.#selection);
902
- 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));
903
914
  break;
904
915
  }
905
916
  case 'menu': {
906
917
  const currentValueLabel = this.querySelector(':scope>menu-view:not([slot])>label-view[slot=label]');
907
918
  if (!currentValueLabel)
908
919
  break;
909
- const cvl = this.#currentValueLabel;
910
- if (!cvl)
911
- currentValueLabel.setAttribute('foreground', 'secondary');
912
- else
913
- currentValueLabel.removeAttribute('foreground');
914
- renderLabelTitle(currentValueLabel, cvl || this.getAttribute('placeholder') || this.#selection);
915
- 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));
916
925
  break;
917
926
  }
918
927
  case 'inline':
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,6 +4695,10 @@
4698
4695
  --label-truncation-mode: tail;
4699
4696
  --label-line-limit: 1;
4700
4697
  }
4698
+ :where(picker-view) {
4699
+ --picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
4700
+ --picker--stack-grid-template-rows: minmax(0, 1fr);
4701
+ }
4701
4702
  @container not style(--picker-style) {
4702
4703
  :where(picker-view > list-view > section-view > :not(button):first-child) {
4703
4704
  color: var(--secondary);
@@ -4736,27 +4737,14 @@
4736
4737
  --picker--stack-grid-border: if(
4737
4738
  style(--picker-style: sheet): var(--itemborder,) ; style(--picker-style: navigation-link): var(--itemborder,) ; style(--picker-style: menu): var(--itemborder,) ;
4738
4739
  );
4739
- --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 ;);
4740
- --picker--input-stack-flex-shrink: if(
4741
- style(--picker-style: sheet) or style(--picker-style: navigation-link) or
4742
- style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): 1 ; else: 0 ;)
4743
- );
4744
- --picker--stack-flex-wrap: if(
4745
- style(--picker-style: sheet) or style(--picker-style: navigation-link) or
4746
- style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): wrap ;)
4747
- );
4748
- --picker--input-stack-max-width: if(
4749
- style(--picker-style: sheet) or style(--picker-style: navigation-link) or
4750
- style(--picker-style: menu): if(style(--label-value-placement: vertical) or style(--label-value-placement: auto): 70% ;)
4751
- );
4740
+ --picker--input-stack-text-align: if(style(--picker-style: sheet): end ; style(--picker-style: navigation-link): end ; style(--picker-style: menu): end ;);
4752
4741
  }
4753
4742
  }
4754
4743
  @supports not (x: if(else:red)) {
4755
4744
  @container style(--picker-style: menu) {
4756
4745
  :where(picker-view:not([picker-style])) {
4757
4746
  --picker--labelstack-display: grid;
4758
- --picker--stack-display: flex;
4759
- --picker--stack-justify-content: space-between;
4747
+ --picker--input-stack-text-align: end;
4760
4748
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4761
4749
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4762
4750
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4765,16 +4753,12 @@
4765
4753
  --picker--stack-grid-background: var(--itemface, );
4766
4754
  --picker--stack-grid-color: var(--itemtext, );
4767
4755
  --picker--stack-grid-border: var(--itemborder, );
4768
- --picker--input-stack-child-place-self: flex-end;
4769
- --picker--input-stack-flex-shrink: 0;
4770
- --picker--input-stack-max-width: 70%;
4771
4756
  }
4772
4757
  }
4773
4758
  @container style(--picker-style: navigation-link) {
4774
4759
  :where(picker-view:not([picker-style])) {
4775
4760
  --picker--labelstack-display: grid;
4776
- --picker--stack-display: flex;
4777
- --picker--stack-justify-content: space-between;
4761
+ --picker--input-stack-text-align: end;
4778
4762
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4779
4763
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4780
4764
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4783,16 +4767,12 @@
4783
4767
  --picker--stack-grid-background: var(--itemface, );
4784
4768
  --picker--stack-grid-color: var(--itemtext, );
4785
4769
  --picker--stack-grid-border: var(--itemborder, );
4786
- --picker--input-stack-child-place-self: flex-end;
4787
- --picker--input-stack-flex-shrink: 0;
4788
- --picker--input-stack-max-width: 70%;
4789
4770
  }
4790
4771
  }
4791
4772
  @container style(--picker-style: sheet) {
4792
4773
  :where(picker-view:not([picker-style])) {
4793
4774
  --picker--labelstack-display: grid;
4794
- --picker--stack-display: flex;
4795
- --picker--stack-justify-content: space-between;
4775
+ --picker--input-stack-text-align: end;
4796
4776
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4797
4777
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4798
4778
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4801,15 +4781,11 @@
4801
4781
  --picker--stack-grid-background: var(--itemface, );
4802
4782
  --picker--stack-grid-color: var(--itemtext, );
4803
4783
  --picker--stack-grid-border: var(--itemborder, );
4804
- --picker--input-stack-child-place-self: flex-end;
4805
- --picker--input-stack-flex-shrink: 0;
4806
- --picker--input-stack-max-width: 70%;
4807
4784
  }
4808
4785
  }
4809
4786
  :where(form picker-view[picker-style=menu]) {
4810
4787
  --picker--labelstack-display: grid;
4811
- --picker--stack-display: flex;
4812
- --picker--stack-justify-content: space-between;
4788
+ --picker--input-stack-text-align: end;
4813
4789
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4814
4790
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4815
4791
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4818,14 +4794,10 @@
4818
4794
  --picker--stack-grid-background: var(--itemface, );
4819
4795
  --picker--stack-grid-color: var(--itemtext, );
4820
4796
  --picker--stack-grid-border: var(--itemborder, );
4821
- --picker--input-stack-child-place-self: flex-end;
4822
- --picker--input-stack-flex-shrink: 0;
4823
- --picker--input-stack-max-width: 70%;
4824
4797
  }
4825
4798
  :where(form picker-view[picker-style=navigation-link]) {
4826
4799
  --picker--labelstack-display: grid;
4827
- --picker--stack-display: flex;
4828
- --picker--stack-justify-content: space-between;
4800
+ --picker--input-stack-text-align: end;
4829
4801
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4830
4802
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4831
4803
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4834,14 +4806,10 @@
4834
4806
  --picker--stack-grid-background: var(--itemface, );
4835
4807
  --picker--stack-grid-color: var(--itemtext, );
4836
4808
  --picker--stack-grid-border: var(--itemborder, );
4837
- --picker--input-stack-child-place-self: flex-end;
4838
- --picker--input-stack-flex-shrink: 0;
4839
- --picker--input-stack-max-width: 70%;
4840
4809
  }
4841
4810
  :where(form picker-view[picker-style=sheet]) {
4842
4811
  --picker--labelstack-display: grid;
4843
- --picker--stack-display: flex;
4844
- --picker--stack-justify-content: space-between;
4812
+ --picker--input-stack-text-align: end;
4845
4813
  --picker--stack-row-gap: var(--labeled-content-row-gap);
4846
4814
  --picker--stack-column-gap: var(--labeled-content-column-gap);
4847
4815
  --picker--stack-grid-padding-inline: var(--itempadistart, ) var(--itempadiend, );
@@ -4850,43 +4818,32 @@
4850
4818
  --picker--stack-grid-background: var(--itemface, );
4851
4819
  --picker--stack-grid-color: var(--itemtext, );
4852
4820
  --picker--stack-grid-border: var(--itemborder, );
4853
- --picker--input-stack-child-place-self: flex-end;
4854
- --picker--input-stack-flex-shrink: 0;
4855
- --picker--input-stack-max-width: 70%;
4856
4821
  }
4857
4822
  }
4858
4823
  }
4859
4824
  @layer sw-final {
4860
4825
  @supports not (x: attr(x type(*))) {
4861
- @container style(--label-value-placement: vertical) {
4826
+ @container style(--picker-label-value-placement: vertical) {
4862
4827
  :where(picker-view:not([label-value-placement])) {
4863
- --label-value-placement: vertical;
4828
+ --picker-label-value-placement: vertical;
4864
4829
  }
4865
4830
  }
4866
- @container style(--label-value-placement: horizontal) {
4831
+ @container style(--picker-label-value-placement: horizontal) {
4867
4832
  :where(picker-view:not([label-value-placement])) {
4868
- --label-value-placement: horizontal;
4869
- }
4870
- }
4871
- @container style(--label-value-placement: auto) {
4872
- :where(picker-view:not([label-value-placement])) {
4873
- --label-value-placement: auto;
4833
+ --picker-label-value-placement: horizontal;
4874
4834
  }
4875
4835
  }
4876
4836
  :where(picker-view[label-value-placement=vertical]) {
4877
- --label-value-placement: vertical;
4837
+ --picker-label-value-placement: vertical;
4878
4838
  }
4879
4839
  :where(picker-view[label-value-placement=horizontal]) {
4880
- --label-value-placement: horizontal;
4881
- }
4882
- :where(picker-view[label-value-placement=auto]) {
4883
- --label-value-placement: auto;
4840
+ --picker-label-value-placement: horizontal;
4884
4841
  }
4885
4842
  }
4886
4843
  @supports (x: attr(x type(*))) {
4887
4844
  :where(picker-view) {
4888
4845
  --picker-style: attr(picker-style type(<custom-ident>), inherit);
4889
- --label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
4846
+ --picker-label-value-placement: attr(label-value-placement type(<custom-ident>), inherit);
4890
4847
  }
4891
4848
  }
4892
4849
  }
@@ -5383,6 +5340,10 @@
5383
5340
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar]):after {
5384
5341
  background-image: linear-gradient(to top, var(--face) 0, oklch(0% 0 0deg / 0) 100%);
5385
5342
  }
5343
+ :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar]) {
5344
+ --toolbaritempadistart: 1rem;
5345
+ --toolbaritempadiend: 1rem;
5346
+ }
5386
5347
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar] > [is=form-view]) {
5387
5348
  margin-block-end: max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
5388
5349
  max-inline-size: var(--iphone-tabbar-max-inline-size);
@@ -5393,9 +5354,7 @@
5393
5354
  --label-flow: vertical;
5394
5355
  --label-line-limit: 2;
5395
5356
  --label-truncation-mode: tail;
5396
- --label--titlestack-font-size: var(--label-caption2-font-size);
5397
- --label--titlestack-line-height: var(--label-caption2-line-height);
5398
- --label--titlestack-font-weight: var(--label-caption2-font-weight);
5357
+ --label-font: caption2;
5399
5358
  }
5400
5359
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar] > [is=form-view] button) {
5401
5360
  min-inline-size: calc(var(--iphone-tabbar-block-size) + 0.1rem);
@@ -5408,6 +5367,8 @@
5408
5367
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar]) {
5409
5368
  --tab-bar-width: 100lvw;
5410
5369
  inset: 0 0 auto 0;
5370
+ --toolbaritempadistart: 0.3rem;
5371
+ --toolbaritempadiend: 0.3rem;
5411
5372
  }
5412
5373
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar] > [is=form-view]) {
5413
5374
  grid-auto-columns: minmax(max-content, 1fr);
@@ -5457,6 +5418,10 @@
5457
5418
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]):after {
5458
5419
  background-image: linear-gradient(to top, var(--face) 0, oklch(0% 0 0deg / 0) 100%);
5459
5420
  }
5421
+ :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]) {
5422
+ --toolbaritempadistart: 1rem;
5423
+ --toolbaritempadiend: 1rem;
5424
+ }
5460
5425
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar] > [is=form-view]) {
5461
5426
  margin-block-end: max(var(--safe-area-inset-bottom), var(--sidebar-block-spacing));
5462
5427
  max-inline-size: var(--iphone-tabbar-max-inline-size);
@@ -5467,9 +5432,7 @@
5467
5432
  --label-flow: vertical;
5468
5433
  --label-line-limit: 2;
5469
5434
  --label-truncation-mode: tail;
5470
- --label--titlestack-font-size: var(--label-caption2-font-size);
5471
- --label--titlestack-line-height: var(--label-caption2-line-height);
5472
- --label--titlestack-font-weight: var(--label-caption2-font-weight);
5435
+ --label-font: caption2;
5473
5436
  }
5474
5437
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar] > [is=form-view] button) {
5475
5438
  min-inline-size: calc(var(--iphone-tabbar-block-size) + 0.1rem);
@@ -5482,6 +5445,8 @@
5482
5445
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar]) {
5483
5446
  --tab-bar-width: 100lvw;
5484
5447
  inset: 0 0 auto 0;
5448
+ --toolbaritempadistart: 0.3rem;
5449
+ --toolbaritempadiend: 0.3rem;
5485
5450
  }
5486
5451
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar] > [is=form-view]) {
5487
5452
  grid-auto-columns: minmax(max-content, 1fr);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swiftwc/ui",
3
- "version": "0.0.0-dev.62",
3
+ "version": "0.0.0-dev.64",
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
@@ -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% ;);
@@ -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
  }