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

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 (15) 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.js +9 -12
  6. package/generated/components/progress-view.js +1 -1
  7. package/generated/components/scroll-view.js +2 -2
  8. package/generated/components/section-view.js +2 -2
  9. package/generated/components/text-field.js +1 -1
  10. package/generated/css/index.css +6 -14
  11. package/generated/internal/utils/render-label.d.ts +1 -1
  12. package/generated/internal/utils/render-label.js +3 -3
  13. package/package.json +1 -1
  14. package/scss/components/_picker-view.scss +8 -8
  15. package/scss/components/_tab-bar.scss +4 -0
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.js CHANGED
@@ -413,8 +413,7 @@ export class PickerView extends FormAssociatedBase {
413
413
  const value = this.getAttribute(this.constructor.ATTR.LABEL);
414
414
  if (value) {
415
415
  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);
416
+ renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, value);
418
417
  // if (label) renderLabelTitle(label, value) //label.setAttribute('title', value)
419
418
  section.insertAdjacentElement('beforeend', hStack);
420
419
  }
@@ -751,9 +750,8 @@ export class PickerView extends FormAssociatedBase {
751
750
  static #wrapOptionSpawnTag(node) {
752
751
  if (devFlags.debug)
753
752
  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));
753
+ 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;
754
+ renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, extractLabelFromGroup(node), extractImgFromGroup(node));
757
755
  // label = btn.querySelector<LabelView>(':scope>h-stack>label-view:nth-child(2)')
758
756
  // if (label) {
759
757
  // const lbl = extractLabelFromGroup(node as HTMLDataListElement),
@@ -780,12 +778,11 @@ export class PickerView extends FormAssociatedBase {
780
778
  console.debug(`${_a.name} #wrapOptgroupTag`);
781
779
  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
780
  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'))
781
+ hStack = group.querySelector(':scope>summary>h-stack') ?? undefined; // ?? group.appendChild($(summaryT, '>1'))
784
782
  // summaryLabel = summary.querySelector(':scope>label-view') ?? summary.appendChild($(labelT, '>1'))
785
783
  // if (node.hasAttribute('label')) summaryLabel.setAttribute('title', node.getAttribute('label') ?? '')
786
784
  // 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));
785
+ renderLabel(':scope>label-view:nth-child(2)', labelT, hStack, extractLabelFromGroup(node), extractImgFromGroup(node));
789
786
  return group;
790
787
  }
791
788
  // static #reflectButtons(nodes: Element[], container: Element): void
@@ -797,11 +794,11 @@ export class PickerView extends FormAssociatedBase {
797
794
  if (node instanceof Element)
798
795
  switch (node.tagName) {
799
796
  case 'DATALIST': {
800
- const group = $(`<menu-view tabindex="0"></menu-view>`, '>1');
797
+ 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
798
  // label = group.querySelector(':scope>label-view[slot=label]') ?? group.appendChild($(`<label-view slot="label"></label-view>`, '>1'))
802
799
  // if (node.hasAttribute('data-label')) label.setAttribute('title', node.getAttribute('data-label') ?? '')
803
800
  // 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));
801
+ renderLabel(':scope>label-view:nth-child(2)', `<label-view><span></span></label-view>`, hStack, extractLabelFromGroup(node), extractImgFromGroup(node));
805
802
  _a.#reflectButtons([...node.children], group);
806
803
  container.appendChild(group);
807
804
  break;
@@ -827,7 +824,7 @@ export class PickerView extends FormAssociatedBase {
827
824
  }
828
825
  else {
829
826
  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));
827
+ renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, group, extractLabelFromGroup(node), extractImgFromGroup(node));
831
828
  _a.#reflectButtons(node.children, group);
832
829
  container.appendChild(group);
833
830
  }
@@ -849,7 +846,7 @@ export class PickerView extends FormAssociatedBase {
849
846
  #reflectLabel(value) {
850
847
  if (devFlags.debug)
851
848
  console.debug(`${_a.name} #reflectLabel`);
852
- renderLabel(this, ':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, value);
849
+ renderLabel(':scope>label-view[slot=label]', `<label-view slot="label"><span></span></label-view>`, this, value);
853
850
  this.#renderSlotted([]);
854
851
  }
855
852
  #reflectSelectionOnButtons() {
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
@@ -4698,11 +4698,6 @@
4698
4698
  --label-truncation-mode: tail;
4699
4699
  --label-line-limit: 1;
4700
4700
  }
4701
- @container style(--picker-style: menu) {
4702
- :where(picker-view menu-view > menu-view > label-view[slot=label]) {
4703
- margin-inline-start: 3rem;
4704
- }
4705
- }
4706
4701
  @container not style(--picker-style) {
4707
4702
  :where(picker-view > list-view > section-view > :not(button):first-child) {
4708
4703
  color: var(--secondary);
@@ -4827,9 +4822,6 @@
4827
4822
  --picker--input-stack-flex-shrink: 0;
4828
4823
  --picker--input-stack-max-width: 70%;
4829
4824
  }
4830
- :where(:where(picker-view[picker-style=menu]) menu-view > menu-view > label-view[slot=label]) {
4831
- margin-inline-start: 3rem;
4832
- }
4833
4825
  :where(form picker-view[picker-style=navigation-link]) {
4834
4826
  --picker--labelstack-display: grid;
4835
4827
  --picker--stack-display: flex;
@@ -4846,9 +4838,6 @@
4846
4838
  --picker--input-stack-flex-shrink: 0;
4847
4839
  --picker--input-stack-max-width: 70%;
4848
4840
  }
4849
- :where(:where(picker-view[picker-style=navigation-link]) menu-view > menu-view > label-view[slot=label]) {
4850
- margin-inline-start: 3rem;
4851
- }
4852
4841
  :where(form picker-view[picker-style=sheet]) {
4853
4842
  --picker--labelstack-display: grid;
4854
4843
  --picker--stack-display: flex;
@@ -4865,9 +4854,6 @@
4865
4854
  --picker--input-stack-flex-shrink: 0;
4866
4855
  --picker--input-stack-max-width: 70%;
4867
4856
  }
4868
- :where(:where(picker-view[picker-style=sheet]) menu-view > menu-view > label-view[slot=label]) {
4869
- margin-inline-start: 3rem;
4870
- }
4871
4857
  }
4872
4858
  }
4873
4859
  @layer sw-final {
@@ -5407,6 +5393,9 @@
5407
5393
  --label-flow: vertical;
5408
5394
  --label-line-limit: 2;
5409
5395
  --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);
5410
5399
  }
5411
5400
  :where(tab-view[tab-view-style=tab-bar-only] [is=tab-bar] > [is=form-view] button) {
5412
5401
  min-inline-size: calc(var(--iphone-tabbar-block-size) + 0.1rem);
@@ -5478,6 +5467,9 @@
5478
5467
  --label-flow: vertical;
5479
5468
  --label-line-limit: 2;
5480
5469
  --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);
5481
5473
  }
5482
5474
  :where(tab-view:not([tab-view-style=tab-bar-only]) [is=tab-bar] > [is=form-view] button) {
5483
5475
  min-inline-size: calc(var(--iphone-tabbar-block-size) + 0.1rem);
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.60",
3
+ "version": "0.0.0-dev.62",
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/_picker-view.scss CHANGED
@@ -170,11 +170,11 @@ $picker-ifs: (
170
170
  // --picker--stack-grid-template-columns: auto minmax(0, 1fr);
171
171
  // }
172
172
 
173
- :where(& menu-view > menu-view > label-view[slot='label']) {
174
- @container style(--picker-style: menu) {
175
- margin-inline-start: 3rem;
176
- }
177
- }
173
+ // :where(& menu-view > menu-view > label-view[slot='label']) {
174
+ // @container style(--picker-style: menu) {
175
+ // margin-inline-start: 3rem;
176
+ // }
177
+ // }
178
178
  // NOTE: make first inline list item secondary
179
179
  :where(& > list-view > section-view > :not(button):first-child) {
180
180
  @container not style(--picker-style) {
@@ -265,9 +265,9 @@ $picker-ifs: (
265
265
  @include mixins.write-props(map.get($picker-ifs, $v)); //@include set-picker-style($v);
266
266
  }
267
267
  :where(&[picker-style='#{$v}']) {
268
- :where(& menu-view > menu-view > label-view[slot='label']) {
269
- margin-inline-start: 3rem;
270
- }
268
+ // :where(& menu-view > menu-view > label-view[slot='label']) {
269
+ // margin-inline-start: 3rem;
270
+ // }
271
271
 
272
272
  // :where(& menu-view > button, & menu-view > [is='disclosure-group'] > button, & menu-view > [is='disclosure-group'] > summary) {
273
273
  // @include make-button-affordance;
package/scss/components/_tab-bar.scss CHANGED
@@ -63,6 +63,10 @@
63
63
  --label-flow: vertical;
64
64
  --label-line-limit: 2;
65
65
  --label-truncation-mode: tail;
66
+
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);
66
70
  }
67
71
 
68
72
  :where(& button) {