@scania/tegel 0.0.1-beta.0 → 0.0.1-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/tegel.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/modal/modal.css +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/tegel.js +1 -1
- package/package.json +4 -4
- package/readme.md +136 -2
- package/dist/collection/components/accordion/accordion.stories.js +0 -91
- package/dist/collection/components/badge/badge.stories.js +0 -101
- package/dist/collection/components/banner/banner.stories.js +0 -93
- package/dist/collection/components/block/block.stories.js +0 -46
- package/dist/collection/components/breadcrumb/breadcrumb.stories.js +0 -26
- package/dist/collection/components/button/button-native.stories.js +0 -183
- package/dist/collection/components/button/button-webcomponent.stories.js +0 -182
- package/dist/collection/components/card/card.stories.js +0 -181
- package/dist/collection/components/checkbox/checkbox.stories.js +0 -54
- package/dist/collection/components/chips/chips.stories.js +0 -124
- package/dist/collection/components/data-table/native-table.stories.js +0 -182
- package/dist/collection/components/data-table/table-component-basic.stories.js +0 -163
- package/dist/collection/components/data-table/table-component-batch-actions.stories.js +0 -129
- package/dist/collection/components/data-table/table-component-bodydata.stories.js +0 -58
- package/dist/collection/components/data-table/table-component-custom-width.stories.js +0 -198
- package/dist/collection/components/data-table/table-component-event-listeners.stories.js +0 -153
- package/dist/collection/components/data-table/table-component-expandable-rows.stories.js +0 -137
- package/dist/collection/components/data-table/table-component-filtering.stories.js +0 -139
- package/dist/collection/components/data-table/table-component-multiselect.stories.js +0 -160
- package/dist/collection/components/data-table/table-component-pagination.stories.js +0 -129
- package/dist/collection/components/data-table/table-component-sorting.stories.js +0 -107
- package/dist/collection/components/datetime/datetime.stories.js +0 -149
- package/dist/collection/components/divider/divider.stories.js +0 -116
- package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.stories.js +0 -130
- package/dist/collection/components/dropdown/dropdown-native.stories.js +0 -90
- package/dist/collection/components/dropdown/dropdown-wc-default.stories.js +0 -151
- package/dist/collection/components/dropdown/dropdown-wc-multiselect.stories.js +0 -146
- package/dist/collection/components/footer/footer.stories.js +0 -100
- package/dist/collection/components/header/header-all.stories.js +0 -217
- package/dist/collection/components/header/header-default.stories.js +0 -47
- package/dist/collection/components/header/header-inline.stories.js +0 -113
- package/dist/collection/components/header/header-search.stories.js +0 -263
- package/dist/collection/components/header/header-toolbar.stories.js +0 -204
- package/dist/collection/components/icon/icon-font.stories.js +0 -57
- package/dist/collection/components/icon/icon-web-component.stories.js +0 -51
- package/dist/collection/components/link/link.stories.js +0 -45
- package/dist/collection/components/message/message.stories.js +0 -117
- package/dist/collection/components/modal/modal-native.stories.js +0 -121
- package/dist/collection/components/modal/modal-webcomponent.stories.js +0 -78
- package/dist/collection/components/popover-canvas/popover-canvas.stories.js +0 -87
- package/dist/collection/components/popover-menu/popover-menu-icons.stories.js +0 -132
- package/dist/collection/components/popover-menu/popover-menu.stories.js +0 -109
- package/dist/collection/components/radio-button/radio-button.stories.js +0 -68
- package/dist/collection/components/side-menu/side-menu.stories.js +0 -182
- package/dist/collection/components/slider/slider.stories.js +0 -251
- package/dist/collection/components/spinner/spinner.stories.js +0 -59
- package/dist/collection/components/stepper/stepper.stories.js +0 -139
- package/dist/collection/components/tabs/inline-tabs-default/inline-tabs.stories.js +0 -65
- package/dist/collection/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.js +0 -43
- package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js +0 -32
- package/dist/collection/components/textarea/textarea.stories.js +0 -149
- package/dist/collection/components/textfield/textfield.stories.js +0 -222
- package/dist/collection/components/toast/toast.stories.js +0 -119
- package/dist/collection/components/toggle/toggle.stories.js +0 -62
- package/dist/collection/components/tooltip/tooltip.stories.js +0 -113
- package/dist/collection/components/utility/colour/background-color.stories.js +0 -96
- package/dist/collection/components/utility/colour/text-color.stories.js +0 -94
- package/dist/collection/foundations-stories/colour/colour-brand.stories.js +0 -38
- package/dist/collection/foundations-stories/colour/colour-scales.stories.js +0 -71
- package/dist/collection/foundations-stories/colour/colour-semantic.stories.js +0 -40
- package/dist/collection/foundations-stories/grid/grid.stories.js +0 -386
- package/dist/collection/foundations-stories/spacing/spacing-element.stories.js +0 -100
- package/dist/collection/foundations-stories/spacing/spacing-layout.stories.js +0 -94
- package/dist/collection/foundations-stories/typography/typography-body.stories.js +0 -16
- package/dist/collection/foundations-stories/typography/typography-detail.stories.js +0 -17
- package/dist/collection/foundations-stories/typography/typography-headline.stories.js +0 -39
- package/dist/collection/foundations-stories/typography/typography-paragraph.stories.js +0 -12
- package/dist/tegel/p-0e9d8e6d.entry.js +0 -1
- package/dist/tegel/p-29e77404.entry.js +0 -1
- package/dist/types/components/accordion/accordion.stories.d.ts +0 -77
- package/dist/types/components/badge/badge.stories.d.ts +0 -66
- package/dist/types/components/banner/banner.stories.d.ts +0 -68
- package/dist/types/components/block/block.stories.d.ts +0 -31
- package/dist/types/components/breadcrumb/breadcrumb.stories.d.ts +0 -12
- package/dist/types/components/button/button-native.stories.d.ts +0 -144
- package/dist/types/components/button/button-webcomponent.stories.d.ts +0 -143
- package/dist/types/components/card/card.stories.d.ts +0 -114
- package/dist/types/components/checkbox/checkbox.stories.d.ts +0 -39
- package/dist/types/components/chips/chips.stories.d.ts +0 -81
- package/dist/types/components/data-table/native-table.stories.d.ts +0 -147
- package/dist/types/components/data-table/table-component-basic.stories.d.ts +0 -100
- package/dist/types/components/data-table/table-component-batch-actions.stories.d.ts +0 -98
- package/dist/types/components/data-table/table-component-bodydata.stories.d.ts +0 -38
- package/dist/types/components/data-table/table-component-custom-width.stories.d.ts +0 -147
- package/dist/types/components/data-table/table-component-event-listeners.stories.d.ts +0 -87
- package/dist/types/components/data-table/table-component-expandable-rows.stories.d.ts +0 -87
- package/dist/types/components/data-table/table-component-filtering.stories.d.ts +0 -100
- package/dist/types/components/data-table/table-component-multiselect.stories.d.ts +0 -100
- package/dist/types/components/data-table/table-component-pagination.stories.d.ts +0 -100
- package/dist/types/components/data-table/table-component-sorting.stories.d.ts +0 -79
- package/dist/types/components/datetime/datetime.stories.d.ts +0 -80
- package/dist/types/components/divider/divider.stories.d.ts +0 -72
- package/dist/types/components/dropdown/dropdown-filter/dropdown-filter.stories.d.ts +0 -73
- package/dist/types/components/dropdown/dropdown-native.stories.d.ts +0 -57
- package/dist/types/components/dropdown/dropdown-wc-default.stories.d.ts +0 -115
- package/dist/types/components/dropdown/dropdown-wc-multiselect.stories.d.ts +0 -115
- package/dist/types/components/footer/footer.stories.d.ts +0 -23
- package/dist/types/components/header/header-all.stories.d.ts +0 -29
- package/dist/types/components/header/header-default.stories.d.ts +0 -29
- package/dist/types/components/header/header-inline.stories.d.ts +0 -29
- package/dist/types/components/header/header-search.stories.d.ts +0 -29
- package/dist/types/components/header/header-toolbar.stories.d.ts +0 -29
- package/dist/types/components/icon/icon-font.stories.d.ts +0 -38
- package/dist/types/components/icon/icon-web-component.stories.d.ts +0 -38
- package/dist/types/components/link/link.stories.d.ts +0 -33
- package/dist/types/components/message/message.stories.d.ts +0 -67
- package/dist/types/components/modal/modal-native.stories.d.ts +0 -51
- package/dist/types/components/modal/modal-webcomponent.stories.d.ts +0 -44
- package/dist/types/components/popover-canvas/popover-canvas.stories.d.ts +0 -25
- package/dist/types/components/popover-menu/popover-menu-icons.stories.d.ts +0 -27
- package/dist/types/components/popover-menu/popover-menu.stories.d.ts +0 -27
- package/dist/types/components/radio-button/radio-button.stories.d.ts +0 -41
- package/dist/types/components/side-menu/side-menu.stories.d.ts +0 -42
- package/dist/types/components/slider/slider.stories.d.ts +0 -156
- package/dist/types/components/spinner/spinner.stories.d.ts +0 -37
- package/dist/types/components/stepper/stepper.stories.d.ts +0 -56
- package/dist/types/components/tabs/inline-tabs-default/inline-tabs.stories.d.ts +0 -41
- package/dist/types/components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.stories.d.ts +0 -25
- package/dist/types/components/tabs/navigation-tabs/navigation-tabs.stories.d.ts +0 -13
- package/dist/types/components/textarea/textarea.stories.d.ts +0 -111
- package/dist/types/components/textfield/textfield.stories.d.ts +0 -176
- package/dist/types/components/toast/toast.stories.d.ts +0 -58
- package/dist/types/components/toggle/toggle.stories.d.ts +0 -42
- package/dist/types/components/tooltip/tooltip.stories.d.ts +0 -54
- package/dist/types/components/utility/colour/background-color.stories.d.ts +0 -58
- package/dist/types/components/utility/colour/text-color.stories.d.ts +0 -58
- package/dist/types/foundations-stories/colour/colour-brand.stories.d.ts +0 -13
- package/dist/types/foundations-stories/colour/colour-scales.stories.d.ts +0 -13
- package/dist/types/foundations-stories/colour/colour-semantic.stories.d.ts +0 -13
- package/dist/types/foundations-stories/grid/grid.stories.d.ts +0 -35
- package/dist/types/foundations-stories/spacing/spacing-element.stories.d.ts +0 -8
- package/dist/types/foundations-stories/spacing/spacing-layout.stories.d.ts +0 -8
- package/dist/types/foundations-stories/typography/typography-body.stories.d.ts +0 -8
- package/dist/types/foundations-stories/typography/typography-detail.stories.d.ts +0 -8
- package/dist/types/foundations-stories/typography/typography-headline.stories.d.ts +0 -21
- package/dist/types/foundations-stories/typography/typography-paragraph.stories.d.ts +0 -8
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as d,h as s}from"./p-157e1618.js";const o=class{constructor(s){d(this,s),this.text="",this.type="primary",this.variant="default",this.size="lg",this.disabled=!1,this.fullbleed=!1,this.onlyIcon=!1}componentWillLoad(){""===this.text&&(this.onlyIcon=!0)}render(){return s("button",{class:`sdds-btn sdds-btn-${this.type}\n sdds-btn-${this.size}\n ${this.disabled?"disabled":""}\n ${this.fullbleed?"sdds-btn-fullbleed":""}\n ${"variant"===this.variant?"sdds-on-white-bg":""}\n ${this.onlyIcon?"sdds-btn-only-icon":""}`},s("span",{class:"sdds-btn-text"},this.text),s("slot",{name:"icon"}))}};o.style=":root,html,.sdds-theme-light{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled:var(--sdds-white);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-primary-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-danger-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-black);--sdds-btn-secondary-border-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-black);--sdds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-black);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-icon-secondary-fill-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-color-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--sdds-btn-icon-secondary-color-focus:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-black);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-black);--sdds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-black);--sdds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-black);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-red-600);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-500);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-700);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled:var(--sdds-white);--sdds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}:root .sdds-theme-dark,html .sdds-theme-dark,.sdds-theme-light .sdds-theme-dark{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled:var(--sdds-white);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-primary-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-danger-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-white);--sdds-btn-secondary-border-color:var(--sdds-white);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-white);--sdds-btn-secondary-border-color-active:var(--sdds-white);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-white);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:var(--sdds-white);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-white);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-white);--sdds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-white);--sdds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-white);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-red-600);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-500);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-700);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled:var(--sdds-grey-868);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-black);--sdds-btn-icon-danger-color:var(--sdds-black)}.sdds-on-white-bg{--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-on-white-background-disabled);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-on-white-background-disabled)}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:16px;line-height:1;position:absolute;right:0}.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:16px;line-height:1.25}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-primary-icon-fill);color:var(--sdds-btn-primary-icon-color);font-size:16px}.sdds-btn{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--sdds-spacing-element-20);border:1px solid}.sdds-btn *{box-sizing:border-box}.sdds-btn:disabled,.sdds-btn.disabled{cursor:unset}.sdds-btn:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16);width:20px;height:20px;line-height:0}.sdds-btn.sdds-btn-xs{padding:var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}.sdds-btn.sdds-btn-xs:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm{padding:var(--sdds-spacing-element-12);height:40px}.sdds-btn.sdds-btn-sm.sdds-btn-only-icon{padding:11px}.sdds-btn.sdds-btn-sm:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-24);width:16px;height:16px}.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-12)}.sdds-btn.sdds-btn-md{padding:var(--sdds-spacing-element-16);height:48px}.sdds-btn.sdds-btn-md.sdds-btn-only-icon{padding:13px}.sdds-btn.sdds-btn-md:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-md span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-20)}.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-lg{padding:var(--sdds-spacing-element-20);height:56px}.sdds-btn.sdds-btn-lg.sdds-btn-only-icon{padding:17px}.sdds-btn.sdds-btn-lg:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-lg span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:42px}.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-fullbleed{width:inherit;display:flex;justify-content:center}.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon,.sdds-btn.sdds-btn-fullbleed.sdds-btn-icon{margin-left:var(--sdds-spacing-element-8)}.sdds-btn span.sdds-btn-text{align-self:baseline}.sdds-btn.sdds-btn-primary{background:var(--sdds-btn-primary-background);border-color:var(--sdds-btn-primary-border-color);color:var(--sdds-btn-primary-color);outline-color:var(--sdds-btn-primary-outline-color)}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill);color:var(--sdds-btn-icon-primary-fill);fill:var(--sdds-btn-icon-primary-color);color:var(--sdds-btn-icon-primary-color);font-size:16px}.sdds-btn.sdds-btn-primary:hover{background:var(--sdds-btn-primary-background-hover);border-color:var(--sdds-btn-primary-border-color-hover);color:var(--sdds-btn-primary-color-hover);outline-color:var(--sdds-btn-primary-outline-color-hover)}.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-hover);color:var(--sdds-btn-icon-primary-fill-hover);fill:var(--sdds-btn-icon-primary-color-hover);color:var(--sdds-btn-icon-primary-color-hover)}.sdds-btn.sdds-btn-primary:focus{background:var(--sdds-btn-primary-background-focus);border-color:var(--sdds-btn-primary-border-color-focus);color:var(--sdds-btn-primary-color-focus);outline-color:var(--sdds-btn-primary-outline-color-focus)}.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-focus);color:var(--sdds-btn-icon-primary-fill-focus);fill:var(--sdds-btn-icon-primary-color-focus);color:var(--sdds-btn-icon-primary-color-focus)}.sdds-btn.sdds-btn-primary:active,.sdds-btn.sdds-btn-primary.active{background:var(--sdds-btn-primary-background-active);border-color:var(--sdds-btn-primary-border-color-active);color:var(--sdds-btn-primary-color-active);outline-color:var(--sdds-btn-primary-outline-color-active)}.sdds-btn.sdds-btn-primary.disabled,.sdds-btn.sdds-btn-primary:disabled{cursor:not-allowed;background:var(--sdds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-primary-outline-color-disabled)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary{background:var(--sdds-btn-secondary-background);border-color:var(--sdds-btn-secondary-border-color);color:var(--sdds-btn-secondary-color);outline-color:var(--sdds-btn-secondary-outline-color)}.sdds-btn.sdds-btn-secondary .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill);color:var(--sdds-btn-icon-secondary-fill);fill:var(--sdds-btn-icon-secondary-color);color:var(--sdds-btn-icon-secondary-color);font-size:16px}.sdds-btn.sdds-btn-secondary:hover{background:var(--sdds-btn-secondary-background-hover);border-color:var(--sdds-btn-secondary-border-color-hover);color:var(--sdds-btn-secondary-color-hover);outline-color:var(--sdds-btn-secondary-outline-color-hover)}.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-hover);color:var(--sdds-btn-icon-secondary-fill-hover);fill:var(--sdds-btn-icon-secondary-color-hover);color:var(--sdds-btn-icon-secondary-color-hover)}.sdds-btn.sdds-btn-secondary:focus{background:var(--sdds-btn-secondary-background-focus);border-color:var(--sdds-btn-secondary-border-color-focus);color:var(--sdds-btn-secondary-color-focus);outline-color:var(--sdds-btn-secondary-outline-color-focus)}.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-focus);color:var(--sdds-btn-icon-secondary-fill-focus);fill:var(--sdds-btn-icon-secondary-color-focus);color:var(--sdds-btn-icon-secondary-color-focus)}.sdds-btn.sdds-btn-secondary:active,.sdds-btn.sdds-btn-secondary.active{background:var(--sdds-btn-secondary-background-active);border-color:var(--sdds-btn-secondary-border-color-active);color:var(--sdds-btn-secondary-color-active);outline-color:var(--sdds-btn-secondary-outline-color-active)}.sdds-btn.sdds-btn-secondary.disabled,.sdds-btn.sdds-btn-secondary:disabled{cursor:not-allowed;background:var(--sdds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-secondary-outline-color-disabled)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost{background:var(--sdds-btn-ghost-background);border-color:var(--sdds-btn-ghost-border-color);color:var(--sdds-btn-ghost-color);outline-color:var(--sdds-btn-ghost-outline-color)}.sdds-btn.sdds-btn-ghost .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill);color:var(--sdds-btn-icon-ghost-fill);fill:var(--sdds-btn-icon-ghost-color);color:var(--sdds-btn-icon-ghost-color);font-size:16px}.sdds-btn.sdds-btn-ghost:hover{background:var(--sdds-btn-ghost-background-hover);border-color:var(--sdds-btn-ghost-border-color-hover);color:var(--sdds-btn-ghost-color-hover);outline-color:var(--sdds-btn-ghost-outline-color-hover)}.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-hover);color:var(--sdds-btn-icon-ghost-fill-hover);fill:var(--sdds-btn-icon-ghost-color-hover);color:var(--sdds-btn-icon-ghost-color-hover)}.sdds-btn.sdds-btn-ghost:focus{background:var(--sdds-btn-ghost-background-focus);border-color:var(--sdds-btn-ghost-border-color-focus);color:var(--sdds-btn-ghost-color-focus);outline-color:var(--sdds-btn-ghost-outline-color-focus)}.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-focus);color:var(--sdds-btn-icon-ghost-fill-focus);fill:var(--sdds-btn-icon-ghost-color-focus);color:var(--sdds-btn-icon-ghost-color-focus)}.sdds-btn.sdds-btn-ghost:active,.sdds-btn.sdds-btn-ghost.active{background:var(--sdds-btn-ghost-background-active);border-color:var(--sdds-btn-ghost-border-color-active);color:var(--sdds-btn-ghost-color-active);outline-color:var(--sdds-btn-ghost-outline-color-active)}.sdds-btn.sdds-btn-ghost.disabled,.sdds-btn.sdds-btn-ghost:disabled{cursor:not-allowed;background:var(--sdds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-ghost-outline-color-disabled)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger{background:var(--sdds-btn-danger-background);border-color:var(--sdds-btn-danger-border-color);color:var(--sdds-btn-danger-color);outline-color:var(--sdds-btn-danger-outline-color)}.sdds-btn.sdds-btn-danger .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill);color:var(--sdds-btn-icon-danger-fill);fill:var(--sdds-btn-icon-danger-color);color:var(--sdds-btn-icon-danger-color);font-size:16px}.sdds-btn.sdds-btn-danger:hover{background:var(--sdds-btn-danger-background-hover);border-color:var(--sdds-btn-danger-border-color-hover);color:var(--sdds-btn-danger-color-hover);outline-color:var(--sdds-btn-danger-outline-color-hover)}.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-hover);color:var(--sdds-btn-icon-danger-fill-hover);fill:var(--sdds-btn-icon-danger-color-hover);color:var(--sdds-btn-icon-danger-color-hover)}.sdds-btn.sdds-btn-danger:focus{background:var(--sdds-btn-danger-background-focus);border-color:var(--sdds-btn-danger-border-color-focus);color:var(--sdds-btn-danger-color-focus);outline-color:var(--sdds-btn-danger-outline-color-focus)}.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-focus);color:var(--sdds-btn-icon-danger-fill-focus);fill:var(--sdds-btn-icon-danger-color-focus);color:var(--sdds-btn-icon-danger-color-focus)}.sdds-btn.sdds-btn-danger:active,.sdds-btn.sdds-btn-danger.active{background:var(--sdds-btn-danger-background-active);border-color:var(--sdds-btn-danger-border-color-active);color:var(--sdds-btn-danger-color-active);outline-color:var(--sdds-btn-danger-outline-color-active)}.sdds-btn.sdds-btn-danger.disabled,.sdds-btn.sdds-btn-danger:disabled{cursor:not-allowed;background:var(--sdds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-danger-outline-color-disabled)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}i.sdds-btn-icon[slot=icon]{line-height:1}:host(sdds-button){display:flex;align-items:center}:host(sdds-button) ::slotted([slot=icon]){width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]){width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button[fullbleed]){width:inherit;justify-content:center}:host(sdds-button[onlyIcon]) .sdds-btn-sm{padding:11px}:host(sdds-button[onlyIcon]) .sdds-btn-md{padding:13px}:host(sdds-button[onlyIcon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([onlyIcon])){display:flex;align-items:center}:host(sdds-button:not([onlyIcon])) .sdds-btn-sm ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-24);width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button:not([onlyIcon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-12)}:host(sdds-button:not([onlyIcon])) .sdds-btn-md ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-20);width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([onlyIcon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}:host(sdds-button:not([onlyIcon])) .sdds-btn-lg ::slotted([slot=icon]){margin-left:28px;width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([onlyIcon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}";export{o as sdds_button}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as d,h as s}from"./p-157e1618.js";const o=class{constructor(s){d(this,s),this.text="",this.type="primary",this.variant="default",this.size="lg",this.disabled=!1,this.fullbleed=!1,this.onlyIcon=!1}componentWillLoad(){""===this.text&&(this.onlyIcon=!0)}render(){return s("button",{class:`sdds-btn sdds-btn-${this.type}\n sdds-btn-${this.size}\n ${this.disabled?"disabled":""}\n ${this.fullbleed?"sdds-btn-fullbleed":""}\n ${"variant"===this.variant?"sdds-on-white-bg":""}\n ${this.onlyIcon?"sdds-btn-only-icon":""}`},s("span",{class:"sdds-btn-text"},this.text),s("slot",{name:"icon"}))}};o.style=":root,html,.sdds-theme-light{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled:var(--sdds-white);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-primary-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-danger-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-black);--sdds-btn-secondary-border-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-black);--sdds-btn-secondary-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-black);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-icon-secondary-fill-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-color-hover:var(--sdds-grey-50);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--sdds-btn-icon-secondary-color-focus:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-black);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-black);--sdds-btn-ghost-border-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-outline-color-hover:rgb(0 0 0 / 60%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-black);--sdds-btn-ghost-border-color-active:rgb(0 0 0 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-black);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-red-600);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-500);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-700);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled:var(--sdds-white);--sdds-btn-danger-color-disabled:rgb(0 0 0 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}:root .sdds-theme-dark,html .sdds-theme-dark,.sdds-theme-light .sdds-theme-dark{--sdds-btn-primary-background:var(--sdds-blue-600);--sdds-btn-primary-color:var(--sdds-white);--sdds-btn-primary-border-color:transparent;--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-color-hover:var(--sdds-white);--sdds-btn-primary-border-color-hover:transparent;--sdds-btn-primary-background-active:var(--sdds-blue-700);--sdds-btn-primary-color-active:var(--sdds-white);--sdds-btn-primary-border-color-active:transparent;--sdds-btn-primary-background-focus:var(--sdds-blue-400);--sdds-btn-primary-color-focus:var(--sdds-white);--sdds-btn-primary-border-color-focus:var(--sdds-blue-600);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-600);--sdds-btn-primary-background-disabled:var(--sdds-white);--sdds-btn-primary-color-disabled:var(--sdds-grey-400);--sdds-btn-primary-border-color-disabled:transparent;--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color:var(--sdds-grey-50);--sdds-btn-primary-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-danger-on-white-background-disabled:var(--sdds-grey-50);--sdds-btn-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-white);--sdds-btn-secondary-border-color:var(--sdds-white);--sdds-btn-secondary-background-hover:var(--sdds-blue-500);--sdds-btn-secondary-color-hover:var(--sdds-white);--sdds-btn-secondary-border-color-hover:var(--sdds-blue-500);--sdds-btn-secondary-background-active:transparent;--sdds-btn-secondary-color-active:var(--sdds-white);--sdds-btn-secondary-border-color-active:var(--sdds-white);--sdds-btn-secondary-background-focus:transparent;--sdds-btn-secondary-color-focus:var(--sdds-white);--sdds-btn-secondary-border-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-outline-color:var(--sdds-white);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-300);--sdds-btn-secondary-background-disabled:transparent;--sdds-btn-secondary-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-secondary-border-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-icon-secondary-fill:var(--sdds-black);--sdds-btn-icon-secondary-color:var(--sdds-black);--sdds-btn-ghost-background:transparent;--sdds-btn-ghost-color:var(--sdds-white);--sdds-btn-ghost-border-color:transparent;--sdds-btn-ghost-background-hover:transparent;--sdds-btn-ghost-color-hover:var(--sdds-white);--sdds-btn-ghost-border-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-outline-color-hover:rgb(255 255 255 / 41%);--sdds-btn-ghost-background-active:transparent;--sdds-btn-ghost-color-active:var(--sdds-white);--sdds-btn-ghost-border-color-active:rgb(255 255 255 / 87%);--sdds-btn-ghost-background-focus:transparent;--sdds-btn-ghost-color-focus:var(--sdds-white);--sdds-btn-ghost-border-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-outline-color-focus:var(--sdds-blue-300);--sdds-btn-ghost-background-disabled:transparent;--sdds-btn-ghost-color-disabled:rgb(255 255 255/ 38%);--sdds-btn-ghost-border-color-disabled:transparent;--sdds-btn-icon-ghost-fill:var(--sdds-black);--sdds-btn-icon-ghost-color:var(--sdds-black);--sdds-btn-danger-background:var(--sdds-red-600);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-500);--sdds-btn-danger-color-hover:var(--sdds-white);--sdds-btn-danger-border-color-hover:transparent;--sdds-btn-danger-background-active:var(--sdds-red-700);--sdds-btn-danger-color-active:var(--sdds-white);--sdds-btn-danger-border-color-active:transparent;--sdds-btn-danger-background-focus:var(--sdds-red-400);--sdds-btn-danger-color-focus:var(--sdds-white);--sdds-btn-danger-border-color-focus:var(--sdds-red-700);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled:var(--sdds-grey-868);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-black);--sdds-btn-icon-danger-color:var(--sdds-black)}.sdds-on-white-bg{--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-on-white-background-disabled);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-on-white-background-disabled)}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-lg:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-lg.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-md:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:20px;line-height:1;position:absolute;right:0}.sdds-btn-md.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:20px;line-height:1.25}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon{position:relative}.sdds-btn-sm:not(.sdds-btn-only-icon) i.sdds-btn-icon::before{font-size:16px;line-height:1;position:absolute;right:0}.sdds-btn-sm.sdds-btn-only-icon i.sdds-btn-icon::before{font-size:16px;line-height:1.25}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-primary-icon-fill);color:var(--sdds-btn-primary-icon-color);font-size:16px}.sdds-btn{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:flex;align-items:center;border-radius:4px;border:none;box-shadow:none;position:relative;text-decoration:none;cursor:pointer;height:56px;padding:var(--sdds-spacing-element-20);border:1px solid}.sdds-btn:disabled,.sdds-btn.disabled{cursor:unset}.sdds-btn:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16);width:20px;height:20px;line-height:0}.sdds-btn.sdds-btn-xs{padding:var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);height:24px;font-size:12px;border-radius:2px}.sdds-btn.sdds-btn-xs:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm{padding:var(--sdds-spacing-element-12);height:40px}.sdds-btn.sdds-btn-sm.sdds-btn-only-icon{padding:11px}.sdds-btn.sdds-btn-sm:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-sm span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-24);width:16px;height:16px}.sdds-btn.sdds-btn-sm.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-12)}.sdds-btn.sdds-btn-md{padding:var(--sdds-spacing-element-16);height:48px}.sdds-btn.sdds-btn-md.sdds-btn-only-icon{padding:13px}.sdds-btn.sdds-btn-md:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-md span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:var(--sdds-spacing-element-20)}.sdds-btn.sdds-btn-md.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-lg{padding:var(--sdds-spacing-element-20);height:56px}.sdds-btn.sdds-btn-lg.sdds-btn-only-icon{padding:17px}.sdds-btn.sdds-btn-lg:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.sdds-btn.sdds-btn-lg span.sdds-btn-text+.sdds-btn-icon{margin:unset;margin-left:42px}.sdds-btn.sdds-btn-lg.sdds-btn-fullbleed span.sdds-btn-text+.sdds-btn-icon{margin-left:var(--sdds-spacing-element-16)}.sdds-btn.sdds-btn-fullbleed{width:inherit;display:flex;justify-content:center}.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon,.sdds-btn.sdds-btn-fullbleed.sdds-btn-icon{margin-left:var(--sdds-spacing-element-8)}.sdds-btn span.sdds-btn-text{align-self:baseline}.sdds-btn.sdds-btn-primary{background:var(--sdds-btn-primary-background);border-color:var(--sdds-btn-primary-border-color);color:var(--sdds-btn-primary-color);outline-color:var(--sdds-btn-primary-outline-color)}.sdds-btn.sdds-btn-primary .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill);color:var(--sdds-btn-icon-primary-fill);fill:var(--sdds-btn-icon-primary-color);color:var(--sdds-btn-icon-primary-color);font-size:16px}.sdds-btn.sdds-btn-primary:hover{background:var(--sdds-btn-primary-background-hover);border-color:var(--sdds-btn-primary-border-color-hover);color:var(--sdds-btn-primary-color-hover);outline-color:var(--sdds-btn-primary-outline-color-hover)}.sdds-btn.sdds-btn-primary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-hover);color:var(--sdds-btn-icon-primary-fill-hover);fill:var(--sdds-btn-icon-primary-color-hover);color:var(--sdds-btn-icon-primary-color-hover)}.sdds-btn.sdds-btn-primary:focus{background:var(--sdds-btn-primary-background-focus);border-color:var(--sdds-btn-primary-border-color-focus);color:var(--sdds-btn-primary-color-focus);outline-color:var(--sdds-btn-primary-outline-color-focus)}.sdds-btn.sdds-btn-primary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-primary-fill-focus);color:var(--sdds-btn-icon-primary-fill-focus);fill:var(--sdds-btn-icon-primary-color-focus);color:var(--sdds-btn-icon-primary-color-focus)}.sdds-btn.sdds-btn-primary:active,.sdds-btn.sdds-btn-primary.active{background:var(--sdds-btn-primary-background-active);border-color:var(--sdds-btn-primary-border-color-active);color:var(--sdds-btn-primary-color-active);outline-color:var(--sdds-btn-primary-outline-color-active)}.sdds-btn.sdds-btn-primary.disabled,.sdds-btn.sdds-btn-primary:disabled{cursor:not-allowed;background:var(--sdds-btn-primary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-primary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-primary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-primary-outline-color-disabled)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary{background:var(--sdds-btn-secondary-background);border-color:var(--sdds-btn-secondary-border-color);color:var(--sdds-btn-secondary-color);outline-color:var(--sdds-btn-secondary-outline-color)}.sdds-btn.sdds-btn-secondary .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill);color:var(--sdds-btn-icon-secondary-fill);fill:var(--sdds-btn-icon-secondary-color);color:var(--sdds-btn-icon-secondary-color);font-size:16px}.sdds-btn.sdds-btn-secondary:hover{background:var(--sdds-btn-secondary-background-hover);border-color:var(--sdds-btn-secondary-border-color-hover);color:var(--sdds-btn-secondary-color-hover);outline-color:var(--sdds-btn-secondary-outline-color-hover)}.sdds-btn.sdds-btn-secondary:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-hover);color:var(--sdds-btn-icon-secondary-fill-hover);fill:var(--sdds-btn-icon-secondary-color-hover);color:var(--sdds-btn-icon-secondary-color-hover)}.sdds-btn.sdds-btn-secondary:focus{background:var(--sdds-btn-secondary-background-focus);border-color:var(--sdds-btn-secondary-border-color-focus);color:var(--sdds-btn-secondary-color-focus);outline-color:var(--sdds-btn-secondary-outline-color-focus)}.sdds-btn.sdds-btn-secondary:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-secondary-fill-focus);color:var(--sdds-btn-icon-secondary-fill-focus);fill:var(--sdds-btn-icon-secondary-color-focus);color:var(--sdds-btn-icon-secondary-color-focus)}.sdds-btn.sdds-btn-secondary:active,.sdds-btn.sdds-btn-secondary.active{background:var(--sdds-btn-secondary-background-active);border-color:var(--sdds-btn-secondary-border-color-active);color:var(--sdds-btn-secondary-color-active);outline-color:var(--sdds-btn-secondary-outline-color-active)}.sdds-btn.sdds-btn-secondary.disabled,.sdds-btn.sdds-btn-secondary:disabled{cursor:not-allowed;background:var(--sdds-btn-secondary-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-secondary-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-secondary-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-secondary-outline-color-disabled)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost{background:var(--sdds-btn-ghost-background);border-color:var(--sdds-btn-ghost-border-color);color:var(--sdds-btn-ghost-color);outline-color:var(--sdds-btn-ghost-outline-color)}.sdds-btn.sdds-btn-ghost .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill);color:var(--sdds-btn-icon-ghost-fill);fill:var(--sdds-btn-icon-ghost-color);color:var(--sdds-btn-icon-ghost-color);font-size:16px}.sdds-btn.sdds-btn-ghost:hover{background:var(--sdds-btn-ghost-background-hover);border-color:var(--sdds-btn-ghost-border-color-hover);color:var(--sdds-btn-ghost-color-hover);outline-color:var(--sdds-btn-ghost-outline-color-hover)}.sdds-btn.sdds-btn-ghost:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-hover);color:var(--sdds-btn-icon-ghost-fill-hover);fill:var(--sdds-btn-icon-ghost-color-hover);color:var(--sdds-btn-icon-ghost-color-hover)}.sdds-btn.sdds-btn-ghost:focus{background:var(--sdds-btn-ghost-background-focus);border-color:var(--sdds-btn-ghost-border-color-focus);color:var(--sdds-btn-ghost-color-focus);outline-color:var(--sdds-btn-ghost-outline-color-focus)}.sdds-btn.sdds-btn-ghost:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-ghost-fill-focus);color:var(--sdds-btn-icon-ghost-fill-focus);fill:var(--sdds-btn-icon-ghost-color-focus);color:var(--sdds-btn-icon-ghost-color-focus)}.sdds-btn.sdds-btn-ghost:active,.sdds-btn.sdds-btn-ghost.active{background:var(--sdds-btn-ghost-background-active);border-color:var(--sdds-btn-ghost-border-color-active);color:var(--sdds-btn-ghost-color-active);outline-color:var(--sdds-btn-ghost-outline-color-active)}.sdds-btn.sdds-btn-ghost.disabled,.sdds-btn.sdds-btn-ghost:disabled{cursor:not-allowed;background:var(--sdds-btn-ghost-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-ghost-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-ghost-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-ghost-outline-color-disabled)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger{background:var(--sdds-btn-danger-background);border-color:var(--sdds-btn-danger-border-color);color:var(--sdds-btn-danger-color);outline-color:var(--sdds-btn-danger-outline-color)}.sdds-btn.sdds-btn-danger .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill);color:var(--sdds-btn-icon-danger-fill);fill:var(--sdds-btn-icon-danger-color);color:var(--sdds-btn-icon-danger-color);font-size:16px}.sdds-btn.sdds-btn-danger:hover{background:var(--sdds-btn-danger-background-hover);border-color:var(--sdds-btn-danger-border-color-hover);color:var(--sdds-btn-danger-color-hover);outline-color:var(--sdds-btn-danger-outline-color-hover)}.sdds-btn.sdds-btn-danger:hover .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-hover);color:var(--sdds-btn-icon-danger-fill-hover);fill:var(--sdds-btn-icon-danger-color-hover);color:var(--sdds-btn-icon-danger-color-hover)}.sdds-btn.sdds-btn-danger:focus{background:var(--sdds-btn-danger-background-focus);border-color:var(--sdds-btn-danger-border-color-focus);color:var(--sdds-btn-danger-color-focus);outline-color:var(--sdds-btn-danger-outline-color-focus)}.sdds-btn.sdds-btn-danger:focus .sdds-btn-icon{fill:var(--sdds-btn-icon-danger-fill-focus);color:var(--sdds-btn-icon-danger-fill-focus);fill:var(--sdds-btn-icon-danger-color-focus);color:var(--sdds-btn-icon-danger-color-focus)}.sdds-btn.sdds-btn-danger:active,.sdds-btn.sdds-btn-danger.active{background:var(--sdds-btn-danger-background-active);border-color:var(--sdds-btn-danger-border-color-active);color:var(--sdds-btn-danger-color-active);outline-color:var(--sdds-btn-danger-outline-color-active)}.sdds-btn.sdds-btn-danger.disabled,.sdds-btn.sdds-btn-danger:disabled{cursor:not-allowed;background:var(--sdds-btn-danger-background-disabled);cursor:not-allowed;border-color:var(--sdds-btn-danger-border-color-disabled);cursor:not-allowed;color:var(--sdds-btn-danger-color-disabled);cursor:not-allowed;outline-color:var(--sdds-btn-danger-outline-color-disabled)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon{color:var(--sdds-grey-300)}i.sdds-btn-icon[slot=icon]{line-height:1}:host(sdds-button){display:flex;align-items:center}:host(sdds-button) ::slotted([slot=icon]){width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button) .sdds-btn-sm ::slotted([slot=icon]){width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button[fullbleed]){width:inherit;justify-content:center}:host(sdds-button[onlyIcon]) .sdds-btn-sm{padding:11px}:host(sdds-button[onlyIcon]) .sdds-btn-md{padding:13px}:host(sdds-button[onlyIcon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([onlyIcon])){display:flex;align-items:center}:host(sdds-button:not([onlyIcon])) .sdds-btn-sm ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-24);width:var(--sdds-spacing-element-16);height:var(--sdds-spacing-element-16)}:host(sdds-button:not([onlyIcon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-12)}:host(sdds-button:not([onlyIcon])) .sdds-btn-md ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-20);width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([onlyIcon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}:host(sdds-button:not([onlyIcon])) .sdds-btn-lg ::slotted([slot=icon]){margin-left:28px;width:var(--sdds-spacing-element-20);height:var(--sdds-spacing-element-20)}:host(sdds-button:not([onlyIcon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}";export{o as sdds_button}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
declare const _default: {
|
|
2
|
-
title: string;
|
|
3
|
-
argTypes: {
|
|
4
|
-
iconPosition: {
|
|
5
|
-
name: string;
|
|
6
|
-
control: {
|
|
7
|
-
type: string;
|
|
8
|
-
};
|
|
9
|
-
options: {
|
|
10
|
-
End: string;
|
|
11
|
-
Start: string;
|
|
12
|
-
};
|
|
13
|
-
description: string;
|
|
14
|
-
table: {
|
|
15
|
-
defaultValue: {
|
|
16
|
-
summary: string;
|
|
17
|
-
};
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
disabled: {
|
|
21
|
-
name: string;
|
|
22
|
-
description: string;
|
|
23
|
-
control: {
|
|
24
|
-
type: string;
|
|
25
|
-
};
|
|
26
|
-
table: {
|
|
27
|
-
defaultValue: {
|
|
28
|
-
summary: string;
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
paddingReset: {
|
|
33
|
-
name: string;
|
|
34
|
-
description: string;
|
|
35
|
-
control: {
|
|
36
|
-
type: string;
|
|
37
|
-
};
|
|
38
|
-
table: {
|
|
39
|
-
defaultValue: {
|
|
40
|
-
summary: string;
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
modeVariant: {
|
|
45
|
-
name: string;
|
|
46
|
-
description: string;
|
|
47
|
-
control: {
|
|
48
|
-
type: string;
|
|
49
|
-
};
|
|
50
|
-
options: string[];
|
|
51
|
-
table: {
|
|
52
|
-
defaultValue: {
|
|
53
|
-
summary: string;
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
};
|
|
57
|
-
};
|
|
58
|
-
parameters: {
|
|
59
|
-
notes: {
|
|
60
|
-
Accordion: any;
|
|
61
|
-
'Accordion item': any;
|
|
62
|
-
};
|
|
63
|
-
design: {
|
|
64
|
-
name: string;
|
|
65
|
-
type: string;
|
|
66
|
-
url: string;
|
|
67
|
-
}[];
|
|
68
|
-
};
|
|
69
|
-
args: {
|
|
70
|
-
disabled: boolean;
|
|
71
|
-
paddingReset: boolean;
|
|
72
|
-
iconPosition: string;
|
|
73
|
-
modeVariant: string;
|
|
74
|
-
};
|
|
75
|
-
};
|
|
76
|
-
export default _default;
|
|
77
|
-
export declare const Default: any;
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
declare const _default: {
|
|
2
|
-
title: string;
|
|
3
|
-
parameters: {
|
|
4
|
-
layout: string;
|
|
5
|
-
notes: any;
|
|
6
|
-
design: {
|
|
7
|
-
name: string;
|
|
8
|
-
type: string;
|
|
9
|
-
url: string;
|
|
10
|
-
}[];
|
|
11
|
-
};
|
|
12
|
-
argTypes: {
|
|
13
|
-
visible: {
|
|
14
|
-
name: string;
|
|
15
|
-
description: string;
|
|
16
|
-
control: {
|
|
17
|
-
type: string;
|
|
18
|
-
};
|
|
19
|
-
table: {
|
|
20
|
-
defaultValue: {
|
|
21
|
-
summary: boolean;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
value: {
|
|
26
|
-
name: string;
|
|
27
|
-
description: string;
|
|
28
|
-
control: {
|
|
29
|
-
type: string;
|
|
30
|
-
};
|
|
31
|
-
if: {
|
|
32
|
-
arg: string;
|
|
33
|
-
neq: string;
|
|
34
|
-
};
|
|
35
|
-
table: {
|
|
36
|
-
defaultValue: {
|
|
37
|
-
summary: any;
|
|
38
|
-
};
|
|
39
|
-
};
|
|
40
|
-
};
|
|
41
|
-
size: {
|
|
42
|
-
name: string;
|
|
43
|
-
description: string;
|
|
44
|
-
options: {
|
|
45
|
-
Large: string;
|
|
46
|
-
Small: string;
|
|
47
|
-
};
|
|
48
|
-
control: {
|
|
49
|
-
type: string;
|
|
50
|
-
};
|
|
51
|
-
table: {
|
|
52
|
-
defaultValue: {
|
|
53
|
-
summary: string;
|
|
54
|
-
};
|
|
55
|
-
};
|
|
56
|
-
};
|
|
57
|
-
};
|
|
58
|
-
args: {
|
|
59
|
-
visible: boolean;
|
|
60
|
-
size: string;
|
|
61
|
-
value: number;
|
|
62
|
-
};
|
|
63
|
-
};
|
|
64
|
-
export default _default;
|
|
65
|
-
export declare const Default: any;
|
|
66
|
-
export declare const WithDemoComponent: any;
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
declare const _default: {
|
|
2
|
-
title: string;
|
|
3
|
-
parameters: {
|
|
4
|
-
layout: string;
|
|
5
|
-
design: {
|
|
6
|
-
name: string;
|
|
7
|
-
type: string;
|
|
8
|
-
url: string;
|
|
9
|
-
}[];
|
|
10
|
-
};
|
|
11
|
-
argTypes: {
|
|
12
|
-
state: {
|
|
13
|
-
name: string;
|
|
14
|
-
description: string;
|
|
15
|
-
options: string[];
|
|
16
|
-
control: {
|
|
17
|
-
type: string;
|
|
18
|
-
};
|
|
19
|
-
table: {
|
|
20
|
-
defaultValue: {
|
|
21
|
-
summary: string;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
header: {
|
|
26
|
-
name: string;
|
|
27
|
-
description: string;
|
|
28
|
-
control: {
|
|
29
|
-
type: string;
|
|
30
|
-
};
|
|
31
|
-
};
|
|
32
|
-
subheader: {
|
|
33
|
-
name: string;
|
|
34
|
-
description: string;
|
|
35
|
-
control: {
|
|
36
|
-
type: string;
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
link: {
|
|
40
|
-
name: string;
|
|
41
|
-
description: string;
|
|
42
|
-
control: {
|
|
43
|
-
type: string;
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
prefix: {
|
|
47
|
-
name: string;
|
|
48
|
-
description: string;
|
|
49
|
-
control: {
|
|
50
|
-
type: string;
|
|
51
|
-
};
|
|
52
|
-
table: {
|
|
53
|
-
defaultValue: {
|
|
54
|
-
summary: string;
|
|
55
|
-
};
|
|
56
|
-
};
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
args: {
|
|
60
|
-
state: string;
|
|
61
|
-
header: string;
|
|
62
|
-
subheader: string;
|
|
63
|
-
link: string;
|
|
64
|
-
prefix: boolean;
|
|
65
|
-
};
|
|
66
|
-
};
|
|
67
|
-
export default _default;
|
|
68
|
-
export declare const Default: any;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
declare const _default: {
|
|
2
|
-
title: string;
|
|
3
|
-
parameters: {
|
|
4
|
-
layout: string;
|
|
5
|
-
design: {
|
|
6
|
-
name: string;
|
|
7
|
-
type: string;
|
|
8
|
-
url: string;
|
|
9
|
-
}[];
|
|
10
|
-
};
|
|
11
|
-
argTypes: {
|
|
12
|
-
type: {
|
|
13
|
-
name: string;
|
|
14
|
-
description: string;
|
|
15
|
-
control: {
|
|
16
|
-
type: string;
|
|
17
|
-
};
|
|
18
|
-
options: string[];
|
|
19
|
-
table: {
|
|
20
|
-
defaultValue: {
|
|
21
|
-
summary: string;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
args: {
|
|
27
|
-
type: string;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
export default _default;
|
|
31
|
-
export declare const Default: any;
|
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
declare const _default: {
|
|
2
|
-
title: string;
|
|
3
|
-
parameters: {
|
|
4
|
-
layout: string;
|
|
5
|
-
chromatic: {
|
|
6
|
-
disableSnapshot: boolean;
|
|
7
|
-
};
|
|
8
|
-
design: {
|
|
9
|
-
name: string;
|
|
10
|
-
type: string;
|
|
11
|
-
url: string;
|
|
12
|
-
}[];
|
|
13
|
-
};
|
|
14
|
-
argTypes: {
|
|
15
|
-
text: {
|
|
16
|
-
name: string;
|
|
17
|
-
description: string;
|
|
18
|
-
control: {
|
|
19
|
-
type: string;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
|
-
btnType: {
|
|
23
|
-
name: string;
|
|
24
|
-
description: string;
|
|
25
|
-
control: {
|
|
26
|
-
type: string;
|
|
27
|
-
};
|
|
28
|
-
options: string[];
|
|
29
|
-
table: {
|
|
30
|
-
defaultValue: {
|
|
31
|
-
summary: string;
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
size: {
|
|
36
|
-
name: string;
|
|
37
|
-
description: string;
|
|
38
|
-
control: {
|
|
39
|
-
type: string;
|
|
40
|
-
};
|
|
41
|
-
options: string[];
|
|
42
|
-
table: {
|
|
43
|
-
defaultValue: {
|
|
44
|
-
summary: string;
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
variant: {
|
|
49
|
-
name: string;
|
|
50
|
-
description: string;
|
|
51
|
-
control: {
|
|
52
|
-
type: string;
|
|
53
|
-
};
|
|
54
|
-
options: string[];
|
|
55
|
-
table: {
|
|
56
|
-
defaultValue: {
|
|
57
|
-
summary: string;
|
|
58
|
-
};
|
|
59
|
-
};
|
|
60
|
-
};
|
|
61
|
-
fullbleed: {
|
|
62
|
-
name: string;
|
|
63
|
-
defaultValue: boolean;
|
|
64
|
-
description: string;
|
|
65
|
-
control: {
|
|
66
|
-
type: string;
|
|
67
|
-
};
|
|
68
|
-
table: {
|
|
69
|
-
defaultValue: {
|
|
70
|
-
summary: boolean;
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
if: {
|
|
74
|
-
arg: string;
|
|
75
|
-
eq: boolean;
|
|
76
|
-
};
|
|
77
|
-
};
|
|
78
|
-
disabled: {
|
|
79
|
-
name: string;
|
|
80
|
-
type: string;
|
|
81
|
-
description: string;
|
|
82
|
-
table: {
|
|
83
|
-
defaultValue: {
|
|
84
|
-
summary: boolean;
|
|
85
|
-
};
|
|
86
|
-
};
|
|
87
|
-
};
|
|
88
|
-
onlyIcon: {
|
|
89
|
-
name: string;
|
|
90
|
-
description: string;
|
|
91
|
-
control: {
|
|
92
|
-
type: string;
|
|
93
|
-
};
|
|
94
|
-
table: {
|
|
95
|
-
defaultValue: {
|
|
96
|
-
summary: boolean;
|
|
97
|
-
};
|
|
98
|
-
};
|
|
99
|
-
if: {
|
|
100
|
-
arg: string;
|
|
101
|
-
neq: string;
|
|
102
|
-
};
|
|
103
|
-
};
|
|
104
|
-
icon: {
|
|
105
|
-
name: string;
|
|
106
|
-
description: string;
|
|
107
|
-
control: {
|
|
108
|
-
type: string;
|
|
109
|
-
};
|
|
110
|
-
options: any[];
|
|
111
|
-
if: {
|
|
112
|
-
arg: string;
|
|
113
|
-
neq: string;
|
|
114
|
-
};
|
|
115
|
-
};
|
|
116
|
-
iconType: {
|
|
117
|
-
name: string;
|
|
118
|
-
description: string;
|
|
119
|
-
control: {
|
|
120
|
-
type: string;
|
|
121
|
-
};
|
|
122
|
-
options: string[];
|
|
123
|
-
if: {
|
|
124
|
-
arg: string;
|
|
125
|
-
neq: string;
|
|
126
|
-
};
|
|
127
|
-
};
|
|
128
|
-
};
|
|
129
|
-
args: {
|
|
130
|
-
text: string;
|
|
131
|
-
btnType: string;
|
|
132
|
-
size: string;
|
|
133
|
-
variant: string;
|
|
134
|
-
fullbleed: boolean;
|
|
135
|
-
disabled: boolean;
|
|
136
|
-
onlyIcon: boolean;
|
|
137
|
-
icon: string;
|
|
138
|
-
iconType: string;
|
|
139
|
-
};
|
|
140
|
-
};
|
|
141
|
-
export default _default;
|
|
142
|
-
export declare const Native: any;
|
|
143
|
-
export declare const NativeWithIcon: any;
|
|
144
|
-
export declare const NativeOnlyIcon: any;
|
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
declare const _default: {
|
|
2
|
-
title: string;
|
|
3
|
-
parameters: {
|
|
4
|
-
notes: any;
|
|
5
|
-
layout: string;
|
|
6
|
-
chromatic: {
|
|
7
|
-
disableSnapshot: boolean;
|
|
8
|
-
};
|
|
9
|
-
design: {
|
|
10
|
-
name: string;
|
|
11
|
-
type: string;
|
|
12
|
-
url: string;
|
|
13
|
-
}[];
|
|
14
|
-
};
|
|
15
|
-
argTypes: {
|
|
16
|
-
text: {
|
|
17
|
-
name: string;
|
|
18
|
-
description: string;
|
|
19
|
-
control: {
|
|
20
|
-
type: string;
|
|
21
|
-
};
|
|
22
|
-
};
|
|
23
|
-
btnType: {
|
|
24
|
-
name: string;
|
|
25
|
-
description: string;
|
|
26
|
-
control: {
|
|
27
|
-
type: string;
|
|
28
|
-
};
|
|
29
|
-
options: string[];
|
|
30
|
-
table: {
|
|
31
|
-
defaultValue: {
|
|
32
|
-
summary: string;
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
size: {
|
|
37
|
-
name: string;
|
|
38
|
-
control: {
|
|
39
|
-
type: string;
|
|
40
|
-
};
|
|
41
|
-
options: string[];
|
|
42
|
-
table: {
|
|
43
|
-
defaultValue: {
|
|
44
|
-
summary: string;
|
|
45
|
-
};
|
|
46
|
-
};
|
|
47
|
-
description: string;
|
|
48
|
-
};
|
|
49
|
-
variant: {
|
|
50
|
-
name: string;
|
|
51
|
-
control: {
|
|
52
|
-
type: string;
|
|
53
|
-
};
|
|
54
|
-
options: string[];
|
|
55
|
-
description: string;
|
|
56
|
-
table: {
|
|
57
|
-
defaultValue: {
|
|
58
|
-
summary: string;
|
|
59
|
-
};
|
|
60
|
-
};
|
|
61
|
-
};
|
|
62
|
-
fullbleed: {
|
|
63
|
-
name: string;
|
|
64
|
-
type: string;
|
|
65
|
-
description: string;
|
|
66
|
-
table: {
|
|
67
|
-
defaultValue: {
|
|
68
|
-
summary: boolean;
|
|
69
|
-
};
|
|
70
|
-
};
|
|
71
|
-
if: {
|
|
72
|
-
arg: string;
|
|
73
|
-
truthy: boolean;
|
|
74
|
-
};
|
|
75
|
-
};
|
|
76
|
-
disabled: {
|
|
77
|
-
name: string;
|
|
78
|
-
type: string;
|
|
79
|
-
description: string;
|
|
80
|
-
table: {
|
|
81
|
-
defaultValue: {
|
|
82
|
-
summary: boolean;
|
|
83
|
-
};
|
|
84
|
-
};
|
|
85
|
-
};
|
|
86
|
-
onlyIcon: {
|
|
87
|
-
name: string;
|
|
88
|
-
description: string;
|
|
89
|
-
control: {
|
|
90
|
-
type: string;
|
|
91
|
-
};
|
|
92
|
-
table: {
|
|
93
|
-
defaultValue: {
|
|
94
|
-
summary: boolean;
|
|
95
|
-
};
|
|
96
|
-
};
|
|
97
|
-
if: {
|
|
98
|
-
arg: string;
|
|
99
|
-
neq: string;
|
|
100
|
-
};
|
|
101
|
-
};
|
|
102
|
-
icon: {
|
|
103
|
-
name: string;
|
|
104
|
-
description: string;
|
|
105
|
-
control: {
|
|
106
|
-
type: string;
|
|
107
|
-
};
|
|
108
|
-
options: any[];
|
|
109
|
-
if: {
|
|
110
|
-
arg: string;
|
|
111
|
-
neq: string;
|
|
112
|
-
};
|
|
113
|
-
};
|
|
114
|
-
iconType: {
|
|
115
|
-
name: string;
|
|
116
|
-
description: string;
|
|
117
|
-
control: {
|
|
118
|
-
type: string;
|
|
119
|
-
};
|
|
120
|
-
options: string[];
|
|
121
|
-
if: {
|
|
122
|
-
arg: string;
|
|
123
|
-
neq: string;
|
|
124
|
-
};
|
|
125
|
-
};
|
|
126
|
-
};
|
|
127
|
-
args: {
|
|
128
|
-
text: string;
|
|
129
|
-
btnType: string;
|
|
130
|
-
size: string;
|
|
131
|
-
variant: string;
|
|
132
|
-
fullbleed: boolean;
|
|
133
|
-
disabled: boolean;
|
|
134
|
-
onlyIcon: boolean;
|
|
135
|
-
icon: string;
|
|
136
|
-
iconType: string;
|
|
137
|
-
};
|
|
138
|
-
};
|
|
139
|
-
export default _default;
|
|
140
|
-
/** Button as web component */
|
|
141
|
-
export declare const WebComponent: any;
|
|
142
|
-
export declare const WebComponentWithIcon: any;
|
|
143
|
-
export declare const WebComponentOnlyIcon: any;
|