@swiftwc/ui 0.0.0-dev.8 → 0.0.0-dev.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.8",
+  "version": "0.0.0-dev.80",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -43,6 +43,10 @@
       "types": "./generated/client/index.d.ts",
       "default": "./generated/client/index.js"
     },
+    "./events": {
+      "types": "./generated/events/index.d.ts",
+      "default": "./generated/events/index.js"
+    },
     "./css": "./generated/css/index.css",
     "./scss": "./scss/index.scss",
     "./scss/*": "./scss/*.scss",
@@ -53,15 +57,25 @@
   },
   "scripts": {
     "prebuild": "rm -rf generated",
-    "build": "npm run build:ts && npm run build:scss",
+    "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels",
+    "postbuild": "npm run format:write",
     "build:ts:watch": "npm run prebuild && tsc --watch",
     "build:ts": "tsc",
     "build:scss": "sass --style=expanded --no-source-map scss/index.scss generated/css/index.css",
     "build:manifest": "tsx scripts/make-manifest.ts",
-    "build:barrels": "barrelsby -D -q -S -d ./js/components -e \".\\.test\\.ts\"",
+    "build:barrels": "npm run build:barrels:components && npm run build:barrels:events && npm run build:barrels:buses && npm run build:barrels:tpl && npm run build:barrels:i18n",
+    "build:barrels:components": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/components --exclude \".\\.test\\.ts\"",
+    "build:barrels:events": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --directory ./js/events --exclude \".\\.test\\.ts\"",
+    "build:barrels:buses": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/buses",
+    "build:barrels:i18n": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --fullPathname --directory ./js/i18n/locales",
+    "build:barrels:tpl": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/tpl --exclude \".\\.test\\.ts\"",
+    "build:barrels:decorators": "barrelsby --noHeader --delete --singleQuotes --noSemicolon --exportDefault --directory ./js/internal/decorators",
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
-    "test": "vitest --dom"
+    "test": "vitest --dom",
+    "prepackage": "rm -rf generated",
+    "package": "npm run build:ts && npm run build:scss",
+    "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"
   },
   "devDependencies": {
     "doctrine": "^3.0.0",

package/scss/_components.scss

@@ -4,24 +4,34 @@
 
 @forward 'components/disclosure-group';
 
+@forward 'components/image-view';
+@forward 'components/group-box';
+
 @forward 'components/h-divider';
 @forward 'components/v-divider';
 
 @forward 'components/full-screen';
 
 @forward 'components/detail-placeholder';
+@forward 'components/progress-view';
+
+@forward 'components/fine-tooltip';
 
 @forward 'components/sticky-container';
 
 @forward 'components/sheet-view';
 
+@forward 'components/content-unavailable-view';
+
 @forward 'components/confirmation-dialog';
+@forward 'components/alert-dialog';
 
 @forward 'components/scroll-view';
 @forward 'components/scroll-view-proxy';
 
 @forward 'components/h-stack';
 @forward 'components/v-stack';
+@forward 'components/h-flex-stack';
 @forward 'components/v-flex-stack';
 
 @forward 'components/scroll-view-toolbars';
@@ -37,10 +47,14 @@
 @forward 'components/glass-button';
 @forward 'components/glass-prominent-button';
 
+@forward 'components/search-view';
+
 @forward 'components/tool-bar';
 
 @forward 'components/label-view';
 
+@forward 'components/toggle-view';
+
 @forward 'components/labeled-content';
 
 // @forward 'components/button-view';

package/scss/_functions.scss

@@ -19,3 +19,13 @@
   }
   @return string.slice($parts, 2);
 }
+
+@function str-replace($string, $search, $replace: '') {
+  $index: string.index($string, $search);
+
+  @if $index {
+    @return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
+  }
+
+  @return $string;
+}

package/scss/_mixins.scss

@@ -1,3 +1,7 @@
 @forward 'mixins/index';
 
 @forward 'mixins/dialog';
+
+@forward 'mixins/button';
+
+@forward 'mixins/color';

package/scss/_transitions.scss

@@ -8,15 +8,20 @@
 
 @forward 'transitions/bwd.navbar';
 
-@forward 'transitions/dialog';
+@forward 'transitions/sheet-view';
+
+@forward 'transitions/fine-tooltip';
 
 @forward 'transitions/menu-view';
 
+@forward 'transitions/progress-view';
+
 @forward 'transitions/glass-button';
 
 @forward 'transitions/glass-prominent-button';
 
 @forward 'transitions/confirmation-dialog';
+@forward 'transitions/alert-dialog';
 
 @forward 'transitions/navigation-split-view';
 

package/scss/_vars.scss

@@ -3,6 +3,7 @@
 
 $base-layer: sw-base !default;
 $components-layer: sw-components !default;
+$list-components-layer: sw-list-components !default;
 $nav-components-layer: sw-nav-components !default;
 $tab-components-layer: sw-tab-components !default;
 $utils-layer: sw-utils !default;
@@ -30,11 +31,12 @@ $ipad-landscape-bp: 68rem !default;
 $table-expanded-bp: 31rem !default;
 
 // SECTION: Defaults
-$picker-styles: menu;
+$picker-styles: menu, navigation-link, sheet;
 $label-styles: icon-only, title-only, title-and-icon;
 $list-styles: inset, inset-grouped, sidebar;
 $form-styles: inset, inset-grouped, sidebar;
 $table-styles: inset;
+$labeled-content-styles: vertical, horizontal;
 
 $label-fonts: (
   footnote: (
@@ -145,7 +147,12 @@ $button-sizes: (
 
 $disclosure-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M184.49,136.49l-80,80a12,12,0,0,1-17-17L159,128,87.51,56.49a12,12,0,1,1,17-17l80,80A12,12,0,0,1,184.49,136.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-right-bold
 $table-col-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z"%3E%3C/path%3E%3C/svg%3E'; // ph-caret-up-bold
-$picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
+// $picker-affordance: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" viewBox="0 0 256 256"%3E%3Cpath d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"%3E%3C/path%3E%3C/svg%3E'; // ph-check-bold
+
+$cancel-button-icon: 'x'; // ph-trash
+$close-button-icon: 'x'; // ph-trash
+$confirm-button-icon: 'check'; // ph-trash
+$delete-button-icon: 'trash'; // ph-trash
 
 // SECTION: computed(s)
 

package/scss/base/_layout.scss

@@ -18,7 +18,6 @@
     }
 
     :where(& > *:not([slot])) {
-      // & > *:not([slot]) {
       @include mixins.span-all;
     }
   }
@@ -29,8 +28,8 @@
   dialog:has(> body-view),
   // body-view:has(> dialog),
   body-view:has(> body-view) {
-    & > scroll-view,
-    & > [is='sidebar-view'] > scroll-view {
+    > scroll-view,
+    > [is='sidebar-view'] > scroll-view {
       :where(&) {
         --scroll-view-translate: translateX(var(--view-transition-leading-x));
       }
@@ -44,13 +43,24 @@
     // & > [is='sidebar-view'] > bottom-bar > tool-bar-item,
     // & > [is='sidebar-view'] > top-bar > tool-bar-item-group,
     // & > [is='sidebar-view'] > bottom-bar > tool-bar-item-group {
-    & > tool-bar > tool-bar-item,
-    & > tool-bar > tool-bar-item-group,
-    & > [is='sidebar-view'] > tool-bar > tool-bar-item,
-    & > [is='sidebar-view'] > tool-bar > tool-bar-item-group {
+    > tool-bar > tool-bar-item,
+    > tool-bar > tool-bar-item-group,
+    > [is='sidebar-view'] > tool-bar > tool-bar-item,
+    > [is='sidebar-view'] > tool-bar > tool-bar-item-group {
       :where(&) {
         @include mixins.vt-toolbar-cell-offscreen-keyframe;
       }
     }
   }
+
+  // NOTE: Going all the way back from deeply nested views forces an empty landing page.
+  // NOTE: Refactor this to add a content-visibility:visible when bwd/fwd classes are present.
+  // :is(navigation-stack, dialog, body-view):has(> body-view > body-view) {
+  //   > scroll-view,
+  //   > tool-bar {
+  //     :where(&) {
+  //       content-visibility: hidden;
+  //     }
+  //   }
+  // }
 }

package/scss/base/_reboot.scss

@@ -1,7 +1,7 @@
 @use '../vars';
 @use '../functions';
 
-@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$nav-components-layer}, #{vars.$tab-components-layer}, #{vars.$utils-layer}, #{vars.$colors-layer}, #{vars.$ui-layer}, #{vars.$transitions-layer}, #{vars.$final-layer};
+@layer #{vars.$base-layer}, #{vars.$components-layer}, #{vars.$nav-components-layer}, #{vars.$list-components-layer}, #{vars.$tab-components-layer}, #{vars.$utils-layer}, #{vars.$colors-layer}, #{vars.$ui-layer}, #{vars.$transitions-layer}, #{vars.$final-layer};
 
 @layer #{vars.$base-layer} {
   // html,
@@ -11,6 +11,8 @@
 
   :root {
     interpolate-size: allow-keywords;
+
+    touch-action: manipulation; // Disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen
   }
 
   *,
@@ -41,6 +43,12 @@
     text-transform: none;
   }
 
+  // FIXME:
+  .ph,
+  .ph::before {
+    display: grid;
+  }
+
   button,
   *::part(button),
   input,
@@ -103,6 +111,26 @@
 
   html {
     transition: font-size 1ms step-start;
+
+    @media (pointer: fine) {
+      font-size: 14px;
+    }
+
+    font-family: var(--host--font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
+
+    font-feature-settings: var(--host--font-feature-settings, normal);
+
+    font-variation-settings: var(--host--font-variation-settings, normal);
+
+    :where(&:has(body > v-keyboard[system-font='Inter'])) {
+      --host--font-family: Inter, sans-serif;
+
+      --host--font-feature-settings: 'liga' 1, 'calt' 1;
+
+      @supports (font-variation-settings: normal) {
+        --host--font-family: InterVariable, sans-serif;
+      }
+    }
   }
 
   // label {
@@ -147,6 +175,11 @@
     // ipad-landscape-bp-min: vars.$ipad-landscape-bp-min,
     ipad-sheet-view-inline-size: vars.$ipad-sheet-view-inline-size,
     ipad-sheet-view-height: vars.$ipad-sheet-view-height,
+    //
+    cancel-button-icon: vars.$cancel-button-icon,
+    close-button-icon: vars.$close-button-icon,
+    confirm-button-icon: vars.$confirm-button-icon,
+    delete-button-icon: vars.$delete-button-icon,
   );
 
   @debug functions.map-to-query($CONFIG);