npm - @scania/tegel - Versions diffs - 0.0.51 → 0.0.61 - Mend

@scania/tegel 0.0.51 → 0.0.61

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.

Files changed (1298) hide show

package/dist/cjs/sdds-button.cjs.entry.js CHANGED Viewed

@@ -2,36 +2,36 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5ad19933.js');
+const index = require('./index-681dc796.js');
-const buttonCss = ":root,.sdds-mode-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-primary:var(--sdds-grey-50);--sdds-btn-primary-background-disabled-secondary:var(--sdds-white);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--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-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-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--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-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-danger-background-disabled-secondary:var(--sdds-white);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--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-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-mode-dark{--sdds-btn-primary-background:var(--sdds-blue-400);--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-background-active:var(--sdds-blue-300);--sdds-btn-primary-background-focus:var(--sdds-blue-600);--sdds-btn-primary-border-color-focus:var(--sdds-blue-400);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-primary-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-600);--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color: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-grey-50);--sdds-btn-icon-secondary-color:var(--sdds-grey-50);--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-grey-50);--sdds-btn-icon-ghost-color:var(--sdds-grey-50);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--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-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-danger-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-on-white-bg{--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-secondary-disabled);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-secondary-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:28px}.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:100%;justify-content:center}:host(sdds-button[only-icon]) .sdds-btn-sm{padding:11px}:host(sdds-button[only-icon]) .sdds-btn-md{padding:13px}:host(sdds-button[only-icon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([only-icon])){display:flex;align-items:center}:host(sdds-button:not([only-icon])) .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([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-12)}:host(sdds-button:not([only-icon])) .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([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .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([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}";
+const buttonCss = ":root,.sdds-mode-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:var(--sdds-blue-700);--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-primary:var(--sdds-grey-50);--sdds-btn-primary-background-disabled-secondary:var(--sdds-white);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--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-secondary-background:transparent;--sdds-btn-secondary-color:var(--sdds-black);--sdds-btn-secondary-border-color:rgb(0 0 0 / 48%);--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-400);--sdds-btn-secondary-outline-color:rgb(0 0 0 / 38%);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-400);--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-color-focus:var(--sdds-black);--sdds-btn-icon-secondary-fill-focus:var(--sdds-black);--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-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-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--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:var(--sdds-red-700);--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-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-50);--sdds-btn-danger-background-disabled-secondary:var(--sdds-white);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--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-mode-variant-primary,.sdds-mode-light .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}:root .sdds-mode-variant-secondary,.sdds-mode-light .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-mode-dark{--sdds-btn-primary-background:var(--sdds-blue-400);--sdds-btn-primary-background-hover:var(--sdds-blue-500);--sdds-btn-primary-background-active:var(--sdds-blue-300);--sdds-btn-primary-background-focus:var(--sdds-blue-600);--sdds-btn-primary-border-color-focus:var(--sdds-blue-400);--sdds-btn-primary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-primary-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-primary-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary);--sdds-btn-primary-color-disabled:var(--sdds-grey-600);--sdds-btn-icon-primary-fill:var(--sdds-grey-50);--sdds-btn-icon-primary-color: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-400);--sdds-btn-secondary-outline-color-focus:var(--sdds-blue-400);--sdds-btn-secondary-outline-color:var(--sdds-white);--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-color-focus:var(--sdds-white);--sdds-btn-icon-secondary-fill-focus:var(--sdds-white);--sdds-btn-icon-secondary-fill:var(--sdds-grey-50);--sdds-btn-icon-secondary-color:var(--sdds-grey-50);--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-grey-50);--sdds-btn-icon-ghost-color:var(--sdds-grey-50);--sdds-btn-danger-background:var(--sdds-negative);--sdds-btn-danger-color:var(--sdds-white);--sdds-btn-danger-border-color:transparent;--sdds-btn-danger-background-hover:var(--sdds-red-600);--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-400);--sdds-btn-danger-outline-color-focus:var(--sdds-red-700);--sdds-btn-danger-background-disabled-primary:var(--sdds-grey-900);--sdds-btn-danger-background-disabled-secondary:var(--sdds-grey-868);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-danger-color-disabled:rgb(255 255 255 / 38%);--sdds-btn-danger-border-color-disabled:transparent;--sdds-btn-icon-danger-fill:var(--sdds-white);--sdds-btn-icon-danger-color:var(--sdds-white)}.sdds-mode-dark .sdds-mode-variant-primary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-primary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-primary)}.sdds-mode-dark .sdds-mode-variant-secondary{--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-disabled-secondary);--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-disabled-secondary)}.sdds-on-white-bg{--sdds-btn-primary-background-disabled:var(--sdds-btn-primary-background-secondary-disabled);--sdds-btn-danger-background-disabled:var(--sdds-btn-danger-background-secondary-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:inline-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:none}.sdds-btn:focus-visible{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-visible{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-visible{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-visible{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-visible{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:28px}.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-visible{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-visible .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-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-visible{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-visible .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:rgba(0, 0, 0, 0.38)}.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-visible{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-visible .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:rgba(0, 0, 0, 0.38)}.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-visible{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-visible .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)}i.sdds-btn-icon[slot=icon]{line-height:1}:host(sdds-button){display:inline-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:100%;justify-content:center}:host(sdds-button[only-icon]) .sdds-btn-sm{padding:11px}:host(sdds-button[only-icon]) .sdds-btn-md{padding:13px}:host(sdds-button[only-icon]) .sdds-btn-lg{padding:17px}:host(sdds-button:not([only-icon])){display:inline-flex;align-items:center}:host(sdds-button:not([only-icon])) .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([only-icon])) .sdds-btn-sm.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-12)}:host(sdds-button:not([only-icon])) .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([only-icon])) .sdds-btn-md.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}:host(sdds-button:not([only-icon])) .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([only-icon])) .sdds-btn-lg.sdds-btn-fullbleed ::slotted([slot=icon]){margin-left:var(--sdds-spacing-element-16)}";
-const SddsButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.text = '';
-    this.type = 'primary';
-    this.size = 'lg';
-    this.disabled = false;
-    this.fullbleed = false;
-    this.modeVariant = null;
-    this.onlyIcon = false;
-  }
-  componentWillLoad() {
-    if (this.text === '') {
-      this.onlyIcon = true;
-      this.host.setAttribute('only-icon', '');
-    }
-  }
-  render() {
+const SddsButton = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.text = '';
+    this.type = 'primary';
+    this.size = 'lg';
+    this.disabled = false;
+    this.fullbleed = false;
+    this.modeVariant = null;
+    this.onlyIcon = false;
+  }
+  componentWillLoad() {
+    if (this.text === '') {
+      this.onlyIcon = true;
+      this.host.setAttribute('only-icon', '');
+    }
+  }
+  render() {
     return (index.h(index.Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, index.h("button", { class: `sdds-btn sdds-btn-${this.type}
         ${`sdds-btn-${this.size}`}
         ${this.disabled ? 'disabled' : ''}
         ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}
-        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}` }, index.h("span", { class: "sdds-btn-text" }, this.text), index.h("slot", { name: "icon" }))));
-  }
-  get host() { return index.getElement(this); }
-};
+        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}` }, index.h("span", { class: "sdds-btn-text" }, this.text), index.h("slot", { name: "icon" }))));
+  }
+  get host() { return index.getElement(this); }
+};
 SddsButton.style = buttonCss;
 exports.sdds_button = SddsButton;

package/dist/cjs/sdds-button.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,q1yBAAq1yB;;MCQ11yB,UAAU;;;gBAGE,EAAE;gBAGoC,SAAS;gBAE5B,IAAI;oBAGlB,KAAK;qBAGJ,KAAK;uBAGa,IAAI;oBAEtB,KAAK;;EAIlC,iBAAiB;IACf,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,EAAE;MACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KACzC;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IACzFD,oBACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI;UACnC,YAAY,IAAI,CAAC,IAAI,EAAE;UACvB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;UAC1C,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EAAE,IAE7CA,kBAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC9CA,kBAAM,IAAI,EAAC,MAAM,GAAG,CACb,CACF,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: flex;\n align-items: center;\n border-radius: 4px;\n border: none;\n box-shadow: none;\n position: relative;\n text-decoration: none;\n cursor: pointer;\n}\n\n.sdds-btn-lg {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-md {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-sm {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 16px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 16px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n fill: var(--sdds-btn-primary-icon-fill);\n color: var(--sdds-btn-primary-icon-color);\n font-size: 16px;\n}\n\n.sdds-btn {\n @include button-base;\n\n height: $btn-lg-height;\n padding: var(--sdds-spacing-element-20);\n border: 1px solid;\n\n &:disabled,\n &.disabled {\n cursor: unset;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n width: 20px;\n height: 20px;\n line-height: 0;\n }\n\n &.sdds-btn-xs {\n padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n height: $btn-xs-height;\n font-size: 12px;\n border-radius: 2px;\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n }\n\n &.sdds-btn-sm {\n padding: var(--sdds-spacing-element-12);\n height: $btn-sm-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-sm-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-24);\n width: 16px;\n height: 16px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n &.sdds-btn-md {\n padding: var(--sdds-spacing-element-16);\n height: $btn-md-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-md-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-lg {\n padding: var(--sdds-spacing-element-20);\n height: $btn-lg-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-lg-only-icon-padding;\n }\n\n &:focus {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: 28px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-fullbleed {\n width: inherit;\n display: flex;\n justify-content: center;\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-8);\n }\n }\n\n span.sdds-btn-text {\n align-self: baseline;\n }\n\n @each $type in $types {\n &.sdds-btn-#{$type} {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n color: var(--sdds-btn-icon-#{$type}-#{$prop});\n }\n\n font-size: 16px; //16px\n }\n\n &:hover {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n }\n }\n }\n\n &:focus {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n }\n }\n }\n\n &:active,\n &.active {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n }\n }\n\n &.disabled,\n &:disabled {\n @each $prop in $props {\n cursor: not-allowed;\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n color: var(--sdds-grey-300);\n }\n }\n }\n }\n }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n line-height: 1;\n}\n\n:host(sdds-button) {\n display: flex;\n align-items: center;\n\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n }\n}\n\n:host(sdds-button[fullbleed]) {\n width: 100%;\n justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n .sdds-btn-sm {\n padding: $btn-sm-only-icon-padding;\n }\n\n .sdds-btn-md {\n padding: $btn-md-only-icon-padding;\n }\n\n .sdds-btn-lg {\n padding: $btn-lg-only-icon-padding;\n }\n}\n\n:host(sdds-button:not([only-icon])) {\n display: flex;\n align-items: center;\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-24);\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n .sdds-btn-md {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-20);\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n .sdds-btn-lg {\n ::slotted([slot='icon']) {\n // TODO - This should be a var value\n margin-left: 28px;\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class SddsButton {\n // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n /** Text inside a button /\n @Prop() text: string = '';\n\n /* Type of button /\n @Prop() type: 'primary' \| 'secondary' \| 'ghost' \| 'danger' = 'primary';\n\n @Prop() size: 'xs' \| 'sm' \| 'md' \| 'lg' = 'lg';\n\n /* Control for disabled state of component /\n @Prop() disabled: boolean = false;\n\n /* When enabled, makes button take 100% width /\n @Prop() fullbleed: boolean = false;\n\n /* Set the mode variant of the the button. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n @State() onlyIcon: boolean = false;\n\n @Element() host: HostElement;\n\n componentWillLoad() {\n if (this.text === '') {\n this.onlyIcon = true;\n this.host.setAttribute('only-icon', '');\n }\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n <button\n class={`sdds-btn sdds-btn-${this.type} \n ${`sdds-btn-${this.size}`}\n ${this.disabled ? 'disabled' : ''}\n ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n >\n <span class=\"sdds-btn-text\">{this.text}</span>\n <slot name=\"icon\" />\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,2/tBAA2/tB;;MCQhguB,UAAU;;;gBAGE,EAAE;gBAGoC,SAAS;gBAE5B,IAAI;oBAGlB,KAAK;qBAGJ,KAAK;uBAGa,IAAI;oBAEtB,KAAK;;EAIlC,iBAAiB;IACf,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,EAAE;MACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;MACrB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KACzC;GACF;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,KAAK,IAAI,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAE,EAAE,EAAE,IACzFD,oBACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,IAAI;UACnC,YAAY,IAAI,CAAC,IAAI,EAAE;UACvB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;UAC1C,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EAAE,IAE7CA,kBAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC9CA,kBAAM,IAAI,EAAC,MAAM,GAAG,CACb,CACF,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/button/button.scss?tag=sdds-button&encapsulation=shadow","./src/components/button/button-component.tsx"],"sourcesContent":["@import './button-vars.scss';\n@import '../../mixins/box-sizing';\n\n.sdds-on-white-bg {\n --sdds-btn-primary-background-disabled: var(--sdds-btn-primary-background-secondary-disabled);\n --sdds-btn-danger-background-disabled: var(--sdds-btn-danger-background-secondary-disabled);\n}\n\n$btn-lg-height: 56px;\n$btn-md-height: 48px;\n$btn-sm-height: 40px;\n$btn-xs-height: 24px;\n$btn-sm-only-icon-padding: 11px;\n$btn-md-only-icon-padding: 13px;\n$btn-lg-only-icon-padding: 17px;\n$types: (primary, secondary, ghost, danger);\n$props: (background, border-color, color, outline-color);\n$iconProps: (fill, color);\n\n@mixin button-base {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: inline-flex;\n align-items: center;\n border-radius: 4px;\n border: none;\n box-shadow: none;\n position: relative;\n text-decoration: none;\n cursor: pointer;\n}\n\n.sdds-btn-lg {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-md {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 20px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 20px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn-sm {\n &:not(.sdds-btn-only-icon) {\n i.sdds-btn-icon {\n position: relative;\n\n &::before {\n font-size: 16px;\n line-height: 1;\n position: absolute;\n right: 0;\n }\n }\n }\n\n &.sdds-btn-only-icon {\n i.sdds-btn-icon::before {\n font-size: 16px;\n line-height: 1.25;\n }\n }\n}\n\n.sdds-btn.sdds-btn-primary .sdds-btn-icon {\n fill: var(--sdds-btn-primary-icon-fill);\n color: var(--sdds-btn-primary-icon-color);\n font-size: 16px;\n}\n\n.sdds-btn {\n @include button-base;\n\n height: $btn-lg-height;\n padding: var(--sdds-spacing-element-20);\n border: 1px solid;\n\n &:disabled,\n &.disabled {\n cursor: unset;\n }\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n width: 20px;\n height: 20px;\n line-height: 0;\n }\n\n &.sdds-btn-xs {\n padding: var(--sdds-spacing-element-4) var(--sdds-spacing-element-8);\n height: $btn-xs-height;\n font-size: 12px;\n border-radius: 2px;\n\n &:focus-visible {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n }\n\n &.sdds-btn-sm {\n padding: var(--sdds-spacing-element-12);\n height: $btn-sm-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-sm-only-icon-padding;\n }\n\n &:focus-visible {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-24);\n width: 16px;\n height: 16px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n &.sdds-btn-md {\n padding: var(--sdds-spacing-element-16);\n height: $btn-md-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-md-only-icon-padding;\n }\n\n &:focus-visible {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-lg {\n padding: var(--sdds-spacing-element-20);\n height: $btn-lg-height;\n\n &.sdds-btn-only-icon {\n padding: $btn-lg-only-icon-padding;\n }\n\n &:focus-visible {\n // TODO: decide on what tod o with these @include sdds-focus-state;\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n span.sdds-btn-text + .sdds-btn-icon {\n margin: unset;\n margin-left: 28px;\n }\n\n &.sdds-btn-fullbleed {\n span.sdds-btn-text + .sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n &.sdds-btn-fullbleed {\n width: inherit;\n display: flex;\n justify-content: center;\n\n .sdds-btn-icon,\n &.sdds-btn-icon {\n margin-left: var(--sdds-spacing-element-8);\n }\n }\n\n span.sdds-btn-text {\n align-self: baseline;\n }\n\n @each $type in $types {\n &.sdds-btn-#{$type} {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop});\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop});\n color: var(--sdds-btn-icon-#{$type}-#{$prop});\n }\n\n font-size: 16px; //16px\n }\n\n &:hover {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-hover);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-hover);\n }\n }\n }\n\n &:focus-visible {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-focus);\n }\n\n .sdds-btn-icon {\n @each $prop in $iconProps {\n fill: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n color: var(--sdds-btn-icon-#{$type}-#{$prop}-focus);\n }\n }\n }\n\n &:active,\n &.active {\n @each $prop in $props {\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-active);\n }\n }\n\n &.disabled,\n &:disabled {\n @each $prop in $props {\n cursor: not-allowed;\n #{$prop}: var(--sdds-btn-#{$type}-#{$prop}-disabled);\n }\n\n @if $type == 'ghost' or $type == 'secondary' {\n .sdds-btn-icon,\n &.sdds-btn-icon {\n color: rgb(0 0 0 / 38%);\n }\n } @else {\n .sdds-btn-icon,\n &.sdds-btn-icon {\n color: var(--sdds-grey-300);\n }\n }\n }\n }\n }\n}\n\ni.sdds-btn-icon[slot='icon'] {\n line-height: 1;\n}\n\n:host(sdds-button) {\n display: inline-flex;\n align-items: center;\n\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n }\n}\n\n:host(sdds-button[fullbleed]) {\n width: 100%;\n justify-content: center;\n}\n\n:host(sdds-button[only-icon]) {\n .sdds-btn-sm {\n padding: $btn-sm-only-icon-padding;\n }\n\n .sdds-btn-md {\n padding: $btn-md-only-icon-padding;\n }\n\n .sdds-btn-lg {\n padding: $btn-lg-only-icon-padding;\n }\n}\n\n:host(sdds-button:not([only-icon])) {\n display: inline-flex;\n align-items: center;\n\n .sdds-btn-sm {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-24);\n width: var(--sdds-spacing-element-16);\n height: var(--sdds-spacing-element-16);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-12);\n }\n }\n }\n\n .sdds-btn-md {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-20);\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n\n .sdds-btn-lg {\n ::slotted([slot='icon']) {\n // TODO - This should be a var value\n margin-left: 28px;\n width: var(--sdds-spacing-element-20);\n height: var(--sdds-spacing-element-20);\n }\n\n &.sdds-btn-fullbleed {\n ::slotted([slot='icon']) {\n margin-left: var(--sdds-spacing-element-16);\n }\n }\n }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-button',\n styleUrl: 'button.scss',\n shadow: true,\n})\nexport class SddsButton {\n // TODO: Make this mandatory prop. Send warning to user if empty and it is not icon only version of button.\n /** Text inside a button /\n @Prop() text: string = '';\n\n /* Type of button /\n @Prop() type: 'primary' \| 'secondary' \| 'ghost' \| 'danger' = 'primary';\n\n @Prop() size: 'xs' \| 'sm' \| 'md' \| 'lg' = 'lg';\n\n /* Control for disabled state of component /\n @Prop() disabled: boolean = false;\n\n /* When enabled, makes button take 100% width /\n @Prop() fullbleed: boolean = false;\n\n /* Set the mode variant of the the button. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n @State() onlyIcon: boolean = false;\n\n @Element() host: HostElement;\n\n componentWillLoad() {\n if (this.text === '') {\n this.onlyIcon = true;\n this.host.setAttribute('only-icon', '');\n }\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}>\n <button\n class={`sdds-btn sdds-btn-${this.type} \n ${`sdds-btn-${this.size}`}\n ${this.disabled ? 'disabled' : ''}\n ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}\n ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}`}\n >\n <span class=\"sdds-btn-text\">{this.text}</span>\n <slot name=\"icon\" />\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/sdds-card.cjs.entry.js CHANGED Viewed

@@ -2,19 +2,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5ad19933.js');
+const index = require('./index-681dc796.js');
-const sddsCardCss = ".card{box-shadow:var(--sdds-card-box);background-color:var(--sdds-card-background);display:block;border-radius:4px;max-width:368px;overflow:hidden;width:100%}.card.clickable:hover{box-shadow:var(--sdds-card-box-hover);cursor:pointer}.card .card-top{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-top img.card-top-image{width:36px;height:36px;border-radius:100%}.card .card-top .card-top-header{padding-left:16px;display:flex;flex-direction:column;row-gap:4px}.card .card-top .card-top-header.no-header-img{padding-left:0}.card .card-top .card-top-header.single-line-header{row-gap:0}.card .card-top.below{padding-top:16px}.card .card-header{color:var(--sdds-card-headline)}.card .card-subheader{color:var(--sdds-card-sub-headline)}.card .card-body-img{width:100%}.card .sdds-divider{margin:16px 16px 0;background-color:var(--sdds-card-divider);height:1px}.card slot[name=card-body]::slotted(*){font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls);color:var(--sdds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px}.card slot[name=card-bottom]::slotted(*){display:flex;padding:16px}button{border:none;text-align:left;padding:0}button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--sdds-card-box-pressed)}";
+const sddsCardCss = ".card{box-shadow:var(--sdds-card-box);background-color:var(--sdds-card-background);display:block;border-radius:4px;max-width:368px;overflow:hidden;width:100%}.card.clickable:hover{box-shadow:var(--sdds-card-box-hover);cursor:pointer}.card .card-top{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-top img.card-top-image{width:36px;height:36px;border-radius:100%}.card .card-top .card-top-header{padding-left:16px;display:flex;flex-direction:column;row-gap:4px}.card .card-top .card-top-header.no-header-img{padding-left:0}.card .card-top .card-top-header.single-line-header{row-gap:0}.card .card-top.below{padding-top:16px}.card .card-header{color:var(--sdds-card-headline)}.card .card-subheader{color:var(--sdds-card-sub-headline)}.card .card-body-img{width:100%}.card .sdds-divider{margin:16px 16px 0;background-color:var(--sdds-card-divider);height:1px}.card slot[name=card-body]::slotted(*){font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls);color:var(--sdds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px}.card slot[name=card-bottom]::slotted(*){display:flex;padding:16px;color:var(--sdds-card-icon-color)}button{border:none;text-align:left;padding:0}button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--sdds-card-box-pressed)}";
-const SddsCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sddsClick = index.createEvent(this, "sddsClick", 7);
-    this.handleClick = () => {
-      this.sddsClick.emit({
-        cardId: this.cardId,
-      });
-    };
+const SddsCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sddsClick = index.createEvent(this, "sddsClick", 6);
+    this.handleClick = () => {
+      this.sddsClick.emit({
+        cardId: this.cardId,
+      });
+    };
     this.getCardContent = () => (index.h("div", null, this.headerPlacement === 'above' && (index.h("div", { class: `card-top ${this.headerPlacement}` }, this.headerImg && (index.h("img", { class: `card-top-image`, src: this.headerImg, alt: this.headerImgAlt })), ' ', index.h("div", { class: `
           card-top-header
           ${!this.headerImg ? 'no-header-img' : ''}
@@ -23,34 +23,34 @@ const SddsCard = class {
             card-top-header
             ${!this.headerImg ? 'no-header-img' : ''}
             ${!this.header || !this.subheader ? 'single-line-header' : ''}
-            ` }, index.h("span", { class: `card-header` }, this.header), index.h("span", { class: `card-subheader` }, this.subheader)))), this.bodyDivider && index.h("div", { class: `sdds-divider` }), index.h("slot", { name: "card-body" })), index.h("div", { class: `card-bottom` }, this.hasCardBottomSlot && index.h("slot", { name: `card-bottom` }))));
-    this.modeVariant = null;
-    this.headerPlacement = 'above';
-    this.header = undefined;
-    this.subheader = undefined;
-    this.headerImg = undefined;
-    this.headerImgAlt = undefined;
-    this.bodyImg = undefined;
-    this.bodyImgAlt = undefined;
-    this.bodyDivider = false;
-    this.clickable = false;
-    this.cardId = crypto.randomUUID();
-    this.hasCardBottomSlot = false;
-    this.hasCardBodySlot = false;
-  }
-  connectedCallback() {
-    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot="card-bottom"]');
-    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot="card-body"]');
-  }
-  render() {
-    return (index.h(index.Host, { class: this.modeVariant && `sdds-mode-variant-${this.modeVariant}` }, this.clickable ? (index.h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`, onClick: () => {
-        if (this.clickable) {
-          this.handleClick();
-        }
-      } }, this.getCardContent())) : (index.h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}` }, this.getCardContent()))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
+            ` }, index.h("span", { class: `card-header` }, this.header), index.h("span", { class: `card-subheader` }, this.subheader)))), this.bodyDivider && index.h("div", { class: `sdds-divider` }), index.h("slot", { name: "card-body" })), index.h("div", { class: `card-bottom` }, this.hasCardBottomSlot && index.h("slot", { name: `card-bottom` }))));
+    this.modeVariant = null;
+    this.headerPlacement = 'above';
+    this.header = undefined;
+    this.subheader = undefined;
+    this.headerImg = undefined;
+    this.headerImgAlt = undefined;
+    this.bodyImg = undefined;
+    this.bodyImgAlt = undefined;
+    this.bodyDivider = false;
+    this.clickable = false;
+    this.cardId = crypto.randomUUID();
+    this.hasCardBottomSlot = false;
+    this.hasCardBodySlot = false;
+  }
+  connectedCallback() {
+    this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot="card-bottom"]');
+    this.hasCardBodySlot = !!this.hostElement.querySelector('[slot="card-body"]');
+  }
+  render() {
+    return (index.h(index.Host, { class: this.modeVariant && `sdds-mode-variant-${this.modeVariant}` }, this.clickable ? (index.h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`, onClick: () => {
+        if (this.clickable) {
+          this.handleClick();
+        }
+      } }, this.getCardContent())) : (index.h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}` }, this.getCardContent()))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
 SddsCard.style = sddsCardCss;
 exports.sdds_card = SddsCard;

package/dist/cjs/sdds-card.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,~~s1CAAs1C~~;;~~MCO71C~~,QAAQ;;;;IA2DnB,gBAAW,GAAG;MACZ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC,CAAC;KACJ,CAAC;IAEF,mBAAc,GAAG,OACfA,qBACG,IAAI,CAAC,eAAe,KAAK,OAAO,KAC/BA,iBAAK,KAAK,EAAE,YAAY,IAAI,CAAC,eAAe,EAAE,IAC3C,IAAI,CAAC,SAAS,KACbA,iBAAK,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC9E,EAAE,GAAG,EACNA,iBACE,KAAK,EAAE;;YAEP,CAAC,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,EAAE;YACtC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;WAC5D,IAECA,kBAAM,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAQ,EAChDA,kBAAM,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAQ,CAClD,CACF,CACP,EACDA,iBAAK,KAAK,EAAE,WAAW,IACpB,IAAI,CAAC,OAAO,IAAIA,iBAAK,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,GAAI,EACxF,IAAI,CAAC,eAAe,KAAK,OAAO,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,KACpFA,iBAAK,KAAK,EAAE,YAAY,IAAI,CAAC,eAAe,EAAE,IAC3C,IAAI,CAAC,SAAS,KACbA,iBAAK,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC9E,EACDA,iBACE,KAAK,EAAE;;cAEP,CAAC,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,EAAE;cACtC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;aAC5D,IAECA,kBAAM,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAQ,EAChDA,kBAAM,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAQ,CAClD,CACF,CACP,EACA,IAAI,CAAC,WAAW,IAAIA,iBAAK,KAAK,EAAE,cAAc,GAAQ,EACvDA,kBAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACNA,iBAAK,KAAK,EAAE,aAAa,IACtB,IAAI,CAAC,iBAAiB,IAAIA,kBAAM,IAAI,EAAE,aAAa,GAAS,CACzD,CACF,CACP,CAAC;uBA5G6C,IAAI;2BAGN,OAAO;;;;;;;uBAqBrB,KAAK;qBAGP,KAAK;kBAMT,MAAM,CAAC,UAAU,EAAE;6BAeN,KAAK;2BAEP,KAAK;;EAEzC,iBAAiB;IACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAClF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;GAC/E;EAuDD,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,qBAAqB,IAAI,CAAC,WAAW,EAAE,IACrE,IAAI,CAAC,SAAS,IACbD,oBACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,EAC1E,OAAO,EAAE;QACP,IAAI,IAAI,CAAC,SAAS,EAAE;UAClB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;OACF,IAEA,IAAI,CAAC,cAAc,EAAE,CACf,KAETA,iBAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,IAC5E,IAAI,CAAC,cAAc,EAAE,CAClB,CACP,CACI,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/card/sdds-card.scss?tag=sdds-card&encapsulation=shadow","./src/components/card/sdds-card.tsx"],"sourcesContent":[".card {\n box-shadow: var(--sdds-card-box);\n background-color: var(--sdds-card-background);\n display: block;\n border-radius: 4px;\n max-width: 368px;\n overflow: hidden;\n width: 100%;\n\n &.clickable {\n &:hover {\n box-shadow: var(--sdds-card-box-hover);\n cursor: pointer;\n }\n }\n\n .card-top {\n font: var(--sdds-headline-06);\n letter-spacing: var(--sdds-headline-06-ls);\n padding: 16px;\n display: flex;\n align-items: center;\n\n img.card-top-image {\n width: 36px;\n height: 36px;\n border-radius: 100%;\n }\n\n .card-top-header {\n padding-left: 16px;\n display: flex;\n flex-direction: column;\n row-gap: 4px;\n\n &.no-header-img {\n padding-left: 0;\n }\n\n &.single-line-header {\n row-gap: 0;\n }\n }\n\n &.below {\n padding-top: 16px;\n }\n }\n\n .card-header {\n color: var(--sdds-card-headline);\n }\n\n .card-subheader {\n color: var(--sdds-card-sub-headline);\n }\n\n .card-body-img {\n width: 100%;\n }\n\n .sdds-divider {\n margin: 16px 16px 0;\n background-color: var(--sdds-card-divider);\n height: 1px;\n }\n\n slot[name='card-body']::slotted() {\n font: var(--sdds-detail-03);\n letter-spacing: var(--sdds-detail-03-ls);\n color: var(--sdds-card-body-color);\n padding: 0 16px;\n margin-bottom: 16px;\n margin-top: 16px;\n }\n\n slot[name='card-bottom']::slotted() {\n display: flex;\n padding: 16px;\n }\n}\n\nbutton {\n border: none;\n text-align: left;\n padding: 0;\n\n &:focus {\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n &:active {\n box-shadow: var(--sdds-card-box-pressed);\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n tag: 'sdds-card',\n styleUrl: 'sdds-card.scss',\n shadow: true,\n})\nexport class SddsCard {\n /** Variant of the card based on the theme used. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placement of the header /\n @Prop() headerPlacement: 'above' \| 'below' = 'above';\n\n /* Text in the header /\n @Prop() header: string;\n\n /* Subheader text in the header /\n @Prop() subheader: string;\n\n /* Header image src /\n @Prop() headerImg: string;\n\n /* Alt text for the header image /\n @Prop() headerImgAlt: string;\n\n /* Body image src /\n @Prop() bodyImg: string;\n\n /* Alt text for the body image /\n @Prop() bodyImgAlt: string;\n\n /* Divider for the body /\n @Prop() bodyDivider: boolean = false;\n\n /* Makes the card clickable. /\n @Prop() clickable: boolean = false;\n\n /* ID for the card, must be unique.\n \n NOTE: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n /\n @Prop() cardId: string = crypto.randomUUID();\n\n /* Sends unique card identifier when the card is clicked, if clickable=true */\n @Event({\n eventName: 'sddsClick',\n composed: true,\n cancelable: ~~true~~,\n bubbles: true,\n })\n sddsClick: EventEmitter<{\n cardId: string;\n }>;\n\n @Element() hostElement: HTMLSddsCardElement;\n\n @State() hasCardBottomSlot: boolean = false;\n\n @State() hasCardBodySlot: boolean = false;\n\n connectedCallback() {\n this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n }\n\n handleClick = () => {\n this.sddsClick.emit({\n cardId: this.cardId,\n });\n };\n\n getCardContent = () => (\n <div>\n {this.headerPlacement === 'above' && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}{' '}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n <div class={`card-body`}>\n {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n {this.headerPlacement === 'below' && (this.headerImg \|\| this.header \|\| this.subheader) && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n {this.bodyDivider && <div class={`sdds-divider`}></div>}\n <slot name=\"card-body\"></slot>\n </div>\n <div class={`card-bottom`}>\n {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n </div>\n </div>\n );\n\n render() {\n return (\n <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n {this.clickable ? (\n <button\n class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n onClick={() => {\n if (this.clickable) {\n this.handleClick();\n }\n }}\n >\n {this.getCardContent()}\n </button>\n ) : (\n <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n {this.getCardContent()}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-card.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,w3CAAw3C;;MCO/3C,QAAQ;;;;IA2DnB,gBAAW,GAAG;MACZ,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC,CAAC;KACJ,CAAC;IAEF,mBAAc,GAAG,OACfA,qBACG,IAAI,CAAC,eAAe,KAAK,OAAO,KAC/BA,iBAAK,KAAK,EAAE,YAAY,IAAI,CAAC,eAAe,EAAE,IAC3C,IAAI,CAAC,SAAS,KACbA,iBAAK,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC9E,EAAE,GAAG,EACNA,iBACE,KAAK,EAAE;;YAEP,CAAC,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,EAAE;YACtC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;WAC5D,IAECA,kBAAM,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAQ,EAChDA,kBAAM,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAQ,CAClD,CACF,CACP,EACDA,iBAAK,KAAK,EAAE,WAAW,IACpB,IAAI,CAAC,OAAO,IAAIA,iBAAK,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,GAAI,EACxF,IAAI,CAAC,eAAe,KAAK,OAAO,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC,KACpFA,iBAAK,KAAK,EAAE,YAAY,IAAI,CAAC,eAAe,EAAE,IAC3C,IAAI,CAAC,SAAS,KACbA,iBAAK,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,CAC9E,EACDA,iBACE,KAAK,EAAE;;cAEP,CAAC,IAAI,CAAC,SAAS,GAAG,eAAe,GAAG,EAAE;cACtC,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAoB,GAAG,EAAE;aAC5D,IAECA,kBAAM,KAAK,EAAE,aAAa,IAAG,IAAI,CAAC,MAAM,CAAQ,EAChDA,kBAAM,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAQ,CAClD,CACF,CACP,EACA,IAAI,CAAC,WAAW,IAAIA,iBAAK,KAAK,EAAE,cAAc,GAAQ,EACvDA,kBAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACNA,iBAAK,KAAK,EAAE,aAAa,IACtB,IAAI,CAAC,iBAAiB,IAAIA,kBAAM,IAAI,EAAE,aAAa,GAAS,CACzD,CACF,CACP,CAAC;uBA5G6C,IAAI;2BAGN,OAAO;;;;;;;uBAqBrB,KAAK;qBAGP,KAAK;kBAMT,MAAM,CAAC,UAAU,EAAE;6BAeN,KAAK;2BAEP,KAAK;;EAEzC,iBAAiB;IACf,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAClF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;GAC/E;EAuDD,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,WAAW,IAAI,qBAAqB,IAAI,CAAC,WAAW,EAAE,IACrE,IAAI,CAAC,SAAS,IACbD,oBACE,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,EAC1E,OAAO,EAAE;QACP,IAAI,IAAI,CAAC,SAAS,EAAE;UAClB,IAAI,CAAC,WAAW,EAAE,CAAC;SACpB;OACF,IAEA,IAAI,CAAC,cAAc,EAAE,CACf,KAETA,iBAAK,KAAK,EAAE,QAAQ,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE,IAC5E,IAAI,CAAC,cAAc,EAAE,CAClB,CACP,CACI,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/card/sdds-card.scss?tag=sdds-card&encapsulation=shadow","./src/components/card/sdds-card.tsx"],"sourcesContent":[".card {\n box-shadow: var(--sdds-card-box);\n background-color: var(--sdds-card-background);\n display: block;\n border-radius: 4px;\n max-width: 368px;\n overflow: hidden;\n width: 100%;\n\n &.clickable {\n &:hover {\n box-shadow: var(--sdds-card-box-hover);\n cursor: pointer;\n }\n }\n\n .card-top {\n font: var(--sdds-headline-06);\n letter-spacing: var(--sdds-headline-06-ls);\n padding: 16px;\n display: flex;\n align-items: center;\n\n img.card-top-image {\n width: 36px;\n height: 36px;\n border-radius: 100%;\n }\n\n .card-top-header {\n padding-left: 16px;\n display: flex;\n flex-direction: column;\n row-gap: 4px;\n\n &.no-header-img {\n padding-left: 0;\n }\n\n &.single-line-header {\n row-gap: 0;\n }\n }\n\n &.below {\n padding-top: 16px;\n }\n }\n\n .card-header {\n color: var(--sdds-card-headline);\n }\n\n .card-subheader {\n color: var(--sdds-card-sub-headline);\n }\n\n .card-body-img {\n width: 100%;\n }\n\n .sdds-divider {\n margin: 16px 16px 0;\n background-color: var(--sdds-card-divider);\n height: 1px;\n }\n\n slot[name='card-body']::slotted() {\n font: var(--sdds-detail-03);\n letter-spacing: var(--sdds-detail-03-ls);\n color: var(--sdds-card-body-color);\n padding: 0 16px;\n margin-bottom: 16px;\n margin-top: 16px;\n }\n\n slot[name='card-bottom']::slotted() {\n display: flex;\n padding: 16px;\n color: var(--sdds-card-icon-color);\n } \n}\n\nbutton {\n border: none;\n text-align: left;\n padding: 0;\n\n &:focus {\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n &:active {\n box-shadow: var(--sdds-card-box-pressed);\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n tag: 'sdds-card',\n styleUrl: 'sdds-card.scss',\n shadow: true,\n})\nexport class SddsCard {\n /** Variant of the card based on the theme used. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Placement of the header /\n @Prop() headerPlacement: 'above' \| 'below' = 'above';\n\n /* Text in the header /\n @Prop() header: string;\n\n /* Subheader text in the header /\n @Prop() subheader: string;\n\n /* Header image src /\n @Prop() headerImg: string;\n\n /* Alt text for the header image /\n @Prop() headerImgAlt: string;\n\n /* Body image src /\n @Prop() bodyImg: string;\n\n /* Alt text for the body image /\n @Prop() bodyImgAlt: string;\n\n /* Divider for the body /\n @Prop() bodyDivider: boolean = false;\n\n /* Makes the card clickable. /\n @Prop() clickable: boolean = false;\n\n /* ID for the card, must be unique.\n \n NOTE: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n /\n @Prop() cardId: string = crypto.randomUUID();\n\n /* Sends unique card identifier when the card is clicked, if clickable=true */\n @Event({\n eventName: 'sddsClick',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsClick: EventEmitter<{\n cardId: string;\n }>;\n\n @Element() hostElement: HTMLSddsCardElement;\n\n @State() hasCardBottomSlot: boolean = false;\n\n @State() hasCardBodySlot: boolean = false;\n\n connectedCallback() {\n this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n }\n\n handleClick = () => {\n this.sddsClick.emit({\n cardId: this.cardId,\n });\n };\n\n getCardContent = () => (\n <div>\n {this.headerPlacement === 'above' && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}{' '}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n <div class={`card-body`}>\n {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n {this.headerPlacement === 'below' && (this.headerImg \|\| this.header \|\| this.subheader) && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header \|\| !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n {this.bodyDivider && <div class={`sdds-divider`}></div>}\n <slot name=\"card-body\"></slot>\n </div>\n <div class={`card-bottom`}>\n {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n </div>\n </div>\n );\n\n render() {\n return (\n <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n {this.clickable ? (\n <button\n class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n onClick={() => {\n if (this.clickable) {\n this.handleClick();\n }\n }}\n >\n {this.getCardContent()}\n </button>\n ) : (\n <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n {this.getCardContent()}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/sdds-checkbox.cjs.entry.js CHANGED Viewed

@@ -2,54 +2,54 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-5ad19933.js');
+const index = require('./index-681dc796.js');
-const sddsCheckboxCss = ".sdds-checkbox-webcomponent.sc-sdds-checkbox{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox *.sc-sdds-checkbox{box-sizing:border-box}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox{cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled+label.sc-sdds-checkbox,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox:hover::before{display:none}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}";
+const sddsCheckboxCss = ".sdds-checkbox-webcomponent.sc-sdds-checkbox{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox *.sc-sdds-checkbox{box-sizing:border-box}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{content:\"\";position:absolute;box-sizing:border-box}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::before{width:24px;height:24px;left:0;top:0;border-radius:4px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px;border-radius:2px}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:var(--sdds-checkbox-background-opacity-focus);transition:opacity 0.2s ease-in-out}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox{cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled+label.sc-sdds-checkbox,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox+label.sc-sdds-checkbox{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].disabled.sc-sdds-checkbox:hover::before{display:none}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:var(--sdds-checkbox-background-opacity-hover)}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled:hover::before,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked:disabled::after,.sdds-checkbox-webcomponent.sc-sdds-checkbox input[type=checkbox].sc-sdds-checkbox:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}";
-const SddsCheckbox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sddsChange = index.createEvent(this, "sddsChange", 6);
-    this.sddsFocus = index.createEvent(this, "sddsFocus", 6);
-    this.sddsBlur = index.createEvent(this, "sddsBlur", 6);
-    this.handleChange = () => {
-      this.checked = !this.checked;
-      this.sddsChange.emit({
-        checkboxId: this.checkboxId,
-        checked: this.checked,
-        value: this.value,
-      });
-    };
-    this.name = undefined;
-    this.checkboxId = crypto.randomUUID();
-    this.disabled = false;
-    this.required = false;
-    this.checked = false;
-    this.value = undefined;
-  }
-  /** Toggles the checked value of the component. */
-  async toggleCheckbox() {
-    this.checked = !this.checked;
-    return {
-      checkboxId: this.checkboxId,
-      checked: this.checked,
-    };
-  }
-  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
-  handleFocus(event) {
-    this.sddsFocus.emit(event);
-  }
-  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
-  handleBlur(event) {
-    this.sddsBlur.emit(event);
-  }
-  render() {
-    return (index.h("div", { class: "sdds-checkbox-webcomponent" }, index.h("input", { "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
-        this.handleChange();
-      } }), index.h("label", { htmlFor: this.checkboxId }, index.h("slot", { name: "label" }))));
-  }
-  get host() { return index.getElement(this); }
-};
+const SddsCheckbox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sddsChange = index.createEvent(this, "sddsChange", 6);
+    this.sddsFocus = index.createEvent(this, "sddsFocus", 6);
+    this.sddsBlur = index.createEvent(this, "sddsBlur", 6);
+    this.handleChange = () => {
+      this.checked = !this.checked;
+      this.sddsChange.emit({
+        checkboxId: this.checkboxId,
+        checked: this.checked,
+        value: this.value,
+      });
+    };
+    this.name = undefined;
+    this.checkboxId = crypto.randomUUID();
+    this.disabled = false;
+    this.required = false;
+    this.checked = false;
+    this.value = undefined;
+  }
+  /** Toggles the checked value of the component. */
+  async toggleCheckbox() {
+    this.checked = !this.checked;
+    return {
+      checkboxId: this.checkboxId,
+      checked: this.checked,
+    };
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleFocus(event) {
+    this.sddsFocus.emit(event);
+  }
+  /** Set the input as focus when clicking the whole textfield with suffix/prefix */
+  handleBlur(event) {
+    this.sddsBlur.emit(event);
+  }
+  render() {
+    return (index.h("div", { class: "sdds-checkbox-webcomponent" }, index.h("input", { "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+        this.handleChange();
+      } }), index.h("label", { htmlFor: this.checkboxId }, index.h("slot", { name: "label" }))));
+  }
+  get host() { return index.getElement(this); }
+};
 SddsCheckbox.style = sddsCheckboxCss;
 exports.sdds_checkbox = SddsCheckbox;

package/dist/cjs/sdds-checkbox.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,~~o+HAAo+H~~;;~~MCS/+H~~,YAAY;;;;;;IA4CvB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC;;sBA9C2B,MAAM,CAAC,UAAU,EAAE;oBAGpB,KAAK;oBAGL,KAAK;mBAGW,KAAK;;;;EASjD,MAAM,cAAc;IAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;;EAkCD,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;;EAYD,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,mCACgB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,sBACV,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,QAAQ,EAAE;QACR,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB,GACD,EACFA,mBAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7BA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;","names":["h"],"sources":["./src/components/checkbox/sdds-checkbox.scss?tag=sdds-checkbox&encapsulation=scoped","./src/components/checkbox/sdds-checkbox.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-checkbox-webcomponent {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-checkbox-text);\n display: flex;\n align-items: center;\n margin-left: -4px;\n\n input[type='checkbox'] {\n appearance: none;\n outline: none;\n margin: 0;\n border: 0;\n border-radius: 2px;\n width: 24px;\n height: 24px;\n position: relative;\n cursor: pointer;\n\n + label {\n color: var(--sdds-checkbox-color);\n padding-left: var(--sdds-spacing-element-4);\n padding-top: var(--sdds-spacing-element-4);\n padding-bottom: var(--sdds-spacing-element-4);\n cursor: pointer;\n }\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n box-sizing: border-box;\n ~~border-radius: 2px;\n~~ }\n\n &::before {\n width: 24px;\n height: 24px;\n left: 0;\n top: 0;\n }\n\n &::after {\n border: 1px solid var(--sdds-checkbox-interaction-01);\n background-color: var(--sdds-checkbox-interaction-02);\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-checkbox-background-hover);\n opacity: ~~0.12~~;\n }\n }\n\n &:focus {\n &::before {\n background-color: var(--sdds-checkbox-background-focus);\n opacity: ~~0.24~~;\n transition: opacity 0.2s ease-in-out;\n }\n }\n\n &:disabled,\n &.disabled {\n cursor: not-allowed;\n\n &::after {\n border-color: var(--sdds-checkbox-border-color-disabled-after);\n }\n\n + label {\n color: var(--sdds-grey-600);\n cursor: not-allowed;\n }\n\n &:hover {\n &::before {\n display: none;\n }\n }\n }\n\n &:checked {\n &::after {\n background-image: var(--sdds-checkbox-background-img);\n background-color: var(--sdds-checkbox-interaction-01);\n background-repeat: no-repeat;\n background-position: center;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-checkbox-background-hover);\n opacity: ~~0.12~~;\n }\n }\n\n &:disabled,\n &.disabled {\n &:hover::before,\n &::before {\n display: block;\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n border: 1px solid #b0b7c4;\n }\n\n &::after {\n background-image: var(--sdds-checkbox-background-img-disabled);\n background-color: var(--sdds-checkbox-interaction-02);\n color: var(--sdds-checkbox-color-disabled-after);\n }\n }\n }\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-checkbox',\n styleUrl: 'sdds-checkbox.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsCheckbox {\n /** Name for the checkbox's input element. /\n @Prop() name: string;\n\n /* ID for the checkbox's input element. Randomly generated if not specified. /\n @Prop() checkboxId: string = crypto.randomUUID();\n\n /* Sets the checkbox in a disabled state /\n @Prop() disabled: boolean = false;\n\n /* Make the checkbox required /\n @Prop() required: boolean = false;\n\n /* Sets the checkbox as checked /\n @Prop({ reflect: true }) checked: boolean = false;\n\n /* Value for the checkbox /\n @Prop() value: string;\n\n @Element() host: HostElement;\n\n /* Toggles the checked value of the component. /\n @Method()\n async toggleCheckbox() {\n this.checked = !this.checked;\n return {\n checkboxId: this.checkboxId,\n checked: this.checked,\n };\n }\n\n /* Sends unique checkbox identifier and checked status when it is checked/unchecked. /\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n checkboxId: string;\n checked: boolean;\n value?: string;\n }>;\n\n handleChange = () => {\n this.checked = !this.checked;\n this.sddsChange.emit({\n checkboxId: this.checkboxId,\n checked: this.checked,\n value: this.value,\n });\n };\n\n /* Focus event for the checkbox /\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix /\n handleFocus(event): void {\n this.sddsFocus.emit(event);\n }\n\n /* Blur event for the checkbox /\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleBlur(event): void {\n this.sddsBlur.emit(event);\n }\n\n render() {\n return (\n <div class=\"sdds-checkbox-webcomponent\">\n <input\n aria-checked={this.checked}\n aria-required={this.required}\n aria-describedby={this.host.getAttribute('aria-describedby')}\n aria-labelledby={this.host.getAttribute('aria-labelledby')}\n required={this.required}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n id={this.checkboxId}\n checked={this.checked}\n disabled={this.disabled}\n onFocus={(event) => this.handleFocus(event)}\n onBlur={(event) => this.handleBlur(event)}\n onChange={() => {\n this.handleChange();\n }}\n />\n <label htmlFor={this.checkboxId}>\n <slot name=\"label\"></slot>\n </label>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-checkbox.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,inIAAinI;;MCS5nI,YAAY;;;;;;IA4CvB,iBAAY,GAAG;MACb,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC;;sBA9C2B,MAAM,CAAC,UAAU,EAAE;oBAGpB,KAAK;oBAGL,KAAK;mBAGW,KAAK;;;;EASjD,MAAM,cAAc;IAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,OAAO;MACL,UAAU,EAAE,IAAI,CAAC,UAAU;MAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;GACH;;EAkCD,WAAW,CAAC,KAAK;IACf,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC5B;;EAYD,UAAU,CAAC,KAAK;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;GAC3B;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,4BAA4B,IACrCA,mCACgB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,sBACV,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,qBAC3C,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAC1D,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,MAAM,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EACzC,QAAQ,EAAE;QACR,IAAI,CAAC,YAAY,EAAE,CAAC;OACrB,GACD,EACFA,mBAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7BA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,EACN;GACH;;;;;;;","names":["h"],"sources":["./src/components/checkbox/sdds-checkbox.scss?tag=sdds-checkbox&encapsulation=scoped","./src/components/checkbox/sdds-checkbox.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n.sdds-checkbox-webcomponent {\n @include sdds-box-sizing;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-checkbox-text);\n display: flex;\n align-items: center;\n margin-left: -4px;\n\n input[type='checkbox'] {\n appearance: none;\n outline: none;\n margin: 0;\n border: 0;\n border-radius: 2px;\n width: 24px;\n height: 24px;\n position: relative;\n cursor: pointer;\n\n + label {\n color: var(--sdds-checkbox-color);\n padding-left: var(--sdds-spacing-element-4);\n padding-top: var(--sdds-spacing-element-4);\n padding-bottom: var(--sdds-spacing-element-4);\n cursor: pointer;\n }\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n box-sizing: border-box;\n }\n\n &::before {\n width: 24px;\n height: 24px;\n left: 0;\n top: 0;\n border-radius: 4px;\n }\n\n &::after {\n border: 1px solid var(--sdds-checkbox-interaction-01);\n background-color: var(--sdds-checkbox-interaction-02);\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n border-radius: 2px;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-checkbox-background-hover);\n opacity: var(--sdds-checkbox-background-opacity-hover);\n }\n }\n\n &:focus {\n &::before {\n background-color: var(--sdds-checkbox-background-focus);\n opacity: var(--sdds-checkbox-background-opacity-focus);\n transition: opacity 0.2s ease-in-out;\n }\n }\n\n &:disabled,\n &.disabled {\n cursor: not-allowed;\n\n &::after {\n border-color: var(--sdds-checkbox-border-color-disabled-after);\n }\n\n + label {\n color: var(--sdds-grey-600);\n cursor: not-allowed;\n }\n\n &:hover {\n &::before {\n display: none;\n }\n }\n }\n\n &:checked {\n &::after {\n background-image: var(--sdds-checkbox-background-img);\n background-color: var(--sdds-checkbox-interaction-01);\n background-repeat: no-repeat;\n background-position: center;\n }\n\n &:hover {\n &::before {\n background-color: var(--sdds-checkbox-background-hover);\n opacity: var(--sdds-checkbox-background-opacity-hover);\n }\n }\n\n &:disabled,\n &.disabled {\n &:hover::before,\n &::before {\n display: block;\n width: 16px;\n height: 16px;\n left: 4px;\n top: 4px;\n border: 1px solid #b0b7c4;\n }\n\n &::after {\n background-image: var(--sdds-checkbox-background-img-disabled);\n background-color: var(--sdds-checkbox-interaction-02);\n color: var(--sdds-checkbox-color-disabled-after);\n }\n }\n }\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-checkbox',\n styleUrl: 'sdds-checkbox.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsCheckbox {\n /** Name for the checkbox's input element. /\n @Prop() name: string;\n\n /* ID for the checkbox's input element. Randomly generated if not specified. /\n @Prop() checkboxId: string = crypto.randomUUID();\n\n /* Sets the checkbox in a disabled state /\n @Prop() disabled: boolean = false;\n\n /* Make the checkbox required /\n @Prop() required: boolean = false;\n\n /* Sets the checkbox as checked /\n @Prop({ reflect: true }) checked: boolean = false;\n\n /* Value for the checkbox /\n @Prop() value: string;\n\n @Element() host: HostElement;\n\n /* Toggles the checked value of the component. /\n @Method()\n async toggleCheckbox() {\n this.checked = !this.checked;\n return {\n checkboxId: this.checkboxId,\n checked: this.checked,\n };\n }\n\n /* Sends unique checkbox identifier and checked status when it is checked/unchecked. /\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n checkboxId: string;\n checked: boolean;\n value?: string;\n }>;\n\n handleChange = () => {\n this.checked = !this.checked;\n this.sddsChange.emit({\n checkboxId: this.checkboxId,\n checked: this.checked,\n value: this.value,\n });\n };\n\n /* Focus event for the checkbox /\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix /\n handleFocus(event): void {\n this.sddsFocus.emit(event);\n }\n\n /* Blur event for the checkbox /\n @Event({\n eventName: 'sddsBlur',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n handleBlur(event): void {\n this.sddsBlur.emit(event);\n }\n\n render() {\n return (\n <div class=\"sdds-checkbox-webcomponent\">\n <input\n aria-checked={this.checked}\n aria-required={this.required}\n aria-describedby={this.host.getAttribute('aria-describedby')}\n aria-labelledby={this.host.getAttribute('aria-labelledby')}\n required={this.required}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n id={this.checkboxId}\n checked={this.checked}\n disabled={this.disabled}\n onFocus={(event) => this.handleFocus(event)}\n onBlur={(event) => this.handleBlur(event)}\n onChange={() => {\n this.handleChange();\n }}\n />\n <label htmlFor={this.checkboxId}>\n <slot name=\"label\"></slot>\n </label>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/sdds-chip.cjs.entry.js ADDED Viewed

@@ -0,0 +1,54 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-681dc796.js');
+const sddsChipCss = ".sc-sdds-chip-s>*{display:inline-flex;align-items:center}.sc-sdds-chip-h[size=sm] .sc-sdds-chip-s>*{gap:6px}.sc-sdds-chip-h[size=lg] .sc-sdds-chip-s>*{gap:8px}.component.sc-sdds-chip .sdds-chip-component.sc-sdds-chip{display:inline-flex}.component.sc-sdds-chip .sdds-chip-component.sc-sdds-chip label.sc-sdds-chip{background-color:var(--sdds-chips-background);color:var(--sdds-chips-color);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:inline-flex;align-items:center;border-radius:16px;cursor:pointer;white-space:nowrap}.component.sc-sdds-chip .sdds-chip-component.sc-sdds-chip label.sc-sdds-chip:hover{background-color:var(--sdds-chips-background-hover)}.component.sc-sdds-chip .sdds-chip-component.lg.sc-sdds-chip label.sc-sdds-chip{height:32px;padding:1px 16px 0;gap:8px}.component.sc-sdds-chip .sdds-chip-component.sm.sc-sdds-chip label.sc-sdds-chip{height:24px;padding:1px 12px 0;gap:6px}.component.sc-sdds-chip .sdds-chip-component.sc-sdds-chip input.sc-sdds-chip{opacity:0;position:absolute;z-index:-1}.component.sc-sdds-chip .sdds-chip-component.sc-sdds-chip input.sc-sdds-chip:focus-visible+label.sc-sdds-chip{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}.component.sc-sdds-chip .sdds-chip-component.sc-sdds-chip input.sc-sdds-chip:checked+label.sc-sdds-chip{background-color:var(--sdds-chips-background-active);color:var(--sdds-chips-color-active)}.component.sc-sdds-chip .sdds-chip-component.sc-sdds-chip input.sc-sdds-chip:checked+label.sc-sdds-chip:hover{background-color:var(--sdds-chips-background-active-hover)}";
+const SddsChip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sddsChange = index.createEvent(this, "sddsChange", 6);
+    this.sddsClick = index.createEvent(this, "sddsClick", 6);
+    this.handleChange = () => {
+      this.sddsChange.emit({
+        chipId: this.chipId,
+        value: this.value,
+      });
+    };
+    this.handleClick = () => {
+      this.sddsClick.emit({
+        chipId: this.chipId,
+      });
+    };
+    this.type = 'button';
+    this.size = 'lg';
+    this.chipId = crypto.randomUUID();
+    this.checked = false;
+    this.name = undefined;
+    this.value = undefined;
+  }
+  renderInputAttributes() {
+    if (this.type !== 'button') {
+      return {
+        value: this.value,
+        checked: this.checked,
+        name: this.name,
+        onChange: () => this.handleChange(),
+      };
+    }
+    return {
+      onClick: () => this.handleClick(),
+    };
+  }
+  render() {
+    const inputAttributes = this.renderInputAttributes();
+    return (index.h(index.Host, null, index.h("div", { class: "component" }, index.h("div", { class: `sdds-chip-component ${this.size}` }, index.h("input", Object.assign({ type: this.type, id: this.chipId }, inputAttributes)), index.h("label", { htmlFor: this.chipId }, index.h("slot", { name: "label" }))))));
+  }
+};
+SddsChip.style = sddsChipCss;
+exports.sdds_chip = SddsChip;
+//# sourceMappingURL=sdds-chip.cjs.entry.js.map

package/dist/cjs/sdds-chip.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-chip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,oiDAAoiD;;MCQ3iD,QAAQ;;;;;IAkCX,iBAAY,GAAG;MACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAC;IAaM,gBAAW,GAAG;MACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,MAAM,EAAE,IAAI,CAAC,MAAM;OACpB,CAAC,CAAC;KACJ,CAAC;gBAtD8C,QAAQ;gBAG5B,IAAI;kBAMP,MAAM,CAAC,UAAU,EAAE;mBAGjB,KAAK;;;;EA4CxB,qBAAqB;IAC3B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,OAAO;QACL,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,QAAQ,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE;OACpC,CAAC;KACH;IACD,OAAO;MACL,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE;KAClC,CAAC;GACH;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAErD,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,WAAW,IACpBA,iBAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,IAAI,EAAE,IAC5CA,iCAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,IAAM,eAAe,EAAU,EACtEA,mBAAO,OAAO,EAAE,IAAI,CAAC,MAAM,IACzBA,kBAAM,IAAI,EAAC,OAAO,GAAG,CACf,CACJ,CACF,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/chip/sdds-chip.scss?tag=sdds-chip&encapsulation=scoped","./src/components/chip/sdds-chip.tsx"],"sourcesContent":["@import '../../mixins/focus-state';\n\n/* Styling for slotted content */\n::slotted(*) {\n display: inline-flex;\n align-items: center;\n}\n\n:host([size='sm']) {\n ::slotted(*) {\n gap: 6px;\n }\n}\n\n:host([size='lg']) {\n ::slotted(*) {\n gap: 8px;\n }\n}\n\n/* Component styling */\n\n.component {\n .sdds-chip-component {\n display: inline-flex;\n\n label {\n background-color: var(--sdds-chips-background);\n color: var(--sdds-chips-color);\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n display: inline-flex;\n align-items: center;\n border-radius: 16px;\n cursor: pointer;\n white-space: nowrap;\n\n &:hover {\n background-color: var(--sdds-chips-background-hover);\n }\n }\n\n &.lg {\n label {\n height: 32px;\n padding: 1px 16px 0;\n gap: 8px;\n }\n }\n\n &.sm {\n label {\n height: 24px;\n padding: 1px 12px 0;\n gap: 6px;\n }\n }\n\n input {\n opacity: 0;\n position: absolute;\n z-index: -1;\n }\n\n input:focus-visible + label {\n @include sdds-focus-state;\n }\n\n input:checked + label {\n background-color: var(--sdds-chips-background-active);\n color: var(--sdds-chips-color-active);\n\n &:hover {\n background-color: var(--sdds-chips-background-active-hover);\n }\n }\n }\n}\n","import { Component, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-chip',\n styleUrl: 'sdds-chip.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsChip {\n /** Type of chip, depends on usage */\n @Prop() type: 'button' | 'radio' | 'checkbox' = 'button';\n\n /** Size of the chip component */\n @Prop() size: 'sm' | 'lg' = 'lg';\n\n /** ID used for internal chip functionality and events, must be unique.\n *\n * **NOTE**: If you're listening for input events you need to set this ID yourself to identify the input, as the default ID is random and will be different every time.\n */\n @Prop() chipId: string = crypto.randomUUID();\n\n /** Setting it to true set component state to checked. Valid only for type checkbox and radio. */\n @Prop() checked: boolean = false;\n\n /** Name for the checkbox or radio input element. Also creates a reference between label and input. Valid only for type checkbox and radio. */\n @Prop() name: string;\n\n /** Value of input. Valid only for type checkbox and radio. */\n @Prop() value: string;\n\n /** Sends unique chip identifier and value when it is changed (checked/unchecked). Valid only for type checkbox and radio. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n chipId: string;\n value: string;\n }>;\n\n private handleChange = () => {\n this.sddsChange.emit({\n chipId: this.chipId,\n value: this.value,\n });\n };\n\n /** Sends unique chip identifier when chip is clicked. Valid only for type button. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n @Event({\n eventName: 'sddsClick',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsClick: EventEmitter<{\n chipId: string;\n }>;\n\n private handleClick = () => {\n this.sddsClick.emit({\n chipId: this.chipId,\n });\n };\n\n private renderInputAttributes() {\n if (this.type !== 'button') {\n return {\n value: this.value,\n checked: this.checked,\n name: this.name,\n onChange: () => this.handleChange(),\n };\n }\n return {\n onClick: () => this.handleClick(),\n };\n }\n\n render() {\n const inputAttributes = this.renderInputAttributes();\n\n return (\n <Host>\n <div class=\"component\">\n <div class={`sdds-chip-component ${this.size}`}>\n <input type={this.type} id={this.chipId} {...inputAttributes}></input>\n <label htmlFor={this.chipId}>\n <slot name=\"label\" />\n </label>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}