web components

.changeset/calm-readers-wave.md

@@ -0,0 +1,5 @@
+---
+"@moblin/web": patch
+---
+
+fix extended inheritance

.changeset/cuddly-pears-jam.md

@@ -0,0 +1,5 @@
+---
+"@moblin/web": patch
+---
+
+try fix cases that potentially broke due to lack of intermediate root el in flex

.changeset/fuzzy-trees-glow.md

@@ -0,0 +1,5 @@
+---
+"@moblin/web": patch
+---
+
+try extended style inheritance by applying all: inherit to slot elements

.changeset/hungry-terms-cheer.md

@@ -0,0 +1,5 @@
+---
+"@moblin/web": patch
+---
+
+fix flex by reintroducing intermediate flex root el to normalize flex usages

.changeset/light-trees-cheer.md

@@ -0,0 +1,5 @@
+---
+"@moblin/core": patch
+---
+
+fix pkg.json

.changeset/pre.json

@@ -0,0 +1,21 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@moblin/chakra-ui": "2.0.0",
+    "@moblin/core": "0.0.1",
+    "@moblin/storybook-chakra-ui": "1.0.0",
+    "@moblin/storybook-web": "1.0.0",
+    "@moblin/web": "0.0.1",
+    "@moblin/dev": "1.0.0"
+  },
+  "changesets": [
+    "calm-readers-wave",
+    "cuddly-pears-jam",
+    "fuzzy-trees-glow",
+    "hungry-terms-cheer",
+    "light-trees-cheer",
+    "loud-bugs-decide",
+    "loud-chairs-talk"
+  ]
+}

package.json

@@ -2,7 +2,11 @@
   "name": "moblin",
   "scripts": {
     "version": "changeset version",
-    "release": "turbo build && changeset publish"
+    "release": "turbo build && changeset publish",
+    "build": "turbo run build",
+    "lint": "turbo run lint",
+    "dev": "turbo run dev",
+    "build-storybook": "turbo run build-storybook"
   },
   "dependencies": {
     "@changesets/cli": "^2.25.2",

packages/chakra-ui/package.json

@@ -10,16 +10,18 @@
   "files": [
     "dist"
   ],
-  "sideEffects": false,
+  "sideEffects": true,
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "dev": "../dev/bin.mjs dev",
     "build": "../dev/bin.mjs build",
     "lint": "../dev/bin.mjs lint"
   },
   "dependencies": {
-    "@moblin/core": "workspace:*"
+    "@moblin/core": "workspace:*",
+    "@moblin/web": "workspace:*"
   },
   "devDependencies": {
     "@chakra-ui/react": "^2.8.2",

packages/chakra-ui/src/Box.tsx

@@ -1,46 +1,24 @@
-import { forwardRef } from "@chakra-ui/system";
-import { __DEV__, ContentPosition } from "@moblin/core";
+import { chakra, ChakraComponent } from "@chakra-ui/system";
+import { __DEV__, AlignItems } from "@moblin/core";
+import { Box as BoxElement } from "@moblin/web";
 
-import { Flex, FlexItem } from "./Flex";
 import { ContainerProps } from "./props";
+import { WithClassName } from "./react";
+import { reactify } from "./reactify";
+
+export { BoxElement };
 
 export interface BoxOptions {
-  valign?: ContentPosition;
-  halign?: ContentPosition;
+  valign?: AlignItems;
+  halign?: AlignItems;
 }
 
-export interface BoxProps extends BoxOptions, ContainerProps<"div"> {
-  overflowAnchor?: "auto" | "none";
-}
+export interface BoxProps
+  extends Omit<ContainerProps<"x-box">, "class">,
+    WithClassName {}
 
-export const Box = forwardRef<BoxProps, "div">(
-  (
-    {
-      children,
-      halign = "stretch",
-      valign = "stretch",
-      overflowAnchor,
-      __css,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <Flex
-        {...props}
-        ref={ref}
-        direction="column"
-        justifyContent={valign}
-        alignItems={halign}
-        __css={{
-          ...__css,
-          overflowAnchor,
-        }}
-      >
-        <FlexItem>{children}</FlexItem>
-      </Flex>
-    );
-  }
+export const Box: ChakraComponent<"x-box", BoxProps> = chakra(
+  reactify("x-box", [])
 );
 
 if (__DEV__) {

packages/chakra-ui/src/Flex.tsx

@@ -1,164 +1,101 @@
-import { chakra, forwardRef, SystemProps } from "@chakra-ui/system";
+import {
+  shouldForwardProp,
+  styled,
+  SystemProps,
+  useToken,
+} from "@chakra-ui/system";
 import {
   __DEV__,
   AlignContent,
   AlignItems,
   AlignSelf,
-  FlexDirection,
-  isHorizontal,
-  isVertical,
   JustifyContent,
   unsafeCoerce,
 } from "@moblin/core";
+import { Flex as FlexElement, FlexItem as FlexItemElement } from "@moblin/web";
+import { forwardRef } from "react";
 
 import { ContainerProps, SafeFlexItemProps } from "./props";
-import { WithChildren } from "./react";
+import { WithChildren, WithClassName } from "./react";
+import { reactify } from "./reactify";
+
+export { FlexElement, FlexItemElement };
 
 export interface FlexItemProps extends WithChildren, SafeFlexItemProps {
   alignSelf?: AlignSelf;
   grow?: number;
   shrink?: number;
   basis?: SystemProps["flexBasis"];
-  overflowAnchor?: "auto" | "none";
 }
 
-export const FlexItem = ({
-  alignSelf,
-  grow,
-  shrink = 1,
-  basis = "auto",
-  children,
-  overflowAnchor,
-  ...props
-}: FlexItemProps) => {
-  return (
-    <chakra.div
-      display="flex"
-      overflow="visible"
-      alignItems="stretch"
-      flexDirection={unsafeCoerce("var(--pcss-flex-child-direction)")}
-      flexGrow={
-        grow !== undefined ? grow : unsafeCoerce("var(--pcss-flex-child-grow)")
-      }
-      flexShrink={shrink}
-      flexBasis={basis}
-      justifyContent={alignSelf ?? unsafeCoerce("var(--pcss-flex-align-items)")}
-      minW={shrink > 0 ? "var(--pcss-flex-child-shrink-width)" : "auto"}
-      minH={shrink > 0 ? "var(--pcss-flex-child-shrink-height)" : "auto"}
-      __css={{
-        "& > *": {
-          flexGrow:
-            alignSelf === "stretch"
-              ? 1
-              : alignSelf !== undefined
-              ? 0
-              : unsafeCoerce("var(--pcss-flex-grandchild-grow)"),
-          flexShrink: 1,
-          flexBasis: "auto",
-          minWidth: "var(--pcss-flex-grandchild-shrink-width)",
-          minHeight: "var(--pcss-flex-grandchild-shrink-height)",
-        },
-        overflowAnchor,
-      }}
-      {...props}
-    >
-      {children}
-    </chakra.div>
-  );
-};
+export const FlexItemRaw = reactify("x-flex-item", [
+  ["alignSelf", "align-self"],
+]);
+
+export const FlexItem = forwardRef<FlexItemElement, FlexItemProps>(
+  ({ basis, ...props }, ref) => {
+    const basisToken = useToken("space", unsafeCoerce<string>(basis));
+    return <FlexItemRaw {...props} basis={basisToken} ref={ref} />;
+  }
+);
 
 if (__DEV__) {
   FlexItem.displayName = "FlexItem";
 }
 
 export interface FlexOptions {
-  direction: FlexDirection;
+  direction?: "row" | "column";
   gap?: SystemProps["margin"];
   gapX?: SystemProps["margin"];
   gapY?: SystemProps["margin"];
   justifyContent?: JustifyContent;
   alignItems?: AlignItems;
   alignContent?: AlignContent;
   wrap?: boolean | "reverse";
-  overflowAnchor?: "auto" | "none";
 }
+//
+export interface FlexProps
+  extends FlexOptions,
+    Omit<ContainerProps<"x-flex">, "class">,
+    WithClassName {}
 
-export interface FlexProps extends FlexOptions, ContainerProps<"div"> {}
+const FlexRaw = styled(reactify("x-flex"), {
+  shouldForwardProp: (prop) => prop === "gap" || shouldForwardProp(prop),
+});
 
-export const Flex = forwardRef<FlexProps, "div">(
+export const Flex = forwardRef<FlexElement, FlexProps>(
   (
     {
-      children,
       direction,
-      gap = 0,
+      gap,
       gapX = gap,
       gapY = gap,
-      alignItems = "stretch",
-      justifyContent = "flex-start",
-      alignContent = "flex-start",
-      wrap = false,
-      overflowAnchor,
-      __css,
+      justifyContent,
+      alignItems,
+      alignContent,
+      wrap,
+      className,
       ...props
     },
     ref
   ) => {
+    const [gapXToken, gapYToken] = useToken(
+      "space",
+      unsafeCoerce<string[]>([gapX, gapY])
+    );
+
     return (
-      <chakra.div
+      <FlexRaw
         {...props}
-        display="flex"
-        flexDirection="row"
-        alignItems="stretch"
+        direction={direction}
+        column-gap={gapXToken}
+        row-gap={gapYToken}
+        align-items={alignItems}
+        justify-content={justifyContent}
+        align-content={alignContent}
+        wrap={wrap}
         ref={ref}
-        __css={{
-          ...__css,
-          overflowAnchor,
-        }}
-      >
-        <chakra.div
-          __css={{
-            "--pcss-flex-align-items": alignItems,
-            "--pcss-flex-child-direction": isHorizontal(direction)
-              ? "column"
-              : "row",
-            "--pcss-flex-child-grow": justifyContent === "stretch" ? "1" : "0",
-            "--pcss-flex-child-shrink-width": isHorizontal(direction)
-              ? "0"
-              : "auto",
-            "--pcss-flex-child-shrink-height": isVertical(direction)
-              ? "0"
-              : "auto",
-            "--pcss-flex-grandchild-shrink-width": isHorizontal(direction)
-              ? "auto"
-              : "0",
-            "--pcss-flex-grandchild-shrink-height": isVertical(direction)
-              ? "auto"
-              : "0",
-            "--pcss-flex-grandchild-grow": alignItems === "stretch" ? "1" : "0",
-          }}
-          display="flex"
-          overflow="visible"
-          flexDirection={direction}
-          flexWrap={
-            wrap === true
-              ? "wrap"
-              : wrap === "reverse"
-              ? "wrap-reverse"
-              : "nowrap"
-          }
-          columnGap={gapX}
-          rowGap={gapY}
-          flexGrow={1}
-          flexShrink={1}
-          minW={0}
-          flexBasis="auto"
-          alignItems="stretch"
-          alignContent={alignContent}
-          justifyContent={justifyContent}
-        >
-          {children}
-        </chakra.div>
-      </chakra.div>
+      />
     );
   }
 );

packages/chakra-ui/src/List.tsx

@@ -1,13 +1,13 @@
-import { forwardRef, SystemProps } from "@chakra-ui/system";
+import { forwardRef } from "@chakra-ui/system";
 import { __DEV__ } from "@moblin/core";
-import { Children, isValidElement } from "react";
+import { Children, ComponentProps, isValidElement } from "react";
 
-import { Flex, FlexItem, FlexProps } from "./Flex";
+import { Flex, FlexItem } from "./Flex";
 
-export interface ListProps extends FlexProps {
+export interface ListProps extends ComponentProps<typeof Flex> {
   grow?: number;
   shrink?: number;
-  basis?: SystemProps["flexBasis"];
+  basis?: string;
 }
 
 /**