/*! For license information please see splitbutton-splitbutton-stories.c38ed5f8.iframe.bundle.js.LICENSE.txt */
(globalThis.webpackChunk_spectrum_css_preview=globalThis.webpackChunk_spectrum_css_preview||[]).push([[758,948,6526],{"./deprecated/splitbutton/splitbutton.stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,__namedExportsOrder:()=>__namedExportsOrder,default:()=>splitbutton_stories});var lit=__webpack_require__("../node_modules/lit/index.js"),class_map=__webpack_require__("../node_modules/lit/directives/class-map.js"),template=__webpack_require__("../components/button/stories/template.js"),injectStylesIntoLinkTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoLinkTag.js"),injectStylesIntoLinkTag_default=__webpack_require__.n(injectStylesIntoLinkTag),insertBySelector=__webpack_require__("../node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),index_vars=__webpack_require__("../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../node_modules/@spectrum-css/splitbutton/dist/index-vars.css"),index_vars_default=__webpack_require__.n(index_vars),options={attributes:{"data-source":"processed"}};options.insert=insertBySelector_default().bind(null,"head");injectStylesIntoLinkTag_default()(index_vars_default(),options);var vars=__webpack_require__("../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../node_modules/@spectrum-css/splitbutton/dist/vars.css"),vars_default=__webpack_require__.n(vars),vars_options={attributes:{"data-source":"processed"}};vars_options.insert=insertBySelector_default().bind(null,"head");injectStylesIntoLinkTag_default()(vars_default(),vars_options);const splitbutton_stories={title:"Deprecated/Split button",description:"A split button surfaces an immediately invokable action via it's main button, as well as a list of alternative actions in its toggle-able menu overlay.",component:"SplitButton",argTypes:{size:{name:"Size",type:{name:"string",required:!0},table:{disable:!0},options:["m"],control:"select"},variant:{name:"Variant",type:{name:"string"},table:{disable:!0},options:["accent","primary","secondary"],control:"select"},position:{name:"Position",type:{name:"string",required:!0},table:{type:{summary:"string"},category:"Component"},options:["right","left"],control:"select"},iconName:{table:{disable:!0}},label:{name:"Label",type:{name:"string"},table:{type:{summary:"string"},category:"Content"},control:{type:"text"}}},args:{rootClass:"spectrum-SplitButton",size:"m",position:"right",label:"Split Button",variant:"accent",iconName:"ChevronDown100"},parameters:{actions:{handles:[]},chromatic:{disable:!0},status:{type:"deprecated"}}},Default=(({rootClass="spectrum-SplitButton",customClasses=[],customFirstButtonClasses=[],customLastButtonClasses=[],size="m",variant="cta",iconName="ChevronDown100",labelIconName,position="right",label="Split Button",...globals})=>lit.qy`
        <!-- Note: Only values that differ in express theme are included -->
        <style>
            :root, .spectrum--medium {
                --spectrum-global-dimension-size-25: 2px;
                --spectrum-global-dimension-size-40: 3px;
                --spectrum-global-dimension-size-100: 8px;
                --spectrum-global-dimension-size-125: 10px;
                --spectrum-global-dimension-size-150: 12px;
                --spectrum-global-dimension-size-175: 14px;
                --spectrum-global-dimension-size-200: 16px;
            }
            .spectrum--large {
                --spectrum-global-dimension-size-40: 4px;
                --spectrum-global-dimension-size-100: 10px;
                --spectrum-global-dimension-size-125: 13px;
                --spectrum-global-dimension-size-150: 15px;
                --spectrum-global-dimension-size-175: 18px;
                --spectrum-global-dimension-size-200: 20px;
            }
            .spectrum-SplitButton {
                --spectrum-button-m-primary-outline-texticon-padding-left: var(--spectrum-button-m-primary-outline-texticon-padding-right);
                --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-25);
                --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25, 2px);
            }
            .spectrum--express .spectrum-SplitButton {
                --spectrum-button-m-primary-outline-texticon-padding-left: var(--spectrum-global-dimension-size-175);
                --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-40);
            }
        </style>
        <div
            class=${(0,class_map.H)({[rootClass]:!0,[`${rootClass}--left`]:void 0!==position&&"left"===position,...customClasses.reduce(((a,c)=>({...a,[c]:!0})),{})})}
        >
            ${(0,template.B)({...globals,variant,size,iconName:"right"===position?void 0!==labelIconName?labelIconName:void 0:iconName,label:"right"===position?label:void 0,hideLabel:"right"!==position,customClasses:["right"===position?"spectrum-SplitButton-action":"spectrum-SplitButton-trigger",...customFirstButtonClasses]})}
            ${(0,template.B)({...globals,variant,size,iconName:"right"===position?iconName:void 0!==labelIconName?labelIconName:void 0,iconAfterLabel:!0,label:"right"===position?void 0:label,hideLabel:"right"===position,customClasses:["right"===position?"spectrum-SplitButton-trigger":"spectrum-SplitButton-action",...customLastButtonClasses]})}
        </div>
    `).bind({});Default.args={},Default.parameters={...Default.parameters,docs:{...Default.parameters?.docs,source:{originalSource:'({\n  rootClass = "spectrum-SplitButton",\n  customClasses = [],\n  customFirstButtonClasses = [],\n  customLastButtonClasses = [],\n  size = "m",\n  variant = "cta",\n  iconName = "ChevronDown100",\n  labelIconName = undefined,\n  position = "right",\n  label = "Split Button",\n  ...globals\n}) => {\n  return html`\n        \x3c!-- Note: Only values that differ in express theme are included --\x3e\n        <style>\n            :root, .spectrum--medium {\n                --spectrum-global-dimension-size-25: 2px;\n                --spectrum-global-dimension-size-40: 3px;\n                --spectrum-global-dimension-size-100: 8px;\n                --spectrum-global-dimension-size-125: 10px;\n                --spectrum-global-dimension-size-150: 12px;\n                --spectrum-global-dimension-size-175: 14px;\n                --spectrum-global-dimension-size-200: 16px;\n            }\n            .spectrum--large {\n                --spectrum-global-dimension-size-40: 4px;\n                --spectrum-global-dimension-size-100: 10px;\n                --spectrum-global-dimension-size-125: 13px;\n                --spectrum-global-dimension-size-150: 15px;\n                --spectrum-global-dimension-size-175: 18px;\n                --spectrum-global-dimension-size-200: 20px;\n            }\n            .spectrum-SplitButton {\n                --spectrum-button-m-primary-outline-texticon-padding-left: var(--spectrum-button-m-primary-outline-texticon-padding-right);\n                --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-25);\n                --spectrum-alias-border-size-thick: var(--spectrum-global-dimension-static-size-25, 2px);\n            }\n            .spectrum--express .spectrum-SplitButton {\n                --spectrum-button-m-primary-outline-texticon-padding-left: var(--spectrum-global-dimension-size-175);\n                --spectrum-alias-border-radius-small: var(--spectrum-global-dimension-size-40);\n            }\n        </style>\n        <div\n            class=${classMap({\n    [rootClass]: true,\n    [`${rootClass}--left`]: typeof position !== "undefined" && position === "left",\n    ...customClasses.reduce((a, c) => ({\n      ...a,\n      [c]: true\n    }), {})\n  })}\n        >\n            ${Button({\n    ...globals,\n    variant,\n    size,\n    iconName: position === "right" ? typeof labelIconName != "undefined" ? labelIconName : undefined : iconName,\n    label: position === "right" ? label : undefined,\n    hideLabel: position === "right" ? false : true,\n    customClasses: [position === "right" ? "spectrum-SplitButton-action" : "spectrum-SplitButton-trigger", ...customFirstButtonClasses]\n  })}\n            ${Button({\n    ...globals,\n    variant,\n    size,\n    iconName: position === "right" ? iconName : typeof labelIconName != "undefined" ? labelIconName : undefined,\n    iconAfterLabel: true,\n    label: position === "right" ? undefined : label,\n    hideLabel: position === "right" ? true : false,\n    customClasses: [position === "right" ? "spectrum-SplitButton-trigger" : "spectrum-SplitButton-action", ...customLastButtonClasses]\n  })}\n        </div>\n    `;\n}',...Default.parameters?.docs?.source}}};const __namedExportsOrder=["Default"]},"../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../components/button/index.css":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=__webpack_require__.p+"assets/css/components/button/index.css"},"../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../components/progresscircle/index.css":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=__webpack_require__.p+"assets/css/components/progresscircle/index.css"},"../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../node_modules/@spectrum-css/splitbutton/dist/index-vars.css":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=__webpack_require__.p+"assets/css/splitbutton/dist/index-vars.css"},"../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../node_modules/@spectrum-css/splitbutton/dist/vars.css":(module,__unused_webpack_exports,__webpack_require__)=>{module.exports=__webpack_require__.p+"assets/css/splitbutton/dist/vars.css"},"../components/button/stories/template.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{B:()=>Template});var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),lit=__webpack_require__("../node_modules/lit/index.js"),class_map=__webpack_require__("../node_modules/lit/directives/class-map.js"),if_defined=__webpack_require__("../node_modules/lit/directives/if-defined.js"),style_map=__webpack_require__("../node_modules/lit/directives/style-map.js"),when=__webpack_require__("../node_modules/lit-html/directives/when.js"),capitalize=__webpack_require__("../node_modules/lodash-es/capitalize.js"),lowerCase=__webpack_require__("../node_modules/lodash-es/lowerCase.js"),template=__webpack_require__("../components/icon/stories/template.js"),stories_template=__webpack_require__("../components/progresscircle/stories/template.js"),injectStylesIntoLinkTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoLinkTag.js"),injectStylesIntoLinkTag_default=__webpack_require__.n(injectStylesIntoLinkTag),insertBySelector=__webpack_require__("../node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),cjs_ruleSet_1_rules_10_use_2_components_button=__webpack_require__("../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../components/button/index.css"),button_default=__webpack_require__.n(cjs_ruleSet_1_rules_10_use_2_components_button),options={attributes:{"data-source":"processed"}};options.insert=insertBySelector_default().bind(null,"head");injectStylesIntoLinkTag_default()(button_default(),options);const Template=({rootClass="spectrum-Button",id,testId,customClasses=[],customStyles={},size="m",label,hideLabel=!1,iconName,iconAfterLabel=!1,variant,staticColor,treatment,onclick,isDisabled=!1,isHovered=!1,isFocused=!1,isActive=!1,isPending=!1,ariaExpanded,ariaControls,...globals})=>{const{express}=globals;try{express?__webpack_require__.e(2903).then(__webpack_require__.bind(__webpack_require__,"../components/button/themes/express.css")):__webpack_require__.e(5258).then(__webpack_require__.bind(__webpack_require__,"../components/button/themes/spectrum.css"))}catch(e){console.warn(e)}const[,updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)();return lit.qy`
    <button
      class=${(0,class_map.H)({[rootClass]:!0,[`${rootClass}--${treatment}`]:void 0!==treatment,[`${rootClass}--${variant}`]:void 0!==variant,[`${rootClass}--size${size?.toUpperCase()}`]:void 0!==size,[`${rootClass}--static${(0,capitalize.A)((0,lowerCase.A)(staticColor))}`]:void 0!==staticColor,[`${rootClass}--iconOnly`]:hideLabel,"is-pending":isPending,"is-disabled":isDisabled,"is-hover":isHovered,"is-focus-visible":isFocused,"is-active":isActive,...customClasses.reduce(((a,c)=>({...a,[c]:!0})),{})})}
      id=${(0,if_defined.J)(id)}
      style=${(0,if_defined.J)((0,style_map.W)(customStyles))}
      ?disabled=${isDisabled}
      @click=${onclick??function(){updateArgs({isPending:!0}),setTimeout((()=>{updateArgs({isPending:!1})}),3e3)}}
      aria-label=${(0,if_defined.J)(hideLabel?iconName:void 0)}
      aria-expanded=${(0,if_defined.J)(ariaExpanded?.toString())}
      aria-controls=${(0,if_defined.J)(ariaControls)}
      data-testid=${(0,if_defined.J)(testId)}
    >
      ${(0,when.z)(iconName&&!iconAfterLabel,(()=>(0,template.B)({...globals,iconName,size})))}
      ${(0,when.z)(label&&!hideLabel,(()=>lit.qy`<span class=${`${rootClass}-label`}>${label}</span>`))}
      ${(0,when.z)(iconName&&iconAfterLabel,(()=>(0,template.B)({...globals,iconName,size})))}
      ${(0,when.z)(isPending,(()=>{const isOverBackground="white"===staticColor;return(0,stories_template.B)({...globals,size:"s",testId:"progress-circle",overBackground:isOverBackground,isIndeterminate:!0,addStaticBackground:!1})}))}
    </button>
  `}},"../components/progresscircle/stories/template.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{B:()=>Template});var lit=__webpack_require__("../node_modules/lit/index.js"),class_map=__webpack_require__("../node_modules/lit/directives/class-map.js"),if_defined=__webpack_require__("../node_modules/lit/directives/if-defined.js"),style_map=__webpack_require__("../node_modules/lit/directives/style-map.js"),injectStylesIntoLinkTag=__webpack_require__("../node_modules/style-loader/dist/runtime/injectStylesIntoLinkTag.js"),injectStylesIntoLinkTag_default=__webpack_require__.n(injectStylesIntoLinkTag),insertBySelector=__webpack_require__("../node_modules/style-loader/dist/runtime/insertBySelector.js"),insertBySelector_default=__webpack_require__.n(insertBySelector),progresscircle=__webpack_require__("../node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!../components/progresscircle/index.css"),progresscircle_default=__webpack_require__.n(progresscircle),options={attributes:{"data-source":"processed"}};options.insert=insertBySelector_default().bind(null,"head");injectStylesIntoLinkTag_default()(progresscircle_default(),options);const Template=({id,customStyles={},testId,rootClass="spectrum-ProgressCircle",customClasses=[],size="m",overBackground=!1,isIndeterminate=!1,addStaticBackground=overBackground})=>{let sizeClassName="medium";switch(size){case"s":sizeClassName="small";break;case"l":sizeClassName="large";break;default:sizeClassName="medium"}const componentMarkup=lit.qy`
		<div
			class=${(0,class_map.H)({[rootClass]:!0,[`${rootClass}--${sizeClassName}`]:void 0!==size,[`${rootClass}--indeterminate`]:isIndeterminate,[`${rootClass}--staticWhite`]:overBackground,...customClasses.reduce(((a,c)=>({...a,[c]:!0})),{})})}
			id=${(0,if_defined.J)(id)}
			style=${(0,if_defined.J)((0,style_map.W)(customStyles))}
			data-testid=${(0,if_defined.J)(testId)}
		>
			<div class="spectrum-ProgressCircle-track"></div>
			<div class="spectrum-ProgressCircle-fills">
				<div class="spectrum-ProgressCircle-fillMask1">
					<div class="spectrum-ProgressCircle-fillSubMask1">
						<div class="spectrum-ProgressCircle-fill"></div>
					</div>
				</div>
				<div class="spectrum-ProgressCircle-fillMask2">
					<div class="spectrum-ProgressCircle-fillSubMask2">
						<div class="spectrum-ProgressCircle-fill"></div>
					</div>
				</div>
			</div>
		</div>
	`,decoratedMarkup=lit.qy`
		<div style="background-color: #0F797D;">${componentMarkup}</div>
	`;return overBackground&&addStaticBackground?decoratedMarkup:componentMarkup}},"../node_modules/lit-html/directives/when.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";function n(n,r,t){return n?r(n):t?.(n)}__webpack_require__.d(__webpack_exports__,{z:()=>n})},"../node_modules/lit/directives/style-map.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{W:()=>o});var lit_html=__webpack_require__("../node_modules/lit-html/lit-html.js"),directive=__webpack_require__("../node_modules/lit-html/directive.js");const n="important",i=" !"+n,o=(0,directive.u$)(class extends directive.WL{constructor(t){if(super(t),t.type!==directive.OA.ATTRIBUTE||"style"!==t.name||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r="string"==typeof e&&e.endsWith(i);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:""):s[t]=e}}return lit_html.c0}})},"../node_modules/lodash-es/lowerCase.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});const __WEBPACK_DEFAULT_EXPORT__=(0,__webpack_require__("../node_modules/lodash-es/_createCompounder.js").A)((function(result,word,index){return result+(index?" ":"")+word.toLowerCase()}))}}]);
//# sourceMappingURL=splitbutton-splitbutton-stories.c38ed5f8.iframe.bundle.js.map