@otto-de/b2b-core-components 1.8.0 → 1.8.2

package/dist/cjs/shadow-css-163d1bb0.js

@@ -1,451 +0,0 @@
-'use strict';
-
-/*
- Stencil Client Platform v4.7.0 | MIT Licensed | https://stenciljs.com
- */
-/**
- * @license
- * Copyright Google Inc. All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- *
- * This file is a port of shadowCSS from `webcomponents.js` to TypeScript.
- * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
- * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
- */
-const safeSelector = (selector) => {
-    const placeholders = [];
-    let index = 0;
-    // Replaces attribute selectors with placeholders.
-    // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
-    selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
-        const replaceBy = `__ph-${index}__`;
-        placeholders.push(keep);
-        index++;
-        return replaceBy;
-    });
-    // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
-    // WS and "+" would otherwise be interpreted as selector separators.
-    const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
-        const replaceBy = `__ph-${index}__`;
-        placeholders.push(exp);
-        index++;
-        return pseudo + replaceBy;
-    });
-    const ss = {
-        content,
-        placeholders,
-    };
-    return ss;
-};
-const restoreSafeSelector = (placeholders, content) => {
-    return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
-};
-const _polyfillHost = '-shadowcsshost';
-const _polyfillSlotted = '-shadowcssslotted';
-// note: :host-context pre-processed to -shadowcsshostcontext.
-const _polyfillHostContext = '-shadowcsscontext';
-const _parenSuffix = ')(?:\\((' + '(?:\\([^)(]*\\)|[^)(]*)+?' + ')\\))?([^,{]*)';
-const _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
-const _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
-const _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');
-const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
-const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
-const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
-const _selectorReSuffix = '([>\\s~+[.,{:][\\s\\S]*)?$';
-const _polyfillHostRe = /-shadowcsshost/gim;
-/**
- * Little helper for generating a regex that will match a specified
- * CSS selector when that selector is _not_ a part of a `@supports` rule.
- *
- * The pattern will match the provided `selector` (i.e. ':host', ':host-context', etc.)
- * when that selector is not a part of a `@supports` selector rule _or_ if the selector
- * is a part of the rule's declaration.
- *
- * For instance, if we create the regex with the selector ':host-context':
- * - '@supports selector(:host-context())' will return no matches (starts with '@supports')
- * - '@supports selector(:host-context()) { :host-context() { ... }}' will match the second ':host-context' (part of declaration)
- * - ':host-context() { ... }' will match ':host-context' (selector is not a '@supports' rule)
- * - ':host() { ... }' will return no matches (selector doesn't match selector used to create regex)
- *
- * @param selector The CSS selector we want to match for replacement
- * @returns A look-behind regex containing the selector
- */
-const createSupportsRuleRe = (selector) => new RegExp(`((?<!(^@supports(.*)))|(?<=\{.*))(${selector}\\b)`, 'gim');
-const _colonSlottedRe = createSupportsRuleRe('::slotted');
-const _colonHostRe = createSupportsRuleRe(':host');
-const _colonHostContextRe = createSupportsRuleRe(':host-context');
-const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
-const stripComments = (input) => {
-    return input.replace(_commentRe, '');
-};
-const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
-const extractCommentsWithHash = (input) => {
-    return input.match(_commentWithHashRe) || [];
-};
-const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
-const _curlyRe = /([{}])/g;
-const _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
-const OPEN_CURLY = '{';
-const CLOSE_CURLY = '}';
-const BLOCK_PLACEHOLDER = '%BLOCK%';
-const processRules = (input, ruleCallback) => {
-    const inputWithEscapedBlocks = escapeBlocks(input);
-    let nextBlockIndex = 0;
-    return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
-        const selector = m[2];
-        let content = '';
-        let suffix = m[4];
-        let contentPrefix = '';
-        if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
-            content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
-            suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
-            contentPrefix = '{';
-        }
-        const cssRule = {
-            selector,
-            content,
-        };
-        const rule = ruleCallback(cssRule);
-        return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
-    });
-};
-const escapeBlocks = (input) => {
-    const inputParts = input.split(_curlyRe);
-    const resultParts = [];
-    const escapedBlocks = [];
-    let bracketCount = 0;
-    let currentBlockParts = [];
-    for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
-        const part = inputParts[partIndex];
-        if (part === CLOSE_CURLY) {
-            bracketCount--;
-        }
-        if (bracketCount > 0) {
-            currentBlockParts.push(part);
-        }
-        else {
-            if (currentBlockParts.length > 0) {
-                escapedBlocks.push(currentBlockParts.join(''));
-                resultParts.push(BLOCK_PLACEHOLDER);
-                currentBlockParts = [];
-            }
-            resultParts.push(part);
-        }
-        if (part === OPEN_CURLY) {
-            bracketCount++;
-        }
-    }
-    if (currentBlockParts.length > 0) {
-        escapedBlocks.push(currentBlockParts.join(''));
-        resultParts.push(BLOCK_PLACEHOLDER);
-    }
-    const strEscapedBlocks = {
-        escapedString: resultParts.join(''),
-        blocks: escapedBlocks,
-    };
-    return strEscapedBlocks;
-};
-/**
- * Replaces certain strings within the CSS with placeholders
- * that will later be replaced with class selectors appropriate
- * for the level of encapsulation (shadow or scoped).
- *
- * When performing these replacements, we want to ignore selectors that are a
- * part of an `@supports` rule. Replacing these selectors will result in invalid
- * CSS that gets passed to autoprefixer/postcss once the placeholders are replaced.
- * For example, a rule like:
- *
- * ```css
- * @supports selector(:host()) {
- *   :host {
- *     color: red;
- *   }
- * }
- * ```
- *
- * Should be converted to:
- *
- * ```css
- * @supports selector(:host()) {
- *   -shadowcsshost {
- *     color: red;
- *   }
- * }
- * ```
- *
- * The order the regex replacements happen in matters since we match
- * against a whole selector word so we need to match all of `:host-context`
- * before we try to replace `:host`. Otherwise the pattern for `:host` would match
- * `:host-context` resulting in something like `:-shadowcsshost-context`.
- *
- * @param cssText A CSS string for a component
- * @returns The modified CSS string
- */
-const insertPolyfillHostInCssText = (cssText) => {
-    // These replacements use a special syntax with the `$1`. When the replacement
-    // occurs, `$1` maps to the content of the string leading up to the selector
-    // to be replaced.
-    //
-    // Otherwise, we will replace all the preceding content in addition to the
-    // selector because of the lookbehind in the regex.
-    //
-    // e.g. `/*!@___0___*/:host {}` => `/*!@___0___*/--shadowcsshost {}`
-    cssText = cssText
-        .replace(_colonHostContextRe, `$1${_polyfillHostContext}`)
-        .replace(_colonHostRe, `$1${_polyfillHost}`)
-        .replace(_colonSlottedRe, `$1${_polyfillSlotted}`);
-    return cssText;
-};
-const convertColonRule = (cssText, regExp, partReplacer) => {
-    // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
-    return cssText.replace(regExp, (...m) => {
-        if (m[2]) {
-            const parts = m[2].split(',');
-            const r = [];
-            for (let i = 0; i < parts.length; i++) {
-                const p = parts[i].trim();
-                if (!p)
-                    break;
-                r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
-            }
-            return r.join(',');
-        }
-        else {
-            return _polyfillHostNoCombinator + m[3];
-        }
-    });
-};
-const colonHostPartReplacer = (host, part, suffix) => {
-    return host + part.replace(_polyfillHost, '') + suffix;
-};
-const convertColonHost = (cssText) => {
-    return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
-};
-const colonHostContextPartReplacer = (host, part, suffix) => {
-    if (part.indexOf(_polyfillHost) > -1) {
-        return colonHostPartReplacer(host, part, suffix);
-    }
-    else {
-        return host + part + suffix + ', ' + part + ' ' + host + suffix;
-    }
-};
-const convertColonSlotted = (cssText, slotScopeId) => {
-    const slotClass = '.' + slotScopeId + ' > ';
-    const selectors = [];
-    cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
-        if (m[2]) {
-            const compound = m[2].trim();
-            const suffix = m[3];
-            const slottedSelector = slotClass + compound + suffix;
-            let prefixSelector = '';
-            for (let i = m[4] - 1; i >= 0; i--) {
-                const char = m[5][i];
-                if (char === '}' || char === ',') {
-                    break;
-                }
-                prefixSelector = char + prefixSelector;
-            }
-            const orgSelector = prefixSelector + slottedSelector;
-            const addedSelector = `${prefixSelector.trimRight()}${slottedSelector.trim()}`;
-            if (orgSelector.trim() !== addedSelector.trim()) {
-                const updatedSelector = `${addedSelector}, ${orgSelector}`;
-                selectors.push({
-                    orgSelector,
-                    updatedSelector,
-                });
-            }
-            return slottedSelector;
-        }
-        else {
-            return _polyfillHostNoCombinator + m[3];
-        }
-    });
-    return {
-        selectors,
-        cssText,
-    };
-};
-const convertColonHostContext = (cssText) => {
-    return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
-};
-const convertShadowDOMSelectors = (cssText) => {
-    return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
-};
-const makeScopeMatcher = (scopeSelector) => {
-    const lre = /\[/g;
-    const rre = /\]/g;
-    scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
-    return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
-};
-const selectorNeedsScoping = (selector, scopeSelector) => {
-    const re = makeScopeMatcher(scopeSelector);
-    return !re.test(selector);
-};
-const injectScopingSelector = (selector, scopingSelector) => {
-    return selector.replace(_selectorPartsRe, (_, before = '', _colonGroup, colon = '', after = '') => {
-        return before + scopingSelector + colon + after;
-    });
-};
-const applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {
-    // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
-    _polyfillHostRe.lastIndex = 0;
-    if (_polyfillHostRe.test(selector)) {
-        const replaceBy = `.${hostSelector}`;
-        return selector
-            .replace(_polyfillHostNoCombinatorRe, (_, selector) => injectScopingSelector(selector, replaceBy))
-            .replace(_polyfillHostRe, replaceBy + ' ');
-    }
-    return scopeSelector + ' ' + selector;
-};
-const applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {
-    const isRe = /\[is=([^\]]*)\]/g;
-    scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);
-    const className = '.' + scopeSelector;
-    const _scopeSelectorPart = (p) => {
-        let scopedP = p.trim();
-        if (!scopedP) {
-            return '';
-        }
-        if (p.indexOf(_polyfillHostNoCombinator) > -1) {
-            scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);
-        }
-        else {
-            // remove :host since it should be unnecessary
-            const t = p.replace(_polyfillHostRe, '');
-            if (t.length > 0) {
-                scopedP = injectScopingSelector(t, className);
-            }
-        }
-        return scopedP;
-    };
-    const safeContent = safeSelector(selector);
-    selector = safeContent.content;
-    let scopedSelector = '';
-    let startIndex = 0;
-    let res;
-    const sep = /( |>|\+|~(?!=))\s*/g;
-    // If a selector appears before :host it should not be shimmed as it
-    // matches on ancestor elements and not on elements in the host's shadow
-    // `:host-context(div)` is transformed to
-    // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`
-    // the `div` is not part of the component in the 2nd selectors and should not be scoped.
-    // Historically `component-tag:host` was matching the component so we also want to preserve
-    // this behavior to avoid breaking legacy apps (it should not match).
-    // The behavior should be:
-    // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)
-    // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a
-    //   `:host-context(tag)`)
-    const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
-    // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present
-    let shouldScope = !hasHost;
-    while ((res = sep.exec(selector)) !== null) {
-        const separator = res[1];
-        const part = selector.slice(startIndex, res.index).trim();
-        shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
-        const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;
-        scopedSelector += `${scopedPart} ${separator} `;
-        startIndex = sep.lastIndex;
-    }
-    const part = selector.substring(startIndex);
-    shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
-    scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
-    // replace the placeholders with their original values
-    return restoreSafeSelector(safeContent.placeholders, scopedSelector);
-};
-const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
-    return selector
-        .split(',')
-        .map((shallowPart) => {
-        if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {
-            return shallowPart.trim();
-        }
-        if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
-            return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
-        }
-        else {
-            return shallowPart.trim();
-        }
-    })
-        .join(', ');
-};
-const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
-    return processRules(cssText, (rule) => {
-        let selector = rule.selector;
-        let content = rule.content;
-        if (rule.selector[0] !== '@') {
-            selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
-        }
-        else if (rule.selector.startsWith('@media') ||
-            rule.selector.startsWith('@supports') ||
-            rule.selector.startsWith('@page') ||
-            rule.selector.startsWith('@document')) {
-            content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
-        }
-        const cssRule = {
-            selector: selector.replace(/\s{2,}/g, ' ').trim(),
-            content,
-        };
-        return cssRule;
-    });
-};
-const scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {
-    cssText = insertPolyfillHostInCssText(cssText);
-    cssText = convertColonHost(cssText);
-    cssText = convertColonHostContext(cssText);
-    const slotted = convertColonSlotted(cssText, slotScopeId);
-    cssText = slotted.cssText;
-    cssText = convertShadowDOMSelectors(cssText);
-    if (scopeId) {
-        cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);
-    }
-    cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
-    cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 ');
-    return {
-        cssText: cssText.trim(),
-        slottedSelectors: slotted.selectors,
-    };
-};
-const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
-    const hostScopeId = scopeId + '-h';
-    const slotScopeId = scopeId + '-s';
-    const commentsWithHash = extractCommentsWithHash(cssText);
-    cssText = stripComments(cssText);
-    const orgSelectors = [];
-    if (commentOriginalSelector) {
-        const processCommentedSelector = (rule) => {
-            const placeholder = `/*!@___${orgSelectors.length}___*/`;
-            const comment = `/*!@${rule.selector}*/`;
-            orgSelectors.push({ placeholder, comment });
-            rule.selector = placeholder + rule.selector;
-            return rule;
-        };
-        cssText = processRules(cssText, (rule) => {
-            if (rule.selector[0] !== '@') {
-                return processCommentedSelector(rule);
-            }
-            else if (rule.selector.startsWith('@media') ||
-                rule.selector.startsWith('@supports') ||
-                rule.selector.startsWith('@page') ||
-                rule.selector.startsWith('@document')) {
-                rule.content = processRules(rule.content, processCommentedSelector);
-                return rule;
-            }
-            return rule;
-        });
-    }
-    const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);
-    cssText = [scoped.cssText, ...commentsWithHash].join('\n');
-    if (commentOriginalSelector) {
-        orgSelectors.forEach(({ placeholder, comment }) => {
-            cssText = cssText.replace(placeholder, comment);
-        });
-    }
-    scoped.slottedSelectors.forEach((slottedSelector) => {
-        cssText = cssText.replace(slottedSelector.orgSelector, slottedSelector.updatedSelector);
-    });
-    return cssText;
-};
-
-exports.scopeCss = scopeCss;

package/dist/cjs/table.types-308923fc.js

@@ -1,48 +0,0 @@
-'use strict';
-
-const TableSizes = {
-  EQUAL: 'equal',
-  EXPAND: 'expand',
-};
-const TableRowgroupTypes = {
-  HEADER: 'header',
-  BODY: 'body',
-  FOOTER: 'footer',
-};
-const ContentAlignment = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  CENTER: 'center',
-};
-const SortIconAlignment = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  CENTER: 'center',
-};
-const TableSortDirections = {
-  NOT: 'not-sorted',
-  ASC: 'ascending',
-  DESC: 'descending',
-};
-const TableAccordionRowTypes = {
-  PARENT: 'parent',
-  CHILD: 'child',
-  HEADER: 'header',
-};
-const TableCheckboxTypes = {
-  HEADER: 'header',
-  ROW: 'row',
-};
-const TableColourOptions = {
-  DEFAULT: 'default',
-  SELECTED: 'selected',
-  GROUP: 'group',
-};
-
-exports.ContentAlignment = ContentAlignment;
-exports.SortIconAlignment = SortIconAlignment;
-exports.TableAccordionRowTypes = TableAccordionRowTypes;
-exports.TableColourOptions = TableColourOptions;
-exports.TableRowgroupTypes = TableRowgroupTypes;
-exports.TableSizes = TableSizes;
-exports.TableSortDirections = TableSortDirections;

package/dist/esm/app-globals-0f993ce5.js

@@ -1,3 +0,0 @@
-const globalScripts = () => {};
-
-export { globalScripts as g };

package/dist/esm/b2b-button.entry.js

@@ -1,79 +0,0 @@
-import { r as registerInstance, h, e as Host, g as getElement } from './index-7788f606.js';
-
-const buttonCss = ":root,:host{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-table-expand-hover:#e6f4ff;--b2b-color-table-selected-hover:#e6f4ff;--b2b-color-table-selected-default:#cce9ff;--b2b-color-table-hover:#e6f4ff;--b2b-color-background-overlay-transparent-40:rgba(34, 34, 34, 0.25);--b2b-color-background-overlay-transparent-80:rgba(34, 34, 34, 0.5);--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-size-headline-line-height-400:var(--b2b-size-60);--b2b-size-headline-line-height-200:var(--b2b-size-45);--b2b-size-headline-line-height-100:var(--b2b-size-40);--b2b-size-headline-400:var(--b2b-size-60);--b2b-size-headline-200:var(--b2b-size-45);--b2b-size-headline-100:var(--b2b-size-40);--b2b-size-copy-line-height-300:var(--b2b-size-90);--b2b-size-copy-line-height-200:var(--b2b-size-60);--b2b-size-copy-line-height-125:var(--b2b-size-60);--b2b-size-copy-line-height-100:var(--b2b-size-53);--b2b-size-copy-line-height-75:var(--b2b-size-45);--b2b-size-copy-line-height-50:var(--b2b-size-40);--b2b-size-copy-300:var(--b2b-size-60);--b2b-size-copy-200:var(--b2b-size-45);--b2b-size-copy-125:var(--b2b-size-40);--b2b-size-copy-100:var(--b2b-size-35);--b2b-size-copy-50:var(--b2b-size-30);--b2b-size-border-no-radius-bottom:var(--b2b-size-7) var(--b2b-size-7) 0 0;--b2b-size-border-no-radius-top:0 0 var(--b2b-size-7) var(--b2b-size-7);--b2b-size-border-no-radius-right:var(--b2b-size-7) 0 0 var(--b2b-size-7);--b2b-size-border-no-radius-left:0 var(--b2b-size-7) var(--b2b-size-7) 0;--b2b-size-border-radius-100:var(--b2b-size-7);--b2b-size-border-width-150:var(--b2b-size-10);--b2b-size-border-width-100:var(--b2b-size-5);--b2b-size-border-width-50:var(--b2b-size-1);--b2b-size-padding-175:var(--b2b-size-80);--b2b-size-padding-150:var(--b2b-size-60);--b2b-size-padding-100:var(--b2b-size-40);--b2b-size-padding-50:var(--b2b-size-20);--b2b-size-space-300:var(--b2b-size-200);--b2b-size-space-250:var(--b2b-size-160);--b2b-size-space-200:var(--b2b-size-100);--b2b-size-space-175:var(--b2b-size-80);--b2b-size-space-150:var(--b2b-size-60);--b2b-size-space-100:var(--b2b-size-40);--b2b-size-space-75:var(--b2b-size-30);--b2b-size-space-50:var(--b2b-size-20);--b2b-size-space-25:var(--b2b-size-10);--b2b-size-icon-400:var(--b2b-size-120);--b2b-size-icon-200:var(--b2b-size-80);--b2b-size-icon-100:var(--b2b-size-60);--b2b-size-icon-50:var(--b2b-size-40);--b2b-color-table-expand-default:var(--b2b-color-grey-25);--b2b-color-icon-inverted:var(--b2b-color-white-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-black-100);--b2b-color-headline-inverted:var(--b2b-color-white-100);--b2b-color-headline-default:var(--b2b-color-black-100);--b2b-color-headline-title:var(--b2b-color-red-100);--b2b-color-copy-overlay:var(--b2b-color-white-100);--b2b-color-copy-inverted:var(--b2b-color-white-100);--b2b-color-copy-secondary:var(--b2b-color-grey-400);--b2b-color-copy-default:var(--b2b-color-black-100);--b2b-color-border-100:var(--b2b-color-grey-200);--b2b-color-background-overlay:var(--b2b-color-black-100);--b2b-color-background-card:var(--b2b-color-white-100);--b2b-color-background-box:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-25);--b2b-color-error-50:var(--b2b-color-red-50)}:root [data-theme=\"dark\"]{--b2b-size-200:5rem;--b2b-size-160:4rem;--b2b-size-150:3.75rem;--b2b-size-140:3.5rem;--b2b-size-120:3rem;--b2b-size-100:2.5rem;--b2b-size-90:2.25rem;--b2b-size-80:2rem;--b2b-size-70:1.75rem;--b2b-size-60:1.5rem;--b2b-size-55:1.375rem;--b2b-size-53:1.3125rem;--b2b-size-50:1.25rem;--b2b-size-45:1.125rem;--b2b-size-40:1rem;--b2b-size-35:0.875rem;--b2b-size-30:0.75rem;--b2b-size-25:0.625rem;--b2b-size-20:0.5rem;--b2b-size-15:0.375rem;--b2b-size-10:0.25rem;--b2b-size-7:0.1875rem;--b2b-size-5:0.125rem;--b2b-size-1:0.0625rem;--b2b-font-weight-bold:700;--b2b-font-weight-normal:400;--b2b-font-weight-thin:100;--b2b-font-family-default:OttoSans, Arial, Helvetica, sans-serif;--b2b-color-info-100:#003264;--b2b-color-info-50:#ccd6e0;--b2b-color-success-100:#326400;--b2b-color-success-50:#d6e0cc;--b2b-color-warning-100:#ffb432;--b2b-color-warning-50:#ffd998;--b2b-color-error-100:#e6344b;--b2b-color-primary:#d4021d;--b2b-color-red-200:#bb0004;--b2b-color-red-150:#e6344b;--b2b-color-red-100:#d4021d;--b2b-color-red-50:#ffdde3;--b2b-color-grey-400:#777777;--b2b-color-grey-300:#9e9e9e;--b2b-color-grey-250:#b1b1b1;--b2b-color-grey-200:#c4c4c4;--b2b-color-grey-150:#d5d5d5;--b2b-color-grey-100:#e6e6e6;--b2b-color-grey-50:#eeeeee;--b2b-color-grey-25:#f6f6f6;--b2b-color-white-100:#ffffff;--b2b-color-black-100:#222222;--b2b-color-black-50:#333333;--b2b-color-icon-inverted:var(--b2b-color-black-100);--b2b-color-icon-secondary:var(--b2b-color-grey-400);--b2b-color-icon-default:var(--b2b-color-white-100);--b2b-color-headline-inverted:var(--b2b-color-black-100);--b2b-color-headline-default:var(--b2b-color-white-100);--b2b-color-headline-title:var(--b2b-color-red-50);--b2b-color-copy-inverted:var(--b2b-color-black-100);--b2b-color-copy-secondary:var(--b2b-color-grey-100);--b2b-color-copy-default:var(--b2b-color-white-100);--b2b-color-border-100:var(--b2b-color-white-100);--b2b-color-background-page:var(--b2b-color-grey-100);--b2b-color-background-card:var(--b2b-color-black-50);--b2b-color-background-box:var(--b2b-color-black-50);--b2b-color-error-50:var(--b2b-color-red-50)}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf\");font-weight:normal;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf\") format(\"truetype\");font-weight:bold;font-style:normal}@font-face{font-family:OttoSans;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff\") format(\"woff\"), url(\"https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf\") format(\"truetype\");font-weight:100;font-style:normal}@font-face{font-family:ObcIcons;src:url(\"https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff\")}:root,:host{--b2b-border-radius:var(--b2b-size-border-radius-100);--b2b-button-secondary-background-color:var(--b2b-color-grey-50);--b2b-button-secondary-border-color:var(--b2b-color-grey-200);--b2b-button-secondary-hover-background-color:var(--b2b-color-grey-150);--b2b-border-right:1px solid var(--b2b-button-secondary-border-color)}:root [data-theme=dark],:host [data-theme=dark]{--b2b-button-secondary-background-color:var(--b2b-color-grey-300);--b2b-button-secondary-border-color:var(--b2b-color-grey-400);--b2b-button-secondary-hover-background-color:var(--b2b-color-grey-400)}:host button,:host a{align-items:center;height:2.25rem;box-sizing:border-box;display:inline-flex;margin:0;padding:0 var(--b2b-size-30);position:relative;text-align:center;text-decoration:none;user-select:none;cursor:pointer;font-family:var(--b2b-font-family-default);font-size:var(--b2b-size-copy-100);line-height:var(--b2b-size-copy-line-height-100);transition:background-color 0.3s ease;vertical-align:middle;border:none;border-radius:var(--b2b-border-radius)}:host button span,:host a span{display:flex;align-items:center}:host button.b2b-button--primary,:host a.b2b-button--primary{color:var(--b2b-color-white-100);background-color:var(--b2b-color-red-100);border:1px solid var(--b2b-color-red-100)}:host button.b2b-button--primary:hover,:host a.b2b-button--primary:hover{background-color:var(--b2b-color-red-200)}:host button.b2b-button--primary.loading::after,:host a.b2b-button--primary.loading::after{border:0.125rem solid rgba(255, 255, 255, 0.5);border-top:0.125rem solid var(--b2b-color-red-100)}:host button.b2b-button--secondary,:host a.b2b-button--secondary{color:var(--b2b-color-copy-default);background-color:var(--b2b-button-secondary-background-color);border:1px solid var(--b2b-button-secondary-border-color);border-right:var(--b2b-border-right)}:host button.b2b-button--secondary:hover,:host a.b2b-button--secondary:hover{background-color:var(--b2b-button-secondary-hover-background-color)}:host button.b2b-button--secondary.loading::after,:host a.b2b-button--secondary.loading::after{border:0.125rem solid rgba(51, 51, 51, 0.2);border-top:0.125rem solid var(--b2b-color-copy-default)}:host button:disabled,:host button.disabled,:host a:disabled,:host a.disabled{cursor:default;pointer-events:none;background-color:var(--b2b-color-grey-50);border:1px solid var(--b2b-color-grey-200);border-right:var(--b2b-border-right);color:var(--b2b-color-grey-250)}:host button:disabled [slot=start],:host button:disabled [slot=end],:host button.disabled [slot=start],:host button.disabled [slot=end],:host a:disabled [slot=start],:host a:disabled [slot=end],:host a.disabled [slot=start],:host a.disabled [slot=end]{fill:var(--b2b-color-grey-250)}:host button:focus,:host a:focus{z-index:10}:host(.b2b-button--loading) button,:host(.b2b-button--loading) a{color:transparent;position:relative;cursor:default;pointer-events:none}:host(.b2b-button--loading).b2b-button--primary::after,:host(.b2b-button--loading).b2b-button--primary:hover{color:var(--b2b-color-white-100)}:host(.b2b-button--loading).b2b-button--secondary::after,:host(.b2b-button--loading).b2b-button--secondary:hover{color:var(--b2b-color-copy-default)}:host(.b2b-button--loading) .b2b-button__spinner{box-sizing:border-box;display:inline;position:absolute !important;top:50%;left:50%;margin-top:-0.625rem;margin-left:-0.625rem}:host(.b2b-button--loading) [slot=start],:host(.b2b-button--loading) [slot=end]{visibility:hidden}:host(.b2b-button--50) button,:host(.b2b-button--50) a{height:1.875rem;max-width:100%}:host(.b2b-button--100) button,:host(.b2b-button--100) a{height:2.25rem}:host(.b2b-button--active) button,:host(.b2b-button--active) a{background-color:var(--b2b-color-black-100);color:var(--b2b-color-white-100);border:1px solid var(--b2b-button-secondary-border-color);border-right:var(--b2b-border-right)}:host(.b2b-button--active) button:hover,:host(.b2b-button--active) a:hover{background-color:var(--b2b-color-black-100)}:host(.b2b-button--icon-only) button,:host(.b2b-button--icon-only) a{padding:0 var(--b2b-size-20)}::slotted(*[slot=start]){margin-right:var(--b2b-size-10)}::slotted(*[slot=end]){margin-left:var(--b2b-size-10)}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";
-
-const ButtonComponent = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.canLoad = () => {
-      return this.disabled === false && this.loading;
-    };
-    this.checkIcon = () => {
-      const children = Array.from(this.hostElement.children);
-      if (children.length === 1) {
-        // even no chars or child nodes will return white space, so we need to trim
-        if (this.hostElement.textContent.trim().length === 0) {
-          if (children[0].tagName.toLowerCase() === 'b2b-icon') {
-            return true;
-          }
-          else if (children[0].tagName.toLowerCase() === 'i') {
-            return true;
-          }
-        }
-      }
-      return false;
-    };
-    this.variant = 'secondary';
-    this.type = 'button';
-    this.size = '100';
-    this.disabled = false;
-    this.loading = false;
-    this.active = false;
-    this.href = undefined;
-    this.target = 'self';
-    this.download = undefined;
-    this.groupDisabled = false;
-  }
-  /** Manually set focus to button element */
-  async setFocus() {
-    this.focusableElement.focus();
-  }
-  /**
-   * Prevent clicks from being emitted from the host
-   * when the component is `disabled`. (Taken from Telecom)
-   */
-  handleHostClick(event) {
-    if (this.disabled === true || this.loading === true) {
-      event.stopImmediatePropagation();
-    }
-    // Triggers a submit event on the parent form in the light DOM
-    const form = this.hostElement.closest('form');
-    if (form != null && this.type === 'submit') {
-      const fakeSubmit = document.createElement('button');
-      fakeSubmit.type = 'submit';
-      fakeSubmit.style.display = 'none';
-      form.appendChild(fakeSubmit);
-      fakeSubmit.click();
-      fakeSubmit.remove();
-    }
-  }
-  spinner() {
-    const spinnerColor = this.variant === 'primary' ? 'inverse' : 'secondary';
-    return (h("div", { class: "b2b-button__spinner" }, h("b2b-spinner", { color: spinnerColor, size: "50" })));
-  }
-  render() {
-    return (h(Host, { class: {
-        [`b2b-button--loading`]: this.canLoad(),
-        [`b2b-button--${this.size}`]: true,
-        [`b2b-button--active`]: this.active,
-        [`b2b-button--icon-only`]: this.checkIcon(),
-      } }, this.href !== undefined ? (h("a", { href: this.href, target: `_${this.target}`, download: this.download, class: {
-        disabled: this.disabled || this.groupDisabled,
-        [`b2b-button--${this.variant}`]: true,
-      }, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null)) : (h("button", { disabled: this.disabled || this.groupDisabled, class: { [`b2b-button--${this.variant}`]: true }, type: this.type, ref: el => (this.focusableElement = el) }, h("span", null, h("slot", { name: "start" }), h("slot", null), h("slot", { name: "end" })), this.canLoad() ? this.spinner() : null))));
-  }
-  get hostElement() { return getElement(this); }
-};
-ButtonComponent.style = buttonCss;
-
-export { ButtonComponent as b2b_button };