@spectrum-web-components/story-decorator 0.0.0-20241209155954

package/README.md

@@ -0,0 +1,28 @@
+## Description
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/story-decorator?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/story-decorator)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/story-decorator?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/story-decorator)
+
+```
+yarn add @spectrum-web-components/story-decorator
+```
+
+Import the side effectful registration of `<sp-story-decorator>` via:
+
+```
+import '@spectrum-web-components/story-decorator/sp-story-decorator.js';
+```
+
+When looking to leverage the `StoryDecorator` base class as a type and/or for extension purposes, do so via:
+
+```
+import { StoryDecorator } from '@spectrum-web-components/story-decorator';
+```
+
+## Example
+
+```html
+<sp-story-decorator></sp-story-decorator>
+```

package/decorator.dev.js

@@ -0,0 +1,30 @@
+"use strict";
+import { html, render } from "@spectrum-web-components/base";
+import "./sp-story-decorator.dev.js";
+export const themeStyles = html`
+    <style>
+        #root {
+            padding: 0;
+        }
+        .docs-story sp-story-decorator::part(container) {
+            min-height: auto;
+            position: relative;
+        }
+        .docs-story sp-story-decorator::part(controls) {
+            position: absolute;
+        }
+    </style>
+`;
+export const swcThemeDecorator = (story) => {
+  requestAnimationFrame(() => {
+    const decorator = document.querySelector(
+      "sp-story-decorator"
+    );
+    render(story(), decorator);
+  });
+  return html`
+        ${themeStyles}
+        <sp-story-decorator role="main"></sp-story-decorator>
+    `;
+};
+//# sourceMappingURL=decorator.dev.js.map

package/decorator.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["decorator.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, render, TemplateResult } from '@spectrum-web-components/base';\nimport './sp-story-decorator.dev.js'\n\nexport const themeStyles = html`\n    <style>\n        #root {\n            padding: 0;\n        }\n        .docs-story sp-story-decorator::part(container) {\n            min-height: auto;\n            position: relative;\n        }\n        .docs-story sp-story-decorator::part(controls) {\n            position: absolute;\n        }\n    </style>\n`;\n\nexport const swcThemeDecorator = (story: () => TemplateResult) => {\n    requestAnimationFrame(() => {\n        const decorator = document.querySelector(\n            'sp-story-decorator'\n        ) as HTMLElement;\n        render(story(), decorator);\n    });\n\n    return html`\n        ${themeStyles}\n        <sp-story-decorator role=\"main\"></sp-story-decorator>\n    `;\n};\n"],
+  "mappings": ";AAYA,SAAS,MAAM,cAA8B;AAC7C,OAAO;AAEA,aAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAepB,aAAM,oBAAoB,CAAC,UAAgC;AAC9D,wBAAsB,MAAM;AACxB,UAAM,YAAY,SAAS;AAAA,MACvB;AAAA,IACJ;AACA,WAAO,MAAM,GAAG,SAAS;AAAA,EAC7B,CAAC;AAED,SAAO;AAAA,UACD,WAAW;AAAA;AAAA;AAGrB;",
+  "names": []
+}

package/decorator.js

@@ -0,0 +1,18 @@
+"use strict";import{html as t,render as e}from"@spectrum-web-components/base";import"./sp-story-decorator.js";export const themeStyles=t`
+    <style>
+        #root {
+            padding: 0;
+        }
+        .docs-story sp-story-decorator::part(container) {
+            min-height: auto;
+            position: relative;
+        }
+        .docs-story sp-story-decorator::part(controls) {
+            position: absolute;
+        }
+    </style>
+`,swcThemeDecorator=o=>(requestAnimationFrame(()=>{const r=document.querySelector("sp-story-decorator");e(o(),r)}),t`
+        ${themeStyles}
+        <sp-story-decorator role="main"></sp-story-decorator>
+    `);
+//# sourceMappingURL=decorator.js.map

package/decorator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["decorator.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, render, TemplateResult } from '@spectrum-web-components/base';\nimport './sp-story-decorator.js';\n\nexport const themeStyles = html`\n    <style>\n        #root {\n            padding: 0;\n        }\n        .docs-story sp-story-decorator::part(container) {\n            min-height: auto;\n            position: relative;\n        }\n        .docs-story sp-story-decorator::part(controls) {\n            position: absolute;\n        }\n    </style>\n`;\n\nexport const swcThemeDecorator = (story: () => TemplateResult) => {\n    requestAnimationFrame(() => {\n        const decorator = document.querySelector(\n            'sp-story-decorator'\n        ) as HTMLElement;\n        render(story(), decorator);\n    });\n\n    return html`\n        ${themeStyles}\n        <sp-story-decorator role=\"main\"></sp-story-decorator>\n    `;\n};\n"],
+  "mappings": "aAYA,OAAS,QAAAA,EAAM,UAAAC,MAA8B,gCAC7C,MAAO,0BAEA,aAAM,YAAcD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAed,kBAAqBE,IAC9B,sBAAsB,IAAM,CACxB,MAAMC,EAAY,SAAS,cACvB,oBACJ,EACAF,EAAOC,EAAM,EAAGC,CAAS,CAC7B,CAAC,EAEMH;AAAA,UACD,WAAW;AAAA;",
+  "names": ["html", "render", "story", "decorator"]
+}

package/package.json

@@ -0,0 +1,88 @@
+{
+    "name": "@spectrum-web-components/story-decorator",
+    "version": "0.0.0-20241209155954",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/story-decorator"
+    },
+    "author": "",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "./src/index.js",
+    "module": "./src/index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./package.json": "./package.json",
+        "./src/StoryDecorator.js": {
+            "development": "./src/StoryDecorator.dev.js",
+            "default": "./src/StoryDecorator.js"
+        },
+        "./src/index.js": {
+            "development": "./src/index.dev.js",
+            "default": "./src/index.js"
+        },
+        "./src/locales.js": {
+            "development": "./src/locales.dev.js",
+            "default": "./src/locales.js"
+        },
+        "./src/types.js": {
+            "development": "./src/types.dev.js",
+            "default": "./src/types.js"
+        },
+        "./decorator": "./decorator.js",
+        "./decorator.js": {
+            "development": "./decorator.dev.js",
+            "default": "./decorator.js"
+        },
+        "./sp-story-decorator": "./sp-story-decorator.js",
+        "./sp-story-decorator.js": {
+            "development": "./sp-story-decorator.dev.js",
+            "default": "./sp-story-decorator.js"
+        }
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "0.0.0-20241209155954",
+        "@spectrum-web-components/field-label": "0.0.0-20241209155954",
+        "@spectrum-web-components/menu": "0.0.0-20241209155954",
+        "@spectrum-web-components/overlay": "0.0.0-20241209155954",
+        "@spectrum-web-components/picker": "0.0.0-20241209155954",
+        "@spectrum-web-components/reactive-controllers": "0.0.0-20241209155954",
+        "@spectrum-web-components/switch": "0.0.0-20241209155954",
+        "@spectrum-web-components/theme": "0.0.0-20241209155954"
+    },
+    "types": "./src/index.d.ts",
+    "customElements": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js",
+        "./**/*.dev.js",
+        "./sp-*.ts"
+    ]
+}

package/sp-story-decorator.dev.js

@@ -0,0 +1,4 @@
+"use strict";
+import { StoryDecorator } from "./src/StoryDecorator.dev.js";
+customElements.define("sp-story-decorator", StoryDecorator);
+//# sourceMappingURL=sp-story-decorator.dev.js.map

package/sp-story-decorator.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-story-decorator.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { StoryDecorator } from './src/StoryDecorator.dev.js'\n\ncustomElements.define('sp-story-decorator', StoryDecorator);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-story-decorator': StoryDecorator;\n    }\n}\n"],
+  "mappings": ";AAYA,SAAS,sBAAsB;AAE/B,eAAe,OAAO,sBAAsB,cAAc;",
+  "names": []
+}

package/sp-story-decorator.js

@@ -0,0 +1,2 @@
+"use strict";import{StoryDecorator as o}from"./src/StoryDecorator.js";customElements.define("sp-story-decorator",o);
+//# sourceMappingURL=sp-story-decorator.js.map

package/sp-story-decorator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["sp-story-decorator.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { StoryDecorator } from './src/StoryDecorator.js';\n\ncustomElements.define('sp-story-decorator', StoryDecorator);\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'sp-story-decorator': StoryDecorator;\n    }\n}\n"],
+  "mappings": "aAYA,OAAS,kBAAAA,MAAsB,0BAE/B,eAAe,OAAO,qBAAsBA,CAAc",
+  "names": ["StoryDecorator"]
+}

package/src/StoryDecorator.dev.js

@@ -0,0 +1,403 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import {
+  css,
+  html,
+  nothing,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import {
+  property,
+  queryAsync
+} from "@spectrum-web-components/base/src/decorators.js";
+import { DARK_MODE } from "@spectrum-web-components/reactive-controllers/src/MatchMedia.js";
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import "@spectrum-web-components/theme/src/spectrum-two/themes.js";
+import "@spectrum-web-components/theme/src/express/themes.js";
+import "@spectrum-web-components/field-label/sp-field-label.js";
+import "@spectrum-web-components/picker/sp-picker.js";
+import "@spectrum-web-components/menu/sp-menu.js";
+import "@spectrum-web-components/menu/sp-menu-item.js";
+import "@spectrum-web-components/switch/sp-switch.js";
+import {
+  Theme
+} from "@spectrum-web-components/theme";
+import "./types.dev.js";
+import { Locales } from "./locales.dev.js";
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+export let dir = urlParams.get("sp_dir") || "ltr";
+export let theme = urlParams.get("sp_theme") || "spectrum";
+export let system = urlParams.get("sp_system") || "spectrum";
+export let color = urlParams.get("sp_color") || (matchMedia(DARK_MODE).matches ? "dark" : "light");
+export let scale = urlParams.get("sp_scale") || "medium";
+export let reduceMotion = urlParams.get("sp_reduceMotion") === "true";
+export let screenshot = urlParams.get("sp_screenshot") === "true";
+export let locale = urlParams.get("sp_locale") || "en-US";
+window.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {
+  defaultSystemVariant: system,
+  defaultColor: color,
+  defaultScale: scale,
+  defaultDirection: dir,
+  defaultReduceMotion: reduceMotion,
+  defaultLocale: locale
+};
+const reduceMotionProperties = css`
+    --spectrum-global-animation-duration-100: 0ms;
+    --spectrum-global-animation-duration-200: 0ms;
+    --spectrum-global-animation-duration-300: 0ms;
+    --spectrum-global-animation-duration-400: 0ms;
+    --spectrum-global-animation-duration-500: 0ms;
+    --spectrum-global-animation-duration-600: 0ms;
+    --spectrum-global-animation-duration-700: 0ms;
+    --spectrum-global-animation-duration-800: 0ms;
+    --spectrum-global-animation-duration-900: 0ms;
+    --spectrum-global-animation-duration-1000: 0ms;
+    --spectrum-global-animation-duration-2000: 0ms;
+    --spectrum-global-animation-duration-4000: 0ms;
+    --spectrum-animation-duration-0: 0ms;
+    --spectrum-animation-duration-100: 0ms;
+    --spectrum-animation-duration-200: 0ms;
+    --spectrum-animation-duration-300: 0ms;
+    --spectrum-animation-duration-400: 0ms;
+    --spectrum-animation-duration-500: 0ms;
+    --spectrum-animation-duration-600: 0ms;
+    --spectrum-animation-duration-700: 0ms;
+    --spectrum-animation-duration-800: 0ms;
+    --spectrum-animation-duration-900: 0ms;
+    --spectrum-animation-duration-1000: 0ms;
+    --spectrum-animation-duration-2000: 0ms;
+    --spectrum-animation-duration-4000: 0ms;
+    --spectrum-animation-duration-6000: 0ms;
+    --pending-delay: 0s;
+    --spectrum-coachmark-animation-indicator-ring-duration: 0ms;
+    --swc-test-duration: 1ms;
+`;
+export class StoryDecorator extends SpectrumElement {
+  constructor() {
+    super(...arguments);
+    this.system = window.__swc_hack_knobs__.defaultSystemVariant;
+    this.color = window.__swc_hack_knobs__.defaultColor;
+    this.scale = window.__swc_hack_knobs__.defaultScale;
+    this.direction = window.__swc_hack_knobs__.defaultDirection;
+    this.reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion;
+    this.lang = window.__swc_hack_knobs__.defaultLocale;
+    this.screenshot = screenshot;
+    this.ready = false;
+  }
+  static get styles() {
+    return [
+      css`
+                :host(:focus) {
+                    outline: none;
+                }
+                sp-theme {
+                    overflow-x: hidden;
+                    display: block;
+                    box-sizing: border-box;
+                    width: 100%;
+                    min-height: 100vh;
+                    padding: var(--decorator-padding-100)
+                        var(--decorator-padding-100)
+                        calc(
+                            2 * var(--spectrum-focus-indicator-thickness) +
+                                var(--spectrum-component-height-100)
+                        );
+                    box-sizing: border-box;
+                    background-color: var(--spectrum-background-base-color);
+                    color: var(--spectrum-body-color);
+
+                    --decorator-padding-100: calc(
+                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-100)
+                    );
+                    --decorator-padding-200: calc(
+                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-200)
+                    );
+                    --decorator-padding-400: calc(
+                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-400)
+                    );
+                }
+                :host([screenshot]) sp-theme {
+                    padding: var(--decorator-padding-100);
+                }
+                :host([reduce-motion]) sp-theme {
+                    ${reduceMotionProperties}
+                }
+                .manage-theme {
+                    position: fixed;
+                    bottom: 0;
+                    left: var(--decorator-padding-200);
+                    right: var(--decorator-padding-200);
+                    display: flex;
+                    align-items: flex-start;
+                    justify-content: flex-end;
+                    box-sizing: border-box;
+                    padding-bottom: calc(
+                        2 * var(--spectrum-alias-focus-ring-size)
+                    );
+                }
+                sp-field-label {
+                    padding-inline-end: var(
+                        --spectrum-fieldlabel-side-padding-x,
+                        var(--decorator-padding-100)
+                    );
+                    margin-inline-start: var(--decorator-padding-400);
+                }
+                sp-switch {
+                    margin-inline-start: var(--decorator-padding-400);
+                }
+            `
+    ];
+  }
+  async startManagingContentDirection(el) {
+    (await this.themeRoot).startManagingContentDirection(el);
+  }
+  async stopManagingContentDirection(el) {
+    (await this.themeRoot).stopManagingContentDirection(el);
+  }
+  updateTheme({ target }) {
+    const { id } = target;
+    const { value } = target;
+    const { checked } = target;
+    switch (id) {
+      case "system":
+        this.system = system = window.__swc_hack_knobs__.defaultSystemVariant = value;
+        break;
+      case "color":
+        this.color = color = window.__swc_hack_knobs__.defaultColor = value;
+        break;
+      case "scale":
+        this.scale = scale = window.__swc_hack_knobs__.defaultScale = value;
+        break;
+      case "dir":
+        this.direction = dir = window.__swc_hack_knobs__.defaultDirection = value;
+        document.documentElement.dir = dir;
+        break;
+      case "reduceMotion":
+        this.reduceMotion = reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion = checked;
+        break;
+      case "locale":
+        this.lang = window.__swc_hack_knobs__.defaultLocale = value;
+        break;
+    }
+  }
+  get backgroundStyle() {
+    if (system === "spectrum-two") {
+      return `background-color: var(--spectrum-background-base-color);`;
+    }
+    return `background-color: var(--spectrum-gray-100);`;
+  }
+  handleKeydown(event) {
+    const path = event.composedPath();
+    const hasInput = path.some(
+      (node) => node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement || !!node.isContentEditable
+    );
+    if (hasInput) {
+      event.stopPropagation();
+    }
+  }
+  render() {
+    return html`
+            <sp-theme
+                system=${this.system}
+                color=${this.color}
+                scale=${this.scale}
+                dir=${this.direction}
+                style=${this.backgroundStyle}
+                part="container"
+                @keydown=${this.handleKeydown}
+            >
+                <slot @slotchange=${this.checkReady}></slot>
+                ${this.screenshot ? nothing : this.manageTheme}
+            </sp-theme>
+        `;
+  }
+  async checkReady({
+    target
+  }) {
+    this.ready = false;
+    const assignedElements = target.assignedElements({
+      flatten: true
+    });
+    const descendents = assignedElements;
+    assignedElements.forEach((descendent) => {
+      const gathered = [
+        ...descendent.querySelectorAll("*") || []
+      ];
+      descendents.push(...gathered);
+    });
+    const litElementDescendents = descendents.filter(
+      (el) => el.tagName.search("-") !== -1 && typeof el.updateComplete !== "undefined"
+    );
+    const updates = litElementDescendents.map((el) => el.updateComplete);
+    await Promise.all(updates);
+    new Promise((res) => {
+      setTimeout(res);
+    }).then(async () => {
+      await (document.fonts ? document.fonts.ready : Promise.resolve());
+      setTimeout(() => {
+        this.ready = true;
+      });
+    });
+  }
+  get manageTheme() {
+    return html`
+            <div class="manage-theme" part="controls">
+                ${this.systemControl} ${this.colorControl} ${this.scaleControl}
+                ${this.localeControl} ${this.dirControl}
+                ${this.reduceMotionControl}
+            </div>
+        `;
+  }
+  get systemControl() {
+    return html`
+            <sp-field-label side-aligned="start" for="system">
+                System
+            </sp-field-label>
+            <sp-picker
+                id="system"
+                placement="top"
+                quiet
+                .value=${this.system}
+                @change=${this.updateTheme}
+            >
+                <sp-menu-item value="spectrum">Spectrum</sp-menu-item>
+                <sp-menu-item value="express">Express</sp-menu-item>
+                <sp-menu-item value="spectrum-two">Spectrum 2</sp-menu-item>
+            </sp-picker>
+        `;
+  }
+  get colorControl() {
+    return html`
+            <sp-field-label side-aligned="start" for="color">
+                Theme
+            </sp-field-label>
+            <sp-picker
+                id="color"
+                placement="top"
+                quiet
+                .value=${this.color}
+                @change=${this.updateTheme}
+            >
+                <sp-menu-item value="light">Light</sp-menu-item>
+                <sp-menu-item value="dark">Dark</sp-menu-item>
+            </sp-picker>
+        `;
+  }
+  get scaleControl() {
+    return html`
+            <sp-field-label side-aligned="start" for="scale">
+                Scale
+            </sp-field-label>
+            <sp-picker
+                id="scale"
+                label="Scale"
+                placement="top"
+                quiet
+                .value=${this.scale}
+                @change=${this.updateTheme}
+            >
+                <sp-menu-item value="medium">Medium</sp-menu-item>
+                <sp-menu-item value="large">Large</sp-menu-item>
+            </sp-picker>
+        `;
+  }
+  get localeControl() {
+    const renderLocaleOption = (locale2) => html`
+            <sp-menu-item value=${locale2}>${Locales[locale2]}</sp-menu-item>
+        `;
+    return html`
+            <sp-field-label side-aligned="start" for="locale">
+                Locale
+            </sp-field-label>
+            <sp-picker
+                id="locale"
+                label="Locale"
+                placement="top"
+                quiet
+                .value=${this.lang}
+                @change=${this.updateTheme}
+            >
+                ${Object.keys(Locales).map(renderLocaleOption)}
+            </sp-picker>
+        `;
+  }
+  get dirControl() {
+    return html`
+            <sp-field-label side-aligned="start" for="dir">
+                Direction
+            </sp-field-label>
+            <sp-picker
+                id="dir"
+                label="Direction"
+                placement="top"
+                quiet
+                .value=${this.direction}
+                @change=${this.updateTheme}
+            >
+                <sp-menu-item value="ltr">LTR</sp-menu-item>
+                <sp-menu-item value="rtl">RTL</sp-menu-item>
+            </sp-picker>
+        `;
+  }
+  get reduceMotionControl() {
+    return html`
+            <sp-switch
+                id="reduceMotion"
+                ?checked=${this.reduceMotion}
+                @change=${this.updateTheme}
+            >
+                Reduce Motion
+            </sp-switch>
+        `;
+  }
+  willUpdate(changes) {
+    if (changes.has("screenshot") && this.screenshot) {
+      Theme.registerThemeFragment(
+        "app",
+        "app",
+        css`
+                    :host {
+                        --swc-test-caret-color: transparent;
+                        --swc-test-forced-color-adjust: none;
+                    }
+                `
+      );
+    }
+  }
+}
+__decorateClass([
+  property({ type: String })
+], StoryDecorator.prototype, "system", 2);
+__decorateClass([
+  property({ type: String })
+], StoryDecorator.prototype, "color", 2);
+__decorateClass([
+  property({ type: String })
+], StoryDecorator.prototype, "scale", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "dir" })
+], StoryDecorator.prototype, "direction", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "reduce-motion", reflect: true })
+], StoryDecorator.prototype, "reduceMotion", 2);
+__decorateClass([
+  property({ type: String })
+], StoryDecorator.prototype, "lang", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], StoryDecorator.prototype, "screenshot", 2);
+__decorateClass([
+  queryAsync("sp-theme")
+], StoryDecorator.prototype, "themeRoot", 2);
+//# sourceMappingURL=StoryDecorator.dev.js.map

package/src/StoryDecorator.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["StoryDecorator.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    css,\n    html,\n    nothing,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAsync,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { DARK_MODE } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/theme/src/spectrum-two/themes.js';\nimport '@spectrum-web-components/theme/src/express/themes.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/switch/sp-switch.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport { Switch } from '@spectrum-web-components/switch';\nimport {\n    Color,\n    Scale,\n    SystemVariant,\n    Theme,\n} from '@spectrum-web-components/theme';\nimport './types.dev.js'\nimport { type Locale, Locales } from './locales.dev.js'\n\nconst queryString = window.location.search;\nconst urlParams = new URLSearchParams(queryString);\n\nexport let dir: 'ltr' | 'rtl' =\n    (urlParams.get('sp_dir') as 'ltr' | 'rtl') || 'ltr';\nexport let theme: SystemVariant =\n    (urlParams.get('sp_theme') as SystemVariant) || 'spectrum';\nexport let system: SystemVariant =\n    (urlParams.get('sp_system') as SystemVariant) || 'spectrum';\nexport let color: Color =\n    (urlParams.get('sp_color') as Color) ||\n    (matchMedia(DARK_MODE).matches ? 'dark' : 'light');\nexport let scale: Scale = (urlParams.get('sp_scale') as Scale) || 'medium';\nexport let reduceMotion = urlParams.get('sp_reduceMotion') === 'true';\nexport let screenshot = urlParams.get('sp_screenshot') === 'true';\nexport let locale = urlParams.get('sp_locale') || 'en-US';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n    defaultSystemVariant: system,\n    defaultColor: color,\n    defaultScale: scale,\n    defaultDirection: dir,\n    defaultReduceMotion: reduceMotion,\n    defaultLocale: locale,\n};\n\nconst reduceMotionProperties = css`\n    --spectrum-global-animation-duration-100: 0ms;\n    --spectrum-global-animation-duration-200: 0ms;\n    --spectrum-global-animation-duration-300: 0ms;\n    --spectrum-global-animation-duration-400: 0ms;\n    --spectrum-global-animation-duration-500: 0ms;\n    --spectrum-global-animation-duration-600: 0ms;\n    --spectrum-global-animation-duration-700: 0ms;\n    --spectrum-global-animation-duration-800: 0ms;\n    --spectrum-global-animation-duration-900: 0ms;\n    --spectrum-global-animation-duration-1000: 0ms;\n    --spectrum-global-animation-duration-2000: 0ms;\n    --spectrum-global-animation-duration-4000: 0ms;\n    --spectrum-animation-duration-0: 0ms;\n    --spectrum-animation-duration-100: 0ms;\n    --spectrum-animation-duration-200: 0ms;\n    --spectrum-animation-duration-300: 0ms;\n    --spectrum-animation-duration-400: 0ms;\n    --spectrum-animation-duration-500: 0ms;\n    --spectrum-animation-duration-600: 0ms;\n    --spectrum-animation-duration-700: 0ms;\n    --spectrum-animation-duration-800: 0ms;\n    --spectrum-animation-duration-900: 0ms;\n    --spectrum-animation-duration-1000: 0ms;\n    --spectrum-animation-duration-2000: 0ms;\n    --spectrum-animation-duration-4000: 0ms;\n    --spectrum-animation-duration-6000: 0ms;\n    --pending-delay: 0s;\n    --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n    --swc-test-duration: 1ms;\n`;\n\nexport class StoryDecorator extends SpectrumElement {\n    static override get styles() {\n        return [\n            css`\n                :host(:focus) {\n                    outline: none;\n                }\n                sp-theme {\n                    overflow-x: hidden;\n                    display: block;\n                    box-sizing: border-box;\n                    width: 100%;\n                    min-height: 100vh;\n                    padding: var(--decorator-padding-100)\n                        var(--decorator-padding-100)\n                        calc(\n                            2 * var(--spectrum-focus-indicator-thickness) +\n                                var(--spectrum-component-height-100)\n                        );\n                    box-sizing: border-box;\n                    background-color: var(--spectrum-background-base-color);\n                    color: var(--spectrum-body-color);\n\n                    --decorator-padding-100: calc(\n                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-100)\n                    );\n                    --decorator-padding-200: calc(\n                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-200)\n                    );\n                    --decorator-padding-400: calc(\n                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-400)\n                    );\n                }\n                :host([screenshot]) sp-theme {\n                    padding: var(--decorator-padding-100);\n                }\n                :host([reduce-motion]) sp-theme {\n                    ${reduceMotionProperties}\n                }\n                .manage-theme {\n                    position: fixed;\n                    bottom: 0;\n                    left: var(--decorator-padding-200);\n                    right: var(--decorator-padding-200);\n                    display: flex;\n                    align-items: flex-start;\n                    justify-content: flex-end;\n                    box-sizing: border-box;\n                    padding-bottom: calc(\n                        2 * var(--spectrum-alias-focus-ring-size)\n                    );\n                }\n                sp-field-label {\n                    padding-inline-end: var(\n                        --spectrum-fieldlabel-side-padding-x,\n                        var(--decorator-padding-100)\n                    );\n                    margin-inline-start: var(--decorator-padding-400);\n                }\n                sp-switch {\n                    margin-inline-start: var(--decorator-padding-400);\n                }\n            `,\n        ];\n    }\n\n    @property({ type: String })\n    public system: SystemVariant =\n        window.__swc_hack_knobs__.defaultSystemVariant;\n\n    @property({ type: String })\n    public color: Color = window.__swc_hack_knobs__.defaultColor;\n\n    @property({ type: String })\n    public scale: Scale = window.__swc_hack_knobs__.defaultScale;\n\n    @property({ type: String, reflect: true, attribute: 'dir' })\n    public direction: 'ltr' | 'rtl' =\n        window.__swc_hack_knobs__.defaultDirection;\n\n    @property({ type: Boolean, attribute: 'reduce-motion', reflect: true })\n    public reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion;\n\n    @property({ type: String })\n    public override lang: Locale = window.__swc_hack_knobs__.defaultLocale;\n\n    @property({ type: Boolean, reflect: true })\n    public screenshot = screenshot;\n\n    @queryAsync('sp-theme')\n    private themeRoot!: Theme;\n\n    public ready = false;\n\n    public async startManagingContentDirection(el: HTMLElement): Promise<void> {\n        (await this.themeRoot).startManagingContentDirection(el);\n    }\n\n    public async stopManagingContentDirection(el: HTMLElement): Promise<void> {\n        (await this.themeRoot).stopManagingContentDirection(el);\n    }\n\n    private updateTheme({ target }: Event & { target: Picker | Switch }): void {\n        const { id } = target;\n        const { value } = target as Picker;\n        const { checked } = target as Switch;\n        switch (id) {\n            case 'system':\n                this.system =\n                    system =\n                    window.__swc_hack_knobs__.defaultSystemVariant =\n                        value as SystemVariant;\n                break;\n            case 'color':\n                this.color =\n                    color =\n                    window.__swc_hack_knobs__.defaultColor =\n                        value as Color;\n                break;\n            case 'scale':\n                this.scale =\n                    scale =\n                    window.__swc_hack_knobs__.defaultScale =\n                        value as Scale;\n                break;\n            case 'dir':\n                this.direction =\n                    dir =\n                    window.__swc_hack_knobs__.defaultDirection =\n                        value as 'ltr' | 'rtl';\n                document.documentElement.dir = dir;\n                break;\n            case 'reduceMotion':\n                this.reduceMotion =\n                    reduceMotion =\n                    window.__swc_hack_knobs__.defaultReduceMotion =\n                        checked as boolean;\n                break;\n            case 'locale':\n                this.lang = window.__swc_hack_knobs__.defaultLocale =\n                    value as Locale;\n                break;\n        }\n    }\n\n    public get backgroundStyle() {\n        if (system === 'spectrum-two') {\n            return `background-color: var(--spectrum-background-base-color);`;\n        }\n        return `background-color: var(--spectrum-gray-100);`;\n    }\n\n    protected handleKeydown(event: KeyboardEvent): void {\n        const path = event.composedPath();\n        const hasInput = path.some(\n            (node) =>\n                node instanceof HTMLInputElement ||\n                node instanceof HTMLTextAreaElement ||\n                !!(node as HTMLElement).isContentEditable\n        );\n        if (hasInput) {\n            event.stopPropagation();\n        }\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-theme\n                system=${this.system}\n                color=${this.color}\n                scale=${this.scale}\n                dir=${this.direction}\n                style=${this.backgroundStyle}\n                part=\"container\"\n                @keydown=${this.handleKeydown}\n            >\n                <slot @slotchange=${this.checkReady}></slot>\n                ${this.screenshot ? nothing : this.manageTheme}\n            </sp-theme>\n        `;\n    }\n\n    protected async checkReady({\n        target,\n    }: Event & { target: HTMLSlotElement }): Promise<void> {\n        this.ready = false;\n        const assignedElements = target.assignedElements({\n            flatten: true,\n        }) as SpectrumElement[];\n        const descendents = assignedElements;\n        assignedElements.forEach((descendent) => {\n            const gathered = [\n                ...(descendent.querySelectorAll('*') || []),\n            ] as SpectrumElement[];\n            descendents.push(...gathered);\n        });\n        const litElementDescendents = descendents.filter(\n            (el) =>\n                el.tagName.search('-') !== -1 &&\n                typeof el.updateComplete !== 'undefined'\n        );\n        const updates = litElementDescendents.map((el) => el.updateComplete);\n        await Promise.all(updates);\n        new Promise((res) => {\n            setTimeout(res);\n        }).then(async () => {\n            await (document.fonts ? document.fonts.ready : Promise.resolve());\n            setTimeout(() => {\n                this.ready = true;\n            });\n        });\n    }\n\n    private get manageTheme(): TemplateResult {\n        return html`\n            <div class=\"manage-theme\" part=\"controls\">\n                ${this.systemControl} ${this.colorControl} ${this.scaleControl}\n                ${this.localeControl} ${this.dirControl}\n                ${this.reduceMotionControl}\n            </div>\n        `;\n    }\n\n    private get systemControl(): TemplateResult {\n        return html`\n            <sp-field-label side-aligned=\"start\" for=\"system\">\n                System\n            </sp-field-label>\n            <sp-picker\n                id=\"system\"\n                placement=\"top\"\n                quiet\n                .value=${this.system}\n                @change=${this.updateTheme}\n            >\n                <sp-menu-item value=\"spectrum\">Spectrum</sp-menu-item>\n                <sp-menu-item value=\"express\">Express</sp-menu-item>\n                <sp-menu-item value=\"spectrum-two\">Spectrum 2</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get colorControl(): TemplateResult {\n        return html`\n            <sp-field-label side-aligned=\"start\" for=\"color\">\n                Theme\n            </sp-field-label>\n            <sp-picker\n                id=\"color\"\n                placement=\"top\"\n                quiet\n                .value=${this.color}\n                @change=${this.updateTheme}\n            >\n                <sp-menu-item value=\"light\">Light</sp-menu-item>\n                <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get scaleControl(): TemplateResult {\n        return html`\n            <sp-field-label side-aligned=\"start\" for=\"scale\">\n                Scale\n            </sp-field-label>\n            <sp-picker\n                id=\"scale\"\n                label=\"Scale\"\n                placement=\"top\"\n                quiet\n                .value=${this.scale}\n                @change=${this.updateTheme}\n            >\n                <sp-menu-item value=\"medium\">Medium</sp-menu-item>\n                <sp-menu-item value=\"large\">Large</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get localeControl(): TemplateResult {\n        const renderLocaleOption = (locale: Locale): TemplateResult => html`\n            <sp-menu-item value=${locale}>${Locales[locale]}</sp-menu-item>\n        `;\n\n        return html`\n            <sp-field-label side-aligned=\"start\" for=\"locale\">\n                Locale\n            </sp-field-label>\n            <sp-picker\n                id=\"locale\"\n                label=\"Locale\"\n                placement=\"top\"\n                quiet\n                .value=${this.lang}\n                @change=${this.updateTheme}\n            >\n                ${(Object.keys(Locales) as Locale[]).map(renderLocaleOption)}\n            </sp-picker>\n        `;\n    }\n\n    private get dirControl(): TemplateResult {\n        return html`\n            <sp-field-label side-aligned=\"start\" for=\"dir\">\n                Direction\n            </sp-field-label>\n            <sp-picker\n                id=\"dir\"\n                label=\"Direction\"\n                placement=\"top\"\n                quiet\n                .value=${this.direction}\n                @change=${this.updateTheme}\n            >\n                <sp-menu-item value=\"ltr\">LTR</sp-menu-item>\n                <sp-menu-item value=\"rtl\">RTL</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get reduceMotionControl(): TemplateResult {\n        return html`\n            <sp-switch\n                id=\"reduceMotion\"\n                ?checked=${this.reduceMotion}\n                @change=${this.updateTheme}\n            >\n                Reduce Motion\n            </sp-switch>\n        `;\n    }\n\n    protected override willUpdate(changes: PropertyValues<this>): void {\n        if (changes.has('screenshot') && this.screenshot) {\n            Theme.registerThemeFragment(\n                'app',\n                'app',\n                css`\n                    :host {\n                        --swc-test-caret-color: transparent;\n                        --swc-test-forced-color-adjust: none;\n                    }\n                `\n            );\n        }\n    }\n}\n"],
+  "mappings": ";;;;;;;;;;;AAYA;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAC1B,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAGP;AAAA,EAII;AAAA,OACG;AACP,OAAO;AACP,SAAsB,eAAe;AAErC,MAAM,cAAc,OAAO,SAAS;AACpC,MAAM,YAAY,IAAI,gBAAgB,WAAW;AAE1C,WAAI,MACN,UAAU,IAAI,QAAQ,KAAuB;AAC3C,WAAI,QACN,UAAU,IAAI,UAAU,KAAuB;AAC7C,WAAI,SACN,UAAU,IAAI,WAAW,KAAuB;AAC9C,WAAI,QACN,UAAU,IAAI,UAAU,MACxB,WAAW,SAAS,EAAE,UAAU,SAAS;AACvC,WAAI,QAAgB,UAAU,IAAI,UAAU,KAAe;AAC3D,WAAI,eAAe,UAAU,IAAI,iBAAiB,MAAM;AACxD,WAAI,aAAa,UAAU,IAAI,eAAe,MAAM;AACpD,WAAI,SAAS,UAAU,IAAI,WAAW,KAAK;AAElD,OAAO,qBAAqB,OAAO,sBAAsB;AAAA,EACrD,sBAAsB;AAAA,EACtB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,eAAe;AACnB;AAEA,MAAM,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCxB,aAAM,uBAAuB,gBAAgB;AAAA,EAA7C;AAAA;AAmEH,SAAO,SACH,OAAO,mBAAmB;AAG9B,SAAO,QAAe,OAAO,mBAAmB;AAGhD,SAAO,QAAe,OAAO,mBAAmB;AAGhD,SAAO,YACH,OAAO,mBAAmB;AAG9B,SAAO,eAAe,OAAO,mBAAmB;AAGhD,SAAgB,OAAe,OAAO,mBAAmB;AAGzD,SAAO,aAAa;AAKpB,SAAO,QAAQ;AAAA;AAAA,EA3Ff,WAAoB,SAAS;AACzB,WAAO;AAAA,MACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAkCU,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA0BpC;AAAA,EACJ;AAAA,EA8BA,MAAa,8BAA8B,IAAgC;AACvE,KAAC,MAAM,KAAK,WAAW,8BAA8B,EAAE;AAAA,EAC3D;AAAA,EAEA,MAAa,6BAA6B,IAAgC;AACtE,KAAC,MAAM,KAAK,WAAW,6BAA6B,EAAE;AAAA,EAC1D;AAAA,EAEQ,YAAY,EAAE,OAAO,GAA8C;AACvE,UAAM,EAAE,GAAG,IAAI;AACf,UAAM,EAAE,MAAM,IAAI;AAClB,UAAM,EAAE,QAAQ,IAAI;AACpB,YAAQ,IAAI;AAAA,MACR,KAAK;AACD,aAAK,SACD,SACA,OAAO,mBAAmB,uBACtB;AACR;AAAA,MACJ,KAAK;AACD,aAAK,QACD,QACA,OAAO,mBAAmB,eACtB;AACR;AAAA,MACJ,KAAK;AACD,aAAK,QACD,QACA,OAAO,mBAAmB,eACtB;AACR;AAAA,MACJ,KAAK;AACD,aAAK,YACD,MACA,OAAO,mBAAmB,mBACtB;AACR,iBAAS,gBAAgB,MAAM;AAC/B;AAAA,MACJ,KAAK;AACD,aAAK,eACD,eACA,OAAO,mBAAmB,sBACtB;AACR;AAAA,MACJ,KAAK;AACD,aAAK,OAAO,OAAO,mBAAmB,gBAClC;AACJ;AAAA,IACR;AAAA,EACJ;AAAA,EAEA,IAAW,kBAAkB;AACzB,QAAI,WAAW,gBAAgB;AAC3B,aAAO;AAAA,IACX;AACA,WAAO;AAAA,EACX;AAAA,EAEU,cAAc,OAA4B;AAChD,UAAM,OAAO,MAAM,aAAa;AAChC,UAAM,WAAW,KAAK;AAAA,MAClB,CAAC,SACG,gBAAgB,oBAChB,gBAAgB,uBAChB,CAAC,CAAE,KAAqB;AAAA,IAChC;AACA,QAAI,UAAU;AACV,YAAM,gBAAgB;AAAA,IAC1B;AAAA,EACJ;AAAA,EAEmB,SAAyB;AACxC,WAAO;AAAA;AAAA,yBAEU,KAAK,MAAM;AAAA,wBACZ,KAAK,KAAK;AAAA,wBACV,KAAK,KAAK;AAAA,sBACZ,KAAK,SAAS;AAAA,wBACZ,KAAK,eAAe;AAAA;AAAA,2BAEjB,KAAK,aAAa;AAAA;AAAA,oCAET,KAAK,UAAU;AAAA,kBACjC,KAAK,aAAa,UAAU,KAAK,WAAW;AAAA;AAAA;AAAA,EAG1D;AAAA,EAEA,MAAgB,WAAW;AAAA,IACvB;AAAA,EACJ,GAAuD;AACnD,SAAK,QAAQ;AACb,UAAM,mBAAmB,OAAO,iBAAiB;AAAA,MAC7C,SAAS;AAAA,IACb,CAAC;AACD,UAAM,cAAc;AACpB,qBAAiB,QAAQ,CAAC,eAAe;AACrC,YAAM,WAAW;AAAA,QACb,GAAI,WAAW,iBAAiB,GAAG,KAAK,CAAC;AAAA,MAC7C;AACA,kBAAY,KAAK,GAAG,QAAQ;AAAA,IAChC,CAAC;AACD,UAAM,wBAAwB,YAAY;AAAA,MACtC,CAAC,OACG,GAAG,QAAQ,OAAO,GAAG,MAAM,MAC3B,OAAO,GAAG,mBAAmB;AAAA,IACrC;AACA,UAAM,UAAU,sBAAsB,IAAI,CAAC,OAAO,GAAG,cAAc;AACnE,UAAM,QAAQ,IAAI,OAAO;AACzB,QAAI,QAAQ,CAAC,QAAQ;AACjB,iBAAW,GAAG;AAAA,IAClB,CAAC,EAAE,KAAK,YAAY;AAChB,aAAO,SAAS,QAAQ,SAAS,MAAM,QAAQ,QAAQ,QAAQ;AAC/D,iBAAW,MAAM;AACb,aAAK,QAAQ;AAAA,MACjB,CAAC;AAAA,IACL,CAAC;AAAA,EACL;AAAA,EAEA,IAAY,cAA8B;AACtC,WAAO;AAAA;AAAA,kBAEG,KAAK,aAAa,IAAI,KAAK,YAAY,IAAI,KAAK,YAAY;AAAA,kBAC5D,KAAK,aAAa,IAAI,KAAK,UAAU;AAAA,kBACrC,KAAK,mBAAmB;AAAA;AAAA;AAAA,EAGtC;AAAA,EAEA,IAAY,gBAAgC;AACxC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQU,KAAK,MAAM;AAAA,0BACV,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOtC;AAAA,EAEA,IAAY,eAA+B;AACvC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAQU,KAAK,KAAK;AAAA,0BACT,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMtC;AAAA,EAEA,IAAY,eAA+B;AACvC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBASU,KAAK,KAAK;AAAA,0BACT,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMtC;AAAA,EAEA,IAAY,gBAAgC;AACxC,UAAM,qBAAqB,CAACA,YAAmC;AAAA,kCACrCA,OAAM,IAAI,QAAQA,OAAM,CAAC;AAAA;AAGnD,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBASU,KAAK,IAAI;AAAA,0BACR,KAAK,WAAW;AAAA;AAAA,kBAEvB,OAAO,KAAK,OAAO,EAAe,IAAI,kBAAkB,CAAC;AAAA;AAAA;AAAA,EAGxE;AAAA,EAEA,IAAY,aAA6B;AACrC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBASU,KAAK,SAAS;AAAA,0BACb,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMtC;AAAA,EAEA,IAAY,sBAAsC;AAC9C,WAAO;AAAA;AAAA;AAAA,2BAGY,KAAK,YAAY;AAAA,0BAClB,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAKtC;AAAA,EAEmB,WAAW,SAAqC;AAC/D,QAAI,QAAQ,IAAI,YAAY,KAAK,KAAK,YAAY;AAC9C,YAAM;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMJ;AAAA,IACJ;AAAA,EACJ;AACJ;AAvRW;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlEjB,eAmEF;AAIA;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtEjB,eAuEF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAzEjB,eA0EF;AAGA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,MAAM,CAAC;AAAA,GA5ElD,eA6EF;AAIA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,WAAW,iBAAiB,SAAS,KAAK,CAAC;AAAA,GAhF7D,eAiFF;AAGS;AAAA,EADf,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAnFjB,eAoFO;AAGT;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAtFjC,eAuFF;AAGC;AAAA,EADP,WAAW,UAAU;AAAA,GAzFb,eA0FD;",
+  "names": ["locale"]
+}

package/src/StoryDecorator.js

@@ -0,0 +1,198 @@
+"use strict";var g=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var i=(p,l,e,a)=>{for(var t=a>1?void 0:a?_(l,e):l,s=p.length-1,m;s>=0;s--)(m=p[s])&&(t=(a?m(l,e,t):m(t))||t);return a&&t&&g(l,e,t),t};import{css as d,html as o,nothing as b,SpectrumElement as f}from"@spectrum-web-components/base";import{property as c,queryAsync as w}from"@spectrum-web-components/base/src/decorators.js";import{DARK_MODE as k}from"@spectrum-web-components/reactive-controllers/src/MatchMedia.js";import"@spectrum-web-components/theme/sp-theme.js";import"@spectrum-web-components/theme/src/themes.js";import"@spectrum-web-components/theme/src/spectrum-two/themes.js";import"@spectrum-web-components/theme/src/express/themes.js";import"@spectrum-web-components/field-label/sp-field-label.js";import"@spectrum-web-components/picker/sp-picker.js";import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/menu/sp-menu-item.js";import"@spectrum-web-components/switch/sp-switch.js";import{Theme as v}from"@spectrum-web-components/theme";import"./types.js";import{Locales as u}from"./locales.js";const y=window.location.search,n=new URLSearchParams(y);export let dir=n.get("sp_dir")||"ltr",theme=n.get("sp_theme")||"spectrum",system=n.get("sp_system")||"spectrum",color=n.get("sp_color")||(matchMedia(k).matches?"dark":"light"),scale=n.get("sp_scale")||"medium",reduceMotion=n.get("sp_reduceMotion")==="true",screenshot=n.get("sp_screenshot")==="true",locale=n.get("sp_locale")||"en-US";window.__swc_hack_knobs__=window.__swc_hack_knobs__||{defaultSystemVariant:system,defaultColor:color,defaultScale:scale,defaultDirection:dir,defaultReduceMotion:reduceMotion,defaultLocale:locale};const S=d`
+    --spectrum-global-animation-duration-100: 0ms;
+    --spectrum-global-animation-duration-200: 0ms;
+    --spectrum-global-animation-duration-300: 0ms;
+    --spectrum-global-animation-duration-400: 0ms;
+    --spectrum-global-animation-duration-500: 0ms;
+    --spectrum-global-animation-duration-600: 0ms;
+    --spectrum-global-animation-duration-700: 0ms;
+    --spectrum-global-animation-duration-800: 0ms;
+    --spectrum-global-animation-duration-900: 0ms;
+    --spectrum-global-animation-duration-1000: 0ms;
+    --spectrum-global-animation-duration-2000: 0ms;
+    --spectrum-global-animation-duration-4000: 0ms;
+    --spectrum-animation-duration-0: 0ms;
+    --spectrum-animation-duration-100: 0ms;
+    --spectrum-animation-duration-200: 0ms;
+    --spectrum-animation-duration-300: 0ms;
+    --spectrum-animation-duration-400: 0ms;
+    --spectrum-animation-duration-500: 0ms;
+    --spectrum-animation-duration-600: 0ms;
+    --spectrum-animation-duration-700: 0ms;
+    --spectrum-animation-duration-800: 0ms;
+    --spectrum-animation-duration-900: 0ms;
+    --spectrum-animation-duration-1000: 0ms;
+    --spectrum-animation-duration-2000: 0ms;
+    --spectrum-animation-duration-4000: 0ms;
+    --spectrum-animation-duration-6000: 0ms;
+    --pending-delay: 0s;
+    --spectrum-coachmark-animation-indicator-ring-duration: 0ms;
+    --swc-test-duration: 1ms;
+`;export class StoryDecorator extends f{constructor(){super(...arguments);this.system=window.__swc_hack_knobs__.defaultSystemVariant;this.color=window.__swc_hack_knobs__.defaultColor;this.scale=window.__swc_hack_knobs__.defaultScale;this.direction=window.__swc_hack_knobs__.defaultDirection;this.reduceMotion=window.__swc_hack_knobs__.defaultReduceMotion;this.lang=window.__swc_hack_knobs__.defaultLocale;this.screenshot=screenshot;this.ready=!1}static get styles(){return[d`
+                :host(:focus) {
+                    outline: none;
+                }
+                sp-theme {
+                    overflow-x: hidden;
+                    display: block;
+                    box-sizing: border-box;
+                    width: 100%;
+                    min-height: 100vh;
+                    padding: var(--decorator-padding-100)
+                        var(--decorator-padding-100)
+                        calc(
+                            2 * var(--spectrum-focus-indicator-thickness) +
+                                var(--spectrum-component-height-100)
+                        );
+                    box-sizing: border-box;
+                    background-color: var(--spectrum-background-base-color);
+                    color: var(--spectrum-body-color);
+
+                    --decorator-padding-100: calc(
+                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-100)
+                    );
+                    --decorator-padding-200: calc(
+                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-200)
+                    );
+                    --decorator-padding-400: calc(
+                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-400)
+                    );
+                }
+                :host([screenshot]) sp-theme {
+                    padding: var(--decorator-padding-100);
+                }
+                :host([reduce-motion]) sp-theme {
+                    ${S}
+                }
+                .manage-theme {
+                    position: fixed;
+                    bottom: 0;
+                    left: var(--decorator-padding-200);
+                    right: var(--decorator-padding-200);
+                    display: flex;
+                    align-items: flex-start;
+                    justify-content: flex-end;
+                    box-sizing: border-box;
+                    padding-bottom: calc(
+                        2 * var(--spectrum-alias-focus-ring-size)
+                    );
+                }
+                sp-field-label {
+                    padding-inline-end: var(
+                        --spectrum-fieldlabel-side-padding-x,
+                        var(--decorator-padding-100)
+                    );
+                    margin-inline-start: var(--decorator-padding-400);
+                }
+                sp-switch {
+                    margin-inline-start: var(--decorator-padding-400);
+                }
+            `]}async startManagingContentDirection(e){(await this.themeRoot).startManagingContentDirection(e)}async stopManagingContentDirection(e){(await this.themeRoot).stopManagingContentDirection(e)}updateTheme({target:e}){const{id:a}=e,{value:t}=e,{checked:s}=e;switch(a){case"system":this.system=system=window.__swc_hack_knobs__.defaultSystemVariant=t;break;case"color":this.color=color=window.__swc_hack_knobs__.defaultColor=t;break;case"scale":this.scale=scale=window.__swc_hack_knobs__.defaultScale=t;break;case"dir":this.direction=dir=window.__swc_hack_knobs__.defaultDirection=t,document.documentElement.dir=dir;break;case"reduceMotion":this.reduceMotion=reduceMotion=window.__swc_hack_knobs__.defaultReduceMotion=s;break;case"locale":this.lang=window.__swc_hack_knobs__.defaultLocale=t;break}}get backgroundStyle(){return system==="spectrum-two"?"background-color: var(--spectrum-background-base-color);":"background-color: var(--spectrum-gray-100);"}handleKeydown(e){e.composedPath().some(s=>s instanceof HTMLInputElement||s instanceof HTMLTextAreaElement||!!s.isContentEditable)&&e.stopPropagation()}render(){return o`
+            <sp-theme
+                system=${this.system}
+                color=${this.color}
+                scale=${this.scale}
+                dir=${this.direction}
+                style=${this.backgroundStyle}
+                part="container"
+                @keydown=${this.handleKeydown}
+            >
+                <slot @slotchange=${this.checkReady}></slot>
+                ${this.screenshot?b:this.manageTheme}
+            </sp-theme>
+        `}async checkReady({target:e}){this.ready=!1;const a=e.assignedElements({flatten:!0}),t=a;a.forEach(r=>{const h=[...r.querySelectorAll("*")||[]];t.push(...h)});const m=t.filter(r=>r.tagName.search("-")!==-1&&typeof r.updateComplete!="undefined").map(r=>r.updateComplete);await Promise.all(m),new Promise(r=>{setTimeout(r)}).then(async()=>{await(document.fonts?document.fonts.ready:Promise.resolve()),setTimeout(()=>{this.ready=!0})})}get manageTheme(){return o`
+            <div class="manage-theme" part="controls">
+                ${this.systemControl} ${this.colorControl} ${this.scaleControl}
+                ${this.localeControl} ${this.dirControl}
+                ${this.reduceMotionControl}
+            </div>
+        `}get systemControl(){return o`
+            <sp-field-label side-aligned="start" for="system">
+                System
+            </sp-field-label>
+            <sp-picker
+                id="system"
+                placement="top"
+                quiet
+                .value=${this.system}
+                @change=${this.updateTheme}
+            >
+                <sp-menu-item value="spectrum">Spectrum</sp-menu-item>
+                <sp-menu-item value="express">Express</sp-menu-item>
+                <sp-menu-item value="spectrum-two">Spectrum 2</sp-menu-item>
+            </sp-picker>
+        `}get colorControl(){return o`
+            <sp-field-label side-aligned="start" for="color">
+                Theme
+            </sp-field-label>
+            <sp-picker
+                id="color"
+                placement="top"
+                quiet
+                .value=${this.color}
+                @change=${this.updateTheme}
+            >
+                <sp-menu-item value="light">Light</sp-menu-item>
+                <sp-menu-item value="dark">Dark</sp-menu-item>
+            </sp-picker>
+        `}get scaleControl(){return o`
+            <sp-field-label side-aligned="start" for="scale">
+                Scale
+            </sp-field-label>
+            <sp-picker
+                id="scale"
+                label="Scale"
+                placement="top"
+                quiet
+                .value=${this.scale}
+                @change=${this.updateTheme}
+            >
+                <sp-menu-item value="medium">Medium</sp-menu-item>
+                <sp-menu-item value="large">Large</sp-menu-item>
+            </sp-picker>
+        `}get localeControl(){const e=a=>o`
+            <sp-menu-item value=${a}>${u[a]}</sp-menu-item>
+        `;return o`
+            <sp-field-label side-aligned="start" for="locale">
+                Locale
+            </sp-field-label>
+            <sp-picker
+                id="locale"
+                label="Locale"
+                placement="top"
+                quiet
+                .value=${this.lang}
+                @change=${this.updateTheme}
+            >
+                ${Object.keys(u).map(e)}
+            </sp-picker>
+        `}get dirControl(){return o`
+            <sp-field-label side-aligned="start" for="dir">
+                Direction
+            </sp-field-label>
+            <sp-picker
+                id="dir"
+                label="Direction"
+                placement="top"
+                quiet
+                .value=${this.direction}
+                @change=${this.updateTheme}
+            >
+                <sp-menu-item value="ltr">LTR</sp-menu-item>
+                <sp-menu-item value="rtl">RTL</sp-menu-item>
+            </sp-picker>
+        `}get reduceMotionControl(){return o`
+            <sp-switch
+                id="reduceMotion"
+                ?checked=${this.reduceMotion}
+                @change=${this.updateTheme}
+            >
+                Reduce Motion
+            </sp-switch>
+        `}willUpdate(e){e.has("screenshot")&&this.screenshot&&v.registerThemeFragment("app","app",d`
+                    :host {
+                        --swc-test-caret-color: transparent;
+                        --swc-test-forced-color-adjust: none;
+                    }
+                `)}}i([c({type:String})],StoryDecorator.prototype,"system",2),i([c({type:String})],StoryDecorator.prototype,"color",2),i([c({type:String})],StoryDecorator.prototype,"scale",2),i([c({type:String,reflect:!0,attribute:"dir"})],StoryDecorator.prototype,"direction",2),i([c({type:Boolean,attribute:"reduce-motion",reflect:!0})],StoryDecorator.prototype,"reduceMotion",2),i([c({type:String})],StoryDecorator.prototype,"lang",2),i([c({type:Boolean,reflect:!0})],StoryDecorator.prototype,"screenshot",2),i([w("sp-theme")],StoryDecorator.prototype,"themeRoot",2);
+//# sourceMappingURL=StoryDecorator.js.map

package/src/StoryDecorator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["StoryDecorator.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    css,\n    html,\n    nothing,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAsync,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { DARK_MODE } from '@spectrum-web-components/reactive-controllers/src/MatchMedia.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/themes.js';\nimport '@spectrum-web-components/theme/src/spectrum-two/themes.js';\nimport '@spectrum-web-components/theme/src/express/themes.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/picker/sp-picker.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/switch/sp-switch.js';\nimport { Picker } from '@spectrum-web-components/picker';\nimport { Switch } from '@spectrum-web-components/switch';\nimport {\n    Color,\n    Scale,\n    SystemVariant,\n    Theme,\n} from '@spectrum-web-components/theme';\nimport './types.js';\nimport { type Locale, Locales } from './locales.js';\n\nconst queryString = window.location.search;\nconst urlParams = new URLSearchParams(queryString);\n\nexport let dir: 'ltr' | 'rtl' =\n    (urlParams.get('sp_dir') as 'ltr' | 'rtl') || 'ltr';\nexport let theme: SystemVariant =\n    (urlParams.get('sp_theme') as SystemVariant) || 'spectrum';\nexport let system: SystemVariant =\n    (urlParams.get('sp_system') as SystemVariant) || 'spectrum';\nexport let color: Color =\n    (urlParams.get('sp_color') as Color) ||\n    (matchMedia(DARK_MODE).matches ? 'dark' : 'light');\nexport let scale: Scale = (urlParams.get('sp_scale') as Scale) || 'medium';\nexport let reduceMotion = urlParams.get('sp_reduceMotion') === 'true';\nexport let screenshot = urlParams.get('sp_screenshot') === 'true';\nexport let locale = urlParams.get('sp_locale') || 'en-US';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n    defaultSystemVariant: system,\n    defaultColor: color,\n    defaultScale: scale,\n    defaultDirection: dir,\n    defaultReduceMotion: reduceMotion,\n    defaultLocale: locale,\n};\n\nconst reduceMotionProperties = css`\n    --spectrum-global-animation-duration-100: 0ms;\n    --spectrum-global-animation-duration-200: 0ms;\n    --spectrum-global-animation-duration-300: 0ms;\n    --spectrum-global-animation-duration-400: 0ms;\n    --spectrum-global-animation-duration-500: 0ms;\n    --spectrum-global-animation-duration-600: 0ms;\n    --spectrum-global-animation-duration-700: 0ms;\n    --spectrum-global-animation-duration-800: 0ms;\n    --spectrum-global-animation-duration-900: 0ms;\n    --spectrum-global-animation-duration-1000: 0ms;\n    --spectrum-global-animation-duration-2000: 0ms;\n    --spectrum-global-animation-duration-4000: 0ms;\n    --spectrum-animation-duration-0: 0ms;\n    --spectrum-animation-duration-100: 0ms;\n    --spectrum-animation-duration-200: 0ms;\n    --spectrum-animation-duration-300: 0ms;\n    --spectrum-animation-duration-400: 0ms;\n    --spectrum-animation-duration-500: 0ms;\n    --spectrum-animation-duration-600: 0ms;\n    --spectrum-animation-duration-700: 0ms;\n    --spectrum-animation-duration-800: 0ms;\n    --spectrum-animation-duration-900: 0ms;\n    --spectrum-animation-duration-1000: 0ms;\n    --spectrum-animation-duration-2000: 0ms;\n    --spectrum-animation-duration-4000: 0ms;\n    --spectrum-animation-duration-6000: 0ms;\n    --pending-delay: 0s;\n    --spectrum-coachmark-animation-indicator-ring-duration: 0ms;\n    --swc-test-duration: 1ms;\n`;\n\nexport class StoryDecorator extends SpectrumElement {\n    static override get styles() {\n        return [\n            css`\n                :host(:focus) {\n                    outline: none;\n                }\n                sp-theme {\n                    overflow-x: hidden;\n                    display: block;\n                    box-sizing: border-box;\n                    width: 100%;\n                    min-height: 100vh;\n                    padding: var(--decorator-padding-100)\n                        var(--decorator-padding-100)\n                        calc(\n                            2 * var(--spectrum-focus-indicator-thickness) +\n                                var(--spectrum-component-height-100)\n                        );\n                    box-sizing: border-box;\n                    background-color: var(--spectrum-background-base-color);\n                    color: var(--spectrum-body-color);\n\n                    --decorator-padding-100: calc(\n                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-100)\n                    );\n                    --decorator-padding-200: calc(\n                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-200)\n                    );\n                    --decorator-padding-400: calc(\n                        var(--swc-scale-factor, 1) * var(--spectrum-spacing-400)\n                    );\n                }\n                :host([screenshot]) sp-theme {\n                    padding: var(--decorator-padding-100);\n                }\n                :host([reduce-motion]) sp-theme {\n                    ${reduceMotionProperties}\n                }\n                .manage-theme {\n                    position: fixed;\n                    bottom: 0;\n                    left: var(--decorator-padding-200);\n                    right: var(--decorator-padding-200);\n                    display: flex;\n                    align-items: flex-start;\n                    justify-content: flex-end;\n                    box-sizing: border-box;\n                    padding-bottom: calc(\n                        2 * var(--spectrum-alias-focus-ring-size)\n                    );\n                }\n                sp-field-label {\n                    padding-inline-end: var(\n                        --spectrum-fieldlabel-side-padding-x,\n                        var(--decorator-padding-100)\n                    );\n                    margin-inline-start: var(--decorator-padding-400);\n                }\n                sp-switch {\n                    margin-inline-start: var(--decorator-padding-400);\n                }\n            `,\n        ];\n    }\n\n    @property({ type: String })\n    public system: SystemVariant =\n        window.__swc_hack_knobs__.defaultSystemVariant;\n\n    @property({ type: String })\n    public color: Color = window.__swc_hack_knobs__.defaultColor;\n\n    @property({ type: String })\n    public scale: Scale = window.__swc_hack_knobs__.defaultScale;\n\n    @property({ type: String, reflect: true, attribute: 'dir' })\n    public direction: 'ltr' | 'rtl' =\n        window.__swc_hack_knobs__.defaultDirection;\n\n    @property({ type: Boolean, attribute: 'reduce-motion', reflect: true })\n    public reduceMotion = window.__swc_hack_knobs__.defaultReduceMotion;\n\n    @property({ type: String })\n    public override lang: Locale = window.__swc_hack_knobs__.defaultLocale;\n\n    @property({ type: Boolean, reflect: true })\n    public screenshot = screenshot;\n\n    @queryAsync('sp-theme')\n    private themeRoot!: Theme;\n\n    public ready = false;\n\n    public async startManagingContentDirection(el: HTMLElement): Promise<void> {\n        (await this.themeRoot).startManagingContentDirection(el);\n    }\n\n    public async stopManagingContentDirection(el: HTMLElement): Promise<void> {\n        (await this.themeRoot).stopManagingContentDirection(el);\n    }\n\n    private updateTheme({ target }: Event & { target: Picker | Switch }): void {\n        const { id } = target;\n        const { value } = target as Picker;\n        const { checked } = target as Switch;\n        switch (id) {\n            case 'system':\n                this.system =\n                    system =\n                    window.__swc_hack_knobs__.defaultSystemVariant =\n                        value as SystemVariant;\n                break;\n            case 'color':\n                this.color =\n                    color =\n                    window.__swc_hack_knobs__.defaultColor =\n                        value as Color;\n                break;\n            case 'scale':\n                this.scale =\n                    scale =\n                    window.__swc_hack_knobs__.defaultScale =\n                        value as Scale;\n                break;\n            case 'dir':\n                this.direction =\n                    dir =\n                    window.__swc_hack_knobs__.defaultDirection =\n                        value as 'ltr' | 'rtl';\n                document.documentElement.dir = dir;\n                break;\n            case 'reduceMotion':\n                this.reduceMotion =\n                    reduceMotion =\n                    window.__swc_hack_knobs__.defaultReduceMotion =\n                        checked as boolean;\n                break;\n            case 'locale':\n                this.lang = window.__swc_hack_knobs__.defaultLocale =\n                    value as Locale;\n                break;\n        }\n    }\n\n    public get backgroundStyle() {\n        if (system === 'spectrum-two') {\n            return `background-color: var(--spectrum-background-base-color);`;\n        }\n        return `background-color: var(--spectrum-gray-100);`;\n    }\n\n    protected handleKeydown(event: KeyboardEvent): void {\n        const path = event.composedPath();\n        const hasInput = path.some(\n            (node) =>\n                node instanceof HTMLInputElement ||\n                node instanceof HTMLTextAreaElement ||\n                !!(node as HTMLElement).isContentEditable\n        );\n        if (hasInput) {\n            event.stopPropagation();\n        }\n    }\n\n    protected override render(): TemplateResult {\n        return html`\n            <sp-theme\n                system=${this.system}\n                color=${this.color}\n                scale=${this.scale}\n                dir=${this.direction}\n                style=${this.backgroundStyle}\n                part=\"container\"\n                @keydown=${this.handleKeydown}\n            >\n                <slot @slotchange=${this.checkReady}></slot>\n                ${this.screenshot ? nothing : this.manageTheme}\n            </sp-theme>\n        `;\n    }\n\n    protected async checkReady({\n        target,\n    }: Event & { target: HTMLSlotElement }): Promise<void> {\n        this.ready = false;\n        const assignedElements = target.assignedElements({\n            flatten: true,\n        }) as SpectrumElement[];\n        const descendents = assignedElements;\n        assignedElements.forEach((descendent) => {\n            const gathered = [\n                ...(descendent.querySelectorAll('*') || []),\n            ] as SpectrumElement[];\n            descendents.push(...gathered);\n        });\n        const litElementDescendents = descendents.filter(\n            (el) =>\n                el.tagName.search('-') !== -1 &&\n                typeof el.updateComplete !== 'undefined'\n        );\n        const updates = litElementDescendents.map((el) => el.updateComplete);\n        await Promise.all(updates);\n        new Promise((res) => {\n            setTimeout(res);\n        }).then(async () => {\n            await (document.fonts ? document.fonts.ready : Promise.resolve());\n            setTimeout(() => {\n                this.ready = true;\n            });\n        });\n    }\n\n    private get manageTheme(): TemplateResult {\n        return html`\n            <div class=\"manage-theme\" part=\"controls\">\n                ${this.systemControl} ${this.colorControl} ${this.scaleControl}\n                ${this.localeControl} ${this.dirControl}\n                ${this.reduceMotionControl}\n            </div>\n        `;\n    }\n\n    private get systemControl(): TemplateResult {\n        return html`\n            <sp-field-label side-aligned=\"start\" for=\"system\">\n                System\n            </sp-field-label>\n            <sp-picker\n                id=\"system\"\n                placement=\"top\"\n                quiet\n                .value=${this.system}\n                @change=${this.updateTheme}\n            >\n                <sp-menu-item value=\"spectrum\">Spectrum</sp-menu-item>\n                <sp-menu-item value=\"express\">Express</sp-menu-item>\n                <sp-menu-item value=\"spectrum-two\">Spectrum 2</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get colorControl(): TemplateResult {\n        return html`\n            <sp-field-label side-aligned=\"start\" for=\"color\">\n                Theme\n            </sp-field-label>\n            <sp-picker\n                id=\"color\"\n                placement=\"top\"\n                quiet\n                .value=${this.color}\n                @change=${this.updateTheme}\n            >\n                <sp-menu-item value=\"light\">Light</sp-menu-item>\n                <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get scaleControl(): TemplateResult {\n        return html`\n            <sp-field-label side-aligned=\"start\" for=\"scale\">\n                Scale\n            </sp-field-label>\n            <sp-picker\n                id=\"scale\"\n                label=\"Scale\"\n                placement=\"top\"\n                quiet\n                .value=${this.scale}\n                @change=${this.updateTheme}\n            >\n                <sp-menu-item value=\"medium\">Medium</sp-menu-item>\n                <sp-menu-item value=\"large\">Large</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get localeControl(): TemplateResult {\n        const renderLocaleOption = (locale: Locale): TemplateResult => html`\n            <sp-menu-item value=${locale}>${Locales[locale]}</sp-menu-item>\n        `;\n\n        return html`\n            <sp-field-label side-aligned=\"start\" for=\"locale\">\n                Locale\n            </sp-field-label>\n            <sp-picker\n                id=\"locale\"\n                label=\"Locale\"\n                placement=\"top\"\n                quiet\n                .value=${this.lang}\n                @change=${this.updateTheme}\n            >\n                ${(Object.keys(Locales) as Locale[]).map(renderLocaleOption)}\n            </sp-picker>\n        `;\n    }\n\n    private get dirControl(): TemplateResult {\n        return html`\n            <sp-field-label side-aligned=\"start\" for=\"dir\">\n                Direction\n            </sp-field-label>\n            <sp-picker\n                id=\"dir\"\n                label=\"Direction\"\n                placement=\"top\"\n                quiet\n                .value=${this.direction}\n                @change=${this.updateTheme}\n            >\n                <sp-menu-item value=\"ltr\">LTR</sp-menu-item>\n                <sp-menu-item value=\"rtl\">RTL</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get reduceMotionControl(): TemplateResult {\n        return html`\n            <sp-switch\n                id=\"reduceMotion\"\n                ?checked=${this.reduceMotion}\n                @change=${this.updateTheme}\n            >\n                Reduce Motion\n            </sp-switch>\n        `;\n    }\n\n    protected override willUpdate(changes: PropertyValues<this>): void {\n        if (changes.has('screenshot') && this.screenshot) {\n            Theme.registerThemeFragment(\n                'app',\n                'app',\n                css`\n                    :host {\n                        --swc-test-caret-color: transparent;\n                        --swc-test-forced-color-adjust: none;\n                    }\n                `\n            );\n        }\n    }\n}\n"],
+  "mappings": "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",
+  "names": ["css", "html", "nothing", "SpectrumElement", "property", "queryAsync", "DARK_MODE", "Theme", "Locales", "queryString", "urlParams", "reduceMotionProperties", "el", "target", "id", "value", "checked", "event", "node", "assignedElements", "descendents", "descendent", "gathered", "updates", "res", "renderLocaleOption", "locale", "changes", "__decorateClass"]
+}

package/src/index.dev.js

@@ -0,0 +1,3 @@
+"use strict";
+export * from "./StoryDecorator.dev.js";
+//# sourceMappingURL=index.dev.js.map

package/src/index.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './StoryDecorator.dev.js'\n"],
+  "mappings": ";AAYA,cAAc;",
+  "names": []
+}

package/src/index.js

@@ -0,0 +1,2 @@
+"use strict";export*from"./StoryDecorator.js";
+//# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["index.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport * from './StoryDecorator.js';\n"],
+  "mappings": "aAYA,WAAc",
+  "names": []
+}

package/src/locales.dev.js

@@ -0,0 +1,32 @@
+"use strict";
+export var Locales = /* @__PURE__ */ ((Locales2) => {
+  Locales2["bn-IN"] = "Bengali (India)";
+  Locales2["cy-GB"] = "Welsh (United Kingdom)";
+  Locales2["da-DK"] = "Danish (Denmark)";
+  Locales2["de-DE"] = "German (Germany)";
+  Locales2["el-GR"] = "Greek (Greece)";
+  Locales2["en-US"] = "English (United States)";
+  Locales2["es-ES"] = "Spanish (Spain)";
+  Locales2["fi-FI"] = "Finnish (Finland)";
+  Locales2["fil-PH"] = "Filipino (Philippines)";
+  Locales2["fr-FR"] = "French (France)";
+  Locales2["hi-IN"] = "Hindi (India)";
+  Locales2["id-ID"] = "Indonesian (Indonesia)";
+  Locales2["it-IT"] = "Italian (Italy)";
+  Locales2["ja-JP"] = "Japanese (Japan)";
+  Locales2["ko-KR"] = "Korean (South Korea)";
+  Locales2["ms-MY"] = "Malay (Malaysia)";
+  Locales2["nb-NO"] = "Norwegian (Bokm\xE5l, Norway)";
+  Locales2["nl-NL"] = "Dutch (Netherlands)";
+  Locales2["pl-PL"] = "Polish (Poland)";
+  Locales2["pt-BR"] = "Portuguese (Brazil)";
+  Locales2["ro-RO"] = "Romanian (Romania)";
+  Locales2["sv-SE"] = "Swedish (Sweden)";
+  Locales2["ta-IN"] = "Tamil (India)";
+  Locales2["th-TH"] = "Thai (Thailand)";
+  Locales2["tr-TR"] = "Turkish (Turkey)";
+  Locales2["zh-Hans-CN"] = "Chinese (Simplified, China)";
+  Locales2["zh-Hant-TW"] = "Chinese (Traditional, Taiwan)";
+  return Locales2;
+})(Locales || {});
+//# sourceMappingURL=locales.dev.js.map

package/src/locales.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["locales.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport enum Locales {\n    'bn-IN' = 'Bengali (India)',\n    'cy-GB' = 'Welsh (United Kingdom)',\n    'da-DK' = 'Danish (Denmark)',\n    'de-DE' = 'German (Germany)',\n    'el-GR' = 'Greek (Greece)',\n    'en-US' = 'English (United States)',\n    'es-ES' = 'Spanish (Spain)',\n    'fi-FI' = 'Finnish (Finland)',\n    'fil-PH' = 'Filipino (Philippines)',\n    'fr-FR' = 'French (France)',\n    'hi-IN' = 'Hindi (India)',\n    'id-ID' = 'Indonesian (Indonesia)',\n    'it-IT' = 'Italian (Italy)',\n    'ja-JP' = 'Japanese (Japan)',\n    'ko-KR' = 'Korean (South Korea)',\n    'ms-MY' = 'Malay (Malaysia)',\n    'nb-NO' = 'Norwegian (Bokm\u00E5l, Norway)',\n    'nl-NL' = 'Dutch (Netherlands)',\n    'pl-PL' = 'Polish (Poland)',\n    'pt-BR' = 'Portuguese (Brazil)',\n    'ro-RO' = 'Romanian (Romania)',\n    'sv-SE' = 'Swedish (Sweden)',\n    'ta-IN' = 'Tamil (India)',\n    'th-TH' = 'Thai (Thailand)',\n    'tr-TR' = 'Turkish (Turkey)',\n    'zh-Hans-CN' = 'Chinese (Simplified, China)',\n    'zh-Hant-TW' = 'Chinese (Traditional, Taiwan)',\n}\n\nexport type Locale = keyof typeof Locales;\n"],
+  "mappings": ";AAYO,WAAK,UAAL,kBAAKA,aAAL;AACH,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,YAAW;AACX,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,WAAU;AACV,EAAAA,SAAA,gBAAe;AACf,EAAAA,SAAA,gBAAe;AA3BP,SAAAA;AAAA,GAAA;",
+  "names": ["Locales"]
+}

package/src/locales.js

@@ -0,0 +1,2 @@
+"use strict";export var Locales=(n=>(n["bn-IN"]="Bengali (India)",n["cy-GB"]="Welsh (United Kingdom)",n["da-DK"]="Danish (Denmark)",n["de-DE"]="German (Germany)",n["el-GR"]="Greek (Greece)",n["en-US"]="English (United States)",n["es-ES"]="Spanish (Spain)",n["fi-FI"]="Finnish (Finland)",n["fil-PH"]="Filipino (Philippines)",n["fr-FR"]="French (France)",n["hi-IN"]="Hindi (India)",n["id-ID"]="Indonesian (Indonesia)",n["it-IT"]="Italian (Italy)",n["ja-JP"]="Japanese (Japan)",n["ko-KR"]="Korean (South Korea)",n["ms-MY"]="Malay (Malaysia)",n["nb-NO"]="Norwegian (Bokm\xE5l, Norway)",n["nl-NL"]="Dutch (Netherlands)",n["pl-PL"]="Polish (Poland)",n["pt-BR"]="Portuguese (Brazil)",n["ro-RO"]="Romanian (Romania)",n["sv-SE"]="Swedish (Sweden)",n["ta-IN"]="Tamil (India)",n["th-TH"]="Thai (Thailand)",n["tr-TR"]="Turkish (Turkey)",n["zh-Hans-CN"]="Chinese (Simplified, China)",n["zh-Hant-TW"]="Chinese (Traditional, Taiwan)",n))(Locales||{});
+//# sourceMappingURL=locales.js.map

package/src/locales.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["locales.ts"],
+  "sourcesContent": ["/*\nCopyright 2024 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nexport enum Locales {\n    'bn-IN' = 'Bengali (India)',\n    'cy-GB' = 'Welsh (United Kingdom)',\n    'da-DK' = 'Danish (Denmark)',\n    'de-DE' = 'German (Germany)',\n    'el-GR' = 'Greek (Greece)',\n    'en-US' = 'English (United States)',\n    'es-ES' = 'Spanish (Spain)',\n    'fi-FI' = 'Finnish (Finland)',\n    'fil-PH' = 'Filipino (Philippines)',\n    'fr-FR' = 'French (France)',\n    'hi-IN' = 'Hindi (India)',\n    'id-ID' = 'Indonesian (Indonesia)',\n    'it-IT' = 'Italian (Italy)',\n    'ja-JP' = 'Japanese (Japan)',\n    'ko-KR' = 'Korean (South Korea)',\n    'ms-MY' = 'Malay (Malaysia)',\n    'nb-NO' = 'Norwegian (Bokm\u00E5l, Norway)',\n    'nl-NL' = 'Dutch (Netherlands)',\n    'pl-PL' = 'Polish (Poland)',\n    'pt-BR' = 'Portuguese (Brazil)',\n    'ro-RO' = 'Romanian (Romania)',\n    'sv-SE' = 'Swedish (Sweden)',\n    'ta-IN' = 'Tamil (India)',\n    'th-TH' = 'Thai (Thailand)',\n    'tr-TR' = 'Turkish (Turkey)',\n    'zh-Hans-CN' = 'Chinese (Simplified, China)',\n    'zh-Hant-TW' = 'Chinese (Traditional, Taiwan)',\n}\n\nexport type Locale = keyof typeof Locales;\n"],
+  "mappings": "aAYO,WAAK,SAAAA,IACRA,EAAA,SAAU,kBACVA,EAAA,SAAU,yBACVA,EAAA,SAAU,mBACVA,EAAA,SAAU,mBACVA,EAAA,SAAU,iBACVA,EAAA,SAAU,0BACVA,EAAA,SAAU,kBACVA,EAAA,SAAU,oBACVA,EAAA,UAAW,yBACXA,EAAA,SAAU,kBACVA,EAAA,SAAU,gBACVA,EAAA,SAAU,yBACVA,EAAA,SAAU,kBACVA,EAAA,SAAU,mBACVA,EAAA,SAAU,uBACVA,EAAA,SAAU,mBACVA,EAAA,SAAU,gCACVA,EAAA,SAAU,sBACVA,EAAA,SAAU,kBACVA,EAAA,SAAU,sBACVA,EAAA,SAAU,qBACVA,EAAA,SAAU,mBACVA,EAAA,SAAU,gBACVA,EAAA,SAAU,kBACVA,EAAA,SAAU,mBACVA,EAAA,cAAe,8BACfA,EAAA,cAAe,gCA3BPA,IAAA",
+  "names": ["Locales"]
+}

package/src/types.dev.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.dev.js.map

package/src/types.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/src/types.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.js.map

package/src/types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}