reshaped 3.1.5 → 3.1.7

package/dist/styles/align/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./align.module.css";
+const getAlignStyles = (value) => {
+    if (!value)
+        return null;
+    return {
+        classNames: responsiveClassNames(s, "--align", value),
+    };
+};
+export default getAlignStyles;

package/dist/styles/justify/index.d.ts

@@ -0,0 +1,3 @@
+import * as T from "../types";
+declare const getJustifyStyles: T.StaticStyleUtility<T.Justify>;
+export default getJustifyStyles;

package/dist/styles/justify/index.js

@@ -0,0 +1,10 @@
+import { responsiveClassNames } from "../../utilities/helpers.js";
+import s from "./justify.module.css";
+const getJustifyStyles = (value) => {
+    if (!value)
+        return null;
+    return {
+        classNames: responsiveClassNames(s, "--justify", value),
+    };
+};
+export default getJustifyStyles;

package/dist/styles/justify/justify.module.css

@@ -0,0 +1 @@
+.--justify-start{justify-content:flex-start}.--justify-end{justify-content:flex-end}.--justify-center{justify-content:center}.--justify-space-between{justify-content:space-between}@media (--rs-viewport-m ){.--justify-start--m{justify-content:flex-start}.--justify-end--m{justify-content:flex-end}.--justify-center--m{justify-content:center}.--justify-space-between--m{justify-content:space-between}}@media (--rs-viewport-l ){.--justify-start--l{justify-content:flex-start}.--justify-end--l{justify-content:flex-end}.--justify-center--l{justify-content:center}.--justify-space-between--l{justify-content:space-between}}@media (--rs-viewport-xl ){.--justify-start--xl{justify-content:flex-start}.--justify-end--xl{justify-content:flex-end}.--justify-center--xl{justify-content:center}.--justify-space-between--xl{justify-content:space-between}}

package/dist/styles/types.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import * as G from "../types/global";
 export type TextAlign = "start" | "center" | "end";
+export type Justify = "start" | "center" | "end" | "space-between";
+export type Align = "start" | "center" | "end" | "stretch" | "baseline";
 export type Radius = "small" | "medium" | "large" | "circular" | "none";
 export type Position = "relative" | "absolute" | "fixed" | "sticky" | "static";
 export type BorderColor = "neutral" | "neutral-faded" | "critical" | "critical-faded" | "warning" | "warning-faded" | "positive" | "positive-faded" | "primary" | "primary-faded" | "disabled" | "brand" | "transparent";

package/dist/tests/ShadowDOM.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const behavior: () => React.JSX.Element;

package/dist/tests/ShadowDOM.stories.js

@@ -0,0 +1,110 @@
+import React, { useEffect, useState, useRef, forwardRef } from "react";
+import root from "react-shadow";
+import { Example } from "../utilities/storybook/index.js";
+import Autocomplete from "../components/Autocomplete/index.js";
+import View from "../components/View/index.js";
+import DropdownMenu from "../components/DropdownMenu/index.js";
+import Reshaped from "../components/Reshaped/index.js";
+import Select from "../components/Select/index.js";
+import Button from "../components/Button/index.js";
+import Tooltip from "../components/Tooltip/index.js";
+export default {
+    title: "Meta/ShadowDOM",
+};
+const getStylesData = () => {
+    const sourceStylesContainer = document.head;
+    return Array.from(sourceStylesContainer.children).filter((x) => x instanceof HTMLStyleElement);
+};
+// Create a component to render inside the Shadow DOM
+const ShadowDiv = forwardRef((props, ref) => {
+    const shadowRef = useRef(null);
+    // Load styles
+    useEffect(() => {
+        if (!shadowRef?.current)
+            return;
+        // Add styles to the shadow DOM
+        // const shadowEl = shadowRef?.current.shadowRoot;
+        const shadowEl = shadowRef?.current.shadowRoot;
+        if (!shadowEl)
+            return;
+        const sourceStylesContainer = document.head;
+        const observer = new MutationObserver(getStylesData);
+        observer.observe(sourceStylesContainer, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+        let styleBlock = shadowEl.getElementById("custom-outer-style");
+        if (!styleBlock) {
+            styleBlock = document.createElement("span");
+            styleBlock.id = "custom-outer-style";
+            shadowEl.appendChild(styleBlock);
+        }
+        else {
+            styleBlock.innerHTML = "";
+        }
+        styleBlock.append(...getStylesData() // finds all <style> tags containing your web component ID
+            .map((x) => x.cloneNode(true)) // copies styles into the current instance of your web component. You might need to have multiple instances, so all of them need to track the styles.
+        );
+        return () => observer.disconnect();
+    }, []);
+    return (<Reshaped>
+			<root.div className="quote" ref={shadowRef}>
+				<div ref={ref}>
+					{/*
+            Adding padding here since otherwise mouseenter won't trigger on contents
+            when mouse is switching from outside the shadow dom
+        */}
+					<View padding={4}>{props.children}</View>
+				</div>
+			</root.div>
+		</Reshaped>);
+});
+// Main Component
+const Component = () => {
+    const [valueAutoShadow, setValueAutoShadow] = useState("");
+    const [valueDropdownShadow, setValueDropdownShadow] = useState("");
+    const optionsAuto = ["Pizza", "Pie", "Ice-cream"];
+    const optionsDropdown = ["Turtle", "Cat", "Long-necked giraffe"];
+    const handleChangeAutoShadow = (args) => {
+        console.log("Autocomlete shadow value=", args);
+        setValueAutoShadow(args.value);
+    };
+    const handleChangeDropdownShadow = (val) => {
+        console.log("Dropdown shadow value=", val);
+        setValueDropdownShadow(val);
+    };
+    return (<View paddingBottom={50}>
+			<ShadowDiv>
+				<View gap={4} direction="row" wrap={false}>
+					<Autocomplete name="fruit-shadow" placeholder="Pick your food" value={valueAutoShadow} onChange={handleChangeAutoShadow}>
+						{optionsAuto.map((option) => (<Autocomplete.Item key={option} value={option} onClick={() => handleChangeAutoShadow({ value: option, name: "fruit-auto" })}>
+								{option}
+							</Autocomplete.Item>))}
+					</Autocomplete>
+
+					<DropdownMenu>
+						<DropdownMenu.Trigger>
+							{(attributes) => (<Select placeholder="Pick your animal" name="font" inputAttributes={attributes}>
+									{valueDropdownShadow}
+								</Select>)}
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content>
+							{optionsDropdown.map((option) => (<DropdownMenu.Item onClick={() => handleChangeDropdownShadow(option)} key={option}>
+									{option}
+								</DropdownMenu.Item>))}
+						</DropdownMenu.Content>
+					</DropdownMenu>
+
+					<Tooltip text="Tooltip for button">
+						{(attributes) => <Button attributes={attributes}>Hover me</Button>}
+					</Tooltip>
+				</View>
+			</ShadowDiv>
+		</View>);
+};
+export const behavior = () => (<Example>
+		<Example.Item title="base">
+			<Component />
+		</Example.Item>
+	</Example>);

package/dist/themes/_generator/definitions/reshaped.js

@@ -123,7 +123,7 @@ const theme = {
         borderPositiveFaded: { hex: "#d0f3e2", hexDark: "#293b2f" },
         foregroundPositive: { hex: "#0d7544", hexDark: "#18ab66" },
         backgroundNeutral: { hex: "#dfe2ea", hexDark: "#494f60" },
-        backgroundNeutralFaded: { hex: "#f1f2f6", hexDark: "#222835" },
+        backgroundNeutralFaded: { hex: "#f3f3f5", hexDark: "#222835" },
         borderNeutral: { hex: "#0000001f", hexDark: "#ffffff24" },
         borderNeutralFaded: { hex: "#0000001a", hexDark: "#ffffff17" },
         foregroundNeutral: { hex: "#14181f", hexDark: "#eff1f5" },

package/dist/themes/_generator/tests/themes.stories.js

@@ -13,7 +13,7 @@ import Link from "../../../components/Link/index.js";
 import Text from "../../../components/Text/index.js";
 import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
 export default {
-    title: "Themes",
+    title: "Meta/Themes",
     parameters: {
         iframe: { url: "https://reshaped.so/docs/tokens/theming/runtime-theming" },
     },

package/dist/themes/reshaped/theme.css

@@ -1 +1 @@
-[data-rs-theme=reshaped]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#5a58f2;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07)}[data-rs-theme=reshaped][data-rs-color-mode=light]{--rs-color-background-primary:#5a58f2;--rs-color-background-primary-faded:#ecebfe;--rs-color-border-primary:#3b38ed;--rs-color-border-primary-faded:#dedcfb;--rs-color-foreground-primary:#4f4cf0;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fdeded;--rs-color-border-critical:#bf2424;--rs-color-border-critical-faded:#fadbdb;--rs-color-foreground-critical:#c42525;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#faedbb;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#edfdf5;--rs-color-border-positive:#0c6e40;--rs-color-border-positive-faded:#d0f3e2;--rs-color-foreground-positive:#0d7544;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f1f2f6;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#0000001a;--rs-color-foreground-neutral:#14181f;--rs-color-foreground-neutral-faded:#5b667e;--rs-color-background-disabled:#eceef2;--rs-color-background-disabled-faded:#f5f6f9;--rs-color-border-disabled:#dfe2ea;--rs-color-foreground-disabled:#c6ccda;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#f9f9fb;--rs-color-rgb-background-primary:90,88,242;--rs-color-rgb-background-primary-faded:236,235,254;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:253,237,237;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,250,233;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:237,253,245;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:223,226,234;--rs-color-rgb-background-neutral-faded:241,242,246;--rs-color-rgb-background-disabled:236,238,242;--rs-color-rgb-background-disabled-faded:245,246,249;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:249,249,251}[data-rs-theme=reshaped][data-rs-color-mode=dark]{--rs-color-background-primary:#524fea;--rs-color-background-primary-faded:#252544;--rs-color-border-primary:#8c8bf3;--rs-color-border-primary-faded:#323164;--rs-color-foreground-primary:#8b8af7;--rs-color-background-critical:#d02626;--rs-color-background-critical-faded:#3e1f1f;--rs-color-border-critical:#f46969;--rs-color-border-critical-faded:#582929;--rs-color-foreground-critical:#f36a6a;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#3d3628;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#14784a;--rs-color-background-positive-faded:#1f2a23;--rs-color-border-positive:#21ab6b;--rs-color-border-positive-faded:#293b2f;--rs-color-foreground-positive:#18ab66;--rs-color-background-neutral:#494f60;--rs-color-background-neutral-faded:#222835;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff17;--rs-color-foreground-neutral:#eff1f5;--rs-color-foreground-neutral-faded:#c0c6d6;--rs-color-background-disabled:#1e212a;--rs-color-background-disabled-faded:#171921;--rs-color-border-disabled:#262a34;--rs-color-foreground-disabled:#434959;--rs-color-background-elevation-base:#15171e;--rs-color-background-elevation-raised:#191b23;--rs-color-background-elevation-overlay:#1c1f28;--rs-color-background-page:#0f1116;--rs-color-background-page-faded:#111319;--rs-color-rgb-background-primary:82,79,234;--rs-color-rgb-background-primary-faded:37,37,68;--rs-color-rgb-background-critical:208,38,38;--rs-color-rgb-background-critical-faded:62,31,31;--rs-color-rgb-background-warning:241,197,18;--rs-color-rgb-background-warning-faded:44,39,31;--rs-color-rgb-background-positive:20,120,74;--rs-color-rgb-background-positive-faded:31,42,35;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:73,79,96;--rs-color-rgb-background-neutral-faded:34,40,53;--rs-color-rgb-background-disabled:30,33,42;--rs-color-rgb-background-disabled-faded:23,25,33;--rs-color-rgb-background-elevation-base:21,23,30;--rs-color-rgb-background-elevation-raised:25,27,35;--rs-color-rgb-background-elevation-overlay:28,31,40;--rs-color-rgb-background-page:15,17,22;--rs-color-rgb-background-page-faded:17,19,25}
+[data-rs-theme=reshaped]{--rs-font-family-title:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-family-body:Inter,BlinkMacSystemFont,-apple-system,Roboto,Helvetica,Arial,sans-serif;--rs-font-weight-regular:400;--rs-font-weight-medium:500;--rs-font-weight-semibold:600;--rs-font-weight-bold:700;--rs-font-weight-extrabold:800;--rs-font-weight-black:900;--rs-font-size-title-1:6rem;--rs-line-height-title-1:6.25rem;--rs-font-family-title-1:var(--rs-font-family-title);--rs-font-weight-title-1:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-1:normal;--rs-font-size-title-2:5rem;--rs-line-height-title-2:5.25rem;--rs-font-family-title-2:var(--rs-font-family-title);--rs-font-weight-title-2:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-2:normal;--rs-font-size-title-3:4rem;--rs-line-height-title-3:4.25rem;--rs-font-family-title-3:var(--rs-font-family-title);--rs-font-weight-title-3:var(--rs-font-weight-extrabold);--rs-letter-spacing-title-3:normal;--rs-font-size-title-4:3.5rem;--rs-line-height-title-4:3.75rem;--rs-font-family-title-4:var(--rs-font-family-title);--rs-font-weight-title-4:var(--rs-font-weight-bold);--rs-letter-spacing-title-4:normal;--rs-font-size-title-5:3rem;--rs-line-height-title-5:3.25rem;--rs-font-family-title-5:var(--rs-font-family-title);--rs-font-weight-title-5:var(--rs-font-weight-bold);--rs-letter-spacing-title-5:normal;--rs-font-size-title-6:2.25rem;--rs-line-height-title-6:2.5rem;--rs-font-family-title-6:var(--rs-font-family-title);--rs-font-weight-title-6:var(--rs-font-weight-bold);--rs-letter-spacing-title-6:normal;--rs-font-size-featured-1:2rem;--rs-line-height-featured-1:2.5rem;--rs-font-family-featured-1:var(--rs-font-family-body);--rs-letter-spacing-featured-1:normal;--rs-font-size-featured-2:1.5rem;--rs-line-height-featured-2:2rem;--rs-font-family-featured-2:var(--rs-font-family-body);--rs-letter-spacing-featured-2:normal;--rs-font-size-featured-3:1.25rem;--rs-line-height-featured-3:1.75rem;--rs-font-family-featured-3:var(--rs-font-family-body);--rs-letter-spacing-featured-3:normal;--rs-font-size-body-1:1.125rem;--rs-line-height-body-1:1.75rem;--rs-font-family-body-1:var(--rs-font-family-body);--rs-letter-spacing-body-1:normal;--rs-font-size-body-2:1rem;--rs-line-height-body-2:1.5rem;--rs-font-family-body-2:var(--rs-font-family-body);--rs-letter-spacing-body-2:normal;--rs-font-size-body-3:0.875rem;--rs-line-height-body-3:1.25rem;--rs-font-family-body-3:var(--rs-font-family-body);--rs-letter-spacing-body-3:normal;--rs-font-size-caption-1:0.75rem;--rs-line-height-caption-1:1rem;--rs-font-family-caption-1:var(--rs-font-family-body);--rs-letter-spacing-caption-1:normal;--rs-font-size-caption-2:0.625rem;--rs-line-height-caption-2:0.75rem;--rs-font-family-caption-2:var(--rs-font-family-body);--rs-letter-spacing-caption-2:normal;--rs-unit-base:4px;--rs-unit-x1:4px;--rs-unit-x2:8px;--rs-unit-x3:12px;--rs-unit-x4:16px;--rs-unit-x5:20px;--rs-unit-x6:24px;--rs-unit-x7:28px;--rs-unit-x8:32px;--rs-unit-x9:36px;--rs-unit-x10:40px;--rs-radius-small:4px;--rs-radius-medium:8px;--rs-radius-large:12px;--rs-color-brand:#5a58f2;--rs-color-white:#fff;--rs-color-black:#000;--rs-color-on-background-primary:#fff;--rs-color-on-background-critical:#fff;--rs-color-on-background-warning:#000;--rs-color-on-background-positive:#fff;--rs-color-on-brand:#fff;--rs-color-rgb-white:255,255,255;--rs-color-rgb-black:0,0,0;--rs-duration-fast:200ms;--rs-duration-medium:300ms;--rs-duration-slow:400ms;--rs-easing-standard:cubic-bezier(0.4,0,0.2,1);--rs-easing-accelerate:cubic-bezier(0.4,0,1,1);--rs-easing-decelerate:cubic-bezier(0,0,0.2,1);--rs-shadow-raised:0px 1px 5px -4px rgba(0,0,0,.5),0px 4px 8px 0px rgba(0,0,0,.05);--rs-shadow-overlay:0px 5px 10px 0px rgba(0,0,0,.05),0px 15px 25px 0px rgba(0,0,0,.07)}[data-rs-theme=reshaped][data-rs-color-mode=light]{--rs-color-background-primary:#5a58f2;--rs-color-background-primary-faded:#ecebfe;--rs-color-border-primary:#3b38ed;--rs-color-border-primary-faded:#dedcfb;--rs-color-foreground-primary:#4f4cf0;--rs-color-background-critical:#e22c2c;--rs-color-background-critical-faded:#fdeded;--rs-color-border-critical:#bf2424;--rs-color-border-critical-faded:#fadbdb;--rs-color-foreground-critical:#c42525;--rs-color-background-warning:#facc15;--rs-color-background-warning-faded:#fffae9;--rs-color-border-warning:#cfa90f;--rs-color-border-warning-faded:#faedbb;--rs-color-foreground-warning:#7b6305;--rs-color-background-positive:#118850;--rs-color-background-positive-faded:#edfdf5;--rs-color-border-positive:#0c6e40;--rs-color-border-positive-faded:#d0f3e2;--rs-color-foreground-positive:#0d7544;--rs-color-background-neutral:#dfe2ea;--rs-color-background-neutral-faded:#f3f3f5;--rs-color-border-neutral:#0000001f;--rs-color-border-neutral-faded:#0000001a;--rs-color-foreground-neutral:#14181f;--rs-color-foreground-neutral-faded:#5b667e;--rs-color-background-disabled:#eceef2;--rs-color-background-disabled-faded:#f5f6f9;--rs-color-border-disabled:#dfe2ea;--rs-color-foreground-disabled:#c6ccda;--rs-color-background-elevation-base:#fff;--rs-color-background-elevation-raised:#fff;--rs-color-background-elevation-overlay:#fff;--rs-color-background-page:#fff;--rs-color-background-page-faded:#f9f9fb;--rs-color-rgb-background-primary:90,88,242;--rs-color-rgb-background-primary-faded:236,235,254;--rs-color-rgb-background-critical:226,44,44;--rs-color-rgb-background-critical-faded:253,237,237;--rs-color-rgb-background-warning:250,204,21;--rs-color-rgb-background-warning-faded:255,250,233;--rs-color-rgb-background-positive:17,136,80;--rs-color-rgb-background-positive-faded:237,253,245;--rs-color-on-background-neutral:#000;--rs-color-rgb-background-neutral:223,226,234;--rs-color-rgb-background-neutral-faded:243,243,245;--rs-color-rgb-background-disabled:236,238,242;--rs-color-rgb-background-disabled-faded:245,246,249;--rs-color-rgb-background-elevation-base:255,255,255;--rs-color-rgb-background-elevation-raised:255,255,255;--rs-color-rgb-background-elevation-overlay:255,255,255;--rs-color-rgb-background-page:255,255,255;--rs-color-rgb-background-page-faded:249,249,251}[data-rs-theme=reshaped][data-rs-color-mode=dark]{--rs-color-background-primary:#524fea;--rs-color-background-primary-faded:#252544;--rs-color-border-primary:#8c8bf3;--rs-color-border-primary-faded:#323164;--rs-color-foreground-primary:#8b8af7;--rs-color-background-critical:#d02626;--rs-color-background-critical-faded:#3e1f1f;--rs-color-border-critical:#f46969;--rs-color-border-critical-faded:#582929;--rs-color-foreground-critical:#f36a6a;--rs-color-background-warning:#f1c512;--rs-color-background-warning-faded:#2c271f;--rs-color-border-warning:#b4920a;--rs-color-border-warning-faded:#3d3628;--rs-color-foreground-warning:#b4920c;--rs-color-background-positive:#14784a;--rs-color-background-positive-faded:#1f2a23;--rs-color-border-positive:#21ab6b;--rs-color-border-positive-faded:#293b2f;--rs-color-foreground-positive:#18ab66;--rs-color-background-neutral:#494f60;--rs-color-background-neutral-faded:#222835;--rs-color-border-neutral:#ffffff24;--rs-color-border-neutral-faded:#ffffff17;--rs-color-foreground-neutral:#eff1f5;--rs-color-foreground-neutral-faded:#c0c6d6;--rs-color-background-disabled:#1e212a;--rs-color-background-disabled-faded:#171921;--rs-color-border-disabled:#262a34;--rs-color-foreground-disabled:#434959;--rs-color-background-elevation-base:#15171e;--rs-color-background-elevation-raised:#191b23;--rs-color-background-elevation-overlay:#1c1f28;--rs-color-background-page:#0f1116;--rs-color-background-page-faded:#111319;--rs-color-rgb-background-primary:82,79,234;--rs-color-rgb-background-primary-faded:37,37,68;--rs-color-rgb-background-critical:208,38,38;--rs-color-rgb-background-critical-faded:62,31,31;--rs-color-rgb-background-warning:241,197,18;--rs-color-rgb-background-warning-faded:44,39,31;--rs-color-rgb-background-positive:20,120,74;--rs-color-rgb-background-positive-faded:31,42,35;--rs-color-on-background-neutral:#fff;--rs-color-rgb-background-neutral:73,79,96;--rs-color-rgb-background-neutral-faded:34,40,53;--rs-color-rgb-background-disabled:30,33,42;--rs-color-rgb-background-disabled-faded:23,25,33;--rs-color-rgb-background-elevation-base:21,23,30;--rs-color-rgb-background-elevation-raised:25,27,35;--rs-color-rgb-background-elevation-overlay:28,31,40;--rs-color-rgb-background-page:15,17,22;--rs-color-rgb-background-page-faded:17,19,25}

package/dist/utilities/a11y/TrapFocus.d.ts

@@ -7,7 +7,7 @@ type ReleaseOptions = {
 type TrapOptions = {
     onNavigateOutside?: () => void;
     includeTrigger?: boolean;
-    initialFocusEl?: FocusableElement;
+    initialFocusEl?: FocusableElement | null;
     mode?: TrapMode;
 };
 declare class TrapFocus {

package/dist/utilities/a11y/TrapFocus.js

@@ -2,6 +2,7 @@ import Chain from "../Chain.js";
 import * as keys from "../../constants/keys.js";
 import TrapScreenReader from "./TrapScreenReader.js";
 import { getActiveElement, getFocusableElements, focusElement, getFocusData } from "./focus.js";
+import { getShadowRoot } from "../dom/index.js";
 import { checkKeyboardMode } from "./keyboardMode.js";
 class TrapFocus {
     static chain = new Chain();
@@ -34,7 +35,7 @@ class TrapFocus {
         const isDown = navigationMode === "arrows" && key === keys.DOWN;
         const isPrev = (isBackTab && navigationMode === "tabs") || isUp;
         const isNext = (isNextTab && navigationMode === "tabs") || isDown;
-        const isFocusedOnTrigger = getActiveElement() === this.trigger;
+        const isFocusedOnTrigger = getActiveElement(this.root) === this.trigger;
         const focusData = getFocusData({
             root: this.root,
             target: isPrev ? "prev" : "next",
@@ -61,15 +62,23 @@ class TrapFocus {
             return;
         focusElement(focusData.el, { pseudoFocus });
     };
-    addListeners = () => document.addEventListener("keydown", this.handleKeyDown);
-    removeListeners = () => document.removeEventListener("keydown", this.handleKeyDown);
+    addListeners = () => {
+        const shadowRoot = getShadowRoot(this.root);
+        const el = shadowRoot ?? document;
+        el.addEventListener("keydown", this.handleKeyDown);
+    };
+    removeListeners = () => {
+        const shadowRoot = getShadowRoot(this.root);
+        const el = shadowRoot ?? document;
+        el.removeEventListener("keydown", this.handleKeyDown);
+    };
     /**
      * Trap the focus, add observer and keyboard event listeners
      * and create a chain item
      */
     trap = (options = {}) => {
         const { mode = "dialog", includeTrigger, initialFocusEl } = options;
-        const trigger = getActiveElement();
+        const trigger = getActiveElement(this.root);
         const focusable = getFocusableElements(this.root, {
             additionalElement: includeTrigger ? trigger : undefined,
         });
@@ -77,7 +86,7 @@ class TrapFocus {
         this.options = { ...options, pseudoFocus };
         this.trigger = trigger;
         this.mutationObserver = new MutationObserver(() => {
-            const currentActiveElement = getActiveElement();
+            const currentActiveElement = getActiveElement(this.root);
             // Focus stayed inside the wrapper, no need to refocus
             if (this.root.contains(currentActiveElement))
                 return;

package/dist/utilities/a11y/focus.d.ts

@@ -1,6 +1,6 @@
 import type { FocusableElement } from "./types";
 export declare const focusableSelector = "a,button,input:not([type=\"hidden\"]),textarea,select,details,[tabindex]:not([tabindex=\"-1\"])";
-export declare const getActiveElement: () => HTMLButtonElement;
+export declare const getActiveElement: (originEl?: HTMLElement | null) => HTMLButtonElement;
 export declare const focusElement: (el: FocusableElement, options?: {
     pseudoFocus?: boolean;
 }) => void;

package/dist/utilities/a11y/focus.js

@@ -1,11 +1,16 @@
+import { getShadowRoot } from "../dom/index.js";
 const pseudoFocusAttribute = "data-rs-focus";
 export const focusableSelector = 'a,button,input:not([type="hidden"]),textarea,select,details,[tabindex]:not([tabindex="-1"])';
-export const getActiveElement = () => {
-    const pseudoFocusedEl = document.querySelector(`[${pseudoFocusAttribute}]`);
-    return (pseudoFocusedEl || document.activeElement);
+export const getActiveElement = (originEl) => {
+    const shadowRoot = originEl ? getShadowRoot(originEl) : null;
+    const rootEl = shadowRoot ?? document;
+    const pseudoFocusedEl = rootEl.querySelector(`[${pseudoFocusAttribute}]`);
+    return (pseudoFocusedEl || rootEl.activeElement);
 };
 export const focusElement = (el, options) => {
-    document.querySelector(`[${pseudoFocusAttribute}]`)?.removeAttribute(pseudoFocusAttribute);
+    const shadowRoot = getShadowRoot(el);
+    const rootEl = shadowRoot ?? document;
+    rootEl.querySelector(`[${pseudoFocusAttribute}]`)?.removeAttribute(pseudoFocusAttribute);
     if (options?.pseudoFocus) {
         el.setAttribute(pseudoFocusAttribute, "true");
     }
@@ -59,7 +64,7 @@ export const getFocusData = (args) => {
     const { root, target, options } = args;
     const focusable = getFocusableElements(root, { additionalElement: options?.additionalElement });
     const focusableLimit = focusable.length - 1;
-    const currentElement = getActiveElement();
+    const currentElement = getActiveElement(root);
     const currentIndex = focusable.indexOf(currentElement);
     const positions = {
         next: currentIndex + 1,

package/dist/utilities/a11y/index.d.ts

@@ -0,0 +1,4 @@
+export { focusableSelector, getActiveElement, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus";
+export { enableKeyboardMode, disableKeyboardMode, checkKeyboardMode } from "./keyboardMode";
+export { default as TrapFocus } from "./TrapFocus";
+export type { TrapMode, FocusableElement } from "./types";

package/dist/utilities/a11y/index.js

@@ -0,0 +1,3 @@
+export { focusableSelector, getActiveElement, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus.js";
+export { enableKeyboardMode, disableKeyboardMode, checkKeyboardMode } from "./keyboardMode.js";
+export { default as TrapFocus } from "./TrapFocus.js";

package/dist/utilities/dom/flyout.d.ts

@@ -0,0 +1 @@
+export declare const getClosestFlyoutTarget: (el: HTMLElement | null, iteration?: number) => HTMLElement;

package/dist/utilities/dom/flyout.js

@@ -0,0 +1,19 @@
+import { getShadowRoot } from "./shadowDom.js";
+export const getClosestFlyoutTarget = (el, iteration = 0) => {
+    const style = el && window.getComputedStyle(el);
+    const overflowY = style?.overflowY;
+    const position = style?.position;
+    const isScrollable = overflowY?.includes("scroll");
+    const isFixed = position === "fixed" || position === "sticky";
+    // Only check shadow root on the first run
+    if (iteration === 0) {
+        const shadowRoot = getShadowRoot(el);
+        if (shadowRoot?.firstElementChild)
+            return shadowRoot.firstElementChild;
+    }
+    if (el === document.body || !el)
+        return document.body;
+    if ((isScrollable && el.scrollHeight > el.clientHeight) || isFixed)
+        return el;
+    return getClosestFlyoutTarget(el.parentElement, iteration + 1);
+};

package/dist/utilities/dom/index.d.ts

@@ -0,0 +1,3 @@
+export { getClosestFlyoutTarget } from "./flyout";
+export { getShadowRoot } from "./shadowDom";
+export { enableUserSelect, disableUserSelect } from "./userSelect";

package/dist/utilities/dom/index.js

@@ -0,0 +1,3 @@
+export { getClosestFlyoutTarget } from "./flyout.js";
+export { getShadowRoot } from "./shadowDom.js";
+export { enableUserSelect, disableUserSelect } from "./userSelect.js";

package/dist/utilities/dom/shadowDom.d.ts

@@ -0,0 +1 @@
+export declare const getShadowRoot: (el: HTMLElement | null) => ShadowRoot | null;

package/dist/utilities/dom/shadowDom.js

@@ -0,0 +1,4 @@
+export const getShadowRoot = (el) => {
+    const rootNode = el?.getRootNode();
+    return rootNode instanceof ShadowRoot ? rootNode : null;
+};

package/dist/utilities/dom/userSelect.d.ts

@@ -0,0 +1,2 @@
+export declare const disableUserSelect: () => void;
+export declare const enableUserSelect: () => void;

package/dist/utilities/dom/userSelect.js

@@ -0,0 +1,6 @@
+export const disableUserSelect = () => {
+    document.body.style.userSelect = "none";
+};
+export const enableUserSelect = () => {
+    document.body.style.userSelect = "";
+};

package/dist/utilities/platform.d.ts

@@ -0,0 +1 @@
+export declare const isIOS: () => boolean;

package/dist/utilities/platform.js

@@ -0,0 +1,15 @@
+const testPlatform = (re) => {
+    // Using experimentral and deprecated features here since that's the only way to detect platform consistently
+    const platform = 
+    // @ts-ignore
+    window.navigator.userAgentData?.platform || window.navigator.platform;
+    return typeof window !== "undefined" ? re.test(platform) : false;
+};
+const isIPhone = () => testPlatform(/^iPhone/i);
+const isMac = () => testPlatform(/^Mac/i);
+const isIPad = () => {
+    return (testPlatform(/^iPad/i) ||
+        // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+        (isMac() && navigator.maxTouchPoints > 1));
+};
+export const isIOS = () => isIPhone() || isIPad();

package/dist/utilities/scroll/disable.d.ts

@@ -0,0 +1,7 @@
+export declare const preventDefault: (e: Event) => void;
+/**
+ * Prevent scrolling events for the cases when dragging elements
+ * without locking the page with overflow
+ */
+export declare const disableScroll: () => void;
+export declare const enableScroll: () => void;

package/dist/utilities/scroll/disable.js

@@ -0,0 +1,13 @@
+export const preventDefault = (e) => e.preventDefault();
+/**
+ * Prevent scrolling events for the cases when dragging elements
+ * without locking the page with overflow
+ */
+export const disableScroll = () => {
+    window.addEventListener("wheel", preventDefault, { passive: false });
+    window.addEventListener("touchmove", preventDefault, { passive: false });
+};
+export const enableScroll = () => {
+    window.removeEventListener("wheel", preventDefault);
+    window.removeEventListener("touchmove", preventDefault);
+};

package/dist/utilities/scroll/helpers.d.ts

@@ -0,0 +1 @@
+export declare const getScrollbarWidth: () => number;

package/dist/utilities/scroll/helpers.js

@@ -0,0 +1,17 @@
+export const getScrollbarWidth = (() => {
+    let scrollbarWidth;
+    return () => {
+        if (scrollbarWidth)
+            return scrollbarWidth;
+        const scrollDiv = document.createElement("div");
+        scrollDiv.style.position = "absolute";
+        scrollDiv.style.top = "-9999px";
+        scrollDiv.style.width = "50px";
+        scrollDiv.style.height = "50px";
+        scrollDiv.style.overflow = "scroll";
+        document.body.appendChild(scrollDiv);
+        scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
+        document.body.removeChild(scrollDiv);
+        return scrollbarWidth;
+    };
+})();

package/dist/utilities/scroll/index.d.ts

@@ -0,0 +1,2 @@
+export { disableScroll, enableScroll } from "./disable";
+export { lockScroll, unlockScroll } from "./lock";

package/dist/utilities/scroll/index.js

@@ -0,0 +1,2 @@
+export { disableScroll, enableScroll } from "./disable.js";
+export { lockScroll, unlockScroll } from "./lock.js";

package/dist/utilities/scroll/lock.d.ts

@@ -0,0 +1,2 @@
+export declare const lockScroll: (cb?: () => void) => void;
+export declare const unlockScroll: (cb?: () => void) => void;

package/dist/utilities/scroll/lock.js

@@ -0,0 +1,24 @@
+import { isIOS } from "../platform.js";
+import lockSafariScroll from "./lockSafari.js";
+import lockStandardScroll from "./lockStandard.js";
+let lockedCount = 0;
+let reset = () => { };
+export const lockScroll = (cb) => {
+    lockedCount += 1;
+    if (lockedCount > 1)
+        return;
+    if (isIOS()) {
+        reset = lockSafariScroll();
+    }
+    else {
+        reset = lockStandardScroll();
+    }
+    cb?.();
+};
+export const unlockScroll = (cb) => {
+    lockedCount -= 1;
+    if (lockedCount > 0)
+        return;
+    reset();
+    cb?.();
+};

package/dist/utilities/scroll/lockSafari.d.ts

@@ -0,0 +1,2 @@
+declare const lockSafariScroll: () => () => void;
+export default lockSafariScroll;

package/dist/utilities/scroll/lockSafari.js

@@ -0,0 +1,31 @@
+let originalStyles = {};
+const lockSafariScroll = () => {
+    const bodyStyle = document.body.style;
+    const offsetLeft = window.visualViewport?.offsetLeft || 0;
+    const offsetTop = window.visualViewport?.offsetTop || 0;
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    console.log(scrollY);
+    originalStyles = {
+        position: bodyStyle.position,
+        top: bodyStyle.top,
+        left: bodyStyle.left,
+        right: bodyStyle.right,
+        overflowX: bodyStyle.overflowX,
+        overflowY: bodyStyle.overflowY,
+    };
+    Object.assign(bodyStyle, {
+        position: "fixed",
+        top: `${-(scrollY - Math.floor(offsetTop))}px`,
+        left: `${-(scrollX - Math.floor(offsetLeft))}px`,
+        right: "0",
+        overflow: "hidden",
+    });
+    return () => {
+        Object.assign(bodyStyle, originalStyles);
+        window.scrollTo({ top: scrollY, left: scrollX, behavior: "instant" });
+        // window.scrollTo(scrollX, scrollY);
+        originalStyles = {};
+    };
+};
+export default lockSafariScroll;

package/dist/utilities/scroll/lockStandard.d.ts

@@ -0,0 +1,2 @@
+declare const lockStandardScroll: () => () => void;
+export default lockStandardScroll;

package/dist/utilities/scroll/lockStandard.js

@@ -0,0 +1,19 @@
+import { getScrollbarWidth } from "./helpers.js";
+let originalBodyStyles = {};
+const lockStandardScroll = () => {
+    const { body } = document;
+    const rect = body.getBoundingClientRect();
+    const isOverflowing = rect.left + rect.right < window.innerWidth;
+    originalBodyStyles.overflow = body.style.overflow;
+    body.style.overflow = "hidden";
+    if (isOverflowing) {
+        const scrollBarWidth = getScrollbarWidth();
+        originalBodyStyles.paddingRight = body.style.paddingRight;
+        body.style.paddingRight = `${scrollBarWidth}px`;
+    }
+    return () => {
+        Object.assign(body.style, originalBodyStyles);
+        originalBodyStyles = {};
+    };
+};
+export default lockStandardScroll;