@six-group/ui-library 0.0.0-insider.77a508a → 0.0.0-insider.79a0d1c

package/dist/collection/functional-components/form-control/form-control.js

@@ -2,8 +2,8 @@ import { h } from "@stencil/core";
 const FormControl = (props, children) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const errorMessages = (Array.isArray(props.errorText) ? props.errorText : [props.errorText]).filter((text) => text != null && text.trim() !== '');
-    const hasLabel = props.label != null && props.label.trim() !== '' ? true : (_a = props.hasLabelSlot) !== null && _a !== void 0 ? _a : false;
-    const hasHelpText = props.helpText != null && props.helpText.trim() !== '' ? true : (_b = props.hasHelpTextSlot) !== null && _b !== void 0 ? _b : false;
+    const hasLabel = props.label != null && props.label.trim() !== '' ? true : ((_a = props.hasLabelSlot) !== null && _a !== void 0 ? _a : false);
+    const hasHelpText = props.helpText != null && props.helpText.trim() !== '' ? true : ((_b = props.hasHelpTextSlot) !== null && _b !== void 0 ? _b : false);
     const hasErrorText = (errorMessages.length > 0 || ((_c = props.hasErrorTextSlot) !== null && _c !== void 0 ? _c : false)) && ((_d = props.displayError) !== null && _d !== void 0 ? _d : false);
     return (h("div", { part: "form-control", class: {
             'form-control': true,

package/dist/collection/functional-components/form-control/form-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/functional-components/form-control/form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, VNode } from '@stencil/core';\n\nexport interface FormControlProps {\n  /** The input id, used to map the input to the label */\n  inputId: string;\n\n  /** The size of the form control */\n  size: 'small' | 'medium' | 'large';\n\n  /** The label id, used to map the label to the input */\n  labelId?: string;\n\n  /** The label text (if the label slot isn't used) */\n  label?: string;\n\n  /** Whether a label slot has been provided. */\n  hasLabelSlot?: boolean;\n\n  /** The help text id, used to map the input to the help text */\n  helpTextId?: string;\n\n  /** The help text (if the help-text slot isn't used) */\n  helpText?: string;\n\n  /** Whether a help text slot has been provided. */\n  hasHelpTextSlot?: boolean;\n\n  /** Whether an error text slot has been provided. */\n  hasErrorTextSlot?: boolean;\n\n  /** The error text id, used to map the input to the help text */\n  errorTextId?: string;\n\n  /** The error text (if the error-text slot isn't used) */\n  errorText?: string | string[];\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  errorTextCount?: number;\n\n  /** Set to true to disable the input. */\n  disabled?: boolean;\n\n  /** Set if the value is required. */\n  required?: boolean;\n\n  /** Set if the error text is displayed. */\n  displayError?: boolean;\n\n  /** A function that gets called when the label is clicked. */\n  onLabelClick?: (event: MouseEvent) => void;\n}\n\nconst FormControl = (props: FormControlProps, children: VNode[]) => {\n  const errorMessages = (Array.isArray(props.errorText) ? props.errorText : [props.errorText]).filter(\n    (text) => text != null && text.trim() !== ''\n  );\n\n  const hasLabel = props.label != null && props.label.trim() !== '' ? true : props.hasLabelSlot ?? false;\n  const hasHelpText = props.helpText != null && props.helpText.trim() !== '' ? true : props.hasHelpTextSlot ?? false;\n  const hasErrorText = (errorMessages.length > 0 || (props.hasErrorTextSlot ?? false)) && (props.displayError ?? false);\n\n  return (\n    <div\n      part=\"form-control\"\n      class={{\n        'form-control': true,\n        'form-control--small': props.size === 'small',\n        'form-control--medium': props.size === 'medium',\n        'form-control--large': props.size === 'large',\n        'form-control--has-label': hasLabel,\n        'form-control--has-help-text': hasHelpText,\n        'form-control--has-error-text': hasErrorText,\n        'form-control--disabled': props.disabled ?? false,\n        'form-control--invalid': (props.displayError ?? false) && !props.disabled,\n      }}\n    >\n      <label\n        part=\"label\"\n        id={props.labelId}\n        class={{\n          'form-control__label': true,\n          'form-control__label__required': props.required ?? false,\n        }}\n        htmlFor={props.inputId}\n        aria-hidden={hasLabel ? 'false' : 'true'}\n        onClick={props.onLabelClick}\n      >\n        <slot name=\"label\">{props.label}</slot>\n      </label>\n\n      <div class=\"form-control__input\">{children}</div>\n\n      <div\n        part=\"error-text\"\n        id={props.errorTextId}\n        class=\"form-control__error-text\"\n        aria-hidden={hasErrorText ? 'false' : 'true'}\n      >\n        <slot name=\"error-text\">\n          {errorMessages.slice(0, props.errorTextCount ?? 1).map((text) => (\n            <six-error>{text}</six-error>\n          ))}\n        </slot>\n      </div>\n\n      <div\n        part=\"help-text\"\n        id={props.helpTextId}\n        class=\"form-control__help-text\"\n        aria-hidden={hasHelpText ? 'false' : 'true'}\n      >\n        <slot name=\"help-text\">{props.helpText}</slot>\n      </div>\n    </div>\n  );\n};\n\nexport default FormControl;\n"]}
+{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/functional-components/form-control/form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, VNode } from '@stencil/core';\n\nexport interface FormControlProps {\n  /** The input id, used to map the input to the label */\n  inputId: string;\n\n  /** The size of the form control */\n  size: 'small' | 'medium' | 'large';\n\n  /** The label id, used to map the label to the input */\n  labelId?: string;\n\n  /** The label text (if the label slot isn't used) */\n  label?: string;\n\n  /** Whether a label slot has been provided. */\n  hasLabelSlot?: boolean;\n\n  /** The help text id, used to map the input to the help text */\n  helpTextId?: string;\n\n  /** The help text (if the help-text slot isn't used) */\n  helpText?: string;\n\n  /** Whether a help text slot has been provided. */\n  hasHelpTextSlot?: boolean;\n\n  /** Whether an error text slot has been provided. */\n  hasErrorTextSlot?: boolean;\n\n  /** The error text id, used to map the input to the help text */\n  errorTextId?: string;\n\n  /** The error text (if the error-text slot isn't used) */\n  errorText?: string | string[];\n\n  /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */\n  errorTextCount?: number;\n\n  /** Set to true to disable the input. */\n  disabled?: boolean;\n\n  /** Set if the value is required. */\n  required?: boolean;\n\n  /** Set if the error text is displayed. */\n  displayError?: boolean;\n\n  /** A function that gets called when the label is clicked. */\n  onLabelClick?: (event: MouseEvent) => void;\n}\n\nconst FormControl = (props: FormControlProps, children: VNode[]) => {\n  const errorMessages = (Array.isArray(props.errorText) ? props.errorText : [props.errorText]).filter(\n    (text) => text != null && text.trim() !== ''\n  );\n\n  const hasLabel = props.label != null && props.label.trim() !== '' ? true : (props.hasLabelSlot ?? false);\n  const hasHelpText = props.helpText != null && props.helpText.trim() !== '' ? true : (props.hasHelpTextSlot ?? false);\n  const hasErrorText = (errorMessages.length > 0 || (props.hasErrorTextSlot ?? false)) && (props.displayError ?? false);\n\n  return (\n    <div\n      part=\"form-control\"\n      class={{\n        'form-control': true,\n        'form-control--small': props.size === 'small',\n        'form-control--medium': props.size === 'medium',\n        'form-control--large': props.size === 'large',\n        'form-control--has-label': hasLabel,\n        'form-control--has-help-text': hasHelpText,\n        'form-control--has-error-text': hasErrorText,\n        'form-control--disabled': props.disabled ?? false,\n        'form-control--invalid': (props.displayError ?? false) && !props.disabled,\n      }}\n    >\n      <label\n        part=\"label\"\n        id={props.labelId}\n        class={{\n          'form-control__label': true,\n          'form-control__label__required': props.required ?? false,\n        }}\n        htmlFor={props.inputId}\n        aria-hidden={hasLabel ? 'false' : 'true'}\n        onClick={props.onLabelClick}\n      >\n        <slot name=\"label\">{props.label}</slot>\n      </label>\n\n      <div class=\"form-control__input\">{children}</div>\n\n      <div\n        part=\"error-text\"\n        id={props.errorTextId}\n        class=\"form-control__error-text\"\n        aria-hidden={hasErrorText ? 'false' : 'true'}\n      >\n        <slot name=\"error-text\">\n          {errorMessages.slice(0, props.errorTextCount ?? 1).map((text) => (\n            <six-error>{text}</six-error>\n          ))}\n        </slot>\n      </div>\n\n      <div\n        part=\"help-text\"\n        id={props.helpTextId}\n        class=\"form-control__help-text\"\n        aria-hidden={hasHelpText ? 'false' : 'true'}\n      >\n        <slot name=\"help-text\">{props.helpText}</slot>\n      </div>\n    </div>\n  );\n};\n\nexport default FormControl;\n"]}

package/dist/collection/index.js

@@ -1,3 +1,4 @@
 export * from './utils/error-messages';
 export * from './utils/alert';
+export * from './utils/icon';
 //# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport * from './utils/error-messages';\nexport * from './utils/alert';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AACvC,cAAc,eAAe,CAAC;AAE9B,cAAc,cAAc,CAAC","sourcesContent":["export { Components, JSX } from './components';\nexport * from './utils/error-messages';\nexport * from './utils/alert';\n\nexport * from './utils/icon';\n"]}

package/dist/collection/utils/animation.js

@@ -31,4 +31,17 @@ export function flipAnimate(element, fromElement, options = {
         },
     ], options);
 }
+/**
+ * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
+ */
+export function animateTo(el, keyframes, options) {
+    return new Promise((resolve) => {
+        if ((options === null || options === void 0 ? void 0 : options.duration) === Infinity) {
+            throw new Error('Promise-based animations must be finite.');
+        }
+        const animation = el.animate(keyframes, Object.assign(Object.assign({}, options), { duration: options.duration }));
+        animation.addEventListener('cancel', resolve, { once: true });
+        animation.addEventListener('finish', resolve, { once: true });
+    });
+}
 //# sourceMappingURL=animation.js.map

package/dist/collection/utils/animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation.js","sourceRoot":"","sources":["../../src/utils/animation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,WAAW,CACzB,OAAgB,EAChB,WAAoB,EACpB,UAAoC;IAClC,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,MAAM;IACd,IAAI,EAAE,MAAM;CACb;IAED,MAAM,YAAY,GAAG,WAAW,CAAC,qBAAqB,EAAE,CAAC;IACzD,MAAM,cAAc,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAEvD,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC;IACvD,MAAM,MAAM,GAAG,YAAY,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC;IACrD,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC;IACzD,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;IAE3D,OAAO,CAAC,OAAO,CACb;QACE;YACE,eAAe,EAAE,UAAU;YAC3B,SAAS,EAAE,aAAa,MAAM,OAAO,MAAM,aAAa,MAAM,KAAK,MAAM,GAAG;SAC7E;QACD;YACE,eAAe,EAAE,UAAU;YAC3B,SAAS,EAAE,MAAM;SAClB;KACF,EACD,OAAO,CACR,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Animates a given `element` from the position and dimension of `fromElement` to\n * its current position and dimension. Can be useful to implement the FLIP animation technique.\n *\n * @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.\n *\n * @param {Element} element - The element to animate.\n * @param {Element} fromElement - The element representing the initial position and dimensions.\n * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.\n *\n */\nexport function flipAnimate(\n  element: Element,\n  fromElement: Element,\n  options: KeyframeAnimationOptions = {\n    duration: 150,\n    easing: 'ease',\n    fill: 'both',\n  }\n) {\n  const dimensionsTo = fromElement.getBoundingClientRect();\n  const dimensionsFrom = element.getBoundingClientRect();\n\n  const deltaX = dimensionsTo.left - dimensionsFrom.left;\n  const deltaY = dimensionsTo.top - dimensionsFrom.top;\n  const deltaW = dimensionsTo.width / dimensionsFrom.width;\n  const deltaH = dimensionsTo.height / dimensionsFrom.height;\n\n  element.animate(\n    [\n      {\n        transformOrigin: 'top left',\n        transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,\n      },\n      {\n        transformOrigin: 'top left',\n        transform: 'none',\n      },\n    ],\n    options\n  );\n}\n"]}
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["../../src/utils/animation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,WAAW,CACzB,OAAgB,EAChB,WAAoB,EACpB,UAAoC;IAClC,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,MAAM;IACd,IAAI,EAAE,MAAM;CACb;IAED,MAAM,YAAY,GAAG,WAAW,CAAC,qBAAqB,EAAE,CAAC;IACzD,MAAM,cAAc,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAEvD,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,GAAG,cAAc,CAAC,IAAI,CAAC;IACvD,MAAM,MAAM,GAAG,YAAY,CAAC,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC;IACrD,MAAM,MAAM,GAAG,YAAY,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC;IACzD,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;IAE3D,OAAO,CAAC,OAAO,CACb;QACE;YACE,eAAe,EAAE,UAAU;YAC3B,SAAS,EAAE,aAAa,MAAM,OAAO,MAAM,aAAa,MAAM,KAAK,MAAM,GAAG;SAC7E;QACD;YACE,eAAe,EAAE,UAAU;YAC3B,SAAS,EAAE,MAAM;SAClB;KACF,EACD,OAAO,CACR,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EAAe,EAAE,SAAqB,EAAE,OAAkC;IAClG,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;QAC7B,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,MAAK,QAAQ,EAAE,CAAC;YACnC,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;QAC9D,CAAC;QAED,MAAM,SAAS,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,kCACjC,OAAO,KACV,QAAQ,EAAE,OAAQ,CAAC,QAAQ,IAC3B,CAAC;QAEH,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["/**\n * Animates a given `element` from the position and dimension of `fromElement` to\n * its current position and dimension. Can be useful to implement the FLIP animation technique.\n *\n * @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.\n *\n * @param {Element} element - The element to animate.\n * @param {Element} fromElement - The element representing the initial position and dimensions.\n * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.\n *\n */\nexport function flipAnimate(\n  element: Element,\n  fromElement: Element,\n  options: KeyframeAnimationOptions = {\n    duration: 150,\n    easing: 'ease',\n    fill: 'both',\n  }\n) {\n  const dimensionsTo = fromElement.getBoundingClientRect();\n  const dimensionsFrom = element.getBoundingClientRect();\n\n  const deltaX = dimensionsTo.left - dimensionsFrom.left;\n  const deltaY = dimensionsTo.top - dimensionsFrom.top;\n  const deltaW = dimensionsTo.width / dimensionsFrom.width;\n  const deltaH = dimensionsTo.height / dimensionsFrom.height;\n\n  element.animate(\n    [\n      {\n        transformOrigin: 'top left',\n        transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,\n      },\n      {\n        transformOrigin: 'top left',\n        transform: 'none',\n      },\n    ],\n    options\n  );\n}\n\n/**\n * Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.\n */\nexport function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions) {\n  return new Promise((resolve) => {\n    if (options?.duration === Infinity) {\n      throw new Error('Promise-based animations must be finite.');\n    }\n\n    const animation = el.animate(keyframes, {\n      ...options,\n      duration: options!.duration,\n    });\n\n    animation.addEventListener('cancel', resolve, { once: true });\n    animation.addEventListener('finish', resolve, { once: true });\n  });\n}\n"]}

package/dist/collection/utils/error-messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"error-messages.js","sourceRoot":"","sources":["../../src/utils/error-messages.ts"],"names":[],"mappings":"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","sourcesContent":["import { IsoDate } from '../components/six-date/iso-date';\n\nexport const languages = ['de', 'fr', 'it', 'en', 'es'] as const;\nexport type Language = (typeof languages)[number];\n\nconst dateFormat = new Intl.DateTimeFormat('de-CH');\n\nexport type ValidationError =\n  | { key: 'required' }\n  | { key: 'requiredtrue' }\n  | { key: 'email'; requiredPattern: string }\n  | { key: 'minlength'; requiredLength: number }\n  | { key: 'maxlength'; requiredLength: number }\n  | { key: 'pattern'; requiredPattern: string }\n  | { key: 'min'; min: number }\n  | { key: 'max'; max: number }\n  | { key: 'mindate'; mindate: Date; actual: Date | IsoDate }\n  | { key: 'maxdate'; maxdate: Date; actual: Date | IsoDate }\n  | { key: 'invaliddate'; actual: Date }\n  | { key: 'custom'; text: string };\n\n/**\n * Returns an error message for the given language and error.\n */\nexport function getErrorMessage(language: Language, error: ValidationError): string | undefined {\n  try {\n    const message = translation[language][error.key];\n    switch (error.key) {\n      case 'required':\n      case 'requiredtrue':\n      case 'email':\n        return message;\n      case 'minlength':\n      case 'maxlength':\n        return message.replace('{requiredLength}', String(error.requiredLength));\n      case 'pattern':\n        return message.replace('{pattern}', String(error.requiredPattern));\n      case 'min':\n        return message.replace('{min}', String(error.min));\n      case 'max':\n        return message.replace('{max}', String(error.max));\n      case 'mindate':\n        return message.replace(\n          '{mindate}',\n          dateFormat.format(typeof error.mindate === 'string' ? new Date(error.mindate) : error.mindate)\n        );\n      case 'maxdate':\n        return message.replace(\n          '{maxdate}',\n          dateFormat.format(typeof error.maxdate === 'string' ? new Date(error.maxdate) : error.maxdate)\n        );\n      case 'invaliddate':\n        return message;\n      case 'custom':\n        return error.text;\n    }\n  } catch (e) {\n    console.warn(`no error message in '${language}' for error: ${error}`, e);\n\n    return undefined;\n  }\n}\n\nexport function getLanguage(): Language {\n  const documentLang = document.documentElement.lang as Language;\n  if (languages.includes(documentLang)) {\n    return documentLang;\n  }\n  return 'de';\n}\n\nconst translation: Record<Language, Record<string, string>> = {\n  en: {\n    required: 'Please fill out this field.',\n    minlength: 'Please enter at least {requiredLength} characters.',\n    maxlength: 'Please enter no more than {requiredLength} characters.',\n    pattern: 'Please enter a value that matches the pattern: {pattern}.',\n    email: 'Please enter a valid email address.',\n    min: 'Please enter a value greater than or equal to {min}.',\n    max: 'Please enter a value less than or equal to {max}.',\n    requiredtrue: 'Please check this field.',\n    mindate: 'Please enter a date on or after {mindate}.',\n    maxdate: 'Please enter a date on or before {maxdate}.',\n    invaliddate: 'Please enter a valid date.',\n  },\n  fr: {\n    required: \"Veuillez remplir ce champ s'il vous plaît.\",\n    minlength: 'Veuillez entrer au moins {requiredLength} caractères.',\n    maxlength: 'Veuillez entrer au maximum {requiredLength} caractères.',\n    pattern: 'Veuillez entrer une valeur qui correspond au format : {pattern}.',\n    email: 'Veuillez entrer une adresse email valide.',\n    min: 'Veuillez entrer une valeur supérieure ou égale à {min}.',\n    max: 'Veuillez entrer une valeur inférieure ou égale à {max}.',\n    requiredtrue: \"Veuillez cocher cette case s'il vous plaît.\",\n    mindate: 'Veuillez entrer une date le {mindate} ou après.',\n    maxdate: 'Veuillez entrer une date le {maxdate} ou avant.',\n    invaliddate: 'Veuillez entrer une date valide.',\n  },\n  de: {\n    required: 'Bitte füllen Sie dieses Feld aus.',\n    minlength: 'Bitte geben Sie mindestens {requiredLength} Zeichen ein.',\n    maxlength: 'Bitte geben Sie höchstens {requiredLength} Zeichen ein.',\n    pattern: 'Bitte geben Sie einen Wert ein, der dem Muster entspricht: {pattern}.',\n    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',\n    min: 'Bitte geben Sie einen Wert größer oder gleich {min} ein.',\n    max: 'Bitte geben Sie einen Wert kleiner oder gleich {max} ein.',\n    requiredtrue: 'Bitte aktivieren Sie dieses Feld.',\n    mindate: 'Bitte geben Sie ein Datum am oder nach dem {mindate} ein.',\n    maxdate: 'Bitte geben Sie ein Datum am oder vor dem {maxdate} ein.',\n    invaliddate: 'Bitte geben Sie ein gültiges Datum ein.',\n  },\n  it: {\n    required: 'Si prega di compilare questo campo.',\n    minlength: 'Si prega di inserire almeno {requiredLength} caratteri.',\n    maxlength: 'Si prega di inserire al massimo {requiredLength} caratteri.',\n    pattern: 'Si prega di inserire un valore che corrisponde al formato: {pattern}.',\n    email: 'Si prega di inserire un indirizzo email valido.',\n    min: 'Si prega di inserire un valore maggiore o uguale a {min}.',\n    max: 'Si prega di inserire un valore minore o uguale a {max}.',\n    requiredtrue: 'Si prega di spuntare questo campo.',\n    mindate: 'Si prega di inserire una data il {mindate} o successiva.',\n    maxdate: 'Si prega di inserire una data il {maxdate} o precedente.',\n    invaliddate: 'Inserisci una data valida.',\n  },\n\n  es: {\n    required: 'Por favor, rellene este campo.',\n    minlength: 'Por favor, introduzca al menos {requiredLength} caracteres.',\n    maxlength: 'Por favor, introduzca no más de {requiredLength} caracteres.',\n    pattern: 'Por favor, introduzca un valor que coincida con el patrón: {pattern}.',\n    email: 'Por favor, introduzca una dirección de correo electrónico válida.',\n    min: 'Por favor, introduzca un valor mayor o igual a {min}.',\n    max: 'Por favor, introduzca un valor menor o igual a {max}.',\n    requiredtrue: 'Por favor, marque este campo.',\n    mindate: 'Por favor, introduzca una fecha igual o posterior a {mindate}.',\n    maxdate: 'Por favor, introduzca una fecha igual o anterior a {maxdate}.',\n    invaliddate: 'Por favor, introduzca una fecha válida.',\n  },\n};\n"]}
+{"version":3,"file":"error-messages.js","sourceRoot":"","sources":["../../src/utils/error-messages.ts"],"names":[],"mappings":"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","sourcesContent":["export const languages = ['de', 'fr', 'it', 'en', 'es'] as const;\nexport type Language = (typeof languages)[number];\n\nconst dateFormat = new Intl.DateTimeFormat('de-CH');\n\nexport type ValidationError =\n  | { key: 'required' }\n  | { key: 'requiredtrue' }\n  | { key: 'email'; requiredPattern: string }\n  | { key: 'minlength'; requiredLength: number }\n  | { key: 'maxlength'; requiredLength: number }\n  | { key: 'pattern'; requiredPattern: string }\n  | { key: 'min'; min: number }\n  | { key: 'max'; max: number }\n  | { key: 'mindate'; mindate: Date; actual: Date | string }\n  | { key: 'maxdate'; maxdate: Date; actual: Date | string }\n  | { key: 'invaliddate'; actual: Date }\n  | { key: 'custom'; text: string };\n\n/**\n * Returns an error message for the given language and error.\n */\nexport function getErrorMessage(language: Language, error: ValidationError): string | undefined {\n  try {\n    const message = translation[language][error.key];\n    switch (error.key) {\n      case 'required':\n      case 'requiredtrue':\n      case 'email':\n        return message;\n      case 'minlength':\n      case 'maxlength':\n        return message.replace('{requiredLength}', String(error.requiredLength));\n      case 'pattern':\n        return message.replace('{pattern}', String(error.requiredPattern));\n      case 'min':\n        return message.replace('{min}', String(error.min));\n      case 'max':\n        return message.replace('{max}', String(error.max));\n      case 'mindate':\n        return message.replace(\n          '{mindate}',\n          dateFormat.format(typeof error.mindate === 'string' ? new Date(error.mindate) : error.mindate)\n        );\n      case 'maxdate':\n        return message.replace(\n          '{maxdate}',\n          dateFormat.format(typeof error.maxdate === 'string' ? new Date(error.maxdate) : error.maxdate)\n        );\n      case 'invaliddate':\n        return message;\n      case 'custom':\n        return error.text;\n    }\n  } catch (e) {\n    console.warn(`no error message in '${language}' for error: ${error}`, e);\n\n    return undefined;\n  }\n}\n\nexport function getLanguage(): Language {\n  const documentLang = document.documentElement.lang as Language;\n  if (languages.includes(documentLang)) {\n    return documentLang;\n  }\n  return 'de';\n}\n\nconst translation: Record<Language, Record<string, string>> = {\n  en: {\n    required: 'Please fill out this field.',\n    minlength: 'Please enter at least {requiredLength} characters.',\n    maxlength: 'Please enter no more than {requiredLength} characters.',\n    pattern: 'Please enter a value that matches the pattern: {pattern}.',\n    email: 'Please enter a valid email address.',\n    min: 'Please enter a value greater than or equal to {min}.',\n    max: 'Please enter a value less than or equal to {max}.',\n    requiredtrue: 'Please check this field.',\n    mindate: 'Please enter a date on or after {mindate}.',\n    maxdate: 'Please enter a date on or before {maxdate}.',\n    invaliddate: 'Please enter a valid date.',\n  },\n  fr: {\n    required: \"Veuillez remplir ce champ s'il vous plaît.\",\n    minlength: 'Veuillez entrer au moins {requiredLength} caractères.',\n    maxlength: 'Veuillez entrer au maximum {requiredLength} caractères.',\n    pattern: 'Veuillez entrer une valeur qui correspond au format : {pattern}.',\n    email: 'Veuillez entrer une adresse email valide.',\n    min: 'Veuillez entrer une valeur supérieure ou égale à {min}.',\n    max: 'Veuillez entrer une valeur inférieure ou égale à {max}.',\n    requiredtrue: \"Veuillez cocher cette case s'il vous plaît.\",\n    mindate: 'Veuillez entrer une date le {mindate} ou après.',\n    maxdate: 'Veuillez entrer une date le {maxdate} ou avant.',\n    invaliddate: 'Veuillez entrer une date valide.',\n  },\n  de: {\n    required: 'Bitte füllen Sie dieses Feld aus.',\n    minlength: 'Bitte geben Sie mindestens {requiredLength} Zeichen ein.',\n    maxlength: 'Bitte geben Sie höchstens {requiredLength} Zeichen ein.',\n    pattern: 'Bitte geben Sie einen Wert ein, der dem Muster entspricht: {pattern}.',\n    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',\n    min: 'Bitte geben Sie einen Wert größer oder gleich {min} ein.',\n    max: 'Bitte geben Sie einen Wert kleiner oder gleich {max} ein.',\n    requiredtrue: 'Bitte aktivieren Sie dieses Feld.',\n    mindate: 'Bitte geben Sie ein Datum am oder nach dem {mindate} ein.',\n    maxdate: 'Bitte geben Sie ein Datum am oder vor dem {maxdate} ein.',\n    invaliddate: 'Bitte geben Sie ein gültiges Datum ein.',\n  },\n  it: {\n    required: 'Si prega di compilare questo campo.',\n    minlength: 'Si prega di inserire almeno {requiredLength} caratteri.',\n    maxlength: 'Si prega di inserire al massimo {requiredLength} caratteri.',\n    pattern: 'Si prega di inserire un valore che corrisponde al formato: {pattern}.',\n    email: 'Si prega di inserire un indirizzo email valido.',\n    min: 'Si prega di inserire un valore maggiore o uguale a {min}.',\n    max: 'Si prega di inserire un valore minore o uguale a {max}.',\n    requiredtrue: 'Si prega di spuntare questo campo.',\n    mindate: 'Si prega di inserire una data il {mindate} o successiva.',\n    maxdate: 'Si prega di inserire una data il {maxdate} o precedente.',\n    invaliddate: 'Inserisci una data valida.',\n  },\n\n  es: {\n    required: 'Por favor, rellene este campo.',\n    minlength: 'Por favor, introduzca al menos {requiredLength} caracteres.',\n    maxlength: 'Por favor, introduzca no más de {requiredLength} caracteres.',\n    pattern: 'Por favor, introduzca un valor que coincida con el patrón: {pattern}.',\n    email: 'Por favor, introduzca una dirección de correo electrónico válida.',\n    min: 'Por favor, introduzca un valor mayor o igual a {min}.',\n    max: 'Por favor, introduzca un valor menor o igual a {max}.',\n    requiredtrue: 'Por favor, marque este campo.',\n    mindate: 'Por favor, introduzca una fecha igual o posterior a {mindate}.',\n    maxdate: 'Por favor, introduzca una fecha igual o anterior a {maxdate}.',\n    invaliddate: 'Por favor, introduzca una fecha válida.',\n  },\n};\n"]}

package/dist/collection/utils/icon.js

@@ -0,0 +1,10 @@
+let defaultLibrary = 'material-icons';
+/** Sets the global default for all <six-icon> instances that don't specify `library`. */
+export function setDefaultIconLibrary(lib) {
+    defaultLibrary = lib;
+}
+/** Returns the global default (fallback is 'material-icons'). */
+export function getDefaultIconLibrary() {
+    return defaultLibrary;
+}
+//# sourceMappingURL=icon.js.map

package/dist/collection/utils/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/utils/icon.ts"],"names":[],"mappings":"AAEA,IAAI,cAAc,GAAgB,gBAAgB,CAAC;AAEnD,yFAAyF;AACzF,MAAM,UAAU,qBAAqB,CAAC,GAAgB;IACpD,cAAc,GAAG,GAAG,CAAC;AACvB,CAAC;AAED,iEAAiE;AACjE,MAAM,UAAU,qBAAqB;IACnC,OAAO,cAAc,CAAC;AACxB,CAAC","sourcesContent":["export type IconLibrary = 'material-icons' | 'material-symbols';\n\nlet defaultLibrary: IconLibrary = 'material-icons';\n\n/** Sets the global default for all <six-icon> instances that don't specify `library`. */\nexport function setDefaultIconLibrary(lib: IconLibrary) {\n  defaultLibrary = lib;\n}\n\n/** Returns the global default (fallback is 'material-icons'). */\nexport function getDefaultIconLibrary(): IconLibrary {\n  return defaultLibrary;\n}\n"]}

package/dist/components/index.js

@@ -1,6 +1,8 @@
 import { SixAlert } from './six-alert.js';
 import { SixAvatar } from './six-avatar.js';
 import { SixBadge } from './six-badge.js';
+import { SixBreadcrumbs } from './six-breadcrumbs.js';
+import { SixBreadcrumbsItem } from './six-breadcrumbs-item.js';
 import { SixButton } from './six-button.js';
 import { SixCard } from './six-card.js';
 import { SixCheckbox } from './six-checkbox.js';
@@ -38,6 +40,7 @@ import { SixProgressBar } from './six-progress-bar.js';
 import { SixProgressRing } from './six-progress-ring.js';
 import { SixRadio } from './six-radio.js';
 import { SixRange } from './six-range.js';
+import { SixRating } from './six-rating.js';
 import { SixRoot } from './six-root.js';
 import { SixSearchField } from './six-search-field.js';
 import { SixSelect } from './six-select.js';
@@ -56,7 +59,8 @@ import { SixTextarea } from './six-textarea.js';
 import { SixTile } from './six-tile.js';
 import { SixTimepicker } from './six-timepicker.js';
 import { SixTooltip } from './six-tooltip.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-BAe7gBEi.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-D512q9rn.js';
+export { g as getDefaultIconLibrary, s as setDefaultIconLibrary } from './p-CT4IVFqs.js';
 
 /**
  * Displays an alert on the toast stack with a specified message and optional configuration.
@@ -118,6 +122,8 @@ const defineCustomElements = (opts) => {
             SixAlert,
             SixAvatar,
             SixBadge,
+            SixBreadcrumbs,
+            SixBreadcrumbsItem,
             SixButton,
             SixCard,
             SixCheckbox,
@@ -155,6 +161,7 @@ const defineCustomElements = (opts) => {
             SixProgressRing,
             SixRadio,
             SixRange,
+            SixRating,
             SixRoot,
             SixSearchField,
             SixSelect,

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;;;;;;;AAOG;AACG,SAAU,SAAS,CAAC,OAAe,EAAE,SAAqB,EAAE,QAAiB,EAAE,QAAiB,EAAA;IACpG,MAAM,IAAI,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,MAAA,GAAA,SAAS,GAAI,MAAM;AAChC,IAAA,MAAM,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,OAAO,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE;QAC/D,IAAI;QACJ,QAAQ,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,WAAW,CAAC,IAAI,CAAC;QACvC,SAAS,EAAE,yBAAyB,IAAI,CAAA,WAAA,EAAc,UAAU,CAAC,OAAO,CAAC,CAAE,CAAA;AAC3E,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA,CAAC;AACF,IAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAC3B,KAAK,CAAC,KAAK,EAAE;AACf;AAEA,SAAS,UAAU,CAAC,IAAY,EAAA;IAC9B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACzC,IAAA,GAAG,CAAC,WAAW,GAAG,IAAI;IACtB,OAAO,GAAG,CAAC,SAAS;AACtB;AAEA,SAAS,OAAO,CAAC,WAAsB,EAAA;IACrC,QAAQ,WAAW;AACjB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,MAAM;AACf,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,MAAM;AACf,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,cAAc;AACvB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,SAAS;AAClB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,QAAQ;;AAErB;AAEA,SAAS,WAAW,CAAC,WAAsB,EAAA;IACzC,QAAQ,WAAW;AACjB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,KAAK;;AAElB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/alert.ts"],"sourcesContent":["import { AlertType } from '../components/six-alert/six-alert';\n\n/**\n * Displays an alert on the toast stack with a specified message and optional configuration.\n *\n * @param message - The message to be displayed in the alert.\n * @param alertType - The type of the alert. Valid values are 'primary', 'info', 'success', 'warning', 'danger'. Default is 'info'.\n * @param duration - The duration in milliseconds for which the alert is displayed. If not provided, a default duration is set based on the alert type.\n * @param iconName - The name of the icon to be displayed in the alert. If not provided, a default icon is set based on the alert type.\n */\nexport function showAlert(message: string, alertType?: AlertType, duration?: number, iconName?: string): void {\n  const type = alertType ?? 'info';\n  const icon = iconName ?? getIcon(type);\n  const alert = Object.assign(document.createElement('six-alert'), {\n    type,\n    duration: duration ?? getDuration(type),\n    innerHTML: `<six-icon slot=\"icon\">${icon}</six-icon>${escapeHtml(message)}`,\n    closable: true,\n  });\n  document.body.append(alert);\n  alert.toast();\n}\n\nfunction escapeHtml(html: string): string {\n  const div = document.createElement('div');\n  div.textContent = html;\n  return div.innerHTML;\n}\n\nfunction getIcon(messageType: AlertType): string {\n  switch (messageType) {\n    case 'primary':\n      return 'info';\n    case 'info':\n      return 'info';\n    case 'success':\n      return 'check_circle';\n    case 'warning':\n      return 'warning';\n    case 'danger':\n      return 'report';\n  }\n}\n\nfunction getDuration(messageType: AlertType): number {\n  switch (messageType) {\n    case 'primary':\n      return 10000;\n    case 'info':\n      return 10000;\n    case 'success':\n      return 10000;\n    case 'warning':\n      return 20000;\n    case 'danger':\n      return 20000;\n  }\n}\n"],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;;;;;;;AAOG;AACG,SAAU,SAAS,CAAC,OAAe,EAAE,SAAqB,EAAE,QAAiB,EAAE,QAAiB,EAAA;IACpG,MAAM,IAAI,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,MAAA,GAAA,SAAS,GAAI,MAAM;AAChC,IAAA,MAAM,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,OAAO,CAAC,IAAI,CAAC;AACtC,IAAA,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE;QAC/D,IAAI;QACJ,QAAQ,EAAE,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAR,QAAQ,GAAI,WAAW,CAAC,IAAI,CAAC;QACvC,SAAS,EAAE,yBAAyB,IAAI,CAAA,WAAA,EAAc,UAAU,CAAC,OAAO,CAAC,CAAE,CAAA;AAC3E,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA,CAAC;AACF,IAAA,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;IAC3B,KAAK,CAAC,KAAK,EAAE;AACf;AAEA,SAAS,UAAU,CAAC,IAAY,EAAA;IAC9B,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACzC,IAAA,GAAG,CAAC,WAAW,GAAG,IAAI;IACtB,OAAO,GAAG,CAAC,SAAS;AACtB;AAEA,SAAS,OAAO,CAAC,WAAsB,EAAA;IACrC,QAAQ,WAAW;AACjB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,MAAM;AACf,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,MAAM;AACf,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,cAAc;AACvB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,SAAS;AAClB,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,QAAQ;;AAErB;AAEA,SAAS,WAAW,CAAC,WAAsB,EAAA;IACzC,QAAQ,WAAW;AACjB,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,KAAK;AACd,QAAA,KAAK,QAAQ;AACX,YAAA,OAAO,KAAK;;AAElB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/alert.ts"],"sourcesContent":["import { AlertType } from '../components/six-alert/six-alert';\n\n/**\n * Displays an alert on the toast stack with a specified message and optional configuration.\n *\n * @param message - The message to be displayed in the alert.\n * @param alertType - The type of the alert. Valid values are 'primary', 'info', 'success', 'warning', 'danger'. Default is 'info'.\n * @param duration - The duration in milliseconds for which the alert is displayed. If not provided, a default duration is set based on the alert type.\n * @param iconName - The name of the icon to be displayed in the alert. If not provided, a default icon is set based on the alert type.\n */\nexport function showAlert(message: string, alertType?: AlertType, duration?: number, iconName?: string): void {\n  const type = alertType ?? 'info';\n  const icon = iconName ?? getIcon(type);\n  const alert = Object.assign(document.createElement('six-alert'), {\n    type,\n    duration: duration ?? getDuration(type),\n    innerHTML: `<six-icon slot=\"icon\">${icon}</six-icon>${escapeHtml(message)}`,\n    closable: true,\n  });\n  document.body.append(alert);\n  alert.toast();\n}\n\nfunction escapeHtml(html: string): string {\n  const div = document.createElement('div');\n  div.textContent = html;\n  return div.innerHTML;\n}\n\nfunction getIcon(messageType: AlertType): string {\n  switch (messageType) {\n    case 'primary':\n      return 'info';\n    case 'info':\n      return 'info';\n    case 'success':\n      return 'check_circle';\n    case 'warning':\n      return 'warning';\n    case 'danger':\n      return 'report';\n  }\n}\n\nfunction getDuration(messageType: AlertType): number {\n  switch (messageType) {\n    case 'primary':\n      return 10000;\n    case 'info':\n      return 10000;\n    case 'success':\n      return 10000;\n    case 'warning':\n      return 20000;\n    case 'danger':\n      return 20000;\n  }\n}\n"],"version":3}

package/dist/components/p-B5aFlIg7.js

@@ -0,0 +1,187 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-D512q9rn.js';
+import { f as focusVisible } from './p-Vw_F19Fv.js';
+import { d as defineCustomElement$1 } from './p-CT4IVFqs.js';
+
+const sixDetailsCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;--horizontal-padding:var(--six-spacing-medium);font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium) var(--horizontal-padding);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";
+
+let id = 0;
+const SixDetails = /*@__PURE__*/ proxyCustomElement(class SixDetails extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixShow = createEvent(this, "six-details-show");
+        this.sixAfterShow = createEvent(this, "six-details-after-show");
+        this.sixHide = createEvent(this, "six-details-hide");
+        this.sixAfterHide = createEvent(this, "six-details-after-hide");
+        this.animateSummaryIcon = true;
+        this.componentId = `details-${++id}`;
+        this.isVisible = false;
+        /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
+        this.summary = '';
+        /** The icon's size. */
+        this.summaryIconSize = 'inherit';
+        /** Set to true to prevent the user from toggling the details. */
+        this.disabled = false;
+        /** Set to true when you want to use six-details inline e.g. in a sidebar */
+        this.inline = false;
+        /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */
+        this.selectableEmpty = false;
+        /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.hasContent = true;
+        this.handleBodyTransitionEnd = (event) => {
+            if (this.body == null)
+                return;
+            const target = event.target;
+            // Ensure we only emit one event when the target element is no longer visible
+            if (event.propertyName === 'height' && target.classList.contains('details__body')) {
+                this.body.style.overflow = this.open ? 'visible' : 'hidden';
+                this.body.style.height = this.open ? 'auto' : '0';
+                this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+                this.body.hidden = !this.open;
+            }
+        };
+        this.handleSummaryClick = () => {
+            var _a;
+            if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
+                this.open ? this.hide() : this.show();
+                (_a = this.header) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        this.handleSummaryKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                this.open ? this.hide() : this.show();
+            }
+            if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+                event.preventDefault();
+                this.hide();
+            }
+            if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+                event.preventDefault();
+                this.show();
+            }
+        };
+    }
+    handleOpenChange() {
+        if (this.body != null) {
+            this.open ? this.show() : this.hide();
+        }
+    }
+    componentDidLoad() {
+        if (this.details == null || this.body == null)
+            return;
+        focusVisible.observe(this.details);
+        this.body.hidden = !this.open;
+        // Show on init if open
+        if (this.open) {
+            this.show();
+        }
+    }
+    disconnectedCallback() {
+        if (this.details != null) {
+            focusVisible.unobserve(this.details);
+        }
+    }
+    /** Shows the detail body */
+    async show() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (this.isVisible || this.body == null)
+            return;
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
+        }
+        this.body.hidden = false;
+        if (this.body.scrollHeight === 0) {
+            // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
+            // initially, but not immediately visible (i.e. in a tab panel).
+            this.body.style.height = 'auto';
+            this.body.style.overflow = 'visible';
+        }
+        else {
+            this.body.style.height = `${this.body.scrollHeight}px`;
+            this.body.style.overflow = 'hidden';
+        }
+        this.isVisible = true;
+        this.open = true;
+    }
+    /** Hides the detail body */
+    async hide() {
+        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+        if (!this.isVisible || this.body == null)
+            return;
+        const body = this.body;
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
+        }
+        // We can't transition out of `height: auto`, so let's set it to the current height first
+        body.style.height = `${body.scrollHeight}px`;
+        body.style.overflow = 'hidden';
+        requestAnimationFrame(() => {
+            body.style.height = '0';
+        });
+        this.isVisible = false;
+        this.open = false;
+    }
+    render() {
+        const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
+        return (h("div", { key: '27ca22526d4341950e4db0d33b6f0f0af96ea867', ref: (el) => (this.details = el), part: "base", class: {
+                details: true,
+                'details--open': this.open,
+                'details--disabled': this.disabled,
+                inline: this.inline,
+            } }, h("header", { key: 'f9f14d79ddff8b73ae0b6a3e959f5db892f4a31f', ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, h("div", { key: 'aec9b05ea1bb7eb2c42be7c95d584e35645fec64', part: "summary", class: "details__summary" }, h("slot", { key: '0ce0ee53a8cd67a3b2b92ba3fa51d79818b294e4', name: "summary" }, this.summary)), h("span", { key: '8cd7f1957b3498575654f5dbdb4664b503d71862', part: "summary-icon", class: {
+                'details__summary-icon': true,
+                'details__summary-icon--animate': this.animateSummaryIcon,
+            } }, h("slot", { key: 'ec46c283b39907c65e996935a57d4580b0436306', name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { key: '4a0ef8739c3a4503ca443f945086e9f6cc74b036', size: this.summaryIconSize }, summaryIcon)))), h("div", { key: '1cc71be309bffcb693e04ca86d4449db683b2f26', ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, h("div", { key: '514ed3c5f7e5f762986c6ab9d274eb6251ecbf99', part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, h("slot", { key: '1af14b8843cdae96fa13decc6a6ba51613d477ad' })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return sixDetailsCss; }
+}, [1, "six-details", {
+        "open": [1540],
+        "summary": [1],
+        "summaryIcon": [1, "summary-icon"],
+        "summaryIconSize": [513, "summary-icon-size"],
+        "disabled": [4],
+        "inline": [4],
+        "selectableEmpty": [4, "selectable-empty"],
+        "hasContent": [4, "has-content"],
+        "animateSummaryIcon": [32],
+        "show": [64],
+        "hide": [64]
+    }, undefined, {
+        "open": ["handleOpenChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-details", "six-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixDetails);
+            }
+            break;
+        case "six-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SixDetails as S, defineCustomElement as d };
+//# sourceMappingURL=p-B5aFlIg7.js.map
+
+//# sourceMappingURL=p-B5aFlIg7.js.map

package/dist/components/p-B5aFlIg7.js.map

@@ -0,0 +1 @@
+{"file":"p-B5aFlIg7.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n * @prop --horizontal-padding: The horizontal padding\n */\n:host {\n  --hide-duration: var(--six-transition-medium);\n  --hide-timing-function: ease;\n  --show-duration: var(--six-transition-medium);\n  --show-timing-function: ease;\n  --horizontal-padding: var(--six-spacing-medium);\n\n  font-family: var(--six-font-family);\n  display: block;\n}\n\n.details {\n  border: solid var(--six-border-width) var(--six-input-border-color);\n  border-radius: var(--six-border-radius-medium);\n  color: var(--six-details-color);\n  overflow-anchor: none;\n  font-size: var(--six-input-font-size-medium);\n\n  &:hover:not(.details--disabled):not(.details--open) {\n    border-color: var(--six-input-border-color-hover);\n  }\n\n  &.inline {\n    border: none;\n    color: var(--six-sidebar-color);\n\n    &:hover {\n      background-color: var(--six-sidebar-hover-background-color);\n    }\n\n    &.details--open {\n      background-color: var(--six-color-web-rock-50);\n\n      &:hover {\n        border: none;\n        box-shadow: none;\n      }\n\n      & > .details__header {\n        color: var(--six-sidebar-color);\n        font-weight: var(--six-font-weight-bold);\n        background-color: var(--six-sidebar-header-background-color);\n      }\n    }\n  }\n}\n\n.details--disabled {\n  background-color: var(--six-input-background-color-disabled);\n  border-color: var(--six-input-border-color-disabled);\n  color: var(--six-input-color-disabled);\n}\n\n.details__header {\n  display: flex;\n  align-items: center;\n  border-radius: inherit;\n  padding: var(--six-spacing-medium) var(--horizontal-padding);\n  user-select: none;\n  cursor: pointer;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n  cursor: not-allowed;\n  border-width: 1px;\n\n  &:focus {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n.details__summary {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n}\n\n.details__summary-icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: 1.2em;\n  transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n  transform: rotate(-180deg);\n}\n\n.details__body {\n  height: 0;\n  overflow: hidden;\n  transition-property: height;\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n  transition-duration: var(--show-duration);\n  transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n  padding: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n *\n * @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n */\n\n@Component({\n  tag: 'six-details',\n  styleUrl: 'six-details.scss',\n  shadow: true,\n})\nexport class SixDetails {\n  @Element() readonly host!: HTMLSixDetailsElement;\n\n  @State() animateSummaryIcon = true;\n\n  private body?: HTMLElement;\n  private details?: HTMLElement;\n  private header?: HTMLElement;\n  private componentId = `details-${++id}`;\n  private isVisible = false;\n\n  /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n  @Prop() summary = '';\n\n  /** The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. */\n  @Prop() summaryIcon?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) summaryIconSize:\n    | 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge' = 'inherit';\n\n  /** Set to true to prevent the user from toggling the details. */\n  @Prop() disabled = false;\n\n  /** Set to true when you want to use six-details inline e.g. in a sidebar */\n  @Prop() inline = false;\n\n  /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */\n  @Prop() selectableEmpty = false;\n\n  /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() hasContent = true;\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.body != null) {\n      this.open ? this.show() : this.hide();\n    }\n  }\n\n  /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-details-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details opens and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-details-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the details closes and all transitions are complete. */\n  @Event({ eventName: 'six-details-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n  componentDidLoad() {\n    if (this.details == null || this.body == null) return;\n\n    focusVisible.observe(this.details);\n    this.body.hidden = !this.open;\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.details != null) {\n      focusVisible.unobserve(this.details);\n    }\n  }\n\n  /** Shows the detail body */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.body == null) return;\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.body.hidden = false;\n\n    if (this.body.scrollHeight === 0) {\n      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n      // initially, but not immediately visible (i.e. in a tab panel).\n      this.body.style.height = 'auto';\n      this.body.style.overflow = 'visible';\n    } else {\n      this.body.style.height = `${this.body.scrollHeight}px`;\n      this.body.style.overflow = 'hidden';\n    }\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the detail body */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible || this.body == null) return;\n    const body = this.body;\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    // We can't transition out of `height: auto`, so let's set it to the current height first\n    body.style.height = `${body.scrollHeight}px`;\n    body.style.overflow = 'hidden';\n\n    requestAnimationFrame(() => {\n      // tslint:disable-next-line: no-unused-expression\n      body.clientWidth; // force a reflow\n      body.style.height = '0';\n    });\n\n    this.isVisible = false;\n    this.open = false;\n  }\n\n  private handleBodyTransitionEnd = (event: TransitionEvent) => {\n    if (this.body == null) return;\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'height' && target.classList.contains('details__body')) {\n      this.body.style.overflow = this.open ? 'visible' : 'hidden';\n      this.body.style.height = this.open ? 'auto' : '0';\n      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n      this.body.hidden = !this.open;\n    }\n  };\n\n  private handleSummaryClick = () => {\n    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n      this.open ? this.hide() : this.show();\n      this.header?.focus();\n    }\n  };\n\n  private handleSummaryKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.open ? this.hide() : this.show();\n    }\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      event.preventDefault();\n      this.show();\n    }\n  };\n\n  render() {\n    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');\n\n    return (\n      <div\n        ref={(el) => (this.details = el)}\n        part=\"base\"\n        class={{\n          details: true,\n          'details--open': this.open,\n          'details--disabled': this.disabled,\n          inline: this.inline,\n        }}\n      >\n        <header\n          ref={(el) => (this.header = el)}\n          part=\"header\"\n          id={`${this.componentId}-header`}\n          class=\"details__header\"\n          role=\"button\"\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls={`${this.componentId}-content`}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          tabIndex={this.disabled ? -1 : 0}\n          onClick={this.handleSummaryClick}\n          onKeyDown={this.handleSummaryKeyDown}\n        >\n          <div part=\"summary\" class=\"details__summary\">\n            <slot name=\"summary\">{this.summary}</slot>\n          </div>\n\n          <span\n            part=\"summary-icon\"\n            class={{\n              'details__summary-icon': true,\n              'details__summary-icon--animate': this.animateSummaryIcon,\n            }}\n          >\n            <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n              {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n            </slot>\n          </span>\n        </header>\n\n        <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n          <div\n            part=\"content\"\n            id={`${this.componentId}-content`}\n            class=\"details__content\"\n            role=\"region\"\n            aria-labelledby={`${this.componentId}-header`}\n          >\n            <slot />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-BB2rei7y.js

@@ -0,0 +1,74 @@
+import { p as proxyCustomElement, H, h } from './p-D512q9rn.js';
+
+const sixSpinnerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--track-color:var(--six-progress-track-color);--indicator-color:var(--six-progress-indicator-color);--stroke-width:2px;display:inline-flex}.spinner{display:inline-block;width:1em;height:1em;border-radius:50%;border:solid var(--stroke-width) var(--track-color);border-top-color:var(--indicator-color);border-right-color:var(--indicator-color);animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.six-spinner{width:auto;height:auto;position:relative}.six-spinner .six-spinner__container{margin:0;transform:translateX(0)}.six-spinner .six-spinner__container svg{transform:translateX(0)}.six-spinner__container{position:relative;margin:0 auto;top:calc(50% - 20px);z-index:1}.six-spinner__container,.six-spinner__container svg{width:40px;height:40px;display:block;transform:translateX(40px)}.six-spinner path{stroke-dashoffset:70px;stroke-dasharray:70, 444;-webkit-animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;animation:six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite}.six-spinner polygon{stroke-dasharray:310;stroke-dashoffset:310;animation:big-polygon-draw 2s ease-in-out infinite;-webkit-animation:big-polygon-draw 2s ease-in-out infinite}.six-spinner polygon:nth-child(2),.six-spinner polygon:nth-child(3){stroke-dasharray:110;stroke-dashoffset:110;animation:small-polygon-draw 2s ease-in-out infinite;-webkit-animation:small-polygon-draw 2s ease-in-out infinite}@keyframes big-polygon-draw{0%,100%{stroke-dashoffset:310}50%{stroke-dashoffset:140}}@-webkit-keyframes big-polygon-draw{0%,100%{stroke-dashoffset:310}50%{stroke-dashoffset:140}}@keyframes small-polygon-draw{0%,100%{stroke-dashoffset:110}50%{stroke-dashoffset:50}}@-webkit-keyframes small-polygon-draw{0%,100%{stroke-dashoffset:110}50%{stroke-dashoffset:50}}@-webkit-keyframes six-spinner{to{stroke-dashoffset:-444}}@keyframes six-spinner{to{stroke-dashoffset:-444}}";
+
+const SixSpinner = /*@__PURE__*/ proxyCustomElement(class SixSpinner extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    /**
+     * Renders a container with a given SVG content.
+     */
+    renderWrapper(content) {
+        return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, content)));
+    }
+    /**
+     * Renders the SIX logo spinner.
+     */
+    renderSIXLogo() {
+        const sixLogo = (h("svg", { viewBox: "0 0 40 40", part: "svg" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })));
+        return this.renderWrapper(sixLogo);
+    }
+    /**
+     * Renders the BME logo spinner.
+     */
+    renderBMELogo() {
+        const bmeLogo = (h("svg", { viewBox: "0 0 45 55", part: "svg" }, h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96" }), h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96" }), h("polygon", { fill: "none", stroke: "black", "stroke-width": "2", "stroke-linecap": "round", points: "24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719" })));
+        return this.renderWrapper(bmeLogo);
+    }
+    /**
+     * Renders a simple spinner.
+     */
+    renderSimpleSpinner() {
+        return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
+    }
+    render() {
+        // Check the deprecated `six` property first
+        if (this.six) {
+            console.warn('The "six" prop is deprecated. Use "logo=\'six\'" instead.');
+            return this.renderSIXLogo();
+        }
+        switch (this.logo) {
+            case 'six':
+                return this.renderSIXLogo();
+            case 'bme':
+                return this.renderBMELogo();
+            default:
+                return this.renderSimpleSpinner();
+        }
+    }
+    static get style() { return sixSpinnerCss; }
+}, [1, "six-spinner", {
+        "logo": [1],
+        "six": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-spinner":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixSpinner);
+            }
+            break;
+    } });
+}
+
+export { SixSpinner as S, defineCustomElement as d };
+//# sourceMappingURL=p-BB2rei7y.js.map
+
+//# sourceMappingURL=p-BB2rei7y.js.map

package/dist/components/p-BB2rei7y.js.map

@@ -0,0 +1 @@
+{"file":"p-BB2rei7y.js","mappings":";;AAAA,MAAM,aAAa,GAAG,8mEAA8mE;;MCgBvnE,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;AAUrB;;AAEG;AACK,IAAA,aAAa,CAAC,OAAmB,EAAA;AACvC,QAAA,QACE,YAAM,KAAK,EAAC,aAAa,EAAW,WAAA,EAAA,MAAM,eAAW,QAAQ,EAAA,EAC3D,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,wBAAwB,EAAA,EAAE,OAAO,CAAO,CAC9C;;AAIX;;AAEG;IACK,aAAa,GAAA;QACnB,MAAM,OAAO,IACX,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,EACH,cAAA,EAAA,GAAG,EACD,gBAAA,EAAA,OAAO,EACtB,CAAC,EAAC,mHAAmH,EAC/G,CAAA,CACJ,CACP;AACD,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;;AAGpC;;AAEG;IACK,aAAa,GAAA;QACnB,MAAM,OAAO,IACX,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,EAAA,EACjC,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,EACD,cAAA,EAAA,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,6GAA6G,EACpH,CAAA,EACF,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,EACD,cAAA,EAAA,GAAG,oBACD,OAAO,EACtB,MAAM,EAAC,4DAA4D,EACnE,CAAA,EACF,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,OAAO,EACD,cAAA,EAAA,GAAG,EACD,gBAAA,EAAA,OAAO,EACtB,MAAM,EAAC,yDAAyD,EAChE,CAAA,CACE,CACP;AACD,QAAA,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC;;AAGpC;;AAEG;IACK,mBAAmB,GAAA;QACzB,OAAO,CAAM,CAAA,MAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,EAAW,WAAA,EAAA,MAAM,EAAW,WAAA,EAAA,QAAQ,GAAG;;IAGjF,MAAM,GAAA;;AAEJ,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;AACZ,YAAA,OAAO,CAAC,IAAI,CAAC,2DAA2D,CAAC;AACzE,YAAA,OAAO,IAAI,CAAC,aAAa,EAAE;;AAG7B,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,KAAK;AACR,gBAAA,OAAO,IAAI,CAAC,aAAa,EAAE;AAC7B,YAAA,KAAK,KAAK;AACR,gBAAA,OAAO,IAAI,CAAC,aAAa,EAAE;AAC7B,YAAA;AACE,gBAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-spinner/six-spinner.scss?tag=six-spinner&encapsulation=shadow","src/components/six-spinner/six-spinner.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: var(--six-progress-track-color);\n  --indicator-color: var(--six-progress-indicator-color);\n  --stroke-width: 2px;\n\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n$color-six-spinner-background: rgba(255, 255, 255, 0.7);\n\n.six-spinner {\n  width: auto;\n  height: auto;\n  position: relative;\n\n  .six-spinner__container {\n    margin: 0;\n    transform: translateX(0);\n  }\n\n  .six-spinner__container svg {\n    transform: translateX(0);\n  }\n\n  &__container {\n    position: relative;\n    margin: 0 auto;\n    top: calc(50% - 20px);\n    z-index: 1;\n  }\n\n  &__container,\n  &__container svg {\n    width: 40px;\n    height: 40px;\n    display: block;\n    transform: translateX(40px);\n  }\n\n  path {\n    stroke-dashoffset: 70px;\n    stroke-dasharray: 70, 444;\n    -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n    animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;\n  }\n\n  polygon {\n    stroke-dasharray: 310;\n    stroke-dashoffset: 310;\n    animation: big-polygon-draw 2s ease-in-out infinite;\n    -webkit-animation: big-polygon-draw 2s ease-in-out infinite;\n  }\n\n  polygon:nth-child(2),\n  polygon:nth-child(3) {\n    stroke-dasharray: 110;\n    stroke-dashoffset: 110;\n    animation: small-polygon-draw 2s ease-in-out infinite;\n    -webkit-animation: small-polygon-draw 2s ease-in-out infinite;\n  }\n\n  @keyframes big-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 310;\n    }\n    50% {\n      stroke-dashoffset: 140;\n    }\n  }\n\n  @-webkit-keyframes big-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 310;\n    }\n    50% {\n      stroke-dashoffset: 140;\n    }\n  }\n\n  @keyframes small-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 110;\n    }\n    50% {\n      stroke-dashoffset: 50;\n    }\n  }\n\n  @-webkit-keyframes small-polygon-draw {\n    0%,\n    100% {\n      stroke-dashoffset: 110;\n    }\n    50% {\n      stroke-dashoffset: 50;\n    }\n  }\n\n  @-webkit-keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n\n  @keyframes six-spinner {\n    to {\n      stroke-dashoffset: -444;\n    }\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n * @part svg - The spinner icon.\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner. */\n  @Prop() logo?: 'six' | 'bme';\n  /**\n   * **@deprecated** Use `logo=\"six\"` instead.\n   *\n   * If set to true, the spinner displays the SIX logo.\n   */\n  @Prop() six?: boolean;\n\n  /**\n   * Renders a container with a given SVG content.\n   */\n  private renderWrapper(content: SVGElement) {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">{content}</div>\n      </span>\n    );\n  }\n\n  /**\n   * Renders the SIX logo spinner.\n   */\n  private renderSIXLogo() {\n    const sixLogo = (\n      <svg viewBox=\"0 0 40 40\" part=\"svg\">\n        <path\n          fill=\"none\"\n          stroke=\"#de3919\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\"\n          d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n        ></path>\n      </svg>\n    );\n    return this.renderWrapper(sixLogo);\n  }\n\n  /**\n   * Renders the BME logo spinner.\n   */\n  private renderBMELogo() {\n    const bmeLogo = (\n      <svg viewBox=\"0 0 45 55\" part=\"svg\">\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96\"\n        />\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96\"\n        />\n        <polygon\n          fill=\"none\"\n          stroke=\"black\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          points=\"24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719\"\n        />\n      </svg>\n    );\n    return this.renderWrapper(bmeLogo);\n  }\n\n  /**\n   * Renders a simple spinner.\n   */\n  private renderSimpleSpinner() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    // Check the deprecated `six` property first\n    if (this.six) {\n      console.warn('The \"six\" prop is deprecated. Use \"logo=\\'six\\'\" instead.');\n      return this.renderSIXLogo();\n    }\n\n    switch (this.logo) {\n      case 'six':\n        return this.renderSIXLogo();\n      case 'bme':\n        return this.renderBMELogo();\n      default:\n        return this.renderSimpleSpinner();\n    }\n  }\n}\n"],"version":3}