@spectrum-web-components/story-decorator 0.5.3-express.9 → 0.5.3

package/custom-elements.json

@@ -79,13 +79,6 @@
             "text": "'ltr' | 'rtl'"
           }
         },
-        {
-          "kind": "variable",
-          "name": "theme",
-          "type": {
-            "text": "Flavor"
-          }
-        },
         {
           "kind": "variable",
           "name": "color",
@@ -109,15 +102,6 @@
           "description": "",
           "name": "StoryDecorator",
           "members": [
-            {
-              "kind": "field",
-              "name": "theme",
-              "type": {
-                "text": "Flavor"
-              },
-              "privacy": "public",
-              "attribute": "theme"
-            },
             {
               "kind": "field",
               "name": "color",
@@ -143,7 +127,8 @@
                 "text": "'ltr' | 'rtl'"
               },
               "privacy": "public",
-              "attribute": "direction"
+              "attribute": "dir",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -165,7 +150,7 @@
             },
             {
               "kind": "field",
-              "name": "themeRoot",
+              "name": "theme",
               "type": {
                 "text": "Theme"
               },
@@ -252,22 +237,6 @@
                 }
               ]
             },
-            {
-              "kind": "field",
-              "name": "themedColor",
-              "type": {
-                "text": "Color"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "themedScale",
-              "type": {
-                "text": "Scale"
-              },
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "checkReady",
@@ -294,14 +263,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "themeControl",
-              "type": {
-                "text": "TemplateResult"
-              },
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "colorControl",
@@ -336,13 +297,6 @@
             }
           ],
           "attributes": [
-            {
-              "name": "theme",
-              "type": {
-                "text": "Flavor"
-              },
-              "fieldName": "theme"
-            },
             {
               "name": "color",
               "type": {
@@ -358,7 +312,7 @@
               "fieldName": "scale"
             },
             {
-              "name": "direction",
+              "name": "dir",
               "type": {
                 "text": "'ltr' | 'rtl'"
               },
@@ -394,14 +348,6 @@
             "module": "src/StoryDecorator.ts"
           }
         },
-        {
-          "kind": "js",
-          "name": "theme",
-          "declaration": {
-            "name": "theme",
-            "module": "src/StoryDecorator.ts"
-          }
-        },
         {
           "kind": "js",
           "name": "color",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@spectrum-web-components/story-decorator",
-    "version": "0.5.3-express.9+abfee7409",
+    "version": "0.5.3",
     "publishConfig": {
         "access": "public"
     },
@@ -45,13 +45,13 @@
         "lit-html"
     ],
     "dependencies": {
-        "@spectrum-web-components/base": "^0.5.2",
-        "@spectrum-web-components/field-label": "^0.7.5-express.9+abfee7409",
-        "@spectrum-web-components/menu": "^0.12.2-express.9+abfee7409",
-        "@spectrum-web-components/overlay": "^0.14.2-express.9+abfee7409",
-        "@spectrum-web-components/picker": "^0.10.3-express.9+abfee7409",
-        "@spectrum-web-components/switch": "^0.9.5-express.9+abfee7409",
-        "@spectrum-web-components/theme": "^0.9.5-express.9+abfee7409",
+        "@spectrum-web-components/base": "^0.5.3",
+        "@spectrum-web-components/field-label": "^0.7.5",
+        "@spectrum-web-components/menu": "^0.12.2",
+        "@spectrum-web-components/overlay": "^0.15.0",
+        "@spectrum-web-components/picker": "^0.10.3",
+        "@spectrum-web-components/switch": "^0.9.5",
+        "@spectrum-web-components/theme": "^0.10.0",
         "tslib": "^2.0.0"
     },
     "types": "./src/index.d.ts",
@@ -60,5 +60,5 @@
         "./sp-*.js",
         "./sp-*.ts"
     ],
-    "gitHead": "abfee740957976448a3e4cf90df17d6165f857d6"
+    "gitHead": "57aba8030b6af96af4015a0aa830e342a17dc219"
 }

package/src/StoryDecorator.d.ts

@@ -1,41 +1,35 @@
 import { SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
 import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/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 { Color, Flavor, Scale } from '@spectrum-web-components/theme';
+import { Color, Scale } from '@spectrum-web-components/theme';
 import './types.js';
 export declare let dir: 'ltr' | 'rtl';
-export declare let theme: Flavor;
 export declare let color: Color;
 export declare let scale: Scale;
 export declare let reduceMotion: boolean;
 export declare class StoryDecorator extends SpectrumElement {
-    static get styles(): import("@spectrum-web-components/base").CSSResult[];
-    theme: Flavor;
+    static styles: import("@spectrum-web-components/base").CSSResult[];
     color: Color;
     scale: Scale;
     direction: 'ltr' | 'rtl';
     reduceMotion: boolean;
     screenshot: boolean;
-    private themeRoot;
+    private theme;
     ready: boolean;
     startManagingContentDirection(el: HTMLElement): Promise<void>;
     stopManagingContentDirection(el: HTMLElement): Promise<void>;
     private updateTheme;
     protected handleKeydown(event: KeyboardEvent): void;
-    private get themedColor();
-    private get themedScale();
     protected render(): TemplateResult;
     protected checkReady({ target, }: Event & {
         target: HTMLSlotElement;
     }): Promise<void>;
     private get manageTheme();
-    private get themeControl();
     private get colorControl();
     private get scaleControl();
     private get dirControl();

package/src/StoryDecorator.js

@@ -15,7 +15,6 @@ import { property, queryAsync, } from '@spectrum-web-components/base/src/decorat
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/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';
@@ -26,12 +25,10 @@ import './types.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') || 'classic';
 export let color = urlParams.get('sp_color') || 'light';
 export let scale = urlParams.get('sp_scale') || 'medium';
 export let reduceMotion = urlParams.get('sp_reduceMotion') === 'true';
 window.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {
-    defaultFlavor: theme,
     defaultColor: color,
     defaultScale: scale,
     defaultDirection: dir,
@@ -54,7 +51,7 @@ const reduceMotionProperties = css `
     --swc-test-duration: 1ms;
 `;
 ActiveOverlay.prototype.renderTheme = function (content) {
-    const { color, scale, theme, lang } = this.theme;
+    const { color, scale, lang } = this.theme;
     return html `
         ${window.__swc_hack_knobs__.defaultReduceMotion
         ? html `
@@ -66,7 +63,6 @@ ActiveOverlay.prototype.renderTheme = function (content) {
               `
         : html ``}
         <sp-theme
-            theme=${ifDefined(theme)}
             color=${ifDefined(color)}
             scale=${ifDefined(scale)}
             lang=${ifDefined(lang)}
@@ -79,7 +75,6 @@ ActiveOverlay.prototype.renderTheme = function (content) {
 export class StoryDecorator extends SpectrumElement {
     constructor() {
         super(...arguments);
-        this.theme = window.__swc_hack_knobs__.defaultFlavor;
         this.color = window.__swc_hack_knobs__.defaultColor;
         this.scale = window.__swc_hack_knobs__.defaultScale;
         this.direction = window.__swc_hack_knobs__.defaultDirection;
@@ -87,97 +82,17 @@ export class StoryDecorator extends SpectrumElement {
         this.screenshot = false;
         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(--spectrum-global-dimension-size-100)
-                        var(--spectrum-global-dimension-size-100)
-                        calc(
-                            2 * var(--spectrum-alias-focus-ring-size) +
-                                var(--spectrum-alias-item-height-m)
-                        );
-                    box-sizing: border-box;
-                    background-color: var(--spectrum-global-color-gray-100);
-                    color: var(
-                        --spectrum-body-text-color,
-                        var(--spectrum-alias-text-color)
-                    );
-                }
-                :host([screenshot]) sp-theme {
-                    padding: var(--spectrum-global-dimension-size-100);
-                }
-                :host([reduce-motion]) sp-theme {
-                    ${reduceMotionProperties}
-                }
-                .manage-theme {
-                    position: fixed;
-                    bottom: 0;
-                    left: var(--spectrum-global-dimension-size-200);
-                    right: var(--spectrum-global-dimension-size-200);
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-end;
-                    box-sizing: border-box;
-                    background-color: var(--spectrum-global-color-gray-100);
-                    padding-bottom: calc(
-                        2 * var(--spectrum-alias-focus-ring-size)
-                    );
-                }
-                [dir='ltr'] sp-field-label {
-                    padding-left: 0;
-                    padding-right: var(
-                        --spectrum-fieldlabel-side-padding-x,
-                        var(--spectrum-global-dimension-size-100)
-                    );
-                    margin-left: var(--spectrum-global-dimension-size-400);
-                }
-                [dir='ltr'] sp-switch {
-                    margin-left: var(--spectrum-global-dimension-size-400);
-                    margin-right: 0;
-                    padding: 0;
-                }
-                [dir='rtl'] sp-field-label {
-                    padding-right: 0;
-                    padding-left: var(
-                        --spectrum-fieldlabel-side-padding-x,
-                        var(--spectrum-global-dimension-size-100)
-                    );
-                    margin-right: var(--spectrum-global-dimension-size-400);
-                }
-                [dir='rtl'] sp-switch {
-                    margin-right: var(--spectrum-global-dimension-size-400);
-                    margin-left: 0;
-                    padding: 0;
-                }
-            `,
-        ];
-    }
     async startManagingContentDirection(el) {
-        (await this.themeRoot).startManagingContentDirection(el);
+        (await this.theme).startManagingContentDirection(el);
     }
     async stopManagingContentDirection(el) {
-        (await this.themeRoot).stopManagingContentDirection(el);
+        (await this.theme).stopManagingContentDirection(el);
     }
     updateTheme({ target }) {
         const { id } = target;
         const { value } = target;
         const { checked } = target;
         switch (id) {
-            case 'theme':
-                this.theme =
-                    theme =
-                        window.__swc_hack_knobs__.defaultFlavor =
-                            value;
-                break;
             case 'color':
                 this.color =
                     color =
@@ -195,6 +110,7 @@ export class StoryDecorator extends SpectrumElement {
                     dir =
                         window.__swc_hack_knobs__.defaultDirection =
                             value;
+                document.documentElement.dir = dir;
                 break;
             case 'reduceMotion':
                 this.reduceMotion =
@@ -211,20 +127,11 @@ export class StoryDecorator extends SpectrumElement {
             event.stopPropagation();
         }
     }
-    get themedColor() {
-        return (this.color +
-            (this.theme === 'express' ? '-express' : ''));
-    }
-    get themedScale() {
-        return (this.scale +
-            (this.theme === 'express' ? '-express' : ''));
-    }
     render() {
         return html `
             <sp-theme
-                theme=${this.theme}
-                color=${this.themedColor}
-                scale=${this.themedScale}
+                color=${this.color}
+                scale=${this.scale}
                 dir=${this.direction}
                 part="container"
                 @keydown=${this.handleKeydown}
@@ -253,26 +160,11 @@ export class StoryDecorator extends SpectrumElement {
     get manageTheme() {
         return html `
             <div class="manage-theme" part="controls">
-                ${this.themeControl} ${this.colorControl} ${this.scaleControl}
-                ${this.dirControl} ${this.reduceMotionControl}
+                ${this.colorControl} ${this.scaleControl} ${this.dirControl}
+                ${this.reduceMotionControl}
             </div>
         `;
     }
-    get themeControl() {
-        return html `
-            <sp-field-label for="theme">Spectrum</sp-field-label>
-            <sp-picker
-                id="theme"
-                placement="top"
-                quiet
-                .value=${this.theme}
-                @change=${this.updateTheme}
-            >
-                <sp-menu-item value="classic">Classic</sp-menu-item>
-                <sp-menu-item value="express">Express</sp-menu-item>
-            </sp-picker>
-        `;
-    }
     get colorControl() {
         return html `
             <sp-field-label for="color">Theme</sp-field-label>
@@ -334,9 +226,76 @@ export class StoryDecorator extends SpectrumElement {
         `;
     }
 }
-__decorate([
-    property({ type: String })
-], StoryDecorator.prototype, "theme", void 0);
+StoryDecorator.styles = [
+    css `
+            :host(:focus) {
+                outline: none;
+            }
+            sp-theme {
+                overflow-x: hidden;
+                display: block;
+                box-sizing: border-box;
+                width: 100%;
+                min-height: 100vh;
+                padding: var(--spectrum-global-dimension-size-100)
+                    var(--spectrum-global-dimension-size-100)
+                    calc(
+                        2 * var(--spectrum-alias-focus-ring-size) +
+                            var(--spectrum-alias-item-height-m)
+                    );
+                background-color: var(--spectrum-global-color-gray-100);
+                color: var(
+                    --spectrum-body-text-color,
+                    var(--spectrum-alias-text-color)
+                );
+            }
+            :host([screenshot]) sp-theme {
+                padding: var(--spectrum-global-dimension-size-100);
+                --swc-test-caret-color: transparent;
+            }
+            :host([reduce-motion]) sp-theme {
+                ${reduceMotionProperties}
+            }
+            .manage-theme {
+                position: fixed;
+                bottom: 0;
+                left: var(--spectrum-global-dimension-size-200);
+                right: var(--spectrum-global-dimension-size-200);
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+                box-sizing: border-box;
+                background-color: var(--spectrum-global-color-gray-100);
+                padding-bottom: calc(2 * var(--spectrum-alias-focus-ring-size));
+            }
+            [dir='ltr'] sp-field-label {
+                padding-left: 0;
+                padding-right: var(
+                    --spectrum-fieldlabel-side-padding-x,
+                    var(--spectrum-global-dimension-size-100)
+                );
+                margin-left: var(--spectrum-global-dimension-size-400);
+            }
+            [dir='ltr'] sp-switch {
+                margin-left: var(--spectrum-global-dimension-size-400);
+                margin-right: 0;
+                padding: 0;
+            }
+            [dir='rtl'] sp-field-label {
+                padding-right: 0;
+                padding-left: var(
+                    --spectrum-fieldlabel-side-padding-x,
+                    var(--spectrum-global-dimension-size-100)
+                );
+                margin-right: var(--spectrum-global-dimension-size-400);
+            }
+            [dir='rtl'] sp-switch {
+                margin-right: var(--spectrum-global-dimension-size-400);
+                margin-left: 0;
+                padding: 0;
+            }
+        `,
+];
 __decorate([
     property({ type: String })
 ], StoryDecorator.prototype, "color", void 0);
@@ -344,7 +303,7 @@ __decorate([
     property({ type: String })
 ], StoryDecorator.prototype, "scale", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true, attribute: 'dir' })
 ], StoryDecorator.prototype, "direction", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'reduce-motion', reflect: true })
@@ -354,5 +313,5 @@ __decorate([
 ], StoryDecorator.prototype, "screenshot", void 0);
 __decorate([
     queryAsync('sp-theme')
-], StoryDecorator.prototype, "themeRoot", void 0);
+], StoryDecorator.prototype, "theme", void 0);
 //# sourceMappingURL=StoryDecorator.js.map

package/src/StoryDecorator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StoryDecorator.js","sourceRoot":"","sources":["StoryDecorator.ts"],"names":[],"mappings":"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","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    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAsync,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/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 { Color, Flavor, Scale, Theme } from '@spectrum-web-components/theme';\nimport { ActiveOverlay } from '@spectrum-web-components/overlay';\nimport './types.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: Flavor = (urlParams.get('sp_theme') as Flavor) || 'classic';\nexport let color: Color = (urlParams.get('sp_color') as Color) || 'light';\nexport let scale: Scale = (urlParams.get('sp_scale') as Scale) || 'medium';\nexport let reduceMotion = urlParams.get('sp_reduceMotion') === 'true';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n    defaultFlavor: theme,\n    defaultColor: color,\n    defaultScale: scale,\n    defaultDirection: dir,\n    defaultReduceMotion: reduceMotion,\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-coachmark-animation-indicator-ring-duration: 0ms;\n    --swc-test-duration: 1ms;\n`;\n\nActiveOverlay.prototype.renderTheme = function (\n    content: TemplateResult\n): TemplateResult {\n    const { color, scale, theme, lang } = this.theme;\n    return html`\n        ${window.__swc_hack_knobs__.defaultReduceMotion\n            ? html`\n                  <style>\n                      sp-theme {\n                          ${reduceMotionProperties}\n                      }\n                  </style>\n              `\n            : html``}\n        <sp-theme\n            theme=${ifDefined(theme)}\n            color=${ifDefined(color)}\n            scale=${ifDefined(scale)}\n            lang=${ifDefined(lang)}\n            part=\"theme\"\n        >\n            ${content}\n        </sp-theme>\n    `;\n};\n\nexport class StoryDecorator extends SpectrumElement {\n    static 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(--spectrum-global-dimension-size-100)\n                        var(--spectrum-global-dimension-size-100)\n                        calc(\n                            2 * var(--spectrum-alias-focus-ring-size) +\n                                var(--spectrum-alias-item-height-m)\n                        );\n                    box-sizing: border-box;\n                    background-color: var(--spectrum-global-color-gray-100);\n                    color: var(\n                        --spectrum-body-text-color,\n                        var(--spectrum-alias-text-color)\n                    );\n                }\n                :host([screenshot]) sp-theme {\n                    padding: var(--spectrum-global-dimension-size-100);\n                }\n                :host([reduce-motion]) sp-theme {\n                    ${reduceMotionProperties}\n                }\n                .manage-theme {\n                    position: fixed;\n                    bottom: 0;\n                    left: var(--spectrum-global-dimension-size-200);\n                    right: var(--spectrum-global-dimension-size-200);\n                    display: flex;\n                    align-items: center;\n                    justify-content: flex-end;\n                    box-sizing: border-box;\n                    background-color: var(--spectrum-global-color-gray-100);\n                    padding-bottom: calc(\n                        2 * var(--spectrum-alias-focus-ring-size)\n                    );\n                }\n                [dir='ltr'] sp-field-label {\n                    padding-left: 0;\n                    padding-right: var(\n                        --spectrum-fieldlabel-side-padding-x,\n                        var(--spectrum-global-dimension-size-100)\n                    );\n                    margin-left: var(--spectrum-global-dimension-size-400);\n                }\n                [dir='ltr'] sp-switch {\n                    margin-left: var(--spectrum-global-dimension-size-400);\n                    margin-right: 0;\n                    padding: 0;\n                }\n                [dir='rtl'] sp-field-label {\n                    padding-right: 0;\n                    padding-left: var(\n                        --spectrum-fieldlabel-side-padding-x,\n                        var(--spectrum-global-dimension-size-100)\n                    );\n                    margin-right: var(--spectrum-global-dimension-size-400);\n                }\n                [dir='rtl'] sp-switch {\n                    margin-right: var(--spectrum-global-dimension-size-400);\n                    margin-left: 0;\n                    padding: 0;\n                }\n            `,\n        ];\n    }\n\n    @property({ type: String })\n    public theme: Flavor = window.__swc_hack_knobs__.defaultFlavor;\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 })\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: Boolean, reflect: true })\n    public screenshot = false;\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 'theme':\n                this.theme =\n                    theme =\n                    window.__swc_hack_knobs__.defaultFlavor =\n                        value as Flavor;\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                break;\n            case 'reduceMotion':\n                this.reduceMotion =\n                    reduceMotion =\n                    window.__swc_hack_knobs__.defaultReduceMotion =\n                        checked as boolean;\n                break;\n        }\n    }\n\n    protected handleKeydown(event: KeyboardEvent): void {\n        const path = event.composedPath();\n        const hasInput = path.some((node) => node instanceof HTMLInputElement);\n        if (hasInput) {\n            event.stopPropagation();\n        }\n    }\n\n    private get themedColor(): Color {\n        return (this.color +\n            (this.theme === 'express' ? '-express' : '')) as Color;\n    }\n\n    private get themedScale(): Scale {\n        return (this.scale +\n            (this.theme === 'express' ? '-express' : '')) as Scale;\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <sp-theme\n                theme=${this.theme}\n                color=${this.themedColor}\n                scale=${this.themedScale}\n                dir=${this.direction}\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 descendents = target.assignedElements({\n            flatten: true,\n        }) as SpectrumElement[];\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(() => (this.ready = true));\n        });\n    }\n\n    private get manageTheme(): TemplateResult {\n        return html`\n            <div class=\"manage-theme\" part=\"controls\">\n                ${this.themeControl} ${this.colorControl} ${this.scaleControl}\n                ${this.dirControl} ${this.reduceMotionControl}\n            </div>\n        `;\n    }\n\n    private get themeControl(): TemplateResult {\n        return html`\n            <sp-field-label for=\"theme\">Spectrum</sp-field-label>\n            <sp-picker\n                id=\"theme\"\n                placement=\"top\"\n                quiet\n                .value=${this.theme}\n                @change=${this.updateTheme}\n            >\n                <sp-menu-item value=\"classic\">Classic</sp-menu-item>\n                <sp-menu-item value=\"express\">Express</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get colorControl(): TemplateResult {\n        return html`\n            <sp-field-label for=\"color\">Theme</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=\"lightest\">Lightest</sp-menu-item>\n                <sp-menu-item value=\"light\">Light</sp-menu-item>\n                <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n                <sp-menu-item value=\"darkest\">Darkest</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get scaleControl(): TemplateResult {\n        return html`\n            <sp-field-label for=\"scale\">Scale</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 dirControl(): TemplateResult {\n        return html`\n            <sp-field-label for=\"dir\">Direction</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"]}
+{"version":3,"file":"StoryDecorator.js","sourceRoot":"","sources":["StoryDecorator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;;AAEF,OAAO,EACH,GAAG,EACH,IAAI,EACJ,OAAO,EACP,eAAe,GAElB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,UAAU,GACb,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,iDAAiD,CAAC;AAC5E,OAAO,4CAA4C,CAAC;AACpD,OAAO,8CAA8C,CAAC;AACtD,OAAO,wDAAwD,CAAC;AAChE,OAAO,8CAA8C,CAAC;AACtD,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,8CAA8C,CAAC;AAItD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC3C,MAAM,SAAS,GAAG,IAAI,eAAe,CAAC,WAAW,CAAC,CAAC;AAEnD,MAAM,CAAC,IAAI,GAAG,GACT,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAmB,IAAI,KAAK,CAAC;AACxD,MAAM,CAAC,IAAI,KAAK,GAAW,SAAS,CAAC,GAAG,CAAC,UAAU,CAAW,IAAI,OAAO,CAAC;AAC1E,MAAM,CAAC,IAAI,KAAK,GAAW,SAAS,CAAC,GAAG,CAAC,UAAU,CAAW,IAAI,QAAQ,CAAC;AAC3E,MAAM,CAAC,IAAI,YAAY,GAAG,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,MAAM,CAAC;AAEtE,MAAM,CAAC,kBAAkB,GAAG,MAAM,CAAC,kBAAkB,IAAI;IACrD,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,KAAK;IACnB,gBAAgB,EAAE,GAAG;IACrB,mBAAmB,EAAE,YAAY;CACpC,CAAC;AAEF,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAejC,CAAC;AAEF,aAAa,CAAC,SAAS,CAAC,WAAW,GAAG,UAClC,OAAuB;IAEvB,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;IAC1C,OAAO,IAAI,CAAA;UACL,MAAM,CAAC,kBAAkB,CAAC,mBAAmB;QAC3C,CAAC,CAAC,IAAI,CAAA;;;4BAGU,sBAAsB;;;eAGnC;QACH,CAAC,CAAC,IAAI,CAAA,EAAE;;oBAEA,SAAS,CAAC,KAAK,CAAC;oBAChB,SAAS,CAAC,KAAK,CAAC;mBACjB,SAAS,CAAC,IAAI,CAAC;;;cAGpB,OAAO;;KAEhB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,OAAO,cAAe,SAAQ,eAAe;IAAnD;;QAyEW,UAAK,GAAU,MAAM,CAAC,kBAAkB,CAAC,YAAY,CAAC;QAGtD,UAAK,GAAU,MAAM,CAAC,kBAAkB,CAAC,YAAY,CAAC;QAGtD,cAAS,GACZ,MAAM,CAAC,kBAAkB,CAAC,gBAAgB,CAAC;QAGxC,iBAAY,GAAG,MAAM,CAAC,kBAAkB,CAAC,mBAAmB,CAAC;QAG7D,eAAU,GAAG,KAAK,CAAC;QAKnB,UAAK,GAAG,KAAK,CAAC;IAgKzB,CAAC;IA9JU,KAAK,CAAC,6BAA6B,CAAC,EAAe;QACtD,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,6BAA6B,CAAC,EAAE,CAAC,CAAC;IACzD,CAAC;IAEM,KAAK,CAAC,4BAA4B,CAAC,EAAe;QACrD,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,4BAA4B,CAAC,EAAE,CAAC,CAAC;IACxD,CAAC;IAEO,WAAW,CAAC,EAAE,MAAM,EAAuC;QAC/D,MAAM,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC;QACtB,MAAM,EAAE,KAAK,EAAE,GAAG,MAAgB,CAAC;QACnC,MAAM,EAAE,OAAO,EAAE,GAAG,MAAgB,CAAC;QACrC,QAAQ,EAAE,EAAE;YACR,KAAK,OAAO;gBACR,IAAI,CAAC,KAAK;oBACN,KAAK;wBACL,MAAM,CAAC,kBAAkB,CAAC,YAAY;4BAClC,KAAc,CAAC;gBACvB,MAAM;YACV,KAAK,OAAO;gBACR,IAAI,CAAC,KAAK;oBACN,KAAK;wBACL,MAAM,CAAC,kBAAkB,CAAC,YAAY;4BAClC,KAAc,CAAC;gBACvB,MAAM;YACV,KAAK,KAAK;gBACN,IAAI,CAAC,SAAS;oBACV,GAAG;wBACH,MAAM,CAAC,kBAAkB,CAAC,gBAAgB;4BACtC,KAAsB,CAAC;gBAC/B,QAAQ,CAAC,eAAe,CAAC,GAAG,GAAG,GAAG,CAAC;gBACnC,MAAM;YACV,KAAK,cAAc;gBACf,IAAI,CAAC,YAAY;oBACb,YAAY;wBACZ,MAAM,CAAC,kBAAkB,CAAC,mBAAmB;4BACzC,OAAkB,CAAC;gBAC3B,MAAM;SACb;IACL,CAAC;IAES,aAAa,CAAC,KAAoB;QACxC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,YAAY,gBAAgB,CAAC,CAAC;QACvE,IAAI,QAAQ,EAAE;YACV,KAAK,CAAC,eAAe,EAAE,CAAC;SAC3B;IACL,CAAC;IAES,MAAM;QACZ,OAAO,IAAI,CAAA;;wBAEK,IAAI,CAAC,KAAK;wBACV,IAAI,CAAC,KAAK;sBACZ,IAAI,CAAC,SAAS;;2BAET,IAAI,CAAC,aAAa;;oCAET,IAAI,CAAC,UAAU;kBACjC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW;;SAErD,CAAC;IACN,CAAC;IAES,KAAK,CAAC,UAAU,CAAC,EACvB,MAAM,GAC4B;QAClC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,MAAM,WAAW,GAAG,MAAM,CAAC,gBAAgB,CAAC;YACxC,OAAO,EAAE,IAAI;SAChB,CAAsB,CAAC;QACxB,MAAM,qBAAqB,GAAG,WAAW,CAAC,MAAM,CAC5C,CAAC,EAAE,EAAE,EAAE,CACH,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAC7B,OAAO,EAAE,CAAC,cAAc,KAAK,WAAW,CAC/C,CAAC;QACF,MAAM,OAAO,GAAG,qBAAqB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;QACrE,MAAM,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAC3B,IAAI,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YAChB,UAAU,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;YACf,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;YAClE,UAAU,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;IACP,CAAC;IAED,IAAY,WAAW;QACnB,OAAO,IAAI,CAAA;;kBAED,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,UAAU;kBACzD,IAAI,CAAC,mBAAmB;;SAEjC,CAAC;IACN,CAAC;IAED,IAAY,YAAY;QACpB,OAAO,IAAI,CAAA;;;;;;yBAMM,IAAI,CAAC,KAAK;0BACT,IAAI,CAAC,WAAW;;;;;;;SAOjC,CAAC;IACN,CAAC;IAED,IAAY,YAAY;QACpB,OAAO,IAAI,CAAA;;;;;;;yBAOM,IAAI,CAAC,KAAK;0BACT,IAAI,CAAC,WAAW;;;;;SAKjC,CAAC;IACN,CAAC;IAED,IAAY,UAAU;QAClB,OAAO,IAAI,CAAA;;;;;;;yBAOM,IAAI,CAAC,SAAS;0BACb,IAAI,CAAC,WAAW;;;;;SAKjC,CAAC;IACN,CAAC;IAED,IAAY,mBAAmB;QAC3B,OAAO,IAAI,CAAA;;;2BAGQ,IAAI,CAAC,YAAY;0BAClB,IAAI,CAAC,WAAW;;;;SAIjC,CAAC;IACN,CAAC;;AAzPM,qBAAM,GAAG;IACZ,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2BO,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAwC/B;CACJ,CAAC;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACkC;AAG7D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACkC;AAG7D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAEb;AAG/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACH;AAGpE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACjB;AAG1B;IADC,UAAU,CAAC,UAAU,CAAC;6CACD","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    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n    property,\n    queryAsync,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/theme/sp-theme.js';\nimport '@spectrum-web-components/theme/src/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 { Color, Scale, Theme } from '@spectrum-web-components/theme';\nimport { ActiveOverlay } from '@spectrum-web-components/overlay';\nimport './types.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 color: Color = (urlParams.get('sp_color') as Color) || 'light';\nexport let scale: Scale = (urlParams.get('sp_scale') as Scale) || 'medium';\nexport let reduceMotion = urlParams.get('sp_reduceMotion') === 'true';\n\nwindow.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {\n    defaultColor: color,\n    defaultScale: scale,\n    defaultDirection: dir,\n    defaultReduceMotion: reduceMotion,\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-coachmark-animation-indicator-ring-duration: 0ms;\n    --swc-test-duration: 1ms;\n`;\n\nActiveOverlay.prototype.renderTheme = function (\n    content: TemplateResult\n): TemplateResult {\n    const { color, scale, lang } = this.theme;\n    return html`\n        ${window.__swc_hack_knobs__.defaultReduceMotion\n            ? html`\n                  <style>\n                      sp-theme {\n                          ${reduceMotionProperties}\n                      }\n                  </style>\n              `\n            : html``}\n        <sp-theme\n            color=${ifDefined(color)}\n            scale=${ifDefined(scale)}\n            lang=${ifDefined(lang)}\n            part=\"theme\"\n        >\n            ${content}\n        </sp-theme>\n    `;\n};\n\nexport class StoryDecorator extends SpectrumElement {\n    static styles = [\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(--spectrum-global-dimension-size-100)\n                    var(--spectrum-global-dimension-size-100)\n                    calc(\n                        2 * var(--spectrum-alias-focus-ring-size) +\n                            var(--spectrum-alias-item-height-m)\n                    );\n                background-color: var(--spectrum-global-color-gray-100);\n                color: var(\n                    --spectrum-body-text-color,\n                    var(--spectrum-alias-text-color)\n                );\n            }\n            :host([screenshot]) sp-theme {\n                padding: var(--spectrum-global-dimension-size-100);\n                --swc-test-caret-color: transparent;\n            }\n            :host([reduce-motion]) sp-theme {\n                ${reduceMotionProperties}\n            }\n            .manage-theme {\n                position: fixed;\n                bottom: 0;\n                left: var(--spectrum-global-dimension-size-200);\n                right: var(--spectrum-global-dimension-size-200);\n                display: flex;\n                align-items: center;\n                justify-content: flex-end;\n                box-sizing: border-box;\n                background-color: var(--spectrum-global-color-gray-100);\n                padding-bottom: calc(2 * var(--spectrum-alias-focus-ring-size));\n            }\n            [dir='ltr'] sp-field-label {\n                padding-left: 0;\n                padding-right: var(\n                    --spectrum-fieldlabel-side-padding-x,\n                    var(--spectrum-global-dimension-size-100)\n                );\n                margin-left: var(--spectrum-global-dimension-size-400);\n            }\n            [dir='ltr'] sp-switch {\n                margin-left: var(--spectrum-global-dimension-size-400);\n                margin-right: 0;\n                padding: 0;\n            }\n            [dir='rtl'] sp-field-label {\n                padding-right: 0;\n                padding-left: var(\n                    --spectrum-fieldlabel-side-padding-x,\n                    var(--spectrum-global-dimension-size-100)\n                );\n                margin-right: var(--spectrum-global-dimension-size-400);\n            }\n            [dir='rtl'] sp-switch {\n                margin-right: var(--spectrum-global-dimension-size-400);\n                margin-left: 0;\n                padding: 0;\n            }\n        `,\n    ];\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: Boolean, reflect: true })\n    public screenshot = false;\n\n    @queryAsync('sp-theme')\n    private theme!: Theme;\n\n    public ready = false;\n\n    public async startManagingContentDirection(el: HTMLElement): Promise<void> {\n        (await this.theme).startManagingContentDirection(el);\n    }\n\n    public async stopManagingContentDirection(el: HTMLElement): Promise<void> {\n        (await this.theme).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 '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        }\n    }\n\n    protected handleKeydown(event: KeyboardEvent): void {\n        const path = event.composedPath();\n        const hasInput = path.some((node) => node instanceof HTMLInputElement);\n        if (hasInput) {\n            event.stopPropagation();\n        }\n    }\n\n    protected render(): TemplateResult {\n        return html`\n            <sp-theme\n                color=${this.color}\n                scale=${this.scale}\n                dir=${this.direction}\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 descendents = target.assignedElements({\n            flatten: true,\n        }) as SpectrumElement[];\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(() => (this.ready = true));\n        });\n    }\n\n    private get manageTheme(): TemplateResult {\n        return html`\n            <div class=\"manage-theme\" part=\"controls\">\n                ${this.colorControl} ${this.scaleControl} ${this.dirControl}\n                ${this.reduceMotionControl}\n            </div>\n        `;\n    }\n\n    private get colorControl(): TemplateResult {\n        return html`\n            <sp-field-label for=\"color\">Theme</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=\"lightest\">Lightest</sp-menu-item>\n                <sp-menu-item value=\"light\">Light</sp-menu-item>\n                <sp-menu-item value=\"dark\">Dark</sp-menu-item>\n                <sp-menu-item value=\"darkest\">Darkest</sp-menu-item>\n            </sp-picker>\n        `;\n    }\n\n    private get scaleControl(): TemplateResult {\n        return html`\n            <sp-field-label for=\"scale\">Scale</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 dirControl(): TemplateResult {\n        return html`\n            <sp-field-label for=\"dir\">Direction</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"]}

package/src/types.d.ts

@@ -1,8 +1,7 @@
-import { Color, Flavor, Scale } from '@spectrum-web-components/theme';
+import { Color, Scale } from '@spectrum-web-components/theme';
 declare global {
     interface Window {
         __swc_hack_knobs__: {
-            defaultFlavor: Flavor;
             defaultColor: Color;
             defaultScale: Scale;
             defaultDirection: 'ltr' | 'rtl';

package/src/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"","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*/\nimport { Color, Flavor, Scale } from '@spectrum-web-components/theme';\n\ndeclare global {\n    interface Window {\n        __swc_hack_knobs__: {\n            defaultFlavor: Flavor;\n            defaultColor: Color;\n            defaultScale: Scale;\n            defaultDirection: 'ltr' | 'rtl';\n            defaultReduceMotion: boolean;\n        };\n    }\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"","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*/\nimport { Color, Scale } from '@spectrum-web-components/theme';\n\ndeclare global {\n    interface Window {\n        __swc_hack_knobs__: {\n            defaultColor: Color;\n            defaultScale: Scale;\n            defaultDirection: 'ltr' | 'rtl';\n            defaultReduceMotion: boolean;\n        };\n    }\n}\n"]}