@swiftwc/ui 0.0.0-dev.111 → 0.0.0-dev.113

package/html-data/en.json

@@ -309,6 +309,23 @@
       "name": "h-divider",
       "description": "undefined\n\n```ts\ninterface HDividerSignature {}\n\nclass HDivider extends HTMLElement<HDividerSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'h-divider': HDivider // <h-divider></h-divider>\n  }\n}\n\n```\n"
     },
+    {
+      "name": "h-flex-stack",
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://swiftwc.github.io/ui/web-components/h-flex-stack"
+        }
+      ],
+      "attributes": [
+        {
+          "name": "spacing",
+          "description": "\nDescription: The gap between the primary axis",
+          "valueSet": "Spacing"
+        }
+      ],
+      "description": "A view that arranges its children side by side.\n---\n\n```ts\ninterface HFlexStackSignature {\n  Attributes: {\n    spacing?: Spacing // The gap between the primary axis\n  }\n}\n\nclass HFlexStack extends HTMLElement<HFlexStackSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'h-flex-stack': HFlexStack // <h-flex-stack></h-flex-stack>\n  }\n}\n\n```\n"
+    },
     {
       "name": "h-stack",
       "references": [
@@ -562,6 +579,37 @@
         }
       ],
       "attributes": [
+        {
+          "name": "label-value-placement",
+          "description": "Value Type: “vertical” | “horizontal” | “auto”",
+          "values": [
+            {
+              "name": "vertical"
+            },
+            {
+              "name": "horizontal"
+            },
+            {
+              "name": "auto"
+            }
+          ]
+        },
+        {
+          "name": "horizontal-radio-group-layout",
+          "description": "Value Type: boolean"
+        },
+        {
+          "name": "prompt"
+        },
+        {
+          "name": "prompt-icon"
+        },
+        {
+          "name": "label"
+        },
+        {
+          "name": "name"
+        },
         {
           "name": "picker-style",
           "description": "Value Type: “menu” | “inline” | “navigation-link” | “sheet” | “automatic”",
@@ -583,36 +631,33 @@
             }
           ]
         },
+        {
+          "name": "selection"
+        },
+        {
+          "name": "searchable",
+          "description": "Value Type: boolean"
+        },
+        {
+          "name": "current-value-label"
+        },
+        {
+          "name": "current-value-icon"
+        },
         {
           "name": "help",
-          "description": "\nDescription: Adds a help tooltip to the trigger of the picker, if style supports one"
+          "description": "Adds a help tooltip to the trigger of the picker, if style supports one"
         },
         {
           "name": "dictionary",
-          "description": "Value Type: “DictEntry[]”\n\nDescription: Renders all options using this array",
-          "values": [
-            {
-              "name": "DictEntry[]"
-            }
-          ]
+          "description": "Value Type: Array.<DictEntry>\nDescription: Renders all options using this array"
         },
         {
-          "name": "label-value-placement",
-          "description": "Value Type: “vertical” | “horizontal” | “auto”",
-          "values": [
-            {
-              "name": "vertical"
-            },
-            {
-              "name": "horizontal"
-            },
-            {
-              "name": "auto"
-            }
-          ]
+          "name": "required",
+          "description": "Value Type: boolean"
         }
       ],
-      "description": "A control that selects one value from a set of options.\n---\n\n```ts\ninterface PickerViewSignature {\n  Attributes: {\n    'picker-style'?:\n      | 'menu'\n      | 'inline'\n      | 'navigation-link'\n      | 'sheet'\n      | 'automatic'\n    dictionary?: 'DictEntry[]' // Renders all options using this array\n    'label-value-placement'?: 'vertical' | 'horizontal' | 'auto'\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    label: HTMLElement[]\n    list: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass PickerView extends HTMLElement<PickerViewSignature> {\n  static formAssociated = true\n\n  selection: string\n  readonly template: DocumentFragment\n  readonly pickerStyle:\n    | 'automatic'\n    | 'menu'\n    | 'inline'\n    | 'navigation-link'\n    | 'sheet'\n  readonly name: string // Form participation property\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'picker-view': PickerView // <picker-view></picker-view>\n  }\n}\n\n```\n"
+      "description": "A control that selects one value from a set of options.\n---\n\n```ts\ninterface PickerViewSignature {\n  Attributes: {\n    'label-value-placement'?: 'vertical' | 'horizontal' | 'auto'\n    'horizontal-radio-group-layout'?: boolean\n    prompt?: string\n    'prompt-icon'?: string\n    label?: string\n    name?: string\n    'picker-style'?:\n      | 'menu'\n      | 'inline'\n      | 'navigation-link'\n      | 'sheet'\n      | 'automatic'\n    selection?: string\n    searchable?: boolean\n    'current-value-label'?: string\n    'current-value-icon'?: string\n    help?: string // Adds a help tooltip to the trigger of the picker, if style supports one\n    dictionary?: Array<DictEntry> // Renders all options using this array\n    required?: boolean\n  }\n\n  Slots: {\n    default: HTMLElement[] // The default slot.\n    label: HTMLElement[]\n    list: HTMLElement[]\n    'validity-options': HTMLOptionElement[]\n  }\n}\n\nclass PickerView extends HTMLElement<PickerViewSignature> {\n  static formAssociated = true\n\n  selection: string\n  readonly template: DocumentFragment\n  readonly pickerStyle:\n    | 'automatic'\n    | 'menu'\n    | 'inline'\n    | 'navigation-link'\n    | 'sheet'\n    | 'radio-group'\n  readonly name: string // Form participation property\n\n  setValidity(): void\n  setCustomValidity(): void\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'picker-view': PickerView // <picker-view></picker-view>\n  }\n}\n\n```\n"
     },
     {
       "name": "plain-button",
@@ -957,6 +1002,23 @@
       "name": "v-divider",
       "description": "undefined\n\n```ts\ninterface VDividerSignature {}\n\nclass VDivider extends HTMLElement<VDividerSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'v-divider': VDivider // <v-divider></v-divider>\n  }\n}\n\n```\n"
     },
+    {
+      "name": "v-flex-stack",
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://swiftwc.github.io/ui/web-components/v-flex-stack"
+        }
+      ],
+      "attributes": [
+        {
+          "name": "template",
+          "description": "\nDescription: The main-axis grid template",
+          "valueSet": "Template"
+        }
+      ],
+      "description": "A view that arranges its children one on top of the other.\n---\n\n```ts\ninterface VFlexStackSignature {\n  Attributes: {\n    template?: Template // The main-axis grid template\n  }\n}\n\nclass VFlexStack extends HTMLElement<VFlexStackSignature> {}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'v-flex-stack': VFlexStack // <v-flex-stack></v-flex-stack>\n  }\n}\n\n```\n"
+    },
     {
       "name": "v-keyboard",
       "references": [
@@ -1070,6 +1132,11 @@
       "name": "frame:max-width",
       "description": "Sets max-inline-size",
       "valueSet": "FrameInlineLength"
+    },
+    {
+      "name": "background-style",
+      "description": "Overrides the context-aware styles for background colors",
+      "valueSet": "BackgroundStyle"
     }
   ],
   "valueSets": [
@@ -2615,6 +2682,15 @@
           "description": "100cqi"
         }
       ]
+    },
+    {
+      "name": "BackgroundStyle",
+      "values": [
+        {
+          "name": "initial",
+          "description": "Reverts any background styles applied to this element, usually by context-aware rules like for example the inset-grouped-list styling applied to all descendants of current view"
+        }
+      ]
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.111",
+  "version": "0.0.0-dev.113",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/_maps.scss

@@ -1,4 +1,4 @@
-$picker-styles-names: menu, navigation-link, sheet;
+$picker-styles-names: menu, navigation-link, sheet, radio-group;
 $label-styles-names: icon-only, title-only, title-and-icon;
 $list-styles-names: inset, inset-grouped, sidebar;
 $form-styles-names: inset, inset-grouped, sidebar;

package/scss/_utils.scss

@@ -6,6 +6,6 @@
 
 @forward 'utils/spacing';
 
-@forward 'utils/scroll-view';
+// @forward 'utils/scroll-view';
 
 @forward 'utils/background';

package/scss/base/_reboot.scss

@@ -133,33 +133,6 @@
     }
   }
 
-  // label {
-  //   // remove this
-  //   display: inline-grid;
-  //   position: relative;
-  //   // min-height: var(--toolbar-cell-min-size);
-  //   // min-width: var(--toolbar-cell-min-size);
-  //   // container-type: inline-size;
-
-  //   grid-template-columns: minmax(0, 1fr);
-  //   grid-template-rows: minmax(0, 1fr);
-
-  //   place-content: center;
-  //   place-items: center;
-  //   // line-height: 1;
-
-  //   > svg {
-  //     display: inline-grid;
-  //     width: 2rem;
-  //     height: 2rem;
-  //   }
-
-  //   > i {
-  //     display: inline-grid;
-  //     font-size: 2rem;
-  //   }
-  // }
-
   $CONFIG: (
     vt-fwd-class-name: vars.$vt-fwd-class-name,
 

package/scss/base/_root.scss

@@ -377,8 +377,8 @@
         --#{$v}-item-padding-inline-start: 1rem;
         --#{$v}-item-padding-inline-end: 1rem;
 
-        --insetgrouped#{$v}-background-color: var(--background);
-        --insetgrouped#{$v}-item-background-color: var(--quaternaryGroupedBackground);
+        // --insetgrouped#{$v}-background-color: var(--background);
+        // --insetgrouped#{$v}-item-background-color: var(--quaternaryGroupedBackground);
       }
 
       --toggle-inline-size: 3.4rem;

package/scss/colors/_index.scss

@@ -621,8 +621,7 @@ $colors: map.merge(
   //   --canvastext: light-dark(var(--primary-label), var(--primary-label-dark));
   // }
 
-  // NOTE: NO color diffs for dialogs/popups
-  /* :where([is='sheet-view'], [is='full-screen'], [is='confirmation-dialog'], [is='alert-dialog']) {
+  :where([is='sheet-view'], [is='full-screen'], [is='confirmation-dialog'], [is='alert-dialog']) {
     // modify background/secondarybg/tertiarybg etc for ELEVATED STYLES!!
     // ANCHOR: level 1
     --face: var(--background); // IMPORTANT: redeclare references scope or it WONT pick up!
@@ -634,7 +633,52 @@ $colors: map.merge(
     // --face: light-dark(var(--secondary-bg), var(--secondary-bg-dark));
 
     // --text: light-dark(var(--secondary-text), var(--secondary-text-dark));
-  } */
+  }
+
+  [is='sheet-view'],
+  [is='full-screen'],
+  [is='confirmation-dialog'],
+  [is='alert-dialog'],
+  body-view,
+  navigation-split-view,
+  navigation-split-view > [is='sidebar-view'],
+  navigation-stack {
+    // @media (pointer: coarse) {
+    :where(
+      &:has(
+        > scroll-view list-view[list-style='inset-grouped']:not([slot], [background]),
+        > scroll-view [is='form-view'][form-style='inset-grouped']:not([slot], [background]),
+        > scroll-view table-view[table-style='inset']:not([slot], [background])
+      )
+    ) {
+      --background: var(--groupedBackground);
+      --secondaryBackground: var(--secondaryGroupedBackground);
+      --tertiaryBackground: var(--tertiaryGroupedBackground);
+
+      --face: var(--background);
+    }
+    // }
+  }
+
+  // revert above!
+  navigation-stack > navigation-stack,
+  navigation-stack > navigation-split-view {
+    :where(
+      &:not(
+        :has(
+          > scroll-view list-view[list-style='inset-grouped']:not([slot], [background]),
+          > scroll-view [is='form-view'][form-style='inset-grouped']:not([slot], [background]),
+          > scroll-view table-view[table-style='inset']:not([slot], [background])
+        )
+      )
+    ) {
+      --background: initial;
+      --secondaryBackground: initial;
+      --tertiaryBackground: initial;
+
+      --face: var(--background);
+    }
+  }
 
   :where(navigation-split-view > [is='sidebar-view']) {
     // --canvas: light-dark(oklch(var(--primary-bg)), var(--primary-bg-dark));

package/scss/components/_h-flex-stack.scss

@@ -8,6 +8,8 @@
 
       place-items: safe center;
       place-content: safe center;
+
+      gap: 1rem;
     }
 
     :where(& > *) {

package/scss/components/_index.scss

@@ -103,7 +103,7 @@
   :where(menu-view)::part(menu-scrollable),
   :where(picker-view)::part(picker-stack),
   :where(picker-view)::part(picker-label-stack),
-  :where(picker-view)::part(picker-input-stack),
+  // :where(picker-view)::part(picker-input-stack),
   :where(tool-bar)::part(top-bar),
   :where(tool-bar)::part(bottom-bar),
   :where(label-view)::part(label-image-stack),