npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.d833923 → 0.0.0-insider.d89f9dc - Mend

@six-group/ui-library 0.0.0-insider.d833923 → 0.0.0-insider.d89f9dc

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 (2504) hide show

package/dist/components/p-qvcACcS1.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/components/six-alert.js CHANGED Viewed

@@ -1,21 +1,33 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { g as getSlot } from './slot.js';
-import { d as defineCustomElement$3 } from './six-icon2.js';
-import { d as defineCustomElement$2 } from './six-icon-button2.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-Cy1zyYSA.js';
+import { g as getSlot } from './p-j3oIB5oT.js';
+import { d as defineCustomElement$3 } from './p-CUHXUlFv.js';
+import { d as defineCustomElement$2 } from './p-DPobEb8D.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)}";
-const SixAlertStyle0 = sixAlertCss;
+const sixAlertCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{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)}";
 const toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });
-const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLElement {
+const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixShow = createEvent(this, "six-alert-show", 7);
-        this.sixAfterShow = createEvent(this, "six-alert-after-show", 7);
-        this.sixHide = createEvent(this, "six-alert-hide", 7);
-        this.sixAfterHide = createEvent(this, "six-alert-after-hide", 7);
+        this.sixShow = createEvent(this, "six-alert-show");
+        this.sixAfterShow = createEvent(this, "six-alert-after-show");
+        this.sixHide = createEvent(this, "six-alert-hide");
+        this.sixAfterHide = createEvent(this, "six-alert-after-hide");
+        this.isVisible = false;
+        /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
+        this.open = false;
+        /** Set to true to make the alert closable. */
+        this.closable = false;
+        /** The type of alert. */
+        this.type = 'primary';
+        /**
+         * The length of time, in milliseconds, the alert will show before closing itself.
+         * If the user hovers over the toast alert, the timer will pause.
+         * On leaving the element with the mouse, the timer resets.
+         */
+        this.duration = Infinity;
         this.handleCloseClick = () => {
             this.hide();
         };
@@ -33,11 +45,6 @@ const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLE
                 this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
             }
         };
-        this.isVisible = false;
-        this.open = false;
-        this.closable = false;
-        this.type = 'primary';
-        this.duration = Infinity;
     }
     handleOpenChange() {
         this.open ? this.show() : this.hide();
@@ -101,7 +108,7 @@ const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLE
                 const sixRoot = document.querySelector('six-root');
                 const headerSlot = getSlot(sixRoot, 'header');
                 const mainSlot = (_a = sixRoot === null || sixRoot === void 0 ? void 0 : sixRoot.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('host main');
-                if (mainSlot != null && mainSlot instanceof HTMLElement) {
+                if (mainSlot != null && mainSlot instanceof H) {
                     const scrollbarWidth = mainSlot.offsetWidth - mainSlot.clientWidth;
                     toastStack.style.right = `${scrollbarWidth}px`;
                 }
@@ -150,14 +157,14 @@ const SixAlert$1 = /*@__PURE__*/ proxyCustomElement(class SixAlert extends HTMLE
                 '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 this; }
     static get watchers() { return {
         "open": ["handleOpenChange"],
         "duration": ["handleDurationChange"]
     }; }
-    static get style() { return SixAlertStyle0; }
+    static get style() { return sixAlertCss; }
 }, [1, "six-alert", {
         "open": [1540],
         "closable": [516],
@@ -199,5 +206,6 @@ const SixAlert = SixAlert$1;
 const defineCustomElement = defineCustomElement$1;
 export { SixAlert, defineCustomElement };
+//# sourceMappingURL=six-alert.js.map
 //# sourceMappingURL=six-alert.js.map

package/dist/components/six-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-alert.js","mappings":"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","names":["SixAlert"],"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.js","mappings":"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","names":["SixAlert","__stencil_proxyCustomElement","HTMLElement"],"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:\n var(--six-transition-medium) opacity ease,\n 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/components/six-avatar.js CHANGED Viewed

@@ -1,32 +1,35 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './six-icon2.js';
+import { p as proxyCustomElement, H, h } from './p-Cy1zyYSA.js';
+import { d as defineCustomElement$2 } from './p-CUHXUlFv.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;
+const sixAvatarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{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 SixAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SixAvatar extends HTMLElement {
+const SixAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SixAvatar extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.handleImageError = () => {
-            this.hasError = true;
-        };
         this.hasError = false;
+        /** The image source to use for the avatar. */
         this.image = '';
+        /** Alternative text for the image. */
         this.alt = '';
+        /** Initials to use as a fallback when no image is available (1-2 characters max recommended). */
         this.initials = '';
+        /** The shape of the avatar. */
         this.shape = 'circle';
+        this.handleImageError = () => {
+            this.hasError = true;
+        };
     }
     render() {
-        return (h("div", { key: 'a34616731683542d8bbdc16778ab34093654d773', part: "base", class: {
+        return (h("div", { key: '1aaade211fdffbe4e64a03942be0f2dc045f2ba5', 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: '08f51e38d5961efe8a1edd229b19173a76773fac', part: "icon", class: "avatar__icon" }, h("slot", { key: '93a72971ee8e0e0cc700341520f456e8284b76e6', name: "icon" }, h("six-icon", { key: 'bc3fcbdde635da80270e3ea545b11113ee6512c1' }, "person")))), this.initials && (h("div", { key: '0531c544e1400e170161de648afeb1a27ddcbfb6', part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (h("img", { key: 'aae3851a20d505d4ee266828ac777a2518bdaf6e', part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
     }
-    static get style() { return SixAvatarStyle0; }
+    static get style() { return sixAvatarCss; }
 }, [1, "six-avatar", {
         "image": [1],
         "alt": [1],
@@ -57,5 +60,6 @@ const SixAvatar = SixAvatar$1;
 const defineCustomElement = defineCustomElement$1;
 export { SixAvatar, defineCustomElement };
+//# sourceMappingURL=six-avatar.js.map
 //# sourceMappingURL=six-avatar.js.map

package/dist/components/six-avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-avatar.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,~~0/BAA0/B~~,~~CAAC~~;~~AAChhC~~,~~wBAAe~~,~~YAAY~~;;~~MCmBdA~~,~~WAAS;;;;;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":["SixAvatar"],"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.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,qnCAAqnC;;MCoB7nCA,WAAS,iBAAAC,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;AAMW,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGjB,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAG,CAAA,GAAA,GAAG,EAAE;;AAGR,QAAA,IAAQ,CAAA,QAAA,GAAG,EAAE;;AAGb,QAAA,IAAK,CAAA,KAAA,GAAoC,QAAQ;AAEjD,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,SAAC;AAoCF;IAlCC,MAAM,GAAA;AACJ,QAAA,QACE,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,MAAM,EAAE,IAAI;AACZ,gBAAA,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;AACzC,gBAAA,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;AAC3C,gBAAA,gBAAgB,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;AAC1C,aAAA,EACD,IAAI,EAAC,OAAO,EACA,YAAA,EAAA,IAAI,CAAC,GAAG,EACpB,QAAQ,EAAE,CAAC,EAAA,EAEV,IAAI,CAAC,QAAQ,KAAK,EAAE,KACnB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,EAAA,EACnC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAA,EACf,CAA2B,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,QAAA,CAAA,CACtB,CACH,CACP,EAEA,IAAI,CAAC,QAAQ,KACZ,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,kBAAkB,EAAA,EAC1C,IAAI,CAAC,QAAQ,CACV,CACP,EAEA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,CAAI,CAC5F,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixAvatar","__stencil_proxyCustomElement","HTMLElement"],"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/components/six-badge.js CHANGED Viewed

@@ -1,19 +1,21 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './p-Cy1zyYSA.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;
+const sixBadgeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{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 SixBadge$1 = /*@__PURE__*/ proxyCustomElement(class SixBadge extends HTMLElement {
+const SixBadge$1 = /*@__PURE__*/ proxyCustomElement(class SixBadge extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /** The badge's type. */
         this.type = 'primary';
+        /** Set to true to draw a pill-style badge with rounded edges. */
         this.pill = false;
+        /** Set to true to make the badge pulsate to draw attention. */
         this.pulse = false;
     }
     render() {
-        return (h("span", { key: '25b1dedcb8bc33ec21f80ce88ca7a30ea62181c0', part: "base", class: {
+        return (h("span", { key: '6352c1b6f7b593982f42b4e26862f365d9aa32fa', part: "base", class: {
                 badge: true,
                 // Types
                 'badge--primary': this.type === 'primary',
@@ -25,9 +27,9 @@ const SixBadge$1 = /*@__PURE__*/ proxyCustomElement(class SixBadge extends HTMLE
                 'badge--info': this.type === 'info',
                 'badge--pill': this.pill,
                 'badge--pulse': this.pulse,
-            }, role: "status" }, h("slot", { key: 'ac5c9645468d85700838f1cfaf71546bbb1b747b' })));
+            }, role: "status" }, h("slot", { key: 'df34cfd3b2ecd789592b0436948a4918616dcf9f' })));
     }
-    static get style() { return SixBadgeStyle0; }
+    static get style() { return sixBadgeCss; }
 }, [1, "six-badge", {
         "type": [1],
         "pill": [4],
@@ -51,5 +53,6 @@ const SixBadge = SixBadge$1;
 const defineCustomElement = defineCustomElement$1;
 export { SixBadge, defineCustomElement };
+//# sourceMappingURL=six-badge.js.map
 //# sourceMappingURL=six-badge.js.map

package/dist/components/six-badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,~~sqDAAsqD~~,~~CAAC~~;~~AAC3rD~~,~~uBAAe~~,~~WAAW;;MCiBbA~~,~~UAAQ~~;;;;;~~oBAE4E~~,SAAS~~;oBAGzF~~,~~KAAK;qBAGJ~~,KAAK;;~~IAErB~~,MAAM;~~QACJ~~,QACE,~~6DACE~~,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;~~gBACL~~,KAAK,EAAE,IAAI;;~~gBAGX~~,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;~~gBACzC~~,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;~~gBAC7C~~,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;~~gBACzC~~,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;~~gBACzC~~,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;~~gBACvC~~,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;~~gBACvC~~,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI;gBACxB,cAAc,EAAE,IAAI,CAAC,KAAK;~~aAC3B~~,EACD,IAAI,EAAC,QAAQ,~~IAEb~~,~~8DAAQ~~,CACH~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SixBadge"],"sources":["src/components/six-badge/six-badge.scss?tag=six-badge&encapsulation=shadow","src/components/six-badge/six-badge.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-flex;\n}\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-x-small);\n font-weight: var(--six-font-weight-semibold);\n letter-spacing: var(--six-letter-spacing-normal);\n line-height: 1;\n border-radius: var(--six-border-radius-small);\n white-space: nowrap;\n padding: 3px 6px;\n user-select: none;\n cursor: inherit;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--info {\n background-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n}\n\n.badge--success {\n background-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n}\n\n.badge--warning {\n background-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n}\n\n.badge--danger {\n background-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n}\n\n.badge--action {\n background-color: var(--six-color-action-500);\n color: var(--six-color-white);\n}\n\n.badge--primary {\n background-color: var(--six-color-clay-50);\n color: var(--six-color-black);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pill {\n border-radius: var(--six-border-radius-pill);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pulse modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pulse {\n animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--info {\n --pulse-color: var(--six-color-web-rock-900);\n}\n\n.badge--pulse.badge--success {\n --pulse-color: var(--six-color-success-500);\n}\n\n.badge--pulse.badge--warning {\n --pulse-color: var(--six-color-warning-700);\n}\n\n.badge--pulse.badge--danger {\n --pulse-color: var(--six-color-danger-800);\n}\n\n.badge--pulse.badge--action {\n --pulse-color: var(--six-color-action-500);\n}\n\n.badge--pulse.badge--primary {\n --pulse-color: var(--six-color-clay-50);\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 var(--pulse-color);\n }\n 70% {\n box-shadow: 0 0 0 0.5rem transparent;\n }\n 100% {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n","import { Component, Prop, h } 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 - The badge's content.\n \n @part base - The base wrapper\n /\n\n@Component({\n tag: 'six-badge',\n styleUrl: 'six-badge.scss',\n shadow: true,\n})\nexport class SixBadge {\n /* The badge's type. /\n @Prop() type: 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'action' = 'primary';\n\n /* Set to true to draw a pill-style badge with rounded edges. /\n @Prop() pill = false;\n\n /* Set to true to make the badge pulsate to draw attention. */\n @Prop() pulse = false;\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n badge: true,\n\n // Types\n 'badge--primary': this.type === 'primary',\n 'badge--secondary': this.type === 'secondary',\n 'badge--success': this.type === 'success',\n 'badge--warning': this.type === 'warning',\n 'badge--danger': this.type === 'danger',\n 'badge--action': this.type === 'action',\n 'badge--info': this.type === 'info',\n 'badge--pill': this.pill,\n 'badge--pulse': this.pulse,\n }}\n role=\"status\"\n >\n <slot />\n </span>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-badge.js","mappings":";;AAAA,MAAM,WAAW,GAAG,iyDAAiyD;;MCkBxyDA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAAmF,SAAS;;AAGhG,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;;AAGZ,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AA0BtB;IAxBC,MAAM,GAAA;AACJ,QAAA,QACE,CACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;AACL,gBAAA,KAAK,EAAE,IAAI;;AAGX,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,gBAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,WAAW;AAC7C,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,gBAAA,gBAAgB,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;AACzC,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACvC,gBAAA,eAAe,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACvC,gBAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;gBACnC,aAAa,EAAE,IAAI,CAAC,IAAI;gBACxB,cAAc,EAAE,IAAI,CAAC,KAAK;AAC3B,aAAA,EACD,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixBadge","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-badge/six-badge.scss?tag=six-badge&encapsulation=shadow","src/components/six-badge/six-badge.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-flex;\n}\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-x-small);\n font-weight: var(--six-font-weight-semibold);\n letter-spacing: var(--six-letter-spacing-normal);\n line-height: 1;\n border-radius: var(--six-border-radius-small);\n white-space: nowrap;\n padding: 3px 6px;\n user-select: none;\n cursor: inherit;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--info {\n background-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n}\n\n.badge--success {\n background-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n}\n\n.badge--warning {\n background-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n}\n\n.badge--danger {\n background-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n}\n\n.badge--action {\n background-color: var(--six-color-action-500);\n color: var(--six-color-white);\n}\n\n.badge--primary {\n background-color: var(--six-color-clay-50);\n color: var(--six-color-black);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pill {\n border-radius: var(--six-border-radius-pill);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pulse modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pulse {\n animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--info {\n --pulse-color: var(--six-color-web-rock-900);\n}\n\n.badge--pulse.badge--success {\n --pulse-color: var(--six-color-success-500);\n}\n\n.badge--pulse.badge--warning {\n --pulse-color: var(--six-color-warning-700);\n}\n\n.badge--pulse.badge--danger {\n --pulse-color: var(--six-color-danger-800);\n}\n\n.badge--pulse.badge--action {\n --pulse-color: var(--six-color-action-500);\n}\n\n.badge--pulse.badge--primary {\n --pulse-color: var(--six-color-clay-50);\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 var(--pulse-color);\n }\n 70% {\n box-shadow: 0 0 0 0.5rem transparent;\n }\n 100% {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n","import { Component, Prop, h } 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 - The badge's content.\n \n @part base - The base wrapper\n /\n\n@Component({\n tag: 'six-badge',\n styleUrl: 'six-badge.scss',\n shadow: true,\n})\nexport class SixBadge {\n /* The badge's type. /\n @Prop() type: 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'action' = 'primary';\n\n /* Set to true to draw a pill-style badge with rounded edges. /\n @Prop() pill = false;\n\n /* Set to true to make the badge pulsate to draw attention. */\n @Prop() pulse = false;\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n badge: true,\n\n // Types\n 'badge--primary': this.type === 'primary',\n 'badge--secondary': this.type === 'secondary',\n 'badge--success': this.type === 'success',\n 'badge--warning': this.type === 'warning',\n 'badge--danger': this.type === 'danger',\n 'badge--action': this.type === 'action',\n 'badge--info': this.type === 'info',\n 'badge--pill': this.pill,\n 'badge--pulse': this.pulse,\n }}\n role=\"status\"\n >\n <slot />\n </span>\n );\n }\n}\n"],"version":3}

package/dist/components/six-button.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import { S as SixButton$1, d as defineCustomElement$1 } from './six-button2.js';
+import { S as SixButton$1, d as defineCustomElement$1 } from './p-AdR5CKkb.js';
 const SixButton = SixButton$1;
 const defineCustomElement = defineCustomElement$1;
 export { SixButton, defineCustomElement };
+//# sourceMappingURL=six-button.js.map
 //# sourceMappingURL=six-button.js.map

package/dist/components/six-card.js CHANGED Viewed

@@ -1,18 +1,17 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h, d as Host } from './p-Cy1zyYSA.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;
+const sixCardCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block;box-shadow:var(--six-shadow-medium);border:1px solid var(--six-color-web-rock-100);padding:var(--six-spacing-medium)}";
-const SixCard$1 = /*@__PURE__*/ proxyCustomElement(class SixCard extends HTMLElement {
+const SixCard$1 = /*@__PURE__*/ proxyCustomElement(class SixCard extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '0b6837d133740f4676990bd247dd15793e34e08f' }, h("slot", { key: '4207482d7f3837f843d79921d2a0275b286b47df' })));
+        return (h(Host, { key: 'd2459e12a9f8274f095a3d09a077c59a7f091dea' }, h("slot", { key: '1619a201af796250d6808a0974047644e7fb6a69' })));
     }
-    static get style() { return SixCardStyle0; }
+    static get style() { return sixCardCss; }
 }, [1, "six-card"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -32,5 +31,6 @@ const SixCard = SixCard$1;
 const defineCustomElement = defineCustomElement$1;
 export { SixCard, defineCustomElement };
+//# sourceMappingURL=six-card.js.map
 //# sourceMappingURL=six-card.js.map

package/dist/components/six-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,~~2PAA2P~~,~~CAAC;AAC/Q~~,~~sBAAe~~,~~UAAU;;MCaZA~~,~~SAAO~~;;;;;;IAClB,MAAM;QACJ,QACE,EAAC,IAAI,~~uDACH~~,~~8DAAQ~~,CACH~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;~~","names":["SixCard"],"sources":["src/components/six-card/six-card.scss?tag=six-card&encapsulation=shadow","src/components/six-card/six-card.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n box-shadow: var(--six-shadow-medium);\n border: 1px solid var(--six-color-web-rock-100);\n padding: var(--six-spacing-medium);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the content of the card.\n */\n\n@Component({\n tag: 'six-card',\n styleUrl: 'six-card.scss',\n shadow: true,\n})\nexport class SixCard {\n render() {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,sXAAsX;;MCc5XA,SAAO,iBAAAC,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;;;;;;IAClB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;","names":["SixCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-card/six-card.scss?tag=six-card&encapsulation=shadow","src/components/six-card/six-card.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n box-shadow: var(--six-shadow-medium);\n border: 1px solid var(--six-color-web-rock-100);\n padding: var(--six-spacing-medium);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n @slot - Used to define the content of the card.\n */\n\n@Component({\n tag: 'six-card',\n styleUrl: 'six-card.scss',\n shadow: true,\n})\nexport class SixCard {\n render() {\n return (\n <Host>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/six-checkbox.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import { S as SixCheckbox$1, d as defineCustomElement$1 } from './six-checkbox2.js';
+import { S as SixCheckbox$1, d as defineCustomElement$1 } from './p-BDYD7iMs.js';
 const SixCheckbox = SixCheckbox$1;
 const defineCustomElement = defineCustomElement$1;
 export { SixCheckbox, defineCustomElement };
+//# sourceMappingURL=six-checkbox.js.map
 //# sourceMappingURL=six-checkbox.js.map

package/dist/components/six-date.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+interface SixDate extends Components.SixDate, HTMLElement {}
+export const SixDate: {
+    prototype: SixDate;
+    new (): SixDate;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;