@swiftwc/ui 0.0.0-dev.57 → 0.0.0-dev.58

package/generated/components/color-scheme.d.ts

@@ -0,0 +1,7 @@
+export declare class ColorScheme extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}

package/generated/components/color-scheme.js

@@ -0,0 +1,54 @@
+import { devFlags } from '../internal/utils';
+export class ColorScheme extends HTMLElement {
+    static get observedAttributes() {
+        return ['dark'];
+    }
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ColorScheme.name} ⚡️ connect`);
+        this.hidden = true;
+        this.inert = true;
+    }
+    disconnectedCallback() {
+        if (devFlags.debug)
+            console.debug(`${ColorScheme.name} ⚡️ disconnect`);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (devFlags.debug)
+            console.debug(`${ColorScheme.name} ⚡️ attr-change [${name}]`);
+        // self.CSS.registerProperty({ name: '--canvas', syntax: '<color>', inherits: false, initialValue: 'oklch(100% 0 0deg)' })
+        if (newValue)
+            self.CSS.registerProperty({ name: '--canvas', syntax: '<color>', inherits: false, initialValue: 'oklch(0% 0 0deg)' });
+        // @property --canvas {
+        //   syntax: "<color>";
+        //   initial-value: oklch(100% 0 0deg);
+        //   inherits: false;
+        // }
+        // @media (prefers-color-scheme: dark) {
+        //   @property --canvas {
+        //     syntax: "<color>";
+        //     initial-value: oklch(0% 0 0deg);
+        //     inherits: false;
+        //   }
+        // }
+        // @property --canvastext {
+        //   syntax: "<color>";
+        //   initial-value: oklch(0% 0 0deg);
+        //   inherits: false;
+        // }
+        // @media (prefers-color-scheme: dark) {
+        //   @property --canvastext {
+        //     syntax: "<color>";
+        //     initial-value: oklch(100% 0 0deg);
+        //     inherits: false;
+        //   }
+        // }
+        // if (CSS.supports('interpolate-size', 'allow-keywords')) {
+        // self.CSS.registerProperty({ name: '--background', syntax: '<color>', inherits: false, initialValue: 'oklch(100% 0 0deg)' })
+        if (null !== newValue)
+            self.CSS.registerProperty({ name: '--background', syntax: '<color>', inherits: false, initialValue: 'oklch(0% 0 0deg)' });
+    }
+}

package/generated/components/index.d.ts

@@ -3,6 +3,7 @@ export * from './body-view';
 export * from './bordered-button';
 export * from './bordered-prominent-button';
 export * from './borderless-button';
+export * from './color-scheme';
 export * from './confirmation-dialog';
 export * from './content-unavailable-view';
 export * from './date-picker';

package/generated/components/index.js

@@ -3,6 +3,7 @@ export * from './body-view';
 export * from './bordered-button';
 export * from './bordered-prominent-button';
 export * from './borderless-button';
+export * from './color-scheme';
 export * from './confirmation-dialog';
 export * from './content-unavailable-view';
 export * from './date-picker';

package/generated/css/index.css

@@ -6086,8 +6086,8 @@
   }
   h-stack[distribution=center],
   v-flex-stack[distribution=center] {
-    justify-items: safe center  ;
-    justify-content: safe center  ;
+    justify-items: center  ;
+    justify-content: center  ;
   }
   h-stack[distribution=trailing],
   v-flex-stack[distribution=trailing] {
@@ -6132,6 +6132,16 @@
   v-flex-stack[alignment=space-between] {
     align-content: space-between  ;
   }
+  h-stack[placement=fill],
+  v-flex-stack[placement=fill] {
+    place-items: stretch  ;
+    place-content: stretch  ;
+  }
+  h-stack[placement="leading fill"],
+  v-flex-stack[placement="leading fill"] {
+    place-items: stretch start  ;
+    place-content: stretch start  ;
+  }
   h-stack[placement="fill leading"],
   v-flex-stack[placement="fill leading"] {
     place-items: start stretch  ;
@@ -6184,8 +6194,8 @@
   }
   v-stack[alignment=center],
   h-flex-stack[alignment=center] {
-    justify-items: safe center  ;
-    justify-content: safe center  ;
+    justify-items: center  ;
+    justify-content: center  ;
   }
   v-stack[alignment=trailing],
   h-flex-stack[alignment=trailing] {
@@ -6211,6 +6221,11 @@
     place-items: start stretch  ;
     place-content: start stretch  ;
   }
+  v-stack[placement="fill leading"],
+  h-flex-stack[placement="fill leading"] {
+    place-items: stretch start  ;
+    place-content: stretch start  ;
+  }
   v-stack[placement="space-between fill"],
   h-flex-stack[placement="space-between fill"] {
     align-content: space-between  ;

package/package.json

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

package/scss/utils/_stacks.scss

@@ -13,8 +13,8 @@ $inline-map: (
     (justify-content (stretch)),
   ),
   center: (
-    (justify-items (safe center)),
-    (justify-content (safe center)),
+    (justify-items (center)),
+    (justify-content (center)),
   ),
   trailing: (
     (justify-items (end)),
@@ -56,6 +56,14 @@ $block-map: (
 );
 
 $h-placement-map: (
+  'fill': (
+    (place-items (stretch)),
+    (place-content (stretch)),
+  ),
+  'leading fill': (
+    (place-items (stretch start)),
+    (place-content (stretch start)),
+  ),
   'fill leading': (
     (place-items (start stretch)),
     (place-content (start stretch)),
@@ -76,6 +84,10 @@ $v-placement-map: (
     (place-items (start stretch)),
     (place-content (start stretch)),
   ),
+  'fill leading': (
+    (place-items (stretch start)),
+    (place-content (stretch start)),
+  ),
   'space-between fill': (
     (align-content (space-between)),
     (justify-items (stretch)),

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

@@ -49,6 +49,14 @@
         }
       ]
     },
+    {
+      "name": "color-scheme",
+      "attributes": [
+        {
+          "name": "dark"
+        }
+      ]
+    },
     {
       "name": "confirmation-dialog",
       "attributes": [