From a07497cdc3107d586bac398d97626b38e594a792 Mon Sep 17 00:00:00 2001 From: fcollonval Date: Tue, 21 Nov 2023 09:12:57 +0000 Subject: [PATCH] =?UTF-8?q?Deploying=20to=20gh-pages=20from=20@=20jupyterl?= =?UTF-8?q?ab-contrib/jupyter-ui-toolkit@7d078b2f121b78662e34d31b32475a428?= =?UTF-8?q?f9171fe=20=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- iframe.html | 2 +- main.a76b4119.iframe.bundle.js.map | 1 - ....iframe.bundle.js => main.f78c1cee.iframe.bundle.js | 10 ++-------- main.f78c1cee.iframe.bundle.js.map | 1 + project.json | 2 +- 5 files changed, 5 insertions(+), 11 deletions(-) delete mode 100644 main.a76b4119.iframe.bundle.js.map rename main.a76b4119.iframe.bundle.js => main.f78c1cee.iframe.bundle.js (90%) create mode 100644 main.f78c1cee.iframe.bundle.js.map diff --git a/iframe.html b/iframe.html index 82750247..2b6e36ce 100644 --- a/iframe.html +++ b/iframe.html @@ -380,4 +380,4 @@ import './8410.97803ff8.iframe.bundle.js'; - import './main.a76b4119.iframe.bundle.js'; \ No newline at end of file + import './main.f78c1cee.iframe.bundle.js'; \ No newline at end of file diff --git a/main.a76b4119.iframe.bundle.js.map b/main.a76b4119.iframe.bundle.js.map deleted file mode 100644 index fefea9ce..00000000 --- a/main.a76b4119.iframe.bundle.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"main.a76b4119.iframe.bundle.js","mappings":";AAaA;;AAEA;;AAEA;AACA;AACA;AACA;;;;;AAKA;;;;;;AAMA;AACA;;;;;;;;;AASA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;;;;;;;;;;;;;AAaA;;AAEA;AACA;;;;AAIA;;ACvHA;ACQA;;;;;;AAMA;AACA;;;AAGA;AACA;;;;;AAKA;;;;;;;;;AASA;;;;;;;;;;;;;;AAcA;;;;;;;;;;;;;;;;;AAiBA;;;;;;AAMA;;;;AAIA;AA3EA;;;AA2EA;AAhFA;;;AAgFA;AC9EA;AACA;;;;;;;;;;AAUA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AAcA;AACA;AACA;;;;AAIA;;;;;;;;AAQA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;AACA;;;;AAIA;;;;AAIA;;;;;;;AAOA;;;;AAIA;;;;AAIA;;AAEA;;;;AAIA;AACA;;;;;AAKA;AACA;;;;;;;;;;;AAWA;AACA;;;AAGA;AACA;AACA;;;AAGA;;AC9IA;AACA;;AAEA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;;AAEA;AACA;;;;;;;;;AASA;;AAEA;AACA;;;;;;ACzBA;ACAA;;;AAGA;AACA;;AAEA;AACA;;AAEA;;;;;;;;;;;;;;;;;AAiBA;;;;;;;;;;AAUA;;;;AAIA;;;;;;;;;;AAUA;;;;;;;;;AASA;;;;AAIA;;;AAGA;AACA;AACA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;AAEA;AACA;;;;AAIA;;ACzGA;ACcA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;;;;;;;;;;;AAWA;;;;AAIA;;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;;;;;;;;;AAYA;AACA;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;AAYA;;AAEA;AACA;AACA;;;;;;AAMA;AACA;;;;AAIA;;AAEA;AACA;AACA;;;;;AAKA;;;;AAIA;AACA;;;;AAIA;;AAEA;AACA;AACA;;;AAOA;;AAEA;AACA;;;;AAIA;AACA;;;;AAIA;;;;AAIA;AACA;;;AAGA;AACA;;AAEA;;;AAGA;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;AAEA;;;;AAIA;AACA;;AAMA;;AAEA;AACA;;;;AAIA;AACA;;;;AAIA;;;;AAIA;AACA;;;AAGA;AACA;;AAEA;;;AAGA;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;AAEA;;;;AAIA;AACA;;AAMA;;;AAGA;;;;;;;;;;;;;AAaA;;;;;AAKA;;;;;;;;;;AAUA;;;;;;;AAOA;;;;AAIA;;;AAGA;;;;AAIA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;AAEA;;;;AAIA;AACA;;AAMA;;;AAGA;;;;AAIA;;;;AAIA;;;;;;;AAOA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;;;;AAIA;AACA;AACA;;;;AAIA;;AAEA;;AAMA;;;;;;AAMA;;;;AAIA;;;AAGA;AACA;;AAEA;;;;AAIA;;AAEA;;;;;AAKA;AACA;AACA;;;;AAIA;AACA;AACA;;;;;AAKA;;;;AAIA;AACA;AACA;AACA;;;;AAIA;;AAEA;;ACxcA;;;;ADmdA;AACA;AACA;;;AAGA;AACA;;;;;;AAMA;AACA;AACA;AACA;;;AAGA;;;;AAIA;;;AAGA;AACA;;;AAGA;AACA;AACA;;AAEA;;;;AAIA;;;AAGA;AACA;;;AAGA;AACA;AACA;;AAEA;;;;AAIA;;;;;;;;;AASA;AACA;;;AAGA;;;;;;;;AAQA;;;;;AAKA;;;AAGA;AACA;;AAEA;;AAEA;;;;AAIA;;;AAGA;AACA;;AAEA;;;;AAIA;;AAEA;;AC3gBA;AC3CA;;;AAGA;;;;;;;;AAQA;AACA;;AAEA;AACA;AACA;;;;;;AAMA;AACA;;;AAGA;AACA;;AAEA;AACA;;;;;;;;;;;;AAYA;;;;;;AAMA;AACA;;;;;;;;;;;AAWA;AACA;;;;AAIA;AACA;;;AAGA;AACA;;;;;AAKA;AACA;;;;AAIA;AACA;;;;;;AAMA;;;;;;AAMA;;;;AAIA;AACA;;;;;;AAMA;;;;;;AAMA;;;AAGA;AACA;;;;;;;;AAQA;;;;;;;;;AASA;;AAEA;;;AAGA;AACA;;;AAGA;;;AAGA;;;;AAIA;AACA;;AAEA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;;AAGA;;;;;AAKA;;;AAGA;;;AAGA;;;;;;;AAOA;AACA;;;;;;;AAOA;;;;;AAKA;;ACvMA;ACAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;;;;AAYA;AACA;AACA;AACA;;;;;AAKA;AACA;;;;;;;;;;;;AAYA;;;;;;;;;;;;AAYA;;AAEA;;AAEA;;;;;;;;;AASA;AACA;;;AAGA;AACA;AACA;AACA;;;;AAIA;AACA;;;;AAIA;;;;;AAKA;AACA;;;;;AAKA;AACA;AACA;;;;;;;;;;;;;;;AAeA;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;;;;;;;;;;;;;;AAeA;AACA;;;;;;;;AAQA;;;AAGA;;;AAGA;AACA;AACA;AACA;AACA;;;;;AAKA;AACA;;;;AAIA;AACA;AACA;;;;;;;AAOA;;;;AAIA;AACA;;;;AAIA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AASA;;;AC/NA;AACA;;;;;;;;AAQA;;;;;AAKA;AACA;AACA;;;;;;;;AAQA;AACA;AACA;;;;;;AAMA;;;;;ACjCA;;ACGA;AACA;;AAEA;AACA;AACA;AACA;;;;AAIA;;;;;;;AAOA;AACA;;AAEA;;;;AAIA;AACA;;;AAGA;AACA;AACA;;AC/BA;ACHA;;ACFA;;;;AAIA;;;AAKA;;;;AAOA;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;AC1CA;ACGA;;AAEA;AACA;AACA;AACA;;;AAGA;;;AAGA;AACA;;;;;AAKA;;AAEA;AACA;;;;AAIA;AACA;;;;;AAKA;;AAEA;;;;;AAKA;;;AAGA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;;AAEA;ACjEA;;;AAGA;;;AAGA;;;;;;AAMA;;AAEA;;;AAGA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;AACA;AACA;AACA;;;;AAIA;AACA;;;;;;AAMA;AACA;;;;AAIA;AACA;;;;AAIA;;AAEA;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA;;;;;AAKA;AACA;;;;AAIA;;;;;;;;;;;;;;;;;;AAkBA;;;;;;;;AAQA;;;;;;;;;;;;AAYA;;;;;;;;AAQA;;;AAGA;;;;;AAKA;AACA;;;;;;;;;AASA;;;;AAIA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AASA;AACA;;;;;;;;AAQA;AACA;;;;;AAKA;AACA;;;;;;AAMA;AACA;AACA;;;AAGA;AACA;AACA;;;;AAIA;AACA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;AAIA;AACA;;AAEA;;;;AAIA;;;;ACpWA;ACFA;;;;;;;;;;;;;;;;;;;;;AAqBA;;;;AAIA;;;;;;;AClBA;ACLA;;AAEA;AACA;AACA;;AAEA;;;;AAIA;AACA;AACA;AACA;;;AAGA;;;;;;AAMA;AACA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;;;;AAKA;AACA;;;;AAIA;AACA;;;;;;;;;;;;;;;;;;;;;;AAsBA;AACA;;;;;;;;;;AAUA;;;;AAIA;;;;;;AAMA;AACA;;;;;AAKA;AACA;;;;ACnGA;ACDA;AACA;;;AAGA;;;;;;;;;;;AAWA;AACA;;;AAGA;AACA;;;;;;AAMA;AACA;;;AAGA;AACA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;AAqBA;AACA;;;;;;AAMA;AACA;;;;AAIA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;;;;;AAMA;AACA;;;;AAIA;AACA;;;;;;AAMA;AACA;;;AAGA;;AAEA;;;;;;;AAOA;;;;;;;;AAQA;;AAEA;;;;AAIA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;AAGA;AACA;;;;;;;;AAQA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;;;;;;;AAOA;;;;;AAKA;AACA;;;;AAIA;AACA;;ACjLA;ACOA;;;;AAIA;;AAEA;;;;;;;;;AASA;;;;;;;;;;;AAWA;;;AAGA;AACA;AACA;AACA;;AAEA;AACA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrDA;;;;;ACDA;AACA;;;;AAIA;AACA;;;;AAIA;;;AAGA;;;;;;;;;;;;;;;;;;AAkBA;;AAEA;AACA;;;;;;;;AAQA;;;;;;;AAOA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;AAEA;;;;;AAKA;;;;AAIA;;;AAGA;;AAEA;;;AAGA;AACA;;;;AAIA;;;;AAIA;;AAEA;AACA;;;;;;;;AAQA;;;AAGA;AACA;AACA;;AAEA;AACA;;AClIA;;;;;ACAA;;;AAGA;AACA;AAKA;;;;AAIA;;;;;;;AAOA;;;;;;;AAOA;AACA;AACA;AACA;AACA;;;;AAIA;AACA;;;;;;AAMA;AACA;AACA;;;;AAIA;AACA;;;AAGA;;AAEA;;;;;;;AAOA;AACA;;;;;AAKA;;AAEA;AACA;;;;;AAKA;;;;AAIA;;AAGA;AACA;AACA;;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;AACA;;;;AAIA;AACA;;;;;;AAMA;;;;AAIA;AACA;;;;;;AAMA;;;AAGA;AACA;;;;;;;;;;;;;;;;;;AAkBA;;;;AAIA;;;;AAIA;AACA;;;AAGA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;AAGA;;;;;AAKA;;;;;AAKA;AACA;;AAEA;;AAEA;AACA;;;AAGA;;;AAGA;AACA;;AAEA;;;AAGA;;;;AAIA;;;AAGA;;;AAGA;;;;AAIA;;;ACvNA;ACJA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;AAQA;;;;;AAKA;;;;;AAKA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;;;;AAKA;AACA;;;;;AAKA;AACA;;;;AAIA;;AAEA;AACA;AACA;;;;;;;;;;;AAWA;;;;;;;;AAQA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;;AAMA;AACA;;;;AAIA;AACA;;;AAGA;AACA;;;;;;AAMA;AACA;;ACnHA;ACAA;;AAEA;AACA;AACA;AACA;;;;;;;;;;;;AAYA;;;;;;;;;;;;;;;AAeA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;AACA;;;;;;;;;;;;;;;;;;;;AAoBA;AACA;;;;;;AAMA;;;;AAIA;;ACjGA;ACDA;AACA;;;;;;;;AAQA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;AAMA;AACA;;;;AAIA;AACA;;;;AAIA;;;;;;;AAOA;AACA;AACA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;AAiBA;;AAEA;AACA;;;;;;;;;;;;;AAaA;;;AAGA;;;AAGA;;AAEA;;;;ACvFA;ACNA;;;;;;ACOA;ACJA;;;;AAIA;AACA;;;;;AAKA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA;AACA;AACA;AACA;AACA;;;AClDA;;;;;;;ACAA;;;;AAIA;;;;;AAMA;;;;;;;AAOA;;;;AAIA;;;;;AAUA;AAeA;;;;AAIA;AACA;;AAEA;AACA;;;;;;;;;;;;AAYA;AACA;AACA;AACA;AACA;;;;;;;AAOA;AACA;AACA;;;;;;;;;;;AAWA;;;;AAIA;;;;;;;;;AASA;AACA;AACA;AACA;;;;;;;AAOA;;;;;;;;AAQA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA;;;;;AAKA;;;;;;;;AAQA;AACA;;;;;;;;;;;;;AAaA;;;;AAIA;;;;AAIA;;;;;;;AAOA;AACA;;;;AAIA;;AAEA;;;AAGA;;AAEA;;AAEA;;;;AAIA;AACA;;;AAGA;;;;AAIA;;;;AAIA;;;;;;;;AAQA;;;AAGA;;AAEA;AACA;AACA;AACA;;;;;AAKA;;;;;;;;;;;AAWA;;;AAGA;;;;;AAKA;;;AAGA;;;AAGA;;AC/QA","sources":["webpack://@jupyter/web-components/./src/accordion-item/accordion-item.styles.ts","webpack://@jupyter/web-components/./src/accordion-item/index.ts","webpack://@jupyter/web-components/./src/avatar/avatar.styles.ts","webpack://@jupyter/web-components/./src/styles/patterns/field.ts","webpack://@jupyter/web-components/./src/badge/badge.styles.ts","webpack://@jupyter/web-components/./src/badge/index.ts","webpack://@jupyter/web-components/./src/breadcrumb-item/breadcrumb-item.styles.ts","webpack://@jupyter/web-components/./src/breadcrumb-item/index.ts","webpack://@jupyter/web-components/./src/button/button.styles.ts","webpack://@jupyter/web-components/./src/button/index.ts","webpack://@jupyter/web-components/./src/checkbox/checkbox.styles.ts","webpack://@jupyter/web-components/./src/checkbox/index.ts","webpack://@jupyter/web-components/./src/select/select.styles.ts","webpack://@jupyter/web-components/./src/combobox/combobox.styles.ts","webpack://@jupyter/web-components/./src/combobox/index.ts","webpack://@jupyter/web-components/./src/data-grid/data-grid-cell.styles.ts","webpack://@jupyter/web-components/./src/data-grid/index.ts","webpack://@jupyter/web-components/./src/date-field/date-field.styles.ts","webpack://@jupyter/web-components/./src/date-field/date-field.template.ts","webpack://@jupyter/web-components/./src/date-field/index.ts","webpack://@jupyter/web-components/./src/listbox/listbox.styles.ts","webpack://@jupyter/web-components/./src/menu-item/menu-item.styles.ts","webpack://@jupyter/web-components/./src/menu-item/index.ts","webpack://@jupyter/web-components/./src/number-field/number-field.styles.ts","webpack://@jupyter/web-components/./src/number-field/index.ts","webpack://@jupyter/web-components/./src/option/option.styles.ts","webpack://@jupyter/web-components/./src/option/index.ts","webpack://@jupyter/web-components/./src/radio/radio.styles.ts","webpack://@jupyter/web-components/./src/radio/index.ts","webpack://@jupyter/web-components/./src/search/search.styles.ts","webpack://@jupyter/web-components/./src/search/index.ts","webpack://@jupyter/web-components/./src/slider/slider.styles.ts","webpack://@jupyter/web-components/./src/slider/index.ts","webpack://@jupyter/web-components/./src/switch/switch.styles.ts","webpack://@jupyter/web-components/./src/switch/index.ts","webpack://@jupyter/web-components/./src/tab/tab.styles.ts","webpack://@jupyter/web-components/./src/tab/index.ts","webpack://@jupyter/web-components/./src/tabs/tabs.styles.ts","webpack://@jupyter/web-components/./src/tabs/index.ts","webpack://@jupyter/web-components/./src/text-area/text-area.styles.ts","webpack://@jupyter/web-components/./src/text-area/index.ts","webpack://@jupyter/web-components/./src/text-field/text-field.styles.ts","webpack://@jupyter/web-components/./src/text-field/index.ts","webpack://@jupyter/web-components/./src/toolbar/toolbar.styles.ts","webpack://@jupyter/web-components/./src/toolbar/index.ts","webpack://@jupyter/web-components/./src/tree-item/tree-item.styles.ts","webpack://@jupyter/web-components/./src/tree-item/index.ts"],"sourcesContent":["// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillFocus, bodyFont, controlCornerRadius, density, designUnit, focusStrokeWidth, neutralForegroundRest, neutralStrokeDividerRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/size';\n/**\n * Styles for AccordionItem\n * @public\n */\nexport const accordionItemStyles = (context, definition) => css `\n ${display('flex')} :host {\n box-sizing: border-box;\n font-family: ${bodyFont};\n flex-direction: column;\n font-size: ${typeRampMinus1FontSize};\n line-height: ${typeRampMinus1LineHeight};\n border-bottom: calc(${strokeWidth} * 1px) solid\n ${neutralStrokeDividerRest};\n }\n\n .region {\n display: none;\n padding: calc((6 + (${designUnit} * 2 * ${density})) * 1px);\n }\n\n div.heading {\n display: grid;\n position: relative;\n grid-template-columns: calc(${heightNumber} * 1px) auto 1fr auto;\n color: ${neutralForegroundRest};\n }\n\n .button {\n appearance: none;\n border: none;\n background: none;\n grid-column: 3;\n outline: none;\n padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);\n text-align: left;\n height: calc(${heightNumber} * 1px);\n color: currentcolor;\n cursor: pointer;\n font-family: inherit;\n }\n\n .button:hover {\n color: currentcolor;\n }\n\n .button:active {\n color: currentcolor;\n }\n\n .button::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n cursor: pointer;\n }\n\n /* prettier-ignore */\n .button:${focusVisible}::before {\n outline: none;\n border: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n\n :host([expanded]) .region {\n display: block;\n }\n\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-column: 1;\n grid-row: 1;\n pointer-events: none;\n position: relative;\n }\n\n slot[name='expanded-icon'],\n slot[name='collapsed-icon'] {\n fill: currentcolor;\n }\n\n slot[name='collapsed-icon'] {\n display: flex;\n }\n\n :host([expanded]) slot[name='collapsed-icon'] {\n display: none;\n }\n\n slot[name='expanded-icon'] {\n display: none;\n }\n\n :host([expanded]) slot[name='expanded-icon'] {\n display: flex;\n }\n\n .start {\n display: flex;\n align-items: center;\n padding-inline-start: calc(${designUnit} * 1px);\n justify-content: center;\n grid-column: 2;\n position: relative;\n }\n\n .end {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-column: 4;\n position: relative;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n /* prettier-ignore */\n .button:${focusVisible}::before {\n border-color: ${SystemColors.Highlight};\n }\n :host slot[name='collapsed-icon'],\n :host([expanded]) slot[name='expanded-icon'] {\n fill: ${SystemColors.ButtonText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { AccordionItem, accordionItemTemplate as template } from '@microsoft/fast-foundation';\nimport { accordionItemStyles as styles } from './accordion-item.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#AccordionItem} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#accordionItemTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpAccordionItem = AccordionItem.compose({\n baseName: 'accordion-item',\n template,\n styles,\n collapsedIcon: /* html */ `\n \n \n \n `,\n expandedIcon: /* html */ `\n \n \n \n `\n});\n/**\n * Base class for Accordion item\n * @public\n */\nexport { AccordionItem };\nexport { styles as accordionItemStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { Badge, display } from '@microsoft/fast-foundation';\nimport { accentFillRest, baseHeightMultiplier, controlCornerRadius, density, designUnit, DirectionalStyleSheetBehavior, foregroundOnAccentRest, neutralForegroundRest, typeRampBaseFontSize } from '../design-tokens';\nconst rtl = (context, definition) => css `\n ::slotted(${context.tagFor(Badge)}) {\n left: 0;\n }\n`;\nconst ltr = (context, definition) => css `\n ::slotted(${context.tagFor(Badge)}) {\n right: 0;\n }\n`;\n/**\n * Styles for Avatar\n * @public\n */\nexport const avatarStyles = (context, definition) => css `\n ${display('flex')} :host {\n position: relative;\n height: var(--avatar-size, var(--avatar-size-default));\n width: var(--avatar-size, var(--avatar-size-default));\n --avatar-size-default: calc(\n (\n (${baseHeightMultiplier} + ${density}) * ${designUnit} +\n ((${designUnit} * 8) - 40)\n ) * 1px\n );\n --avatar-text-size: ${typeRampBaseFontSize};\n --avatar-text-ratio: ${designUnit};\n }\n\n .link {\n text-decoration: none;\n color: ${neutralForegroundRest};\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n min-width: 100%;\n }\n\n .square {\n border-radius: calc(${controlCornerRadius} * 1px);\n min-width: 100%;\n overflow: hidden;\n }\n\n .circle {\n border-radius: 100%;\n min-width: 100%;\n overflow: hidden;\n }\n\n .backplate {\n position: relative;\n display: flex;\n background-color: ${accentFillRest};\n }\n\n .media,\n ::slotted(img) {\n max-width: 100%;\n position: absolute;\n display: block;\n }\n\n .content {\n font-size: calc(\n (\n var(--avatar-text-size) +\n var(--avatar-size, var(--avatar-size-default))\n ) / var(--avatar-text-ratio)\n );\n color: ${foregroundOnAccentRest};\n line-height: var(--avatar-size, var(--avatar-size-default));\n display: block;\n min-height: var(--avatar-size, var(--avatar-size-default));\n }\n\n ::slotted(${context.tagFor(Badge)}) {\n position: absolute;\n display: block;\n }\n `.withBehaviors(new DirectionalStyleSheetBehavior(ltr(context, definition), rtl(context, definition)));\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { accentFillFocus, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillHover, neutralFillInputHover, neutralFillInputRest, neutralFillRest, neutralFillStrongActive, neutralFillStrongHover, neutralFillStrongRest, neutralForegroundRest, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '@microsoft/fast-components';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { heightNumber } from '../size';\nexport const BaseFieldStyles = css `\n ${display('inline-block')} :host {\n font-family: ${bodyFont};\n outline: none;\n user-select: none;\n }\n\n .root {\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: row;\n color: ${neutralForegroundRest};\n background: ${neutralFillInputRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid ${neutralFillStrongRest};\n height: calc(${heightNumber} * 1px);\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n border: 0;\n color: inherit;\n height: calc(100% - 4px);\n width: 100%;\n margin-top: auto;\n margin-bottom: auto;\n border: none;\n padding: 0 calc(${designUnit} * 2px + 1px);\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n }\n\n .control:hover,\n .control:${focusVisible},\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .label {\n display: block;\n color: ${neutralForegroundRest};\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n margin-bottom: 4px;\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .start,\n .end {\n margin: auto;\n fill: currentcolor;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n }\n\n .start {\n margin-inline-start: 11px;\n }\n\n .end {\n margin-inline-end: 11px;\n }\n\n :host(:hover:not([disabled])) .root {\n background: ${neutralFillInputHover};\n border-color: ${neutralFillStrongHover};\n }\n\n :host(:active:not([disabled])) .root {\n background: ${neutralFillInputHover};\n border-color: ${neutralFillStrongActive};\n }\n\n :host(:focus-within:not([disabled])) .root {\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus};\n }\n\n :host([appearance='filled']) .root {\n background: ${neutralFillRest};\n }\n\n :host([appearance='filled']:hover:not([disabled])) .root {\n background: ${neutralFillHover};\n }\n\n :host([disabled]) .label,\n :host([readonly]) .label,\n :host([readonly]) .control,\n :host([disabled]) .control {\n cursor: ${disabledCursor};\n }\n\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]) .control {\n border-color: ${neutralStrokeRest};\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n .root,\n :host([appearance='filled']) .root {\n forced-color-adjust: none;\n background: ${SystemColors.Field};\n border-color: ${SystemColors.FieldText};\n }\n :host(:hover:not([disabled])) .root,\n :host([appearance='filled']:hover:not([disabled])) .root,\n :host([appearance='filled']:hover) .root {\n background: ${SystemColors.Field};\n border-color: ${SystemColors.Highlight};\n }\n .start,\n .end {\n fill: currentcolor;\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host([disabled]) .root,\n :host([appearance='filled']:hover[disabled]) .root {\n border-color: ${SystemColors.GrayText};\n background: ${SystemColors.Field};\n }\n :host(:focus-within:enabled) .root {\n border-color: ${SystemColors.Highlight};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${SystemColors.Highlight};\n }\n input::placeholder {\n color: ${SystemColors.GrayText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { bodyFont, controlCornerRadius, designUnit, neutralFillRest, neutralForegroundRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Badge\n * @public\n */\nexport const badgeStyles = (context, definition) => css `\n ${display('inline-block')} :host {\n box-sizing: border-box;\n font-family: ${bodyFont};\n font-size: ${typeRampMinus1FontSize};\n line-height: ${typeRampMinus1LineHeight};\n }\n\n .control {\n border-radius: calc(${controlCornerRadius} * 1px);\n padding: calc(((${designUnit} * 0.5) - ${strokeWidth}) * 1px)\n calc((${designUnit} - ${strokeWidth}) * 1px);\n color: ${neutralForegroundRest};\n font-weight: 600;\n border: calc(${strokeWidth} * 1px) solid transparent;\n background-color: ${neutralFillRest};\n }\n\n .control[style] {\n font-weight: 400;\n }\n\n :host([circular]) .control {\n border-radius: 100px;\n padding: 0 calc(${designUnit} * 1px);\n /* Need to work with Brian on width and height here */\n height: calc((${heightNumber} - (${designUnit} * 3)) * 1px);\n min-width: calc((${heightNumber} - (${designUnit} * 3)) * 1px);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n }\n`;\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Badge, badgeTemplate as template } from '@microsoft/fast-foundation';\nimport { badgeStyles as styles } from './badge.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Badge} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#badgeTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpBadge = Badge.compose({\n baseName: 'badge',\n template,\n styles\n});\n/**\n * Base class for Badge\n * @public\n */\nexport { Badge };\nexport { styles as badgeStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentForegroundActive, accentForegroundFocus, accentForegroundHover, accentForegroundRest, bodyFont, focusStrokeWidth, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Breadcrumb item\n * @public\n */\nexport const breadcrumbItemStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n background: transparent;\n box-sizing: border-box;\n font-family: ${bodyFont};\n font-size: ${typeRampBaseFontSize};\n fill: currentColor;\n line-height: ${typeRampBaseLineHeight};\n min-width: calc(${heightNumber} * 1px);\n outline: none;\n color: ${neutralForegroundRest}\n }\n\n .listitem {\n display: flex;\n align-items: center;\n width: max-content;\n }\n\n .separator {\n margin: 0 6px;\n display: flex;\n }\n\n .control {\n align-items: center;\n box-sizing: border-box;\n color: ${accentForegroundRest};\n cursor: pointer;\n display: flex;\n fill: inherit;\n outline: none;\n text-decoration: none;\n white-space: nowrap;\n }\n\n .control:hover {\n color: ${accentForegroundHover};\n }\n\n .control:active {\n color: ${accentForegroundActive};\n }\n\n .control .content {\n position: relative;\n }\n\n .control .content::before {\n content: \"\";\n display: block;\n height: calc(${strokeWidth} * 1px);\n left: 0;\n position: absolute;\n right: 0;\n top: calc(1em + 4px);\n width: 100%;\n }\n\n .control:hover .content::before {\n background: ${accentForegroundHover};\n }\n\n .control:active .content::before {\n background: ${accentForegroundActive};\n }\n\n .control:${focusVisible} .content::before {\n background: ${accentForegroundFocus};\n height: calc(${focusStrokeWidth} * 1px);\n }\n\n .control:not([href]) {\n color: ${neutralForegroundRest};\n cursor: default;\n }\n\n .control:not([href]) .content::before {\n background: none;\n }\n\n .start,\n .end {\n display: flex;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n }\n\n .start {\n margin-inline-end: 6px;\n }\n\n .end {\n margin-inline-start: 6px;\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n .control:hover .content::before,\n .control:${focusVisible} .content::before {\n background: ${SystemColors.LinkText};\n }\n .start,\n .end {\n fill: ${SystemColors.ButtonText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { BreadcrumbItem, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation';\nimport { breadcrumbItemStyles as styles } from './breadcrumb-item.styles';\n/**\n * A function that returns a BreadcrumbItem registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#breadcrumbItemTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpBreadcrumbItem = BreadcrumbItem.compose({\n baseName: 'breadcrumb-item',\n template,\n styles,\n separator: '/',\n shadowOptions: {\n delegatesFocus: true\n }\n});\n/**\n * Base class for BreadcrumbItem\n * @public\n */\nexport { BreadcrumbItem };\nexport { styles as breadcrumbItemStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { neutralFillStrongActive } from '@microsoft/fast-components';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, PropertyStyleSheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, bodyFont, controlCornerRadius, density, designUnit, disabledOpacity, errorFillActive, errorFillFocus, errorFillHover, errorFillRest, errorForegroundActive, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralFillStrongFocus, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles';\n/**\n * Behavior that will conditionally apply a stylesheet based on the elements\n * appearance property\n *\n * @param value - The value of the appearance property\n * @param styles - The styles to be applied when condition matches\n *\n * @internal\n */\nfunction appearanceBehavior(value, styles) {\n return new PropertyStyleSheetBehavior('appearance', value, styles);\n}\n// TODO do we really want to use outline for focus => this call for a minimal style for toolbar probably\n// outline force to use a margin so that the outline is not hidden by other elements.\n/**\n * @internal\n */\nconst BaseButtonStyles = css `\n ${display('inline-flex')} :host {\n font-family: ${bodyFont};\n outline: none;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n height: calc(${heightNumber} * 1px);\n min-width: calc(${heightNumber} * 1px);\n background-color: ${neutralFillRest};\n color: ${neutralForegroundRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n fill: currentcolor;\n cursor: pointer;\n margin: calc((${focusStrokeWidth} + 2) * 1px);\n }\n\n .control {\n background: transparent;\n height: inherit;\n flex-grow: 1;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);\n white-space: nowrap;\n outline: none;\n text-decoration: none;\n border: calc(${strokeWidth} * 1px) solid transparent;\n color: inherit;\n border-radius: inherit;\n fill: inherit;\n cursor: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n\n :host(:hover) {\n background-color: ${neutralFillHover};\n }\n\n :host(:active) {\n background-color: ${neutralFillActive};\n }\n\n :host([aria-pressed='true']) {\n box-shadow: inset 0px 0px 2px 2px ${neutralFillStrongActive};\n }\n\n :host([minimal]) {\n --density: -4;\n }\n\n :host([minimal]) .control {\n padding: 1px;\n }\n\n /* prettier-ignore */\n .control:${focusVisible} {\n outline: calc(${focusStrokeWidth} * 1px) solid ${neutralFillStrongFocus};\n outline-offset: 2px;\n -moz-outline-radius: 0px;\n }\n\n .control::-moz-focus-inner {\n border: 0;\n }\n\n .start,\n .end {\n display: flex;\n }\n\n .control.icon-only {\n padding: 0;\n line-height: 0;\n }\n\n ::slotted(svg) {\n ${\n/* Glyph size and margin-left is temporary -\n replace when adaptive typography is figured out */ ''} width: 16px;\n height: 16px;\n pointer-events: none;\n }\n\n .start {\n margin-inline-end: 11px;\n }\n\n .end {\n margin-inline-start: 11px;\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host .control {\n background-color: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.ButtonText};\n color: ${SystemColors.ButtonText};\n fill: currentColor;\n }\n\n :host(:hover) .control {\n forced-color-adjust: none;\n background-color: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n /* prettier-ignore */\n .control:${focusVisible} {\n forced-color-adjust: none;\n background-color: ${SystemColors.Highlight};\n outline-color: ${SystemColors.ButtonText};\n color: ${SystemColors.HighlightText};\n }\n\n .control:hover,\n :host([appearance='outline']) .control:hover {\n border-color: ${SystemColors.ButtonText};\n }\n\n :host([href]) .control {\n border-color: ${SystemColors.LinkText};\n color: ${SystemColors.LinkText};\n }\n\n :host([href]) .control:hover,\n :host([href]) .control:${focusVisible} {\n forced-color-adjust: none;\n background: ${SystemColors.ButtonFace};\n outline-color: ${SystemColors.LinkText};\n color: ${SystemColors.LinkText};\n fill: currentColor;\n }\n `));\n/**\n * @internal\n */\nconst AccentButtonStyles = css `\n :host([appearance='accent']) {\n background: ${accentFillRest};\n color: ${foregroundOnAccentRest};\n }\n\n :host([appearance='accent']:hover) {\n background: ${accentFillHover};\n color: ${foregroundOnAccentHover};\n }\n\n :host([appearance='accent'][aria-pressed='true']) {\n box-shadow: inset 0px 0px 2px 2px ${accentForegroundActive};\n }\n\n :host([appearance='accent']:active) .control:active {\n background: ${accentFillActive};\n color: ${foregroundOnAccentActive};\n }\n\n :host([appearance=\"accent\"]) .control:${focusVisible} {\n outline-color: ${accentFillFocus};\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='accent']) .control {\n forced-color-adjust: none;\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host([appearance='accent']) .control:hover,\n :host([appearance='accent']:active) .control:active {\n background: ${SystemColors.HighlightText};\n border-color: ${SystemColors.Highlight};\n color: ${SystemColors.Highlight};\n }\n\n :host([appearance=\"accent\"]) .control:${focusVisible} {\n outline-color: ${SystemColors.Highlight};\n }\n\n :host([appearance='accent'][href]) .control {\n background: ${SystemColors.LinkText};\n color: ${SystemColors.HighlightText};\n }\n\n :host([appearance='accent'][href]) .control:hover {\n background: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.LinkText};\n box-shadow: none;\n color: ${SystemColors.LinkText};\n fill: currentColor;\n }\n\n :host([appearance=\"accent\"][href]) .control:${focusVisible} {\n outline-color: ${SystemColors.HighlightText};\n }\n `));\n/**\n * @internal\n */\nconst ErrorButtonStyles = css `\n :host([appearance='error']) {\n background: ${errorFillRest};\n color: ${foregroundOnAccentRest};\n }\n\n :host([appearance='error']:hover) {\n background: ${errorFillHover};\n color: ${foregroundOnAccentHover};\n }\n\n :host([appearance='error'][aria-pressed='true']) {\n box-shadow: inset 0px 0px 2px 2px ${errorForegroundActive};\n }\n\n :host([appearance='error']:active) .control:active {\n background: ${errorFillActive};\n color: ${foregroundOnAccentActive};\n }\n\n :host([appearance=\"error\"]) .control:${focusVisible} {\n outline-color: ${errorFillFocus};\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='error']) .control {\n forced-color-adjust: none;\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host([appearance='error']) .control:hover,\n :host([appearance='error']:active) .control:active {\n background: ${SystemColors.HighlightText};\n border-color: ${SystemColors.Highlight};\n color: ${SystemColors.Highlight};\n }\n\n :host([appearance=\"error\"]) .control:${focusVisible} {\n outline-color: ${SystemColors.Highlight};\n }\n\n :host([appearance='error'][href]) .control {\n background: ${SystemColors.LinkText};\n color: ${SystemColors.HighlightText};\n }\n\n :host([appearance='error'][href]) .control:hover {\n background: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.LinkText};\n box-shadow: none;\n color: ${SystemColors.LinkText};\n fill: currentColor;\n }\n\n :host([appearance=\"error\"][href]) .control:${focusVisible} {\n outline-color: ${SystemColors.HighlightText};\n }\n `));\n/**\n * @internal\n */\nexport const LightweightButtonStyles = css `\n :host([appearance='lightweight']) {\n background: transparent;\n color: ${accentForegroundRest};\n }\n\n :host([appearance='lightweight']) .control {\n padding: 0;\n height: initial;\n border: none;\n box-shadow: none;\n border-radius: 0;\n }\n\n :host([appearance='lightweight']:hover) {\n background: transparent;\n color: ${accentForegroundHover};\n }\n\n :host([appearance='lightweight']:active) {\n background: transparent;\n color: ${accentForegroundActive};\n }\n\n :host([appearance='lightweight']) .content {\n position: relative;\n }\n\n :host([appearance='lightweight']) .content::before {\n content: '';\n display: block;\n height: calc(${strokeWidth} * 1px);\n position: absolute;\n top: calc(1em + 4px);\n width: 100%;\n }\n\n :host([appearance='lightweight']:hover) .content::before {\n background: ${accentForegroundHover};\n }\n\n :host([appearance='lightweight']:active) .content::before {\n background: ${accentForegroundActive};\n }\n\n :host([appearance=\"lightweight\"]) .control:${focusVisible} {\n outline-color: transparent;\n }\n\n :host([appearance=\"lightweight\"]) .control:${focusVisible} .content::before {\n background: ${neutralForegroundRest};\n height: calc(${focusStrokeWidth} * 1px);\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance=\"lightweight\"]) .control:hover,\n :host([appearance=\"lightweight\"]) .control:${focusVisible} {\n forced-color-adjust: none;\n background: ${SystemColors.ButtonFace};\n color: ${SystemColors.Highlight};\n }\n :host([appearance=\"lightweight\"]) .control:hover .content::before,\n :host([appearance=\"lightweight\"]) .control:${focusVisible} .content::before {\n background: ${SystemColors.Highlight};\n }\n\n :host([appearance=\"lightweight\"][href]) .control:hover,\n :host([appearance=\"lightweight\"][href]) .control:${focusVisible} {\n background: ${SystemColors.ButtonFace};\n box-shadow: none;\n color: ${SystemColors.LinkText};\n }\n\n :host([appearance=\"lightweight\"][href]) .control:hover .content::before,\n :host([appearance=\"lightweight\"][href]) .control:${focusVisible} .content::before {\n background: ${SystemColors.LinkText};\n }\n `));\n/**\n * @internal\n */\nconst OutlineButtonStyles = css `\n :host([appearance='outline']) {\n background: transparent;\n border-color: ${accentFillRest};\n }\n\n :host([appearance='outline']:hover) {\n border-color: ${accentFillHover};\n }\n\n :host([appearance='outline']:active) {\n border-color: ${accentFillActive};\n }\n\n :host([appearance='outline']) .control {\n border-color: inherit;\n }\n\n :host([appearance=\"outline\"]) .control:${focusVisible} {\n outline-color: ${accentFillFocus};\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='outline']) .control {\n border-color: ${SystemColors.ButtonText};\n }\n :host([appearance=\"outline\"]) .control:${focusVisible} {\n forced-color-adjust: none;\n background-color: ${SystemColors.Highlight};\n outline-color: ${SystemColors.ButtonText};\n color: ${SystemColors.HighlightText};\n fill: currentColor;\n }\n :host([appearance='outline'][href]) .control {\n background: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.LinkText};\n color: ${SystemColors.LinkText};\n fill: currentColor;\n }\n :host([appearance=\"outline\"][href]) .control:hover,\n :host([appearance=\"outline\"][href]) .control:${focusVisible} {\n forced-color-adjust: none;\n outline-color: ${SystemColors.LinkText};\n }\n `));\n/**\n * @internal\n */\nconst StealthButtonStyles = css `\n :host([appearance='stealth']) {\n background: transparent;\n }\n\n :host([appearance='stealth']:hover) {\n background: ${neutralFillStealthHover};\n }\n\n :host([appearance='stealth']:active) {\n background: ${neutralFillStealthActive};\n }\n\n :host([appearance='stealth']) .control:${focusVisible} {\n outline-color: ${accentFillFocus};\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='stealth']),\n :host([appearance='stealth']) .control {\n forced-color-adjust: none;\n background: ${SystemColors.ButtonFace};\n border-color: transparent;\n color: ${SystemColors.ButtonText};\n fill: currentColor;\n }\n\n :host([appearance='stealth']:hover) .control {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n fill: currentColor;\n }\n\n :host([appearance=\"stealth\"]:${focusVisible}) .control {\n outline-color: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n fill: currentColor;\n }\n\n :host([appearance='stealth'][href]) .control {\n color: ${SystemColors.LinkText};\n }\n\n :host([appearance=\"stealth\"][href]:hover) .control,\n :host([appearance=\"stealth\"][href]:${focusVisible}) .control {\n background: ${SystemColors.LinkText};\n border-color: ${SystemColors.LinkText};\n color: ${SystemColors.HighlightText};\n fill: currentColor;\n }\n\n :host([appearance=\"stealth\"][href]:${focusVisible}) .control {\n forced-color-adjust: none;\n box-shadow: 0 0 0 1px ${SystemColors.LinkText};\n }\n `));\n/**\n * Styles for Button\n * @public\n */\nexport const buttonStyles = (context, definition) => css `\n :host([disabled]),\n :host([disabled]:hover),\n :host([disabled]:active) {\n opacity: ${disabledOpacity};\n background-color: ${neutralFillRest};\n cursor: ${disabledCursor};\n }\n\n ${BaseButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([disabled]),\n :host([disabled]) .control,\n :host([disabled]:hover),\n :host([disabled]:active) {\n forced-color-adjust: none;\n background-color: ${SystemColors.ButtonFace};\n outline-color: ${SystemColors.GrayText};\n color: ${SystemColors.GrayText};\n cursor: ${disabledCursor};\n opacity: 1;\n }\n `), appearanceBehavior('accent', css `\n :host([appearance='accent'][disabled]),\n :host([appearance='accent'][disabled]:hover),\n :host([appearance='accent'][disabled]:active) {\n background: ${accentFillRest};\n }\n\n ${AccentButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='accent'][disabled]) .control,\n :host([appearance='accent'][disabled]) .control:hover {\n background: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.GrayText};\n color: ${SystemColors.GrayText};\n }\n `))), appearanceBehavior('error', css `\n :host([appearance='error'][disabled]),\n :host([appearance='error'][disabled]:hover),\n :host([appearance='error'][disabled]:active) {\n background: ${errorFillRest};\n }\n\n ${ErrorButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='error'][disabled]) .control,\n :host([appearance='error'][disabled]) .control:hover {\n background: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.GrayText};\n color: ${SystemColors.GrayText};\n }\n `))), appearanceBehavior('lightweight', css `\n :host([appearance='lightweight'][disabled]:hover),\n :host([appearance='lightweight'][disabled]:active) {\n background-color: transparent;\n color: ${accentForegroundRest};\n }\n\n :host([appearance='lightweight'][disabled]) .content::before,\n :host([appearance='lightweight'][disabled]:hover) .content::before,\n :host([appearance='lightweight'][disabled]:active) .content::before {\n background: transparent;\n }\n\n ${LightweightButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='lightweight'].disabled) .control {\n forced-color-adjust: none;\n color: ${SystemColors.GrayText};\n }\n\n :host([appearance='lightweight'].disabled)\n .control:hover\n .content::before {\n background: none;\n }\n `))), appearanceBehavior('outline', css `\n :host([appearance='outline'][disabled]),\n :host([appearance='outline'][disabled]:hover),\n :host([appearance='outline'][disabled]:active) {\n background: transparent;\n border-color: ${accentFillRest};\n }\n\n ${OutlineButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='outline'][disabled]) .control {\n border-color: ${SystemColors.GrayText};\n }\n `))), appearanceBehavior('stealth', css `\n :host([appearance='stealth'][disabled]),\n :host([appearance='stealth'][disabled]:hover),\n :host([appearance='stealth'][disabled]:active) {\n background: ${neutralFillStealthRest};\n }\n\n ${StealthButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='stealth'][disabled]) {\n background: ${SystemColors.ButtonFace};\n }\n\n :host([appearance='stealth'][disabled]) .control {\n background: ${SystemColors.ButtonFace};\n border-color: transparent;\n color: ${SystemColors.GrayText};\n }\n `))));\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { __decorate } from \"tslib\";\nimport { attr } from '@microsoft/fast-element';\nimport { Button as FoundationButton, buttonTemplate as template } from '@microsoft/fast-foundation';\nimport { buttonStyles } from './button.styles';\n/**\n * @internal\n */\nexport class Button extends FoundationButton {\n connectedCallback() {\n super.connectedCallback();\n if (!this.appearance) {\n this.appearance = 'neutral';\n }\n }\n /**\n * Applies 'icon-only' class when there is only an SVG in the default slot\n *\n * @public\n * @remarks\n */\n defaultSlottedContentChanged(oldValue, newValue) {\n const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE);\n if (slottedElements.length === 1 &&\n (slottedElements[0] instanceof SVGElement ||\n slottedElements[0].classList.contains('fa') ||\n slottedElements[0].classList.contains('fas'))) {\n this.control.classList.add('icon-only');\n }\n else {\n this.control.classList.remove('icon-only');\n }\n }\n}\n__decorate([\n attr\n], Button.prototype, \"appearance\", void 0);\n__decorate([\n attr({ attribute: 'minimal', mode: 'boolean' })\n], Button.prototype, \"minimal\", void 0);\n/**\n * The button component registration.\n *\n * @public\n * @remarks\n * Generated HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpButton = Button.compose({\n baseName: 'button',\n baseClass: FoundationButton,\n template,\n styles: buttonStyles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Checkbox\n * @public\n */\nexport const checkboxStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n align-items: center;\n outline: none;\n margin: calc(${designUnit} * 1px) 0;\n /* Chromium likes to select label text or the default slot when the checkbox is\n clicked. Maybe there is a better solution here? */\n user-select: none;\n }\n\n .control {\n position: relative;\n width: calc((${heightNumber} / 2 + ${designUnit}) * 1px);\n height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);\n box-sizing: border-box;\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};\n background: ${neutralFillInputRest};\n outline: none;\n cursor: pointer;\n }\n\n .label {\n font-family: ${bodyFont};\n color: ${neutralForegroundRest};\n /* Need to discuss with Brian how HorizontalSpacingNumber can work.\n https://github.com/microsoft/fast/issues/2766 */\n padding-inline-start: calc(${designUnit} * 2px + 2px);\n margin-inline-end: calc(${designUnit} * 2px + 2px);\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .checked-indicator {\n width: 100%;\n height: 100%;\n display: block;\n fill: ${foregroundOnAccentRest};\n opacity: 0;\n pointer-events: none;\n }\n\n .indeterminate-indicator {\n border-radius: calc(${controlCornerRadius} * 1px);\n background: ${foregroundOnAccentRest};\n position: absolute;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n }\n\n :host(:not([disabled])) .control:hover {\n background: ${neutralFillInputHover};\n border-color: ${neutralStrokeHover};\n }\n\n :host(:not([disabled])) .control:active {\n background: ${neutralFillInputActive};\n border-color: ${neutralStrokeActive};\n }\n\n :host(:${focusVisible}) .control {\n outline: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};\n outline-offset: 2px;\n }\n\n :host([aria-checked='true']) .control {\n background: ${accentFillRest};\n border: calc(${strokeWidth} * 1px) solid ${accentFillRest};\n }\n\n :host([aria-checked='true']:not([disabled])) .control:hover {\n background: ${accentFillHover};\n border: calc(${strokeWidth} * 1px) solid ${accentFillHover};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:hover\n .checked-indicator {\n fill: ${foregroundOnAccentHover};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:hover\n .indeterminate-indicator {\n background: ${foregroundOnAccentHover};\n }\n\n :host([aria-checked='true']:not([disabled])) .control:active {\n background: ${accentFillActive};\n border: calc(${strokeWidth} * 1px) solid ${accentFillActive};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:active\n .checked-indicator {\n fill: ${foregroundOnAccentActive};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:active\n .indeterminate-indicator {\n background: ${foregroundOnAccentActive};\n }\n\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .control {\n outline: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};\n outline-offset: 2px;\n }\n\n :host([disabled]) .label,\n :host([readonly]) .label,\n :host([readonly]) .control,\n :host([disabled]) .control {\n cursor: ${disabledCursor};\n }\n\n :host([aria-checked='true']:not(.indeterminate)) .checked-indicator,\n :host(.indeterminate) .indeterminate-indicator {\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n .control {\n forced-color-adjust: none;\n border-color: ${SystemColors.FieldText};\n background: ${SystemColors.Field};\n }\n .checked-indicator {\n fill: ${SystemColors.FieldText};\n }\n .indeterminate-indicator {\n background: ${SystemColors.FieldText};\n }\n :host(:not([disabled])) .control:hover,\n .control:active {\n border-color: ${SystemColors.Highlight};\n background: ${SystemColors.Field};\n }\n :host(:${focusVisible}) .control {\n outline: calc(${focusStrokeWidth} * 1px) solid ${SystemColors.FieldText};\n outline-offset: 2px;\n }\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .control {\n outline: calc(${focusStrokeWidth} * 1px) solid ${SystemColors.FieldText};\n outline-offset: 2px;\n }\n :host([aria-checked='true']) .control {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']:not([disabled])) .control:hover,\n .control:active {\n border-color: ${SystemColors.Highlight};\n background: ${SystemColors.HighlightText};\n }\n :host([aria-checked='true']) .checked-indicator {\n fill: ${SystemColors.HighlightText};\n }\n :host([aria-checked='true']:not([disabled]))\n .control:hover\n .checked-indicator {\n fill: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']) .indeterminate-indicator {\n background: ${SystemColors.HighlightText};\n }\n :host([aria-checked='true']) .control:hover .indeterminate-indicator {\n background: ${SystemColors.Highlight};\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host([disabled]) .control {\n forced-color-adjust: none;\n border-color: ${SystemColors.GrayText};\n background: ${SystemColors.Field};\n }\n :host([disabled]) .indeterminate-indicator,\n :host([aria-checked='true'][disabled])\n .control:hover\n .indeterminate-indicator {\n forced-color-adjust: none;\n background: ${SystemColors.GrayText};\n }\n :host([disabled]) .checked-indicator,\n :host([aria-checked='true'][disabled]) .control:hover .checked-indicator {\n forced-color-adjust: none;\n fill: ${SystemColors.GrayText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Checkbox, checkboxTemplate as template } from '@microsoft/fast-foundation';\nimport { checkboxStyles as styles } from './checkbox.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Checkbox} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#checkboxTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpCheckbox = Checkbox.compose({\n baseName: 'checkbox',\n template,\n styles,\n checkedIndicator: /* html */ `\n \n \n \n `,\n indeterminateIndicator: /* html */ `\n
\n `\n});\n/**\n * Base class for Checkbox\n * @public\n */\nexport { Checkbox };\nexport { styles as checkboxStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { accentFillActive, accentFillFocus, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralFillStealthRest, neutralFillStrongHover, neutralFillStrongRest, neutralForegroundRest, neutralLayerFloating, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '@microsoft/fast-components';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { elevation, heightNumber } from '../styles';\n/**\n * Styles for Select\n * @public\n */\nexport const selectStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n --elevation: 14;\n background: ${neutralFillInputRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid ${neutralFillStrongRest};\n box-sizing: border-box;\n color: ${neutralForegroundRest};\n font-family: ${bodyFont};\n height: calc(${heightNumber} * 1px);\n position: relative;\n user-select: none;\n outline: none;\n vertical-align: top;\n }\n\n :host(:not([autowidth])) {\n min-width: 250px;\n }\n\n .listbox {\n ${elevation}\n background: ${neutralLayerFloating};\n border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: column;\n left: 0;\n max-height: calc(var(--max-height) - (${heightNumber} * 1px));\n padding: calc(${designUnit} * 1px) 0;\n overflow-y: auto;\n position: absolute;\n z-index: 1;\n }\n\n :host(:not([autowidth])) .listbox {\n width: 100%;\n }\n\n :host([autowidth]) ::slotted([role='option']),\n :host([autowidth]) ::slotted(option) {\n padding: 0 calc(1em + ${designUnit} * 1.25px + 1px);\n }\n\n .listbox[hidden] {\n display: none;\n }\n\n .control {\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n font-size: ${typeRampBaseFontSize};\n font-family: inherit;\n line-height: ${typeRampBaseLineHeight};\n min-height: 100%;\n padding: 0 calc(${designUnit} * 2.25px);\n width: 100%;\n }\n\n :host([minimal]) {\n --density: -4;\n }\n\n :host(:not([disabled]):hover) {\n background: ${neutralFillInputHover};\n border-color: ${neutralFillStrongHover};\n }\n\n :host(:${focusVisible}) {\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus};\n }\n\n :host([disabled]) {\n cursor: ${disabledCursor};\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]) .control {\n cursor: ${disabledCursor};\n user-select: none;\n }\n\n :host([disabled]:hover) {\n background: ${neutralFillStealthRest};\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host(:not([disabled])) .control:active {\n background: ${neutralFillInputActive};\n border-color: ${accentFillActive};\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n\n :host([open][position='above']) .listbox {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :host([open][position='below']) .listbox {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n :host([open][position='above']) .listbox {\n border-bottom: 0;\n bottom: calc(${heightNumber} * 1px);\n }\n\n :host([open][position='below']) .listbox {\n border-top: 0;\n top: calc(${heightNumber} * 1px);\n }\n\n .selected-value {\n flex: 1 1 auto;\n font-family: inherit;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n .indicator {\n flex: 0 0 auto;\n margin-inline-start: 1em;\n }\n\n slot[name='listbox'] {\n display: none;\n width: 100%;\n }\n\n :host([open]) slot[name='listbox'] {\n display: flex;\n position: absolute;\n ${elevation}\n }\n\n .end {\n margin-inline-start: auto;\n }\n\n .start,\n .end,\n .indicator,\n .select-indicator,\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n fill: currentcolor;\n height: 1em;\n min-height: calc(${designUnit} * 4px);\n min-width: calc(${designUnit} * 4px);\n width: 1em;\n }\n\n ::slotted([role='option']),\n ::slotted(option) {\n flex: 0 0 auto;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host(:not([disabled]):hover),\n :host(:not([disabled]):active) {\n border-color: ${SystemColors.Highlight};\n }\n\n :host(:not([disabled]):${focusVisible}) {\n background-color: ${SystemColors.ButtonFace};\n box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px)\n ${SystemColors.Highlight};\n color: ${SystemColors.ButtonText};\n fill: currentcolor;\n forced-color-adjust: none;\n }\n\n :host(:not([disabled]):${focusVisible}) .listbox {\n background: ${SystemColors.ButtonFace};\n }\n\n :host([disabled]) {\n border-color: ${SystemColors.GrayText};\n background-color: ${SystemColors.ButtonFace};\n color: ${SystemColors.GrayText};\n fill: currentcolor;\n opacity: 1;\n forced-color-adjust: none;\n }\n\n :host([disabled]:hover) {\n background: ${SystemColors.ButtonFace};\n }\n\n :host([disabled]) .control {\n color: ${SystemColors.GrayText};\n border-color: ${SystemColors.GrayText};\n }\n\n :host([disabled]) .control .select-indicator {\n fill: ${SystemColors.GrayText};\n }\n\n :host(:${focusVisible}) ::slotted([aria-selected=\"true\"][role=\"option\"]),\n :host(:${focusVisible}) ::slotted(option[aria-selected=\"true\"]),\n :host(:${focusVisible}) ::slotted([aria-selected=\"true\"][role=\"option\"]:not([disabled])) {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.ButtonText};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${SystemColors.HighlightText};\n color: ${SystemColors.HighlightText};\n fill: currentcolor;\n }\n\n .start,\n .end,\n .indicator,\n .select-indicator,\n ::slotted(svg) {\n color: ${SystemColors.ButtonText};\n fill: currentcolor;\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, focusVisible } from '@microsoft/fast-foundation';\nimport { accentFillFocus, focusStrokeWidth, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { selectStyles } from '../select/select.styles';\n/**\n * Styles for Combobox\n * @public\n */\nexport const comboboxStyles = (context, definition) => css `\n ${selectStyles(context, definition)}\n\n :host(:empty) .listbox {\n display: none;\n }\n\n :host([disabled]) *,\n :host([disabled]) {\n cursor: ${disabledCursor};\n user-select: none;\n }\n\n :host(:focus-within:not([disabled])) {\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus};\n }\n\n .selected-value {\n -webkit-appearance: none;\n background: transparent;\n border: none;\n color: inherit;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n height: calc(100% - (${strokeWidth} * 1px));\n margin: auto 0;\n width: 100%;\n }\n\n .selected-value:hover,\n .selected-value:${focusVisible},\n .selected-value:disabled,\n .selected-value:active {\n outline: none;\n }\n`;\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { __decorate } from \"tslib\";\nimport { attr } from '@microsoft/fast-element';\nimport { Combobox as FoundationCombobox, comboboxTemplate as template } from '@microsoft/fast-foundation';\nimport { comboboxStyles as styles } from './combobox.styles';\n/**\n * Base class for Select\n * @public\n */\nexport class Combobox extends FoundationCombobox {\n /**\n * The connected callback for this FASTElement.\n *\n * @override\n *\n * @internal\n */\n connectedCallback() {\n super.connectedCallback();\n this.setAutoWidth();\n }\n /**\n * Synchronize the form-associated proxy and updates the value property of the element.\n *\n * @param prev - the previous collection of slotted option elements\n * @param next - the next collection of slotted option elements\n *\n * @internal\n */\n slottedOptionsChanged(prev, next) {\n super.slottedOptionsChanged(prev, next);\n this.setAutoWidth();\n }\n /**\n * (Un-)set the width when the autoWidth property changes.\n *\n * @param prev - the previous autoWidth value\n * @param next - the current autoWidth value\n */\n autoWidthChanged(prev, next) {\n if (next) {\n this.setAutoWidth();\n }\n else {\n this.style.removeProperty('width');\n }\n }\n /**\n * Compute the listbox width to set the one of the input.\n */\n setAutoWidth() {\n if (!this.autoWidth || !this.isConnected) {\n return;\n }\n let listWidth = this.listbox.getBoundingClientRect().width;\n // If the list has not been displayed yet trick to get its size\n if (listWidth === 0 && this.listbox.hidden) {\n Object.assign(this.listbox.style, { visibility: 'hidden' });\n this.listbox.removeAttribute('hidden');\n listWidth = this.listbox.getBoundingClientRect().width;\n this.listbox.setAttribute('hidden', '');\n this.listbox.style.removeProperty('visibility');\n }\n if (listWidth > 0) {\n Object.assign(this.style, { width: `${listWidth}px` });\n }\n }\n}\n__decorate([\n attr({ attribute: 'autowidth', mode: 'boolean' })\n], Combobox.prototype, \"autoWidth\", void 0);\n__decorate([\n attr({ attribute: 'minimal', mode: 'boolean' })\n], Combobox.prototype, \"minimal\", void 0);\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Combobox} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#comboboxTemplate}\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n */\nexport const jpCombobox = Combobox.compose({\n baseName: 'combobox',\n baseClass: FoundationCombobox,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n },\n indicator: /* html */ `\n \n \n \n `\n});\nexport { styles as comboboxStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillFocus, bodyFont, controlCornerRadius, designUnit, focusStrokeWidth, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\n/**\n * Styles for Data Grid cell\n * @public\n */\nexport const dataGridCellStyles = (context, definition) => css `\n :host {\n padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);\n color: ${neutralForegroundRest};\n box-sizing: border-box;\n font-family: ${bodyFont};\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n border: transparent calc(${strokeWidth} * 1px) solid;\n font-weight: 400;\n overflow: hidden;\n white-space: nowrap;\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n\n :host(.column-header) {\n font-weight: 600;\n }\n\n :host(:${focusVisible}) {\n outline: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host {\n forced-color-adjust: none;\n border-color: transparent;\n background: ${SystemColors.Field};\n color: ${SystemColors.FieldText};\n }\n\n :host(:${focusVisible}) {\n border-color: ${SystemColors.FieldText};\n box-shadow: 0 0 0 2px inset ${SystemColors.Field};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { DataGrid, DataGridCell, dataGridCellTemplate, DataGridRow, dataGridRowTemplate, dataGridTemplate } from '@microsoft/fast-foundation';\nimport { dataGridStyles, dataGridRowStyles } from '@microsoft/fast-components';\nimport { dataGridCellStyles } from './data-grid-cell.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#DataGridCell} registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpDataGridCell = DataGridCell.compose({\n baseName: 'data-grid-cell',\n template: dataGridCellTemplate,\n styles: dataGridCellStyles\n});\n/**\n * A function that returns a {@link @microsoft/fast-foundation#DataGridRow} registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpDataGridRow = DataGridRow.compose({\n baseName: 'data-grid-row',\n template: dataGridRowTemplate,\n styles: dataGridRowStyles\n});\n/**\n * A function that returns a {@link @microsoft/fast-foundation#DataGrid} registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpDataGrid = DataGrid.compose({\n baseName: 'data-grid',\n template: dataGridTemplate,\n styles: dataGridStyles\n});\n/**\n * Base class for DataGrid\n * @public\n */\nexport { DataGrid };\n/**\n * Base class for DataGridRow\n * @public\n */\nexport { DataGridRow };\n/**\n * Base class for DataGridCell\n * @public\n */\nexport { DataGridCell };\nexport { dataGridCellStyles, dataGridStyles, dataGridRowStyles };\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { BaseFieldStyles } from '../styles/index';\n/**\n * Styles for Date Field\n * @public\n */\nexport const dateFieldStyles = (context, definition) => css `\n ${BaseFieldStyles}\n`;\n","import { html, ref, slotted } from '@microsoft/fast-element';\nimport { endSlotTemplate, startSlotTemplate, whitespaceFilter } from '@microsoft/fast-foundation';\n/**\n * The template for the {@link @jupyter/web-components#(DateField:class)} component.\n * @public\n */\nexport const dateFieldTemplate = (context, definition) => html `\n \n`;\n","import { DateField } from './date-field';\nimport { dateFieldStyles as styles } from './date-field.styles';\nimport { dateFieldTemplate as template } from './date-field.template';\nexport * from './date-field';\nexport * from './date-field.template';\n/**\n * A function that returns a {@link @jupyter/web-components#DateField} registration for configuring the component with a DesignSystem.\n * Implements {@link @jupyter/web-components#dateFieldTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpDateField = DateField.compose({\n baseName: 'date-field',\n styles,\n template,\n shadowOptions: {\n delegatesFocus: true\n }\n});\nexport { styles as dateFieldStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, ListboxElement, ListboxOption } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, focusStrokeWidth, neutralStrokeRest, strokeWidth } from '@microsoft/fast-components';\nimport { heightNumber } from '../styles/size';\n/**\n * Styles for Listbox\n * @public\n */\nexport const listboxStyles = (context, definition) => {\n const ListboxOptionTag = context.tagFor(ListboxOption);\n const hostContext = context.name === context.tagFor(ListboxElement) ? '' : '.listbox';\n // The expression interpolations present in this block cause Prettier to generate\n // various formatting bugs.\n // prettier-ignore\n return css `\n ${!hostContext ? display('inline-flex') : ''}\n\n :host ${hostContext} {\n background: ${fillColor};\n border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n box-sizing: border-box;\n flex-direction: column;\n padding: calc(${designUnit} * 1px) 0;\n }\n\n ${!hostContext ? css `\n :host(:${focusVisible}:not([disabled])) {\n outline: none;\n }\n\n :host(:focus-within:not([disabled])) {\n border-color: ${focusStrokeOuter};\n box-shadow: 0 0 0\n calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${focusStrokeOuter} inset;\n }\n\n :host([disabled]) ::slotted(*) {\n cursor: ${disabledCursor};\n opacity: ${disabledOpacity};\n pointer-events: none;\n }\n ` : ''}\n\n ${hostContext || ':host([size])'} {\n max-height: calc(\n (var(--size) * ${heightNumber} + (${designUnit} * ${strokeWidth} * 2)) * 1px\n );\n overflow-y: auto;\n }\n\n :host([size=\"0\"]) ${hostContext} {\n max-height: none;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host(:not([multiple]):${focusVisible}) ::slotted(${ListboxOptionTag}[aria-selected=\"true\"]),\n :host([multiple]:${focusVisible}) ::slotted(${ListboxOptionTag}[aria-checked=\"true\"]) {\n border-color: ${SystemColors.ButtonText};\n box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};\n }\n\n :host(:not([multiple]):${focusVisible}) ::slotted(${ListboxOptionTag}[aria-selected=\"true\"]) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n fill: currentcolor;\n }\n\n ::slotted(${ListboxOptionTag}[aria-selected=\"true\"]:not([aria-checked=\"true\"])) {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.HighlightText};\n color: ${SystemColors.HighlightText};\n }\n `));\n};\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillRest, bodyFont, controlCornerRadius, designUnit, DirectionalStyleSheetBehavior, disabledOpacity, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentRest, neutralFillStealthRest, neutralForegroundHint, neutralForegroundRest, neutralLayer2, neutralLayer3, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Menu item\n * @public\n */\nexport const menuItemStyles = (context, definition) => css `\n ${display('grid')} :host {\n contain: layout;\n overflow: visible;\n font-family: ${bodyFont};\n outline: none;\n box-sizing: border-box;\n height: calc(${heightNumber} * 1px);\n grid-template-columns: minmax(42px, auto) 1fr minmax(42px, auto);\n grid-template-rows: auto;\n justify-items: center;\n align-items: center;\n padding: 0;\n margin: 0 calc(${designUnit} * 1px);\n white-space: nowrap;\n color: ${neutralForegroundRest};\n fill: currentcolor;\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${focusStrokeWidth} * 1px) solid transparent;\n }\n\n :host(:hover) {\n position: relative;\n z-index: 1;\n }\n\n :host(.indent-0) {\n grid-template-columns: auto 1fr minmax(42px, auto);\n }\n :host(.indent-0) .content {\n grid-column: 1;\n grid-row: 1;\n margin-inline-start: 10px;\n }\n :host(.indent-0) .expand-collapse-glyph-container {\n grid-column: 5;\n grid-row: 1;\n }\n :host(.indent-2) {\n grid-template-columns:\n minmax(42px, auto) minmax(42px, auto) 1fr minmax(42px, auto)\n minmax(42px, auto);\n }\n :host(.indent-2) .content {\n grid-column: 3;\n grid-row: 1;\n margin-inline-start: 10px;\n }\n :host(.indent-2) .expand-collapse-glyph-container {\n grid-column: 5;\n grid-row: 1;\n }\n :host(.indent-2) .start {\n grid-column: 2;\n }\n :host(.indent-2) .end {\n grid-column: 4;\n }\n\n :host(:${focusVisible}) {\n border-color: ${focusStrokeOuter};\n background: ${neutralLayer3};\n color: ${neutralForegroundRest};\n }\n\n :host(:hover) {\n background: ${neutralLayer3};\n color: ${neutralForegroundRest};\n }\n\n :host([aria-checked='true']),\n :host(:active),\n :host(.expanded) {\n background: ${neutralLayer2};\n color: ${neutralForegroundRest};\n }\n\n :host([disabled]) {\n cursor: ${disabledCursor};\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]:hover) {\n color: ${neutralForegroundRest};\n fill: currentcolor;\n background: ${neutralFillStealthRest};\n }\n\n :host([disabled]:hover) .start,\n :host([disabled]:hover) .end,\n :host([disabled]:hover)::slotted(svg) {\n fill: ${neutralForegroundRest};\n }\n\n .expand-collapse-glyph {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n fill: currentcolor;\n }\n\n .content {\n grid-column-start: 2;\n justify-self: start;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .start,\n .end {\n display: flex;\n justify-content: center;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n }\n\n :host(:hover) .start,\n :host(:hover) .end,\n :host(:hover)::slotted(svg),\n :host(:active) .start,\n :host(:active) .end,\n :host(:active)::slotted(svg) {\n fill: ${neutralForegroundRest};\n }\n\n :host(.indent-0[aria-haspopup='menu']) {\n display: grid;\n grid-template-columns: minmax(42px, auto) auto 1fr minmax(42px, auto) minmax(\n 42px,\n auto\n );\n align-items: center;\n min-height: 32px;\n }\n\n :host(.indent-1[aria-haspopup='menu']),\n :host(.indent-1[role='menuitemcheckbox']),\n :host(.indent-1[role='menuitemradio']) {\n display: grid;\n grid-template-columns: minmax(42px, auto) auto 1fr minmax(42px, auto) minmax(\n 42px,\n auto\n );\n align-items: center;\n min-height: 32px;\n }\n\n :host(.indent-2:not([aria-haspopup='menu'])) .end {\n grid-column: 5;\n }\n\n :host .input-container,\n :host .expand-collapse-glyph-container {\n display: none;\n }\n\n :host([aria-haspopup='menu']) .expand-collapse-glyph-container,\n :host([role='menuitemcheckbox']) .input-container,\n :host([role='menuitemradio']) .input-container {\n display: grid;\n margin-inline-end: 10px;\n }\n\n :host([aria-haspopup='menu']) .content,\n :host([role='menuitemcheckbox']) .content,\n :host([role='menuitemradio']) .content {\n grid-column-start: 3;\n }\n\n :host([aria-haspopup='menu'].indent-0) .content {\n grid-column-start: 1;\n }\n\n :host([aria-haspopup='menu']) .end,\n :host([role='menuitemcheckbox']) .end,\n :host([role='menuitemradio']) .end {\n grid-column-start: 4;\n }\n\n :host .expand-collapse,\n :host .checkbox,\n :host .radio {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 20px;\n height: 20px;\n box-sizing: border-box;\n outline: none;\n margin-inline-start: 10px;\n }\n\n :host .checkbox,\n :host .radio {\n border: calc(${strokeWidth} * 1px) solid ${neutralForegroundRest};\n }\n\n :host([aria-checked='true']) .checkbox,\n :host([aria-checked='true']) .radio {\n background: ${accentFillRest};\n border-color: ${accentFillRest};\n }\n\n :host .checkbox {\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n\n :host .radio {\n border-radius: 999px;\n }\n\n :host .checkbox-indicator,\n :host .radio-indicator,\n :host .expand-collapse-indicator,\n ::slotted([slot='checkbox-indicator']),\n ::slotted([slot='radio-indicator']),\n ::slotted([slot='expand-collapse-indicator']) {\n display: none;\n }\n\n ::slotted([slot='end']:not(svg)) {\n margin-inline-end: 10px;\n color: ${neutralForegroundHint};\n }\n\n :host([aria-checked='true']) .checkbox-indicator,\n :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']) {\n width: 100%;\n height: 100%;\n display: block;\n fill: ${foregroundOnAccentRest};\n pointer-events: none;\n }\n\n :host([aria-checked='true']) .radio-indicator {\n position: absolute;\n top: 4px;\n left: 4px;\n right: 4px;\n bottom: 4px;\n border-radius: 999px;\n display: block;\n background: ${foregroundOnAccentRest};\n pointer-events: none;\n }\n\n :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {\n display: block;\n pointer-events: none;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host {\n border-color: transparent;\n color: ${SystemColors.ButtonText};\n forced-color-adjust: none;\n }\n\n :host(:hover) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host(:hover) .start,\n :host(:hover) .end,\n :host(:hover)::slotted(svg),\n :host(:active) .start,\n :host(:active) .end,\n :host(:active)::slotted(svg) {\n fill: ${SystemColors.HighlightText};\n }\n\n :host(.expanded) {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host(:${focusVisible}) {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.ButtonText};\n box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset\n ${SystemColors.HighlightText};\n color: ${SystemColors.HighlightText};\n fill: currentcolor;\n }\n\n :host([disabled]),\n :host([disabled]:hover),\n :host([disabled]:hover) .start,\n :host([disabled]:hover) .end,\n :host([disabled]:hover)::slotted(svg) {\n background: ${SystemColors.Canvas};\n color: ${SystemColors.GrayText};\n fill: currentcolor;\n opacity: 1;\n }\n\n :host .expanded-toggle,\n :host .checkbox,\n :host .radio {\n border-color: ${SystemColors.ButtonText};\n background: ${SystemColors.HighlightText};\n }\n\n :host([checked='true']) .checkbox,\n :host([checked='true']) .radio {\n background: ${SystemColors.HighlightText};\n border-color: ${SystemColors.HighlightText};\n }\n\n :host(:hover) .expanded-toggle,\n :host(:hover) .checkbox,\n :host(:hover) .radio,\n :host(:${focusVisible}) .expanded-toggle,\n :host(:${focusVisible}) .checkbox,\n :host(:${focusVisible}) .radio,\n :host([checked=\"true\"]:hover) .checkbox,\n :host([checked=\"true\"]:hover) .radio,\n :host([checked=\"true\"]:${focusVisible}) .checkbox,\n :host([checked=\"true\"]:${focusVisible}) .radio {\n border-color: ${SystemColors.HighlightText};\n }\n\n :host([aria-checked='true']) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host([aria-checked='true']) .checkbox-indicator,\n :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),\n :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {\n fill: ${SystemColors.Highlight};\n }\n\n :host([aria-checked='true']) .radio-indicator {\n background: ${SystemColors.Highlight};\n }\n\n ::slotted([slot='end']:not(svg)) {\n color: ${SystemColors.ButtonText};\n }\n\n :host(:hover) ::slotted([slot=\"end\"]:not(svg)),\n :host(:${focusVisible}) ::slotted([slot=\"end\"]:not(svg)) {\n color: ${SystemColors.HighlightText};\n }\n `), new DirectionalStyleSheetBehavior(css `\n .expand-collapse-glyph {\n transform: rotate(0deg);\n }\n `, css `\n .expand-collapse-glyph {\n transform: rotate(180deg);\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { MenuItem, menuItemTemplate as template } from '@microsoft/fast-foundation';\nimport { menuItemStyles as styles } from './menu-item.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#MenuItem} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#menuItemTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpMenuItem = MenuItem.compose({\n baseName: 'menu-item',\n template,\n styles,\n checkboxIndicator: /* html */ `\n \n \n \n `,\n expandCollapseGlyph: /* html */ `\n \n \n \n `,\n radioIndicator: /* html */ `\n \n `\n});\n/**\n * Base class for MenuItem\n * @public\n */\nexport { MenuItem };\nexport { styles as menuItemStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { neutralForegroundRest } from '../design-tokens';\nimport { BaseFieldStyles } from '../styles/index';\n/**\n * Styles for Number Field\n * @public\n */\nexport const numberFieldStyles = (context, definition) => css `\n ${BaseFieldStyles}\n\n .controls {\n opacity: 0;\n }\n\n .step-up-glyph,\n .step-down-glyph {\n display: block;\n padding: 4px 10px;\n cursor: pointer;\n }\n\n .step-up-glyph:before,\n .step-down-glyph:before {\n content: '';\n display: block;\n border: solid transparent 6px;\n }\n\n .step-up-glyph:before {\n border-bottom-color: ${neutralForegroundRest};\n }\n\n .step-down-glyph:before {\n border-top-color: ${neutralForegroundRest};\n }\n\n :host(:hover:not([disabled])) .controls,\n :host(:focus-within:not([disabled])) .controls {\n opacity: 1;\n }\n`;\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { NumberField as FoundationNumberField, numberFieldTemplate as template } from '@microsoft/fast-foundation';\nimport { NumberField } from '@microsoft/fast-components';\nimport { numberFieldStyles as styles } from './number-field.styles';\n// TODO\n// we need to add error/invalid\n/**\n * A function that returns a {@link @microsoft/fast-foundation#NumberField} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#numberFieldTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpNumberField = NumberField.compose({\n baseName: 'number-field',\n baseClass: FoundationNumberField,\n styles,\n template,\n shadowOptions: {\n delegatesFocus: true\n },\n stepDownGlyph: /* html */ `\n \n `,\n stepUpGlyph: /* html */ `\n \n `\n});\nexport { NumberField } from '@microsoft/fast-components';\n/**\n * Styles for NumberField\n * @public\n */\nexport { styles as numberFieldStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentFocus, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillHover, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight } from '@microsoft/fast-components';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { heightNumber } from '../styles';\n/**\n * Styles for Option\n * @public\n */\nexport const optionStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n align-items: center;\n font-family: ${bodyFont};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${focusStrokeWidth} * 1px) solid transparent;\n box-sizing: border-box;\n color: ${neutralForegroundRest};\n cursor: pointer;\n flex: 0 0 auto;\n fill: currentcolor;\n font-size: ${typeRampBaseFontSize};\n height: calc(${heightNumber} * 1px);\n line-height: ${typeRampBaseLineHeight};\n margin: 0 calc(${designUnit} * 1px);\n outline: none;\n overflow: hidden;\n padding: 0 calc(${designUnit} * 2.25px);\n user-select: none;\n white-space: nowrap;\n }\n\n /* TODO should we use outline instead of background for focus to support multi-selection */\n :host(:${focusVisible}) {\n background: ${accentFillFocus};\n color: ${foregroundOnAccentFocus};\n }\n\n :host([aria-selected='true']) {\n background: ${accentFillRest};\n color: ${foregroundOnAccentRest};\n }\n\n :host(:hover) {\n background: ${accentFillHover};\n color: ${foregroundOnAccentHover};\n }\n\n :host(:active) {\n background: ${accentFillActive};\n color: ${foregroundOnAccentActive};\n }\n\n :host(:not([aria-selected='true']):hover),\n :host(:not([aria-selected='true']):active) {\n background: ${neutralFillHover};\n color: ${neutralForegroundRest};\n }\n\n :host([disabled]) {\n cursor: ${disabledCursor};\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]:hover) {\n background-color: inherit;\n }\n\n .content {\n grid-column-start: 2;\n justify-self: start;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .start,\n .end,\n ::slotted(svg) {\n display: flex;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n height: calc(${designUnit} * 4px);\n width: calc(${designUnit} * 4px);\n }\n\n ::slotted([slot='end']) {\n margin-inline-start: 1ch;\n }\n\n ::slotted([slot='start']) {\n margin-inline-end: 1ch;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host {\n border-color: transparent;\n forced-color-adjust: none;\n color: ${SystemColors.ButtonText};\n fill: currentcolor;\n }\n\n :host(:not([aria-selected='true']):hover),\n :host([aria-selected='true']) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host([disabled]),\n :host([disabled]:not([aria-selected='true']):hover) {\n background: ${SystemColors.Canvas};\n color: ${SystemColors.GrayText};\n fill: currentcolor;\n opacity: 1;\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { ListboxOption, listboxOptionTemplate as template } from '@microsoft/fast-foundation';\nimport { optionStyles as styles } from './option.styles';\n/**\n * A function that returns a Option registration for configuring the component with a DesignSystem.\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n */\nexport const jpOption = ListboxOption.compose({\n baseName: 'option',\n template,\n styles\n});\n/**\n * Base class for Option\n * @public\n */\nexport { ListboxOption as Option };\nexport { styles as optionStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Radio\n * @public\n */\nexport const radioStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n --input-size: calc((${heightNumber} / 2) + ${designUnit});\n align-items: center;\n outline: none;\n margin: calc(${designUnit} * 1px) 0;\n /* Chromium likes to select label text or the default slot when\n the radio is clicked. Maybe there is a better solution here? */\n user-select: none;\n position: relative;\n flex-direction: row;\n transition: all 0.2s ease-in-out;\n }\n\n .control {\n position: relative;\n width: calc((${heightNumber} / 2 + ${designUnit}) * 1px);\n height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);\n box-sizing: border-box;\n border-radius: 999px;\n border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};\n background: ${neutralFillInputRest};\n outline: none;\n cursor: pointer;\n }\n\n .label {\n font-family: ${bodyFont};\n color: ${neutralForegroundRest};\n /* Need to discuss with Brian how HorizontalSpacingNumber can work.\n https://github.com/microsoft/fast/issues/2766 */\n padding-inline-start: calc(${designUnit} * 2px + 2px);\n margin-inline-end: calc(${designUnit} * 2px + 2px);\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .control,\n .checked-indicator {\n flex-shrink: 0;\n }\n\n .checked-indicator {\n position: absolute;\n top: 5px;\n left: 5px;\n right: 5px;\n bottom: 5px;\n border-radius: 999px;\n display: inline-block;\n background: ${foregroundOnAccentRest};\n fill: ${foregroundOnAccentRest};\n opacity: 0;\n pointer-events: none;\n }\n\n :host(:not([disabled])) .control:hover {\n background: ${neutralFillInputHover};\n border-color: ${neutralStrokeHover};\n }\n\n :host(:not([disabled])) .control:active {\n background: ${neutralFillInputActive};\n border-color: ${neutralStrokeActive};\n }\n\n :host(:${focusVisible}) .control {\n outline: solid calc(${focusStrokeWidth} * 1px) ${accentFillFocus};\n }\n\n :host([aria-checked='true']) .control {\n background: ${accentFillRest};\n border: calc(${strokeWidth} * 1px) solid ${accentFillRest};\n }\n\n :host([aria-checked='true']:not([disabled])) .control:hover {\n background: ${accentFillHover};\n border: calc(${strokeWidth} * 1px) solid ${accentFillHover};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:hover\n .checked-indicator {\n background: ${foregroundOnAccentHover};\n fill: ${foregroundOnAccentHover};\n }\n\n :host([aria-checked='true']:not([disabled])) .control:active {\n background: ${accentFillActive};\n border: calc(${strokeWidth} * 1px) solid ${accentFillActive};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:active\n .checked-indicator {\n background: ${foregroundOnAccentActive};\n fill: ${foregroundOnAccentActive};\n }\n\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .control {\n outline-offset: 2px;\n outline: solid calc(${focusStrokeWidth} * 1px) ${accentFillFocus};\n }\n\n :host([disabled]) .label,\n :host([readonly]) .label,\n :host([readonly]) .control,\n :host([disabled]) .control {\n cursor: ${disabledCursor};\n }\n\n :host([aria-checked='true']) .checked-indicator {\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n .control,\n :host([aria-checked='true']:not([disabled])) .control {\n forced-color-adjust: none;\n border-color: ${SystemColors.FieldText};\n background: ${SystemColors.Field};\n }\n :host(:not([disabled])) .control:hover {\n border-color: ${SystemColors.Highlight};\n background: ${SystemColors.Field};\n }\n :host([aria-checked='true']:not([disabled])) .control:hover,\n :host([aria-checked='true']:not([disabled])) .control:active {\n border-color: ${SystemColors.Highlight};\n background: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']) .checked-indicator {\n background: ${SystemColors.Highlight};\n fill: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']:not([disabled]))\n .control:hover\n .checked-indicator,\n :host([aria-checked='true']:not([disabled]))\n .control:active\n .checked-indicator {\n background: ${SystemColors.HighlightText};\n fill: ${SystemColors.HighlightText};\n }\n :host(:${focusVisible}) .control {\n border-color: ${SystemColors.Highlight};\n outline-offset: 2px;\n outline: solid calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText};\n }\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .control {\n border-color: ${SystemColors.Highlight};\n outline: solid calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText};\n }\n :host([disabled]) {\n forced-color-adjust: none;\n opacity: 1;\n }\n :host([disabled]) .label {\n color: ${SystemColors.GrayText};\n }\n :host([disabled]) .control,\n :host([aria-checked='true'][disabled]) .control:hover,\n .control:active {\n background: ${SystemColors.Field};\n border-color: ${SystemColors.GrayText};\n }\n :host([disabled]) .checked-indicator,\n :host([aria-checked='true'][disabled]) .control:hover .checked-indicator {\n fill: ${SystemColors.GrayText};\n background: ${SystemColors.GrayText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Radio, radioTemplate as template } from '@microsoft/fast-foundation';\nimport { radioStyles as styles } from './radio.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Radio} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#radioTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpRadio = Radio.compose({\n baseName: 'radio',\n template,\n styles,\n checkedIndicator: /* html */ `\n
\n `\n});\n/**\n * Base class for Radio\n * @public\n */\nexport { Radio };\nexport { styles as radioStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { DesignToken, focusVisible } from '@microsoft/fast-foundation';\nimport { bodyFont, controlCornerRadius, density, neutralFillRecipe, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, designUnit } from '../design-tokens';\nimport { BaseFieldStyles, heightNumber } from '../styles/index';\nconst clearButtonHover = DesignToken.create('clear-button-hover').withDefault((target) => {\n const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);\n const inputRecipe = neutralFillRecipe.getValueFor(target);\n return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).hover)\n .hover;\n});\nconst clearButtonActive = DesignToken.create('clear-button-active').withDefault((target) => {\n const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);\n const inputRecipe = neutralFillRecipe.getValueFor(target);\n return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).hover)\n .active;\n});\nexport const searchStyles = (context, definition) => css `\n ${BaseFieldStyles}\n\n .control {\n padding: 0;\n padding-inline-start: calc(${designUnit} * 2px + 1px);\n padding-inline-end: calc(\n (${designUnit} * 2px) + (${heightNumber} * 1px) + 1px\n );\n }\n\n .control::-webkit-search-cancel-button {\n -webkit-appearance: none;\n }\n\n .control:hover,\n .control:${focusVisible},\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .clear-button {\n height: calc(100% - 2px);\n opacity: 0;\n margin: 1px;\n background: transparent;\n color: ${neutralForegroundRest};\n fill: currentcolor;\n border: none;\n border-radius: calc(${controlCornerRadius} * 1px);\n min-width: calc(${heightNumber} * 1px);\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n outline: none;\n font-family: ${bodyFont};\n padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);\n }\n\n .clear-button:hover {\n background: ${neutralFillStealthHover};\n }\n\n .clear-button:active {\n background: ${neutralFillStealthActive};\n }\n\n :host([appearance='filled']) .clear-button:hover {\n background: ${clearButtonHover};\n }\n\n :host([appearance='filled']) .clear-button:active {\n background: ${clearButtonActive};\n }\n\n .input-wrapper {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n .start,\n .end {\n display: flex;\n margin: 1px;\n }\n\n ::slotted([slot='end']) {\n height: 100%;\n }\n\n .end {\n margin-inline-end: 1px;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n margin-inline-end: 11px;\n margin-inline-start: 11px;\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .clear-button__hidden {\n opacity: 0;\n }\n\n :host(:hover:not([disabled], [readOnly])) .clear-button,\n :host(:active:not([disabled], [readOnly])) .clear-button,\n :host(:focus-within:not([disabled], [readOnly])) .clear-button {\n opacity: 1;\n }\n\n :host(:hover:not([disabled], [readOnly])) .clear-button__hidden,\n :host(:active:not([disabled], [readOnly])) .clear-button__hidden,\n :host(:focus-within:not([disabled], [readOnly])) .clear-button__hidden {\n opacity: 0;\n }\n`;\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Search as FoundationSearch, searchTemplate as template } from '@microsoft/fast-foundation';\nimport { Search } from '@microsoft/fast-components';\nimport { searchStyles as styles } from './search.styles';\n// TODO\n// we need to add error/invalid\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Search} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#searchTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpSearch = Search.compose({\n baseName: 'search',\n baseClass: FoundationSearch,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\nexport { Search } from '@microsoft/fast-components';\n/**\n * Styles for Search\n * @public\n */\nexport { styles as searchStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillFocus, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeWidth, neutralForegroundRest, neutralStrokeHover, neutralStrokeRest } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Slider\n * @public\n */\nexport const sliderStyles = (context, definition) => css `\n :host([hidden]) {\n display: none;\n }\n\n ${display('inline-grid')} :host {\n --thumb-size: calc(${heightNumber} * 0.5 - ${designUnit});\n --thumb-translate: calc(\n var(--thumb-size) * -0.5 + var(--track-width) / 2\n );\n --track-overhang: calc((${designUnit} / 2) * -1);\n --track-width: ${designUnit};\n --jp-slider-height: calc(var(--thumb-size) * 10);\n align-items: center;\n width: 100%;\n margin: calc(${designUnit} * 1px) 0;\n user-select: none;\n box-sizing: border-box;\n border-radius: calc(${controlCornerRadius} * 1px);\n outline: none;\n cursor: pointer;\n }\n :host([orientation='horizontal']) .positioning-region {\n position: relative;\n margin: 0 8px;\n display: grid;\n grid-template-rows: calc(var(--thumb-size) * 1px) 1fr;\n }\n :host([orientation='vertical']) .positioning-region {\n position: relative;\n margin: 0 8px;\n display: grid;\n height: 100%;\n grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;\n }\n\n :host(:${focusVisible}) .thumb-cursor {\n box-shadow:\n 0 0 0 2px ${fillColor},\n 0 0 0 calc((2 + ${focusStrokeWidth}) * 1px) ${accentFillFocus};\n }\n\n .thumb-container {\n position: absolute;\n height: calc(var(--thumb-size) * 1px);\n width: calc(var(--thumb-size) * 1px);\n transition: all 0.2s ease;\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n .thumb-cursor {\n border: none;\n width: calc(var(--thumb-size) * 1px);\n height: calc(var(--thumb-size) * 1px);\n background: ${neutralForegroundRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n .thumb-cursor:hover {\n background: ${neutralForegroundRest};\n border-color: ${neutralStrokeHover};\n }\n .thumb-cursor:active {\n background: ${neutralForegroundRest};\n }\n :host([orientation='horizontal']) .thumb-container {\n transform: translateX(calc(var(--thumb-size) * 0.5px))\n translateY(calc(var(--thumb-translate) * 1px));\n }\n :host([orientation='vertical']) .thumb-container {\n transform: translateX(calc(var(--thumb-translate) * 1px))\n translateY(calc(var(--thumb-size) * 0.5px));\n }\n :host([orientation='horizontal']) {\n min-width: calc(var(--thumb-size) * 1px);\n }\n :host([orientation='horizontal']) .track {\n right: calc(var(--track-overhang) * 1px);\n left: calc(var(--track-overhang) * 1px);\n align-self: start;\n height: calc(var(--track-width) * 1px);\n }\n :host([orientation='vertical']) .track {\n top: calc(var(--track-overhang) * 1px);\n bottom: calc(var(--track-overhang) * 1px);\n width: calc(var(--track-width) * 1px);\n height: 100%;\n }\n .track {\n background: ${neutralStrokeRest};\n position: absolute;\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n :host([orientation='vertical']) {\n height: calc(var(--jp-slider-height) * 1px);\n min-height: calc(var(--thumb-size) * 1px);\n min-width: calc(${designUnit} * 20px);\n }\n :host([disabled]),\n :host([readonly]) {\n cursor: ${disabledCursor};\n }\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n .thumb-cursor {\n forced-color-adjust: none;\n border-color: ${SystemColors.FieldText};\n background: ${SystemColors.FieldText};\n }\n .thumb-cursor:hover,\n .thumb-cursor:active {\n background: ${SystemColors.Highlight};\n }\n .track {\n forced-color-adjust: none;\n background: ${SystemColors.FieldText};\n }\n :host(:${focusVisible}) .thumb-cursor {\n border-color: ${SystemColors.Highlight};\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host([disabled]) .track,\n :host([disabled]) .thumb-cursor {\n forced-color-adjust: none;\n background: ${SystemColors.GrayText};\n }\n\n :host(:${focusVisible}) .thumb-cursor {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n box-shadow:\n 0 0 0 2px ${SystemColors.Field},\n 0 0 0 4px ${SystemColors.FieldText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Slider, sliderTemplate as template } from '@microsoft/fast-foundation';\nimport { sliderStyles as styles } from './slider.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Slider} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#sliderTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpSlider = Slider.compose({\n baseName: 'slider',\n template,\n styles,\n thumb: /* html */ `\n
\n `\n});\n/**\n * Base class for Slider\n * @public\n */\nexport { Slider };\nexport { styles as sliderStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, bodyFont, controlCornerRadius, designUnit, DirectionalStyleSheetBehavior, disabledOpacity, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Switch\n * @public\n */\nexport const switchStyles = (context, definition) => css `\n :host([hidden]) {\n display: none;\n }\n\n ${display('inline-flex')} :host {\n align-items: center;\n outline: none;\n font-family: ${bodyFont};\n margin: calc(${designUnit} * 1px) 0;\n ${\n/*\n * Chromium likes to select label text or the default slot when\n * the checkbox is clicked. Maybe there is a better solution here?\n */ ''} user-select: none;\n }\n\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]) .label,\n :host([readonly]) .label,\n :host([readonly]) .switch,\n :host([disabled]) .switch {\n cursor: ${disabledCursor};\n }\n\n .switch {\n position: relative;\n outline: none;\n box-sizing: border-box;\n width: calc(${heightNumber} * 1px);\n height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);\n background: ${neutralFillInputRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};\n }\n\n .switch:hover {\n background: ${neutralFillInputHover};\n border-color: ${neutralStrokeHover};\n cursor: pointer;\n }\n\n host([disabled]) .switch:hover,\n host([readonly]) .switch:hover {\n background: ${neutralFillInputHover};\n border-color: ${neutralStrokeHover};\n cursor: ${disabledCursor};\n }\n\n :host(:not([disabled])) .switch:active {\n background: ${neutralFillInputActive};\n border-color: ${neutralStrokeActive};\n }\n\n :host(:${focusVisible}) .switch {\n outline-offset: 2px;\n outline: solid calc(${focusStrokeWidth} * 1px) ${accentFillFocus};\n }\n\n .checked-indicator {\n position: absolute;\n top: 5px;\n bottom: 5px;\n background: ${neutralForegroundRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n transition: all 0.2s ease-in-out;\n }\n\n .status-message {\n color: ${neutralForegroundRest};\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n }\n\n :host([disabled]) .status-message,\n :host([readonly]) .status-message {\n cursor: ${disabledCursor};\n }\n\n .label {\n color: ${neutralForegroundRest};\n\n ${\n/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ''} margin-inline-end: calc(${designUnit} * 2px + 2px);\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n cursor: pointer;\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n ::slotted([slot='checked-message']),\n ::slotted([slot='unchecked-message']) {\n margin-inline-start: calc(${designUnit} * 2px + 2px);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n background: ${foregroundOnAccentRest};\n }\n\n :host([aria-checked='true']) .switch {\n background: ${accentFillRest};\n border-color: ${accentFillRest};\n }\n\n :host([aria-checked='true']:not([disabled])) .switch:hover {\n background: ${accentFillHover};\n border-color: ${accentFillHover};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .switch:hover\n .checked-indicator {\n background: ${foregroundOnAccentHover};\n }\n\n :host([aria-checked='true']:not([disabled])) .switch:active {\n background: ${accentFillActive};\n border-color: ${accentFillActive};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .switch:active\n .checked-indicator {\n background: ${foregroundOnAccentActive};\n }\n\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .switch {\n outline: solid calc(${focusStrokeWidth} * 1px) ${accentFillFocus};\n }\n\n .unchecked-message {\n display: block;\n }\n\n .checked-message {\n display: none;\n }\n\n :host([aria-checked='true']) .unchecked-message {\n display: none;\n }\n\n :host([aria-checked='true']) .checked-message {\n display: block;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n .checked-indicator,\n :host(:not([disabled])) .switch:active .checked-indicator {\n forced-color-adjust: none;\n background: ${SystemColors.FieldText};\n }\n .switch {\n forced-color-adjust: none;\n background: ${SystemColors.Field};\n border-color: ${SystemColors.FieldText};\n }\n :host(:not([disabled])) .switch:hover {\n background: ${SystemColors.HighlightText};\n border-color: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']) .switch {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']:not([disabled])) .switch:hover,\n :host(:not([disabled])) .switch:active {\n background: ${SystemColors.HighlightText};\n border-color: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']) .checked-indicator {\n background: ${SystemColors.HighlightText};\n }\n :host([aria-checked='true']:not([disabled]))\n .switch:hover\n .checked-indicator {\n background: ${SystemColors.Highlight};\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host(:${focusVisible}) .switch {\n border-color: ${SystemColors.Highlight};\n outline-offset: 2px;\n outline: solid calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText};\n }\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .switch {\n outline: solid calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText};\n }\n :host([disabled]) .checked-indicator {\n background: ${SystemColors.GrayText};\n }\n :host([disabled]) .switch {\n background: ${SystemColors.Field};\n border-color: ${SystemColors.GrayText};\n }\n `), new DirectionalStyleSheetBehavior(css `\n .checked-indicator {\n left: 5px;\n right: calc(((${heightNumber} / 2) + 1) * 1px);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n left: calc(((${heightNumber} / 2) + 1) * 1px);\n right: 5px;\n }\n `, css `\n .checked-indicator {\n right: 5px;\n left: calc(((${heightNumber} / 2) + 1) * 1px);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n right: calc(((${heightNumber} / 2) + 1) * 1px);\n left: 5px;\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Switch, switchTemplate as template } from '@microsoft/fast-foundation';\nimport { switchStyles as styles } from './switch.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Switch} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#switchTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpSwitch = Switch.compose({\n baseName: 'switch',\n template,\n styles,\n switch: /* html */ `\n \n `\n});\n/**\n * Base class for Switch\n * @public\n */\nexport { Switch };\nexport { styles as switchStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { accentFillFocus, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthRest, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '@microsoft/fast-components';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { heightNumber } from '../styles';\n/**\n * Styles for Tab\n * @public\n */\nexport const tabStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n box-sizing: border-box;\n font-family: ${bodyFont};\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n height: calc(${heightNumber} * 1px);\n padding: calc(${designUnit} * 5px) calc(${designUnit} * 4px);\n color: ${neutralForegroundHint};\n fill: currentcolor;\n border-radius: 0 0 calc(${controlCornerRadius} * 1px)\n calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid transparent;\n align-items: center;\n grid-row: 2;\n justify-content: center;\n cursor: pointer;\n }\n\n :host(:hover) {\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host(:active) {\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host([disabled]) {\n cursor: ${disabledCursor};\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]:hover) {\n color: ${neutralForegroundHint};\n background: ${neutralFillStealthRest};\n }\n\n :host([aria-selected='true']) {\n background: ${neutralFillRest};\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host([aria-selected='true']:hover) {\n background: ${neutralFillHover};\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host([aria-selected='true']:active) {\n background: ${neutralFillActive};\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host(:${focusVisible}) {\n outline: none;\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus};\n }\n\n :host(:focus) {\n outline: none;\n }\n\n :host(.vertical) {\n justify-content: end;\n grid-column: 2;\n border-bottom-left-radius: 0;\n border-top-right-radius: calc(${controlCornerRadius} * 1px);\n }\n\n :host(.vertical[aria-selected='true']) {\n z-index: 2;\n }\n\n :host(.vertical:hover) {\n color: ${neutralForegroundRest};\n }\n\n :host(.vertical:active) {\n color: ${neutralForegroundRest};\n }\n\n :host(.vertical:hover[aria-selected='true']) {\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host {\n forced-color-adjust: none;\n border-color: transparent;\n color: ${SystemColors.ButtonText};\n fill: currentcolor;\n }\n :host(:hover),\n :host(.vertical:hover),\n :host([aria-selected='true']:hover) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n fill: currentcolor;\n }\n :host([aria-selected='true']) {\n background: ${SystemColors.HighlightText};\n color: ${SystemColors.Highlight};\n fill: currentcolor;\n }\n :host(:${focusVisible}) {\n border-color: ${SystemColors.ButtonText};\n box-shadow: none;\n }\n :host([disabled]),\n :host([disabled]:hover) {\n opacity: 1;\n color: ${SystemColors.GrayText};\n background: ${SystemColors.ButtonFace};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Tab, tabTemplate as template } from '@microsoft/fast-foundation';\nimport { tabStyles as styles } from './tab.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Tab} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#tabTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpTab = Tab.compose({\n baseName: 'tab',\n template,\n styles\n});\n/**\n * Base class for Tab\n * @public\n */\nexport { Tab };\nexport { styles as tabStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillRest, bodyFont, controlCornerRadius, designUnit, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Tabs\n * @public\n */\nexport const tabsStyles = (context, definition) => css `\n ${display('grid')} :host {\n box-sizing: border-box;\n font-family: ${bodyFont};\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n color: ${neutralForegroundRest};\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto 1fr;\n }\n\n .tablist {\n display: grid;\n grid-template-rows: auto auto;\n grid-template-columns: auto;\n position: relative;\n width: max-content;\n align-self: end;\n padding: calc(${designUnit} * 4px) calc(${designUnit} * 4px) 0;\n box-sizing: border-box;\n }\n\n .start,\n .end {\n align-self: center;\n }\n\n .activeIndicator {\n grid-row: 1;\n grid-column: 1;\n width: 100%;\n height: 4px;\n justify-self: center;\n background: ${accentFillRest};\n margin-top: 0;\n border-radius: calc(${controlCornerRadius} * 1px)\n calc(${controlCornerRadius} * 1px) 0 0;\n }\n\n .activeIndicatorTransition {\n transition: transform 0.01s ease-in-out;\n }\n\n .tabpanel {\n grid-row: 2;\n grid-column-start: 1;\n grid-column-end: 4;\n position: relative;\n }\n\n :host([orientation='vertical']) {\n grid-template-rows: auto 1fr auto;\n grid-template-columns: auto 1fr;\n }\n\n :host([orientation='vertical']) .tablist {\n grid-row-start: 2;\n grid-row-end: 2;\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: auto 1fr;\n position: relative;\n width: max-content;\n justify-self: end;\n align-self: flex-start;\n width: 100%;\n padding: 0 calc(${designUnit} * 4px)\n calc((${heightNumber} - ${designUnit}) * 1px) 0;\n }\n\n :host([orientation='vertical']) .tabpanel {\n grid-column: 2;\n grid-row-start: 1;\n grid-row-end: 4;\n }\n\n :host([orientation='vertical']) .end {\n grid-row: 3;\n }\n\n :host([orientation='vertical']) .activeIndicator {\n grid-column: 1;\n grid-row: 1;\n width: 4px;\n height: 100%;\n margin-inline-end: 0px;\n align-self: center;\n border-radius: calc(${controlCornerRadius} * 1px) 0 0\n calc(${controlCornerRadius} * 1px);\n }\n\n :host([orientation='vertical']) .activeIndicatorTransition {\n transition: transform 0.01s ease-in-out;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n .activeIndicator,\n :host([orientation='vertical']) .activeIndicator {\n forced-color-adjust: none;\n background: ${SystemColors.Highlight};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Tabs, tabsTemplate as template } from '@microsoft/fast-foundation';\nimport { tabsStyles as styles } from './tabs.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Tabs} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#tabsTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpTabs = Tabs.compose({\n baseName: 'tabs',\n template,\n styles\n});\nexport * from '../tab';\nexport * from '../tab-panel';\n/**\n * Base class for Tabs\n * @public\n */\nexport { Tabs };\nexport { styles as tabsStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { accentFillFocus, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillHover, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralFillRest, neutralFillStrongActive, neutralFillStrongHover, neutralFillStrongRest, neutralForegroundRest, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Text Area\n * @public\n */\nexport const textAreaStyles = (context, definition) => css `\n ${display('inline-block')} :host {\n font-family: ${bodyFont};\n outline: none;\n user-select: none;\n }\n\n .control {\n box-sizing: border-box;\n position: relative;\n color: ${neutralForegroundRest};\n background: ${neutralFillInputRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid ${neutralFillStrongRest};\n height: calc(${heightNumber} * 2px);\n font: inherit;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n padding: calc(${designUnit} * 2px + 1px);\n width: 100%;\n resize: none;\n }\n\n .control:hover:enabled {\n background: ${neutralFillInputHover};\n border-color: ${neutralFillStrongHover};\n }\n\n .control:active:enabled {\n background: ${neutralFillInputActive};\n border-color: ${neutralFillStrongActive};\n }\n\n .control:hover,\n .control:${focusVisible},\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n :host(:focus-within) .control {\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus};\n }\n\n :host([appearance='filled']) .control {\n background: ${neutralFillRest};\n }\n\n :host([appearance='filled']:hover:not([disabled])) .control {\n background: ${neutralFillHover};\n }\n\n :host([resize='both']) .control {\n resize: both;\n }\n\n :host([resize='horizontal']) .control {\n resize: horizontal;\n }\n\n :host([resize='vertical']) .control {\n resize: vertical;\n }\n\n .label {\n display: block;\n color: ${neutralForegroundRest};\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n margin-bottom: 4px;\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n :host([disabled]) .label,\n :host([readonly]) .label,\n :host([readonly]) .control,\n :host([disabled]) .control {\n cursor: ${disabledCursor};\n }\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n :host([disabled]) .control {\n border-color: ${neutralStrokeRest};\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([disabled]) {\n opacity: 1;\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { TextArea as FoundationTextArea, textAreaTemplate as template } from '@microsoft/fast-foundation';\nimport { TextArea } from '@microsoft/fast-components';\nimport { textAreaStyles as styles } from './text-area.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#TextArea} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#textAreaTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpTextArea = TextArea.compose({\n baseName: 'text-area',\n baseClass: FoundationTextArea,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\nexport { TextArea, styles as textAreaStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { BaseFieldStyles } from '../styles/index';\n/**\n * Styles for Text Field\n * @public\n */\nexport const textFieldStyles = (context, definition) => css `\n ${BaseFieldStyles}\n\n .start,\n .end {\n display: flex;\n }\n`;\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';\nimport { TextField } from '@microsoft/fast-components';\nimport { textFieldStyles as styles } from './text-field.styles';\n// TODO\n// we need to add error/invalid\n/**\n * A function that returns a TextField registration for configuring the component with a DesignSystem.\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpTextField = TextField.compose({\n baseName: 'text-field',\n baseClass: FoundationTextField,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\nexport { TextField } from '@microsoft/fast-components';\n/**\n * Styles for TextField\n * @public\n */\nexport { styles as textFieldStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillFocus, controlCornerRadius, fillColor, focusStrokeWidth, strokeWidth } from '../design-tokens';\n/**\n * Styles for the Toolbar\n *\n * @public\n */\nexport const toolbarStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n --toolbar-item-gap: calc(\n (var(--design-unit) + calc(var(--density) + 2)) * 1px\n );\n background-color: ${fillColor};\n border-radius: calc(${controlCornerRadius} * 1px);\n fill: currentcolor;\n padding: var(--toolbar-item-gap);\n }\n\n :host(${focusVisible}) {\n outline: calc(${strokeWidth} * 1px) solid ${accentFillFocus};\n }\n\n .positioning-region {\n align-items: flex-start;\n display: inline-flex;\n flex-flow: row wrap;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n }\n\n :host([orientation='vertical']) .positioning-region {\n flex-direction: column;\n }\n\n ::slotted(:not([slot])) {\n flex: 0 0 auto;\n margin: 0 var(--toolbar-item-gap);\n }\n\n :host([orientation='vertical']) ::slotted(:not([slot])) {\n margin: var(--toolbar-item-gap) 0;\n }\n\n .start,\n .end {\n display: flex;\n margin: auto;\n margin-inline: 0;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host(:${focusVisible}) {\n box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px)\n ${SystemColors.Highlight};\n color: ${SystemColors.ButtonText};\n forced-color-adjust: none;\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Toolbar } from '@microsoft/fast-components';\nimport { Toolbar as FoundationToolbar, toolbarTemplate as template } from '@microsoft/fast-foundation';\nimport { toolbarStyles as styles } from './toolbar.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Toolbar} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#toolbarTemplate}\n *\n * @public\n * @remarks\n *\n * Generates HTML Element: ``\n *\n */\nexport const jpToolbar = Toolbar.compose({\n baseName: 'toolbar',\n baseClass: FoundationToolbar,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\nexport { Toolbar, styles as toolbarStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css, cssPartial } from '@microsoft/fast-element';\nimport { DesignToken, disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, TreeItem } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillFocus, accentForegroundRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, DirectionalStyleSheetBehavior, disabledOpacity, focusStrokeWidth, neutralFillRecipe, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralFillStealthRest, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\nconst ltr = css `\n .expand-collapse-glyph {\n transform: rotate(0deg);\n }\n :host(.nested) .expand-collapse-button {\n left: var(\n --expand-collapse-button-nested-width,\n calc(${heightNumber} * -1px)\n );\n }\n :host([selected])::after {\n left: calc(${focusStrokeWidth} * 1px);\n }\n :host([expanded]) > .positioning-region .expand-collapse-glyph {\n transform: rotate(90deg);\n }\n`;\nconst rtl = css `\n .expand-collapse-glyph {\n transform: rotate(180deg);\n }\n :host(.nested) .expand-collapse-button {\n right: var(\n --expand-collapse-button-nested-width,\n calc(${heightNumber} * -1px)\n );\n }\n :host([selected])::after {\n right: calc(${focusStrokeWidth} * 1px);\n }\n :host([expanded]) > .positioning-region .expand-collapse-glyph {\n transform: rotate(90deg);\n }\n`;\n/**\n * Tree item expand collapse button size CSS Partial\n * @public\n */\nexport const expandCollapseButtonSize = cssPartial `((${baseHeightMultiplier} / 2) * ${designUnit}) + ((${designUnit} * ${density}) / 2)`;\nconst expandCollapseHoverBehavior = DesignToken.create('tree-item-expand-collapse-hover').withDefault((target) => {\n const recipe = neutralFillStealthRecipe.getValueFor(target);\n return recipe.evaluate(target, recipe.evaluate(target).hover).hover;\n});\nconst selectedExpandCollapseHoverBehavior = DesignToken.create('tree-item-expand-collapse-selected-hover').withDefault((target) => {\n const baseRecipe = neutralFillRecipe.getValueFor(target);\n const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);\n return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;\n});\n/**\n * Styles for Tree Item\n * @public\n */\nexport const treeItemStyles = (context, definition) => css `\n ${display('block')} :host {\n contain: content;\n position: relative;\n outline: none;\n color: ${neutralForegroundRest};\n background: ${neutralFillStealthRest};\n cursor: pointer;\n font-family: ${bodyFont};\n --expand-collapse-button-size: calc(${heightNumber} * 1px);\n --tree-item-nested-width: 0;\n }\n\n :host(:focus) > .positioning-region {\n outline: none;\n }\n\n :host(:focus) .content-region {\n outline: none;\n }\n\n :host(:${focusVisible}) .positioning-region {\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus} inset;\n color: ${neutralForegroundRest};\n }\n\n .positioning-region {\n display: flex;\n position: relative;\n box-sizing: border-box;\n border: transparent calc(${strokeWidth} * 1px) solid;\n border-radius: calc(${controlCornerRadius} * 1px);\n height: calc((${heightNumber} + 1) * 1px);\n }\n\n .positioning-region::before {\n content: '';\n display: block;\n width: var(--tree-item-nested-width);\n flex-shrink: 0;\n }\n\n .positioning-region:hover {\n background: ${neutralFillStealthHover};\n }\n\n .positioning-region:active {\n background: ${neutralFillStealthActive};\n }\n\n .content-region {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n width: 100%;\n min-width: 0;\n height: calc(${heightNumber} * 1px);\n margin-inline-start: calc(${designUnit} * 2px + 8px);\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n font-weight: 400;\n }\n\n .items {\n display: none;\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n font-size: calc(1em + (${designUnit} + 16) * 1px);\n }\n\n .expand-collapse-button {\n background: none;\n border: none;\n outline: none;\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);\n height: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n margin-left: 6px;\n margin-right: 6px;\n }\n\n .expand-collapse-glyph {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n transition: transform 0.1s linear;\n\n pointer-events: none;\n fill: currentcolor;\n }\n\n .start,\n .end {\n display: flex;\n fill: currentcolor;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n }\n\n .start {\n /* TODO: horizontalSpacing https://github.com/microsoft/fast/issues/2766 */\n margin-inline-end: calc(${designUnit} * 2px + 2px);\n }\n\n .end {\n /* TODO: horizontalSpacing https://github.com/microsoft/fast/issues/2766 */\n margin-inline-start: calc(${designUnit} * 2px + 2px);\n }\n\n :host([expanded]) > .items {\n display: block;\n }\n\n :host([disabled]) .content-region {\n opacity: ${disabledOpacity};\n cursor: ${disabledCursor};\n }\n\n :host(.nested) .content-region {\n position: relative;\n margin-inline-start: var(--expand-collapse-button-size);\n }\n\n :host(.nested) .expand-collapse-button {\n position: absolute;\n }\n\n :host(.nested) .expand-collapse-button:hover {\n background: ${expandCollapseHoverBehavior};\n }\n\n :host([selected]) .positioning-region {\n background: ${neutralFillRest};\n }\n\n :host([selected]) .expand-collapse-button:hover {\n background: ${selectedExpandCollapseHoverBehavior};\n }\n\n :host([selected])::after {\n /* The background needs to be calculated based on the selected background state\n for this control. We currently have no way of changing that, so setting to\n accent-foreground-rest for the time being */\n background: ${accentForegroundRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n content: '';\n display: block;\n position: absolute;\n top: calc((${heightNumber} / 4) * 1px);\n width: 3px;\n height: calc((${heightNumber} / 2) * 1px);\n }\n\n ::slotted(${context.tagFor(TreeItem)}) {\n --tree-item-nested-width: 1em;\n --expand-collapse-button-nested-width: calc(${heightNumber} * -1px);\n }\n `.withBehaviors(new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior(css `\n :host {\n forced-color-adjust: none;\n border-color: transparent;\n background: ${SystemColors.Field};\n color: ${SystemColors.FieldText};\n }\n :host .content-region .expand-collapse-glyph {\n fill: ${SystemColors.FieldText};\n }\n :host .positioning-region:hover,\n :host([selected]) .positioning-region {\n background: ${SystemColors.Highlight};\n }\n :host .positioning-region:hover .content-region,\n :host([selected]) .positioning-region .content-region {\n color: ${SystemColors.HighlightText};\n }\n :host .positioning-region:hover .content-region .expand-collapse-glyph,\n :host .positioning-region:hover .content-region .start,\n :host .positioning-region:hover .content-region .end,\n :host([selected]) .content-region .expand-collapse-glyph,\n :host([selected]) .content-region .start,\n :host([selected]) .content-region .end {\n fill: ${SystemColors.HighlightText};\n }\n :host([selected])::after {\n background: ${SystemColors.Field};\n }\n :host(:${focusVisible}) .positioning-region {\n border-color: ${SystemColors.FieldText};\n box-shadow: 0 0 0 2px inset ${SystemColors.Field};\n color: ${SystemColors.FieldText};\n }\n :host([disabled]) .content-region,\n :host([disabled]) .positioning-region:hover .content-region {\n opacity: 1;\n color: ${SystemColors.GrayText};\n }\n :host([disabled]) .content-region .expand-collapse-glyph,\n :host([disabled]) .content-region .start,\n :host([disabled]) .content-region .end,\n :host([disabled])\n .positioning-region:hover\n .content-region\n .expand-collapse-glyph,\n :host([disabled]) .positioning-region:hover .content-region .start,\n :host([disabled]) .positioning-region:hover .content-region .end {\n fill: ${SystemColors.GrayText};\n }\n :host([disabled]) .positioning-region:hover {\n background: ${SystemColors.Field};\n }\n .expand-collapse-glyph,\n .start,\n .end {\n fill: ${SystemColors.FieldText};\n }\n :host(.nested) .expand-collapse-button:hover {\n background: ${SystemColors.Field};\n }\n :host(.nested) .expand-collapse-button:hover .expand-collapse-glyph {\n fill: ${SystemColors.FieldText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { treeItemTemplate as template, TreeItem } from '@microsoft/fast-foundation';\nimport { treeItemStyles as styles } from './tree-item.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#TreeItem} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#treeItemTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n */\nexport const jpTreeItem = TreeItem.compose({\n baseName: 'tree-item',\n template,\n styles,\n expandCollapseGlyph: /* html */ `\n \n \n \n `\n});\n/**\n * Base class for TreeItem\n * @public\n */\nexport { TreeItem };\nexport { styles as treeItemStyles };\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/main.a76b4119.iframe.bundle.js b/main.f78c1cee.iframe.bundle.js similarity index 90% rename from main.a76b4119.iframe.bundle.js rename to main.f78c1cee.iframe.bundle.js index 7eb09669..17c9147e 100644 --- a/main.a76b4119.iframe.bundle.js +++ b/main.f78c1cee.iframe.bundle.js @@ -1,4 +1,4 @@ -(self.webpackChunk_jupyter_web_components=self.webpackChunk_jupyter_web_components||[]).push([[179],{"./src/color.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{C3:()=>foregroundOnErrorAlgorithm,Sn:()=>black,U0:()=>errorFillAlgorithm,_T:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_0__._,gN:()=>baseErrorColor,he:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_2__.h,ix:()=>white,lf:()=>errorForegroundAlgorithm,rw:()=>errorBase,vD:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.v,vG:()=>ContrastTarget,wd:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_3__.w});var _microsoft_fast_colors__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@microsoft/fast-colors/dist/parse-color.js"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/swatch.js"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/utilities/is-dark.js"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/palette.js"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/utilities/base-layer-luminance.js");const white=_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_3__.w.create(1,1,1),black=_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_3__.w.create(0,0,0),baseErrorColor=(0,_microsoft_fast_colors__WEBPACK_IMPORTED_MODULE_4__.in)("#D32F2F");var ContrastTarget;function errorFillAlgorithm(palette,neutralPalette,reference,hoverDelta,activeDelta,focusDelta,neutralFillRestDelta,neutralFillHoverDelta,neutralFillActiveDelta){const error=palette.source,direction=neutralPalette.closestIndexOf(reference)>=Math.max(neutralFillRestDelta,neutralFillHoverDelta,neutralFillActiveDelta)?-1:1,hoverIndex=palette.closestIndexOf(error),restIndex=hoverIndex+-1*direction*hoverDelta,activeIndex=restIndex+direction*activeDelta,focusIndex=restIndex+direction*focusDelta;return{rest:palette.get(restIndex),hover:palette.get(hoverIndex),active:palette.get(activeIndex),focus:palette.get(focusIndex)}}function errorForegroundAlgorithm(palette,reference,contrastTarget,restDelta,hoverDelta,activeDelta,focusDelta){const error=palette.source,errorIndex=palette.closestIndexOf(error),direction=(0,_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_0__._)(reference)?-1:1,startIndex=errorIndex+(1===direction?Math.min(restDelta,hoverDelta):Math.max(direction*restDelta,direction*hoverDelta)),accessibleSwatch=palette.colorContrast(reference,contrastTarget,startIndex,direction),accessibleIndex1=palette.closestIndexOf(accessibleSwatch),accessibleIndex2=accessibleIndex1+direction*Math.abs(restDelta-hoverDelta);let restIndex,hoverIndex;return(1===direction?restDeltadirection*hoverDelta)?(restIndex=accessibleIndex1,hoverIndex=accessibleIndex2):(restIndex=accessibleIndex2,hoverIndex=accessibleIndex1),{rest:palette.get(restIndex),hover:palette.get(hoverIndex),active:palette.get(restIndex+direction*activeDelta),focus:palette.get(restIndex+direction*focusDelta)}}function foregroundOnErrorAlgorithm(reference,contrastTarget){return reference.contrast(white)>=contrastTarget?white:black}!function(ContrastTarget){ContrastTarget[ContrastTarget.normal=4.5]="normal",ContrastTarget[ContrastTarget.large=7]="large"}(ContrastTarget||(ContrastTarget={}));const errorBase=_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_3__.w.create(baseErrorColor.r,baseErrorColor.g,baseErrorColor.b)},"./src/design-tokens.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$9:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.$9,$B:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.$B,$u:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.$u,A$:()=>foregroundOnErrorHover,A1:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.A1,AI:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.AI,A_:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.vg,Al:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Al,At:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.At,Av:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Av,B2:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.B2,Bx:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Bx,CH:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.CH,CM:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.CM,CX:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.CX,Cl:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Cl,D$:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.D$,D8:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.D8,D9:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.D9,DF:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.DF,DV:()=>errorForegroundActive,Dg:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Dg,EB:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.EB,EL:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.EL,G8:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.G8,GB:()=>errorFillActive,GU:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.GU,Gy:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Gy,H:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.H,I7:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.I7,IM:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.IM,IU:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.IU,IW:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.IW,IZ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.IZ,If:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.If,Iu:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Iu,J7:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.J7,L4:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.L4,L8:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.L8,LQ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.LQ,MY:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.MY,Mw:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Mw,N7:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.N7,NF:()=>foregroundOnErrorFocusLarge,Nz:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Nz,O8:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_2__.O,OC:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.OC,P0:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.P0,Pp:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Pp,Pw:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Pw,Q5:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Q5,QP:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.QP,Qi:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Qi,Qp:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Qp,RJ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.RJ,RU:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.RU,Rk:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Rk,SV:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.SV,Sl:()=>errorFillRecipe,Tm:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Tm,UC:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.UC,UE:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.UE,UW:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.UW,Ue:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Ue,V0:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.V0,VF:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.VF,VN:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.VN,VQ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.VQ,Ve:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Ve,Vt:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Vt,Vu:()=>errorPalette,Wo:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Wo,Xi:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Xi,YE:()=>errorForegroundFocus,YL:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.YL,Z:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Z,Zb:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Zb,_5:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__._5,_B:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__._B,_S:()=>errorForegroundRecipe,a2:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.a2,a6:()=>errorFillRest,ab:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.ab,ak:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.ak,aq:()=>foregroundOnErrorFocus,au:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.au,ax:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.ax,b3:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.b3,bg:()=>foregroundOnErrorActive,c1:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.c1,cS:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.cS,cZ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.cZ,dt:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.dt,ef:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.ef,ek:()=>errorFillHover,fd:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.fd,ff:()=>errorForegroundRest,fq:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.fq,fr:()=>foregroundOnErrorLargeRecipe,go:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.go,gs:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.gs,hD:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hD,hP:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hP,hR:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hR,hV:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hV,hY:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hY,hZ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hZ,iJ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.iJ,iL:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.iL,iX:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.iX,ip:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.ip,jI:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.jI,jW:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.jW,jn:()=>foregroundOnErrorActiveLarge,jq:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.jq,jx:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.jx,kb:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.kb,kp:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.kp,lJ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.lJ,lu:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.pg,mH:()=>errorFillFocus,mW:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.mW,n5:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.n5,nB:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.nB,nd:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.nd,nf:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.nf,o7:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.o7,pg:()=>errorForegroundHover,q2:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.q2,qD:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.qD,q_:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.q_,rF:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.rF,rj:()=>foregroundOnErrorRest,rn:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.rn,s0:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.s0,s5:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.s5,sG:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.sG,sN:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.sN,sc:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.sc,sm:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.sm,sp:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.sp,tZ:()=>foregroundOnErrorRecipe,v$:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.v$,vg:()=>foregroundOnErrorHoverLarge,vr:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.vr,vx:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.vx,w4:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.w4,wF:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.wF,wt:()=>foregroundOnErrorRestLarge,y9:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.y9,yD:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.yD,yG:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.yG,yv:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.yv,z:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.z,z4:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.z4});var _microsoft_fast_components__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/palette.js"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/design-tokens.js"),_microsoft_fast_foundation__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/design-token/design-token.js"),_color__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/color.ts"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/styles/direction.js");const{create}=_microsoft_fast_foundation__WEBPACK_IMPORTED_MODULE_3__.DesignToken,errorPalette=create({name:"error-palette",cssCustomPropertyName:null}).withDefault(_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_4__.v.from(_color__WEBPACK_IMPORTED_MODULE_0__.rw)),errorFillRecipe=create({name:"error-fill-recipe",cssCustomPropertyName:null}).withDefault({evaluate:(element,reference)=>(0,_color__WEBPACK_IMPORTED_MODULE_0__.U0)(errorPalette.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.yv.getValueFor(element),reference||_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.If.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.B2.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Wo.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.v$.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.MY.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.jW.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hD.getValueFor(element))}),errorFillRest=create("error-fill-rest").withDefault((element=>errorFillRecipe.getValueFor(element).evaluate(element).rest)),errorFillHover=create("error-fill-hover").withDefault((element=>errorFillRecipe.getValueFor(element).evaluate(element).hover)),errorFillActive=create("error-fill-active").withDefault((element=>errorFillRecipe.getValueFor(element).evaluate(element).active)),errorFillFocus=create("error-fill-focus").withDefault((element=>errorFillRecipe.getValueFor(element).evaluate(element).focus)),foregroundOnErrorByContrast=contrast=>(element,reference)=>(0,_color__WEBPACK_IMPORTED_MODULE_0__.C3)(reference||errorFillRest.getValueFor(element),contrast),foregroundOnErrorRecipe=create({name:"foreground-on-error-recipe",cssCustomPropertyName:null}).withDefault({evaluate:(element,reference)=>foregroundOnErrorByContrast(_color__WEBPACK_IMPORTED_MODULE_0__.vG.normal)(element,reference)}),foregroundOnErrorRest=create("foreground-on-error-rest").withDefault((element=>foregroundOnErrorRecipe.getValueFor(element).evaluate(element,errorFillRest.getValueFor(element)))),foregroundOnErrorHover=create("foreground-on-error-hover").withDefault((element=>foregroundOnErrorRecipe.getValueFor(element).evaluate(element,errorFillHover.getValueFor(element)))),foregroundOnErrorActive=create("foreground-on-error-active").withDefault((element=>foregroundOnErrorRecipe.getValueFor(element).evaluate(element,errorFillActive.getValueFor(element)))),foregroundOnErrorFocus=create("foreground-on-error-focus").withDefault((element=>foregroundOnErrorRecipe.getValueFor(element).evaluate(element,errorFillFocus.getValueFor(element)))),foregroundOnErrorLargeRecipe=create({name:"foreground-on-error-large-recipe",cssCustomPropertyName:null}).withDefault({evaluate:(element,reference)=>foregroundOnErrorByContrast(_color__WEBPACK_IMPORTED_MODULE_0__.vG.large)(element,reference)}),foregroundOnErrorRestLarge=create("foreground-on-error-rest-large").withDefault((element=>foregroundOnErrorLargeRecipe.getValueFor(element).evaluate(element,errorFillRest.getValueFor(element)))),foregroundOnErrorHoverLarge=create("foreground-on-error-hover-large").withDefault((element=>foregroundOnErrorLargeRecipe.getValueFor(element).evaluate(element,errorFillHover.getValueFor(element)))),foregroundOnErrorActiveLarge=create("foreground-on-error-active-large").withDefault((element=>foregroundOnErrorLargeRecipe.getValueFor(element).evaluate(element,errorFillActive.getValueFor(element)))),foregroundOnErrorFocusLarge=create("foreground-on-error-focus-large").withDefault((element=>foregroundOnErrorLargeRecipe.getValueFor(element).evaluate(element,errorFillFocus.getValueFor(element)))),errorForegroundRecipe=create({name:"error-foreground-recipe",cssCustomPropertyName:null}).withDefault({evaluate:(element,reference)=>{return(contrast=_color__WEBPACK_IMPORTED_MODULE_0__.vG.normal,(element,reference)=>(0,_color__WEBPACK_IMPORTED_MODULE_0__.lf)(errorPalette.getValueFor(element),reference||_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.If.getValueFor(element),contrast,_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.kp.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.L8.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.kb.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.nd.getValueFor(element)))(element,reference);var contrast}}),errorForegroundRest=create("error-foreground-rest").withDefault((element=>errorForegroundRecipe.getValueFor(element).evaluate(element).rest)),errorForegroundHover=create("error-foreground-hover").withDefault((element=>errorForegroundRecipe.getValueFor(element).evaluate(element).hover)),errorForegroundActive=create("error-foreground-active").withDefault((element=>errorForegroundRecipe.getValueFor(element).evaluate(element).active)),errorForegroundFocus=create("error-foreground-focus").withDefault((element=>errorForegroundRecipe.getValueFor(element).evaluate(element).focus))},"./.storybook/preview.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>_storybook_preview});var index_rollup_namespaceObject={};__webpack_require__.r(index_rollup_namespaceObject),__webpack_require__.d(index_rollup_namespaceObject,{Accordion:()=>accordion.U,AccordionItem:()=>accordion_item.Q,Anchor:()=>esm_anchor.ee,AnchoredRegion:()=>anchored_region.$,Avatar:()=>avatar.qE,Badge:()=>badge.C,Breadcrumb:()=>breadcrumb.a,BreadcrumbItem:()=>breadcrumb_item.g,Button:()=>Button,Card:()=>esm_card.Zb,Checkbox:()=>checkbox_checkbox.X,Combobox:()=>Combobox,ContrastTarget:()=>color.vG,DataGrid:()=>data_grid._$,DataGridCell:()=>data_grid_cell.a,DataGridRow:()=>data_grid_row.m,DateField:()=>DateField,Dialog:()=>dialog.V,DirectionalStyleSheetBehavior:()=>design_tokens.O8,Divider:()=>divider.i,JupyterDesignSystem:()=>JupyterDesignSystem,ListboxElement:()=>listbox_element.k,Menu:()=>menu.v,MenuItem:()=>menu_item.sN,NumberField:()=>esm_number_field.Ki,Option:()=>listbox_option.wt,PaletteRGB:()=>color.vD,Progress:()=>base_progress.B,Radio:()=>radio_radio.Y,RadioGroup:()=>radio_group.E,Search:()=>esm_search.ol,Select:()=>Select,SliderLabel:()=>slider_label.PQ,StandardLuminance:()=>color.he,SwatchRGB:()=>color.wd,Tab:()=>tab.O,TabPanel:()=>tab_panel.x,Tabs:()=>tabs.m,TextArea:()=>esm_text_area.Kx,TextField:()=>esm_text_field.nv,Toolbar:()=>toolbar.o8,Tooltip:()=>tooltip.u,accentColor:()=>design_tokens.z,accentFillActive:()=>design_tokens.UE,accentFillActiveDelta:()=>design_tokens.Wo,accentFillFocus:()=>design_tokens.D8,accentFillFocusDelta:()=>design_tokens.v$,accentFillHover:()=>design_tokens.OC,accentFillHoverDelta:()=>design_tokens.B2,accentFillRecipe:()=>design_tokens.CM,accentFillRest:()=>design_tokens.Av,accentFillRestDelta:()=>design_tokens.N7,accentForegroundActive:()=>design_tokens.VN,accentForegroundActiveDelta:()=>design_tokens.kb,accentForegroundFocus:()=>design_tokens.cZ,accentForegroundFocusDelta:()=>design_tokens.nd,accentForegroundHover:()=>design_tokens.D9,accentForegroundHoverDelta:()=>design_tokens.L8,accentForegroundRecipe:()=>design_tokens.Rk,accentForegroundRest:()=>design_tokens.go,accentForegroundRestDelta:()=>design_tokens.kp,accentPalette:()=>design_tokens.au,accordionItemStyles:()=>accordionItemStyles,accordionStyles:()=>accordion_styles.T,addJupyterLabThemeChangeListener:()=>addJupyterLabThemeChangeListener,allComponents:()=>allComponents,anchorStyles:()=>anchor_styles.f,anchoredRegionStyles:()=>anchored_region_styles.Y,applyJupyterTheme:()=>applyJupyterTheme,avatarStyles:()=>avatarStyles,badgeStyles:()=>badgeStyles,baseErrorColor:()=>color.gN,baseHeightMultiplier:()=>design_tokens.nf,baseHorizontalSpacingMultiplier:()=>design_tokens.LQ,baseLayerLuminance:()=>design_tokens.q2,black:()=>color.Sn,bodyFont:()=>design_tokens.SV,breadcrumbItemStyles:()=>breadcrumbItemStyles,breadcrumbStyles:()=>breadcrumb_styles.S,cardStyles:()=>card_styles.F,checkboxStyles:()=>checkboxStyles,comboboxStyles:()=>comboboxStyles,controlCornerRadius:()=>design_tokens.UW,dataGridCellStyles:()=>dataGridCellStyles,dataGridRowStyles:()=>data_grid_row_styles.r,dataGridStyles:()=>data_grid_styles.l,dateFieldStyles:()=>dateFieldStyles,dateFieldTemplate:()=>dateFieldTemplate,density:()=>design_tokens.hV,designUnit:()=>design_tokens._5,dialogStyles:()=>dialog_styles.f,direction:()=>design_tokens.o7,disabledOpacity:()=>design_tokens.VF,dividerStyles:()=>divider_styles.T,errorBase:()=>color.rw,errorFillActive:()=>design_tokens.GB,errorFillAlgorithm:()=>color.U0,errorFillFocus:()=>design_tokens.mH,errorFillHover:()=>design_tokens.ek,errorFillRecipe:()=>design_tokens.Sl,errorFillRest:()=>design_tokens.a6,errorForegroundActive:()=>design_tokens.DV,errorForegroundAlgorithm:()=>color.lf,errorForegroundFocus:()=>design_tokens.YE,errorForegroundHover:()=>design_tokens.pg,errorForegroundRecipe:()=>design_tokens._S,errorForegroundRest:()=>design_tokens.ff,errorPalette:()=>design_tokens.Vu,fillColor:()=>design_tokens.If,focusStrokeInner:()=>design_tokens.a2,focusStrokeInnerRecipe:()=>design_tokens.J7,focusStrokeOuter:()=>design_tokens.yG,focusStrokeOuterRecipe:()=>design_tokens.Al,focusStrokeWidth:()=>design_tokens.vx,foregroundOnAccentActive:()=>design_tokens.Pp,foregroundOnAccentActiveLarge:()=>design_tokens.hR,foregroundOnAccentFocus:()=>design_tokens.$u,foregroundOnAccentFocusLarge:()=>design_tokens.iJ,foregroundOnAccentHover:()=>design_tokens.lJ,foregroundOnAccentHoverLarge:()=>design_tokens.Ue,foregroundOnAccentLargeRecipe:()=>design_tokens.jI,foregroundOnAccentRecipe:()=>design_tokens.A1,foregroundOnAccentRest:()=>design_tokens.w4,foregroundOnAccentRestLarge:()=>design_tokens.iX,foregroundOnErrorActive:()=>design_tokens.bg,foregroundOnErrorActiveLarge:()=>design_tokens.jn,foregroundOnErrorAlgorithm:()=>color.C3,foregroundOnErrorFocus:()=>design_tokens.aq,foregroundOnErrorFocusLarge:()=>design_tokens.NF,foregroundOnErrorHover:()=>design_tokens.A$,foregroundOnErrorHoverLarge:()=>design_tokens.vg,foregroundOnErrorLargeRecipe:()=>design_tokens.fr,foregroundOnErrorRecipe:()=>design_tokens.tZ,foregroundOnErrorRest:()=>design_tokens.rj,foregroundOnErrorRestLarge:()=>design_tokens.wt,horizontalSliderLabelStyles:()=>slider_label_styles.b2,imgTemplate:()=>avatar.IY,isDark:()=>color._T,jpAccordion:()=>jpAccordion,jpAccordionItem:()=>jpAccordionItem,jpAnchor:()=>jpAnchor,jpAnchoredRegion:()=>jpAnchoredRegion,jpAvatar:()=>jpAvatar,jpBadge:()=>jpBadge,jpBreadcrumb:()=>jpBreadcrumb,jpBreadcrumbItem:()=>jpBreadcrumbItem,jpButton:()=>jpButton,jpCard:()=>jpCard,jpCheckbox:()=>jpCheckbox,jpCombobox:()=>jpCombobox,jpDataGrid:()=>jpDataGrid,jpDataGridCell:()=>jpDataGridCell,jpDataGridRow:()=>jpDataGridRow,jpDateField:()=>jpDateField,jpDialog:()=>jpDialog,jpDivider:()=>jpDivider,jpListbox:()=>jpListbox,jpMenu:()=>jpMenu,jpMenuItem:()=>jpMenuItem,jpNumberField:()=>jpNumberField,jpOption:()=>jpOption,jpProgress:()=>jpProgress,jpProgressRing:()=>jpProgressRing,jpRadio:()=>jpRadio,jpRadioGroup:()=>jpRadioGroup,jpSearch:()=>jpSearch,jpSelect:()=>jpSelect,jpSlider:()=>jpSlider,jpSliderLabel:()=>jpSliderLabel,jpSwitch:()=>jpSwitch,jpTab:()=>jpTab,jpTabPanel:()=>jpTabPanel,jpTabs:()=>jpTabs,jpTextArea:()=>jpTextArea,jpTextField:()=>jpTextField,jpToolbar:()=>jpToolbar,jpTooltip:()=>jpTooltip,jpTreeItem:()=>jpTreeItem,jpTreeView:()=>jpTreeView,listboxStyles:()=>listboxStyles,menuItemStyles:()=>menuItemStyles,menuStyles:()=>menu_styles.J,neutralColor:()=>design_tokens.z4,neutralFillActive:()=>design_tokens.Gy,neutralFillActiveDelta:()=>design_tokens.hD,neutralFillFocus:()=>design_tokens.CH,neutralFillFocusDelta:()=>design_tokens.VQ,neutralFillHover:()=>design_tokens.Xi,neutralFillHoverDelta:()=>design_tokens.jW,neutralFillInputActive:()=>design_tokens.Iu,neutralFillInputActiveDelta:()=>design_tokens.q_,neutralFillInputFocus:()=>design_tokens.rF,neutralFillInputFocusDelta:()=>design_tokens.Zb,neutralFillInputHover:()=>design_tokens.Tm,neutralFillInputHoverDelta:()=>design_tokens.EL,neutralFillInputRecipe:()=>design_tokens.sm,neutralFillInputRest:()=>design_tokens._B,neutralFillInputRestDelta:()=>design_tokens.ef,neutralFillLayerRecipe:()=>design_tokens.ab,neutralFillLayerRest:()=>design_tokens.RJ,neutralFillLayerRestDelta:()=>design_tokens.YL,neutralFillRecipe:()=>design_tokens.At,neutralFillRest:()=>design_tokens.wF,neutralFillRestDelta:()=>design_tokens.MY,neutralFillStealthActive:()=>design_tokens.sG,neutralFillStealthActiveDelta:()=>design_tokens.gs,neutralFillStealthFocus:()=>design_tokens.s0,neutralFillStealthFocusDelta:()=>design_tokens.IU,neutralFillStealthHover:()=>design_tokens.Qp,neutralFillStealthHoverDelta:()=>design_tokens.fq,neutralFillStealthRecipe:()=>design_tokens.DF,neutralFillStealthRest:()=>design_tokens.jq,neutralFillStealthRestDelta:()=>design_tokens.qD,neutralFillStrongActive:()=>design_tokens.hP,neutralFillStrongActiveDelta:()=>design_tokens.Vt,neutralFillStrongFocus:()=>design_tokens.Nz,neutralFillStrongFocusDelta:()=>design_tokens.UC,neutralFillStrongHover:()=>design_tokens.Dg,neutralFillStrongHoverDelta:()=>design_tokens.sc,neutralFillStrongRecipe:()=>design_tokens.Qi,neutralFillStrongRest:()=>design_tokens.P0,neutralFillStrongRestDelta:()=>design_tokens.Cl,neutralForegroundHint:()=>design_tokens.Q5,neutralForegroundHintRecipe:()=>design_tokens.ax,neutralForegroundRecipe:()=>design_tokens.GU,neutralForegroundRest:()=>design_tokens.hY,neutralLayer1:()=>design_tokens.y9,neutralLayer1Recipe:()=>design_tokens.AI,neutralLayer2:()=>design_tokens.jx,neutralLayer2Recipe:()=>design_tokens.vr,neutralLayer3:()=>design_tokens.hZ,neutralLayer3Recipe:()=>design_tokens.IZ,neutralLayer4:()=>design_tokens.sp,neutralLayer4Recipe:()=>design_tokens.Ve,neutralLayerCardContainer:()=>design_tokens.$B,neutralLayerCardContainerRecipe:()=>design_tokens.nB,neutralLayerFloating:()=>design_tokens.s5,neutralLayerFloatingRecipe:()=>design_tokens.L4,neutralPalette:()=>design_tokens.yv,neutralStrokeActive:()=>design_tokens.c1,neutralStrokeActiveDelta:()=>design_tokens.IM,neutralStrokeDividerRecipe:()=>design_tokens.$9,neutralStrokeDividerRest:()=>design_tokens.dt,neutralStrokeDividerRestDelta:()=>design_tokens.EB,neutralStrokeFocus:()=>design_tokens.V0,neutralStrokeFocusDelta:()=>design_tokens.Bx,neutralStrokeHover:()=>design_tokens.QP,neutralStrokeHoverDelta:()=>design_tokens.rn,neutralStrokeRecipe:()=>design_tokens.lu,neutralStrokeRest:()=>design_tokens.ak,neutralStrokeRestDelta:()=>design_tokens.fd,numberFieldStyles:()=>numberFieldStyles,optionStyles:()=>optionStyles,progressStyles:()=>progress_styles.Q,provideJupyterDesignSystem:()=>provideJupyterDesignSystem,radioGroupStyles:()=>radio_group_styles.p,radioStyles:()=>radioStyles,searchStyles:()=>searchStyles,selectStyles:()=>selectStyles,sliderLabelStyles:()=>slider_label_styles.Ok,strokeWidth:()=>design_tokens.H,tabPanelStyles:()=>tab_panel_styles.T,tabStyles:()=>tabStyles,tabsStyles:()=>tabsStyles,textAreaStyles:()=>textAreaStyles,textFieldStyles:()=>textFieldStyles,toolbarStyles:()=>toolbarStyles,tooltipStyles:()=>tooltip_styles.n,typeRampBaseFontSize:()=>design_tokens.cS,typeRampBaseLineHeight:()=>design_tokens.RU,typeRampMinus1FontSize:()=>design_tokens.sN,typeRampMinus1LineHeight:()=>design_tokens.A_,typeRampMinus2FontSize:()=>design_tokens.G8,typeRampMinus2LineHeight:()=>design_tokens.Mw,typeRampPlus1FontSize:()=>design_tokens.Pw,typeRampPlus1LineHeight:()=>design_tokens.b3,typeRampPlus2FontSize:()=>design_tokens.mW,typeRampPlus2LineHeight:()=>design_tokens.I7,typeRampPlus3FontSize:()=>design_tokens.ip,typeRampPlus3LineHeight:()=>design_tokens.D$,typeRampPlus4FontSize:()=>design_tokens.IW,typeRampPlus4LineHeight:()=>design_tokens.iL,typeRampPlus5FontSize:()=>design_tokens.CX,typeRampPlus5LineHeight:()=>design_tokens.n5,typeRampPlus6FontSize:()=>design_tokens.Z,typeRampPlus6LineHeight:()=>design_tokens.yD,verticalSliderLabelStyles:()=>slider_label_styles.KI,white:()=>color.ix});var accordion=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/accordion/accordion.js"),accordion_template=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/accordion/accordion.template.js"),accordion_styles=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/accordion/accordion.styles.js"),accordion_item=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/accordion-item/accordion-item.js"),accordion_item_template=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/accordion-item/accordion-item.template.js"),css=__webpack_require__("../../node_modules/@microsoft/fast-element/dist/esm/styles/css.js"),display=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/utilities/style/display.js"),style_focus=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/utilities/style/focus.js"),match_media_stylesheet_behavior=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/utilities/match-media-stylesheet-behavior.js"),system_colors=__webpack_require__("../../node_modules/@microsoft/fast-web-utilities/dist/system-colors.js"),design_tokens=__webpack_require__("./src/design-tokens.ts");const heightNumber=css.j`(${design_tokens.nf} + ${design_tokens.hV}) * ${design_tokens._5}`,accordionItemStyles=(context,definition)=>css.i` +(self.webpackChunk_jupyter_web_components=self.webpackChunk_jupyter_web_components||[]).push([[179],{"./src/color.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{C3:()=>foregroundOnErrorAlgorithm,Sn:()=>black,U0:()=>errorFillAlgorithm,_T:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_0__._,gN:()=>baseErrorColor,he:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_2__.h,ix:()=>white,lf:()=>errorForegroundAlgorithm,rw:()=>errorBase,vD:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.v,vG:()=>ContrastTarget,wd:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_3__.w});var _microsoft_fast_colors__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@microsoft/fast-colors/dist/parse-color.js"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/swatch.js"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/utilities/is-dark.js"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/palette.js"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/utilities/base-layer-luminance.js");const white=_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_3__.w.create(1,1,1),black=_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_3__.w.create(0,0,0),baseErrorColor=(0,_microsoft_fast_colors__WEBPACK_IMPORTED_MODULE_4__.in)("#D32F2F");var ContrastTarget;function errorFillAlgorithm(palette,neutralPalette,reference,hoverDelta,activeDelta,focusDelta,neutralFillRestDelta,neutralFillHoverDelta,neutralFillActiveDelta){const error=palette.source,direction=neutralPalette.closestIndexOf(reference)>=Math.max(neutralFillRestDelta,neutralFillHoverDelta,neutralFillActiveDelta)?-1:1,hoverIndex=palette.closestIndexOf(error),restIndex=hoverIndex+-1*direction*hoverDelta,activeIndex=restIndex+direction*activeDelta,focusIndex=restIndex+direction*focusDelta;return{rest:palette.get(restIndex),hover:palette.get(hoverIndex),active:palette.get(activeIndex),focus:palette.get(focusIndex)}}function errorForegroundAlgorithm(palette,reference,contrastTarget,restDelta,hoverDelta,activeDelta,focusDelta){const error=palette.source,errorIndex=palette.closestIndexOf(error),direction=(0,_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_0__._)(reference)?-1:1,startIndex=errorIndex+(1===direction?Math.min(restDelta,hoverDelta):Math.max(direction*restDelta,direction*hoverDelta)),accessibleSwatch=palette.colorContrast(reference,contrastTarget,startIndex,direction),accessibleIndex1=palette.closestIndexOf(accessibleSwatch),accessibleIndex2=accessibleIndex1+direction*Math.abs(restDelta-hoverDelta);let restIndex,hoverIndex;return(1===direction?restDeltadirection*hoverDelta)?(restIndex=accessibleIndex1,hoverIndex=accessibleIndex2):(restIndex=accessibleIndex2,hoverIndex=accessibleIndex1),{rest:palette.get(restIndex),hover:palette.get(hoverIndex),active:palette.get(restIndex+direction*activeDelta),focus:palette.get(restIndex+direction*focusDelta)}}function foregroundOnErrorAlgorithm(reference,contrastTarget){return reference.contrast(white)>=contrastTarget?white:black}!function(ContrastTarget){ContrastTarget[ContrastTarget.normal=4.5]="normal",ContrastTarget[ContrastTarget.large=7]="large"}(ContrastTarget||(ContrastTarget={}));const errorBase=_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_3__.w.create(baseErrorColor.r,baseErrorColor.g,baseErrorColor.b)},"./src/design-tokens.ts":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{$9:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.$9,$B:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.$B,$u:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.$u,A$:()=>foregroundOnErrorHover,A1:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.A1,AI:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.AI,A_:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.vg,Al:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Al,At:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.At,Av:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Av,B2:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.B2,Bx:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Bx,CH:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.CH,CM:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.CM,CX:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.CX,Cl:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Cl,D$:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.D$,D8:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.D8,D9:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.D9,DF:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.DF,DV:()=>errorForegroundActive,Dg:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Dg,EB:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.EB,EL:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.EL,G8:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.G8,GB:()=>errorFillActive,GU:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.GU,Gy:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Gy,H:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.H,I7:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.I7,IM:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.IM,IU:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.IU,IW:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.IW,IZ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.IZ,If:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.If,Iu:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Iu,J7:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.J7,L4:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.L4,L8:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.L8,LQ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.LQ,MY:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.MY,Mw:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Mw,N7:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.N7,NF:()=>foregroundOnErrorFocusLarge,Nz:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Nz,O8:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_2__.O,OC:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.OC,P0:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.P0,Pp:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Pp,Pw:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Pw,Q5:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Q5,QP:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.QP,Qi:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Qi,Qp:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Qp,RJ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.RJ,RU:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.RU,Rk:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Rk,SV:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.SV,Sl:()=>errorFillRecipe,Tm:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Tm,UC:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.UC,UE:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.UE,UW:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.UW,Ue:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Ue,V0:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.V0,VF:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.VF,VN:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.VN,VQ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.VQ,Ve:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Ve,Vt:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Vt,Vu:()=>errorPalette,Wo:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Wo,Xi:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Xi,YE:()=>errorForegroundFocus,YL:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.YL,Z:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Z,Zb:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Zb,_5:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__._5,_B:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__._B,_S:()=>errorForegroundRecipe,a2:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.a2,a6:()=>errorFillRest,ab:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.ab,ak:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.ak,aq:()=>foregroundOnErrorFocus,au:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.au,ax:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.ax,b3:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.b3,bg:()=>foregroundOnErrorActive,c1:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.c1,cS:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.cS,cZ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.cZ,dt:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.dt,ef:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.ef,ek:()=>errorFillHover,fd:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.fd,ff:()=>errorForegroundRest,fq:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.fq,fr:()=>foregroundOnErrorLargeRecipe,go:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.go,gs:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.gs,hD:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hD,hP:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hP,hR:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hR,hV:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hV,hY:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hY,hZ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hZ,iJ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.iJ,iL:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.iL,iX:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.iX,ip:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.ip,jI:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.jI,jW:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.jW,jn:()=>foregroundOnErrorActiveLarge,jq:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.jq,jx:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.jx,kb:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.kb,kp:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.kp,lJ:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.lJ,lu:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.pg,mH:()=>errorFillFocus,mW:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.mW,n5:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.n5,nB:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.nB,nd:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.nd,nf:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.nf,o7:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.o7,pg:()=>errorForegroundHover,q2:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.q2,qD:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.qD,q_:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.q_,rF:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.rF,rj:()=>foregroundOnErrorRest,rn:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.rn,s0:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.s0,s5:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.s5,sG:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.sG,sN:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.sN,sc:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.sc,sm:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.sm,sp:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.sp,tZ:()=>foregroundOnErrorRecipe,v$:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.v$,vg:()=>foregroundOnErrorHoverLarge,vr:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.vr,vx:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.vx,w4:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.w4,wF:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.wF,wt:()=>foregroundOnErrorRestLarge,y9:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.y9,yD:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.yD,yG:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.yG,yv:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.yv,z:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.z,z4:()=>_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.z4});var _microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/design-tokens.js"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/palette.js"),_microsoft_fast_foundation__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/design-token/design-token.js"),_color__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./src/color.ts"),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/styles/direction.js");const{create}=_microsoft_fast_foundation__WEBPACK_IMPORTED_MODULE_3__.DesignToken;_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.VF.withDefault(.4);const errorPalette=create({name:"error-palette",cssCustomPropertyName:null}).withDefault(_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_4__.v.from(_color__WEBPACK_IMPORTED_MODULE_0__.rw)),errorFillRecipe=create({name:"error-fill-recipe",cssCustomPropertyName:null}).withDefault({evaluate:(element,reference)=>(0,_color__WEBPACK_IMPORTED_MODULE_0__.U0)(errorPalette.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.yv.getValueFor(element),reference||_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.If.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.B2.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.Wo.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.v$.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.MY.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.jW.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.hD.getValueFor(element))}),errorFillRest=create("error-fill-rest").withDefault((element=>errorFillRecipe.getValueFor(element).evaluate(element).rest)),errorFillHover=create("error-fill-hover").withDefault((element=>errorFillRecipe.getValueFor(element).evaluate(element).hover)),errorFillActive=create("error-fill-active").withDefault((element=>errorFillRecipe.getValueFor(element).evaluate(element).active)),errorFillFocus=create("error-fill-focus").withDefault((element=>errorFillRecipe.getValueFor(element).evaluate(element).focus)),foregroundOnErrorByContrast=contrast=>(element,reference)=>(0,_color__WEBPACK_IMPORTED_MODULE_0__.C3)(reference||errorFillRest.getValueFor(element),contrast),foregroundOnErrorRecipe=create({name:"foreground-on-error-recipe",cssCustomPropertyName:null}).withDefault({evaluate:(element,reference)=>foregroundOnErrorByContrast(_color__WEBPACK_IMPORTED_MODULE_0__.vG.normal)(element,reference)}),foregroundOnErrorRest=create("foreground-on-error-rest").withDefault((element=>foregroundOnErrorRecipe.getValueFor(element).evaluate(element,errorFillRest.getValueFor(element)))),foregroundOnErrorHover=create("foreground-on-error-hover").withDefault((element=>foregroundOnErrorRecipe.getValueFor(element).evaluate(element,errorFillHover.getValueFor(element)))),foregroundOnErrorActive=create("foreground-on-error-active").withDefault((element=>foregroundOnErrorRecipe.getValueFor(element).evaluate(element,errorFillActive.getValueFor(element)))),foregroundOnErrorFocus=create("foreground-on-error-focus").withDefault((element=>foregroundOnErrorRecipe.getValueFor(element).evaluate(element,errorFillFocus.getValueFor(element)))),foregroundOnErrorLargeRecipe=create({name:"foreground-on-error-large-recipe",cssCustomPropertyName:null}).withDefault({evaluate:(element,reference)=>foregroundOnErrorByContrast(_color__WEBPACK_IMPORTED_MODULE_0__.vG.large)(element,reference)}),foregroundOnErrorRestLarge=create("foreground-on-error-rest-large").withDefault((element=>foregroundOnErrorLargeRecipe.getValueFor(element).evaluate(element,errorFillRest.getValueFor(element)))),foregroundOnErrorHoverLarge=create("foreground-on-error-hover-large").withDefault((element=>foregroundOnErrorLargeRecipe.getValueFor(element).evaluate(element,errorFillHover.getValueFor(element)))),foregroundOnErrorActiveLarge=create("foreground-on-error-active-large").withDefault((element=>foregroundOnErrorLargeRecipe.getValueFor(element).evaluate(element,errorFillActive.getValueFor(element)))),foregroundOnErrorFocusLarge=create("foreground-on-error-focus-large").withDefault((element=>foregroundOnErrorLargeRecipe.getValueFor(element).evaluate(element,errorFillFocus.getValueFor(element)))),errorForegroundRecipe=create({name:"error-foreground-recipe",cssCustomPropertyName:null}).withDefault({evaluate:(element,reference)=>{return(contrast=_color__WEBPACK_IMPORTED_MODULE_0__.vG.normal,(element,reference)=>(0,_color__WEBPACK_IMPORTED_MODULE_0__.lf)(errorPalette.getValueFor(element),reference||_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.If.getValueFor(element),contrast,_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.kp.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.L8.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.kb.getValueFor(element),_microsoft_fast_components__WEBPACK_IMPORTED_MODULE_1__.nd.getValueFor(element)))(element,reference);var contrast}}),errorForegroundRest=create("error-foreground-rest").withDefault((element=>errorForegroundRecipe.getValueFor(element).evaluate(element).rest)),errorForegroundHover=create("error-foreground-hover").withDefault((element=>errorForegroundRecipe.getValueFor(element).evaluate(element).hover)),errorForegroundActive=create("error-foreground-active").withDefault((element=>errorForegroundRecipe.getValueFor(element).evaluate(element).active)),errorForegroundFocus=create("error-foreground-focus").withDefault((element=>errorForegroundRecipe.getValueFor(element).evaluate(element).focus))},"./.storybook/preview.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>_storybook_preview});var index_rollup_namespaceObject={};__webpack_require__.r(index_rollup_namespaceObject),__webpack_require__.d(index_rollup_namespaceObject,{Accordion:()=>accordion.U,AccordionItem:()=>accordion_item.Q,Anchor:()=>esm_anchor.ee,AnchoredRegion:()=>anchored_region.$,Avatar:()=>avatar.qE,Badge:()=>badge.C,Breadcrumb:()=>breadcrumb.a,BreadcrumbItem:()=>breadcrumb_item.g,Button:()=>Button,Card:()=>esm_card.Zb,Checkbox:()=>checkbox_checkbox.X,Combobox:()=>Combobox,ContrastTarget:()=>color.vG,DataGrid:()=>data_grid._$,DataGridCell:()=>data_grid_cell.a,DataGridRow:()=>data_grid_row.m,DateField:()=>DateField,Dialog:()=>dialog.V,DirectionalStyleSheetBehavior:()=>design_tokens.O8,Divider:()=>divider.i,JupyterDesignSystem:()=>JupyterDesignSystem,ListboxElement:()=>listbox_element.k,Menu:()=>menu.v,MenuItem:()=>menu_item.sN,NumberField:()=>esm_number_field.Ki,Option:()=>listbox_option.wt,PaletteRGB:()=>color.vD,Progress:()=>base_progress.B,Radio:()=>radio_radio.Y,RadioGroup:()=>radio_group.E,Search:()=>esm_search.ol,Select:()=>Select,SliderLabel:()=>slider_label.PQ,StandardLuminance:()=>color.he,SwatchRGB:()=>color.wd,Tab:()=>tab.O,TabPanel:()=>tab_panel.x,Tabs:()=>tabs.m,TextArea:()=>esm_text_area.Kx,TextField:()=>esm_text_field.nv,Toolbar:()=>toolbar.o8,Tooltip:()=>tooltip.u,accentColor:()=>design_tokens.z,accentFillActive:()=>design_tokens.UE,accentFillActiveDelta:()=>design_tokens.Wo,accentFillFocus:()=>design_tokens.D8,accentFillFocusDelta:()=>design_tokens.v$,accentFillHover:()=>design_tokens.OC,accentFillHoverDelta:()=>design_tokens.B2,accentFillRecipe:()=>design_tokens.CM,accentFillRest:()=>design_tokens.Av,accentFillRestDelta:()=>design_tokens.N7,accentForegroundActive:()=>design_tokens.VN,accentForegroundActiveDelta:()=>design_tokens.kb,accentForegroundFocus:()=>design_tokens.cZ,accentForegroundFocusDelta:()=>design_tokens.nd,accentForegroundHover:()=>design_tokens.D9,accentForegroundHoverDelta:()=>design_tokens.L8,accentForegroundRecipe:()=>design_tokens.Rk,accentForegroundRest:()=>design_tokens.go,accentForegroundRestDelta:()=>design_tokens.kp,accentPalette:()=>design_tokens.au,accordionItemStyles:()=>accordionItemStyles,accordionStyles:()=>accordion_styles.T,addJupyterLabThemeChangeListener:()=>addJupyterLabThemeChangeListener,allComponents:()=>allComponents,anchorStyles:()=>anchor_styles.f,anchoredRegionStyles:()=>anchored_region_styles.Y,applyJupyterTheme:()=>applyJupyterTheme,avatarStyles:()=>avatarStyles,badgeStyles:()=>badgeStyles,baseErrorColor:()=>color.gN,baseHeightMultiplier:()=>design_tokens.nf,baseHorizontalSpacingMultiplier:()=>design_tokens.LQ,baseLayerLuminance:()=>design_tokens.q2,black:()=>color.Sn,bodyFont:()=>design_tokens.SV,breadcrumbItemStyles:()=>breadcrumbItemStyles,breadcrumbStyles:()=>breadcrumb_styles.S,cardStyles:()=>card_styles.F,checkboxStyles:()=>checkboxStyles,comboboxStyles:()=>comboboxStyles,controlCornerRadius:()=>design_tokens.UW,dataGridCellStyles:()=>dataGridCellStyles,dataGridRowStyles:()=>data_grid_row_styles.r,dataGridStyles:()=>data_grid_styles.l,dateFieldStyles:()=>dateFieldStyles,dateFieldTemplate:()=>dateFieldTemplate,density:()=>design_tokens.hV,designUnit:()=>design_tokens._5,dialogStyles:()=>dialog_styles.f,direction:()=>design_tokens.o7,disabledOpacity:()=>design_tokens.VF,dividerStyles:()=>divider_styles.T,errorBase:()=>color.rw,errorFillActive:()=>design_tokens.GB,errorFillAlgorithm:()=>color.U0,errorFillFocus:()=>design_tokens.mH,errorFillHover:()=>design_tokens.ek,errorFillRecipe:()=>design_tokens.Sl,errorFillRest:()=>design_tokens.a6,errorForegroundActive:()=>design_tokens.DV,errorForegroundAlgorithm:()=>color.lf,errorForegroundFocus:()=>design_tokens.YE,errorForegroundHover:()=>design_tokens.pg,errorForegroundRecipe:()=>design_tokens._S,errorForegroundRest:()=>design_tokens.ff,errorPalette:()=>design_tokens.Vu,fillColor:()=>design_tokens.If,focusStrokeInner:()=>design_tokens.a2,focusStrokeInnerRecipe:()=>design_tokens.J7,focusStrokeOuter:()=>design_tokens.yG,focusStrokeOuterRecipe:()=>design_tokens.Al,focusStrokeWidth:()=>design_tokens.vx,foregroundOnAccentActive:()=>design_tokens.Pp,foregroundOnAccentActiveLarge:()=>design_tokens.hR,foregroundOnAccentFocus:()=>design_tokens.$u,foregroundOnAccentFocusLarge:()=>design_tokens.iJ,foregroundOnAccentHover:()=>design_tokens.lJ,foregroundOnAccentHoverLarge:()=>design_tokens.Ue,foregroundOnAccentLargeRecipe:()=>design_tokens.jI,foregroundOnAccentRecipe:()=>design_tokens.A1,foregroundOnAccentRest:()=>design_tokens.w4,foregroundOnAccentRestLarge:()=>design_tokens.iX,foregroundOnErrorActive:()=>design_tokens.bg,foregroundOnErrorActiveLarge:()=>design_tokens.jn,foregroundOnErrorAlgorithm:()=>color.C3,foregroundOnErrorFocus:()=>design_tokens.aq,foregroundOnErrorFocusLarge:()=>design_tokens.NF,foregroundOnErrorHover:()=>design_tokens.A$,foregroundOnErrorHoverLarge:()=>design_tokens.vg,foregroundOnErrorLargeRecipe:()=>design_tokens.fr,foregroundOnErrorRecipe:()=>design_tokens.tZ,foregroundOnErrorRest:()=>design_tokens.rj,foregroundOnErrorRestLarge:()=>design_tokens.wt,horizontalSliderLabelStyles:()=>slider_label_styles.b2,imgTemplate:()=>avatar.IY,isDark:()=>color._T,jpAccordion:()=>jpAccordion,jpAccordionItem:()=>jpAccordionItem,jpAnchor:()=>jpAnchor,jpAnchoredRegion:()=>jpAnchoredRegion,jpAvatar:()=>jpAvatar,jpBadge:()=>jpBadge,jpBreadcrumb:()=>jpBreadcrumb,jpBreadcrumbItem:()=>jpBreadcrumbItem,jpButton:()=>jpButton,jpCard:()=>jpCard,jpCheckbox:()=>jpCheckbox,jpCombobox:()=>jpCombobox,jpDataGrid:()=>jpDataGrid,jpDataGridCell:()=>jpDataGridCell,jpDataGridRow:()=>jpDataGridRow,jpDateField:()=>jpDateField,jpDialog:()=>jpDialog,jpDivider:()=>jpDivider,jpListbox:()=>jpListbox,jpMenu:()=>jpMenu,jpMenuItem:()=>jpMenuItem,jpNumberField:()=>jpNumberField,jpOption:()=>jpOption,jpProgress:()=>jpProgress,jpProgressRing:()=>jpProgressRing,jpRadio:()=>jpRadio,jpRadioGroup:()=>jpRadioGroup,jpSearch:()=>jpSearch,jpSelect:()=>jpSelect,jpSlider:()=>jpSlider,jpSliderLabel:()=>jpSliderLabel,jpSwitch:()=>jpSwitch,jpTab:()=>jpTab,jpTabPanel:()=>jpTabPanel,jpTabs:()=>jpTabs,jpTextArea:()=>jpTextArea,jpTextField:()=>jpTextField,jpToolbar:()=>jpToolbar,jpTooltip:()=>jpTooltip,jpTreeItem:()=>jpTreeItem,jpTreeView:()=>jpTreeView,listboxStyles:()=>listboxStyles,menuItemStyles:()=>menuItemStyles,menuStyles:()=>menu_styles.J,neutralColor:()=>design_tokens.z4,neutralFillActive:()=>design_tokens.Gy,neutralFillActiveDelta:()=>design_tokens.hD,neutralFillFocus:()=>design_tokens.CH,neutralFillFocusDelta:()=>design_tokens.VQ,neutralFillHover:()=>design_tokens.Xi,neutralFillHoverDelta:()=>design_tokens.jW,neutralFillInputActive:()=>design_tokens.Iu,neutralFillInputActiveDelta:()=>design_tokens.q_,neutralFillInputFocus:()=>design_tokens.rF,neutralFillInputFocusDelta:()=>design_tokens.Zb,neutralFillInputHover:()=>design_tokens.Tm,neutralFillInputHoverDelta:()=>design_tokens.EL,neutralFillInputRecipe:()=>design_tokens.sm,neutralFillInputRest:()=>design_tokens._B,neutralFillInputRestDelta:()=>design_tokens.ef,neutralFillLayerRecipe:()=>design_tokens.ab,neutralFillLayerRest:()=>design_tokens.RJ,neutralFillLayerRestDelta:()=>design_tokens.YL,neutralFillRecipe:()=>design_tokens.At,neutralFillRest:()=>design_tokens.wF,neutralFillRestDelta:()=>design_tokens.MY,neutralFillStealthActive:()=>design_tokens.sG,neutralFillStealthActiveDelta:()=>design_tokens.gs,neutralFillStealthFocus:()=>design_tokens.s0,neutralFillStealthFocusDelta:()=>design_tokens.IU,neutralFillStealthHover:()=>design_tokens.Qp,neutralFillStealthHoverDelta:()=>design_tokens.fq,neutralFillStealthRecipe:()=>design_tokens.DF,neutralFillStealthRest:()=>design_tokens.jq,neutralFillStealthRestDelta:()=>design_tokens.qD,neutralFillStrongActive:()=>design_tokens.hP,neutralFillStrongActiveDelta:()=>design_tokens.Vt,neutralFillStrongFocus:()=>design_tokens.Nz,neutralFillStrongFocusDelta:()=>design_tokens.UC,neutralFillStrongHover:()=>design_tokens.Dg,neutralFillStrongHoverDelta:()=>design_tokens.sc,neutralFillStrongRecipe:()=>design_tokens.Qi,neutralFillStrongRest:()=>design_tokens.P0,neutralFillStrongRestDelta:()=>design_tokens.Cl,neutralForegroundHint:()=>design_tokens.Q5,neutralForegroundHintRecipe:()=>design_tokens.ax,neutralForegroundRecipe:()=>design_tokens.GU,neutralForegroundRest:()=>design_tokens.hY,neutralLayer1:()=>design_tokens.y9,neutralLayer1Recipe:()=>design_tokens.AI,neutralLayer2:()=>design_tokens.jx,neutralLayer2Recipe:()=>design_tokens.vr,neutralLayer3:()=>design_tokens.hZ,neutralLayer3Recipe:()=>design_tokens.IZ,neutralLayer4:()=>design_tokens.sp,neutralLayer4Recipe:()=>design_tokens.Ve,neutralLayerCardContainer:()=>design_tokens.$B,neutralLayerCardContainerRecipe:()=>design_tokens.nB,neutralLayerFloating:()=>design_tokens.s5,neutralLayerFloatingRecipe:()=>design_tokens.L4,neutralPalette:()=>design_tokens.yv,neutralStrokeActive:()=>design_tokens.c1,neutralStrokeActiveDelta:()=>design_tokens.IM,neutralStrokeDividerRecipe:()=>design_tokens.$9,neutralStrokeDividerRest:()=>design_tokens.dt,neutralStrokeDividerRestDelta:()=>design_tokens.EB,neutralStrokeFocus:()=>design_tokens.V0,neutralStrokeFocusDelta:()=>design_tokens.Bx,neutralStrokeHover:()=>design_tokens.QP,neutralStrokeHoverDelta:()=>design_tokens.rn,neutralStrokeRecipe:()=>design_tokens.lu,neutralStrokeRest:()=>design_tokens.ak,neutralStrokeRestDelta:()=>design_tokens.fd,numberFieldStyles:()=>numberFieldStyles,optionStyles:()=>optionStyles,progressStyles:()=>progress_styles.Q,provideJupyterDesignSystem:()=>provideJupyterDesignSystem,radioGroupStyles:()=>radio_group_styles.p,radioStyles:()=>radioStyles,searchStyles:()=>searchStyles,selectStyles:()=>selectStyles,sliderLabelStyles:()=>slider_label_styles.Ok,strokeWidth:()=>design_tokens.H,tabPanelStyles:()=>tab_panel_styles.T,tabStyles:()=>tabStyles,tabsStyles:()=>tabsStyles,textAreaStyles:()=>textAreaStyles,textFieldStyles:()=>textFieldStyles,toolbarStyles:()=>toolbarStyles,tooltipStyles:()=>tooltip_styles.n,typeRampBaseFontSize:()=>design_tokens.cS,typeRampBaseLineHeight:()=>design_tokens.RU,typeRampMinus1FontSize:()=>design_tokens.sN,typeRampMinus1LineHeight:()=>design_tokens.A_,typeRampMinus2FontSize:()=>design_tokens.G8,typeRampMinus2LineHeight:()=>design_tokens.Mw,typeRampPlus1FontSize:()=>design_tokens.Pw,typeRampPlus1LineHeight:()=>design_tokens.b3,typeRampPlus2FontSize:()=>design_tokens.mW,typeRampPlus2LineHeight:()=>design_tokens.I7,typeRampPlus3FontSize:()=>design_tokens.ip,typeRampPlus3LineHeight:()=>design_tokens.D$,typeRampPlus4FontSize:()=>design_tokens.IW,typeRampPlus4LineHeight:()=>design_tokens.iL,typeRampPlus5FontSize:()=>design_tokens.CX,typeRampPlus5LineHeight:()=>design_tokens.n5,typeRampPlus6FontSize:()=>design_tokens.Z,typeRampPlus6LineHeight:()=>design_tokens.yD,verticalSliderLabelStyles:()=>slider_label_styles.KI,white:()=>color.ix});var accordion=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/accordion/accordion.js"),accordion_template=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/accordion/accordion.template.js"),accordion_styles=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/accordion/accordion.styles.js"),accordion_item=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/accordion-item/accordion-item.js"),accordion_item_template=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/accordion-item/accordion-item.template.js"),css=__webpack_require__("../../node_modules/@microsoft/fast-element/dist/esm/styles/css.js"),display=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/utilities/style/display.js"),style_focus=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/utilities/style/focus.js"),match_media_stylesheet_behavior=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/utilities/match-media-stylesheet-behavior.js"),system_colors=__webpack_require__("../../node_modules/@microsoft/fast-web-utilities/dist/system-colors.js"),design_tokens=__webpack_require__("./src/design-tokens.ts");const heightNumber=css.j`(${design_tokens.nf} + ${design_tokens.hV}) * ${design_tokens._5}`,accordionItemStyles=(context,definition)=>css.i` ${(0,display.j)("flex")} :host { box-sizing: border-box; font-family: ${design_tokens.SV}; @@ -994,12 +994,6 @@ border-color: ${system_colors.H.GrayText}; } `))),appearanceBehavior("stealth",css.i` - :host([appearance='stealth'][disabled]), - :host([appearance='stealth'][disabled]:hover), - :host([appearance='stealth'][disabled]:active) { - background: ${design_tokens.jq}; - } - ${StealthButtonStyles} `.withBehaviors((0,match_media_stylesheet_behavior.vF)(css.i` :host([appearance='stealth'][disabled]) { @@ -3394,4 +3388,4 @@ fill: ${system_colors.H.FieldText}; } `)),expandCollapseGlyph:'\n \n \n \n '});var tree_view=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/tree-view/tree-view.js"),tree_view_template=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/tree-view/tree-view.template.js"),tree_view_styles=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/tree-view/tree-view.styles.js");const jpTreeView=tree_view.L.compose({baseName:"tree-view",template:tree_view_template.E,styles:tree_view_styles.N}),allComponents={jpAccordion,jpAccordionItem,jpAnchor,jpAnchoredRegion,jpAvatar,jpBadge,jpBreadcrumb,jpBreadcrumbItem,jpButton,jpCard,jpCheckbox,jpCombobox,jpDataGrid,jpDataGridCell,jpDataGridRow,jpDateField,jpDialog,jpDivider,jpListbox,jpMenu,jpMenuItem,jpNumberField,jpOption,jpProgress,jpProgressRing,jpRadio,jpRadioGroup,jpSearch,jpSelect,jpSlider,jpSliderLabel,jpSwitch,jpTab,jpTabPanel,jpTabs,jpTextArea,jpTextField,jpToolbar,jpTooltip,jpTreeItem,jpTreeView,register(container,...rest){if(container)for(const key in this)"register"!==key&&this[key]().register(container,...rest)}};var design_system=__webpack_require__("../../node_modules/@microsoft/fast-foundation/dist/esm/design-system/design-system.js");function provideJupyterDesignSystem(element){return design_system.K.getOrCreate(element).withPrefix("jp")}var parse_color=__webpack_require__("../../node_modules/@microsoft/fast-colors/dist/parse-color.js"),color_converters=__webpack_require__("../../node_modules/@microsoft/fast-colors/dist/color-converters.js"),color_hsl=__webpack_require__("../../node_modules/@microsoft/fast-colors/dist/color-hsl.js"),is_dark=__webpack_require__("../../node_modules/@microsoft/fast-components/dist/esm/color/utilities/is-dark.js"),color=__webpack_require__("./src/color.ts");const THEME_NAME_BODY_ATTRIBUTE="data-jp-theme-name",THEME_MODE_BODY_ATTRIBUTE="data-jp-theme-light",BASE_LAYOUT_COLOR="--jp-layout-color1";let isThemeChangeInitialized=!1;function addJupyterLabThemeChangeListener(){isThemeChangeInitialized||(isThemeChangeInitialized=!0,function initThemeChangeListener(){const addObserver=()=>{new MutationObserver((()=>{applyJupyterTheme()})).observe(document.body,{attributes:!0,attributeFilter:[THEME_NAME_BODY_ATTRIBUTE],childList:!1,characterData:!1}),applyJupyterTheme()};"complete"===document.readyState?addObserver():window.addEventListener("load",addObserver)}())}const intConverter=value=>{const parsedValue=parseInt(value,10);return isNaN(parsedValue)?null:parsedValue},tokenMappings={"--jp-border-width":{converter:intConverter,token:design_tokens.H},"--jp-border-radius":{converter:intConverter,token:design_tokens.UW},[BASE_LAYOUT_COLOR]:{converter:(value,isDark)=>{const parsedColor=(0,parse_color.lu)(value);if(parsedColor){const hsl=(0,color_converters.lw)(parsedColor),correctedHSL=color_hsl.H.fromObject({h:hsl.h,s:hsl.s,l:.5}),correctedRGB=(0,color_converters.hP)(correctedHSL);return color.vD.from(color.wd.create(correctedRGB.r,correctedRGB.g,correctedRGB.b))}return null},token:design_tokens.yv},"--jp-brand-color1":{converter:(value,isDark)=>{const parsedColor=(0,parse_color.lu)(value);if(parsedColor){const hsl=(0,color_converters.lw)(parsedColor),direction=isDark?1:-1,correctedHSL=color_hsl.H.fromObject({h:hsl.h,s:hsl.s,l:hsl.l+direction*design_tokens.B2.getValueFor(document.body)/94}),correctedRGB=(0,color_converters.hP)(correctedHSL);return color.vD.from(color.wd.create(correctedRGB.r,correctedRGB.g,correctedRGB.b))}return null},token:design_tokens.au},"--jp-ui-font-family":{token:design_tokens.SV},"--jp-ui-font-size1":{token:design_tokens.cS}};function applyJupyterTheme(){var _a;const styles=getComputedStyle(document.body),themeMode=document.body.getAttribute(THEME_MODE_BODY_ATTRIBUTE);let isDark_=!1;if(themeMode)isDark_="false"===themeMode;else{const layoutColor=styles.getPropertyValue(BASE_LAYOUT_COLOR).toString();if(layoutColor){const parsedColor=(0,parse_color.lu)(layoutColor);parsedColor&&(isDark_=(0,is_dark._)(color.wd.create(parsedColor.r,parsedColor.g,parsedColor.b)),console.debug(`Theme is ${isDark_?"dark":"light"} based on '${BASE_LAYOUT_COLOR}' value: ${layoutColor}.`))}}design_tokens.q2.setValueFor(document.body,isDark_?color.he.DarkMode:color.he.LightMode);for(const jpTokenName in tokenMappings){const toolkitTokenName=tokenMappings[jpTokenName],value=styles.getPropertyValue(jpTokenName).toString();if(document.body&&""!==value){const parsedValue=(null!==(_a=toolkitTokenName.converter)&&void 0!==_a?_a:v=>v)(value.trim(),isDark_);null!==parsedValue?toolkitTokenName.token.setValueFor(document.body,parsedValue):console.error(`Fail to parse value '${value}' for '${jpTokenName}' as FAST design token.`)}}}const JupyterDesignSystem=provideJupyterDesignSystem().register(allComponents);const _storybook_preview={parameters:{actions:{argTypesRegex:"^on[A-Z].*"},options:{storySort:{order:["Docs","Library"]},isToolshown:!0,enableShortcuts:!1},docs:{theme:__webpack_require__("../../node_modules/@storybook/theming/dist/chunk-E56DBAEL.mjs").np.dark},backgrounds:{default:"dark",values:[{name:"light",value:"#f9f9f9"},{name:"dark",value:"#252526"}]}},globalTypes:{accent:{name:"Accent",description:"Theme accent color for components",defaultValue:"#006CBE",toolbar:{icon:"paintbrush",items:[{value:"#006CBE",right:"🔵",title:"blue"},{value:"#DA1A5F",title:"pink"},{value:"#f2c812",title:"yellow"}]}}}}},"./docs lazy recursive ^\\.\\/.*$ include: (?:\\/docs(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.mdx)$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./Introduction.mdx":["./docs/Introduction.mdx",6281],"./api-report.mdx":["./docs/api-report.mdx",5815,6978],"./changelog.mdx":["./docs/changelog.mdx",5815,221],"./contributing.mdx":["./docs/contributing.mdx",5815,8401],"./getting-started.mdx":["./docs/getting-started.mdx",5815,2549]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./docs lazy recursive ^\\.\\/.*$ include: (?:\\/docs(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.mdx)$",module.exports=webpackAsyncContext},"./src lazy recursive ^\\.\\/.*$ include: (?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.mdx)$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./anchored-region/anchored-region.stories.mdx":["./src/anchored-region/anchored-region.stories.mdx",5815,5867],"./button/Documentation.mdx":["./src/button/Documentation.mdx",7246,5815,7345]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./src lazy recursive ^\\.\\/.*$ include: (?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.mdx)$",module.exports=webpackAsyncContext},"./src lazy recursive ^\\.\\/.*$ include: (?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./anchored-region/anchored-region.stories.mdx":["./src/anchored-region/anchored-region.stories.mdx",5815,5867]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./src lazy recursive ^\\.\\/.*$ include: (?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$",module.exports=webpackAsyncContext},"./src lazy recursive ^\\.\\/.*$ include: (?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.ts)$":(module,__unused_webpack_exports,__webpack_require__)=>{var map={"./accordion-item/accordion-item.stories":["./src/accordion-item/accordion-item.stories.ts",7246,7441],"./accordion-item/accordion-item.stories.ts":["./src/accordion-item/accordion-item.stories.ts",7246,7441],"./accordion/accordion.stories":["./src/accordion/accordion.stories.ts",7246,1928],"./accordion/accordion.stories.ts":["./src/accordion/accordion.stories.ts",7246,1928],"./anchor/anchor.stories":["./src/anchor/anchor.stories.ts",7246,6750],"./anchor/anchor.stories.ts":["./src/anchor/anchor.stories.ts",7246,6750],"./avatar/avatar.stories":["./src/avatar/avatar.stories.ts",7246,2355],"./avatar/avatar.stories.ts":["./src/avatar/avatar.stories.ts",7246,2355],"./badge/badge.stories":["./src/badge/badge.stories.ts",7246,412],"./badge/badge.stories.ts":["./src/badge/badge.stories.ts",7246,412],"./breadcrumb-item/breadcrumb-item.stories":["./src/breadcrumb-item/breadcrumb-item.stories.ts",7246,2886],"./breadcrumb-item/breadcrumb-item.stories.ts":["./src/breadcrumb-item/breadcrumb-item.stories.ts",7246,2886],"./breadcrumb/breadcrumb.stories":["./src/breadcrumb/breadcrumb.stories.ts",7246,6842],"./breadcrumb/breadcrumb.stories.ts":["./src/breadcrumb/breadcrumb.stories.ts",7246,6842],"./button/button.stories":["./src/button/button.stories.ts",7246,911],"./button/button.stories.ts":["./src/button/button.stories.ts",7246,911],"./card/card.stories":["./src/card/card.stories.ts",7246,6279],"./card/card.stories.ts":["./src/card/card.stories.ts",7246,6279],"./checkbox/checkbox.stories":["./src/checkbox/checkbox.stories.ts",7246,3329],"./checkbox/checkbox.stories.ts":["./src/checkbox/checkbox.stories.ts",7246,3329],"./combobox/combobox.stories":["./src/combobox/combobox.stories.ts",7246,9736],"./combobox/combobox.stories.ts":["./src/combobox/combobox.stories.ts",7246,9736],"./data-grid/data-grid.stories":["./src/data-grid/data-grid.stories.ts",7246,3739],"./data-grid/data-grid.stories.ts":["./src/data-grid/data-grid.stories.ts",7246,3739],"./date-field/date-field.stories":["./src/date-field/date-field.stories.ts",7246,5318],"./date-field/date-field.stories.ts":["./src/date-field/date-field.stories.ts",7246,5318],"./dialog/dialog.stories":["./src/dialog/dialog.stories.ts",7246,1499],"./dialog/dialog.stories.ts":["./src/dialog/dialog.stories.ts",7246,1499],"./divider/divider.stories":["./src/divider/divider.stories.ts",7246,3927],"./divider/divider.stories.ts":["./src/divider/divider.stories.ts",7246,3927],"./listbox/listbox.stories":["./src/listbox/listbox.stories.ts",7246,7768],"./listbox/listbox.stories.ts":["./src/listbox/listbox.stories.ts",7246,7768],"./menu-item/menu-item.stories":["./src/menu-item/menu-item.stories.ts",7246,9498],"./menu-item/menu-item.stories.ts":["./src/menu-item/menu-item.stories.ts",7246,9498],"./menu/menu.stories":["./src/menu/menu.stories.ts",7246,553],"./menu/menu.stories.ts":["./src/menu/menu.stories.ts",7246,553],"./number-field/number-field.stories":["./src/number-field/number-field.stories.ts",7246,2985],"./number-field/number-field.stories.ts":["./src/number-field/number-field.stories.ts",7246,2985],"./option/option.stories":["./src/option/option.stories.ts",7246,3562],"./option/option.stories.ts":["./src/option/option.stories.ts",7246,3562],"./progress-ring/progress-ring.stories":["./src/progress-ring/progress-ring.stories.ts",7246,3419],"./progress-ring/progress-ring.stories.ts":["./src/progress-ring/progress-ring.stories.ts",7246,3419],"./progress/progress.stories":["./src/progress/progress.stories.ts",7246,3968],"./progress/progress.stories.ts":["./src/progress/progress.stories.ts",7246,3968],"./radio-group/radio-group.stories":["./src/radio-group/radio-group.stories.ts",7246,2031],"./radio-group/radio-group.stories.ts":["./src/radio-group/radio-group.stories.ts",7246,2031],"./radio/radio.stories":["./src/radio/radio.stories.ts",7246,2342],"./radio/radio.stories.ts":["./src/radio/radio.stories.ts",7246,2342],"./search/search.stories":["./src/search/search.stories.ts",7246,1127],"./search/search.stories.ts":["./src/search/search.stories.ts",7246,1127],"./select/select.stories":["./src/select/select.stories.ts",7246,5980],"./select/select.stories.ts":["./src/select/select.stories.ts",7246,5980],"./slider-label/slider-label.stories":["./src/slider-label/slider-label.stories.ts",7246,1172],"./slider-label/slider-label.stories.ts":["./src/slider-label/slider-label.stories.ts",7246,1172],"./slider/slider.stories":["./src/slider/slider.stories.ts",7246,6026],"./slider/slider.stories.ts":["./src/slider/slider.stories.ts",7246,6026],"./switch/switch.stories":["./src/switch/switch.stories.ts",7246,932],"./switch/switch.stories.ts":["./src/switch/switch.stories.ts",7246,932],"./tabs/tabs.stories":["./src/tabs/tabs.stories.ts",7246,459],"./tabs/tabs.stories.ts":["./src/tabs/tabs.stories.ts",7246,459],"./text-area/text-area.stories":["./src/text-area/text-area.stories.ts",7246,3357],"./text-area/text-area.stories.ts":["./src/text-area/text-area.stories.ts",7246,3357],"./text-field/text-field.stories":["./src/text-field/text-field.stories.ts",7246,6463],"./text-field/text-field.stories.ts":["./src/text-field/text-field.stories.ts",7246,6463],"./toolbar/toolbar.stories":["./src/toolbar/toolbar.stories.ts",7246,4463],"./toolbar/toolbar.stories.ts":["./src/toolbar/toolbar.stories.ts",7246,4463],"./tooltip/tooltip.stories":["./src/tooltip/tooltip.stories.ts",7246,4253],"./tooltip/tooltip.stories.ts":["./src/tooltip/tooltip.stories.ts",7246,4253],"./tree-item/tree-item.stories":["./src/tree-item/tree-item.stories.ts",7246,7279],"./tree-item/tree-item.stories.ts":["./src/tree-item/tree-item.stories.ts",7246,7279],"./tree-view/tree-view.stories":["./src/tree-view/tree-view.stories.ts",7246,1364],"./tree-view/tree-view.stories.ts":["./src/tree-view/tree-view.stories.ts",7246,1364]};function webpackAsyncContext(req){if(!__webpack_require__.o(map,req))return Promise.resolve().then((()=>{var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}));var ids=map[req],id=ids[0];return Promise.all(ids.slice(1).map(__webpack_require__.e)).then((()=>__webpack_require__(id)))}webpackAsyncContext.keys=()=>Object.keys(map),webpackAsyncContext.id="./src lazy recursive ^\\.\\/.*$ include: (?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.ts)$",module.exports=webpackAsyncContext},"./storybook-config-entry.js":(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";var external_STORYBOOK_MODULE_GLOBAL_=__webpack_require__("@storybook/global"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),external_STORYBOOK_MODULE_CHANNELS_=__webpack_require__("@storybook/channels");const importers=[async path=>{if(!/^\.[\\/](?:docs(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.mdx)$/.exec(path))return;const pathRemainder=path.substring(7);return __webpack_require__("./docs lazy recursive ^\\.\\/.*$ include: (?:\\/docs(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.mdx)$")("./"+pathRemainder)},async path=>{if(!/^\.[\\/](?:src(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.mdx)$/.exec(path))return;const pathRemainder=path.substring(6);return __webpack_require__("./src lazy recursive ^\\.\\/.*$ include: (?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.mdx)$")("./"+pathRemainder)},async path=>{if(!/^\.[\\/](?:src(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.mdx)$/.exec(path))return;const pathRemainder=path.substring(6);return __webpack_require__("./src lazy recursive ^\\.\\/.*$ include: (?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.mdx)$")("./"+pathRemainder)},async path=>{if(!/^\.[\\/](?:src(?:\/(?!\.)(?:(?:(?!(?:^|\/)\.).)*?)\/|\/|$)(?!\.)(?=.)[^/]*?\.stories\.ts)$/.exec(path))return;const pathRemainder=path.substring(6);return __webpack_require__("./src lazy recursive ^\\.\\/.*$ include: (?:\\/src(?:\\/(?%21\\.)(?:(?:(?%21(?:^%7C\\/)\\.).)*?)\\/%7C\\/%7C$)(?%21\\.)(?=.)[^/]*?\\.stories\\.ts)$")("./"+pathRemainder)}];const channel=(0,external_STORYBOOK_MODULE_CHANNELS_.createBrowserChannel)({page:"preview"});external_STORYBOOK_MODULE_PREVIEW_API_.addons.setChannel(channel),"DEVELOPMENT"===external_STORYBOOK_MODULE_GLOBAL_.global.CONFIG_TYPE&&(window.__STORYBOOK_SERVER_CHANNEL__=channel);const preview=new external_STORYBOOK_MODULE_PREVIEW_API_.PreviewWeb;window.__STORYBOOK_PREVIEW__=preview,window.__STORYBOOK_STORY_STORE__=preview.storyStore,window.__STORYBOOK_ADDONS_CHANNEL__=channel,window.__STORYBOOK_CLIENT_API__=new external_STORYBOOK_MODULE_PREVIEW_API_.ClientApi({storyStore:preview.storyStore}),preview.initialize({importFn:async function importFn(path){for(let i=0;iimporters[i](path),x());if(moduleExports)return moduleExports}var x},getProjectAnnotations:()=>(0,external_STORYBOOK_MODULE_PREVIEW_API_.composeConfigs)([__webpack_require__("../../node_modules/@storybook/html/preview.js"),__webpack_require__("../../node_modules/@storybook/addon-docs/dist/preview.mjs"),__webpack_require__("../../node_modules/@storybook/addon-links/preview.js"),__webpack_require__("../../node_modules/@storybook/addon-essentials/dist/actions/preview.mjs"),__webpack_require__("../../node_modules/@storybook/addon-essentials/dist/backgrounds/preview.mjs"),__webpack_require__("../../node_modules/@storybook/addon-essentials/dist/measure/preview.mjs"),__webpack_require__("../../node_modules/@storybook/addon-essentials/dist/outline/preview.mjs"),__webpack_require__("../../node_modules/@storybook/addon-essentials/dist/highlight/preview.mjs"),__webpack_require__("../../node_modules/@storybook/addon-a11y/preview.js"),__webpack_require__("./.storybook/preview.js")])})},"@storybook/channels":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CHANNELS__},"@storybook/client-logger":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CLIENT_LOGGER__},"@storybook/core-events":module=>{"use strict";module.exports=__STORYBOOK_MODULE_CORE_EVENTS__},"@storybook/global":module=>{"use strict";module.exports=__STORYBOOK_MODULE_GLOBAL__},"@storybook/preview-api":module=>{"use strict";module.exports=__STORYBOOK_MODULE_PREVIEW_API__}},__webpack_require__=>{__webpack_require__.O(0,[8410],(()=>{return moduleId="./storybook-config-entry.js",__webpack_require__(__webpack_require__.s=moduleId);var moduleId}));__webpack_require__.O()}]); -//# sourceMappingURL=main.a76b4119.iframe.bundle.js.map \ No newline at end of file +//# sourceMappingURL=main.f78c1cee.iframe.bundle.js.map \ No newline at end of file diff --git a/main.f78c1cee.iframe.bundle.js.map b/main.f78c1cee.iframe.bundle.js.map new file mode 100644 index 00000000..dc63f2a3 --- /dev/null +++ b/main.f78c1cee.iframe.bundle.js.map @@ -0,0 +1 @@ +{"version":3,"file":"main.f78c1cee.iframe.bundle.js","mappings":";AAaA;;AAEA;;AAEA;AACA;AACA;AACA;;;;;AAKA;;;;;;AAMA;AACA;;;;;;;;;AASA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;;;;;;;;;;;;;AAaA;;AAEA;AACA;;;;AAIA;;ACvHA;ACQA;;;;;;AAMA;AACA;;;AAGA;AACA;;;;;AAKA;;;;;;;;;AASA;;;;;;;;;;;;;;AAcA;;;;;;;;;;;;;;;;;AAiBA;;;;;;AAMA;;;;AAIA;AA3EA;;;AA2EA;AAhFA;;;AAgFA;AC9EA;AACA;;;;;;;;;;AAUA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AAcA;AACA;AACA;;;;AAIA;;;;;;;;AAQA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;AACA;;;;AAIA;;;;AAIA;;;;;;;AAOA;;;;AAIA;;;;AAIA;;AAEA;;;;AAIA;AACA;;;;;AAKA;AACA;;;;;;;;;;;AAWA;AACA;;;AAGA;AACA;AACA;;;AAGA;;AC9IA;AACA;;AAEA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;;AAEA;AACA;;;;;;;;;AASA;;AAEA;AACA;;;;;;ACzBA;ACAA;;;AAGA;AACA;;AAEA;AACA;;AAEA;;;;;;;;;;;;;;;;;AAiBA;;;;;;;;;;AAUA;;;;AAIA;;;;;;;;;;AAUA;;;;;;;;;AASA;;;;AAIA;;;AAGA;AACA;AACA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;AAEA;AACA;;;;AAIA;;ACzGA;ACcA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;;;;;;;;;;;AAWA;;;;AAIA;;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;;;;;;;;;;;;AAYA;AACA;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;AAYA;;AAEA;AACA;AACA;;;;;;AAMA;AACA;;;;AAIA;;AAEA;AACA;AACA;;;;;AAKA;;;;AAIA;AACA;;;;AAIA;;AAEA;AACA;AACA;;;AAOA;;AAEA;AACA;;;;AAIA;AACA;;;;AAIA;;;;AAIA;AACA;;;AAGA;AACA;;AAEA;;;AAGA;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;AAEA;;;;AAIA;AACA;;AAMA;;AAEA;AACA;;;;AAIA;AACA;;;;AAIA;;;;AAIA;AACA;;;AAGA;AACA;;AAEA;;;AAGA;AACA;;;;;AAKA;AACA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;AAEA;;;;AAIA;AACA;;AAMA;;;AAGA;;;;;;;;;;;;;AAaA;;;;;AAKA;;;;;;;;;;AAUA;;;;;;;AAOA;;;;AAIA;;;AAGA;;;;AAIA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;AAEA;;;;AAIA;AACA;;AAMA;;;AAGA;;;;AAIA;;;;AAIA;;;;;;;AAOA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;;;;AAIA;AACA;AACA;;;;AAIA;;AAEA;;AAMA;;;;;;AAMA;;;;AAIA;;;AAGA;AACA;;AAEA;;;;AAIA;;AAEA;;;;;AAKA;AACA;AACA;;;;AAIA;AACA;AACA;;;;;AAKA;;;;AAIA;AACA;AACA;AACA;;;;AAIA;;AAEA;;ACxcA;;;;ADmdA;AACA;AACA;;;AAGA;AACA;;;;;;AAMA;AACA;AACA;AACA;;;AAGA;;;;AAIA;;;AAGA;AACA;;;AAGA;AACA;AACA;;AAEA;;;;AAIA;;;AAGA;AACA;;;AAGA;AACA;AACA;;AAEA;;;;AAIA;;;;;;;;;AASA;AACA;;;AAGA;;;;;;;;AAQA;;;;;AAKA;;;AAGA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;;;AAIA;;AAEA;;ACrgBA;AC3CA;;;AAGA;;;;;;;;AAQA;AACA;;AAEA;AACA;AACA;;;;;;AAMA;AACA;;;AAGA;AACA;;AAEA;AACA;;;;;;;;;;;;AAYA;;;;;;AAMA;AACA;;;;;;;;;;;AAWA;AACA;;;;AAIA;AACA;;;AAGA;AACA;;;;;AAKA;AACA;;;;AAIA;AACA;;;;;;AAMA;;;;;;AAMA;;;;AAIA;AACA;;;;;;AAMA;;;;;;AAMA;;;AAGA;AACA;;;;;;;;AAQA;;;;;;;;;AASA;;AAEA;;;AAGA;AACA;;;AAGA;;;AAGA;;;;AAIA;AACA;;AAEA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;;AAGA;;;;;AAKA;;;AAGA;;;AAGA;;;;;;;AAOA;AACA;;;;;;;AAOA;;;;;AAKA;;ACvMA;ACAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;;;;AAYA;AACA;AACA;AACA;;;;;AAKA;AACA;;;;;;;;;;;;AAYA;;;;;;;;;;;;AAYA;;AAEA;;AAEA;;;;;;;;;AASA;AACA;;;AAGA;AACA;AACA;AACA;;;;AAIA;AACA;;;;AAIA;;;;;AAKA;AACA;;;;;AAKA;AACA;AACA;;;;;;;;;;;;;;;AAeA;;;;;AAKA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;;;;;;;;;;;;;;AAeA;AACA;;;;;;;;AAQA;;;AAGA;;;AAGA;AACA;AACA;AACA;AACA;;;;;AAKA;AACA;;;;AAIA;AACA;AACA;;;;;;;AAOA;;;;AAIA;AACA;;;;AAIA;;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AASA;;;AC/NA;AACA;;;;;;;;AAQA;;;;;AAKA;AACA;AACA;;;;;;;;AAQA;AACA;AACA;;;;;;AAMA;;;;;ACjCA;;ACGA;AACA;;AAEA;AACA;AACA;AACA;;;;AAIA;;;;;;;AAOA;AACA;;AAEA;;;;AAIA;AACA;;;AAGA;AACA;AACA;;AC/BA;ACHA;;ACFA;;;;AAIA;;;AAKA;;;;AAOA;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;;AC1CA;ACGA;;AAEA;AACA;AACA;AACA;;;AAGA;;;AAGA;AACA;;;;;AAKA;;AAEA;AACA;;;;AAIA;AACA;;;;;AAKA;;AAEA;;;;;AAKA;;;AAGA;AACA;AACA;AACA;AACA;;;AAGA;AACA;AACA;;;;AAIA;AACA;AACA;AACA;;AAEA;ACjEA;;;AAGA;;;AAGA;;;;;;AAMA;;AAEA;;;AAGA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA;AACA;AACA;AACA;;;;AAIA;AACA;;;;;;AAMA;AACA;;;;AAIA;AACA;;;;AAIA;;AAEA;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA;;;;;AAKA;AACA;;;;AAIA;;;;;;;;;;;;;;;;;;AAkBA;;;;;;;;AAQA;;;;;;;;;;;;AAYA;;;;;;;;AAQA;;;AAGA;;;;;AAKA;AACA;;;;;;;;;AASA;;;;AAIA;AACA;AACA;;;AAGA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;AASA;AACA;;;;;;;;AAQA;AACA;;;;;AAKA;AACA;;;;;;AAMA;AACA;AACA;;;AAGA;AACA;AACA;;;;AAIA;AACA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;AAIA;AACA;;AAEA;;;;AAIA;;;;ACpWA;ACFA;;;;;;;;;;;;;;;;;;;;;AAqBA;;;;AAIA;;;;;;;AClBA;ACLA;;AAEA;AACA;AACA;;AAEA;;;;AAIA;AACA;AACA;AACA;;;AAGA;;;;;;AAMA;AACA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;;;;AAKA;AACA;;;;AAIA;AACA;;;;;;;;;;;;;;;;;;;;;;AAsBA;AACA;;;;;;;;;;AAUA;;;;AAIA;;;;;;AAMA;AACA;;;;;AAKA;AACA;;;;ACnGA;ACDA;AACA;;;AAGA;;;;;;;;;;;AAWA;AACA;;;AAGA;AACA;;;;;;AAMA;AACA;;;AAGA;AACA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;AAqBA;AACA;;;;;;AAMA;AACA;;;;AAIA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;;;;;AAMA;AACA;;;;AAIA;AACA;;;;;;AAMA;AACA;;;AAGA;;AAEA;;;;;;;AAOA;;;;;;;;AAQA;;AAEA;;;;AAIA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;AAGA;AACA;;;;;;;;AAQA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;;;;;;;AAOA;;;;;AAKA;AACA;;;;AAIA;AACA;;ACjLA;ACOA;;;;AAIA;;AAEA;;;;;;;;;AASA;;;;;;;;;;;AAWA;;;AAGA;AACA;AACA;AACA;;AAEA;AACA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrDA;;;;;ACDA;AACA;;;;AAIA;AACA;;;;AAIA;;;AAGA;;;;;;;;;;;;;;;;;;AAkBA;;AAEA;AACA;;;;;;;;AAQA;;;;;;;AAOA;AACA;;;AAGA;AACA;;;AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA;;AAEA;;;;;AAKA;;;;AAIA;;;AAGA;;AAEA;;;AAGA;AACA;;;;AAIA;;;;AAIA;;AAEA;AACA;;;;;;;;AAQA;;;AAGA;AACA;AACA;;AAEA;AACA;;AClIA;;;;;ACAA;;;AAGA;AACA;AAKA;;;;AAIA;;;;;;;AAOA;;;;;;;AAOA;AACA;AACA;AACA;AACA;;;;AAIA;AACA;;;;;;AAMA;AACA;AACA;;;;AAIA;AACA;;;AAGA;;AAEA;;;;;;;AAOA;AACA;;;;;AAKA;;AAEA;AACA;;;;;AAKA;;;;AAIA;;AAGA;AACA;AACA;;;;;;;;;;;AAWA;;;;AAIA;;;;AAIA;AACA;;;;AAIA;AACA;;;;;;AAMA;;;;AAIA;AACA;;;;;;AAMA;;;AAGA;AACA;;;;;;;;;;;;;;;;;;AAkBA;;;;AAIA;;;;AAIA;AACA;;;AAGA;AACA;;;AAGA;AACA;;;;AAIA;AACA;;;AAGA;;;;;AAKA;;;;;AAKA;AACA;;AAEA;;AAEA;AACA;;;AAGA;;;AAGA;AACA;;AAEA;;;AAGA;;;;AAIA;;;AAGA;;;AAGA;;;;AAIA;;;ACvNA;ACJA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;AAQA;;;;;AAKA;;;;;AAKA;AACA;;;;AAIA;AACA;;;;AAIA;AACA;;;;;AAKA;AACA;;;;;AAKA;AACA;;;;AAIA;;AAEA;AACA;AACA;;;;;;;;;;;AAWA;;;;;;;;AAQA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;;AAMA;AACA;;;;AAIA;AACA;;;AAGA;AACA;;;;;;AAMA;AACA;;ACnHA;ACAA;;AAEA;AACA;AACA;AACA;;;;;;;;;;;;AAYA;;;;;;;;;;;;;;;AAeA;;AAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA;AACA;;;;;;;;;;;;;;;;;;;;AAoBA;AACA;;;;;;AAMA;;;;AAIA;;ACjGA;ACDA;AACA;;;;;;;;AAQA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;AAMA;AACA;;;;AAIA;AACA;;;;AAIA;;;;;;;AAOA;AACA;AACA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;AAiBA;;AAEA;AACA;;;;;;;;;;;;;AAaA;;;AAGA;;;AAGA;;AAEA;;;;ACvFA;ACNA;;;;;;ACOA;ACJA;;;;AAIA;AACA;;;;;AAKA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA;AACA;AACA;AACA;AACA;;;AClDA;;;;;;;ACAA;;;;AAIA;;;;;AAMA;;;;;;;AAOA;;;;AAIA;;;;;AAUA;AAeA;;;;AAIA;AACA;;AAEA;AACA;;;;;;;;;;;;AAYA;AACA;AACA;AACA;AACA;;;;;;;AAOA;AACA;AACA;;;;;;;;;;;AAWA;;;;AAIA;;;;;;;;;AASA;AACA;AACA;AACA;;;;;;;AAOA;;;;;;;;AAQA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA;;;;;AAKA;;;;;;;;AAQA;AACA;;;;;;;;;;;;;AAaA;;;;AAIA;;;;AAIA;;;;;;;AAOA;AACA;;;;AAIA;;AAEA;;;AAGA;;AAEA;;AAEA;;;;AAIA;AACA;;;AAGA;;;;AAIA;;;;AAIA;;;;;;;;AAQA;;;AAGA;;AAEA;AACA;AACA;AACA;;;;;AAKA;;;;;;;;;;;AAWA;;;AAGA;;;;;AAKA;;;AAGA;;;AAGA;;AC/QA","sources":["webpack://@jupyter/web-components/./src/accordion-item/accordion-item.styles.ts","webpack://@jupyter/web-components/./src/accordion-item/index.ts","webpack://@jupyter/web-components/./src/avatar/avatar.styles.ts","webpack://@jupyter/web-components/./src/styles/patterns/field.ts","webpack://@jupyter/web-components/./src/badge/badge.styles.ts","webpack://@jupyter/web-components/./src/badge/index.ts","webpack://@jupyter/web-components/./src/breadcrumb-item/breadcrumb-item.styles.ts","webpack://@jupyter/web-components/./src/breadcrumb-item/index.ts","webpack://@jupyter/web-components/./src/button/button.styles.ts","webpack://@jupyter/web-components/./src/button/index.ts","webpack://@jupyter/web-components/./src/checkbox/checkbox.styles.ts","webpack://@jupyter/web-components/./src/checkbox/index.ts","webpack://@jupyter/web-components/./src/select/select.styles.ts","webpack://@jupyter/web-components/./src/combobox/combobox.styles.ts","webpack://@jupyter/web-components/./src/combobox/index.ts","webpack://@jupyter/web-components/./src/data-grid/data-grid-cell.styles.ts","webpack://@jupyter/web-components/./src/data-grid/index.ts","webpack://@jupyter/web-components/./src/date-field/date-field.styles.ts","webpack://@jupyter/web-components/./src/date-field/date-field.template.ts","webpack://@jupyter/web-components/./src/date-field/index.ts","webpack://@jupyter/web-components/./src/listbox/listbox.styles.ts","webpack://@jupyter/web-components/./src/menu-item/menu-item.styles.ts","webpack://@jupyter/web-components/./src/menu-item/index.ts","webpack://@jupyter/web-components/./src/number-field/number-field.styles.ts","webpack://@jupyter/web-components/./src/number-field/index.ts","webpack://@jupyter/web-components/./src/option/option.styles.ts","webpack://@jupyter/web-components/./src/option/index.ts","webpack://@jupyter/web-components/./src/radio/radio.styles.ts","webpack://@jupyter/web-components/./src/radio/index.ts","webpack://@jupyter/web-components/./src/search/search.styles.ts","webpack://@jupyter/web-components/./src/search/index.ts","webpack://@jupyter/web-components/./src/slider/slider.styles.ts","webpack://@jupyter/web-components/./src/slider/index.ts","webpack://@jupyter/web-components/./src/switch/switch.styles.ts","webpack://@jupyter/web-components/./src/switch/index.ts","webpack://@jupyter/web-components/./src/tab/tab.styles.ts","webpack://@jupyter/web-components/./src/tab/index.ts","webpack://@jupyter/web-components/./src/tabs/tabs.styles.ts","webpack://@jupyter/web-components/./src/tabs/index.ts","webpack://@jupyter/web-components/./src/text-area/text-area.styles.ts","webpack://@jupyter/web-components/./src/text-area/index.ts","webpack://@jupyter/web-components/./src/text-field/text-field.styles.ts","webpack://@jupyter/web-components/./src/text-field/index.ts","webpack://@jupyter/web-components/./src/toolbar/toolbar.styles.ts","webpack://@jupyter/web-components/./src/toolbar/index.ts","webpack://@jupyter/web-components/./src/tree-item/tree-item.styles.ts","webpack://@jupyter/web-components/./src/tree-item/index.ts"],"sourcesContent":["// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillFocus, bodyFont, controlCornerRadius, density, designUnit, focusStrokeWidth, neutralForegroundRest, neutralStrokeDividerRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/size';\n/**\n * Styles for AccordionItem\n * @public\n */\nexport const accordionItemStyles = (context, definition) => css `\n ${display('flex')} :host {\n box-sizing: border-box;\n font-family: ${bodyFont};\n flex-direction: column;\n font-size: ${typeRampMinus1FontSize};\n line-height: ${typeRampMinus1LineHeight};\n border-bottom: calc(${strokeWidth} * 1px) solid\n ${neutralStrokeDividerRest};\n }\n\n .region {\n display: none;\n padding: calc((6 + (${designUnit} * 2 * ${density})) * 1px);\n }\n\n div.heading {\n display: grid;\n position: relative;\n grid-template-columns: calc(${heightNumber} * 1px) auto 1fr auto;\n color: ${neutralForegroundRest};\n }\n\n .button {\n appearance: none;\n border: none;\n background: none;\n grid-column: 3;\n outline: none;\n padding: 0 calc((6 + (${designUnit} * 2 * ${density})) * 1px);\n text-align: left;\n height: calc(${heightNumber} * 1px);\n color: currentcolor;\n cursor: pointer;\n font-family: inherit;\n }\n\n .button:hover {\n color: currentcolor;\n }\n\n .button:active {\n color: currentcolor;\n }\n\n .button::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n cursor: pointer;\n }\n\n /* prettier-ignore */\n .button:${focusVisible}::before {\n outline: none;\n border: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n\n :host([expanded]) .region {\n display: block;\n }\n\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-column: 1;\n grid-row: 1;\n pointer-events: none;\n position: relative;\n }\n\n slot[name='expanded-icon'],\n slot[name='collapsed-icon'] {\n fill: currentcolor;\n }\n\n slot[name='collapsed-icon'] {\n display: flex;\n }\n\n :host([expanded]) slot[name='collapsed-icon'] {\n display: none;\n }\n\n slot[name='expanded-icon'] {\n display: none;\n }\n\n :host([expanded]) slot[name='expanded-icon'] {\n display: flex;\n }\n\n .start {\n display: flex;\n align-items: center;\n padding-inline-start: calc(${designUnit} * 1px);\n justify-content: center;\n grid-column: 2;\n position: relative;\n }\n\n .end {\n display: flex;\n align-items: center;\n justify-content: center;\n grid-column: 4;\n position: relative;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n /* prettier-ignore */\n .button:${focusVisible}::before {\n border-color: ${SystemColors.Highlight};\n }\n :host slot[name='collapsed-icon'],\n :host([expanded]) slot[name='expanded-icon'] {\n fill: ${SystemColors.ButtonText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { AccordionItem, accordionItemTemplate as template } from '@microsoft/fast-foundation';\nimport { accordionItemStyles as styles } from './accordion-item.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#AccordionItem} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#accordionItemTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpAccordionItem = AccordionItem.compose({\n baseName: 'accordion-item',\n template,\n styles,\n collapsedIcon: /* html */ `\n \n \n \n `,\n expandedIcon: /* html */ `\n \n \n \n `\n});\n/**\n * Base class for Accordion item\n * @public\n */\nexport { AccordionItem };\nexport { styles as accordionItemStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { Badge, display } from '@microsoft/fast-foundation';\nimport { accentFillRest, baseHeightMultiplier, controlCornerRadius, density, designUnit, DirectionalStyleSheetBehavior, foregroundOnAccentRest, neutralForegroundRest, typeRampBaseFontSize } from '../design-tokens';\nconst rtl = (context, definition) => css `\n ::slotted(${context.tagFor(Badge)}) {\n left: 0;\n }\n`;\nconst ltr = (context, definition) => css `\n ::slotted(${context.tagFor(Badge)}) {\n right: 0;\n }\n`;\n/**\n * Styles for Avatar\n * @public\n */\nexport const avatarStyles = (context, definition) => css `\n ${display('flex')} :host {\n position: relative;\n height: var(--avatar-size, var(--avatar-size-default));\n width: var(--avatar-size, var(--avatar-size-default));\n --avatar-size-default: calc(\n (\n (${baseHeightMultiplier} + ${density}) * ${designUnit} +\n ((${designUnit} * 8) - 40)\n ) * 1px\n );\n --avatar-text-size: ${typeRampBaseFontSize};\n --avatar-text-ratio: ${designUnit};\n }\n\n .link {\n text-decoration: none;\n color: ${neutralForegroundRest};\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n min-width: 100%;\n }\n\n .square {\n border-radius: calc(${controlCornerRadius} * 1px);\n min-width: 100%;\n overflow: hidden;\n }\n\n .circle {\n border-radius: 100%;\n min-width: 100%;\n overflow: hidden;\n }\n\n .backplate {\n position: relative;\n display: flex;\n background-color: ${accentFillRest};\n }\n\n .media,\n ::slotted(img) {\n max-width: 100%;\n position: absolute;\n display: block;\n }\n\n .content {\n font-size: calc(\n (\n var(--avatar-text-size) +\n var(--avatar-size, var(--avatar-size-default))\n ) / var(--avatar-text-ratio)\n );\n color: ${foregroundOnAccentRest};\n line-height: var(--avatar-size, var(--avatar-size-default));\n display: block;\n min-height: var(--avatar-size, var(--avatar-size-default));\n }\n\n ::slotted(${context.tagFor(Badge)}) {\n position: absolute;\n display: block;\n }\n `.withBehaviors(new DirectionalStyleSheetBehavior(ltr(context, definition), rtl(context, definition)));\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { accentFillFocus, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillHover, neutralFillInputHover, neutralFillInputRest, neutralFillRest, neutralFillStrongActive, neutralFillStrongHover, neutralFillStrongRest, neutralForegroundRest, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '@microsoft/fast-components';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { heightNumber } from '../size';\nexport const BaseFieldStyles = css `\n ${display('inline-block')} :host {\n font-family: ${bodyFont};\n outline: none;\n user-select: none;\n }\n\n .root {\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: row;\n color: ${neutralForegroundRest};\n background: ${neutralFillInputRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid ${neutralFillStrongRest};\n height: calc(${heightNumber} * 1px);\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n border: 0;\n color: inherit;\n height: calc(100% - 4px);\n width: 100%;\n margin-top: auto;\n margin-bottom: auto;\n border: none;\n padding: 0 calc(${designUnit} * 2px + 1px);\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n }\n\n .control:hover,\n .control:${focusVisible},\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .label {\n display: block;\n color: ${neutralForegroundRest};\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n margin-bottom: 4px;\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .start,\n .end {\n margin: auto;\n fill: currentcolor;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n }\n\n .start {\n margin-inline-start: 11px;\n }\n\n .end {\n margin-inline-end: 11px;\n }\n\n :host(:hover:not([disabled])) .root {\n background: ${neutralFillInputHover};\n border-color: ${neutralFillStrongHover};\n }\n\n :host(:active:not([disabled])) .root {\n background: ${neutralFillInputHover};\n border-color: ${neutralFillStrongActive};\n }\n\n :host(:focus-within:not([disabled])) .root {\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus};\n }\n\n :host([appearance='filled']) .root {\n background: ${neutralFillRest};\n }\n\n :host([appearance='filled']:hover:not([disabled])) .root {\n background: ${neutralFillHover};\n }\n\n :host([disabled]) .label,\n :host([readonly]) .label,\n :host([readonly]) .control,\n :host([disabled]) .control {\n cursor: ${disabledCursor};\n }\n\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]) .control {\n border-color: ${neutralStrokeRest};\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n .root,\n :host([appearance='filled']) .root {\n forced-color-adjust: none;\n background: ${SystemColors.Field};\n border-color: ${SystemColors.FieldText};\n }\n :host(:hover:not([disabled])) .root,\n :host([appearance='filled']:hover:not([disabled])) .root,\n :host([appearance='filled']:hover) .root {\n background: ${SystemColors.Field};\n border-color: ${SystemColors.Highlight};\n }\n .start,\n .end {\n fill: currentcolor;\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host([disabled]) .root,\n :host([appearance='filled']:hover[disabled]) .root {\n border-color: ${SystemColors.GrayText};\n background: ${SystemColors.Field};\n }\n :host(:focus-within:enabled) .root {\n border-color: ${SystemColors.Highlight};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${SystemColors.Highlight};\n }\n input::placeholder {\n color: ${SystemColors.GrayText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { bodyFont, controlCornerRadius, designUnit, neutralFillRest, neutralForegroundRest, strokeWidth, typeRampMinus1FontSize, typeRampMinus1LineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Badge\n * @public\n */\nexport const badgeStyles = (context, definition) => css `\n ${display('inline-block')} :host {\n box-sizing: border-box;\n font-family: ${bodyFont};\n font-size: ${typeRampMinus1FontSize};\n line-height: ${typeRampMinus1LineHeight};\n }\n\n .control {\n border-radius: calc(${controlCornerRadius} * 1px);\n padding: calc(((${designUnit} * 0.5) - ${strokeWidth}) * 1px)\n calc((${designUnit} - ${strokeWidth}) * 1px);\n color: ${neutralForegroundRest};\n font-weight: 600;\n border: calc(${strokeWidth} * 1px) solid transparent;\n background-color: ${neutralFillRest};\n }\n\n .control[style] {\n font-weight: 400;\n }\n\n :host([circular]) .control {\n border-radius: 100px;\n padding: 0 calc(${designUnit} * 1px);\n /* Need to work with Brian on width and height here */\n height: calc((${heightNumber} - (${designUnit} * 3)) * 1px);\n min-width: calc((${heightNumber} - (${designUnit} * 3)) * 1px);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n }\n`;\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Badge, badgeTemplate as template } from '@microsoft/fast-foundation';\nimport { badgeStyles as styles } from './badge.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Badge} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#badgeTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpBadge = Badge.compose({\n baseName: 'badge',\n template,\n styles\n});\n/**\n * Base class for Badge\n * @public\n */\nexport { Badge };\nexport { styles as badgeStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentForegroundActive, accentForegroundFocus, accentForegroundHover, accentForegroundRest, bodyFont, focusStrokeWidth, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Breadcrumb item\n * @public\n */\nexport const breadcrumbItemStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n background: transparent;\n box-sizing: border-box;\n font-family: ${bodyFont};\n font-size: ${typeRampBaseFontSize};\n fill: currentColor;\n line-height: ${typeRampBaseLineHeight};\n min-width: calc(${heightNumber} * 1px);\n outline: none;\n color: ${neutralForegroundRest}\n }\n\n .listitem {\n display: flex;\n align-items: center;\n width: max-content;\n }\n\n .separator {\n margin: 0 6px;\n display: flex;\n }\n\n .control {\n align-items: center;\n box-sizing: border-box;\n color: ${accentForegroundRest};\n cursor: pointer;\n display: flex;\n fill: inherit;\n outline: none;\n text-decoration: none;\n white-space: nowrap;\n }\n\n .control:hover {\n color: ${accentForegroundHover};\n }\n\n .control:active {\n color: ${accentForegroundActive};\n }\n\n .control .content {\n position: relative;\n }\n\n .control .content::before {\n content: \"\";\n display: block;\n height: calc(${strokeWidth} * 1px);\n left: 0;\n position: absolute;\n right: 0;\n top: calc(1em + 4px);\n width: 100%;\n }\n\n .control:hover .content::before {\n background: ${accentForegroundHover};\n }\n\n .control:active .content::before {\n background: ${accentForegroundActive};\n }\n\n .control:${focusVisible} .content::before {\n background: ${accentForegroundFocus};\n height: calc(${focusStrokeWidth} * 1px);\n }\n\n .control:not([href]) {\n color: ${neutralForegroundRest};\n cursor: default;\n }\n\n .control:not([href]) .content::before {\n background: none;\n }\n\n .start,\n .end {\n display: flex;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n }\n\n .start {\n margin-inline-end: 6px;\n }\n\n .end {\n margin-inline-start: 6px;\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n .control:hover .content::before,\n .control:${focusVisible} .content::before {\n background: ${SystemColors.LinkText};\n }\n .start,\n .end {\n fill: ${SystemColors.ButtonText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { BreadcrumbItem, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation';\nimport { breadcrumbItemStyles as styles } from './breadcrumb-item.styles';\n/**\n * A function that returns a BreadcrumbItem registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#breadcrumbItemTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpBreadcrumbItem = BreadcrumbItem.compose({\n baseName: 'breadcrumb-item',\n template,\n styles,\n separator: '/',\n shadowOptions: {\n delegatesFocus: true\n }\n});\n/**\n * Base class for BreadcrumbItem\n * @public\n */\nexport { BreadcrumbItem };\nexport { styles as breadcrumbItemStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { neutralFillStrongActive } from '@microsoft/fast-components';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, PropertyStyleSheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, bodyFont, controlCornerRadius, density, designUnit, disabledOpacity, errorFillActive, errorFillFocus, errorFillHover, errorFillRest, errorForegroundActive, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStrongFocus, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles';\n/**\n * Behavior that will conditionally apply a stylesheet based on the elements\n * appearance property\n *\n * @param value - The value of the appearance property\n * @param styles - The styles to be applied when condition matches\n *\n * @internal\n */\nfunction appearanceBehavior(value, styles) {\n return new PropertyStyleSheetBehavior('appearance', value, styles);\n}\n// TODO do we really want to use outline for focus => this call for a minimal style for toolbar probably\n// outline force to use a margin so that the outline is not hidden by other elements.\n/**\n * @internal\n */\nconst BaseButtonStyles = css `\n ${display('inline-flex')} :host {\n font-family: ${bodyFont};\n outline: none;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n height: calc(${heightNumber} * 1px);\n min-width: calc(${heightNumber} * 1px);\n background-color: ${neutralFillRest};\n color: ${neutralForegroundRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n fill: currentcolor;\n cursor: pointer;\n margin: calc((${focusStrokeWidth} + 2) * 1px);\n }\n\n .control {\n background: transparent;\n height: inherit;\n flex-grow: 1;\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);\n white-space: nowrap;\n outline: none;\n text-decoration: none;\n border: calc(${strokeWidth} * 1px) solid transparent;\n color: inherit;\n border-radius: inherit;\n fill: inherit;\n cursor: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n }\n\n :host(:hover) {\n background-color: ${neutralFillHover};\n }\n\n :host(:active) {\n background-color: ${neutralFillActive};\n }\n\n :host([aria-pressed='true']) {\n box-shadow: inset 0px 0px 2px 2px ${neutralFillStrongActive};\n }\n\n :host([minimal]) {\n --density: -4;\n }\n\n :host([minimal]) .control {\n padding: 1px;\n }\n\n /* prettier-ignore */\n .control:${focusVisible} {\n outline: calc(${focusStrokeWidth} * 1px) solid ${neutralFillStrongFocus};\n outline-offset: 2px;\n -moz-outline-radius: 0px;\n }\n\n .control::-moz-focus-inner {\n border: 0;\n }\n\n .start,\n .end {\n display: flex;\n }\n\n .control.icon-only {\n padding: 0;\n line-height: 0;\n }\n\n ::slotted(svg) {\n ${\n/* Glyph size and margin-left is temporary -\n replace when adaptive typography is figured out */ ''} width: 16px;\n height: 16px;\n pointer-events: none;\n }\n\n .start {\n margin-inline-end: 11px;\n }\n\n .end {\n margin-inline-start: 11px;\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host .control {\n background-color: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.ButtonText};\n color: ${SystemColors.ButtonText};\n fill: currentColor;\n }\n\n :host(:hover) .control {\n forced-color-adjust: none;\n background-color: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n /* prettier-ignore */\n .control:${focusVisible} {\n forced-color-adjust: none;\n background-color: ${SystemColors.Highlight};\n outline-color: ${SystemColors.ButtonText};\n color: ${SystemColors.HighlightText};\n }\n\n .control:hover,\n :host([appearance='outline']) .control:hover {\n border-color: ${SystemColors.ButtonText};\n }\n\n :host([href]) .control {\n border-color: ${SystemColors.LinkText};\n color: ${SystemColors.LinkText};\n }\n\n :host([href]) .control:hover,\n :host([href]) .control:${focusVisible} {\n forced-color-adjust: none;\n background: ${SystemColors.ButtonFace};\n outline-color: ${SystemColors.LinkText};\n color: ${SystemColors.LinkText};\n fill: currentColor;\n }\n `));\n/**\n * @internal\n */\nconst AccentButtonStyles = css `\n :host([appearance='accent']) {\n background: ${accentFillRest};\n color: ${foregroundOnAccentRest};\n }\n\n :host([appearance='accent']:hover) {\n background: ${accentFillHover};\n color: ${foregroundOnAccentHover};\n }\n\n :host([appearance='accent'][aria-pressed='true']) {\n box-shadow: inset 0px 0px 2px 2px ${accentForegroundActive};\n }\n\n :host([appearance='accent']:active) .control:active {\n background: ${accentFillActive};\n color: ${foregroundOnAccentActive};\n }\n\n :host([appearance=\"accent\"]) .control:${focusVisible} {\n outline-color: ${accentFillFocus};\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='accent']) .control {\n forced-color-adjust: none;\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host([appearance='accent']) .control:hover,\n :host([appearance='accent']:active) .control:active {\n background: ${SystemColors.HighlightText};\n border-color: ${SystemColors.Highlight};\n color: ${SystemColors.Highlight};\n }\n\n :host([appearance=\"accent\"]) .control:${focusVisible} {\n outline-color: ${SystemColors.Highlight};\n }\n\n :host([appearance='accent'][href]) .control {\n background: ${SystemColors.LinkText};\n color: ${SystemColors.HighlightText};\n }\n\n :host([appearance='accent'][href]) .control:hover {\n background: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.LinkText};\n box-shadow: none;\n color: ${SystemColors.LinkText};\n fill: currentColor;\n }\n\n :host([appearance=\"accent\"][href]) .control:${focusVisible} {\n outline-color: ${SystemColors.HighlightText};\n }\n `));\n/**\n * @internal\n */\nconst ErrorButtonStyles = css `\n :host([appearance='error']) {\n background: ${errorFillRest};\n color: ${foregroundOnAccentRest};\n }\n\n :host([appearance='error']:hover) {\n background: ${errorFillHover};\n color: ${foregroundOnAccentHover};\n }\n\n :host([appearance='error'][aria-pressed='true']) {\n box-shadow: inset 0px 0px 2px 2px ${errorForegroundActive};\n }\n\n :host([appearance='error']:active) .control:active {\n background: ${errorFillActive};\n color: ${foregroundOnAccentActive};\n }\n\n :host([appearance=\"error\"]) .control:${focusVisible} {\n outline-color: ${errorFillFocus};\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='error']) .control {\n forced-color-adjust: none;\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host([appearance='error']) .control:hover,\n :host([appearance='error']:active) .control:active {\n background: ${SystemColors.HighlightText};\n border-color: ${SystemColors.Highlight};\n color: ${SystemColors.Highlight};\n }\n\n :host([appearance=\"error\"]) .control:${focusVisible} {\n outline-color: ${SystemColors.Highlight};\n }\n\n :host([appearance='error'][href]) .control {\n background: ${SystemColors.LinkText};\n color: ${SystemColors.HighlightText};\n }\n\n :host([appearance='error'][href]) .control:hover {\n background: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.LinkText};\n box-shadow: none;\n color: ${SystemColors.LinkText};\n fill: currentColor;\n }\n\n :host([appearance=\"error\"][href]) .control:${focusVisible} {\n outline-color: ${SystemColors.HighlightText};\n }\n `));\n/**\n * @internal\n */\nexport const LightweightButtonStyles = css `\n :host([appearance='lightweight']) {\n background: transparent;\n color: ${accentForegroundRest};\n }\n\n :host([appearance='lightweight']) .control {\n padding: 0;\n height: initial;\n border: none;\n box-shadow: none;\n border-radius: 0;\n }\n\n :host([appearance='lightweight']:hover) {\n background: transparent;\n color: ${accentForegroundHover};\n }\n\n :host([appearance='lightweight']:active) {\n background: transparent;\n color: ${accentForegroundActive};\n }\n\n :host([appearance='lightweight']) .content {\n position: relative;\n }\n\n :host([appearance='lightweight']) .content::before {\n content: '';\n display: block;\n height: calc(${strokeWidth} * 1px);\n position: absolute;\n top: calc(1em + 4px);\n width: 100%;\n }\n\n :host([appearance='lightweight']:hover) .content::before {\n background: ${accentForegroundHover};\n }\n\n :host([appearance='lightweight']:active) .content::before {\n background: ${accentForegroundActive};\n }\n\n :host([appearance=\"lightweight\"]) .control:${focusVisible} {\n outline-color: transparent;\n }\n\n :host([appearance=\"lightweight\"]) .control:${focusVisible} .content::before {\n background: ${neutralForegroundRest};\n height: calc(${focusStrokeWidth} * 1px);\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance=\"lightweight\"]) .control:hover,\n :host([appearance=\"lightweight\"]) .control:${focusVisible} {\n forced-color-adjust: none;\n background: ${SystemColors.ButtonFace};\n color: ${SystemColors.Highlight};\n }\n :host([appearance=\"lightweight\"]) .control:hover .content::before,\n :host([appearance=\"lightweight\"]) .control:${focusVisible} .content::before {\n background: ${SystemColors.Highlight};\n }\n\n :host([appearance=\"lightweight\"][href]) .control:hover,\n :host([appearance=\"lightweight\"][href]) .control:${focusVisible} {\n background: ${SystemColors.ButtonFace};\n box-shadow: none;\n color: ${SystemColors.LinkText};\n }\n\n :host([appearance=\"lightweight\"][href]) .control:hover .content::before,\n :host([appearance=\"lightweight\"][href]) .control:${focusVisible} .content::before {\n background: ${SystemColors.LinkText};\n }\n `));\n/**\n * @internal\n */\nconst OutlineButtonStyles = css `\n :host([appearance='outline']) {\n background: transparent;\n border-color: ${accentFillRest};\n }\n\n :host([appearance='outline']:hover) {\n border-color: ${accentFillHover};\n }\n\n :host([appearance='outline']:active) {\n border-color: ${accentFillActive};\n }\n\n :host([appearance='outline']) .control {\n border-color: inherit;\n }\n\n :host([appearance=\"outline\"]) .control:${focusVisible} {\n outline-color: ${accentFillFocus};\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='outline']) .control {\n border-color: ${SystemColors.ButtonText};\n }\n :host([appearance=\"outline\"]) .control:${focusVisible} {\n forced-color-adjust: none;\n background-color: ${SystemColors.Highlight};\n outline-color: ${SystemColors.ButtonText};\n color: ${SystemColors.HighlightText};\n fill: currentColor;\n }\n :host([appearance='outline'][href]) .control {\n background: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.LinkText};\n color: ${SystemColors.LinkText};\n fill: currentColor;\n }\n :host([appearance=\"outline\"][href]) .control:hover,\n :host([appearance=\"outline\"][href]) .control:${focusVisible} {\n forced-color-adjust: none;\n outline-color: ${SystemColors.LinkText};\n }\n `));\n/**\n * @internal\n */\nconst StealthButtonStyles = css `\n :host([appearance='stealth']) {\n background: transparent;\n }\n\n :host([appearance='stealth']:hover) {\n background: ${neutralFillStealthHover};\n }\n\n :host([appearance='stealth']:active) {\n background: ${neutralFillStealthActive};\n }\n\n :host([appearance='stealth']) .control:${focusVisible} {\n outline-color: ${accentFillFocus};\n }\n`.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='stealth']),\n :host([appearance='stealth']) .control {\n forced-color-adjust: none;\n background: ${SystemColors.ButtonFace};\n border-color: transparent;\n color: ${SystemColors.ButtonText};\n fill: currentColor;\n }\n\n :host([appearance='stealth']:hover) .control {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n fill: currentColor;\n }\n\n :host([appearance=\"stealth\"]:${focusVisible}) .control {\n outline-color: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n fill: currentColor;\n }\n\n :host([appearance='stealth'][href]) .control {\n color: ${SystemColors.LinkText};\n }\n\n :host([appearance=\"stealth\"][href]:hover) .control,\n :host([appearance=\"stealth\"][href]:${focusVisible}) .control {\n background: ${SystemColors.LinkText};\n border-color: ${SystemColors.LinkText};\n color: ${SystemColors.HighlightText};\n fill: currentColor;\n }\n\n :host([appearance=\"stealth\"][href]:${focusVisible}) .control {\n forced-color-adjust: none;\n box-shadow: 0 0 0 1px ${SystemColors.LinkText};\n }\n `));\n/**\n * Styles for Button\n * @public\n */\nexport const buttonStyles = (context, definition) => css `\n :host([disabled]),\n :host([disabled]:hover),\n :host([disabled]:active) {\n opacity: ${disabledOpacity};\n background-color: ${neutralFillRest};\n cursor: ${disabledCursor};\n }\n\n ${BaseButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([disabled]),\n :host([disabled]) .control,\n :host([disabled]:hover),\n :host([disabled]:active) {\n forced-color-adjust: none;\n background-color: ${SystemColors.ButtonFace};\n outline-color: ${SystemColors.GrayText};\n color: ${SystemColors.GrayText};\n cursor: ${disabledCursor};\n opacity: 1;\n }\n `), appearanceBehavior('accent', css `\n :host([appearance='accent'][disabled]),\n :host([appearance='accent'][disabled]:hover),\n :host([appearance='accent'][disabled]:active) {\n background: ${accentFillRest};\n }\n\n ${AccentButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='accent'][disabled]) .control,\n :host([appearance='accent'][disabled]) .control:hover {\n background: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.GrayText};\n color: ${SystemColors.GrayText};\n }\n `))), appearanceBehavior('error', css `\n :host([appearance='error'][disabled]),\n :host([appearance='error'][disabled]:hover),\n :host([appearance='error'][disabled]:active) {\n background: ${errorFillRest};\n }\n\n ${ErrorButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='error'][disabled]) .control,\n :host([appearance='error'][disabled]) .control:hover {\n background: ${SystemColors.ButtonFace};\n border-color: ${SystemColors.GrayText};\n color: ${SystemColors.GrayText};\n }\n `))), appearanceBehavior('lightweight', css `\n :host([appearance='lightweight'][disabled]:hover),\n :host([appearance='lightweight'][disabled]:active) {\n background-color: transparent;\n color: ${accentForegroundRest};\n }\n\n :host([appearance='lightweight'][disabled]) .content::before,\n :host([appearance='lightweight'][disabled]:hover) .content::before,\n :host([appearance='lightweight'][disabled]:active) .content::before {\n background: transparent;\n }\n\n ${LightweightButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='lightweight'].disabled) .control {\n forced-color-adjust: none;\n color: ${SystemColors.GrayText};\n }\n\n :host([appearance='lightweight'].disabled)\n .control:hover\n .content::before {\n background: none;\n }\n `))), appearanceBehavior('outline', css `\n :host([appearance='outline'][disabled]),\n :host([appearance='outline'][disabled]:hover),\n :host([appearance='outline'][disabled]:active) {\n background: transparent;\n border-color: ${accentFillRest};\n }\n\n ${OutlineButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='outline'][disabled]) .control {\n border-color: ${SystemColors.GrayText};\n }\n `))), appearanceBehavior('stealth', css `\n ${StealthButtonStyles}\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([appearance='stealth'][disabled]) {\n background: ${SystemColors.ButtonFace};\n }\n\n :host([appearance='stealth'][disabled]) .control {\n background: ${SystemColors.ButtonFace};\n border-color: transparent;\n color: ${SystemColors.GrayText};\n }\n `))));\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { __decorate } from \"tslib\";\nimport { attr } from '@microsoft/fast-element';\nimport { Button as FoundationButton, buttonTemplate as template } from '@microsoft/fast-foundation';\nimport { buttonStyles } from './button.styles';\n/**\n * @internal\n */\nexport class Button extends FoundationButton {\n connectedCallback() {\n super.connectedCallback();\n if (!this.appearance) {\n this.appearance = 'neutral';\n }\n }\n /**\n * Applies 'icon-only' class when there is only an SVG in the default slot\n *\n * @public\n * @remarks\n */\n defaultSlottedContentChanged(oldValue, newValue) {\n const slottedElements = this.defaultSlottedContent.filter(x => x.nodeType === Node.ELEMENT_NODE);\n if (slottedElements.length === 1 &&\n (slottedElements[0] instanceof SVGElement ||\n slottedElements[0].classList.contains('fa') ||\n slottedElements[0].classList.contains('fas'))) {\n this.control.classList.add('icon-only');\n }\n else {\n this.control.classList.remove('icon-only');\n }\n }\n}\n__decorate([\n attr\n], Button.prototype, \"appearance\", void 0);\n__decorate([\n attr({ attribute: 'minimal', mode: 'boolean' })\n], Button.prototype, \"minimal\", void 0);\n/**\n * The button component registration.\n *\n * @public\n * @remarks\n * Generated HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpButton = Button.compose({\n baseName: 'button',\n baseClass: FoundationButton,\n template,\n styles: buttonStyles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Checkbox\n * @public\n */\nexport const checkboxStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n align-items: center;\n outline: none;\n margin: calc(${designUnit} * 1px) 0;\n /* Chromium likes to select label text or the default slot when the checkbox is\n clicked. Maybe there is a better solution here? */\n user-select: none;\n }\n\n .control {\n position: relative;\n width: calc((${heightNumber} / 2 + ${designUnit}) * 1px);\n height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);\n box-sizing: border-box;\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};\n background: ${neutralFillInputRest};\n outline: none;\n cursor: pointer;\n }\n\n .label {\n font-family: ${bodyFont};\n color: ${neutralForegroundRest};\n /* Need to discuss with Brian how HorizontalSpacingNumber can work.\n https://github.com/microsoft/fast/issues/2766 */\n padding-inline-start: calc(${designUnit} * 2px + 2px);\n margin-inline-end: calc(${designUnit} * 2px + 2px);\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .checked-indicator {\n width: 100%;\n height: 100%;\n display: block;\n fill: ${foregroundOnAccentRest};\n opacity: 0;\n pointer-events: none;\n }\n\n .indeterminate-indicator {\n border-radius: calc(${controlCornerRadius} * 1px);\n background: ${foregroundOnAccentRest};\n position: absolute;\n top: 50%;\n left: 50%;\n width: 50%;\n height: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n }\n\n :host(:not([disabled])) .control:hover {\n background: ${neutralFillInputHover};\n border-color: ${neutralStrokeHover};\n }\n\n :host(:not([disabled])) .control:active {\n background: ${neutralFillInputActive};\n border-color: ${neutralStrokeActive};\n }\n\n :host(:${focusVisible}) .control {\n outline: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};\n outline-offset: 2px;\n }\n\n :host([aria-checked='true']) .control {\n background: ${accentFillRest};\n border: calc(${strokeWidth} * 1px) solid ${accentFillRest};\n }\n\n :host([aria-checked='true']:not([disabled])) .control:hover {\n background: ${accentFillHover};\n border: calc(${strokeWidth} * 1px) solid ${accentFillHover};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:hover\n .checked-indicator {\n fill: ${foregroundOnAccentHover};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:hover\n .indeterminate-indicator {\n background: ${foregroundOnAccentHover};\n }\n\n :host([aria-checked='true']:not([disabled])) .control:active {\n background: ${accentFillActive};\n border: calc(${strokeWidth} * 1px) solid ${accentFillActive};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:active\n .checked-indicator {\n fill: ${foregroundOnAccentActive};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:active\n .indeterminate-indicator {\n background: ${foregroundOnAccentActive};\n }\n\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .control {\n outline: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};\n outline-offset: 2px;\n }\n\n :host([disabled]) .label,\n :host([readonly]) .label,\n :host([readonly]) .control,\n :host([disabled]) .control {\n cursor: ${disabledCursor};\n }\n\n :host([aria-checked='true']:not(.indeterminate)) .checked-indicator,\n :host(.indeterminate) .indeterminate-indicator {\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n .control {\n forced-color-adjust: none;\n border-color: ${SystemColors.FieldText};\n background: ${SystemColors.Field};\n }\n .checked-indicator {\n fill: ${SystemColors.FieldText};\n }\n .indeterminate-indicator {\n background: ${SystemColors.FieldText};\n }\n :host(:not([disabled])) .control:hover,\n .control:active {\n border-color: ${SystemColors.Highlight};\n background: ${SystemColors.Field};\n }\n :host(:${focusVisible}) .control {\n outline: calc(${focusStrokeWidth} * 1px) solid ${SystemColors.FieldText};\n outline-offset: 2px;\n }\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .control {\n outline: calc(${focusStrokeWidth} * 1px) solid ${SystemColors.FieldText};\n outline-offset: 2px;\n }\n :host([aria-checked='true']) .control {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']:not([disabled])) .control:hover,\n .control:active {\n border-color: ${SystemColors.Highlight};\n background: ${SystemColors.HighlightText};\n }\n :host([aria-checked='true']) .checked-indicator {\n fill: ${SystemColors.HighlightText};\n }\n :host([aria-checked='true']:not([disabled]))\n .control:hover\n .checked-indicator {\n fill: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']) .indeterminate-indicator {\n background: ${SystemColors.HighlightText};\n }\n :host([aria-checked='true']) .control:hover .indeterminate-indicator {\n background: ${SystemColors.Highlight};\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host([disabled]) .control {\n forced-color-adjust: none;\n border-color: ${SystemColors.GrayText};\n background: ${SystemColors.Field};\n }\n :host([disabled]) .indeterminate-indicator,\n :host([aria-checked='true'][disabled])\n .control:hover\n .indeterminate-indicator {\n forced-color-adjust: none;\n background: ${SystemColors.GrayText};\n }\n :host([disabled]) .checked-indicator,\n :host([aria-checked='true'][disabled]) .control:hover .checked-indicator {\n forced-color-adjust: none;\n fill: ${SystemColors.GrayText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Checkbox, checkboxTemplate as template } from '@microsoft/fast-foundation';\nimport { checkboxStyles as styles } from './checkbox.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Checkbox} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#checkboxTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpCheckbox = Checkbox.compose({\n baseName: 'checkbox',\n template,\n styles,\n checkedIndicator: /* html */ `\n \n \n \n `,\n indeterminateIndicator: /* html */ `\n
\n `\n});\n/**\n * Base class for Checkbox\n * @public\n */\nexport { Checkbox };\nexport { styles as checkboxStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { accentFillActive, accentFillFocus, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralFillStealthRest, neutralFillStrongHover, neutralFillStrongRest, neutralForegroundRest, neutralLayerFloating, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '@microsoft/fast-components';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { elevation, heightNumber } from '../styles';\n/**\n * Styles for Select\n * @public\n */\nexport const selectStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n --elevation: 14;\n background: ${neutralFillInputRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid ${neutralFillStrongRest};\n box-sizing: border-box;\n color: ${neutralForegroundRest};\n font-family: ${bodyFont};\n height: calc(${heightNumber} * 1px);\n position: relative;\n user-select: none;\n outline: none;\n vertical-align: top;\n }\n\n :host(:not([autowidth])) {\n min-width: 250px;\n }\n\n .listbox {\n ${elevation}\n background: ${neutralLayerFloating};\n border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: column;\n left: 0;\n max-height: calc(var(--max-height) - (${heightNumber} * 1px));\n padding: calc(${designUnit} * 1px) 0;\n overflow-y: auto;\n position: absolute;\n z-index: 1;\n }\n\n :host(:not([autowidth])) .listbox {\n width: 100%;\n }\n\n :host([autowidth]) ::slotted([role='option']),\n :host([autowidth]) ::slotted(option) {\n padding: 0 calc(1em + ${designUnit} * 1.25px + 1px);\n }\n\n .listbox[hidden] {\n display: none;\n }\n\n .control {\n align-items: center;\n box-sizing: border-box;\n cursor: pointer;\n display: flex;\n font-size: ${typeRampBaseFontSize};\n font-family: inherit;\n line-height: ${typeRampBaseLineHeight};\n min-height: 100%;\n padding: 0 calc(${designUnit} * 2.25px);\n width: 100%;\n }\n\n :host([minimal]) {\n --density: -4;\n }\n\n :host(:not([disabled]):hover) {\n background: ${neutralFillInputHover};\n border-color: ${neutralFillStrongHover};\n }\n\n :host(:${focusVisible}) {\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus};\n }\n\n :host([disabled]) {\n cursor: ${disabledCursor};\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]) .control {\n cursor: ${disabledCursor};\n user-select: none;\n }\n\n :host([disabled]:hover) {\n background: ${neutralFillStealthRest};\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host(:not([disabled])) .control:active {\n background: ${neutralFillInputActive};\n border-color: ${accentFillActive};\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n\n :host([open][position='above']) .listbox {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :host([open][position='below']) .listbox {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n :host([open][position='above']) .listbox {\n border-bottom: 0;\n bottom: calc(${heightNumber} * 1px);\n }\n\n :host([open][position='below']) .listbox {\n border-top: 0;\n top: calc(${heightNumber} * 1px);\n }\n\n .selected-value {\n flex: 1 1 auto;\n font-family: inherit;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n .indicator {\n flex: 0 0 auto;\n margin-inline-start: 1em;\n }\n\n slot[name='listbox'] {\n display: none;\n width: 100%;\n }\n\n :host([open]) slot[name='listbox'] {\n display: flex;\n position: absolute;\n ${elevation}\n }\n\n .end {\n margin-inline-start: auto;\n }\n\n .start,\n .end,\n .indicator,\n .select-indicator,\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n fill: currentcolor;\n height: 1em;\n min-height: calc(${designUnit} * 4px);\n min-width: calc(${designUnit} * 4px);\n width: 1em;\n }\n\n ::slotted([role='option']),\n ::slotted(option) {\n flex: 0 0 auto;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host(:not([disabled]):hover),\n :host(:not([disabled]):active) {\n border-color: ${SystemColors.Highlight};\n }\n\n :host(:not([disabled]):${focusVisible}) {\n background-color: ${SystemColors.ButtonFace};\n box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px)\n ${SystemColors.Highlight};\n color: ${SystemColors.ButtonText};\n fill: currentcolor;\n forced-color-adjust: none;\n }\n\n :host(:not([disabled]):${focusVisible}) .listbox {\n background: ${SystemColors.ButtonFace};\n }\n\n :host([disabled]) {\n border-color: ${SystemColors.GrayText};\n background-color: ${SystemColors.ButtonFace};\n color: ${SystemColors.GrayText};\n fill: currentcolor;\n opacity: 1;\n forced-color-adjust: none;\n }\n\n :host([disabled]:hover) {\n background: ${SystemColors.ButtonFace};\n }\n\n :host([disabled]) .control {\n color: ${SystemColors.GrayText};\n border-color: ${SystemColors.GrayText};\n }\n\n :host([disabled]) .control .select-indicator {\n fill: ${SystemColors.GrayText};\n }\n\n :host(:${focusVisible}) ::slotted([aria-selected=\"true\"][role=\"option\"]),\n :host(:${focusVisible}) ::slotted(option[aria-selected=\"true\"]),\n :host(:${focusVisible}) ::slotted([aria-selected=\"true\"][role=\"option\"]:not([disabled])) {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.ButtonText};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${SystemColors.HighlightText};\n color: ${SystemColors.HighlightText};\n fill: currentcolor;\n }\n\n .start,\n .end,\n .indicator,\n .select-indicator,\n ::slotted(svg) {\n color: ${SystemColors.ButtonText};\n fill: currentcolor;\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, focusVisible } from '@microsoft/fast-foundation';\nimport { accentFillFocus, focusStrokeWidth, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { selectStyles } from '../select/select.styles';\n/**\n * Styles for Combobox\n * @public\n */\nexport const comboboxStyles = (context, definition) => css `\n ${selectStyles(context, definition)}\n\n :host(:empty) .listbox {\n display: none;\n }\n\n :host([disabled]) *,\n :host([disabled]) {\n cursor: ${disabledCursor};\n user-select: none;\n }\n\n :host(:focus-within:not([disabled])) {\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus};\n }\n\n .selected-value {\n -webkit-appearance: none;\n background: transparent;\n border: none;\n color: inherit;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n height: calc(100% - (${strokeWidth} * 1px));\n margin: auto 0;\n width: 100%;\n }\n\n .selected-value:hover,\n .selected-value:${focusVisible},\n .selected-value:disabled,\n .selected-value:active {\n outline: none;\n }\n`;\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { __decorate } from \"tslib\";\nimport { attr } from '@microsoft/fast-element';\nimport { Combobox as FoundationCombobox, comboboxTemplate as template } from '@microsoft/fast-foundation';\nimport { comboboxStyles as styles } from './combobox.styles';\n/**\n * Base class for Select\n * @public\n */\nexport class Combobox extends FoundationCombobox {\n /**\n * The connected callback for this FASTElement.\n *\n * @override\n *\n * @internal\n */\n connectedCallback() {\n super.connectedCallback();\n this.setAutoWidth();\n }\n /**\n * Synchronize the form-associated proxy and updates the value property of the element.\n *\n * @param prev - the previous collection of slotted option elements\n * @param next - the next collection of slotted option elements\n *\n * @internal\n */\n slottedOptionsChanged(prev, next) {\n super.slottedOptionsChanged(prev, next);\n this.setAutoWidth();\n }\n /**\n * (Un-)set the width when the autoWidth property changes.\n *\n * @param prev - the previous autoWidth value\n * @param next - the current autoWidth value\n */\n autoWidthChanged(prev, next) {\n if (next) {\n this.setAutoWidth();\n }\n else {\n this.style.removeProperty('width');\n }\n }\n /**\n * Compute the listbox width to set the one of the input.\n */\n setAutoWidth() {\n if (!this.autoWidth || !this.isConnected) {\n return;\n }\n let listWidth = this.listbox.getBoundingClientRect().width;\n // If the list has not been displayed yet trick to get its size\n if (listWidth === 0 && this.listbox.hidden) {\n Object.assign(this.listbox.style, { visibility: 'hidden' });\n this.listbox.removeAttribute('hidden');\n listWidth = this.listbox.getBoundingClientRect().width;\n this.listbox.setAttribute('hidden', '');\n this.listbox.style.removeProperty('visibility');\n }\n if (listWidth > 0) {\n Object.assign(this.style, { width: `${listWidth}px` });\n }\n }\n}\n__decorate([\n attr({ attribute: 'autowidth', mode: 'boolean' })\n], Combobox.prototype, \"autoWidth\", void 0);\n__decorate([\n attr({ attribute: 'minimal', mode: 'boolean' })\n], Combobox.prototype, \"minimal\", void 0);\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Combobox} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#comboboxTemplate}\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n */\nexport const jpCombobox = Combobox.compose({\n baseName: 'combobox',\n baseClass: FoundationCombobox,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n },\n indicator: /* html */ `\n \n \n \n `\n});\nexport { styles as comboboxStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillFocus, bodyFont, controlCornerRadius, designUnit, focusStrokeWidth, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\n/**\n * Styles for Data Grid cell\n * @public\n */\nexport const dataGridCellStyles = (context, definition) => css `\n :host {\n padding: calc(${designUnit} * 1px) calc(${designUnit} * 3px);\n color: ${neutralForegroundRest};\n box-sizing: border-box;\n font-family: ${bodyFont};\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n border: transparent calc(${strokeWidth} * 1px) solid;\n font-weight: 400;\n overflow: hidden;\n white-space: nowrap;\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n\n :host(.column-header) {\n font-weight: 600;\n }\n\n :host(:${focusVisible}) {\n outline: calc(${focusStrokeWidth} * 1px) solid ${accentFillFocus};\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host {\n forced-color-adjust: none;\n border-color: transparent;\n background: ${SystemColors.Field};\n color: ${SystemColors.FieldText};\n }\n\n :host(:${focusVisible}) {\n border-color: ${SystemColors.FieldText};\n box-shadow: 0 0 0 2px inset ${SystemColors.Field};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { DataGrid, DataGridCell, dataGridCellTemplate, DataGridRow, dataGridRowTemplate, dataGridTemplate } from '@microsoft/fast-foundation';\nimport { dataGridStyles, dataGridRowStyles } from '@microsoft/fast-components';\nimport { dataGridCellStyles } from './data-grid-cell.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#DataGridCell} registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpDataGridCell = DataGridCell.compose({\n baseName: 'data-grid-cell',\n template: dataGridCellTemplate,\n styles: dataGridCellStyles\n});\n/**\n * A function that returns a {@link @microsoft/fast-foundation#DataGridRow} registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpDataGridRow = DataGridRow.compose({\n baseName: 'data-grid-row',\n template: dataGridRowTemplate,\n styles: dataGridRowStyles\n});\n/**\n * A function that returns a {@link @microsoft/fast-foundation#DataGrid} registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpDataGrid = DataGrid.compose({\n baseName: 'data-grid',\n template: dataGridTemplate,\n styles: dataGridStyles\n});\n/**\n * Base class for DataGrid\n * @public\n */\nexport { DataGrid };\n/**\n * Base class for DataGridRow\n * @public\n */\nexport { DataGridRow };\n/**\n * Base class for DataGridCell\n * @public\n */\nexport { DataGridCell };\nexport { dataGridCellStyles, dataGridStyles, dataGridRowStyles };\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { BaseFieldStyles } from '../styles/index';\n/**\n * Styles for Date Field\n * @public\n */\nexport const dateFieldStyles = (context, definition) => css `\n ${BaseFieldStyles}\n`;\n","import { html, ref, slotted } from '@microsoft/fast-element';\nimport { endSlotTemplate, startSlotTemplate, whitespaceFilter } from '@microsoft/fast-foundation';\n/**\n * The template for the {@link @jupyter/web-components#(DateField:class)} component.\n * @public\n */\nexport const dateFieldTemplate = (context, definition) => html `\n \n`;\n","import { DateField } from './date-field';\nimport { dateFieldStyles as styles } from './date-field.styles';\nimport { dateFieldTemplate as template } from './date-field.template';\nexport * from './date-field';\nexport * from './date-field.template';\n/**\n * A function that returns a {@link @jupyter/web-components#DateField} registration for configuring the component with a DesignSystem.\n * Implements {@link @jupyter/web-components#dateFieldTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpDateField = DateField.compose({\n baseName: 'date-field',\n styles,\n template,\n shadowOptions: {\n delegatesFocus: true\n }\n});\nexport { styles as dateFieldStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, ListboxElement, ListboxOption } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, focusStrokeWidth, neutralStrokeRest, strokeWidth } from '@microsoft/fast-components';\nimport { heightNumber } from '../styles/size';\n/**\n * Styles for Listbox\n * @public\n */\nexport const listboxStyles = (context, definition) => {\n const ListboxOptionTag = context.tagFor(ListboxOption);\n const hostContext = context.name === context.tagFor(ListboxElement) ? '' : '.listbox';\n // The expression interpolations present in this block cause Prettier to generate\n // various formatting bugs.\n // prettier-ignore\n return css `\n ${!hostContext ? display('inline-flex') : ''}\n\n :host ${hostContext} {\n background: ${fillColor};\n border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n box-sizing: border-box;\n flex-direction: column;\n padding: calc(${designUnit} * 1px) 0;\n }\n\n ${!hostContext ? css `\n :host(:${focusVisible}:not([disabled])) {\n outline: none;\n }\n\n :host(:focus-within:not([disabled])) {\n border-color: ${focusStrokeOuter};\n box-shadow: 0 0 0\n calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${focusStrokeOuter} inset;\n }\n\n :host([disabled]) ::slotted(*) {\n cursor: ${disabledCursor};\n opacity: ${disabledOpacity};\n pointer-events: none;\n }\n ` : ''}\n\n ${hostContext || ':host([size])'} {\n max-height: calc(\n (var(--size) * ${heightNumber} + (${designUnit} * ${strokeWidth} * 2)) * 1px\n );\n overflow-y: auto;\n }\n\n :host([size=\"0\"]) ${hostContext} {\n max-height: none;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host(:not([multiple]):${focusVisible}) ::slotted(${ListboxOptionTag}[aria-selected=\"true\"]),\n :host([multiple]:${focusVisible}) ::slotted(${ListboxOptionTag}[aria-checked=\"true\"]) {\n border-color: ${SystemColors.ButtonText};\n box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};\n }\n\n :host(:not([multiple]):${focusVisible}) ::slotted(${ListboxOptionTag}[aria-selected=\"true\"]) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n fill: currentcolor;\n }\n\n ::slotted(${ListboxOptionTag}[aria-selected=\"true\"]:not([aria-checked=\"true\"])) {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.HighlightText};\n color: ${SystemColors.HighlightText};\n }\n `));\n};\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillRest, bodyFont, controlCornerRadius, designUnit, DirectionalStyleSheetBehavior, disabledOpacity, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentRest, neutralFillStealthRest, neutralForegroundHint, neutralForegroundRest, neutralLayer2, neutralLayer3, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Menu item\n * @public\n */\nexport const menuItemStyles = (context, definition) => css `\n ${display('grid')} :host {\n contain: layout;\n overflow: visible;\n font-family: ${bodyFont};\n outline: none;\n box-sizing: border-box;\n height: calc(${heightNumber} * 1px);\n grid-template-columns: minmax(42px, auto) 1fr minmax(42px, auto);\n grid-template-rows: auto;\n justify-items: center;\n align-items: center;\n padding: 0;\n margin: 0 calc(${designUnit} * 1px);\n white-space: nowrap;\n color: ${neutralForegroundRest};\n fill: currentcolor;\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${focusStrokeWidth} * 1px) solid transparent;\n }\n\n :host(:hover) {\n position: relative;\n z-index: 1;\n }\n\n :host(.indent-0) {\n grid-template-columns: auto 1fr minmax(42px, auto);\n }\n :host(.indent-0) .content {\n grid-column: 1;\n grid-row: 1;\n margin-inline-start: 10px;\n }\n :host(.indent-0) .expand-collapse-glyph-container {\n grid-column: 5;\n grid-row: 1;\n }\n :host(.indent-2) {\n grid-template-columns:\n minmax(42px, auto) minmax(42px, auto) 1fr minmax(42px, auto)\n minmax(42px, auto);\n }\n :host(.indent-2) .content {\n grid-column: 3;\n grid-row: 1;\n margin-inline-start: 10px;\n }\n :host(.indent-2) .expand-collapse-glyph-container {\n grid-column: 5;\n grid-row: 1;\n }\n :host(.indent-2) .start {\n grid-column: 2;\n }\n :host(.indent-2) .end {\n grid-column: 4;\n }\n\n :host(:${focusVisible}) {\n border-color: ${focusStrokeOuter};\n background: ${neutralLayer3};\n color: ${neutralForegroundRest};\n }\n\n :host(:hover) {\n background: ${neutralLayer3};\n color: ${neutralForegroundRest};\n }\n\n :host([aria-checked='true']),\n :host(:active),\n :host(.expanded) {\n background: ${neutralLayer2};\n color: ${neutralForegroundRest};\n }\n\n :host([disabled]) {\n cursor: ${disabledCursor};\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]:hover) {\n color: ${neutralForegroundRest};\n fill: currentcolor;\n background: ${neutralFillStealthRest};\n }\n\n :host([disabled]:hover) .start,\n :host([disabled]:hover) .end,\n :host([disabled]:hover)::slotted(svg) {\n fill: ${neutralForegroundRest};\n }\n\n .expand-collapse-glyph {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n fill: currentcolor;\n }\n\n .content {\n grid-column-start: 2;\n justify-self: start;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .start,\n .end {\n display: flex;\n justify-content: center;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n }\n\n :host(:hover) .start,\n :host(:hover) .end,\n :host(:hover)::slotted(svg),\n :host(:active) .start,\n :host(:active) .end,\n :host(:active)::slotted(svg) {\n fill: ${neutralForegroundRest};\n }\n\n :host(.indent-0[aria-haspopup='menu']) {\n display: grid;\n grid-template-columns: minmax(42px, auto) auto 1fr minmax(42px, auto) minmax(\n 42px,\n auto\n );\n align-items: center;\n min-height: 32px;\n }\n\n :host(.indent-1[aria-haspopup='menu']),\n :host(.indent-1[role='menuitemcheckbox']),\n :host(.indent-1[role='menuitemradio']) {\n display: grid;\n grid-template-columns: minmax(42px, auto) auto 1fr minmax(42px, auto) minmax(\n 42px,\n auto\n );\n align-items: center;\n min-height: 32px;\n }\n\n :host(.indent-2:not([aria-haspopup='menu'])) .end {\n grid-column: 5;\n }\n\n :host .input-container,\n :host .expand-collapse-glyph-container {\n display: none;\n }\n\n :host([aria-haspopup='menu']) .expand-collapse-glyph-container,\n :host([role='menuitemcheckbox']) .input-container,\n :host([role='menuitemradio']) .input-container {\n display: grid;\n margin-inline-end: 10px;\n }\n\n :host([aria-haspopup='menu']) .content,\n :host([role='menuitemcheckbox']) .content,\n :host([role='menuitemradio']) .content {\n grid-column-start: 3;\n }\n\n :host([aria-haspopup='menu'].indent-0) .content {\n grid-column-start: 1;\n }\n\n :host([aria-haspopup='menu']) .end,\n :host([role='menuitemcheckbox']) .end,\n :host([role='menuitemradio']) .end {\n grid-column-start: 4;\n }\n\n :host .expand-collapse,\n :host .checkbox,\n :host .radio {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 20px;\n height: 20px;\n box-sizing: border-box;\n outline: none;\n margin-inline-start: 10px;\n }\n\n :host .checkbox,\n :host .radio {\n border: calc(${strokeWidth} * 1px) solid ${neutralForegroundRest};\n }\n\n :host([aria-checked='true']) .checkbox,\n :host([aria-checked='true']) .radio {\n background: ${accentFillRest};\n border-color: ${accentFillRest};\n }\n\n :host .checkbox {\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n\n :host .radio {\n border-radius: 999px;\n }\n\n :host .checkbox-indicator,\n :host .radio-indicator,\n :host .expand-collapse-indicator,\n ::slotted([slot='checkbox-indicator']),\n ::slotted([slot='radio-indicator']),\n ::slotted([slot='expand-collapse-indicator']) {\n display: none;\n }\n\n ::slotted([slot='end']:not(svg)) {\n margin-inline-end: 10px;\n color: ${neutralForegroundHint};\n }\n\n :host([aria-checked='true']) .checkbox-indicator,\n :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']) {\n width: 100%;\n height: 100%;\n display: block;\n fill: ${foregroundOnAccentRest};\n pointer-events: none;\n }\n\n :host([aria-checked='true']) .radio-indicator {\n position: absolute;\n top: 4px;\n left: 4px;\n right: 4px;\n bottom: 4px;\n border-radius: 999px;\n display: block;\n background: ${foregroundOnAccentRest};\n pointer-events: none;\n }\n\n :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {\n display: block;\n pointer-events: none;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host {\n border-color: transparent;\n color: ${SystemColors.ButtonText};\n forced-color-adjust: none;\n }\n\n :host(:hover) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host(:hover) .start,\n :host(:hover) .end,\n :host(:hover)::slotted(svg),\n :host(:active) .start,\n :host(:active) .end,\n :host(:active)::slotted(svg) {\n fill: ${SystemColors.HighlightText};\n }\n\n :host(.expanded) {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host(:${focusVisible}) {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.ButtonText};\n box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset\n ${SystemColors.HighlightText};\n color: ${SystemColors.HighlightText};\n fill: currentcolor;\n }\n\n :host([disabled]),\n :host([disabled]:hover),\n :host([disabled]:hover) .start,\n :host([disabled]:hover) .end,\n :host([disabled]:hover)::slotted(svg) {\n background: ${SystemColors.Canvas};\n color: ${SystemColors.GrayText};\n fill: currentcolor;\n opacity: 1;\n }\n\n :host .expanded-toggle,\n :host .checkbox,\n :host .radio {\n border-color: ${SystemColors.ButtonText};\n background: ${SystemColors.HighlightText};\n }\n\n :host([checked='true']) .checkbox,\n :host([checked='true']) .radio {\n background: ${SystemColors.HighlightText};\n border-color: ${SystemColors.HighlightText};\n }\n\n :host(:hover) .expanded-toggle,\n :host(:hover) .checkbox,\n :host(:hover) .radio,\n :host(:${focusVisible}) .expanded-toggle,\n :host(:${focusVisible}) .checkbox,\n :host(:${focusVisible}) .radio,\n :host([checked=\"true\"]:hover) .checkbox,\n :host([checked=\"true\"]:hover) .radio,\n :host([checked=\"true\"]:${focusVisible}) .checkbox,\n :host([checked=\"true\"]:${focusVisible}) .radio {\n border-color: ${SystemColors.HighlightText};\n }\n\n :host([aria-checked='true']) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host([aria-checked='true']) .checkbox-indicator,\n :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),\n :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {\n fill: ${SystemColors.Highlight};\n }\n\n :host([aria-checked='true']) .radio-indicator {\n background: ${SystemColors.Highlight};\n }\n\n ::slotted([slot='end']:not(svg)) {\n color: ${SystemColors.ButtonText};\n }\n\n :host(:hover) ::slotted([slot=\"end\"]:not(svg)),\n :host(:${focusVisible}) ::slotted([slot=\"end\"]:not(svg)) {\n color: ${SystemColors.HighlightText};\n }\n `), new DirectionalStyleSheetBehavior(css `\n .expand-collapse-glyph {\n transform: rotate(0deg);\n }\n `, css `\n .expand-collapse-glyph {\n transform: rotate(180deg);\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { MenuItem, menuItemTemplate as template } from '@microsoft/fast-foundation';\nimport { menuItemStyles as styles } from './menu-item.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#MenuItem} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#menuItemTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpMenuItem = MenuItem.compose({\n baseName: 'menu-item',\n template,\n styles,\n checkboxIndicator: /* html */ `\n \n \n \n `,\n expandCollapseGlyph: /* html */ `\n \n \n \n `,\n radioIndicator: /* html */ `\n \n `\n});\n/**\n * Base class for MenuItem\n * @public\n */\nexport { MenuItem };\nexport { styles as menuItemStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { neutralForegroundRest } from '../design-tokens';\nimport { BaseFieldStyles } from '../styles/index';\n/**\n * Styles for Number Field\n * @public\n */\nexport const numberFieldStyles = (context, definition) => css `\n ${BaseFieldStyles}\n\n .controls {\n opacity: 0;\n }\n\n .step-up-glyph,\n .step-down-glyph {\n display: block;\n padding: 4px 10px;\n cursor: pointer;\n }\n\n .step-up-glyph:before,\n .step-down-glyph:before {\n content: '';\n display: block;\n border: solid transparent 6px;\n }\n\n .step-up-glyph:before {\n border-bottom-color: ${neutralForegroundRest};\n }\n\n .step-down-glyph:before {\n border-top-color: ${neutralForegroundRest};\n }\n\n :host(:hover:not([disabled])) .controls,\n :host(:focus-within:not([disabled])) .controls {\n opacity: 1;\n }\n`;\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { NumberField as FoundationNumberField, numberFieldTemplate as template } from '@microsoft/fast-foundation';\nimport { NumberField } from '@microsoft/fast-components';\nimport { numberFieldStyles as styles } from './number-field.styles';\n// TODO\n// we need to add error/invalid\n/**\n * A function that returns a {@link @microsoft/fast-foundation#NumberField} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#numberFieldTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpNumberField = NumberField.compose({\n baseName: 'number-field',\n baseClass: FoundationNumberField,\n styles,\n template,\n shadowOptions: {\n delegatesFocus: true\n },\n stepDownGlyph: /* html */ `\n \n `,\n stepUpGlyph: /* html */ `\n \n `\n});\nexport { NumberField } from '@microsoft/fast-components';\n/**\n * Styles for NumberField\n * @public\n */\nexport { styles as numberFieldStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentFocus, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillHover, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight } from '@microsoft/fast-components';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { heightNumber } from '../styles';\n/**\n * Styles for Option\n * @public\n */\nexport const optionStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n align-items: center;\n font-family: ${bodyFont};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${focusStrokeWidth} * 1px) solid transparent;\n box-sizing: border-box;\n color: ${neutralForegroundRest};\n cursor: pointer;\n flex: 0 0 auto;\n fill: currentcolor;\n font-size: ${typeRampBaseFontSize};\n height: calc(${heightNumber} * 1px);\n line-height: ${typeRampBaseLineHeight};\n margin: 0 calc(${designUnit} * 1px);\n outline: none;\n overflow: hidden;\n padding: 0 calc(${designUnit} * 2.25px);\n user-select: none;\n white-space: nowrap;\n }\n\n /* TODO should we use outline instead of background for focus to support multi-selection */\n :host(:${focusVisible}) {\n background: ${accentFillFocus};\n color: ${foregroundOnAccentFocus};\n }\n\n :host([aria-selected='true']) {\n background: ${accentFillRest};\n color: ${foregroundOnAccentRest};\n }\n\n :host(:hover) {\n background: ${accentFillHover};\n color: ${foregroundOnAccentHover};\n }\n\n :host(:active) {\n background: ${accentFillActive};\n color: ${foregroundOnAccentActive};\n }\n\n :host(:not([aria-selected='true']):hover),\n :host(:not([aria-selected='true']):active) {\n background: ${neutralFillHover};\n color: ${neutralForegroundRest};\n }\n\n :host([disabled]) {\n cursor: ${disabledCursor};\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]:hover) {\n background-color: inherit;\n }\n\n .content {\n grid-column-start: 2;\n justify-self: start;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .start,\n .end,\n ::slotted(svg) {\n display: flex;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n height: calc(${designUnit} * 4px);\n width: calc(${designUnit} * 4px);\n }\n\n ::slotted([slot='end']) {\n margin-inline-start: 1ch;\n }\n\n ::slotted([slot='start']) {\n margin-inline-end: 1ch;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host {\n border-color: transparent;\n forced-color-adjust: none;\n color: ${SystemColors.ButtonText};\n fill: currentcolor;\n }\n\n :host(:not([aria-selected='true']):hover),\n :host([aria-selected='true']) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n }\n\n :host([disabled]),\n :host([disabled]:not([aria-selected='true']):hover) {\n background: ${SystemColors.Canvas};\n color: ${SystemColors.GrayText};\n fill: currentcolor;\n opacity: 1;\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { ListboxOption, listboxOptionTemplate as template } from '@microsoft/fast-foundation';\nimport { optionStyles as styles } from './option.styles';\n/**\n * A function that returns a Option registration for configuring the component with a DesignSystem.\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n */\nexport const jpOption = ListboxOption.compose({\n baseName: 'option',\n template,\n styles\n});\n/**\n * Base class for Option\n * @public\n */\nexport { ListboxOption as Option };\nexport { styles as optionStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Radio\n * @public\n */\nexport const radioStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n --input-size: calc((${heightNumber} / 2) + ${designUnit});\n align-items: center;\n outline: none;\n margin: calc(${designUnit} * 1px) 0;\n /* Chromium likes to select label text or the default slot when\n the radio is clicked. Maybe there is a better solution here? */\n user-select: none;\n position: relative;\n flex-direction: row;\n transition: all 0.2s ease-in-out;\n }\n\n .control {\n position: relative;\n width: calc((${heightNumber} / 2 + ${designUnit}) * 1px);\n height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);\n box-sizing: border-box;\n border-radius: 999px;\n border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};\n background: ${neutralFillInputRest};\n outline: none;\n cursor: pointer;\n }\n\n .label {\n font-family: ${bodyFont};\n color: ${neutralForegroundRest};\n /* Need to discuss with Brian how HorizontalSpacingNumber can work.\n https://github.com/microsoft/fast/issues/2766 */\n padding-inline-start: calc(${designUnit} * 2px + 2px);\n margin-inline-end: calc(${designUnit} * 2px + 2px);\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n .control,\n .checked-indicator {\n flex-shrink: 0;\n }\n\n .checked-indicator {\n position: absolute;\n top: 5px;\n left: 5px;\n right: 5px;\n bottom: 5px;\n border-radius: 999px;\n display: inline-block;\n background: ${foregroundOnAccentRest};\n fill: ${foregroundOnAccentRest};\n opacity: 0;\n pointer-events: none;\n }\n\n :host(:not([disabled])) .control:hover {\n background: ${neutralFillInputHover};\n border-color: ${neutralStrokeHover};\n }\n\n :host(:not([disabled])) .control:active {\n background: ${neutralFillInputActive};\n border-color: ${neutralStrokeActive};\n }\n\n :host(:${focusVisible}) .control {\n outline: solid calc(${focusStrokeWidth} * 1px) ${accentFillFocus};\n }\n\n :host([aria-checked='true']) .control {\n background: ${accentFillRest};\n border: calc(${strokeWidth} * 1px) solid ${accentFillRest};\n }\n\n :host([aria-checked='true']:not([disabled])) .control:hover {\n background: ${accentFillHover};\n border: calc(${strokeWidth} * 1px) solid ${accentFillHover};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:hover\n .checked-indicator {\n background: ${foregroundOnAccentHover};\n fill: ${foregroundOnAccentHover};\n }\n\n :host([aria-checked='true']:not([disabled])) .control:active {\n background: ${accentFillActive};\n border: calc(${strokeWidth} * 1px) solid ${accentFillActive};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .control:active\n .checked-indicator {\n background: ${foregroundOnAccentActive};\n fill: ${foregroundOnAccentActive};\n }\n\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .control {\n outline-offset: 2px;\n outline: solid calc(${focusStrokeWidth} * 1px) ${accentFillFocus};\n }\n\n :host([disabled]) .label,\n :host([readonly]) .label,\n :host([readonly]) .control,\n :host([disabled]) .control {\n cursor: ${disabledCursor};\n }\n\n :host([aria-checked='true']) .checked-indicator {\n opacity: 1;\n }\n\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n .control,\n :host([aria-checked='true']:not([disabled])) .control {\n forced-color-adjust: none;\n border-color: ${SystemColors.FieldText};\n background: ${SystemColors.Field};\n }\n :host(:not([disabled])) .control:hover {\n border-color: ${SystemColors.Highlight};\n background: ${SystemColors.Field};\n }\n :host([aria-checked='true']:not([disabled])) .control:hover,\n :host([aria-checked='true']:not([disabled])) .control:active {\n border-color: ${SystemColors.Highlight};\n background: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']) .checked-indicator {\n background: ${SystemColors.Highlight};\n fill: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']:not([disabled]))\n .control:hover\n .checked-indicator,\n :host([aria-checked='true']:not([disabled]))\n .control:active\n .checked-indicator {\n background: ${SystemColors.HighlightText};\n fill: ${SystemColors.HighlightText};\n }\n :host(:${focusVisible}) .control {\n border-color: ${SystemColors.Highlight};\n outline-offset: 2px;\n outline: solid calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText};\n }\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .control {\n border-color: ${SystemColors.Highlight};\n outline: solid calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText};\n }\n :host([disabled]) {\n forced-color-adjust: none;\n opacity: 1;\n }\n :host([disabled]) .label {\n color: ${SystemColors.GrayText};\n }\n :host([disabled]) .control,\n :host([aria-checked='true'][disabled]) .control:hover,\n .control:active {\n background: ${SystemColors.Field};\n border-color: ${SystemColors.GrayText};\n }\n :host([disabled]) .checked-indicator,\n :host([aria-checked='true'][disabled]) .control:hover .checked-indicator {\n fill: ${SystemColors.GrayText};\n background: ${SystemColors.GrayText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Radio, radioTemplate as template } from '@microsoft/fast-foundation';\nimport { radioStyles as styles } from './radio.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Radio} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#radioTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpRadio = Radio.compose({\n baseName: 'radio',\n template,\n styles,\n checkedIndicator: /* html */ `\n
\n `\n});\n/**\n * Base class for Radio\n * @public\n */\nexport { Radio };\nexport { styles as radioStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { DesignToken, focusVisible } from '@microsoft/fast-foundation';\nimport { bodyFont, controlCornerRadius, density, neutralFillRecipe, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight, designUnit } from '../design-tokens';\nimport { BaseFieldStyles, heightNumber } from '../styles/index';\nconst clearButtonHover = DesignToken.create('clear-button-hover').withDefault((target) => {\n const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);\n const inputRecipe = neutralFillRecipe.getValueFor(target);\n return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).hover)\n .hover;\n});\nconst clearButtonActive = DesignToken.create('clear-button-active').withDefault((target) => {\n const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);\n const inputRecipe = neutralFillRecipe.getValueFor(target);\n return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).hover)\n .active;\n});\nexport const searchStyles = (context, definition) => css `\n ${BaseFieldStyles}\n\n .control {\n padding: 0;\n padding-inline-start: calc(${designUnit} * 2px + 1px);\n padding-inline-end: calc(\n (${designUnit} * 2px) + (${heightNumber} * 1px) + 1px\n );\n }\n\n .control::-webkit-search-cancel-button {\n -webkit-appearance: none;\n }\n\n .control:hover,\n .control:${focusVisible},\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .clear-button {\n height: calc(100% - 2px);\n opacity: 0;\n margin: 1px;\n background: transparent;\n color: ${neutralForegroundRest};\n fill: currentcolor;\n border: none;\n border-radius: calc(${controlCornerRadius} * 1px);\n min-width: calc(${heightNumber} * 1px);\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n outline: none;\n font-family: ${bodyFont};\n padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);\n }\n\n .clear-button:hover {\n background: ${neutralFillStealthHover};\n }\n\n .clear-button:active {\n background: ${neutralFillStealthActive};\n }\n\n :host([appearance='filled']) .clear-button:hover {\n background: ${clearButtonHover};\n }\n\n :host([appearance='filled']) .clear-button:active {\n background: ${clearButtonActive};\n }\n\n .input-wrapper {\n display: flex;\n position: relative;\n width: 100%;\n }\n\n .start,\n .end {\n display: flex;\n margin: 1px;\n }\n\n ::slotted([slot='end']) {\n height: 100%;\n }\n\n .end {\n margin-inline-end: 1px;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n margin-inline-end: 11px;\n margin-inline-start: 11px;\n margin-top: auto;\n margin-bottom: auto;\n }\n\n .clear-button__hidden {\n opacity: 0;\n }\n\n :host(:hover:not([disabled], [readOnly])) .clear-button,\n :host(:active:not([disabled], [readOnly])) .clear-button,\n :host(:focus-within:not([disabled], [readOnly])) .clear-button {\n opacity: 1;\n }\n\n :host(:hover:not([disabled], [readOnly])) .clear-button__hidden,\n :host(:active:not([disabled], [readOnly])) .clear-button__hidden,\n :host(:focus-within:not([disabled], [readOnly])) .clear-button__hidden {\n opacity: 0;\n }\n`;\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Search as FoundationSearch, searchTemplate as template } from '@microsoft/fast-foundation';\nimport { Search } from '@microsoft/fast-components';\nimport { searchStyles as styles } from './search.styles';\n// TODO\n// we need to add error/invalid\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Search} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#searchTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpSearch = Search.compose({\n baseName: 'search',\n baseClass: FoundationSearch,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\nexport { Search } from '@microsoft/fast-components';\n/**\n * Styles for Search\n * @public\n */\nexport { styles as searchStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillFocus, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeWidth, neutralForegroundRest, neutralStrokeHover, neutralStrokeRest } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Slider\n * @public\n */\nexport const sliderStyles = (context, definition) => css `\n :host([hidden]) {\n display: none;\n }\n\n ${display('inline-grid')} :host {\n --thumb-size: calc(${heightNumber} * 0.5 - ${designUnit});\n --thumb-translate: calc(\n var(--thumb-size) * -0.5 + var(--track-width) / 2\n );\n --track-overhang: calc((${designUnit} / 2) * -1);\n --track-width: ${designUnit};\n --jp-slider-height: calc(var(--thumb-size) * 10);\n align-items: center;\n width: 100%;\n margin: calc(${designUnit} * 1px) 0;\n user-select: none;\n box-sizing: border-box;\n border-radius: calc(${controlCornerRadius} * 1px);\n outline: none;\n cursor: pointer;\n }\n :host([orientation='horizontal']) .positioning-region {\n position: relative;\n margin: 0 8px;\n display: grid;\n grid-template-rows: calc(var(--thumb-size) * 1px) 1fr;\n }\n :host([orientation='vertical']) .positioning-region {\n position: relative;\n margin: 0 8px;\n display: grid;\n height: 100%;\n grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;\n }\n\n :host(:${focusVisible}) .thumb-cursor {\n box-shadow:\n 0 0 0 2px ${fillColor},\n 0 0 0 calc((2 + ${focusStrokeWidth}) * 1px) ${accentFillFocus};\n }\n\n .thumb-container {\n position: absolute;\n height: calc(var(--thumb-size) * 1px);\n width: calc(var(--thumb-size) * 1px);\n transition: all 0.2s ease;\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n .thumb-cursor {\n border: none;\n width: calc(var(--thumb-size) * 1px);\n height: calc(var(--thumb-size) * 1px);\n background: ${neutralForegroundRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n .thumb-cursor:hover {\n background: ${neutralForegroundRest};\n border-color: ${neutralStrokeHover};\n }\n .thumb-cursor:active {\n background: ${neutralForegroundRest};\n }\n :host([orientation='horizontal']) .thumb-container {\n transform: translateX(calc(var(--thumb-size) * 0.5px))\n translateY(calc(var(--thumb-translate) * 1px));\n }\n :host([orientation='vertical']) .thumb-container {\n transform: translateX(calc(var(--thumb-translate) * 1px))\n translateY(calc(var(--thumb-size) * 0.5px));\n }\n :host([orientation='horizontal']) {\n min-width: calc(var(--thumb-size) * 1px);\n }\n :host([orientation='horizontal']) .track {\n right: calc(var(--track-overhang) * 1px);\n left: calc(var(--track-overhang) * 1px);\n align-self: start;\n height: calc(var(--track-width) * 1px);\n }\n :host([orientation='vertical']) .track {\n top: calc(var(--track-overhang) * 1px);\n bottom: calc(var(--track-overhang) * 1px);\n width: calc(var(--track-width) * 1px);\n height: 100%;\n }\n .track {\n background: ${neutralStrokeRest};\n position: absolute;\n border-radius: calc(${controlCornerRadius} * 1px);\n }\n :host([orientation='vertical']) {\n height: calc(var(--jp-slider-height) * 1px);\n min-height: calc(var(--thumb-size) * 1px);\n min-width: calc(${designUnit} * 20px);\n }\n :host([disabled]),\n :host([readonly]) {\n cursor: ${disabledCursor};\n }\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n .thumb-cursor {\n forced-color-adjust: none;\n border-color: ${SystemColors.FieldText};\n background: ${SystemColors.FieldText};\n }\n .thumb-cursor:hover,\n .thumb-cursor:active {\n background: ${SystemColors.Highlight};\n }\n .track {\n forced-color-adjust: none;\n background: ${SystemColors.FieldText};\n }\n :host(:${focusVisible}) .thumb-cursor {\n border-color: ${SystemColors.Highlight};\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host([disabled]) .track,\n :host([disabled]) .thumb-cursor {\n forced-color-adjust: none;\n background: ${SystemColors.GrayText};\n }\n\n :host(:${focusVisible}) .thumb-cursor {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n box-shadow:\n 0 0 0 2px ${SystemColors.Field},\n 0 0 0 4px ${SystemColors.FieldText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Slider, sliderTemplate as template } from '@microsoft/fast-foundation';\nimport { sliderStyles as styles } from './slider.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Slider} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#sliderTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpSlider = Slider.compose({\n baseName: 'slider',\n template,\n styles,\n thumb: /* html */ `\n
\n `\n});\n/**\n * Base class for Slider\n * @public\n */\nexport { Slider };\nexport { styles as sliderStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillActive, accentFillFocus, accentFillHover, accentFillRest, bodyFont, controlCornerRadius, designUnit, DirectionalStyleSheetBehavior, disabledOpacity, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Switch\n * @public\n */\nexport const switchStyles = (context, definition) => css `\n :host([hidden]) {\n display: none;\n }\n\n ${display('inline-flex')} :host {\n align-items: center;\n outline: none;\n font-family: ${bodyFont};\n margin: calc(${designUnit} * 1px) 0;\n ${\n/*\n * Chromium likes to select label text or the default slot when\n * the checkbox is clicked. Maybe there is a better solution here?\n */ ''} user-select: none;\n }\n\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]) .label,\n :host([readonly]) .label,\n :host([readonly]) .switch,\n :host([disabled]) .switch {\n cursor: ${disabledCursor};\n }\n\n .switch {\n position: relative;\n outline: none;\n box-sizing: border-box;\n width: calc(${heightNumber} * 1px);\n height: calc((${heightNumber} / 2 + ${designUnit}) * 1px);\n background: ${neutralFillInputRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};\n }\n\n .switch:hover {\n background: ${neutralFillInputHover};\n border-color: ${neutralStrokeHover};\n cursor: pointer;\n }\n\n host([disabled]) .switch:hover,\n host([readonly]) .switch:hover {\n background: ${neutralFillInputHover};\n border-color: ${neutralStrokeHover};\n cursor: ${disabledCursor};\n }\n\n :host(:not([disabled])) .switch:active {\n background: ${neutralFillInputActive};\n border-color: ${neutralStrokeActive};\n }\n\n :host(:${focusVisible}) .switch {\n outline-offset: 2px;\n outline: solid calc(${focusStrokeWidth} * 1px) ${accentFillFocus};\n }\n\n .checked-indicator {\n position: absolute;\n top: 5px;\n bottom: 5px;\n background: ${neutralForegroundRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n transition: all 0.2s ease-in-out;\n }\n\n .status-message {\n color: ${neutralForegroundRest};\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n }\n\n :host([disabled]) .status-message,\n :host([readonly]) .status-message {\n cursor: ${disabledCursor};\n }\n\n .label {\n color: ${neutralForegroundRest};\n\n ${\n/* Need to discuss with Brian how HorizontalSpacingNumber can work. https://github.com/microsoft/fast/issues/2766 */ ''} margin-inline-end: calc(${designUnit} * 2px + 2px);\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n cursor: pointer;\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n ::slotted([slot='checked-message']),\n ::slotted([slot='unchecked-message']) {\n margin-inline-start: calc(${designUnit} * 2px + 2px);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n background: ${foregroundOnAccentRest};\n }\n\n :host([aria-checked='true']) .switch {\n background: ${accentFillRest};\n border-color: ${accentFillRest};\n }\n\n :host([aria-checked='true']:not([disabled])) .switch:hover {\n background: ${accentFillHover};\n border-color: ${accentFillHover};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .switch:hover\n .checked-indicator {\n background: ${foregroundOnAccentHover};\n }\n\n :host([aria-checked='true']:not([disabled])) .switch:active {\n background: ${accentFillActive};\n border-color: ${accentFillActive};\n }\n\n :host([aria-checked='true']:not([disabled]))\n .switch:active\n .checked-indicator {\n background: ${foregroundOnAccentActive};\n }\n\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .switch {\n outline: solid calc(${focusStrokeWidth} * 1px) ${accentFillFocus};\n }\n\n .unchecked-message {\n display: block;\n }\n\n .checked-message {\n display: none;\n }\n\n :host([aria-checked='true']) .unchecked-message {\n display: none;\n }\n\n :host([aria-checked='true']) .checked-message {\n display: block;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n .checked-indicator,\n :host(:not([disabled])) .switch:active .checked-indicator {\n forced-color-adjust: none;\n background: ${SystemColors.FieldText};\n }\n .switch {\n forced-color-adjust: none;\n background: ${SystemColors.Field};\n border-color: ${SystemColors.FieldText};\n }\n :host(:not([disabled])) .switch:hover {\n background: ${SystemColors.HighlightText};\n border-color: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']) .switch {\n background: ${SystemColors.Highlight};\n border-color: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']:not([disabled])) .switch:hover,\n :host(:not([disabled])) .switch:active {\n background: ${SystemColors.HighlightText};\n border-color: ${SystemColors.Highlight};\n }\n :host([aria-checked='true']) .checked-indicator {\n background: ${SystemColors.HighlightText};\n }\n :host([aria-checked='true']:not([disabled]))\n .switch:hover\n .checked-indicator {\n background: ${SystemColors.Highlight};\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host(:${focusVisible}) .switch {\n border-color: ${SystemColors.Highlight};\n outline-offset: 2px;\n outline: solid calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText};\n }\n :host([aria-checked=\"true\"]:${focusVisible}:not([disabled])) .switch {\n outline: solid calc(${focusStrokeWidth} * 1px) ${SystemColors.FieldText};\n }\n :host([disabled]) .checked-indicator {\n background: ${SystemColors.GrayText};\n }\n :host([disabled]) .switch {\n background: ${SystemColors.Field};\n border-color: ${SystemColors.GrayText};\n }\n `), new DirectionalStyleSheetBehavior(css `\n .checked-indicator {\n left: 5px;\n right: calc(((${heightNumber} / 2) + 1) * 1px);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n left: calc(((${heightNumber} / 2) + 1) * 1px);\n right: 5px;\n }\n `, css `\n .checked-indicator {\n right: 5px;\n left: calc(((${heightNumber} / 2) + 1) * 1px);\n }\n\n :host([aria-checked='true']) .checked-indicator {\n right: calc(((${heightNumber} / 2) + 1) * 1px);\n left: 5px;\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Switch, switchTemplate as template } from '@microsoft/fast-foundation';\nimport { switchStyles as styles } from './switch.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Switch} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#switchTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpSwitch = Switch.compose({\n baseName: 'switch',\n template,\n styles,\n switch: /* html */ `\n \n `\n});\n/**\n * Base class for Switch\n * @public\n */\nexport { Switch };\nexport { styles as switchStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { accentFillFocus, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthRest, neutralForegroundHint, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '@microsoft/fast-components';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { heightNumber } from '../styles';\n/**\n * Styles for Tab\n * @public\n */\nexport const tabStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n box-sizing: border-box;\n font-family: ${bodyFont};\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n height: calc(${heightNumber} * 1px);\n padding: calc(${designUnit} * 5px) calc(${designUnit} * 4px);\n color: ${neutralForegroundHint};\n fill: currentcolor;\n border-radius: 0 0 calc(${controlCornerRadius} * 1px)\n calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid transparent;\n align-items: center;\n grid-row: 2;\n justify-content: center;\n cursor: pointer;\n }\n\n :host(:hover) {\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host(:active) {\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host([disabled]) {\n cursor: ${disabledCursor};\n opacity: ${disabledOpacity};\n }\n\n :host([disabled]:hover) {\n color: ${neutralForegroundHint};\n background: ${neutralFillStealthRest};\n }\n\n :host([aria-selected='true']) {\n background: ${neutralFillRest};\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host([aria-selected='true']:hover) {\n background: ${neutralFillHover};\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host([aria-selected='true']:active) {\n background: ${neutralFillActive};\n color: ${neutralForegroundRest};\n fill: currentcolor;\n }\n\n :host(:${focusVisible}) {\n outline: none;\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus};\n }\n\n :host(:focus) {\n outline: none;\n }\n\n :host(.vertical) {\n justify-content: end;\n grid-column: 2;\n border-bottom-left-radius: 0;\n border-top-right-radius: calc(${controlCornerRadius} * 1px);\n }\n\n :host(.vertical[aria-selected='true']) {\n z-index: 2;\n }\n\n :host(.vertical:hover) {\n color: ${neutralForegroundRest};\n }\n\n :host(.vertical:active) {\n color: ${neutralForegroundRest};\n }\n\n :host(.vertical:hover[aria-selected='true']) {\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host {\n forced-color-adjust: none;\n border-color: transparent;\n color: ${SystemColors.ButtonText};\n fill: currentcolor;\n }\n :host(:hover),\n :host(.vertical:hover),\n :host([aria-selected='true']:hover) {\n background: ${SystemColors.Highlight};\n color: ${SystemColors.HighlightText};\n fill: currentcolor;\n }\n :host([aria-selected='true']) {\n background: ${SystemColors.HighlightText};\n color: ${SystemColors.Highlight};\n fill: currentcolor;\n }\n :host(:${focusVisible}) {\n border-color: ${SystemColors.ButtonText};\n box-shadow: none;\n }\n :host([disabled]),\n :host([disabled]:hover) {\n opacity: 1;\n color: ${SystemColors.GrayText};\n background: ${SystemColors.ButtonFace};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Tab, tabTemplate as template } from '@microsoft/fast-foundation';\nimport { tabStyles as styles } from './tab.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Tab} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#tabTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpTab = Tab.compose({\n baseName: 'tab',\n template,\n styles\n});\n/**\n * Base class for Tab\n * @public\n */\nexport { Tab };\nexport { styles as tabStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillRest, bodyFont, controlCornerRadius, designUnit, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Tabs\n * @public\n */\nexport const tabsStyles = (context, definition) => css `\n ${display('grid')} :host {\n box-sizing: border-box;\n font-family: ${bodyFont};\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n color: ${neutralForegroundRest};\n grid-template-columns: auto 1fr auto;\n grid-template-rows: auto 1fr;\n }\n\n .tablist {\n display: grid;\n grid-template-rows: auto auto;\n grid-template-columns: auto;\n position: relative;\n width: max-content;\n align-self: end;\n padding: calc(${designUnit} * 4px) calc(${designUnit} * 4px) 0;\n box-sizing: border-box;\n }\n\n .start,\n .end {\n align-self: center;\n }\n\n .activeIndicator {\n grid-row: 1;\n grid-column: 1;\n width: 100%;\n height: 4px;\n justify-self: center;\n background: ${accentFillRest};\n margin-top: 0;\n border-radius: calc(${controlCornerRadius} * 1px)\n calc(${controlCornerRadius} * 1px) 0 0;\n }\n\n .activeIndicatorTransition {\n transition: transform 0.01s ease-in-out;\n }\n\n .tabpanel {\n grid-row: 2;\n grid-column-start: 1;\n grid-column-end: 4;\n position: relative;\n }\n\n :host([orientation='vertical']) {\n grid-template-rows: auto 1fr auto;\n grid-template-columns: auto 1fr;\n }\n\n :host([orientation='vertical']) .tablist {\n grid-row-start: 2;\n grid-row-end: 2;\n display: grid;\n grid-template-rows: auto;\n grid-template-columns: auto 1fr;\n position: relative;\n width: max-content;\n justify-self: end;\n align-self: flex-start;\n width: 100%;\n padding: 0 calc(${designUnit} * 4px)\n calc((${heightNumber} - ${designUnit}) * 1px) 0;\n }\n\n :host([orientation='vertical']) .tabpanel {\n grid-column: 2;\n grid-row-start: 1;\n grid-row-end: 4;\n }\n\n :host([orientation='vertical']) .end {\n grid-row: 3;\n }\n\n :host([orientation='vertical']) .activeIndicator {\n grid-column: 1;\n grid-row: 1;\n width: 4px;\n height: 100%;\n margin-inline-end: 0px;\n align-self: center;\n border-radius: calc(${controlCornerRadius} * 1px) 0 0\n calc(${controlCornerRadius} * 1px);\n }\n\n :host([orientation='vertical']) .activeIndicatorTransition {\n transition: transform 0.01s ease-in-out;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n .activeIndicator,\n :host([orientation='vertical']) .activeIndicator {\n forced-color-adjust: none;\n background: ${SystemColors.Highlight};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Tabs, tabsTemplate as template } from '@microsoft/fast-foundation';\nimport { tabsStyles as styles } from './tabs.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Tabs} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#tabsTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n */\nexport const jpTabs = Tabs.compose({\n baseName: 'tabs',\n template,\n styles\n});\nexport * from '../tab';\nexport * from '../tab-panel';\n/**\n * Base class for Tabs\n * @public\n */\nexport { Tabs };\nexport { styles as tabsStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { accentFillFocus, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillHover, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralFillRest, neutralFillStrongActive, neutralFillStrongHover, neutralFillStrongRest, neutralForegroundRest, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { css } from '@microsoft/fast-element';\nimport { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { heightNumber } from '../styles/index';\n/**\n * Styles for Text Area\n * @public\n */\nexport const textAreaStyles = (context, definition) => css `\n ${display('inline-block')} :host {\n font-family: ${bodyFont};\n outline: none;\n user-select: none;\n }\n\n .control {\n box-sizing: border-box;\n position: relative;\n color: ${neutralForegroundRest};\n background: ${neutralFillInputRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n border: calc(${strokeWidth} * 1px) solid ${neutralFillStrongRest};\n height: calc(${heightNumber} * 2px);\n font: inherit;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n padding: calc(${designUnit} * 2px + 1px);\n width: 100%;\n resize: none;\n }\n\n .control:hover:enabled {\n background: ${neutralFillInputHover};\n border-color: ${neutralFillStrongHover};\n }\n\n .control:active:enabled {\n background: ${neutralFillInputActive};\n border-color: ${neutralFillStrongActive};\n }\n\n .control:hover,\n .control:${focusVisible},\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n :host(:focus-within) .control {\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus};\n }\n\n :host([appearance='filled']) .control {\n background: ${neutralFillRest};\n }\n\n :host([appearance='filled']:hover:not([disabled])) .control {\n background: ${neutralFillHover};\n }\n\n :host([resize='both']) .control {\n resize: both;\n }\n\n :host([resize='horizontal']) .control {\n resize: horizontal;\n }\n\n :host([resize='vertical']) .control {\n resize: vertical;\n }\n\n .label {\n display: block;\n color: ${neutralForegroundRest};\n cursor: pointer;\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n margin-bottom: 4px;\n }\n\n .label__hidden {\n display: none;\n visibility: hidden;\n }\n\n :host([disabled]) .label,\n :host([readonly]) .label,\n :host([readonly]) .control,\n :host([disabled]) .control {\n cursor: ${disabledCursor};\n }\n :host([disabled]) {\n opacity: ${disabledOpacity};\n }\n :host([disabled]) .control {\n border-color: ${neutralStrokeRest};\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host([disabled]) {\n opacity: 1;\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { TextArea as FoundationTextArea, textAreaTemplate as template } from '@microsoft/fast-foundation';\nimport { TextArea } from '@microsoft/fast-components';\nimport { textAreaStyles as styles } from './text-area.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#TextArea} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#textAreaTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpTextArea = TextArea.compose({\n baseName: 'text-area',\n baseClass: FoundationTextArea,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\nexport { TextArea, styles as textAreaStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { BaseFieldStyles } from '../styles/index';\n/**\n * Styles for Text Field\n * @public\n */\nexport const textFieldStyles = (context, definition) => css `\n ${BaseFieldStyles}\n\n .start,\n .end {\n display: flex;\n }\n`;\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { TextField as FoundationTextField, textFieldTemplate as template } from '@microsoft/fast-foundation';\nimport { TextField } from '@microsoft/fast-components';\nimport { textFieldStyles as styles } from './text-field.styles';\n// TODO\n// we need to add error/invalid\n/**\n * A function that returns a TextField registration for configuring the component with a DesignSystem.\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}\n */\nexport const jpTextField = TextField.compose({\n baseName: 'text-field',\n baseClass: FoundationTextField,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\nexport { TextField } from '@microsoft/fast-components';\n/**\n * Styles for TextField\n * @public\n */\nexport { styles as textFieldStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css } from '@microsoft/fast-element';\nimport { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillFocus, controlCornerRadius, fillColor, focusStrokeWidth, strokeWidth } from '../design-tokens';\n/**\n * Styles for the Toolbar\n *\n * @public\n */\nexport const toolbarStyles = (context, definition) => css `\n ${display('inline-flex')} :host {\n --toolbar-item-gap: calc(\n (var(--design-unit) + calc(var(--density) + 2)) * 1px\n );\n background-color: ${fillColor};\n border-radius: calc(${controlCornerRadius} * 1px);\n fill: currentcolor;\n padding: var(--toolbar-item-gap);\n }\n\n :host(${focusVisible}) {\n outline: calc(${strokeWidth} * 1px) solid ${accentFillFocus};\n }\n\n .positioning-region {\n align-items: flex-start;\n display: inline-flex;\n flex-flow: row wrap;\n justify-content: flex-start;\n width: 100%;\n height: 100%;\n }\n\n :host([orientation='vertical']) .positioning-region {\n flex-direction: column;\n }\n\n ::slotted(:not([slot])) {\n flex: 0 0 auto;\n margin: 0 var(--toolbar-item-gap);\n }\n\n :host([orientation='vertical']) ::slotted(:not([slot])) {\n margin: var(--toolbar-item-gap) 0;\n }\n\n .start,\n .end {\n display: flex;\n margin: auto;\n margin-inline: 0;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n }\n `.withBehaviors(forcedColorsStylesheetBehavior(css `\n :host(:${focusVisible}) {\n box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px)\n ${SystemColors.Highlight};\n color: ${SystemColors.ButtonText};\n forced-color-adjust: none;\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { Toolbar } from '@microsoft/fast-components';\nimport { Toolbar as FoundationToolbar, toolbarTemplate as template } from '@microsoft/fast-foundation';\nimport { toolbarStyles as styles } from './toolbar.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#Toolbar} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#toolbarTemplate}\n *\n * @public\n * @remarks\n *\n * Generates HTML Element: ``\n *\n */\nexport const jpToolbar = Toolbar.compose({\n baseName: 'toolbar',\n baseClass: FoundationToolbar,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\nexport { Toolbar, styles as toolbarStyles };\n","// Copyright (c) Jupyter Development Team.\n// Copyright (c) Microsoft Corporation.\n// Distributed under the terms of the Modified BSD License.\nimport { css, cssPartial } from '@microsoft/fast-element';\nimport { DesignToken, disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, TreeItem } from '@microsoft/fast-foundation';\nimport { SystemColors } from '@microsoft/fast-web-utilities';\nimport { accentFillFocus, accentForegroundRest, baseHeightMultiplier, bodyFont, controlCornerRadius, density, designUnit, DirectionalStyleSheetBehavior, disabledOpacity, focusStrokeWidth, neutralFillRecipe, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRecipe, neutralFillStealthRest, neutralForegroundRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';\nimport { heightNumber } from '../styles/index';\nconst ltr = css `\n .expand-collapse-glyph {\n transform: rotate(0deg);\n }\n :host(.nested) .expand-collapse-button {\n left: var(\n --expand-collapse-button-nested-width,\n calc(${heightNumber} * -1px)\n );\n }\n :host([selected])::after {\n left: calc(${focusStrokeWidth} * 1px);\n }\n :host([expanded]) > .positioning-region .expand-collapse-glyph {\n transform: rotate(90deg);\n }\n`;\nconst rtl = css `\n .expand-collapse-glyph {\n transform: rotate(180deg);\n }\n :host(.nested) .expand-collapse-button {\n right: var(\n --expand-collapse-button-nested-width,\n calc(${heightNumber} * -1px)\n );\n }\n :host([selected])::after {\n right: calc(${focusStrokeWidth} * 1px);\n }\n :host([expanded]) > .positioning-region .expand-collapse-glyph {\n transform: rotate(90deg);\n }\n`;\n/**\n * Tree item expand collapse button size CSS Partial\n * @public\n */\nexport const expandCollapseButtonSize = cssPartial `((${baseHeightMultiplier} / 2) * ${designUnit}) + ((${designUnit} * ${density}) / 2)`;\nconst expandCollapseHoverBehavior = DesignToken.create('tree-item-expand-collapse-hover').withDefault((target) => {\n const recipe = neutralFillStealthRecipe.getValueFor(target);\n return recipe.evaluate(target, recipe.evaluate(target).hover).hover;\n});\nconst selectedExpandCollapseHoverBehavior = DesignToken.create('tree-item-expand-collapse-selected-hover').withDefault((target) => {\n const baseRecipe = neutralFillRecipe.getValueFor(target);\n const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);\n return buttonRecipe.evaluate(target, baseRecipe.evaluate(target).rest).hover;\n});\n/**\n * Styles for Tree Item\n * @public\n */\nexport const treeItemStyles = (context, definition) => css `\n ${display('block')} :host {\n contain: content;\n position: relative;\n outline: none;\n color: ${neutralForegroundRest};\n background: ${neutralFillStealthRest};\n cursor: pointer;\n font-family: ${bodyFont};\n --expand-collapse-button-size: calc(${heightNumber} * 1px);\n --tree-item-nested-width: 0;\n }\n\n :host(:focus) > .positioning-region {\n outline: none;\n }\n\n :host(:focus) .content-region {\n outline: none;\n }\n\n :host(:${focusVisible}) .positioning-region {\n border-color: ${accentFillFocus};\n box-shadow: 0 0 0 calc((${focusStrokeWidth} - ${strokeWidth}) * 1px)\n ${accentFillFocus} inset;\n color: ${neutralForegroundRest};\n }\n\n .positioning-region {\n display: flex;\n position: relative;\n box-sizing: border-box;\n border: transparent calc(${strokeWidth} * 1px) solid;\n border-radius: calc(${controlCornerRadius} * 1px);\n height: calc((${heightNumber} + 1) * 1px);\n }\n\n .positioning-region::before {\n content: '';\n display: block;\n width: var(--tree-item-nested-width);\n flex-shrink: 0;\n }\n\n .positioning-region:hover {\n background: ${neutralFillStealthHover};\n }\n\n .positioning-region:active {\n background: ${neutralFillStealthActive};\n }\n\n .content-region {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n width: 100%;\n min-width: 0;\n height: calc(${heightNumber} * 1px);\n margin-inline-start: calc(${designUnit} * 2px + 8px);\n font-size: ${typeRampBaseFontSize};\n line-height: ${typeRampBaseLineHeight};\n font-weight: 400;\n }\n\n .items {\n display: none;\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n font-size: calc(1em + (${designUnit} + 16) * 1px);\n }\n\n .expand-collapse-button {\n background: none;\n border: none;\n outline: none;\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);\n height: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n margin-left: 6px;\n margin-right: 6px;\n }\n\n .expand-collapse-glyph {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n transition: transform 0.1s linear;\n\n pointer-events: none;\n fill: currentcolor;\n }\n\n .start,\n .end {\n display: flex;\n fill: currentcolor;\n }\n\n ::slotted(svg) {\n /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */\n width: 16px;\n height: 16px;\n }\n\n .start {\n /* TODO: horizontalSpacing https://github.com/microsoft/fast/issues/2766 */\n margin-inline-end: calc(${designUnit} * 2px + 2px);\n }\n\n .end {\n /* TODO: horizontalSpacing https://github.com/microsoft/fast/issues/2766 */\n margin-inline-start: calc(${designUnit} * 2px + 2px);\n }\n\n :host([expanded]) > .items {\n display: block;\n }\n\n :host([disabled]) .content-region {\n opacity: ${disabledOpacity};\n cursor: ${disabledCursor};\n }\n\n :host(.nested) .content-region {\n position: relative;\n margin-inline-start: var(--expand-collapse-button-size);\n }\n\n :host(.nested) .expand-collapse-button {\n position: absolute;\n }\n\n :host(.nested) .expand-collapse-button:hover {\n background: ${expandCollapseHoverBehavior};\n }\n\n :host([selected]) .positioning-region {\n background: ${neutralFillRest};\n }\n\n :host([selected]) .expand-collapse-button:hover {\n background: ${selectedExpandCollapseHoverBehavior};\n }\n\n :host([selected])::after {\n /* The background needs to be calculated based on the selected background state\n for this control. We currently have no way of changing that, so setting to\n accent-foreground-rest for the time being */\n background: ${accentForegroundRest};\n border-radius: calc(${controlCornerRadius} * 1px);\n content: '';\n display: block;\n position: absolute;\n top: calc((${heightNumber} / 4) * 1px);\n width: 3px;\n height: calc((${heightNumber} / 2) * 1px);\n }\n\n ::slotted(${context.tagFor(TreeItem)}) {\n --tree-item-nested-width: 1em;\n --expand-collapse-button-nested-width: calc(${heightNumber} * -1px);\n }\n `.withBehaviors(new DirectionalStyleSheetBehavior(ltr, rtl), forcedColorsStylesheetBehavior(css `\n :host {\n forced-color-adjust: none;\n border-color: transparent;\n background: ${SystemColors.Field};\n color: ${SystemColors.FieldText};\n }\n :host .content-region .expand-collapse-glyph {\n fill: ${SystemColors.FieldText};\n }\n :host .positioning-region:hover,\n :host([selected]) .positioning-region {\n background: ${SystemColors.Highlight};\n }\n :host .positioning-region:hover .content-region,\n :host([selected]) .positioning-region .content-region {\n color: ${SystemColors.HighlightText};\n }\n :host .positioning-region:hover .content-region .expand-collapse-glyph,\n :host .positioning-region:hover .content-region .start,\n :host .positioning-region:hover .content-region .end,\n :host([selected]) .content-region .expand-collapse-glyph,\n :host([selected]) .content-region .start,\n :host([selected]) .content-region .end {\n fill: ${SystemColors.HighlightText};\n }\n :host([selected])::after {\n background: ${SystemColors.Field};\n }\n :host(:${focusVisible}) .positioning-region {\n border-color: ${SystemColors.FieldText};\n box-shadow: 0 0 0 2px inset ${SystemColors.Field};\n color: ${SystemColors.FieldText};\n }\n :host([disabled]) .content-region,\n :host([disabled]) .positioning-region:hover .content-region {\n opacity: 1;\n color: ${SystemColors.GrayText};\n }\n :host([disabled]) .content-region .expand-collapse-glyph,\n :host([disabled]) .content-region .start,\n :host([disabled]) .content-region .end,\n :host([disabled])\n .positioning-region:hover\n .content-region\n .expand-collapse-glyph,\n :host([disabled]) .positioning-region:hover .content-region .start,\n :host([disabled]) .positioning-region:hover .content-region .end {\n fill: ${SystemColors.GrayText};\n }\n :host([disabled]) .positioning-region:hover {\n background: ${SystemColors.Field};\n }\n .expand-collapse-glyph,\n .start,\n .end {\n fill: ${SystemColors.FieldText};\n }\n :host(.nested) .expand-collapse-button:hover {\n background: ${SystemColors.Field};\n }\n :host(.nested) .expand-collapse-button:hover .expand-collapse-glyph {\n fill: ${SystemColors.FieldText};\n }\n `));\n","// Copyright (c) Jupyter Development Team.\n// Distributed under the terms of the Modified BSD License.\nimport { treeItemTemplate as template, TreeItem } from '@microsoft/fast-foundation';\nimport { treeItemStyles as styles } from './tree-item.styles';\n/**\n * A function that returns a {@link @microsoft/fast-foundation#TreeItem} registration for configuring the component with a DesignSystem.\n * Implements {@link @microsoft/fast-foundation#treeItemTemplate}\n *\n *\n * @public\n * @remarks\n * Generates HTML Element: ``\n *\n */\nexport const jpTreeItem = TreeItem.compose({\n baseName: 'tree-item',\n template,\n styles,\n expandCollapseGlyph: /* html */ `\n \n \n \n `\n});\n/**\n * Base class for TreeItem\n * @public\n */\nexport { TreeItem };\nexport { styles as treeItemStyles };\n"],"names":[],"sourceRoot":""} \ No newline at end of file diff --git a/project.json b/project.json index e800607c..f0c0a9a7 100644 --- a/project.json +++ b/project.json @@ -1 +1 @@ -{"generatedAt":1700226893792,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"monorepo":"Lerna","packageManager":{"type":"yarn","version":"3.6.0"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"7.5.3","storybookVersionSpecifier":"^7.5.3","language":"typescript","storybookPackages":{"@storybook/addon-a11y":{"version":"7.5.3"},"@storybook/addon-actions":{"version":"7.5.3"},"@storybook/addon-essentials":{"version":"7.5.3"},"@storybook/addon-links":{"version":"7.5.3"},"@storybook/addons":{"version":"7.5.3"},"@storybook/blocks":{"version":"7.5.3"},"@storybook/html":{"version":"7.5.3"},"@storybook/html-webpack5":{"version":"7.5.3"},"@storybook/theming":{"version":"7.5.3"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"7.5.3"}},"addons":{"@storybook/addon-docs":{"version":"7.5.3"},"$SNIP/node_modules/@storybook/addon-links":{"version":null},"$SNIP/node_modules/@storybook/addon-essentials":{"version":null},"$SNIP/node_modules/@storybook/addon-a11y":{"version":null}}} +{"generatedAt":1700557926455,"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":false,"hasStorybookEslint":true,"refCount":0,"monorepo":"Lerna","packageManager":{"type":"yarn","version":"3.6.0"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/html-webpack5","options":{}},"builder":"@storybook/builder-webpack5","renderer":"@storybook/html","storybookVersion":"7.5.3","storybookVersionSpecifier":"^7.5.3","language":"typescript","storybookPackages":{"@storybook/addon-a11y":{"version":"7.5.3"},"@storybook/addon-actions":{"version":"7.5.3"},"@storybook/addon-essentials":{"version":"7.5.3"},"@storybook/addon-links":{"version":"7.5.3"},"@storybook/addons":{"version":"7.5.3"},"@storybook/blocks":{"version":"7.5.3"},"@storybook/html":{"version":"7.5.3"},"@storybook/html-webpack5":{"version":"7.5.3"},"@storybook/theming":{"version":"7.5.3"},"eslint-plugin-storybook":{"version":"0.6.15"},"storybook":{"version":"7.5.3"}},"addons":{"@storybook/addon-docs":{"version":"7.5.3"},"$SNIP/node_modules/@storybook/addon-links":{"version":null},"$SNIP/node_modules/@storybook/addon-essentials":{"version":null},"$SNIP/node_modules/@storybook/addon-a11y":{"version":null}}}