npm - @six-group/ui-library - Versions diffs - 4.2.6 → 4.3.0 - Mend

@six-group/ui-library 4.2.6 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1265) hide show

package/dist/esm/six-alert.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5390c1d6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a7bee415.js';
 import { g as getSlot } from './slot-56531341.js';
 const sixAlertCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--shadow{box-shadow:var(--six-shadow-medium)}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";
@@ -146,7 +146,7 @@ const SixAlert = class {
                 'alert--warning': this.type === 'warning',
                 'alert--danger': this.type === 'danger',
                 'alert--shadow': asToast,
-            }, role: "alert", "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("span", { key: 'fb6e8cf52eb87ddb1a81a797482457b3afccaa98', part: "icon", class: "alert__icon" }, h("slot", { key: '3d97a399ac05620214ef8a4d6a19c37a103f76a2', name: "icon" })), h("span", { key: '3984ce04838d33a688b6cfafb7827646e0e9d582', part: "message", class: "alert__message" }, h("slot", { key: 'f84ff31b7b74571b2ff9f074b617cb344313939e' })), this.closable && (h("span", { class: "alert__close" }, h("six-icon-button", { name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
+            }, role: "alert", "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("span", { key: 'fb6e8cf52eb87ddb1a81a797482457b3afccaa98', part: "icon", class: "alert__icon" }, h("slot", { key: '3d97a399ac05620214ef8a4d6a19c37a103f76a2', name: "icon" })), h("span", { key: '3984ce04838d33a688b6cfafb7827646e0e9d582', part: "message", class: "alert__message" }, h("slot", { key: 'f84ff31b7b74571b2ff9f074b617cb344313939e' })), this.closable && (h("span", { key: '5291d4a747001042ad9882c32427094019e16dbb', class: "alert__close" }, h("six-icon-button", { key: '48a38b0a283400ae84ed95df38a43ee6a41e1fb0', name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/six-alert.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-alert.entry.js","mappings":"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","names":[],"sources":["src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --box-shadow: The alert's box shadow.\n /\n:host {\n display: contents;\n\n // For better DX, we'll reset the margin here so the base part can inherit it\n margin: 0;\n}\n\n.alert {\n position: relative;\n display: flex;\n align-items: stretch;\n background-color: var(--six-color-white);\n border: solid 1px var(--six-color-web-rock-200);\n border-top-width: 3px;\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--box-shadow);\n font-family: var(--six-font-sans);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-normal);\n line-height: 1.6;\n color: var(--six-color-web-rock-700);\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n margin: inherit;\n\n &:not(.alert--visible) {\n @include hidden;\n }\n}\n\n.alert--shadow {\n box-shadow: var(--six-shadow-medium);\n}\n\n.alert--open {\n opacity: 1;\n transform: none;\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n\n ::slotted() {\n margin-left: var(--six-spacing-large);\n }\n}\n\n.alert--primary {\n border-top-color: var(--six-color-web-rock-900);\n\n .alert__icon {\n color: var(--six-color-web-rock-900);\n }\n}\n\n.alert--success {\n border-top-color: var(--six-color-success-600);\n\n .alert__icon {\n color: var(--six-color-success-600);\n }\n}\n\n.alert--info {\n border-top-color: var(--six-color-action-500);\n\n .alert__icon {\n color: var(--six-color-action-500);\n }\n}\n\n.alert--warning {\n border-top-color: var(--six-color-warning-800);\n\n .alert__icon {\n color: var(--six-color-warning-800);\n }\n}\n\n.alert--danger {\n border-top-color: var(--six-color-danger-900);\n\n .alert__icon {\n color: var(--six-color-danger-900);\n }\n}\n\n.alert__message {\n flex: 1 1 auto;\n padding: var(--six-spacing-large);\n overflow: hidden;\n}\n\n.alert__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot } from '../../utils/slot';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\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 alert's content.\n * @slot icon - An icon to show in the alert.\n \n @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n /\n\n@Component({\n tag: 'six-alert',\n styleUrl: 'six-alert.scss',\n shadow: true,\n})\nexport class SixAlert {\n private autoHideTimeout?: number;\n\n @Element() host!: HTMLSixAlertElement;\n\n @State() isVisible = false;\n\n /* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Set to true to make the alert closable. /\n @Prop({ reflect: true }) closable = false;\n\n /* The type of alert. /\n @Prop({ reflect: true }) type: AlertType = 'primary';\n\n /\n The length of time, in milliseconds, the alert will show before closing itself.\n * If the user hovers over the toast alert, the timer will pause.\n * On leaving the element with the mouse, the timer resets.\n /\n @Prop() duration = Infinity;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /* Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-alert-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the alert opens and all transitions are complete. /\n @Event({ eventName: 'six-alert-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-alert-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the alert closes and all transitions are complete. /\n @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n /* Shows the alert. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n\n if (this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /* Hides the alert /\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n clearTimeout(this.autoHideTimeout);\n this.isVisible = false;\n this.open = false;\n }\n\n /\n Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n * @param adjustPosition If true, the top and right position of the toast stack is shifted according to the\n * six-root header's height and the presence of a vertical scrollbar.\n */\n @Method()\n async toast(adjustPosition = true) {\n return new Promise<void>((resolve) => {\n if (!toastStack.parentElement) {\n document.body.append(toastStack);\n }\n toastStack.append(this.host);\n\n if (adjustPosition) {\n const sixRoot = document.querySelector('six-root');\n const headerSlot = getSlot(sixRoot, 'header');\n const mainSlot = sixRoot?.shadowRoot?.querySelector('host main');\n if (mainSlot != null && mainSlot instanceof HTMLElement) {\n const scrollbarWidth = mainSlot.offsetWidth - mainSlot.clientWidth;\n toastStack.style.right = `${scrollbarWidth}px`;\n }\n if (headerSlot != null) {\n const rect = headerSlot?.getBoundingClientRect();\n toastStack.style.top = `${rect.top + rect.height}px`;\n }\n } else {\n toastStack.style.top = '0';\n toastStack.style.right = '0';\n }\n\n requestAnimationFrame(() => this.show());\n\n this.host.addEventListener(\n 'six-alert-after-hide',\n () => {\n this.host.remove();\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (toastStack.querySelector('six-alert') === null) {\n toastStack.remove();\n }\n },\n { once: true }\n );\n });\n }\n\n private pauseAutoHide() {\n clearTimeout(this.autoHideTimeout);\n }\n\n private resetAutoHide() {\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n private restartAutoHide() {\n this.pauseAutoHide();\n this.resetAutoHide();\n }\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleMouseEnter = () => {\n this.pauseAutoHide();\n };\n\n private handleMouseLeave = () => {\n this.resetAutoHide();\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\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 === 'opacity' && target.classList.contains('alert')) {\n this.isVisible = this.open;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n const asToast = this.host.closest('.six-toast-stack') != null;\n\n return (\n <div\n part=\"base\"\n class={{\n alert: true,\n 'alert--open': this.open,\n 'alert--visible': this.isVisible,\n 'alert--closable': this.closable,\n 'alert--primary': this.type === 'primary',\n 'alert--success': this.type === 'success',\n 'alert--info': this.type === 'info',\n 'alert--warning': this.type === 'warning',\n 'alert--danger': this.type === 'danger',\n 'alert--shadow': asToast,\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n onTransitionEnd={this.handleTransitionEnd}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <span part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\" />\n </span>\n\n <span part=\"message\" class=\"alert__message\">\n <slot />\n </span>\n\n {this.closable && (\n <span class=\"alert__close\">\n <six-icon-button\n name=\"clear\"\n exportparts=\"base:close-button\"\n onClick={this.handleCloseClick}\n ></six-icon-button>\n </span>\n )}\n </div>\n );\n }\n}\n\nexport type AlertType = 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger';\n"],"version":3}
1	+ {"file":"six-alert.entry.js","mappings":"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","names":[],"sources":["src/components/six-alert/six-alert.scss?tag=six-alert&encapsulation=shadow","src/components/six-alert/six-alert.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --box-shadow: The alert's box shadow.\n /\n:host {\n display: contents;\n\n // For better DX, we'll reset the margin here so the base part can inherit it\n margin: 0;\n}\n\n.alert {\n position: relative;\n display: flex;\n align-items: stretch;\n background-color: var(--six-color-white);\n border: solid 1px var(--six-color-web-rock-200);\n border-top-width: 3px;\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--box-shadow);\n font-family: var(--six-font-sans);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-normal);\n line-height: 1.6;\n color: var(--six-color-web-rock-700);\n opacity: 0;\n transform: scale(0.9);\n transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;\n margin: inherit;\n\n &:not(.alert--visible) {\n @include hidden;\n }\n}\n\n.alert--shadow {\n box-shadow: var(--six-shadow-medium);\n}\n\n.alert--open {\n opacity: 1;\n transform: none;\n}\n\n.alert__icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n\n ::slotted() {\n margin-left: var(--six-spacing-large);\n }\n}\n\n.alert--primary {\n border-top-color: var(--six-color-web-rock-900);\n\n .alert__icon {\n color: var(--six-color-web-rock-900);\n }\n}\n\n.alert--success {\n border-top-color: var(--six-color-success-600);\n\n .alert__icon {\n color: var(--six-color-success-600);\n }\n}\n\n.alert--info {\n border-top-color: var(--six-color-action-500);\n\n .alert__icon {\n color: var(--six-color-action-500);\n }\n}\n\n.alert--warning {\n border-top-color: var(--six-color-warning-800);\n\n .alert__icon {\n color: var(--six-color-warning-800);\n }\n}\n\n.alert--danger {\n border-top-color: var(--six-color-danger-900);\n\n .alert__icon {\n color: var(--six-color-danger-900);\n }\n}\n\n.alert__message {\n flex: 1 1 auto;\n padding: var(--six-spacing-large);\n overflow: hidden;\n}\n\n.alert__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-large);\n padding-right: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot } from '../../utils/slot';\n\nconst toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });\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 alert's content.\n * @slot icon - An icon to show in the alert.\n \n @part base - The component's base wrapper.\n * @part icon - The container that wraps the alert icon.\n * @part message - The alert message.\n * @part close-button - The close button.\n /\n\n@Component({\n tag: 'six-alert',\n styleUrl: 'six-alert.scss',\n shadow: true,\n})\nexport class SixAlert {\n private autoHideTimeout?: number;\n\n @Element() host!: HTMLSixAlertElement;\n\n @State() isVisible = false;\n\n /* Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Set to true to make the alert closable. /\n @Prop({ reflect: true }) closable = false;\n\n /* The type of alert. /\n @Prop({ reflect: true }) type: AlertType = 'primary';\n\n /\n The length of time, in milliseconds, the alert will show before closing itself.\n * If the user hovers over the toast alert, the timer will pause.\n * On leaving the element with the mouse, the timer resets.\n /\n @Prop() duration = Infinity;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n @Watch('duration')\n handleDurationChange() {\n this.restartAutoHide();\n }\n\n /* Emitted when the alert opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-alert-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the alert opens and all transitions are complete. /\n @Event({ eventName: 'six-alert-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the alert closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-alert-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the alert closes and all transitions are complete. /\n @Event({ eventName: 'six-alert-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n /* Shows the alert. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n\n if (this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n /* Hides the alert /\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n clearTimeout(this.autoHideTimeout);\n this.isVisible = false;\n this.open = false;\n }\n\n /\n Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n * calling this method again. The returned promise will resolve after the alert is hidden.\n * @param adjustPosition If true, the top and right position of the toast stack is shifted according to the\n * six-root header's height and the presence of a vertical scrollbar.\n */\n @Method()\n async toast(adjustPosition = true) {\n return new Promise<void>((resolve) => {\n if (!toastStack.parentElement) {\n document.body.append(toastStack);\n }\n toastStack.append(this.host);\n\n if (adjustPosition) {\n const sixRoot = document.querySelector('six-root');\n const headerSlot = getSlot(sixRoot, 'header');\n const mainSlot = sixRoot?.shadowRoot?.querySelector('host main');\n if (mainSlot != null && mainSlot instanceof HTMLElement) {\n const scrollbarWidth = mainSlot.offsetWidth - mainSlot.clientWidth;\n toastStack.style.right = `${scrollbarWidth}px`;\n }\n if (headerSlot != null) {\n const rect = headerSlot?.getBoundingClientRect();\n toastStack.style.top = `${rect.top + rect.height}px`;\n }\n } else {\n toastStack.style.top = '0';\n toastStack.style.right = '0';\n }\n\n requestAnimationFrame(() => this.show());\n\n this.host.addEventListener(\n 'six-alert-after-hide',\n () => {\n this.host.remove();\n resolve();\n\n // Remove the toast stack from the DOM when there are no more alerts\n if (toastStack.querySelector('six-alert') === null) {\n toastStack.remove();\n }\n },\n { once: true }\n );\n });\n }\n\n private pauseAutoHide() {\n clearTimeout(this.autoHideTimeout);\n }\n\n private resetAutoHide() {\n if (this.open && this.duration < Infinity) {\n this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n }\n }\n\n private restartAutoHide() {\n this.pauseAutoHide();\n this.resetAutoHide();\n }\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleMouseEnter = () => {\n this.pauseAutoHide();\n };\n\n private handleMouseLeave = () => {\n this.resetAutoHide();\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\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 === 'opacity' && target.classList.contains('alert')) {\n this.isVisible = this.open;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n const asToast = this.host.closest('.six-toast-stack') != null;\n\n return (\n <div\n part=\"base\"\n class={{\n alert: true,\n 'alert--open': this.open,\n 'alert--visible': this.isVisible,\n 'alert--closable': this.closable,\n 'alert--primary': this.type === 'primary',\n 'alert--success': this.type === 'success',\n 'alert--info': this.type === 'info',\n 'alert--warning': this.type === 'warning',\n 'alert--danger': this.type === 'danger',\n 'alert--shadow': asToast,\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n aria-atomic=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n onTransitionEnd={this.handleTransitionEnd}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n >\n <span part=\"icon\" class=\"alert__icon\">\n <slot name=\"icon\" />\n </span>\n\n <span part=\"message\" class=\"alert__message\">\n <slot />\n </span>\n\n {this.closable && (\n <span class=\"alert__close\">\n <six-icon-button\n name=\"clear\"\n exportparts=\"base:close-button\"\n onClick={this.handleCloseClick}\n ></six-icon-button>\n </span>\n )}\n </div>\n );\n }\n}\n\nexport type AlertType = 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger';\n"],"version":3}

package/dist/esm/six-avatar.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-5390c1d6.js';
+import { r as registerInstance, h } from './index-a7bee415.js';
 const sixAvatarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;--size:2rem}.avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--size);height:var(--size);background-color:var(--six-avatar-background-color);font-family:var(--six-font-sans);font-size:calc(var(--size) * 0.5);font-weight:var(--six-font-weight-normal);color:var(--six-avatar-color);overflow:hidden;user-select:none;vertical-align:middle;cursor:pointer;outline:none}.avatar:hover{box-shadow:var(--six-shadow-medium)}.avatar--circle{border-radius:var(--six-border-radius-circle)}.avatar--rounded{border-radius:var(--six-border-radius-medium)}.avatar--square{border-radius:0}.avatar__icon{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%}.avatar__initials{line-height:1;text-transform:uppercase}.avatar__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}";
 const SixAvatarStyle0 = sixAvatarCss;
@@ -16,12 +16,12 @@ const SixAvatar = class {
         this.shape = 'circle';
     }
     render() {
-        return (h("div", { key: 'd2a98a9d561a826a49fff6f7b9e40faa9a970d49', part: "base", class: {
+        return (h("div", { key: '0dbd57a48040d1a7c7c07fa838e8be3da457e2c1', part: "base", class: {
                 avatar: true,
                 'avatar--circle': this.shape === 'circle',
                 'avatar--rounded': this.shape === 'rounded',
                 'avatar--square': this.shape === 'square',
-            }, role: "image", "aria-label": this.alt, tabIndex: 0 }, this.initials === '' && (h("div", { part: "icon", class: "avatar__icon" }, h("slot", { name: "icon" }, h("six-icon", null, "person")))), this.initials && (h("div", { part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (h("img", { part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
+            }, role: "image", "aria-label": this.alt, tabIndex: 0 }, this.initials === '' && (h("div", { key: '86e4e434e5da9fe126c6950b3716aa69e0738278', part: "icon", class: "avatar__icon" }, h("slot", { key: '376b3afc1ded98932f9f80c440f0f142e5bce33f', name: "icon" }, h("six-icon", { key: '0371ad768fc7440b24528bf2b1b331f466ab5574' }, "person")))), this.initials && (h("div", { key: 'd1a3412dc155ff96e7d3fddfac1d483561537e98', part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (h("img", { key: 'e8a7e31f01329601ae9181c89b702f9469accc35', part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
     }
 };
 SixAvatar.style = SixAvatarStyle0;

package/dist/esm/six-avatar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-avatar.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,0/BAA0/B,CAAC;AAChhC,wBAAe,YAAY;;MCmBd,SAAS;;;QAeZ,qBAAgB,GAAG;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB,CAAC;wBAhBkB,KAAK;qBAGT,EAAE;mBAGJ,EAAE;wBAGG,EAAE;qBAG4B,QAAQ;;IAMzD,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACzC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;aAC1C,EACD,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC,IAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,KACnB,~~WAAK~~,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACnC,~~YAAM~~,IAAI,EAAC,MAAM,IACf,~~6BAA2B~~,CACtB,CACH,CACP,EAEA,IAAI,CAAC,QAAQ,KACZ,~~WAAK~~,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3B,~~WAAK~~,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,EACN;KACH;;;;;;","names":[],"sources":["src/components/six-avatar/six-avatar.scss?tag=six-avatar&encapsulation=shadow","src/components/six-avatar/six-avatar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/*\n @prop --size: The size of the avatar.\n /\n:host {\n display: inline-block;\n\n --size: 2rem;\n}\n\n.avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: var(--size);\n height: var(--size);\n background-color: var(--six-avatar-background-color);\n font-family: var(--six-font-sans);\n font-size: calc(var(--size) 0.5);\n font-weight: var(--six-font-weight-normal);\n color: var(--six-avatar-color);\n overflow: hidden;\n user-select: none;\n vertical-align: middle;\n cursor: pointer;\n outline: none;\n\n &:hover {\n box-shadow: var(--six-shadow-medium);\n }\n}\n\n.avatar--circle {\n border-radius: var(--six-border-radius-circle);\n}\n\n.avatar--rounded {\n border-radius: var(--six-border-radius-medium);\n}\n\n.avatar--square {\n border-radius: 0;\n}\n\n.avatar__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.avatar__initials {\n line-height: 1;\n text-transform: uppercase;\n}\n\n.avatar__image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n","import { Component, h, Prop, State } 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 @slot icon - The default icon to use when no image or initials are present.\n \n @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n /\n@Component({\n tag: 'six-avatar',\n styleUrl: 'six-avatar.scss',\n shadow: true,\n})\nexport class SixAvatar {\n @State() hasError = false;\n\n /* The image source to use for the avatar. /\n @Prop() image = '';\n\n /* Alternative text for the image. /\n @Prop() alt = '';\n\n /* Initials to use as a fallback when no image is available (1-2 characters max recommended). /\n @Prop() initials = '';\n\n /* The shape of the avatar. */\n @Prop() shape: 'circle' \| 'square' \| 'rounded' = 'circle';\n\n private handleImageError = () => {\n this.hasError = true;\n };\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n avatar: true,\n 'avatar--circle': this.shape === 'circle',\n 'avatar--rounded': this.shape === 'rounded',\n 'avatar--square': this.shape === 'square',\n }}\n role=\"image\"\n aria-label={this.alt}\n tabIndex={0}\n >\n {this.initials === '' && (\n <div part=\"icon\" class=\"avatar__icon\">\n <slot name=\"icon\">\n <six-icon>person</six-icon>\n </slot>\n </div>\n )}\n\n {this.initials && (\n <div part=\"initials\" class=\"avatar__initials\">\n {this.initials}\n </div>\n )}\n\n {this.image && !this.hasError && (\n <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n )}\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-avatar.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,0/BAA0/B,CAAC;AAChhC,wBAAe,YAAY;;MCmBd,SAAS;;;QAeZ,qBAAgB,GAAG;YACzB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB,CAAC;wBAhBkB,KAAK;qBAGT,EAAE;mBAGJ,EAAE;wBAGG,EAAE;qBAG4B,QAAQ;;IAMzD,MAAM;QACJ,QACE,4DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,MAAM,EAAE,IAAI;gBACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;gBACzC,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;gBAC3C,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;aAC1C,EACD,IAAI,EAAC,OAAO,gBACA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC,IAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,KACnB,4DAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACnC,6DAAM,IAAI,EAAC,MAAM,IACf,4EAA2B,CACtB,CACH,CACP,EAEA,IAAI,CAAC,QAAQ,KACZ,4DAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,IAC1C,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3B,4DAAK,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC5F,CACG,EACN;KACH;;;;;;","names":[],"sources":["src/components/six-avatar/six-avatar.scss?tag=six-avatar&encapsulation=shadow","src/components/six-avatar/six-avatar.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/*\n @prop --size: The size of the avatar.\n /\n:host {\n display: inline-block;\n\n --size: 2rem;\n}\n\n.avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: var(--size);\n height: var(--size);\n background-color: var(--six-avatar-background-color);\n font-family: var(--six-font-sans);\n font-size: calc(var(--size) 0.5);\n font-weight: var(--six-font-weight-normal);\n color: var(--six-avatar-color);\n overflow: hidden;\n user-select: none;\n vertical-align: middle;\n cursor: pointer;\n outline: none;\n\n &:hover {\n box-shadow: var(--six-shadow-medium);\n }\n}\n\n.avatar--circle {\n border-radius: var(--six-border-radius-circle);\n}\n\n.avatar--rounded {\n border-radius: var(--six-border-radius-medium);\n}\n\n.avatar--square {\n border-radius: 0;\n}\n\n.avatar__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n.avatar__initials {\n line-height: 1;\n text-transform: uppercase;\n}\n\n.avatar__image {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n","import { Component, h, Prop, State } 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 @slot icon - The default icon to use when no image or initials are present.\n \n @part base - The component's base wrapper.\n * @part icon - The container that wraps the avatar icon.\n * @part initials - The container that wraps the avatar initials.\n * @part image - The avatar image.\n /\n@Component({\n tag: 'six-avatar',\n styleUrl: 'six-avatar.scss',\n shadow: true,\n})\nexport class SixAvatar {\n @State() hasError = false;\n\n /* The image source to use for the avatar. /\n @Prop() image = '';\n\n /* Alternative text for the image. /\n @Prop() alt = '';\n\n /* Initials to use as a fallback when no image is available (1-2 characters max recommended). /\n @Prop() initials = '';\n\n /* The shape of the avatar. */\n @Prop() shape: 'circle' \| 'square' \| 'rounded' = 'circle';\n\n private handleImageError = () => {\n this.hasError = true;\n };\n\n render() {\n return (\n <div\n part=\"base\"\n class={{\n avatar: true,\n 'avatar--circle': this.shape === 'circle',\n 'avatar--rounded': this.shape === 'rounded',\n 'avatar--square': this.shape === 'square',\n }}\n role=\"image\"\n aria-label={this.alt}\n tabIndex={0}\n >\n {this.initials === '' && (\n <div part=\"icon\" class=\"avatar__icon\">\n <slot name=\"icon\">\n <six-icon>person</six-icon>\n </slot>\n </div>\n )}\n\n {this.initials && (\n <div part=\"initials\" class=\"avatar__initials\">\n {this.initials}\n </div>\n )}\n\n {this.image && !this.hasError && (\n <img part=\"image\" class=\"avatar__image\" src={this.image} onError={this.handleImageError} />\n )}\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-badge.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-5390c1d6.js';
+import { r as registerInstance, h } from './index-a7bee415.js';
 const sixBadgeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--six-font-family);font-size:var(--six-font-size-x-small);font-weight:var(--six-font-weight-semibold);letter-spacing:var(--six-letter-spacing-normal);line-height:1;border-radius:var(--six-border-radius-small);white-space:nowrap;padding:3px 6px;user-select:none;cursor:inherit}.badge--info{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.badge--success{background-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.badge--warning{background-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.badge--danger{background-color:var(--six-color-danger-800);color:var(--six-color-white)}.badge--action{background-color:var(--six-color-action-500);color:var(--six-color-white)}.badge--primary{background-color:var(--six-color-clay-50);color:var(--six-color-black)}.badge--pill{border-radius:var(--six-border-radius-pill)}.badge--pulse{animation:pulse 1.5s infinite}.badge--pulse.badge--info{--pulse-color:var(--six-color-web-rock-900)}.badge--pulse.badge--success{--pulse-color:var(--six-color-success-500)}.badge--pulse.badge--warning{--pulse-color:var(--six-color-warning-700)}.badge--pulse.badge--danger{--pulse-color:var(--six-color-danger-800)}.badge--pulse.badge--action{--pulse-color:var(--six-color-action-500)}.badge--pulse.badge--primary{--pulse-color:var(--six-color-clay-50)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)}70%{box-shadow:0 0 0 0.5rem transparent}100%{box-shadow:0 0 0 0 transparent}}";
 const SixBadgeStyle0 = sixBadgeCss;
@@ -11,7 +11,7 @@ const SixBadge = class {
         this.pulse = false;
     }
     render() {
-        return (h("span", { key: '5ccb11ed2b9b1da2aa08e34be5861e554f92ee9d', part: "base", class: {
+        return (h("span", { key: '023a7f78c1ac275db32a3dc65d7bb46a0d4f3aba', part: "base", class: {
                 badge: true,
                 // Types
                 'badge--primary': this.type === 'primary',
@@ -23,7 +23,7 @@ const SixBadge = class {
                 'badge--info': this.type === 'info',
                 'badge--pill': this.pill,
                 'badge--pulse': this.pulse,
-            }, role: "status" }, h("slot", { key: '0de498349b0953001942ed8d831619b196dffc27' })));
+            }, role: "status" }, h("slot", { key: '09f7a992878ce4df2ac75fd99d7de7500cdb80d0' })));
     }
 };
 SixBadge.style = SixBadgeStyle0;

package/dist/esm/six-button.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5390c1d6.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a7bee415.js';
 import { h as hasSlot } from './slot-56531341.js';
 import { s as submitForm } from './form-4b145b7a.js';
-const sixButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none;transform:translateY(-1.5px)}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-100);border-color:var(--six-color-web-rock-400)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:1px}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button.button--action-outline{border-color:var(--six-color-action-500);background-color:var(--six-color-white);color:var(--six-color-action-500)}.button.button--action-outline.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action-outline:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--action-outline:active:not(.button--disabled){border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";
+const sixButtonCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none;transform:translateY(-1.5px)}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:1px}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button.button--action-outline{border-color:var(--six-color-action-500);background-color:var(--six-color-white);color:var(--six-color-action-500)}.button.button--action-outline.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action-outline:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--action-outline:active:not(.button--disabled){border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";
 const SixButtonStyle0 = sixButtonCss;
 const SixButton = class {
@@ -70,7 +70,7 @@ const SixButton = class {
         const isLink = this.href != null;
         const isButton = !isLink;
         const Button = isLink ? 'a' : 'button';
-        return (h("div", { key: 'c87ce8f4189cb72fb39100291583f2f412dc0b5f', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { key: '7e15e06cd70403c93a9ece24072d8713242a737e', ref: (el) => (this.nativeButton = el), part: "base", class: {
+        return (h("div", { key: '733c60d955d509acb4293ff6ac3bd28385fc0179', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, h(Button, { key: 'f1c659d53e416d57c3d743accbc74fa71320fce5', ref: (el) => (this.nativeButton = el), part: "base", class: {
                 button: true,
                 // Types
                 'button--secondary': this.type === 'secondary',
@@ -95,7 +95,7 @@ const SixButton = class {
                 'button--has-label': this.hasLabel,
                 'button--has-prefix': this.hasPrefix,
                 'button--has-suffix': this.hasSuffix,
-            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, h("span", { key: '6f1a67cb4c5fffddeac435113950944cae3305b9', part: "prefix", class: "button__prefix" }, h("slot", { key: 'e2cac00ee1adf284df781b39f9b0d3e61849b738', onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { key: 'b9e080b9b42d1a7d7131acecbc353a4c21b327b1', part: "label", class: "button__label" }, h("slot", { key: 'a58f4b3e01e4d8dd6c91d2306200b5ada52f358c', onSlotchange: this.handleSlotChange })), h("span", { key: '6b1cd7628bc5c52c2a441a31cebd5efdea69444a', part: "suffix", class: "button__suffix" }, h("slot", { key: 'b4901cd7d673da4d78986ecda3c6322810e07389', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { part: "caret", class: "button__caret" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", null))));
+            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, h("span", { key: 'db88ca38040960f384a72f274c215c490abcd7be', part: "prefix", class: "button__prefix" }, h("slot", { key: '19a0077f9a1ea594f669cb3d5f56f7eabd6695b4', onSlotchange: this.handleSlotChange, name: "prefix" })), h("span", { key: 'd6ad98d9a36572228bc9ea4d50263323dac74322', part: "label", class: "button__label" }, h("slot", { key: '33e06a87ab2f18d0f1096fdf1904b1398811c014', onSlotchange: this.handleSlotChange })), h("span", { key: '771e0da37ab98f26cfa6189a9794ff1f6c4424bd', part: "suffix", class: "button__suffix" }, h("slot", { key: 'fa94fccd963ec5a65c84b7620182adb24a329383', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (h("span", { key: '7098e8219a536758498c0e76974080c96e5baecd', part: "caret", class: "button__caret" }, h("svg", { key: 'a8f4e991d39137a45dae525a550edd4ad79cf83f', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '03dbc033c9799c31b856e45cd3d4967f3098bd8e', points: "6 9 12 15 18 9" })))), this.loading && h("six-spinner", { key: '6ab43caf71a3ceadf32817b09e7c4d6885f2ba7a' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/six-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-button.entry.js","mappings":"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","names":[],"sources":["src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n width: auto;\n cursor: pointer;\n}\n\n.button {\n display: inline-flex;\n align-items: stretch;\n justify-content: center;\n width: 100%;\n border-style: solid;\n border-width: var(--six-border-width);\n border-radius: 0;\n font-family: var(--six-font-family);\n font-weight: var(--six-font-weight-semibold);\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n padding: 0;\n transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &.button--disabled {\n pointer-events: none;\n }\n\n ::slotted(six-icon) {\n // Clicks on icons shouldn't prevent the button from gaining focus\n pointer-events: none;\n transform: translateY(-1.5px);\n }\n}\n\n.button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n\n &.button--secondary {\n background-color: var(--six-color-white);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n }\n\n &:focus:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n border-color: var(--six-color-web-rock-400);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-900);\n border-width: 1px;\n }\n }\n\n &.button--primary {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-800);\n border-color: var(--six-color-web-rock-800);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n opacity: 70%;\n }\n }\n\n &.button--link {\n background-color: transparent;\n border-color: transparent;\n color: var(--six-color-action-500);\n\n &.button--disabled {\n color: var(--six-color-web-rock-400);\n }\n\n &:hover:not(.button--disabled) {\n color: var(--six-color-action-600);\n }\n\n &:active:not(.button--disabled) {\n color: var(--six-color-action-light-to-be-defined);\n }\n }\n\n &.button--danger {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-danger-900);\n border-color: var(--six-color-danger-900);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n opacity: 70%;\n }\n }\n\n &.button--warning {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-warning-800);\n border-color: var(--six-color-warning-800);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n opacity: 70%;\n }\n }\n\n &.button--success {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-success-600);\n border-color: var(--six-color-success-600);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n opacity: 70%;\n }\n }\n\n &.button--action {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-action-600);\n border-color: var(--six-color-action-600);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n opacity: 70%;\n }\n }\n\n &.button--action-outline {\n border-color: var(--six-color-action-500);\n background-color: var(--six-color-white);\n color: var(--six-color-action-500);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n }\n\n &:active:not(.button--disabled) {\n border-color: var(--six-color-action-500);\n opacity: 70%;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n font-size: var(--six-button-font-size-small);\n height: var(--six-height-small);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n font-size: var(--six-button-font-size-medium);\n height: var(--six-height-medium);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n font-size: var(--six-button-font-size-large);\n height: var(--six-height-large);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n &.button--small {\n border-radius: var(--six-height-small);\n }\n\n &.button--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.button--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n padding-left: 0;\n padding-right: 0;\n font-size: revert;\n\n &.button--small {\n width: var(--six-height-small);\n border-radius: 50%;\n }\n\n &.button--medium {\n width: var(--six-height-medium);\n border-radius: 50%;\n }\n\n &.button--large {\n width: var(--six-height-large);\n border-radius: 50%;\n }\n\n .button__prefix,\n .button__suffix,\n .button__caret {\n display: none;\n\n svg {\n color: var(--six-color-web-rock-900);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n .button__suffix {\n display: none;\n }\n\n .button__caret {\n display: flex;\n align-items: center;\n\n svg {\n color: var(--six-color-web-rock-900);\n width: 1em;\n height: 1em;\n }\n }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n .button__caret {\n svg {\n color: var(--six-color-white);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n position: relative;\n cursor: wait;\n\n .button__prefix,\n .button__label,\n .button__suffix,\n .button__caret {\n visibility: hidden;\n }\n\n six-spinner {\n --indicator-color: currentColor;\n position: absolute;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n transform: translateY(-50%) translateX(50%);\n pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n &.button--small .button__label {\n padding: 0 var(--six-spacing-small);\n }\n\n &.button--medium .button__label {\n padding: 0 var(--six-spacing-medium);\n }\n\n &.button--large .button__label {\n padding: 0 var(--six-spacing-large);\n }\n}\n\n.button--has-prefix {\n &.button--small {\n padding-left: var(--six-spacing-x-small);\n\n .button__label {\n padding-left: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n}\n\n.button--has-suffix,\n.button--caret {\n &.button--small {\n padding-right: var(--six-spacing-x-small);\n\n .button__label {\n padding-right: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\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 button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n \n @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n /\n\n@Component({\n tag: 'six-button',\n styleUrl: 'six-button.scss',\n shadow: true,\n})\nexport class SixButton {\n private nativeButton?: HTMLButtonElement \| HTMLAnchorElement;\n\n @Element() host!: HTMLSixButtonElement;\n\n @State() hasFocus = false;\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n\n /* The button's type. /\n @Prop({ reflect: true }) type:\n \| 'secondary'\n \| 'primary'\n \| 'link'\n \| 'success'\n \| 'warning'\n \| 'danger'\n \| 'action'\n \| 'action-outline' = 'primary';\n\n /* The button's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to draw the button with a caret for use with dropdowns, popovers, etc. /\n @Prop() caret = false;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true to draw the button in a loading state. /\n @Prop({ reflect: true }) loading = false;\n\n /* Set to true to draw a pill-style button with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* Set to true to draw a circle button. /\n @Prop({ reflect: true }) circle = false;\n\n /* Indicates if activating the button should submit the form. Ignored when `href` is set. /\n @Prop({ reflect: true }) submit = false;\n\n /* Indicates if activating the button should reset the form. /\n @Prop({ reflect: true }) reset = false;\n\n /* An optional name for the button. Ignored when `href` is set. /\n @Prop() name = '';\n\n /* An optional value for the button. Ignored when `href` is set. /\n @Prop() value = '';\n\n /* When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. /\n @Prop() href?: string;\n\n /* Tells the browser where to open the link. Only used when `href` is set. /\n @Prop() target?: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /* Tells the browser to download the linked file as this filename. Only used when `href` is set. /\n @Prop() download?: string;\n\n /* Emitted when the button loses focus. /\n @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the button gains focus. /\n @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n /* Sets focus on the button. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeButton?.focus(options);\n }\n\n /* Removes focus from the button. */\n @Method()\n async removeFocus() {\n this.nativeButton?.blur();\n }\n\n private handleSlotChange = () => {\n this.hasLabel = hasSlot(this.host);\n this.hasPrefix = hasSlot(this.host, 'prefix');\n this.hasSuffix = hasSlot(this.host, 'suffix');\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (this.submit) {\n event.preventDefault();\n submitForm(this.host);\n }\n };\n\n render() {\n const isLink = this.href != null;\n const isButton = !isLink;\n const Button = isLink ? 'a' : 'button';\n\n return (\n <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n <Button\n ref={(el) => (this.nativeButton = el)}\n part=\"base\"\n class={{\n button: true,\n\n // Types\n 'button--secondary': this.type === 'secondary',\n 'button--primary': this.type === 'primary',\n 'button--link': this.type === 'link',\n 'button--success': this.type === 'success',\n 'button--warning': this.type === 'warning',\n 'button--danger': this.type === 'danger',\n 'button--action': this.type === 'action',\n 'button--action-outline': this.type === 'action-outline',\n\n // Sizes\n 'button--small': this.size === 'small',\n 'button--medium': this.size === 'medium',\n 'button--large': this.size === 'large',\n\n // Modifiers\n 'button--caret': this.caret,\n 'button--circle': this.circle,\n 'button--disabled': this.disabled,\n 'button--focused': this.hasFocus,\n 'button--loading': this.loading,\n 'button--pill': this.pill,\n 'button--has-label': this.hasLabel,\n 'button--has-prefix': this.hasPrefix,\n 'button--has-suffix': this.hasSuffix,\n }}\n disabled={isButton ? this.disabled : undefined}\n tabindex={this.disabled ? '-1' : undefined}\n type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n name={isButton ? this.name : undefined}\n value={isButton ? this.value : undefined}\n href={isLink ? this.href : undefined}\n target={isLink && this.target != null ? this.target : undefined}\n download={isLink && this.download != null ? this.download : undefined}\n rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n data-testid=\"button\"\n >\n <span part=\"prefix\" class=\"button__prefix\">\n <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot onSlotchange={this.handleSlotChange} />\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n </span>\n {this.caret && (\n <span part=\"caret\" class=\"button__caret\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </span>\n )}\n\n {this.loading && <six-spinner />}\n </Button>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-button.entry.js","mappings":"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","names":[],"sources":["src/components/six-button/six-button.scss?tag=six-button&encapsulation=shadow","src/components/six-button/six-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n width: auto;\n cursor: pointer;\n}\n\n.button {\n display: inline-flex;\n align-items: stretch;\n justify-content: center;\n width: 100%;\n border-style: solid;\n border-width: var(--six-border-width);\n border-radius: 0;\n font-family: var(--six-font-family);\n font-weight: var(--six-font-weight-semibold);\n text-decoration: none;\n user-select: none;\n white-space: nowrap;\n vertical-align: middle;\n padding: 0;\n transition: var(--six-transition-fast) background-color, var(--six-transition-fast) color,\n var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: inherit;\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &.button--disabled {\n pointer-events: none;\n }\n\n ::slotted(six-icon) {\n // Clicks on icons shouldn't prevent the button from gaining focus\n pointer-events: none;\n transform: translateY(-1.5px);\n }\n}\n\n.button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.button__prefix,\n.button__suffix {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Standard buttons\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button {\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: var(--six-focus-ring-offset);\n }\n\n &.button--secondary {\n background-color: var(--six-color-white);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-300);\n border-color: var(--six-color-web-rock-900);\n border-width: 1px;\n }\n }\n\n &.button--primary {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-800);\n border-color: var(--six-color-web-rock-800);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n opacity: 70%;\n }\n }\n\n &.button--link {\n background-color: transparent;\n border-color: transparent;\n color: var(--six-color-action-500);\n\n &.button--disabled {\n color: var(--six-color-web-rock-400);\n }\n\n &:hover:not(.button--disabled) {\n color: var(--six-color-action-600);\n }\n\n &:active:not(.button--disabled) {\n color: var(--six-color-action-light-to-be-defined);\n }\n }\n\n &.button--danger {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-danger-900);\n border-color: var(--six-color-danger-900);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-danger-800);\n border-color: var(--six-color-danger-800);\n opacity: 70%;\n }\n }\n\n &.button--warning {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-warning-800);\n border-color: var(--six-color-warning-800);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-warning-700);\n border-color: var(--six-color-warning-700);\n opacity: 70%;\n }\n }\n\n &.button--success {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-success-600);\n border-color: var(--six-color-success-600);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-success-500);\n border-color: var(--six-color-success-500);\n opacity: 70%;\n }\n }\n\n &.button--action {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n color: var(--six-color-white);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-action-600);\n border-color: var(--six-color-action-600);\n }\n\n &:active:not(.button--disabled) {\n background-color: var(--six-color-action-500);\n border-color: var(--six-color-action-500);\n opacity: 70%;\n }\n }\n\n &.button--action-outline {\n border-color: var(--six-color-action-500);\n background-color: var(--six-color-white);\n color: var(--six-color-action-500);\n\n &.button--disabled {\n background-color: var(--six-color-web-rock-400);\n border-color: var(--six-color-web-rock-400);\n color: var(--six-color-web-rock-700);\n }\n\n &:hover:not(.button--disabled) {\n background-color: var(--six-color-web-rock-100);\n }\n\n &:active:not(.button--disabled) {\n border-color: var(--six-color-action-500);\n opacity: 70%;\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--small {\n font-size: var(--six-button-font-size-small);\n height: var(--six-height-small);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n}\n\n.button--medium {\n font-size: var(--six-button-font-size-medium);\n height: var(--six-height-medium);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n}\n\n.button--large {\n font-size: var(--six-button-font-size-large);\n height: var(--six-height-large);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--pill {\n &.button--small {\n border-radius: var(--six-height-small);\n }\n\n &.button--medium {\n border-radius: var(--six-height-medium);\n }\n\n &.button--large {\n border-radius: var(--six-height-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Circle modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--circle {\n padding-left: 0;\n padding-right: 0;\n font-size: revert;\n\n &.button--small {\n width: var(--six-height-small);\n border-radius: 50%;\n }\n\n &.button--medium {\n width: var(--six-height-medium);\n border-radius: 50%;\n }\n\n &.button--large {\n width: var(--six-height-large);\n border-radius: 50%;\n }\n\n .button__prefix,\n .button__suffix,\n .button__caret {\n display: none;\n\n svg {\n color: var(--six-color-web-rock-900);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Caret modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--caret {\n .button__suffix {\n display: none;\n }\n\n .button__caret {\n display: flex;\n align-items: center;\n\n svg {\n color: var(--six-color-web-rock-900);\n width: 1em;\n height: 1em;\n }\n }\n}\n\n.button--primary,\n.button--action,\n.button--danger {\n .button__caret {\n svg {\n color: var(--six-color-white);\n }\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Loading modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--loading {\n position: relative;\n cursor: wait;\n\n .button__prefix,\n .button__label,\n .button__suffix,\n .button__caret {\n visibility: hidden;\n }\n\n six-spinner {\n --indicator-color: currentColor;\n position: absolute;\n height: 1em;\n width: 1em;\n top: calc(50% - 0.5em);\n left: calc(50% - 0.5em);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Badges\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n transform: translateY(-50%) translateX(50%);\n pointer-events: none;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Button spacing\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.button--has-label {\n &.button--small .button__label {\n padding: 0 var(--six-spacing-small);\n }\n\n &.button--medium .button__label {\n padding: 0 var(--six-spacing-medium);\n }\n\n &.button--large .button__label {\n padding: 0 var(--six-spacing-large);\n }\n}\n\n.button--has-prefix {\n &.button--small {\n padding-left: var(--six-spacing-x-small);\n\n .button__label {\n padding-left: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-left: var(--six-spacing-small);\n\n .button__label {\n padding-left: var(--six-spacing-small);\n }\n }\n}\n\n.button--has-suffix,\n.button--caret {\n &.button--small {\n padding-right: var(--six-spacing-x-small);\n\n .button__label {\n padding-right: var(--six-spacing-x-small);\n }\n }\n\n &.button--medium {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n\n &.button--large {\n padding-right: var(--six-spacing-small);\n\n .button__label {\n padding-right: var(--six-spacing-small);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { submitForm } from '../../utils/form';\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 button's label.\n * @slot prefix - Used to prepend an icon or similar element to the button.\n * @slot suffix - Used to append an icon or similar element to the button.\n \n @part base - The component's base wrapper.\n * @part prefix - The prefix container.\n * @part label - The button's label.\n * @part suffix - The suffix container.\n * @part caret - The button's caret.\n /\n\n@Component({\n tag: 'six-button',\n styleUrl: 'six-button.scss',\n shadow: true,\n})\nexport class SixButton {\n private nativeButton?: HTMLButtonElement \| HTMLAnchorElement;\n\n @Element() host!: HTMLSixButtonElement;\n\n @State() hasFocus = false;\n @State() hasLabel = false;\n @State() hasPrefix = false;\n @State() hasSuffix = false;\n\n /* The button's type. /\n @Prop({ reflect: true }) type:\n \| 'secondary'\n \| 'primary'\n \| 'link'\n \| 'success'\n \| 'warning'\n \| 'danger'\n \| 'action'\n \| 'action-outline' = 'primary';\n\n /* The button's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to draw the button with a caret for use with dropdowns, popovers, etc. /\n @Prop() caret = false;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true to draw the button in a loading state. /\n @Prop({ reflect: true }) loading = false;\n\n /* Set to true to draw a pill-style button with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* Set to true to draw a circle button. /\n @Prop({ reflect: true }) circle = false;\n\n /* Indicates if activating the button should submit the form. Ignored when `href` is set. /\n @Prop({ reflect: true }) submit = false;\n\n /* Indicates if activating the button should reset the form. /\n @Prop({ reflect: true }) reset = false;\n\n /* An optional name for the button. Ignored when `href` is set. /\n @Prop() name = '';\n\n /* An optional value for the button. Ignored when `href` is set. /\n @Prop() value = '';\n\n /* When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. /\n @Prop() href?: string;\n\n /* Tells the browser where to open the link. Only used when `href` is set. /\n @Prop() target?: '_blank' \| '_parent' \| '_self' \| '_top';\n\n /* Tells the browser to download the linked file as this filename. Only used when `href` is set. /\n @Prop() download?: string;\n\n /* Emitted when the button loses focus. /\n @Event({ eventName: 'six-button-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the button gains focus. /\n @Event({ eventName: 'six-button-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n /* Sets focus on the button. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeButton?.focus(options);\n }\n\n /* Removes focus from the button. */\n @Method()\n async removeFocus() {\n this.nativeButton?.blur();\n }\n\n private handleSlotChange = () => {\n this.hasLabel = hasSlot(this.host);\n this.hasPrefix = hasSlot(this.host, 'prefix');\n this.hasSuffix = hasSlot(this.host, 'suffix');\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n if (this.submit) {\n event.preventDefault();\n submitForm(this.host);\n }\n };\n\n render() {\n const isLink = this.href != null;\n const isButton = !isLink;\n const Button = isLink ? 'a' : 'button';\n\n return (\n <div onClick={this.handleClick} class={{ 'button-wrapper--disabled': this.disabled }}>\n <Button\n ref={(el) => (this.nativeButton = el)}\n part=\"base\"\n class={{\n button: true,\n\n // Types\n 'button--secondary': this.type === 'secondary',\n 'button--primary': this.type === 'primary',\n 'button--link': this.type === 'link',\n 'button--success': this.type === 'success',\n 'button--warning': this.type === 'warning',\n 'button--danger': this.type === 'danger',\n 'button--action': this.type === 'action',\n 'button--action-outline': this.type === 'action-outline',\n\n // Sizes\n 'button--small': this.size === 'small',\n 'button--medium': this.size === 'medium',\n 'button--large': this.size === 'large',\n\n // Modifiers\n 'button--caret': this.caret,\n 'button--circle': this.circle,\n 'button--disabled': this.disabled,\n 'button--focused': this.hasFocus,\n 'button--loading': this.loading,\n 'button--pill': this.pill,\n 'button--has-label': this.hasLabel,\n 'button--has-prefix': this.hasPrefix,\n 'button--has-suffix': this.hasSuffix,\n }}\n disabled={isButton ? this.disabled : undefined}\n tabindex={this.disabled ? '-1' : undefined}\n type={isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined}\n name={isButton ? this.name : undefined}\n value={isButton ? this.value : undefined}\n href={isLink ? this.href : undefined}\n target={isLink && this.target != null ? this.target : undefined}\n download={isLink && this.download != null ? this.download : undefined}\n rel={isLink && this.target != null ? 'noreferrer noopener' : undefined}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n data-testid=\"button\"\n >\n <span part=\"prefix\" class=\"button__prefix\">\n <slot onSlotchange={this.handleSlotChange} name=\"prefix\" />\n </span>\n <span part=\"label\" class=\"button__label\">\n <slot onSlotchange={this.handleSlotChange} />\n </span>\n <span part=\"suffix\" class=\"button__suffix\">\n <slot onSlotchange={this.handleSlotChange} name=\"suffix\" />\n </span>\n {this.caret && (\n <span part=\"caret\" class=\"button__caret\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </span>\n )}\n\n {this.loading && <six-spinner />}\n </Button>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/six-card.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-5390c1d6.js';
+import { r as registerInstance, h, H as Host } from './index-a7bee415.js';
 const sixCardCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;box-shadow:var(--six-shadow-medium);border:1px solid var(--six-color-web-rock-100);padding:var(--six-spacing-medium)}";
 const SixCardStyle0 = sixCardCss;
@@ -8,7 +8,7 @@ const SixCard = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'a14bad051db8ef5f053c2576949e23a97393b8bd' }, h("slot", { key: 'e02884cce6fa685bbcbf01d7314d1494739406d5' })));
+        return (h(Host, { key: 'aad0ccff1f39203ebe4e16e74c13cd7a344f2da8' }, h("slot", { key: '6e713eaee2db4b9dedbd9f5884911bce16f30c88' })));
     }
 };
 SixCard.style = SixCardStyle0;

package/dist/esm/{six-checkbox_2.entry.js → six-checkbox.entry.js} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-5390c1d6.js';
-import { F as FormControl } from './form-control-30c5bd8b.js';
-import { h as hasSlot, a as getTextContent } from './slot-56531341.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a7bee415.js';
+import { F as FormControl } from './form-control-ad1710bf.js';
+import { h as hasSlot } from './slot-56531341.js';
 import { E as EventListeners } from './event-listeners-706d4309.js';
 const sixCheckboxCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:inline-block}.checkbox{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-input-font-size-medium);font-weight:var(--six-input-font-weight);color:var(--six-input-color);vertical-align:middle;cursor:pointer}.checkbox--focused .checkbox__control{outline:var(--six-focus-ring);outline-offset:0}.checkbox__control{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--six-selection-control-toggle-size);min-width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size);border:solid var(--six-border-width) var(--six-input-border-color);border-radius:0;background-color:var(--six-input-background-color);color:var(--six-checkbox-color);transition:var(--six-transition-fast) border-color, var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) box-shadow}.checkbox__control input[type=checkbox]{position:absolute;opacity:0;padding:0;margin:0;pointer-events:none;min-width:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon{display:inline-flex;width:var(--six-selection-control-toggle-size);height:var(--six-selection-control-toggle-size)}.checkbox__control .checkbox__icon svg{width:100%;height:100%}.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-hover)}.checkbox--checked .checkbox__control,.checkbox--indeterminate .checkbox__control{border-color:var(--six-selection-control-color);background-color:var(--six-selection-control-color)}.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover{border-color:var(--six-input-border-color-focus);background-color:var(--six-input-border-color-focus)}.checkbox--disabled{cursor:not-allowed;color:var(--six-input-color-disabled)}.checkbox--disabled .checkbox__control{border-color:var(--six-input-border-color-disabled)}.checkbox--disabled.checkbox--checked .checkbox__control,.checkbox--disabled.checkbox--indeterminate .checkbox__control{background-color:var(--six-selection-control-color-disabled)}.checkbox--invalid:not(.checkbox--disabled) .checkbox__control{border-color:var(--six-input-border-color-danger)}.checkbox__text{line-height:var(--six-selection-control-toggle-size);margin-left:0.5em;user-select:none}";
@@ -100,14 +100,14 @@ const SixCheckbox = class {
         this.hasErrorSlot = hasSlot(this.host, 'error-text');
     }
     render() {
-        return (h(FormControl, { key: '12e158f9bba9dae3abb2db723d16597b232b92f3', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: 'a6227229bf66e4faf9eb71a5b2c313d471fed2e9', part: "base", class: {
+        return (h(FormControl, { key: '3881d6f70869fe371be4bdc084d1e2ee2ffcaad0', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, h("label", { key: 'a42631ccd1b8fb0ee21d575c4f08d92b6349d9f8', part: "base", class: {
                 checkbox: true,
                 'checkbox--checked': this.checked,
                 'checkbox--disabled': this.disabled,
                 'checkbox--focused': this.hasFocus,
                 'checkbox--invalid': this.invalid,
                 'checkbox--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { key: '1d2ff238550165afeff4670e6a7071368d8a9372', part: "control", class: "checkbox__control" }, this.checked && (h("span", { part: "checked-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(3.428571, 3.428571)" }, h("path", { d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { viewBox: "0 0 16 16" }, h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { stroke: "currentColor", "stroke-width": "2" }, h("g", { transform: "translate(2.285714, 6.857143)" }, h("path", { d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { key: 'e6184461c925112762cca5da17cdd5b287a7e88a', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: 'f65e7b7349bb3bc10d1828cb928c377879579944', part: "text", id: this.textId, class: "checkbox__text" }, h("slot", { key: 'b67fbb40e8c47748e6713b708fc7d64be688dd82' })))));
+            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, h("span", { key: 'd1e1080dd43c4e3110b9f272f1dd2185c99ecbc4', part: "control", class: "checkbox__control" }, this.checked && (h("span", { key: 'e02e32f28b9e997ee1baf81aa5d12e00df275e9e', part: "checked-icon", class: "checkbox__icon" }, h("svg", { key: 'b313da8df11a0cce0c8f3c8785e46be998106528', viewBox: "0 0 16 16" }, h("g", { key: '9e49d0e0f0cf1070b1b283cc63586ad34c284302', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: 'a36e0b3299473a24a14ce268052b00f3929e0f31', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: 'f4f0033909e86d0a79bfba797b6ec9f389e2d8c7', transform: "translate(3.428571, 3.428571)" }, h("path", { key: '09a34c50138270daad1968cd330f16d49d1807ce', d: "M0,5.71428571 L3.42857143,9.14285714" }), h("path", { key: '1fa1a9f56875cfd60d1595f05bf8a294bd85aaaa', d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (h("span", { key: 'd263c3e0de02a8c17869ff74b6c864d23d7539e6', part: "indeterminate-icon", class: "checkbox__icon" }, h("svg", { key: '192a9d79ce11edb96b51776a5d0a517ea160d0e6', viewBox: "0 0 16 16" }, h("g", { key: 'ccd9afa0efe3c764521dd1d34e02c2680b68fb37', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, h("g", { key: 'f9d774248f858e7ff08d91a23f4a0290b2000a66', stroke: "currentColor", "stroke-width": "2" }, h("g", { key: 'd098b4ab5ee88a3d90f13488d86a3f37a382fee9', transform: "translate(2.285714, 6.857143)" }, h("path", { key: 'd47b208149e864b67ac8d25c0607b6e5868262a7', d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), h("input", { key: 'e3da5bf1a133e8a31a6abfd8852cd1e8434f1861', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), h("span", { key: '298954f2c0314e37a43fb47a8d1e9a3069f7ee4e', part: "text", id: this.textId, class: "checkbox__text" }, h("slot", { key: '539f5cde4f4a771422145d6faf4a611c1c07b74f' })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -119,69 +119,6 @@ const SixCheckbox = class {
 };
 SixCheckbox.style = SixCheckboxStyle0;
-const sixMenuItemCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block}:focus{outline:none}.menu-item{position:relative;display:flex;align-items:stretch;font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:var(--six-line-height-normal);letter-spacing:var(--six-letter-spacing-normal);text-align:left;color:var(--six-input-color);border-radius:var(--six-border-radius-medium);padding:var(--six-spacing-x-small) var(--six-spacing-medium);transition:var(--six-transition-fast) fill;user-select:none;white-space:nowrap;cursor:pointer}.menu-item.menu-item--focused:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--active:not(.menu-item--disabled){outline:none;background-color:var(--six-menu-item-background-color)}.menu-item.menu-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.menu-item .menu-item__label{flex:1 1 auto;align-self:center}.menu-item .menu-item__prefix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__prefix ::slotted(:last-child){margin-right:0.5em}.menu-item .menu-item__suffix{flex:0 0 auto;display:flex;align-items:center}.menu-item .menu-item__suffix ::slotted(:first-child){margin-left:0.5em}.menu-item .menu-item__check{flex:0 0 auto;display:flex;align-items:center;margin-left:var(--six-spacing-small);visibility:hidden;font-size:inherit}.menu-item .menu-item__checkbox{margin-top:-1px}.menu-item--checked .menu-item__check{visibility:visible}";
-const SixMenuItemStyle0 = sixMenuItemCss;
+export { SixCheckbox as six_checkbox };
-const SixMenuItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.handleCheckboxChange = () => {
-            this.host.dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));
-        };
-        this.hasFocus = false;
-        this.active = false;
-        this.checkType = 'check';
-        this.checked = false;
-        this.value = '';
-        this.disabled = false;
-    }
-    connectedCallback() {
-        this.handleBlur = this.handleBlur.bind(this);
-        this.handleFocus = this.handleFocus.bind(this);
-        this.handleMouseEnter = this.handleMouseEnter.bind(this);
-        this.handleMouseLeave = this.handleMouseLeave.bind(this);
-        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
-    }
-    /** Sets focus on the button. */
-    async setFocus(options) {
-        var _a;
-        (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.focus(options);
-    }
-    /** Removes focus from the button. */
-    async removeFocus() {
-        var _a;
-        (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    /** Returns a text label based on the contents of the menu item's default slot. */
-    getTextLabel() {
-        return Promise.resolve(getTextContent(this.defaultSlot));
-    }
-    handleBlur() {
-        this.hasFocus = false;
-    }
-    handleFocus() {
-        this.hasFocus = true;
-    }
-    handleMouseEnter() {
-        this.active = true;
-    }
-    handleMouseLeave() {
-        this.active = false;
-        this.hasFocus = false;
-    }
-    render() {
-        return (h("div", { key: 'd8c10ca0fc9bd795b87790337f2cc0c792999685', ref: (el) => (this.menuItem = el), part: "base", class: {
-                'menu-item': true,
-                'menu-item--checked': this.checked,
-                'menu-item--disabled': this.disabled,
-                'menu-item--focused': this.hasFocus,
-                'menu-item--active': this.active,
-            }, role: "menuitem", "aria-disabled": this.disabled ? 'true' : 'false', "aria-checked": this.checked ? 'true' : 'false', tabIndex: !this.disabled ? 0 : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, this.checkType === 'checkbox' && (h("span", { class: "menu-item__checkbox" }, h("six-checkbox", { "onSix-checkbox-change": this.handleCheckboxChange, disabled: this.disabled, checked: this.checked }))), h("span", { key: '470f2fee47a4120c0dead3b7996220af9e5274d1', part: "prefix", class: "menu-item__prefix" }, h("slot", { key: 'fdddb68cb266d02f6a6a2b46ffcdecb1d8eb32db', name: "prefix" })), h("span", { key: '6d9fe694ce0e07f2aac3604b905f9194f4764057', part: "label", class: "menu-item__label" }, h("slot", { key: 'ef2903a04191f78955802da5edefd32583305068', ref: (el) => (this.defaultSlot = el) })), h("span", { key: 'd4f6ee6c2789c33deaf08eb585ec7ca283b59170', part: "suffix", class: "menu-item__suffix" }, h("slot", { key: '39a1d59be3d1f9deda4c55b1575a72c647600783', name: "suffix" })), this.checkType === 'check' && (h("span", { part: "checked-icon", class: "menu-item__check" }, h("six-icon", { size: "small", "aria-hidden": "true" }, "check")))));
-    }
-    get host() { return getElement(this); }
-};
-SixMenuItem.style = SixMenuItemStyle0;
-export { SixCheckbox as six_checkbox, SixMenuItem as six_menu_item };
-//# sourceMappingURL=six-checkbox_2.entry.js.map
+//# sourceMappingURL=six-checkbox.entry.js.map