@swiftwc/ui 0.0.0-dev.19 → 0.0.0-dev.20

package/generated/components/content-unavailable-view.js

@@ -1,6 +1,6 @@
-import { CleanupRegistry } from '#internal/class/cleanup-registry.js';
-import { $, onoff } from '#internal/utils/index.js';
 import { I18n } from '../i18n';
+import { CleanupRegistry } from '../internal/class/cleanup-registry';
+import { $, onoff } from '../internal/utils';
 /**
  * @summary A message with a title and extra information that you show when part of your app can’t be used.
  *

package/generated/components/text-field.js

@@ -10,21 +10,7 @@ const keyboardTypes = ['decimal-pad', 'number-pad', 'default'];
  */
 export class TextField extends FormAssociatedBase {
     static get observedAttributes() {
-        return [
-            'prompt',
-            'minimum',
-            'maximum',
-            'min-length',
-            'max-length',
-            'label',
-            'name',
-            'text',
-            'text-input-autocapitalization',
-            'disable-autocorrection',
-            'keyboard-type',
-            'required',
-            'disabled',
-        ];
+        return ['prompt', 'minimum', 'maximum', 'min-length', 'max-length', 'label', 'name', 'text', 'text-input-autocapitalization', 'disable-autocorrection', 'keyboard-type', 'required', 'disabled'];
     }
     static #template;
     static get template() {
@@ -181,9 +167,7 @@ export class TextField extends FormAssociatedBase {
         }
     }
     get keyboardType() {
-        return keyboardTypes.includes(this.getAttribute('keyboard-type') ?? '')
-            ? this.getAttribute('keyboard-type')
-            : 'default';
+        return keyboardTypes.includes(this.getAttribute('keyboard-type') ?? '') ? this.getAttribute('keyboard-type') : 'default';
     }
     get text() {
         return this.#input?.value ?? '';

package/generated/css/index.css

@@ -50,9 +50,8 @@
     --liquid-glass-bs-soft-bevel-blur: inset 1px 1px 0 -0.5px light-dark(#fff, #fff6);
     --liquid-glass-bs-outer: 0 0 25px 0 light-dark(#0003, #00000026);
     --liquid-glass-box-shadow:
-      var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), inset 3px 3px 10px -3px light-dark(#ddd, #262626),
-      inset -3px -3px 10px -3px light-dark(#ddd, #262626), inset 0 0 5px 1px light-dark(#fff, #141414), inset 0 0 0 0.5px light-dark(#00000040, #ffffff26),
-      inset 0 0 24px 0 light-dark(#0000001a, #ffffff0d), var(--liquid-glass-bs-outer);
+      var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), inset 3px 3px 10px -3px light-dark(#ddd, #262626), inset -3px -3px 10px -3px light-dark(#ddd, #262626),
+      inset 0 0 5px 1px light-dark(#fff, #141414), inset 0 0 0 0.5px light-dark(#00000040, #ffffff26), inset 0 0 24px 0 light-dark(#0000001a, #ffffff0d), var(--liquid-glass-bs-outer);
     --navigation-bar-block-size: var(--tool-bar-block-size);
     --nav-split-view-sidebar-inline-size: 20rem;
     --nav-split-view-content-inline-size: 25rem;
@@ -320,9 +319,7 @@
       --menu-item-focus-bg: var(--accentColor);
       --menu-item-focus-bg-dark: var(--accentColor);
       --menu-item-active-bg: oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h);
-      --menu-item-active-bg-dark: oklch(
-        from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.2), c) h
-      );
+      --menu-item-active-bg-dark: oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.2), c) h);
       --picker-affordance-size: 1rem;
       --picker-affordance-col-gap: 1rem;
     }
@@ -1378,9 +1375,7 @@
   @media (min-width: 43rem) {
     :where(navigation-split-view:has(> [is=sidebar-view]) detail-placeholder) {
       --nav-split-view--detail-placeholder-inset: 0 0 0 calc(var(--nav-split-view-sidebar-inline-size) + var(--nav-split-view--content-inline-size));
-      --nav-split-view--detail-placeholder-inline-size: calc(
-        100lvw - var(--nav-split-view-sidebar-inline-size) - var(--nav-split-view--content-inline-size)
-      );
+      --nav-split-view--detail-placeholder-inline-size: calc(100lvw - var(--nav-split-view-sidebar-inline-size) - var(--nav-split-view--content-inline-size));
     }
   }
   @media (min-width: 43rem) and (max-width: 63.9999rem) {
@@ -2039,9 +2034,7 @@
     grid-template-rows: auto 1fr auto;
     grid-template-areas: "top-bar" "spacer" "bottom-bar";
   }
-  :where(tool-bar > *:not(sidebar-toggle), tool-bar > sidebar-toggle > tool-bar-item,
-  tab-view > sidebar-toggle > tool-bar-item,
-  navigation-split-view > sidebar-toggle > tool-bar-item) {
+  :where(tool-bar > *:not(sidebar-toggle), tool-bar > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
     backdrop-filter: var(--liquid-glass-backdrop-filter);
     box-shadow: var(--toolbar-cell-box-shadow);
     min-inline-size: var(--toolbar-cell-min-size);
@@ -7377,14 +7370,8 @@
   }
   :where([is=borderless-button]) {
     --btntext: var(--accentColor);
-    --btnhighlighttext: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h)
-    );
-    --btnactivetext: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h)
-    );
+    --btnhighlighttext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h));
+    --btnactivetext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h));
   }
   :where([is=bordered-button]) {
     --btntext: var(--accentEmphasis, var(--accentColor));
@@ -7411,14 +7398,8 @@
     --btnhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
     --btnactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
     --btnface: var(--accentColor);
-    --btnhighlightface: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.9), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.4), c) h)
-    );
-    --btnactiveface: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.8), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h)
-    );
+    --btnhighlightface: light-dark(oklch(from var(--accentColor) max(calc(l * 0.9), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.4), c) h));
+    --btnactiveface: light-dark(oklch(from var(--accentColor) max(calc(l * 0.8), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h));
   }
   :where([is=glass-button]) {
     --btntext: var(--accentEmphasis, var(--accentColor));
@@ -7439,14 +7420,8 @@
     --btnhighlighttext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
     --btnactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
     --btnface: var(--accentColor);
-    --btnhighlightface: light-dark(
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h)
-    );
-    --btnactiveface: light-dark(
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h)
-    );
+    --btnhighlightface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h));
+    --btnactiveface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
   }
   /* list-view {
     :where(&) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.19",
+  "version": "0.0.0-dev.20",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"
@@ -58,6 +58,7 @@
   "scripts": {
     "prebuild": "rm -rf generated",
     "build": "npm run build:ts && npm run build:scss && npm run build:manifest && npm run build:barrels && npm run build:barrels:i18n",
+    "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",
@@ -67,6 +68,8 @@
     "format:check": "prettier . --check",
     "format:write": "prettier . --write",
     "test": "vitest --dom",
+    "predeploy": "rm -rf generated",
+    "deploy":"npm run build:ts && npm run build:scss",
     "version:pkg": "npm version $npm_config_bump --no-git-tag-version --preid=dev"
   },
   "devDependencies": {
@@ -77,8 +80,5 @@
     "tsx": "^4.21.0",
     "vitest": "^4.0.18"
   },
-  "customElements": "custom-elements/en.json",
-  "imports": {
-    "#internal/*": "./js/internal/*"
-  }
+  "customElements": "custom-elements/en.json"
 }

package/scss/base/_root.scss

@@ -80,9 +80,8 @@
     --liquid-glass-bs-soft-bevel-blur: inset 1px 1px 0 -0.5px light-dark(#fff, #fff6);
     --liquid-glass-bs-outer: 0 0 25px 0 light-dark(#0003, #00000026);
     --liquid-glass-box-shadow:
-      var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), inset 3px 3px 10px -3px light-dark(#ddd, #262626),
-      inset -3px -3px 10px -3px light-dark(#ddd, #262626), inset 0 0 5px 1px light-dark(#fff, #141414), inset 0 0 0 0.5px light-dark(#00000040, #ffffff26),
-      inset 0 0 24px 0 light-dark(#0000001a, #ffffff0d), var(--liquid-glass-bs-outer);
+      var(--liquid-glass-bs-bevel-highlight), var(--liquid-glass-bs-soft-bevel-blur), inset 3px 3px 10px -3px light-dark(#ddd, #262626), inset -3px -3px 10px -3px light-dark(#ddd, #262626),
+      inset 0 0 5px 1px light-dark(#fff, #141414), inset 0 0 0 0.5px light-dark(#00000040, #ffffff26), inset 0 0 24px 0 light-dark(#0000001a, #ffffff0d), var(--liquid-glass-bs-outer);
 
     --navigation-bar-block-size: var(--tool-bar-block-size);
 
@@ -373,9 +372,7 @@
       --menu-item-focus-bg-dark: var(--accentColor);
 
       --menu-item-active-bg: oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h); //color-mix(in oklch, black 10%, var(--accentColor));
-      --menu-item-active-bg-dark: oklch(
-        from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.2), c) h
-      ); //color-mix(in oklch, white 10%, var(--accentColor));
+      --menu-item-active-bg-dark: oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.2), c) h); //color-mix(in oklch, white 10%, var(--accentColor));
 
       --picker-affordance-size: 1rem;
       --picker-affordance-col-gap: 1rem;

package/scss/colors/_index.scss

@@ -552,14 +552,8 @@ $colors: map.merge(
 
   :where([is='borderless-button']) {
     --btntext: var(--accentColor);
-    --btnhighlighttext: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h)
-    );
-    --btnactivetext: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h)
-    );
+    --btnhighlighttext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.7), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h));
+    --btnactivetext: light-dark(oklch(from var(--accentColor) max(calc(l * 0.5), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.3), 1) min(calc(c * 1.4), c) h));
   }
 
   :where([is='bordered-button']) {
@@ -590,14 +584,8 @@ $colors: map.merge(
     --btnactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
 
     --btnface: var(--accentColor); //light-dark(var(--accentColor), var(--accentColor));
-    --btnhighlightface: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.9), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.4), c) h)
-    );
-    --btnactiveface: light-dark(
-      oklch(from var(--accentColor) max(calc(l * 0.8), 0) min(calc(c * 1.4), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h)
-    );
+    --btnhighlightface: light-dark(oklch(from var(--accentColor) max(calc(l * 0.9), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.4), c) h));
+    --btnactiveface: light-dark(oklch(from var(--accentColor) max(calc(l * 0.8), 0) min(calc(c * 1.4), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.4), c) h));
   }
 
   :where([is='glass-button']) {
@@ -622,14 +610,8 @@ $colors: map.merge(
     --btnactivetext: oklch(from var(--accentColor) clamp(0, (0.7 - l) * 999, 1) none none);
 
     --btnface: var(--accentColor); //light-dark(var(--accentColor), var(--accentColor));
-    --btnhighlightface: light-dark(
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h)
-    );
-    --btnactiveface: light-dark(
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h),
-      oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h)
-    );
+    --btnhighlightface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.1), 1) min(calc(c * 1.1), c) h));
+    --btnactiveface: light-dark(oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h), oklch(from var(--accentColor) min(calc(l * 1.2), 1) min(calc(c * 1.1), c) h));
   }
 
   /* list-view {

package/scss/components/_detail-placeholder.scss

@@ -72,9 +72,7 @@
           :where(&) {
             --nav-split-view--detail-placeholder-inset: 0 0 0 calc(var(--nav-split-view-sidebar-inline-size) + var(--nav-split-view--content-inline-size));
 
-            --nav-split-view--detail-placeholder-inline-size: calc(
-              100lvw - var(--nav-split-view-sidebar-inline-size) - var(--nav-split-view--content-inline-size)
-            );
+            --nav-split-view--detail-placeholder-inline-size: calc(100lvw - var(--nav-split-view-sidebar-inline-size) - var(--nav-split-view--content-inline-size));
           }
         }
 

package/scss/components/_sheet-view.scss

@@ -39,8 +39,7 @@
         height: auto;
 
         inset-inline-start: calc(
-          var(--inset-inline-start-resettor, 1) *
-            calc(50lvw - calc(#{vars.$ipad-sheet-view-inline-size} / 2) - calc(calc(var(--safe-area-inset-left) + var(--safe-area-inset-right)) / 2))
+          var(--inset-inline-start-resettor, 1) * calc(50lvw - calc(#{vars.$ipad-sheet-view-inline-size} / 2) - calc(calc(var(--safe-area-inset-left) + var(--safe-area-inset-right)) / 2))
         );
 
         inset-block-start: calc(50lvh - calc(#{vars.$ipad-sheet-view-height} / 2) - calc(calc(var(--safe-area-inset-top) + var(--safe-area-inset-bottom)) / 2));

package/scss/components/_sidebar-toggle.scss

@@ -101,10 +101,7 @@
         display: none;
       }
 
-      :where(
-        navigation-split-view:has(> [is='sidebar-view']):not([preferred-compact-column='content']) > &,
-        navigation-split-view:has(> [is='sidebar-view'])[column-visibility='double-column'] > &
-      ) {
+      :where(navigation-split-view:has(> [is='sidebar-view']):not([preferred-compact-column='content']) > &, navigation-split-view:has(> [is='sidebar-view'])[column-visibility='double-column'] > &) {
         display: none;
       }
     }

package/scss/components/_tab-bar.scss

@@ -98,9 +98,7 @@
 
         // overflow: clip;
 
-        scroll-padding-left: calc(
-          var(--sidebar-toggle-padding-inline-start, 0px) + var(--ipad-tabbar-block-padding-start) + var(--ipad-tabbar-block-padding-end)
-        );
+        scroll-padding-left: calc(var(--sidebar-toggle-padding-inline-start, 0px) + var(--ipad-tabbar-block-padding-start) + var(--ipad-tabbar-block-padding-end));
 
         // overflow: auto clip;
 

package/scss/components/_table-row.scss

@@ -24,7 +24,7 @@
         }
       }
     }
-    
+
     // dissmantle list and turn it into a h-column row
     @container table (width > #{vars.$table-expanded-bp}) {
       :where(&) {

package/scss/components/_tool-bar.scss

@@ -18,12 +18,7 @@
         'bottom-bar';
     }
 
-    :where(
-      & > *:not(sidebar-toggle),
-      & > sidebar-toggle > tool-bar-item,
-      tab-view > sidebar-toggle > tool-bar-item,
-      navigation-split-view > sidebar-toggle > tool-bar-item
-    ) {
+    :where(& > *:not(sidebar-toggle), & > sidebar-toggle > tool-bar-item, tab-view > sidebar-toggle > tool-bar-item, navigation-split-view > sidebar-toggle > tool-bar-item) {
       backdrop-filter: var(--liquid-glass-backdrop-filter);
       box-shadow: var(--toolbar-cell-box-shadow);
 

package/web-components.html-data/en.json

@@ -343,4 +343,4 @@
       ]
     }
   ]
-}
+}