@swiftwc/ui 0.0.0-dev.96 → 0.0.0-dev.97
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.
- package/generated/components/fine-tooltip.d.ts +3 -0
- package/generated/components/fine-tooltip.js +3 -0
- package/generated/css/index.css +67 -15
- package/generated/events/alert-dialog.d.ts +3 -0
- package/generated/events/confirmation-dialog.d.ts +3 -0
- package/generated/events/date-picker.d.ts +3 -0
- package/generated/events/lifecycle-observer.d.ts +4 -0
- package/generated/events/picker-view.d.ts +6 -0
- package/generated/events/scroll-view.d.ts +4 -0
- package/generated/events/tab-view.d.ts +10 -0
- package/generated/events/text-field.d.ts +3 -0
- package/generated/events/toggle-view.d.ts +3 -0
- package/package.json +1 -1
- package/scss/_maps.scss +19 -13
- package/scss/base/_root.scss +1 -1
- package/scss/components/_picker-view.scss +7 -1
- package/scss/components/_scroll-view-toolbars.scss +8 -2
- package/scss/components/_toggle-view.scss +2 -1
- package/scss/mixins/_index.scss +8 -2
- package/scss/placeholders/_lists.scss +27 -1
- package/web-components.html-data/en.json +69 -34
|
@@ -2,6 +2,9 @@ var _a;
|
|
|
2
2
|
import { CleanupRegistry } from '../internal/class/cleanup-registry';
|
|
3
3
|
import { $, devFlags, onoff } from '../internal/utils';
|
|
4
4
|
import { html } from '../tpl';
|
|
5
|
+
/**
|
|
6
|
+
* @summary A tooltip that shows an unobtrusive helpful message on pointer:fine screens. Use it by adding a `help` attribute to any element.
|
|
7
|
+
*/
|
|
5
8
|
export class FineTooltip extends HTMLElement {
|
|
6
9
|
constructor() {
|
|
7
10
|
super();
|
package/generated/css/index.css
CHANGED
|
@@ -116,22 +116,22 @@
|
|
|
116
116
|
--labeled-content-column-gap: 1rem;
|
|
117
117
|
--labeled-content-row-gap: 0.5rem;
|
|
118
118
|
--label-footnote-font-size: 1rem;
|
|
119
|
-
--label-footnote-line-height:
|
|
119
|
+
--label-footnote-line-height: 1.1875;
|
|
120
120
|
--label-footnote-font-weight: 400;
|
|
121
121
|
--label-caption2-font-size: 0.75rem;
|
|
122
|
-
--label-caption2-line-height: 1.
|
|
122
|
+
--label-caption2-line-height: 1.4166666667;
|
|
123
123
|
--label-caption2-font-weight: 400;
|
|
124
|
-
--label-caption-font-size: 0.
|
|
125
|
-
--label-caption-line-height: 1.
|
|
124
|
+
--label-caption-font-size: 0.8125rem;
|
|
125
|
+
--label-caption-line-height: 1.5384615385;
|
|
126
126
|
--label-caption-font-weight: 400;
|
|
127
127
|
--label-callout-font-size: 0.875rem;
|
|
128
|
-
--label-callout-line-height:
|
|
128
|
+
--label-callout-line-height: 1.3571428571;
|
|
129
129
|
--label-callout-font-weight: 400;
|
|
130
130
|
--label-body-font-size: 1rem;
|
|
131
131
|
--label-body-line-height: 1.5;
|
|
132
132
|
--label-body-font-weight: 400;
|
|
133
133
|
--label-subheadline-font-size: 1.125rem;
|
|
134
|
-
--label-subheadline-line-height: 1.
|
|
134
|
+
--label-subheadline-line-height: 1.5;
|
|
135
135
|
--label-subheadline-font-weight: 400;
|
|
136
136
|
--label-headline-font-size: 1.25rem;
|
|
137
137
|
--label-headline-line-height: 1.4;
|
|
@@ -151,6 +151,9 @@
|
|
|
151
151
|
--label-extra-large-title-font-size: 3.75rem;
|
|
152
152
|
--label-extra-large-title-line-height: 1;
|
|
153
153
|
--label-extra-large-title-font-weight: 700;
|
|
154
|
+
--label-extra-large-title2-font-size: 4.5rem;
|
|
155
|
+
--label-extra-large-title2-line-height: 1;
|
|
156
|
+
--label-extra-large-title2-font-weight: 700;
|
|
154
157
|
--insetlist-item-border-radius: 2rem;
|
|
155
158
|
--insetform-item-border-radius: 2rem;
|
|
156
159
|
--list-row-gap: 3rem;
|
|
@@ -650,9 +653,27 @@
|
|
|
650
653
|
padding-block: 1px;
|
|
651
654
|
}
|
|
652
655
|
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view:not(section-view section-view, menu-view *), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view:not(section-view section-view, menu-view *), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view:not(section-view section-view, menu-view *))::part(section-header-stack) {
|
|
653
|
-
top:
|
|
656
|
+
top: var(--list--sticky-block-size, 0px);
|
|
654
657
|
position: sticky;
|
|
655
658
|
}
|
|
659
|
+
:where(table-view:not(table-view table-view, list-view table-view, [is=form-view] table-view) section-view:not(section-view section-view, menu-view *):is(scroll-view:has(~ tool-bar > [slot^=top-bar],
|
|
660
|
+
~ tool-bar > [slot=cancellation-action],
|
|
661
|
+
~ tool-bar > [slot=primary-action],
|
|
662
|
+
~ tool-bar > [slot=confirmation-action],
|
|
663
|
+
~ tool-bar > [slot=destructive-action]) section-view,
|
|
664
|
+
scroll-view:has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]) section-view), [is=form-view]:not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]) section-view:not(section-view section-view, menu-view *):is(scroll-view:has(~ tool-bar > [slot^=top-bar],
|
|
665
|
+
~ tool-bar > [slot=cancellation-action],
|
|
666
|
+
~ tool-bar > [slot=primary-action],
|
|
667
|
+
~ tool-bar > [slot=confirmation-action],
|
|
668
|
+
~ tool-bar > [slot=destructive-action]) section-view,
|
|
669
|
+
scroll-view:has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]) section-view), list-view:not(list-view list-view, [is=form-view] list-view, table-view list-view) section-view:not(section-view section-view, menu-view *):is(scroll-view:has(~ tool-bar > [slot^=top-bar],
|
|
670
|
+
~ tool-bar > [slot=cancellation-action],
|
|
671
|
+
~ tool-bar > [slot=primary-action],
|
|
672
|
+
~ tool-bar > [slot=confirmation-action],
|
|
673
|
+
~ tool-bar > [slot=destructive-action]) section-view,
|
|
674
|
+
scroll-view:has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]) section-view))::part(section-header-stack) {
|
|
675
|
+
top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
|
|
676
|
+
}
|
|
656
677
|
:where(table-view[columns="2"]:not(menu-view *):not(table-view table-view, list-view table-view, [is=form-view] table-view), [columns="2"][is=form-view]:not(menu-view *):not([is=form-view] [is=form-view], list-view [is=form-view], table-view [is=form-view], [is=tab-bar] > [is=form-view]), list-view[columns="2"]:not(menu-view *):not(list-view list-view, [is=form-view] list-view, table-view list-view)) {
|
|
657
678
|
--list--host-grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
658
679
|
position: relative;
|
|
@@ -1473,7 +1494,11 @@
|
|
|
1473
1494
|
:where(detail-placeholder > scroll-view) > *:not([slot]) {
|
|
1474
1495
|
grid-area: main;
|
|
1475
1496
|
}
|
|
1476
|
-
:where(detail-placeholder > scroll-view):has(~ tool-bar > [slot^=top-bar]
|
|
1497
|
+
:where(detail-placeholder > scroll-view):has(~ tool-bar > [slot^=top-bar],
|
|
1498
|
+
~ tool-bar > [slot=cancellation-action],
|
|
1499
|
+
~ tool-bar > [slot=primary-action],
|
|
1500
|
+
~ tool-bar > [slot=confirmation-action],
|
|
1501
|
+
~ tool-bar > [slot=destructive-action]), :where(detail-placeholder > scroll-view):has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]) {
|
|
1477
1502
|
grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
|
|
1478
1503
|
}
|
|
1479
1504
|
:where(detail-placeholder > scroll-view)::before {
|
|
@@ -1970,7 +1995,11 @@
|
|
|
1970
1995
|
:where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view) > *:not([slot]) {
|
|
1971
1996
|
grid-area: main;
|
|
1972
1997
|
}
|
|
1973
|
-
:where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view):has(~ tool-bar > [slot^=top-bar]
|
|
1998
|
+
:where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view):has(~ tool-bar > [slot^=top-bar],
|
|
1999
|
+
~ tool-bar > [slot=cancellation-action],
|
|
2000
|
+
~ tool-bar > [slot=primary-action],
|
|
2001
|
+
~ tool-bar > [slot=confirmation-action],
|
|
2002
|
+
~ tool-bar > [slot=destructive-action]), :where(navigation-stack > scroll-view, navigation-split-view > scroll-view, [is=sidebar-view] > scroll-view, body-view > scroll-view, [is=full-screen] > scroll-view, [is=sheet-view] > scroll-view):has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]) {
|
|
1974
2003
|
grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
|
|
1975
2004
|
}
|
|
1976
2005
|
:where(navigation-stack > scroll-view[navigation-bar-title-display-mode=large], navigation-split-view > scroll-view[navigation-bar-title-display-mode=large], [is=sidebar-view] > scroll-view[navigation-bar-title-display-mode=large], body-view > scroll-view[navigation-bar-title-display-mode=large], [is=full-screen] > scroll-view[navigation-bar-title-display-mode=large], [is=sheet-view] > scroll-view[navigation-bar-title-display-mode=large]) > [slot=top-bar-principal] {
|
|
@@ -2393,8 +2422,12 @@
|
|
|
2393
2422
|
pointer-events: none;
|
|
2394
2423
|
visibility: collapse;
|
|
2395
2424
|
}
|
|
2396
|
-
:where(scroll-view:has(~ tool-bar > [slot^=top-bar]
|
|
2397
|
-
|
|
2425
|
+
:where(scroll-view:has(~ tool-bar > [slot^=top-bar],
|
|
2426
|
+
~ tool-bar > [slot=cancellation-action],
|
|
2427
|
+
~ tool-bar > [slot=primary-action],
|
|
2428
|
+
~ tool-bar > [slot=confirmation-action],
|
|
2429
|
+
~ tool-bar > [slot=destructive-action]),
|
|
2430
|
+
scroll-view:has(> [slot^=top-bar], > [slot=cancellation-action], > [slot=primary-action], > [slot=confirmation-action], > [slot=destructive-action]))::part(scroll-view-navbar) {
|
|
2398
2431
|
visibility: visible;
|
|
2399
2432
|
}
|
|
2400
2433
|
:where(scroll-view:has(~ tool-bar > [slot^=bottom-bar]),
|
|
@@ -2975,9 +3008,9 @@
|
|
|
2975
3008
|
}
|
|
2976
3009
|
@supports (x: if(else:red)) {
|
|
2977
3010
|
:where(label-view) {
|
|
2978
|
-
--label--titlestack-font-size: if(style(--label-font: footnote): var(--label-footnote-font-size) ; style(--label-font: caption2): var(--label-caption2-font-size) ; style(--label-font: caption): var(--label-caption-font-size) ; style(--label-font: callout): var(--label-callout-font-size) ; style(--label-font: body): var(--label-body-font-size) ; style(--label-font: subheadline): var(--label-subheadline-font-size) ; style(--label-font: headline): var(--label-headline-font-size) ; style(--label-font: title3): var(--label-title3-font-size) ; style(--label-font: title2): var(--label-title2-font-size) ; style(--label-font: title): var(--label-title-font-size) ; style(--label-font: large-title): var(--label-large-title-font-size) ; style(--label-font: extra-large-title): var(--label-extra-large-title-font-size) ;);
|
|
2979
|
-
--label--titlestack-line-height: if(style(--label-font: footnote): var(--label-footnote-line-height) ; style(--label-font: caption2): var(--label-caption2-line-height) ; style(--label-font: caption): var(--label-caption-line-height) ; style(--label-font: callout): var(--label-callout-line-height) ; style(--label-font: body): var(--label-body-line-height) ; style(--label-font: subheadline): var(--label-subheadline-line-height) ; style(--label-font: headline): var(--label-headline-line-height) ; style(--label-font: title3): var(--label-title3-line-height) ; style(--label-font: title2): var(--label-title2-line-height) ; style(--label-font: title): var(--label-title-line-height) ; style(--label-font: large-title): var(--label-large-title-line-height) ; style(--label-font: extra-large-title): var(--label-extra-large-title-line-height) ;);
|
|
2980
|
-
--label--titlestack-font-weight: if(style(--label-font: footnote): var(--label-footnote-font-weight) ; style(--label-font: caption2): var(--label-caption2-font-weight) ; style(--label-font: caption): var(--label-caption-font-weight) ; style(--label-font: callout): var(--label-callout-font-weight) ; style(--label-font: body): var(--label-body-font-weight) ; style(--label-font: subheadline): var(--label-subheadline-font-weight) ; style(--label-font: headline): var(--label-headline-font-weight) ; style(--label-font: title3): var(--label-title3-font-weight) ; style(--label-font: title2): var(--label-title2-font-weight) ; style(--label-font: title): var(--label-title-font-weight) ; style(--label-font: large-title): var(--label-large-title-font-weight) ; style(--label-font: extra-large-title): var(--label-extra-large-title-font-weight) ;);
|
|
3011
|
+
--label--titlestack-font-size: if(style(--label-font: footnote): var(--label-footnote-font-size) ; style(--label-font: caption2): var(--label-caption2-font-size) ; style(--label-font: caption): var(--label-caption-font-size) ; style(--label-font: callout): var(--label-callout-font-size) ; style(--label-font: body): var(--label-body-font-size) ; style(--label-font: subheadline): var(--label-subheadline-font-size) ; style(--label-font: headline): var(--label-headline-font-size) ; style(--label-font: title3): var(--label-title3-font-size) ; style(--label-font: title2): var(--label-title2-font-size) ; style(--label-font: title): var(--label-title-font-size) ; style(--label-font: large-title): var(--label-large-title-font-size) ; style(--label-font: extra-large-title): var(--label-extra-large-title-font-size) ; style(--label-font: extra-large-title2): var(--label-extra-large-title2-font-size) ;);
|
|
3012
|
+
--label--titlestack-line-height: if(style(--label-font: footnote): var(--label-footnote-line-height) ; style(--label-font: caption2): var(--label-caption2-line-height) ; style(--label-font: caption): var(--label-caption-line-height) ; style(--label-font: callout): var(--label-callout-line-height) ; style(--label-font: body): var(--label-body-line-height) ; style(--label-font: subheadline): var(--label-subheadline-line-height) ; style(--label-font: headline): var(--label-headline-line-height) ; style(--label-font: title3): var(--label-title3-line-height) ; style(--label-font: title2): var(--label-title2-line-height) ; style(--label-font: title): var(--label-title-line-height) ; style(--label-font: large-title): var(--label-large-title-line-height) ; style(--label-font: extra-large-title): var(--label-extra-large-title-line-height) ; style(--label-font: extra-large-title2): var(--label-extra-large-title2-line-height) ;);
|
|
3013
|
+
--label--titlestack-font-weight: if(style(--label-font: footnote): var(--label-footnote-font-weight) ; style(--label-font: caption2): var(--label-caption2-font-weight) ; style(--label-font: caption): var(--label-caption-font-weight) ; style(--label-font: callout): var(--label-callout-font-weight) ; style(--label-font: body): var(--label-body-font-weight) ; style(--label-font: subheadline): var(--label-subheadline-font-weight) ; style(--label-font: headline): var(--label-headline-font-weight) ; style(--label-font: title3): var(--label-title3-font-weight) ; style(--label-font: title2): var(--label-title2-font-weight) ; style(--label-font: title): var(--label-title-font-weight) ; style(--label-font: large-title): var(--label-large-title-font-weight) ; style(--label-font: extra-large-title): var(--label-extra-large-title-font-weight) ; style(--label-font: extra-large-title2): var(--label-extra-large-title2-font-weight) ;);
|
|
2981
3014
|
--label--overflow: if(style(--label-truncation-mode: tail): hidden; );
|
|
2982
3015
|
--label--text-overflow: if(style(--label-truncation-mode: tail): ellipsis; );
|
|
2983
3016
|
--label--host-white-space: if(style(--label-line-limit: 1): nowrap; style(--label-line-limit: 2): normal; );
|
|
@@ -3356,6 +3389,20 @@
|
|
|
3356
3389
|
--label--titlestack-font-weight: var(--label-extra-large-title-font-weight);
|
|
3357
3390
|
}
|
|
3358
3391
|
}
|
|
3392
|
+
@container style(--label-font: extra-large-title2) {
|
|
3393
|
+
:where(label-view) {
|
|
3394
|
+
--label--titlestack-font-size: var(--label-extra-large-title2-font-size);
|
|
3395
|
+
--label--titlestack-line-height: var(--label-extra-large-title2-line-height);
|
|
3396
|
+
--label--titlestack-font-weight: var(--label-extra-large-title2-font-weight);
|
|
3397
|
+
}
|
|
3398
|
+
}
|
|
3399
|
+
@container not style(--label-font: extra-large-title2) {
|
|
3400
|
+
:where(label-view[font=extra-large-title2]) {
|
|
3401
|
+
--label--titlestack-font-size: var(--label-extra-large-title2-font-size);
|
|
3402
|
+
--label--titlestack-line-height: var(--label-extra-large-title2-line-height);
|
|
3403
|
+
--label--titlestack-font-weight: var(--label-extra-large-title2-font-weight);
|
|
3404
|
+
}
|
|
3405
|
+
}
|
|
3359
3406
|
}
|
|
3360
3407
|
@supports (x: attr(x type(*))) {
|
|
3361
3408
|
:where(label-view) {
|
|
@@ -5077,10 +5124,12 @@
|
|
|
5077
5124
|
}
|
|
5078
5125
|
:where(picker-view)::part(picker-label-stack) {
|
|
5079
5126
|
display: var(--picker--labelstack-display, none);
|
|
5080
|
-
color: var(--secondary);
|
|
5081
5127
|
--label-truncation-mode: tail;
|
|
5082
5128
|
--label-line-limit: 1;
|
|
5083
5129
|
}
|
|
5130
|
+
:where(form :where(picker-view))::part(picker-label-stack) {
|
|
5131
|
+
color: var(--secondary);
|
|
5132
|
+
}
|
|
5084
5133
|
:where(picker-view) {
|
|
5085
5134
|
--picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
|
|
5086
5135
|
--picker--stack-grid-template-rows: minmax(0, 1fr);
|
|
@@ -5912,6 +5961,9 @@
|
|
|
5912
5961
|
--tertiaryBackground: var(--tertiaryGroupedBackground);
|
|
5913
5962
|
--face: var(--background);
|
|
5914
5963
|
}
|
|
5964
|
+
:where([foreground=primary]) {
|
|
5965
|
+
color: var(--primary);
|
|
5966
|
+
}
|
|
5915
5967
|
:where([foreground=secondary]) {
|
|
5916
5968
|
color: var(--secondary);
|
|
5917
5969
|
}
|
|
@@ -20,4 +20,10 @@ declare global {
|
|
|
20
20
|
'picker:searchblur': PickerSearchblurEvent;
|
|
21
21
|
'picker:searchinput': PickerSearchinputEvent;
|
|
22
22
|
}
|
|
23
|
+
interface DocumentEventMap {
|
|
24
|
+
selection: PickerSelectionEvent;
|
|
25
|
+
'picker:searchfocus': PickerSearchfocusEvent;
|
|
26
|
+
'picker:searchblur': PickerSearchblurEvent;
|
|
27
|
+
'picker:searchinput': PickerSearchinputEvent;
|
|
28
|
+
}
|
|
23
29
|
}
|
|
@@ -41,4 +41,14 @@ declare global {
|
|
|
41
41
|
'tab-view:toggle': TabViewToggleEvent;
|
|
42
42
|
'tab-view:adaptable-tab-bar-placement-change': TabViewAdaptableTabBarPlacementChangeEvent;
|
|
43
43
|
}
|
|
44
|
+
interface DocumentEventMap {
|
|
45
|
+
tabshow: TabshowEvent;
|
|
46
|
+
tabhide: TabhideEvent;
|
|
47
|
+
tabreveal: TabrevealEvent;
|
|
48
|
+
tabswap: TabswapEvent;
|
|
49
|
+
beforetabreveal: BeforetabrevealEvent;
|
|
50
|
+
beforetabswap: BeforetabswapEvent;
|
|
51
|
+
'tab-view:toggle': TabViewToggleEvent;
|
|
52
|
+
'tab-view:adaptable-tab-bar-placement-change': TabViewAdaptableTabBarPlacementChangeEvent;
|
|
53
|
+
}
|
|
44
54
|
}
|
package/package.json
CHANGED
package/scss/_maps.scss
CHANGED
|
@@ -151,62 +151,67 @@ $block-placement-map: (
|
|
|
151
151
|
$label-fonts-map: (
|
|
152
152
|
footnote: (
|
|
153
153
|
size: 1rem,
|
|
154
|
-
|
|
154
|
+
leading: calc(1.1875 / 1),
|
|
155
155
|
weight: 400,
|
|
156
156
|
),
|
|
157
157
|
caption2: (
|
|
158
158
|
size: 0.75rem,
|
|
159
|
-
|
|
159
|
+
leading: calc(1.0625 / 0.75),
|
|
160
160
|
weight: 400,
|
|
161
161
|
),
|
|
162
162
|
caption: (
|
|
163
|
-
size: 0.
|
|
164
|
-
|
|
163
|
+
size: 0.8125rem,
|
|
164
|
+
leading: calc(1.25 / 0.8125),
|
|
165
165
|
weight: 400,
|
|
166
166
|
),
|
|
167
167
|
callout: (
|
|
168
168
|
size: 0.875rem,
|
|
169
|
-
|
|
169
|
+
leading: calc(1.1875 / 0.875),
|
|
170
170
|
weight: 400,
|
|
171
171
|
),
|
|
172
172
|
body: (
|
|
173
173
|
size: 1rem,
|
|
174
|
-
|
|
174
|
+
leading: calc(1.5 / 1),
|
|
175
175
|
weight: 400,
|
|
176
176
|
),
|
|
177
177
|
subheadline: (
|
|
178
178
|
size: 1.125rem,
|
|
179
|
-
|
|
179
|
+
leading: calc(1.6875 / 1.125),
|
|
180
180
|
weight: 400,
|
|
181
181
|
),
|
|
182
182
|
headline: (
|
|
183
183
|
size: 1.25rem,
|
|
184
|
-
|
|
184
|
+
leading: calc(1.75 / 1.25),
|
|
185
185
|
weight: 500,
|
|
186
186
|
),
|
|
187
187
|
title3: (
|
|
188
188
|
size: 1.5rem,
|
|
189
|
-
|
|
189
|
+
leading: calc(2 / 1.5),
|
|
190
190
|
weight: 600,
|
|
191
191
|
),
|
|
192
192
|
title2: (
|
|
193
193
|
size: 1.875rem,
|
|
194
|
-
|
|
194
|
+
leading: calc(2.25 / 1.875),
|
|
195
195
|
weight: 600,
|
|
196
196
|
),
|
|
197
197
|
title: (
|
|
198
198
|
size: 2.25rem,
|
|
199
|
-
|
|
199
|
+
leading: calc(2.5 / 2.25),
|
|
200
200
|
weight: 600,
|
|
201
201
|
),
|
|
202
202
|
large-title: (
|
|
203
203
|
size: 3rem,
|
|
204
|
-
|
|
204
|
+
leading: 1,
|
|
205
205
|
weight: 700,
|
|
206
206
|
),
|
|
207
207
|
extra-large-title: (
|
|
208
208
|
size: 3.75rem,
|
|
209
|
-
|
|
209
|
+
leading: 1,
|
|
210
|
+
weight: 700,
|
|
211
|
+
),
|
|
212
|
+
extra-large-title2: (
|
|
213
|
+
size: 4.5rem,
|
|
214
|
+
leading: 1,
|
|
210
215
|
weight: 700,
|
|
211
216
|
),
|
|
212
217
|
);
|
|
@@ -258,6 +263,7 @@ $button-sizes-map: (
|
|
|
258
263
|
$tint-names: gray, blue, red, green, orange, purple;
|
|
259
264
|
|
|
260
265
|
$foreground-tokens: (
|
|
266
|
+
primary: --primary,
|
|
261
267
|
secondary: --secondary,
|
|
262
268
|
blue: --blue,
|
|
263
269
|
red: --red,
|
package/scss/base/_root.scss
CHANGED
|
@@ -234,7 +234,7 @@
|
|
|
234
234
|
|
|
235
235
|
@each $label, $props in maps.$label-fonts-map {
|
|
236
236
|
--label-#{$label}-font-size: #{map.get($props, size)};
|
|
237
|
-
--label-#{$label}-line-height: #{map.get($props,
|
|
237
|
+
--label-#{$label}-line-height: #{map.get($props, leading)};
|
|
238
238
|
--label-#{$label}-font-weight: #{map.get($props, weight)};
|
|
239
239
|
}
|
|
240
240
|
|
|
@@ -152,13 +152,19 @@ $picker-ifs: (
|
|
|
152
152
|
&::part(picker-label-stack) {
|
|
153
153
|
display: var(--picker--labelstack-display, none); // display: none;
|
|
154
154
|
|
|
155
|
-
color: var(--secondary);
|
|
155
|
+
// color: var(--secondary);
|
|
156
156
|
|
|
157
157
|
--label-truncation-mode: tail;
|
|
158
158
|
|
|
159
159
|
--label-line-limit: 1;
|
|
160
160
|
}
|
|
161
161
|
|
|
162
|
+
form & {
|
|
163
|
+
:where(&)::part(picker-label-stack) {
|
|
164
|
+
color: var(--secondary);
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
162
168
|
--picker--stack-grid-template-columns: minmax(30%, 1fr) auto;
|
|
163
169
|
|
|
164
170
|
--picker--stack-grid-template-rows: minmax(0, 1fr);
|
|
@@ -25,8 +25,14 @@
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
scroll-view:has(
|
|
29
|
-
|
|
28
|
+
scroll-view:has(
|
|
29
|
+
~ tool-bar > [slot^='top-bar'],
|
|
30
|
+
~ tool-bar > [slot='cancellation-action'],
|
|
31
|
+
~ tool-bar > [slot='primary-action'],
|
|
32
|
+
~ tool-bar > [slot='confirmation-action'],
|
|
33
|
+
~ tool-bar > [slot='destructive-action']
|
|
34
|
+
),
|
|
35
|
+
scroll-view:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) {
|
|
30
36
|
:where(&)::part(scroll-view-navbar) {
|
|
31
37
|
visibility: visible;
|
|
32
38
|
}
|
package/scss/mixins/_index.scss
CHANGED
|
@@ -80,8 +80,14 @@
|
|
|
80
80
|
grid-area: main;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
&:has(
|
|
84
|
-
|
|
83
|
+
&:has(
|
|
84
|
+
~ tool-bar > [slot^='top-bar'],
|
|
85
|
+
~ tool-bar > [slot='cancellation-action'],
|
|
86
|
+
~ tool-bar > [slot='primary-action'],
|
|
87
|
+
~ tool-bar > [slot='confirmation-action'],
|
|
88
|
+
~ tool-bar > [slot='destructive-action']
|
|
89
|
+
),
|
|
90
|
+
&:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) {
|
|
85
91
|
grid-template-rows: var(--navigation-bar-block-size) minmax(max-content, 1fr);
|
|
86
92
|
}
|
|
87
93
|
}
|
|
@@ -364,7 +364,7 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
|
|
|
364
364
|
}
|
|
365
365
|
|
|
366
366
|
&::part(section-header-stack) {
|
|
367
|
-
top:
|
|
367
|
+
top: var(--list--sticky-block-size, 0px); // + var(--navigation-bar-block-size));
|
|
368
368
|
|
|
369
369
|
position: sticky;
|
|
370
370
|
|
|
@@ -373,6 +373,32 @@ $list-item-selector: ':not([slot], section-view, [is="disclosure-group"], picker
|
|
|
373
373
|
// text-shadow: 0 0 5px var(--face);
|
|
374
374
|
}
|
|
375
375
|
}
|
|
376
|
+
|
|
377
|
+
// &:is([list-style*='inset'] section-view, [form-style*='inset'] section-view) {
|
|
378
|
+
// :where(&) {
|
|
379
|
+
// &::part(section-header-stack) {
|
|
380
|
+
// top: calc(var(--list--sticky-block-size, 0px) + 1rem);
|
|
381
|
+
// }
|
|
382
|
+
// }
|
|
383
|
+
// }
|
|
384
|
+
|
|
385
|
+
&:is(
|
|
386
|
+
scroll-view:has(
|
|
387
|
+
~ tool-bar > [slot^='top-bar'],
|
|
388
|
+
~ tool-bar > [slot='cancellation-action'],
|
|
389
|
+
~ tool-bar > [slot='primary-action'],
|
|
390
|
+
~ tool-bar > [slot='confirmation-action'],
|
|
391
|
+
~ tool-bar > [slot='destructive-action']
|
|
392
|
+
)
|
|
393
|
+
section-view,
|
|
394
|
+
scroll-view:has(> [slot^='top-bar'], > [slot='cancellation-action'], > [slot='primary-action'], > [slot='confirmation-action'], > [slot='destructive-action']) section-view
|
|
395
|
+
) {
|
|
396
|
+
:where(&) {
|
|
397
|
+
&::part(section-header-stack) {
|
|
398
|
+
top: calc(var(--list--sticky-block-size, 0px) + var(--navigation-bar-block-size));
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
}
|
|
376
402
|
}
|
|
377
403
|
|
|
378
404
|
// SECTION: Enable 2-col layout
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"name": "title-key"
|
|
47
47
|
}
|
|
48
48
|
],
|
|
49
|
-
"description": "A control that starts an action. Styled with a standard border, adapting to the button’s surroundings.\n---\n\n```ts\ninterface BorderedButtonSignature {\n Declaration: '<button is=\"bordered-button\"></button>'\n\n Attributes: {\n role
|
|
49
|
+
"description": "A control that starts an action. Styled with a standard border, adapting to the button’s surroundings.\n---\n\n```ts\ninterface BorderedButtonSignature {\n Declaration: '<button is=\"bordered-button\"></button>'\n\n Attributes: {\n role?: 'destructive' | 'confirm' // A value that describes the purpose of a button\n 'title-key'?: string\n }\n\n Slots: {\n overlay: HTMLElement[]\n }\n}\n\nclass BorderedButton extends HTMLButtonElement<BorderedButtonSignature> {}\n\n```\n\n### **Examples:**\n**Creating a bordered button:**\n```html\n<button is=\"bordered-button\">\n <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```\n"
|
|
50
50
|
},
|
|
51
51
|
{
|
|
52
52
|
"name": "bordered-prominent-button",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"name": "title-key"
|
|
74
74
|
}
|
|
75
75
|
],
|
|
76
|
-
"description": "A control that starts an action. Styled with a prominent border, adapting to the button’s surroundings.\n---\n\n```ts\ninterface BorderedProminentButtonSignature {\n Declaration: '<button is=\"bordered-prominent-button\"></button>'\n\n Attributes: {\n role
|
|
76
|
+
"description": "A control that starts an action. Styled with a prominent border, adapting to the button’s surroundings.\n---\n\n```ts\ninterface BorderedProminentButtonSignature {\n Declaration: '<button is=\"bordered-prominent-button\"></button>'\n\n Attributes: {\n role?: 'destructive' | 'confirm' // A value that describes the purpose of a button\n 'title-key'?: string\n }\n\n Slots: {\n overlay: HTMLElement[]\n }\n}\n\nclass BorderedProminentButton extends HTMLButtonElement<BorderedProminentButtonSignature> {}\n\n```\n\n### **Examples:**\n**Creating a prominent bordered button:**\n```html\n<button is=\"bordered-prominent-button\">\n <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```\n"
|
|
77
77
|
},
|
|
78
78
|
{
|
|
79
79
|
"name": "borderless-button",
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
"name": "title-key"
|
|
101
101
|
}
|
|
102
102
|
],
|
|
103
|
-
"description": "A control that starts an action. Styled without any borders.\n---\n\n```ts\ninterface BorderlessButtonSignature {\n Declaration: '<button is=\"borderless-button\"></button>'\n\n Attributes: {\n role
|
|
103
|
+
"description": "A control that starts an action. Styled without any borders.\n---\n\n```ts\ninterface BorderlessButtonSignature {\n Declaration: '<button is=\"borderless-button\"></button>'\n\n Attributes: {\n role?: 'destructive' | 'confirm' // A value that describes the purpose of a button\n 'title-key'?: string\n }\n\n Slots: {\n overlay: HTMLElement[]\n }\n}\n\nclass BorderlessButton extends HTMLButtonElement<BorderlessButtonSignature> {}\n\n```\n\n### **Examples:**\n**Use the `is` attribute to style a `button` as a `borderless-button`:**\n```html\n<button is=\"borderless-button\">\n <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```\n"
|
|
104
104
|
},
|
|
105
105
|
{
|
|
106
106
|
"name": "color-scheme",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
"name": "dark"
|
|
110
110
|
}
|
|
111
111
|
],
|
|
112
|
-
"description": "undefined\n\n```ts\ninterface ColorSchemeSignature {\n Declaration: '<color-scheme></color-scheme>'\n\n Attributes: {\n dark
|
|
112
|
+
"description": "undefined\n\n```ts\ninterface ColorSchemeSignature {\n Declaration: '<color-scheme></color-scheme>'\n\n Attributes: {\n dark?: string\n }\n}\n\nclass ColorScheme extends HTMLElement<ColorSchemeSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'color-scheme': ColorScheme\n }\n}\n\n```\n"
|
|
113
113
|
},
|
|
114
114
|
{
|
|
115
115
|
"name": "confirmation-dialog",
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
"name": "anchor"
|
|
125
125
|
}
|
|
126
126
|
],
|
|
127
|
-
"description": "A dialog that asks the user to confirm an action. Use it from the client module like `await confirmationDialog(trigger, 'Permanently erase the items in the Trash?')`.\n---\n\n```ts\ninterface ConfirmationDialogSignature {\n Declaration: '<dialog is=\"confirmation-dialog\"></dialog>'\n\n Attributes: {\n anchor
|
|
127
|
+
"description": "A dialog that asks the user to confirm an action. Use it from the client module like `await confirmationDialog(trigger, 'Permanently erase the items in the Trash?')`.\n---\n\n```ts\ninterface ConfirmationDialogSignature {\n Declaration: '<dialog is=\"confirmation-dialog\"></dialog>'\n\n Attributes: {\n anchor?: string\n }\n}\n\nclass ConfirmationDialog extends HTMLDialogElement<ConfirmationDialogSignature> {}\n\n```\n"
|
|
128
128
|
},
|
|
129
129
|
{
|
|
130
130
|
"name": "content-unavailable",
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
"name": "search"
|
|
140
140
|
}
|
|
141
141
|
],
|
|
142
|
-
"description": "A message with a title and extra information that you show when part of your app can’t be used.\n---\n\n```ts\ninterface ContentUnavailableSignature {\n Declaration: '<content-unavailable></content-unavailable>'\n\n Attributes: {\n search
|
|
142
|
+
"description": "A message with a title and extra information that you show when part of your app can’t be used.\n---\n\n```ts\ninterface ContentUnavailableSignature {\n Declaration: '<content-unavailable></content-unavailable>'\n\n Attributes: {\n search?: string\n }\n\n Slots: {\n default: HTMLElement[] // The default slot.\n description: HTMLElement[]\n actions: HTMLElement[]\n }\n}\n\nclass ContentUnavailable extends HTMLElement<ContentUnavailableSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'content-unavailable': ContentUnavailable\n }\n}\n\n```\n\n### **Examples:**\n**Example:**\n```html\n<content-unavailable search></content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable search=\"foo\"></content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable padding>\n <label-view title=\"No Mail\">\n <i class=\"ph ph-tray\" slot=\"icon\" foreground=\"secondary\"></i>\n </label-view>\n <label-view\n title=\"New mails you receive will appear here.\"\n foreground=\"secondary\"\n slot=\"description\"\n ></label-view>\n <button is=\"borderless-button\" type=\"button\" tabindex=\"0\" slot=\"actions\">\n <label-view title=\"Switch Account\"></label-view>\n </button>\n</content-unavailable>\n\n```\n**Example:**\n```html\n<content-unavailable padding>\n <label-view title=\"No Mail\">\n <svg slot=\"icon\" foreground=\"secondary\" ...>...</svg>\n </label-view>\n <label-view\n title=\"New mails you receive will appear here.\"\n foreground=\"secondary\"\n slot=\"description\"\n ></label-view>\n <button is=\"borderless-button\" type=\"button\" tabindex=\"0\" slot=\"actions\">\n <label-view title=\"Switch Account\"></label-view>\n </button>\n</content-unavailable>\n\n```\n"
|
|
143
143
|
},
|
|
144
144
|
{
|
|
145
145
|
"name": "date-picker",
|
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
"name": "maximum"
|
|
199
199
|
}
|
|
200
200
|
],
|
|
201
|
-
"description": "A control that selects an absolute date.\n---\n\n```ts\ninterface DatePickerSignature {\n Declaration: '<date-picker></date-picker>'\n\n Attributes: {\n 'date-picker-style'
|
|
201
|
+
"description": "A control that selects an absolute date.\n---\n\n```ts\ninterface DatePickerSignature {\n Declaration: '<date-picker></date-picker>'\n\n Attributes: {\n 'date-picker-style'?: 'graphical' | 'field' | 'automatic' // The style of this element\n required?: boolean\n prompt?: string\n label?: string\n name?: string\n selection?: string\n disabled?: boolean\n minimum?: string\n maximum?: string\n }\n}\n\nclass DatePicker extends HTMLElement<DatePickerSignature> {\n static formAssociated = true\n\n readonly template: DocumentFragment\n readonly datePickerStyle: 'graphical' | 'field' | 'automatic'\n readonly name: string // Form participation property\n readonly value: { year: string; month: string; day: string }\n readonly valueAsDate: Date | null // Returns the value as a Date object.\n readonly minimum: { year: string; month: string; day: string } | null\n readonly maximum: { year: string; month: string; day: string } | null\n\n setValidity(): void\n setCustomValidity(): void\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'date-picker': DatePicker\n }\n}\n\n```\n"
|
|
202
202
|
},
|
|
203
203
|
{
|
|
204
204
|
"name": "disclosure-group",
|
|
@@ -214,11 +214,17 @@
|
|
|
214
214
|
"description": "Value Type: boolean\nDescription: The status of this element"
|
|
215
215
|
}
|
|
216
216
|
],
|
|
217
|
-
"description": "A view that shows or hides another view when the user opens or closes it.\n---\n\n```ts\ninterface DisclosureGroupSignature {\n Declaration: '<details is=\"disclosure-group\"></details>'\n\n Attributes: {\n open
|
|
217
|
+
"description": "A view that shows or hides another view when the user opens or closes it.\n---\n\n```ts\ninterface DisclosureGroupSignature {\n Declaration: '<details is=\"disclosure-group\"></details>'\n\n Attributes: {\n open?: boolean // The status of this element\n }\n\n Events: {\n 'is-expanded': CustomEvent\n 'is-collapsed': CustomEvent\n }\n}\n\nclass DisclosureGroup extends HTMLDetailsElement<DisclosureGroupSignature> {}\n\n```\n\n### **Examples:**\n**Example:**\n```html\n<details is=\"disclosure-group\">\n <summary><label-view title=\"Items\"></label-view></summary>\n <label-view title=\"Item 1\"></label-view>\n <label-view title=\"Item 2\"></label-view>\n <details is=\"disclosure-group\">\n <summary><label-view title=\"Sub-items\"></label-view></summary>\n <label-view title=\"Sub-item 1\"></label-view>\n </details>\n</details>\n\n```\n"
|
|
218
218
|
},
|
|
219
219
|
{
|
|
220
220
|
"name": "fine-tooltip",
|
|
221
|
-
"
|
|
221
|
+
"references": [
|
|
222
|
+
{
|
|
223
|
+
"name": "Documentation",
|
|
224
|
+
"url": "https://swiftwc.github.io/ui/web-components/fine-tooltip"
|
|
225
|
+
}
|
|
226
|
+
],
|
|
227
|
+
"description": "A tooltip that shows an unobtrusive helpful message on pointer:fine screens. Use it by adding a `help` attribute to any element.\n---\n\n```ts\ninterface FineTooltipSignature {\n Declaration: '<fine-tooltip></fine-tooltip>'\n}\n\nclass FineTooltip extends HTMLElement<FineTooltipSignature> {\n hidePopover(): void\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'fine-tooltip': FineTooltip\n }\n}\n\n```\n"
|
|
222
228
|
},
|
|
223
229
|
{
|
|
224
230
|
"name": "form-view",
|
|
@@ -266,7 +272,7 @@
|
|
|
266
272
|
"name": "title-key"
|
|
267
273
|
}
|
|
268
274
|
],
|
|
269
|
-
"description": "A control that starts an action. Styled with a glass border, adapting to the button’s surroundings.\n---\n\n```ts\ninterface GlassButtonSignature {\n Declaration: '<button is=\"glass-button\"></button>'\n\n Attributes: {\n role
|
|
275
|
+
"description": "A control that starts an action. Styled with a glass border, adapting to the button’s surroundings.\n---\n\n```ts\ninterface GlassButtonSignature {\n Declaration: '<button is=\"glass-button\"></button>'\n\n Attributes: {\n role?: 'destructive' | 'confirm' // A value that describes the purpose of a button\n 'title-key'?: string\n }\n\n Slots: {\n overlay: HTMLElement[]\n }\n}\n\nclass GlassButton extends HTMLButtonElement<GlassButtonSignature> {}\n\n```\n\n### **Examples:**\n**Creating a glass button:**\n```html\n<button is=\"glass-button\">\n <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```\n"
|
|
270
276
|
},
|
|
271
277
|
{
|
|
272
278
|
"name": "glass-prominent-button",
|
|
@@ -293,7 +299,7 @@
|
|
|
293
299
|
"name": "title-key"
|
|
294
300
|
}
|
|
295
301
|
],
|
|
296
|
-
"description": "A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.\n---\n\n```ts\ninterface GlassProminentButtonSignature {\n Declaration: '<button is=\"glass-prominent-button\"></button>'\n\n Attributes: {\n role
|
|
302
|
+
"description": "A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.\n---\n\n```ts\ninterface GlassProminentButtonSignature {\n Declaration: '<button is=\"glass-prominent-button\"></button>'\n\n Attributes: {\n role?: 'destructive' | 'confirm' // A value that describes the purpose of a button\n 'title-key'?: string\n }\n\n Slots: {\n overlay: HTMLElement[]\n }\n}\n\nclass GlassProminentButton extends HTMLButtonElement<GlassProminentButtonSignature> {}\n\n```\n\n### **Examples:**\n**Creating a prominent glass button:**\n```html\n<button is=\"glass-prominent-button\">\n <label-view system-image=\"hand-tap\" title=\"Tap Me\"></label-view>\n</button>\n\n```\n"
|
|
297
303
|
},
|
|
298
304
|
{
|
|
299
305
|
"name": "h-stack",
|
|
@@ -348,7 +354,7 @@
|
|
|
348
354
|
"name": "system-weight"
|
|
349
355
|
}
|
|
350
356
|
],
|
|
351
|
-
"description": "A view that displays an image.\n---\n\n```ts\ninterface ImageViewSignature {\n Declaration: '<image-view></image-view>'\n\n Attributes: {\n 'system-name'
|
|
357
|
+
"description": "A view that displays an image.\n---\n\n```ts\ninterface ImageViewSignature {\n Declaration: '<image-view></image-view>'\n\n Attributes: {\n 'system-name'?: string\n 'system-weight'?: string\n }\n}\n\nclass ImageView extends HTMLElement<ImageViewSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'image-view': ImageView\n }\n}\n\n```\n"
|
|
352
358
|
},
|
|
353
359
|
{
|
|
354
360
|
"name": "label-view",
|
|
@@ -378,7 +384,7 @@
|
|
|
378
384
|
"description": "Value Type: \"tail\""
|
|
379
385
|
}
|
|
380
386
|
],
|
|
381
|
-
"description": "A view that labels items with an icon and a title.\n---\n\n```ts\ninterface LabelViewSignature {\n Declaration: '<label-view></label-view>'\n\n Attributes: {\n font?: Font // Sets the default font for text in this view.\n 'system-image'
|
|
387
|
+
"description": "A view that labels items with an icon and a title.\n---\n\n```ts\ninterface LabelViewSignature {\n Declaration: '<label-view></label-view>'\n\n Attributes: {\n font?: Font // Sets the default font for text in this view.\n 'system-image'?: string\n title?: string\n 'line-limit'?: string\n 'truncation-mode'?: 'tail'\n }\n\n Slots: {\n default: HTMLElement[] // Any children without a `slot` attribute are placed in the title block.\n icon: HTMLElement[] // Use the `slot=\"icon\"` attribute to place childen in the icon block.\n }\n\n CSSProperties: {\n '--label-gap'?: string // The gap between the icon and the title.\n '--label-image-size'?: string // The size of the icon.\n '--label-padding-inline'?: string // The padding inline of the label.\n }\n}\n\nclass LabelView extends HTMLElement<LabelViewSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'label-view': LabelView\n }\n}\n\n```\n\n### **Examples:**\n**Creating a label using a `span` element:**\n```html\n<label-view><span>Hello world!</span></label-view>\n\n```\n**Creating a label using the `title` attribute:**\n```html\n<label-view title=\"Hello world!\"></label-view>\n\n```\n**Creating a label with an icon and a title using the `system-image` attribute:**\n```html\n<label-view system-image=\"hand-waving\"><span>Hello world!</span></label-view>\n\n```\n**Creating a label with an icon and a title using the `icon` slot:**\n```html\n<label-view>\n <i slot=\"icon\" class=\"ph ph-duotone ph-hand-waving\"></i>\n <span>Hello world!</span>\n</label-view>\n\n```\n"
|
|
382
388
|
},
|
|
383
389
|
{
|
|
384
390
|
"name": "labeled-content",
|
|
@@ -417,7 +423,7 @@
|
|
|
417
423
|
"name": "format"
|
|
418
424
|
}
|
|
419
425
|
],
|
|
420
|
-
"description": "A container view that pairs a label with a value.\n---\n\n```ts\ninterface LabeledContentSignature {\n Declaration: '<labeled-content></labeled-content>'\n\n Attributes: {\n value
|
|
426
|
+
"description": "A container view that pairs a label with a value.\n---\n\n```ts\ninterface LabeledContentSignature {\n Declaration: '<labeled-content></labeled-content>'\n\n Attributes: {\n value?: string\n label?: string\n header?: string\n footer?: string\n 'labeled-content-style'?: 'vertical' | 'horizontal'\n format?: string\n }\n\n Slots: {\n default: HTMLElement[] // The default slot.\n label: HTMLElement[] // Use the `slot=\"label\"` attribute to place childen in the label block.\n header: HTMLElement[]\n footer: HTMLElement[]\n }\n\n Parts: {\n 'labeled-content-container': never\n 'labeled-content-stack': never\n 'labeled-content-label-stack': never\n 'labeled-content-value-stack': never\n }\n}\n\nclass LabeledContent extends HTMLElement<LabeledContentSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'labeled-content': LabeledContent\n }\n}\n\n```\n"
|
|
421
427
|
},
|
|
422
428
|
{
|
|
423
429
|
"name": "list-view",
|
|
@@ -459,7 +465,7 @@
|
|
|
459
465
|
"name": "label"
|
|
460
466
|
}
|
|
461
467
|
],
|
|
462
|
-
"description": "A control that opens a menu of actions.\n---\n\n```ts\ninterface MenuViewSignature {\n Declaration: '<menu-view></menu-view>'\n\n Attributes: {\n open
|
|
468
|
+
"description": "A control that opens a menu of actions.\n---\n\n```ts\ninterface MenuViewSignature {\n Declaration: '<menu-view></menu-view>'\n\n Attributes: {\n open?: string\n closing?: string\n label?: string\n }\n\n Slots: {\n default: HTMLElement[] // The default slot.\n label: HTMLElement[]\n }\n}\n\nclass MenuView extends HTMLElement<MenuViewSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'menu-view': MenuView\n }\n}\n\n```\n"
|
|
463
469
|
},
|
|
464
470
|
{
|
|
465
471
|
"name": "navigation-large-title",
|
|
@@ -536,7 +542,7 @@
|
|
|
536
542
|
"name": "system-image-weight"
|
|
537
543
|
}
|
|
538
544
|
],
|
|
539
|
-
"description": "A container view.\n---\n\n```ts\ninterface NavigationTitleSignature {\n Declaration: '<navigation-title></navigation-title>'\n\n Attributes: {\n padding?: boolean\n value
|
|
545
|
+
"description": "A container view.\n---\n\n```ts\ninterface NavigationTitleSignature {\n Declaration: '<navigation-title></navigation-title>'\n\n Attributes: {\n padding?: boolean\n value?: string\n subtitle?: string\n 'system-image'?: string\n 'system-image-weight'?: string\n }\n}\n\nclass NavigationTitle extends HTMLElement<NavigationTitleSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'navigation-title': NavigationTitle\n }\n}\n\n```\n"
|
|
540
546
|
},
|
|
541
547
|
{
|
|
542
548
|
"name": "picker-view",
|
|
@@ -622,7 +628,7 @@
|
|
|
622
628
|
"name": "value"
|
|
623
629
|
}
|
|
624
630
|
],
|
|
625
|
-
"description": "A view that shows how far along a task is.\n---\n\n```ts\ninterface ProgressViewSignature {\n Declaration: '<progress-view></progress-view>'\n\n Attributes: {\n label
|
|
631
|
+
"description": "A view that shows how far along a task is.\n---\n\n```ts\ninterface ProgressViewSignature {\n Declaration: '<progress-view></progress-view>'\n\n Attributes: {\n label?: string\n 'current-value-label'?: string\n value?: string\n }\n\n Slots: {\n default: HTMLElement[] // The default slot.\n 'current-value': HTMLElement[]\n }\n}\n\nclass ProgressView extends HTMLElement<ProgressViewSignature> {\n readonly progressViewStyle: 'circular' | 'linear'\n readonly template: DocumentFragment\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'progress-view': ProgressView\n }\n}\n\n```\n"
|
|
626
632
|
},
|
|
627
633
|
{
|
|
628
634
|
"name": "screen-view",
|
|
@@ -664,7 +670,7 @@
|
|
|
664
670
|
"name": "navigation-bar-title-display-mode"
|
|
665
671
|
}
|
|
666
672
|
],
|
|
667
|
-
"description": "A view that scrolls its content when it doesn’t fit the screen.\n---\n\n```ts\ninterface ScrollViewSignature {\n Declaration: '<scroll-view></scroll-view>'\n\n Attributes: {\n 'navigation-title'
|
|
673
|
+
"description": "A view that scrolls its content when it doesn’t fit the screen.\n---\n\n```ts\ninterface ScrollViewSignature {\n Declaration: '<scroll-view></scroll-view>'\n\n Attributes: {\n 'navigation-title'?: string // Configures the view’s title for purposes of navigation. Shorthand for `<v-stack spacing=\"0\" alignment=\"fill\" slot=\"top-bar-principal\"><label-view line-limit=\"1\" truncation-mode=\"tail\" font=\"headline\"><span>Navigation Title</span></label-view></v-stack>`\n 'navigation-inline-title'?: string\n 'navigation-inline-subtitle'?: string\n 'navigation-icon'?: string\n 'navigation-bar-title-display-mode'?: string\n }\n\n Slots: {\n default: HTMLElement[] // The default slot.\n 'top-bar-principal': HTMLElement[]\n 'bottom-bar-principal': HTMLElement[]\n }\n}\n\nclass ScrollView extends HTMLElement<ScrollViewSignature> {\n centerScrollToElement(): void\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'scroll-view': ScrollView\n }\n}\n\n```\n"
|
|
668
674
|
},
|
|
669
675
|
{
|
|
670
676
|
"name": "search-view",
|
|
@@ -686,7 +692,7 @@
|
|
|
686
692
|
"name": "footer"
|
|
687
693
|
}
|
|
688
694
|
],
|
|
689
|
-
"description": "A container view that groups related content together.\n---\n\n```ts\ninterface SectionViewSignature {\n Declaration: '<section-view></section-view>'\n\n Attributes: {\n header
|
|
695
|
+
"description": "A container view that groups related content together.\n---\n\n```ts\ninterface SectionViewSignature {\n Declaration: '<section-view></section-view>'\n\n Attributes: {\n header?: string\n footer?: string\n }\n\n Slots: {\n default: HTMLElement[] // The default slot.\n header: HTMLElement[]\n footer: HTMLElement[]\n }\n}\n\nclass SectionView extends HTMLElement<SectionViewSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'section-view': SectionView\n }\n}\n\n```\n"
|
|
690
696
|
},
|
|
691
697
|
{
|
|
692
698
|
"name": "sheet-view",
|
|
@@ -852,7 +858,7 @@
|
|
|
852
858
|
"description": "Value Type: boolean"
|
|
853
859
|
}
|
|
854
860
|
],
|
|
855
|
-
"description": "A control that displays an editable text area.\n---\n\n```ts\ninterface TextFieldSignature {\n Declaration: '<text-field></text-field>'\n\n Attributes: {\n prompt
|
|
861
|
+
"description": "A control that displays an editable text area.\n---\n\n```ts\ninterface TextFieldSignature {\n Declaration: '<text-field></text-field>'\n\n Attributes: {\n prompt?: string\n minimum?: string\n maximum?: string\n 'min-length'?: string\n 'max-length'?: string\n label?: string\n name?: string\n text?: string\n 'text-input-autocapitalization'?: string\n 'disable-autocorrection'?: boolean\n 'keyboard-type'?: 'decimal-pad' | 'number-pad' | 'default'\n required?: boolean\n disabled?: boolean\n }\n\n Slots: {\n label: HTMLElement[]\n 'validity-options': HTMLElement[]\n }\n\n Events: {\n commit: CustomEvent<{ detail: { text: string } }> // Triggered when user interacts with the input area\n }\n}\n\nclass TextField extends HTMLElement<TextFieldSignature> {\n static formAssociated = true\n\n readonly keyboardType: 'decimal-pad' | 'number-pad' | 'default'\n text: string\n readonly name: string // Form participation property\n readonly value: string\n readonly valueAsNumber: number | ''\n readonly negativeNumbersAllowed: boolean\n\n setValidity(): void\n setCustomValidity(): void\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'text-field': TextField\n }\n}\n\n```\n"
|
|
856
862
|
},
|
|
857
863
|
{
|
|
858
864
|
"name": "toggle-view",
|
|
@@ -894,7 +900,7 @@
|
|
|
894
900
|
"description": "Value Type: boolean"
|
|
895
901
|
}
|
|
896
902
|
],
|
|
897
|
-
"description": "A control that switches between on and off states.\n---\n\n```ts\ninterface ToggleViewSignature {\n Declaration: '<toggle-view></toggle-view>'\n\n Attributes: {\n label
|
|
903
|
+
"description": "A control that switches between on and off states.\n---\n\n```ts\ninterface ToggleViewSignature {\n Declaration: '<toggle-view></toggle-view>'\n\n Attributes: {\n label?: string\n name?: string\n value?: string\n 'is-on'?: boolean\n 'keyboard-type'?: string\n required?: boolean\n disabled?: boolean\n }\n\n Slots: {\n label: HTMLElement[]\n 'validity-options': HTMLElement[]\n }\n\n Events: {\n 'toggle:change': CustomEvent // User toggled the control\n }\n}\n\nclass ToggleView extends HTMLElement<ToggleViewSignature> {\n static formAssociated = true\n\n readonly toggleStyle: 'button' | 'switch'\n isOn: boolean\n readonly name: string // Form participation property\n value: string | null\n\n setValidity(): void\n setCustomValidity(): void\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'toggle-view': ToggleView\n }\n}\n\n```\n"
|
|
898
904
|
},
|
|
899
905
|
{
|
|
900
906
|
"name": "tool-bar-item-group",
|
|
@@ -925,7 +931,7 @@
|
|
|
925
931
|
"name": "title-key"
|
|
926
932
|
}
|
|
927
933
|
],
|
|
928
|
-
"description": "A view placed in the toolbar or navigation bar.\n---\n\n```ts\ninterface ToolBarItemSignature {\n Declaration: '<tool-bar-item></tool-bar-item>'\n\n Attributes: {\n slot
|
|
934
|
+
"description": "A view placed in the toolbar or navigation bar.\n---\n\n```ts\ninterface ToolBarItemSignature {\n Declaration: '<tool-bar-item></tool-bar-item>'\n\n Attributes: {\n slot?: string\n 'data-previous-slot'?: string\n 'title-key'?: string\n }\n}\n\nclass ToolBarItem extends HTMLElement<ToolBarItemSignature> {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tool-bar-item': ToolBarItem\n }\n}\n\n```\n"
|
|
929
935
|
},
|
|
930
936
|
{
|
|
931
937
|
"name": "tool-bar",
|
|
@@ -1053,51 +1059,55 @@
|
|
|
1053
1059
|
"values": [
|
|
1054
1060
|
{
|
|
1055
1061
|
"name": "footnote",
|
|
1056
|
-
"description": "
|
|
1062
|
+
"description": "The font used in footnotes"
|
|
1057
1063
|
},
|
|
1058
1064
|
{
|
|
1059
1065
|
"name": "caption2",
|
|
1060
|
-
"description": "
|
|
1066
|
+
"description": "The font used the caption2 size"
|
|
1061
1067
|
},
|
|
1062
1068
|
{
|
|
1063
1069
|
"name": "caption",
|
|
1064
|
-
"description": "
|
|
1070
|
+
"description": "The font used for standard captions"
|
|
1065
1071
|
},
|
|
1066
1072
|
{
|
|
1067
1073
|
"name": "callout",
|
|
1068
|
-
"description": "
|
|
1074
|
+
"description": "The font used for callouts"
|
|
1069
1075
|
},
|
|
1070
1076
|
{
|
|
1071
1077
|
"name": "body",
|
|
1072
|
-
"description": "
|
|
1078
|
+
"description": "The font used body text"
|
|
1073
1079
|
},
|
|
1074
1080
|
{
|
|
1075
1081
|
"name": "subheadline",
|
|
1076
|
-
"description": "
|
|
1082
|
+
"description": "The font used subheadings"
|
|
1077
1083
|
},
|
|
1078
1084
|
{
|
|
1079
1085
|
"name": "headline",
|
|
1080
|
-
"description": "
|
|
1086
|
+
"description": "The font used headings"
|
|
1081
1087
|
},
|
|
1082
1088
|
{
|
|
1083
1089
|
"name": "title3",
|
|
1084
|
-
"description": "
|
|
1090
|
+
"description": "The font used third level hierarchical headings"
|
|
1085
1091
|
},
|
|
1086
1092
|
{
|
|
1087
1093
|
"name": "title2",
|
|
1088
|
-
"description": "
|
|
1094
|
+
"description": "The font used second level hierarchical headings"
|
|
1089
1095
|
},
|
|
1090
1096
|
{
|
|
1091
1097
|
"name": "title",
|
|
1092
|
-
"description": "
|
|
1098
|
+
"description": "The font used first level hierarchical headings"
|
|
1093
1099
|
},
|
|
1094
1100
|
{
|
|
1095
1101
|
"name": "large-title",
|
|
1096
|
-
"description": "
|
|
1102
|
+
"description": "The font used large titles"
|
|
1097
1103
|
},
|
|
1098
1104
|
{
|
|
1099
1105
|
"name": "extra-large-title",
|
|
1100
|
-
"description": "
|
|
1106
|
+
"description": "The font used extra large titles"
|
|
1107
|
+
},
|
|
1108
|
+
{
|
|
1109
|
+
"name": "extra-large-title2",
|
|
1110
|
+
"description": "The font used second level extra large titles"
|
|
1101
1111
|
}
|
|
1102
1112
|
]
|
|
1103
1113
|
},
|
|
@@ -1342,6 +1352,10 @@
|
|
|
1342
1352
|
{
|
|
1343
1353
|
"name": "Foreground",
|
|
1344
1354
|
"values": [
|
|
1355
|
+
{
|
|
1356
|
+
"name": "primary",
|
|
1357
|
+
"description": "Applies the system primary color (`--primary`)"
|
|
1358
|
+
},
|
|
1345
1359
|
{
|
|
1346
1360
|
"name": "secondary",
|
|
1347
1361
|
"description": "Applies the system secondary color (`--secondary`)"
|
|
@@ -1548,6 +1562,27 @@
|
|
|
1548
1562
|
}
|
|
1549
1563
|
]
|
|
1550
1564
|
},
|
|
1565
|
+
{
|
|
1566
|
+
"name": "ControlSize",
|
|
1567
|
+
"values": [
|
|
1568
|
+
{
|
|
1569
|
+
"name": "mini",
|
|
1570
|
+
"description": "A control version that is minimally sized"
|
|
1571
|
+
},
|
|
1572
|
+
{
|
|
1573
|
+
"name": "regular",
|
|
1574
|
+
"description": "A control version that is the regular size"
|
|
1575
|
+
},
|
|
1576
|
+
{
|
|
1577
|
+
"name": "small",
|
|
1578
|
+
"description": "A control version that is proportionally smaller size for space-constrained views"
|
|
1579
|
+
},
|
|
1580
|
+
{
|
|
1581
|
+
"name": "large",
|
|
1582
|
+
"description": "A control version that is prominently sized"
|
|
1583
|
+
}
|
|
1584
|
+
]
|
|
1585
|
+
},
|
|
1551
1586
|
{
|
|
1552
1587
|
"name": "Template",
|
|
1553
1588
|
"values": [
|