@swiftwc/ui 1.0.0-canary.5 → 1.0.1-canary.0

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 (17) hide show
  1. package/generated/components/bordered-button.d.ts +1 -1
  2. package/generated/components/bordered-button.js +1 -1
  3. package/generated/components/bordered-prominent-button.d.ts +1 -1
  4. package/generated/components/bordered-prominent-button.js +1 -1
  5. package/generated/components/borderless-button.d.ts +1 -1
  6. package/generated/components/borderless-button.js +1 -1
  7. package/generated/components/disclosure-group.d.ts +1 -1
  8. package/generated/components/disclosure-group.js +1 -1
  9. package/generated/components/glass-button.d.ts +1 -1
  10. package/generated/components/glass-button.js +1 -1
  11. package/generated/components/glass-prominent-button.d.ts +1 -1
  12. package/generated/components/glass-prominent-button.js +1 -1
  13. package/generated/css/index.css +11 -8
  14. package/html-data/en.json +7 -7
  15. package/package.json +1 -1
  16. package/scss/base/_root.scss +2 -2
  17. package/scss/components/_picker-view.scss +7 -4
package/generated/components/bordered-button.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ButtonBase } from '../namespace-browser/base';
2
2
  /**
3
3
  * @summary A control that starts an action. Styled with a standard border, adapting to the button’s surroundings.
4
4
  *
5
- * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a bordered button
5
+ * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a bordered button
6
6
  *
7
7
  * @slot overlay
8
8
  *
package/generated/components/bordered-button.js CHANGED
@@ -5,7 +5,7 @@ import { Snapshot } from '../snapshot';
5
5
  /**
6
6
  * @summary A control that starts an action. Styled with a standard border, adapting to the button’s surroundings.
7
7
  *
8
- * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a bordered button
8
+ * @example <button is="bordered-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a bordered button
9
9
  *
10
10
  * @slot overlay
11
11
  *
package/generated/components/bordered-prominent-button.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ButtonBase } from '../namespace-browser/base';
2
2
  /**
3
3
  * @summary A control that starts an action. Styled with a prominent border, adapting to the button’s surroundings.
4
4
  *
5
- * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent bordered button
5
+ * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a bordered prominent button
6
6
  *
7
7
  * @slot overlay
8
8
  *
package/generated/components/bordered-prominent-button.js CHANGED
@@ -5,7 +5,7 @@ import { Snapshot } from '../snapshot';
5
5
  /**
6
6
  * @summary A control that starts an action. Styled with a prominent border, adapting to the button’s surroundings.
7
7
  *
8
- * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent bordered button
8
+ * @example <button is="bordered-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a bordered prominent button
9
9
  *
10
10
  * @slot overlay
11
11
  *
package/generated/components/borderless-button.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ButtonBase } from '../namespace-browser/base';
2
2
  /**
3
3
  * @summary A control that starts an action. Styled without any borders.
4
4
  *
5
- * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a `borderless-button`
5
+ * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a borderless button
6
6
  *
7
7
  * @slot overlay
8
8
  *
package/generated/components/borderless-button.js CHANGED
@@ -5,7 +5,7 @@ import { Snapshot } from '../snapshot';
5
5
  /**
6
6
  * @summary A control that starts an action. Styled without any borders.
7
7
  *
8
- * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a `borderless-button`
8
+ * @example <button is="borderless-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a borderless button
9
9
  *
10
10
  * @slot overlay
11
11
  *
package/generated/components/disclosure-group.d.ts CHANGED
@@ -2,7 +2,7 @@ import { DetailsBase } from '../namespace-browser/base';
2
2
  /**
3
3
  * @summary A view that shows or hides another view when the user opens or closes it.
4
4
  *
5
- * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
5
+ * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details> — Use the `is` attribute to convert a `details` element into a disclosure group
6
6
  *
7
7
  * @fires is-expanded
8
8
  * @fires is-collapsed
package/generated/components/disclosure-group.js CHANGED
@@ -5,7 +5,7 @@ const toggleTimers = new WeakMap();
5
5
  /**
6
6
  * @summary A view that shows or hides another view when the user opens or closes it.
7
7
  *
8
- * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details>
8
+ * @example <details is="disclosure-group"><summary><label-view title="Items"></label-view></summary><label-view title="Item 1"></label-view><label-view title="Item 2"></label-view><details is="disclosure-group"><summary><label-view title="Sub-items"></label-view></summary><label-view title="Sub-item 1"></label-view></details></details> — Use the `is` attribute to convert a `details` element into a disclosure group
9
9
  *
10
10
  * @fires is-expanded
11
11
  * @fires is-collapsed
package/generated/components/glass-button.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ButtonBase } from '../namespace-browser/base';
2
2
  /**
3
3
  * @summary A control that starts an action. Styled with a glass border, adapting to the button’s surroundings.
4
4
  *
5
- * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a glass button
5
+ * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a glass button
6
6
  *
7
7
  * @slot overlay
8
8
  *
package/generated/components/glass-button.js CHANGED
@@ -5,7 +5,7 @@ import { Snapshot } from '../snapshot';
5
5
  /**
6
6
  * @summary A control that starts an action. Styled with a glass border, adapting to the button’s surroundings.
7
7
  *
8
- * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a glass button
8
+ * @example <button is="glass-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a glass button
9
9
  *
10
10
  * @slot overlay
11
11
  *
package/generated/components/glass-prominent-button.d.ts CHANGED
@@ -2,7 +2,7 @@ import { ButtonBase } from '../namespace-browser/base';
2
2
  /**
3
3
  * @summary A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.
4
4
  *
5
- * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent glass button
5
+ * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a prominent glass button
6
6
  *
7
7
  * @slot overlay
8
8
  *
package/generated/components/glass-prominent-button.js CHANGED
@@ -5,7 +5,7 @@ import { Snapshot } from '../snapshot';
5
5
  /**
6
6
  * @summary A control that starts an action. Styled with a prominent glass border, adapting to the button’s surroundings.
7
7
  *
8
- * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Creating a prominent glass button
8
+ * @example <button is="glass-prominent-button"><label-view system-image="hand-tap" title="Tap Me"></label-view></button> — Use the `is` attribute to style a `button` as a prominent glass button
9
9
  *
10
10
  * @slot overlay
11
11
  *
package/generated/css/index.css CHANGED
@@ -131,12 +131,12 @@
131
131
  --toggle-dot-box-shadow: var(--control-clear-glass-box-shadow);
132
132
  --tabs-picker-track-gap: 0rem;
133
133
  --palette-picker-track-gap: 1rem;
134
- --radio-group-picker-track-gap: 1rem;
134
+ --radio-group-picker-track-gap: 0.2rem;
135
135
  --tabs-picker-track-border-radius: var(--pill-border-radius);
136
136
  --tabs-picker-track-block-size: 3rem;
137
137
  --tabs-picker-track-padding-inline: 0.1rem;
138
138
  --tabs-picker-track-padding-block: 0.1rem;
139
- --tabs-picker-segment-min-inline-size: 3rem;
139
+ --tabs-picker-segment-min-inline-size: 2rem;
140
140
  --tabs-picker-segment-max-inline-size: min(20rem, 100svw);
141
141
  --tabs-picker-segment-padding-inline: 1rem;
142
142
  --tabs-picker-segment-padding-block: 0.5rem;
@@ -5281,6 +5281,7 @@
5281
5281
  display: var(--picker--inputstack-display, grid);
5282
5282
  text-align: var(--picker--inputstack-text-align, );
5283
5283
  justify-content: var(--picker--inputstack-justify-content, );
5284
+ justify-self: var(--picker--inputstack-justify-self, );
5284
5285
  gap: var(--picker--inputstack-gap, );
5285
5286
  flex-flow: var(--picker--inputstack-flex-flow, );
5286
5287
  grid-auto-flow: var(--picker--inputstack-grid-auto-flow, );
@@ -5317,7 +5318,7 @@
5317
5318
  :where(picker-view) {
5318
5319
  --picker--inputstack-grid-auto-flow: if(style(--picker-style: tabs): column; );
5319
5320
  --picker--inputstack-gap: if(style(--picker-style: tabs): var(--tabs-picker-track-gap); style(--picker-style: palette): var(--palette-picker-track-gap); style(--picker-style: radio-group): var(--radio-group-picker-track-gap); );
5320
- --picker--inputstack-justify-content: if(style(--picker-style: tabs): start; style(--picker-style: palette): start; );
5321
+ --picker--inputstack-justify-self: if(style(--picker-style: tabs): center; );
5321
5322
  --picker--inputstack-background: if(style(--picker-style: tabs): light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark)); );
5322
5323
  --picker--inputstack-backdrop-filter: if(style(--picker-style: tabs): var(--liquid-glass-backdrop-filter); );
5323
5324
  --picker--inputstack-box-shadow: if(style(--picker-style: tabs): var(--liquid-glass-box-shadow); );
@@ -5330,6 +5331,7 @@
5330
5331
  --picker--inputstack-overflow: if(style(--picker-style: tabs): auto clip; );
5331
5332
  --picker--inputstack-display: if(style(--picker-style: palette): flex; );
5332
5333
  --picker--inputstack-flex-flow: if(style(--picker-style: palette): row wrap; );
5334
+ --picker--inputstack-justify-content: if(style(--picker-style: palette): start; );
5333
5335
  }
5334
5336
  :where(form picker-view) {
5335
5337
  --picker--labelstack-display: if(style(--picker-style: tabs): grid; style(--picker-style: palette): grid; style(--picker-style: radio-group): grid; style(--picker-style: menu): grid; style(--picker-style: navigation-link): grid; style(--picker-style: sheet): grid; else: none ;);
@@ -5365,7 +5367,7 @@
5365
5367
  :where(picker-view:not([picker-style])) {
5366
5368
  --picker--inputstack-grid-auto-flow: column;
5367
5369
  --picker--inputstack-gap: var(--tabs-picker-track-gap);
5368
- --picker--inputstack-justify-content: start;
5370
+ --picker--inputstack-justify-self: center;
5369
5371
  --picker--inputstack-background: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark));
5370
5372
  --picker--inputstack-backdrop-filter: var(--liquid-glass-backdrop-filter);
5371
5373
  --picker--inputstack-box-shadow: var(--liquid-glass-box-shadow);
@@ -5546,7 +5548,7 @@
5546
5548
  --picker-style: tabs;
5547
5549
  --picker--inputstack-grid-auto-flow: column;
5548
5550
  --picker--inputstack-gap: var(--tabs-picker-track-gap);
5549
- --picker--inputstack-justify-content: start;
5551
+ --picker--inputstack-justify-self: center;
5550
5552
  --picker--inputstack-background: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark));
5551
5553
  --picker--inputstack-backdrop-filter: var(--liquid-glass-backdrop-filter);
5552
5554
  --picker--inputstack-box-shadow: var(--liquid-glass-box-shadow);
@@ -5624,11 +5626,12 @@
5624
5626
  block-size: 2rem;
5625
5627
  border-radius: 0.4rem;
5626
5628
  pointer-events: none;
5629
+ background-size: cover;
5627
5630
  transition: outline 100ms ease-out;
5628
5631
  }
5629
5632
  :where(picker-view > label:not([slot]) input[type=radio]):checked {
5630
5633
  outline: var(--accentColor) solid 0.3rem;
5631
- outline-offset: 0.1rem;
5634
+ outline-offset: 0.15rem;
5632
5635
  }
5633
5636
  }
5634
5637
  @container style(--picker-style: tabs) {
@@ -5640,8 +5643,8 @@
5640
5643
  place-content: center;
5641
5644
  padding-inline: var(--tabs-picker-segment-padding-inline, );
5642
5645
  padding-block: var(--tabs-picker-segment-padding-block, );
5643
- min-inline-size: var(--tabs-picker-segment-min-inline-size);
5644
- max-inline-size: var(--tabs-picker-segment-max-inline-size);
5646
+ min-inline-size: var(--tabs-picker-segment-min-inline-size, );
5647
+ max-inline-size: var(--tabs-picker-segment-max-inline-size, );
5645
5648
  border-radius: var(--tabs-picker-track-border-radius);
5646
5649
  inline-size: fit-content;
5647
5650
  block-size: calc(var(--tabs-picker-track-block-size) - var(--tabs-picker-track-padding-block) * 2);
package/html-data/en.json CHANGED
@@ -36,7 +36,7 @@
36
36
  "name": "title-key"
37
37
  }
38
38
  ],
39
- "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 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\ndeclare global {\n interface HTMLButtonElement {\n is: 'bordered-button' // <button is=\"bordered-button\"></button>\n }\n}\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"
39
+ "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 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\ndeclare global {\n interface HTMLButtonElement {\n is: 'bordered-button' // <button is=\"bordered-button\"></button>\n }\n}\n\n```\n\n### **Examples:**\n**Use the `is` attribute to style a `button` as 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"
40
40
  },
41
41
  {
42
42
  "name": "bordered-prominent-button",
@@ -63,7 +63,7 @@
63
63
  "name": "title-key"
64
64
  }
65
65
  ],
66
- "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 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\ndeclare global {\n interface HTMLButtonElement {\n is: 'bordered-prominent-button' // <button is=\"bordered-prominent-button\"></button>\n }\n}\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"
66
+ "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 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\ndeclare global {\n interface HTMLButtonElement {\n is: 'bordered-prominent-button' // <button is=\"bordered-prominent-button\"></button>\n }\n}\n\n```\n\n### **Examples:**\n**Use the `is` attribute to style a `button` as a bordered prominent 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"
67
67
  },
68
68
  {
69
69
  "name": "borderless-button",
@@ -90,7 +90,7 @@
90
90
  "name": "title-key"
91
91
  }
92
92
  ],
93
- "description": "A control that starts an action. Styled without any borders.\n---\n\n```ts\ninterface BorderlessButtonSignature {\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\ndeclare global {\n interface HTMLButtonElement {\n is: 'borderless-button' // <button is=\"borderless-button\"></button>\n }\n}\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"
93
+ "description": "A control that starts an action. Styled without any borders.\n---\n\n```ts\ninterface BorderlessButtonSignature {\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\ndeclare global {\n interface HTMLButtonElement {\n is: 'borderless-button' // <button is=\"borderless-button\"></button>\n }\n}\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"
94
94
  },
95
95
  {
96
96
  "name": "color-scheme",
@@ -218,7 +218,7 @@
218
218
  "description": "Value Type: boolean\nDescription: The status of this element"
219
219
  }
220
220
  ],
221
- "description": "A view that shows or hides another view when the user opens or closes it.\n---\n\n```ts\ninterface DisclosureGroupSignature {\n Attributes: {\n open?: boolean // The status of this element\n }\n}\n\nclass DisclosureGroup extends HTMLDetailsElement<DisclosureGroupSignature> {}\n\ninterface GlobalEventMap<\n Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n 'is-expanded': CustomEvent\n 'is-collapsed': CustomEvent\n}\n\ndeclare global {\n interface HTMLDetailsElement {\n is: 'disclosure-group' // <details is=\"disclosure-group\"></details>\n }\n}\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"
221
+ "description": "A view that shows or hides another view when the user opens or closes it.\n---\n\n```ts\ninterface DisclosureGroupSignature {\n Attributes: {\n open?: boolean // The status of this element\n }\n}\n\nclass DisclosureGroup extends HTMLDetailsElement<DisclosureGroupSignature> {}\n\ninterface GlobalEventMap<\n Targets = HTMLElementEventMap | DocumentEventMap | WindowEventMap,\n> {\n 'is-expanded': CustomEvent\n 'is-collapsed': CustomEvent\n}\n\ndeclare global {\n interface HTMLDetailsElement {\n is: 'disclosure-group' // <details is=\"disclosure-group\"></details>\n }\n}\n\n```\n\n### **Examples:**\n**Use the `is` attribute to convert a `details` element into a disclosure group:**\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"
222
222
  },
223
223
  {
224
224
  "name": "fine-tooltip",
@@ -276,7 +276,7 @@
276
276
  "name": "title-key"
277
277
  }
278
278
  ],
279
- "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 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\ndeclare global {\n interface HTMLButtonElement {\n is: 'glass-button' // <button is=\"glass-button\"></button>\n }\n}\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"
279
+ "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 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\ndeclare global {\n interface HTMLButtonElement {\n is: 'glass-button' // <button is=\"glass-button\"></button>\n }\n}\n\n```\n\n### **Examples:**\n**Use the `is` attribute to style a `button` as 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"
280
280
  },
281
281
  {
282
282
  "name": "glass-prominent-button",
@@ -303,7 +303,7 @@
303
303
  "name": "title-key"
304
304
  }
305
305
  ],
306
- "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 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\ndeclare global {\n interface HTMLButtonElement {\n is: 'glass-prominent-button' // <button is=\"glass-prominent-button\"></button>\n }\n}\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"
306
+ "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 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\ndeclare global {\n interface HTMLButtonElement {\n is: 'glass-prominent-button' // <button is=\"glass-prominent-button\"></button>\n }\n}\n\n```\n\n### **Examples:**\n**Use the `is` attribute to style a `button` as 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"
307
307
  },
308
308
  {
309
309
  "name": "h-divider",
@@ -2701,4 +2701,4 @@
2701
2701
  ]
2702
2702
  }
2703
2703
  ]
2704
- }
2704
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swiftwc/ui",
3
- "version": "1.0.0-canary.5",
3
+ "version": "1.0.1-canary.0",
4
4
  "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/scss/base/_root.scss CHANGED
@@ -246,13 +246,13 @@
246
246
 
247
247
  --tabs-picker-track-gap: 0rem;
248
248
  --palette-picker-track-gap: 1rem;
249
- --radio-group-picker-track-gap: 1rem;
249
+ --radio-group-picker-track-gap: 0.2rem;
250
250
 
251
251
  --tabs-picker-track-border-radius: var(--pill-border-radius);
252
252
  --tabs-picker-track-block-size: 3rem;
253
253
  --tabs-picker-track-padding-inline: 0.1rem;
254
254
  --tabs-picker-track-padding-block: 0.1rem;
255
- --tabs-picker-segment-min-inline-size: 3rem;
255
+ --tabs-picker-segment-min-inline-size: 2rem;
256
256
  --tabs-picker-segment-max-inline-size: min(20rem, 100svw);
257
257
  --tabs-picker-segment-padding-inline: 1rem;
258
258
  --tabs-picker-segment-padding-block: 0.5rem;
package/scss/components/_picker-view.scss CHANGED
@@ -8,7 +8,7 @@ $picker-ifs: (
8
8
  tabs: (
9
9
  --picker--inputstack-grid-auto-flow: column,
10
10
  --picker--inputstack-gap: var(--tabs-picker-track-gap),
11
- --picker--inputstack-justify-content: start,
11
+ --picker--inputstack-justify-self: center,
12
12
  // copied from tabbar -> @mixin make-floating-tabbar
13
13
  --picker--inputstack-background: light-dark(var(--liquid-glass-bg), var(--liquid-glass-bg-dark)),
14
14
  --picker--inputstack-backdrop-filter: var(--liquid-glass-backdrop-filter),
@@ -239,6 +239,7 @@ $picker-inform-elses: (
239
239
 
240
240
  text-align: var(--picker--inputstack-text-align,);
241
241
  justify-content: var(--picker--inputstack-justify-content,);
242
+ justify-self: var(--picker--inputstack-justify-self,);
242
243
 
243
244
  gap: var(--picker--inputstack-gap,);
244
245
 
@@ -472,12 +473,14 @@ $picker-inform-elses: (
472
473
 
473
474
  pointer-events: none;
474
475
 
476
+ background-size: cover;
477
+
475
478
  transition: outline 100ms ease-out;
476
479
 
477
480
  &:checked {
478
481
  outline: var(--accentColor) solid 0.3rem;
479
482
 
480
- outline-offset: 0.1rem;
483
+ outline-offset: 0.15rem;
481
484
  }
482
485
  }
483
486
  }
@@ -511,9 +514,9 @@ $picker-inform-elses: (
511
514
 
512
515
  padding-block: var(--tabs-picker-segment-padding-block,);
513
516
 
514
- min-inline-size: var(--tabs-picker-segment-min-inline-size);
517
+ min-inline-size: var(--tabs-picker-segment-min-inline-size,);
515
518
 
516
- max-inline-size: var(--tabs-picker-segment-max-inline-size);
519
+ max-inline-size: var(--tabs-picker-segment-max-inline-size,);
517
520
 
518
521
  border-radius: var(--tabs-picker-track-border-radius);
519
522