npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.593da1a → 0.0.0-insider.5bdd528 - Mend

@six-group/ui-library 0.0.0-insider.593da1a → 0.0.0-insider.5bdd528

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

package/dist/collection/components/six-drawer/six-drawer.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { lockBodyScrolling, unlockBodyScrolling } from "../../utils/scroll";
 import { hasSlot } from "../../utils/slot";
 import Modal from "../../utils/modal";
+import { animateTo } from "../../utils/animation";
 let id = 0;
 /**
  * @since 1.0
@@ -49,18 +50,15 @@ export class SixDrawer {
          */
         this.noHeader = false;
         this.handleCloseClick = () => {
-            this.hide();
+            this.preventClose('close-button');
         };
         this.handleKeyDown = (event) => {
             if (event.key === 'Escape') {
-                this.hide();
+                this.preventClose('keyboard');
             }
         };
         this.handleOverlayClick = () => {
-            const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-            if (!sixOverlayDismiss.defaultPrevented) {
-                this.hide();
-            }
+            this.preventClose('overlay');
         };
         this.handleSlotChange = () => {
             this.hasFooter = hasSlot(this.host, 'footer');
@@ -138,6 +136,14 @@ export class SixDrawer {
         this.modal.deactivate();
         unlockBodyScrolling(this.host);
     }
+    preventClose(source) {
+        const sixRequestClose = this.sixRequestClose.emit({ source });
+        if (sixRequestClose.defaultPrevented && this.panel) {
+            animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });
+            return;
+        }
+        this.hide();
+    }
     resetTransitionVariables() {
         this.isVisible = this.open;
         this.willShow = false;
@@ -145,7 +151,7 @@ export class SixDrawer {
         this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
     render() {
-        return (h("div", { key: 'f35600ecd84f97b647ab9cc98d56c360f2f03408', ref: (el) => (this.drawer = el), part: "base", class: {
+        return (h("div", { key: '17d045e1a06aa424bc59f7316525df73ae031227', ref: (el) => (this.drawer = el), part: "base", class: {
                 drawer: true,
                 'drawer--open': this.open,
                 'drawer--visible': this.isVisible,
@@ -156,7 +162,7 @@ export class SixDrawer {
                 'drawer--contained': this.contained,
                 'drawer--fixed': !this.contained,
                 'drawer--has-footer': this.hasFooter,
-            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '178e61c83b4c635041c51c89553ed834f6424cd2', part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), h("div", { key: '71374a7cae137e002760f3ff5b5ee69ad4ac4675', ref: (el) => (this.panel = el), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { key: '3a66c231ad202b211c2df81b74a8a6e937be661b', part: "header", class: "drawer__header" }, h("span", { key: '80205d6fccb2510b23473dba6098462221f9d43e', part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { key: '13d986fb13c2cded9ce9980cf12da1b34de9ef28', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: 'd62b14dc24849d16f1dffbba0f98126fc95de336', exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: 'd0f5b6df5230e996d6b196095589a6629b271fab', part: "body", class: "drawer__body" }, h("slot", { key: '6eda0430f1fe27d28a85a6e689fbb9025ee773e7' })), h("footer", { key: '8c71f25b2bbb980a7aabee038ea4d7a58f177970', part: "footer", class: "drawer__footer" }, h("slot", { key: 'e7dfb09c1cd30deccfd30ce28849e32cdaebe69f', name: "footer", onSlotchange: this.handleSlotChange })))));
+            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '804fcb75cc49156bfcb6af8958a40c33c20f8202', part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), h("div", { key: 'e5095b200d370fe98163b3f0fa2bbf42ece7fa5f', ref: (el) => (this.panel = el), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (h("header", { key: 'c479cfa062277a6f1cf0f7433cff73e94139faea', part: "header", class: "drawer__header" }, h("span", { key: '8d60e0eb1cecc9c8f2091b5b8c9aefaa2aac3c91', part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { key: '26c5fb0feb42c9db7625e98f10cd5cbd0acfd742', name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { key: '454ee7cea511b470ae224c6559ee99f10e9cf095', exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), h("div", { key: '4f07be9128e7d2a292298b3e22ec0e5105adc3f3', part: "body", class: "drawer__body" }, h("slot", { key: '856a4bd2ee8dacc8b6124d87d8e501a8bd8c3f23' })), h("footer", { key: '721ca11e6b5470d2170d9bc929ba2d973faf9117', part: "footer", class: "drawer__footer" }, h("slot", { key: 'afb8d35c7fee0fa3e9833ea1b381c2d81f8cb5b0', name: "footer", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "six-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -387,23 +393,23 @@ export class SixDrawer {
                     }
                 }
             }, {
-                "method": "sixOverlayDismiss",
-                "name": "six-drawer-overlay-dismiss",
+                "method": "sixRequestClose",
+                "name": "six-drawer-request-close",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing."
+                    "text": "Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\npressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\nthe drawer will result in destructive behavior such as data loss."
                 },
                 "complexType": {
-                    "original": "EmptyPayload",
-                    "resolved": "undefined",
+                    "original": "SixDrawerRequestClose",
+                    "resolved": "SixDrawerRequestClose",
                     "references": {
-                        "EmptyPayload": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::EmptyPayload"
+                        "SixDrawerRequestClose": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-drawer/six-drawer.tsx",
+                            "id": "src/components/six-drawer/six-drawer.tsx::SixDrawerRequestClose"
                         }
                     }
                 }

package/dist/collection/components/six-drawer/six-drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-drawer.js","sourceRoot":"","sources":["../../../src/components/six-drawer/six-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\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 drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n \n @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n /\n\n@Component({\n tag: 'six-drawer',\n styleUrl: 'six-drawer.scss',\n shadow: true,\n})\nexport class SixDrawer {\n private componentId = `drawer-${++id}`;\n private drawer?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDrawerElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /* Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /\n The drawer's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n /\n @Prop() label = '';\n\n /* The direction from which the drawer will open. /\n @Prop() placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'right';\n\n /\n By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this prop and add `position: relative` to the parent.\n /\n @Prop() contained = false;\n\n /\n Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the drawer.\n /\n @Prop() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the drawer opens and all transitions are complete. /\n @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the drawer closes and all transitions are complete. /\n @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the drawer, such as an input or button.\n /\n @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. /\n @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => (this.contained ? null : this.panel?.focus()),\n });\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n\n // Show on init if open\n if (this.open) {\n this.show();\n // if the sidebar is open by default we need to manually reset the\n // transition variables since there will be no transition event\n this.resetTransitionVariables();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /* Shows the drawer /\n @Method()\n async show() {\n if (this.willShow \|\| this.modal == null \|\| this.panel == null \|\| this.drawer == null) {\n return;\n }\n const panel = this.panel;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: true });\n }\n });\n }\n }\n\n /* Hides the drawer /\n @Method()\n async hide() {\n if (this.willHide \|\| this.modal == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n }\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.hide();\n }\n };\n\n private handleOverlayClick = () => {\n const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n if (!sixOverlayDismiss.defaultPrevented) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\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 === 'transform' && target.classList.contains('drawer__panel')) {\n this.resetTransitionVariables();\n }\n };\n\n private resetTransitionVariables() {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.drawer = el)}\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n 'drawer--visible': this.isVisible,\n 'drawer--top': this.placement === 'top',\n 'drawer--right': this.placement === 'right',\n 'drawer--bottom': this.placement === 'bottom',\n 'drawer--left': this.placement === 'left',\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"drawer__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"drawer__header\">\n <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n <six-icon-button\n exportparts=\"base:close-button\"\n class=\"drawer__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-drawer.js","sourceRoot":"","sources":["../../../src/components/six-drawer/six-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\nimport { animateTo } from '../../utils/animation';\n\nexport interface SixDrawerRequestClose {\n source: 'close-button' \| 'keyboard' \| 'overlay';\n}\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 drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n \n @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n /\n\n@Component({\n tag: 'six-drawer',\n styleUrl: 'six-drawer.scss',\n shadow: true,\n})\nexport class SixDrawer {\n private componentId = `drawer-${++id}`;\n private drawer?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDrawerElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /* Indicates whether the drawer is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /\n The drawer's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n /\n @Prop() label = '';\n\n /* The direction from which the drawer will open. /\n @Prop() placement: 'top' \| 'right' \| 'bottom' \| 'left' = 'right';\n\n /\n By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n * its parent element, set this prop and add `position: relative` to the parent.\n /\n @Prop() contained = false;\n\n /\n Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n * accessible way for users to dismiss the drawer.\n /\n @Prop() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-drawer-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the drawer opens and all transitions are complete. /\n @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-drawer-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the drawer closes and all transitions are complete. /\n @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the drawer, such as an input or button.\n /\n @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\n * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\n * the drawer will result in destructive behavior such as data loss.\n /\n @Event({ eventName: 'six-drawer-request-close' }) sixRequestClose!: EventEmitter<SixDrawerRequestClose>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => (this.contained ? null : this.panel?.focus()),\n });\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n\n // Show on init if open\n if (this.open) {\n this.show();\n // if the sidebar is open by default we need to manually reset the\n // transition variables since there will be no transition event\n this.resetTransitionVariables();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /* Shows the drawer /\n @Method()\n async show() {\n if (this.willShow \|\| this.modal == null \|\| this.panel == null \|\| this.drawer == null) {\n return;\n }\n const panel = this.panel;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n\n // Lock body scrolling only if the drawer isn't contained\n if (!this.contained) {\n this.modal.activate();\n lockBodyScrolling(this.host);\n }\n\n if (this.open) {\n // Wait for the next frame before setting initial focus so the dialog is technically visible\n requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: true });\n }\n });\n }\n }\n\n /* Hides the drawer /\n @Method()\n async hide() {\n if (this.willHide \|\| this.modal == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n }\n\n private handleCloseClick = () => {\n this.preventClose('close-button');\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.preventClose('keyboard');\n }\n };\n\n private handleOverlayClick = () => {\n this.preventClose('overlay');\n };\n\n private preventClose(source: 'close-button' \| 'keyboard' \| 'overlay') {\n const sixRequestClose = this.sixRequestClose.emit({ source });\n\n if (sixRequestClose.defaultPrevented && this.panel) {\n animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });\n return;\n }\n\n this.hide();\n }\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\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 === 'transform' && target.classList.contains('drawer__panel')) {\n this.resetTransitionVariables();\n }\n };\n\n private resetTransitionVariables() {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n\n render() {\n return (\n <div\n ref={(el) => (this.drawer = el)}\n part=\"base\"\n class={{\n drawer: true,\n 'drawer--open': this.open,\n 'drawer--visible': this.isVisible,\n 'drawer--top': this.placement === 'top',\n 'drawer--right': this.placement === 'right',\n 'drawer--bottom': this.placement === 'bottom',\n 'drawer--left': this.placement === 'left',\n 'drawer--contained': this.contained,\n 'drawer--fixed': !this.contained,\n 'drawer--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"drawer__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"drawer__header\">\n <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n <six-icon-button\n exportparts=\"base:close-button\"\n class=\"drawer__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"drawer__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"drawer__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/six-dropdown/six-dropdown.js CHANGED Viewed

@@ -482,19 +482,19 @@ export class SixDropdown {
         }
     }
     render() {
-        return (h("div", { key: '04210ff1a4689e32c72f73ee76a94cbe9867b0de', part: "base", id: this.componentId, class: {
+        return (h("div", { key: '46305375a199fb17ae66ca3b6678634844d0b8a2', part: "base", id: this.componentId, class: {
                 dropdown: true,
                 'dropdown--open': this.open,
-            } }, h("span", { key: '9eb3c0e703b08734e9458b25021c0844d255ec6e', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, h("slot", { key: '5cec1b43f07f830dfdebb3a71eb56f3233a539c4', name: "trigger", ref: (el) => (this.triggerSlot = el), onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8761367cfff9b66fdd4a7733f1c59440a507178b', ref: (el) => (this.positioner = el), class: {
+            } }, h("span", { key: '2a53d2cf2b75607614f39675cabfe1362b297e70', part: "trigger", class: "dropdown__trigger", ref: (el) => (this.trigger = el), onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown, onKeyUp: this.handleTriggerKeyUp }, h("slot", { key: 'd8abcd455c768fded48df4c18b8191e365db4ab1', name: "trigger", ref: (el) => (this.triggerSlot = el), onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'fd0e0352800daebdc9843442901cad9769d3199a', ref: (el) => (this.positioner = el), class: {
                 dropdown__positioner: true,
                 dropdown__positioner__filtered: (this.filter || this.asyncFilter) && !this.hoist,
-            } }, h("div", { key: '2ab6c7166cea3892e429db21f3b56e7a81e94735', ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId }, this.filterEnabled && (h("six-input", { key: 'f7425daad22c1a756dfda4ecefa6293ac5cdcca5', class: {
+            } }, h("div", { key: '2d72ca0ba1a5cbb480727e325048f7a171fb7af8', ref: (el) => (this.panel = el), part: "panel", class: "dropdown__panel", role: "menu", "aria-hidden": this.open ? 'false' : 'true', "aria-labelledby": this.componentId }, this.filterEnabled && (h("six-input", { key: 'a22263fb924be51081598579391774c82a09852f', class: {
                 filter: true,
                 'filter-hidden': !this.open,
-            }, "dropdown-search": true, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder }, h("six-icon", { key: '6416f4e28bc437c18b1cff0e0a9eaa54c9aba3d5', class: "filter__icon", slot: "suffix", size: "small" }, "search"))), h("div", { key: '479140f2107baad72960b415bd69d9ac80bb6f64', class: {
+            }, "dropdown-search": true, "aria-hidden": this.open ? 'false' : 'true', ref: (el) => (this.filterInputElement = el), placeholder: this.filterPlaceholder }, h("six-icon", { key: '7a8fc9e25e7e209b5b0aa05af5dcefca87e3b9d5', class: "filter__icon", slot: "suffix", size: "small" }, "search"))), h("div", { key: 'bedcab39d656be8ce064852ef9344b4fbbf60b17', class: {
                 dropdown__panel__scroll: true,
                 'dropdown__panel__scroll--virtual': this.virtualScroll,
-            }, onScroll: this.handleDropdownScroll, ref: (el) => (this.scrollPanel = el) }, h("slot", { key: '539cda534eb5ef042526b66487bec3d22c89fdd7', ref: (el) => (this.panelSlot = el) }), this.options.length > 0 && (h("six-menu", { key: '6294182636491e13514380d9516f904f8a9b2204', part: "menu", items: this.renderedOptions, virtualScroll: this.virtualScroll }))), h("slot", { key: '9029f9f9a69d2b6fd19b36755ab9771181a7d1c6', name: "dropdown-footer" })))));
+            }, onScroll: this.handleDropdownScroll, ref: (el) => (this.scrollPanel = el) }, h("slot", { key: '21acba56de1fba98afdfda60e8b09816a70ac057', ref: (el) => (this.panelSlot = el) }), this.options.length > 0 && (h("six-menu", { key: 'd7d429d062bf111ffdaf667ada0efe640136871a', part: "menu", items: this.renderedOptions, virtualScroll: this.virtualScroll }))), h("slot", { key: 'e23be3aa659ed7fa4a513d82c982733b58a6e9db', name: "dropdown-footer" })))));
     }
     static get is() { return "six-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-error/six-error.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { h } from "@stencil/core";
  */
 export class SixError {
     render() {
-        return (h("div", { key: '35e774adc232f29f26ed0dcc98f6befe1f2a6735', class: "six-error-container" }, h("slot", { key: '3ef7bc24a95509089baaf676986a5a6c91d32274' })));
+        return (h("div", { key: 'c58e9de60b37b5b3cd9744b606136edcf0d58d9c', class: "six-error-container" }, h("slot", { key: '7dd0aa74aad5b8b2be2e9aed41f44b29e7ffed7c' })));
     }
     static get is() { return "six-error"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-error-page/six-error-page.js CHANGED Viewed

@@ -94,7 +94,7 @@ export class SixErrorPage {
         return DESCRIPTION_PER_ERROR_CODE[this.errorCode][this.language];
     }
     render() {
-        return (h("div", { key: '4ea2ec6cfd20308f5436337b7c76c5fe754aa24f', part: "container" }, h("div", { key: '1324fd2555df87799bdd23d36adcb7b00885a076', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: 'e7efd056f880c92385a9945d46c1c04c46872fc3', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: '75d52fbe4b3561c226c5830e15793d71ec877d46', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: 'f8ac2279ec7bda15115f2a8ffdad4e80ccdc9b42', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
+        return (h("div", { key: 'b48ab908b37b2b4d6d6ee80b2d1f73038800a0dc', part: "container" }, h("div", { key: 'd0fd1370a7b3500a1bbf4a798d5d64b2a309fabf', class: "six-error-page__icon-container", part: "icon-container" }, h("six-picto", { key: '88a00b48d434b687f270ee50e6506e23a21b0414', size: "4xl", class: "six-error-page__icon", part: "icon" }, this.getIconName())), h("div", { key: '275010c6651665efd03f3a9b36b074d0b72a9111', class: "six-error-page__title", part: "title" }, this.getErrorTitle()), h("div", { key: 'efc23d90edea6ce0bc3843a704a4ffb788f84042', class: "six-error-page__description", part: "description" }, this.getErrorDescription())));
     }
     static get is() { return "six-error-page"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-file-list/six-file-list.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
  */
 export class SixFileList {
     render() {
-        return (h("div", { key: '38755b01aeafb28e3f268925a347fabdb53cac9b', class: "six-files-list__container" }, h("slot", { key: '7e9e866c6b7f6dffbe26ba5b10c46b135cc1c389' })));
+        return (h("div", { key: 'cf80dfd0ccfbe849dd17bfd4d940fd8ef0d1930e', class: "six-files-list__container" }, h("slot", { key: 'cb9149f512f113f2012328a102a5eac8fef55f74' })));
     }
     static get is() { return "six-file-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-file-list-item/six-file-list-item.js CHANGED Viewed

@@ -30,10 +30,10 @@ export class SixFileListItem {
         };
     }
     render() {
-        return (h("div", { key: '65ea17f1ce1ff3d9cb48696bbf25465f126ca879', class: "six-files-list-item" }, h("span", { key: '53749104860721fd92bbb07b84029e2d3a22c0c0', class: {
+        return (h("div", { key: '31722bec6e2a0956f4d1b14c7ee26330cae7e8cc', class: "six-files-list-item" }, h("span", { key: 'dfa90db55fd78720884ac4f67e5579b0eb184d40', class: {
                 'six-files-list-item__name': true,
                 'six-files-list-item__name--disabled': this.nodownload,
-            }, onClick: this.downloadFile }, this.name), h("span", { key: '637a12f8bb040e3cf5392ebe7ac488e3d08ae6fb', class: "six-files-list-item__date" }, this.date), this.size != null && h("span", { key: '208e19ce7a5fa642b0b860fdba2d0dc83feb12fc', class: "six-files-list-item__size" }, Math.round(this.size / 1024), " KB"), h("six-icon", { key: 'ecca120c27d87cd450f99ab24ec26f056d014d71', class: {
+            }, onClick: this.downloadFile }, this.name), h("span", { key: '401f4ef61bd59467c074dcdd1b1393724b56b30f', class: "six-files-list-item__date" }, this.date), this.size != null && h("span", { key: 'c9a2df206e02dfe5187f072c59e2c9d4cb59bf19', class: "six-files-list-item__size" }, Math.round(this.size / 1024), " KB"), h("six-icon", { key: '85857613cb52b6cc117e983573dfa27cd6e78c15', class: {
                 'six-files-list-item__icon': true,
                 'six-files-list-item__icon--disabled': this.nodelete,
             }, size: "small", onClick: this.removeFile }, "delete")));

package/dist/collection/components/six-file-upload/six-file-upload.js CHANGED Viewed

@@ -86,9 +86,13 @@ export class SixFileUpload {
             this.isOver = false;
         }
     }
-    dropHandler() {
+    dropHandler(event) {
+        var _a;
         if (!this.disabled) {
             this.isOver = false;
+            if ((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files) {
+                this.handleFiles(event.dataTransfer.files);
+            }
         }
     }
     componentWillLoad() {
@@ -121,17 +125,17 @@ export class SixFileUpload {
     render() {
         const Container = this.compact ? 'six-button' : 'six-card';
         const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter((text) => text != null && text.trim() !== '');
-        return (h("div", { key: '962ed9f138cf38fa6dbc2aa75063ababaf9daa8f', class: {
+        return (h("div", { key: '22f6273a8a3ff2134c570ea91e92a78039f69de9', class: {
                 'six-file-upload': true,
                 'six-file-upload--disabled': this.disabled || this.uploading,
-            } }, h(Container, { key: '7058efb4201feb74152a905f7adb962a0a0a9aea', disabled: this.disabled || this.uploading, "aria-invalid": this.invalid ? 'true' : 'false', class: {
+            } }, h(Container, { key: 'c0978b21b218b9b8d251a98b6e52838029ca074a', disabled: this.disabled || this.uploading, "aria-invalid": this.invalid ? 'true' : 'false', class: {
                 'six-file-upload__container--compact': this.compact,
                 'six-file-upload__container--full': !this.compact,
-            } }, this.compact && !this.uploading && h("six-icon", { key: '3a16b85c2fa579d0ad0b6736af5f7dc1c823fed7', slot: "prefix" }, "arrow_circle_up"), h("div", { key: '0dec3902f770c562e01c4d82eb443c9194d42b32', class: {
+            } }, this.compact && !this.uploading && h("six-icon", { key: 'f1dcea5ddeab7fbf0eeea7af62cf8483f136a1c6', slot: "prefix" }, "arrow_circle_up"), h("div", { key: 'e166e39e3d4215de356d59fc3497191ba39e774f', class: {
                 'six-file-upload__drop-zone': true,
                 'six-file-upload__drop-zone--hover': this.isOver,
                 'six-file-upload__drop-zone--compact': this.compact,
-            } }, this.uploading ? (h("span", { class: "six-file-upload__drop-zone__spinner-container" }, h("six-spinner", null), " Uploading...")) : (h("div", null, h("span", null, this.renderLabel()), h("input", { class: "six-file-upload__input", type: "file", name: "resume", disabled: this.disabled, accept: this.accept, multiple: this.multiple, onChange: this.onChange, ref: (el) => (this.fileInput = el) }))))), h("div", { key: 'f094ca3e7f8474b2a7b7c9db728dd40be80bcdbc', "aria-hidden": this.invalid ? 'false' : 'true' }, h("slot", { key: '115dfb7670ece8adb58230d8823a926804441e19', name: "error-text" }, errorMessages.map((text) => (h("six-error", null, h("div", { class: "six-file-upload__error-text" }, text))))))));
+            } }, this.uploading ? (h("span", { class: "six-file-upload__drop-zone__spinner-container" }, h("six-spinner", null), " Uploading...")) : (h("div", null, h("span", null, this.renderLabel()), h("input", { class: "six-file-upload__input", type: "file", name: "resume", disabled: this.disabled, accept: this.accept, multiple: this.multiple, onChange: this.onChange, ref: (el) => (this.fileInput = el) }))))), h("div", { key: '03cdbd08cd58667b279e0b5b961f88661125cf7d', "aria-hidden": this.invalid ? 'false' : 'true' }, h("slot", { key: 'b022f0aa0ce0964da126a4484984553dd73d9094', name: "error-text" }, errorMessages.map((text) => (h("six-error", null, h("div", { class: "six-file-upload__error-text" }, text))))))));
     }
     static get is() { return "six-file-upload"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/six-file-upload/six-file-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-file-upload.js","sourceRoot":"","sources":["../../../src/components/six-file-upload/six-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\nexport interface SixFileUploadSuccessPayload {\n files: FileList;\n}\n\nexport interface SixFileUploadFailurePayload {\n reason: string;\n code:\n \| 'ONLY_ONE_FILE_ALLOWED'\n \| 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE'\n \| 'INVALID_MIME_TYPE'\n \| 'ONE_OR_MULTIPLE_FILES_TOO_BIG'\n \| 'FILE_TOO_BIG';\n}\n\n/*\n @since 2.0.0\n * @status experimental\n \n @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n /\n@Component({\n tag: 'six-file-upload',\n styleUrl: 'six-file-upload.scss',\n scoped: true,\n shadow: false,\n})\nexport class SixFileUpload {\n @Element() readonly host!: HTMLSixFileUploadElement;\n\n private fileInput?: HTMLInputElement;\n\n @State() isOver = false;\n @State() hasError = false;\n\n /* Set to true if file control should be small. /\n @Prop() readonly compact: boolean = false;\n\n /* Label of the drop area. /\n @Prop() readonly label?: string;\n\n /* Set when button is disabled. /\n @Prop() readonly disabled = false;\n\n /* Accepted MIME-Types. /\n @Prop() readonly accept?: string;\n\n /* More than one file allowed. /\n @Prop() readonly multiple = false;\n\n /* Allowed max file size in bytes. /\n @Prop() readonly maxFileSize?: number;\n\n /* Set to true to draw the control in a loading state. /\n @Prop({ reflect: true }) uploading = false;\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* Triggers when a file is added. /\n @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n /* Triggers when an uploaded file doesn't match MIME type or max file size. */\n @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n @Listen('dragenter', { capture: false })\n dragenterHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragover', { capture: false })\n dragoverHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragleave', { capture: false })\n dragleaveHandler() {\n if (!this.disabled) {\n this.isOver = false;\n }\n }\n\n @Listen('drop', { capture: false })\n dropHandler() {\n if (!this.disabled) {\n this.isOver = false;\n }\n }\n\n private handleSlotChange = () => {\n let validType = false;\n\n if (\n this.errorText != null &&\n ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) \|\|\n (typeof this.errorText == 'object' && this.errorText.length > 0))\n ) {\n validType = true;\n }\n\n this.hasError = validType \|\| hasSlot(this.host, 'error-text');\n };\n\n private handleFiles = (files: FileList) => {\n if (this.disabled \|\| files.length === 0 \|\| this.uploading) {\n return;\n }\n\n if (!this.multiple && files.length > 1) {\n return this.failure.emit({\n reason: 'Only one file is allowed.',\n code: 'ONLY_ONE_FILE_ALLOWED',\n });\n }\n\n for (const file of files) {\n if (file == null) {\n return;\n }\n\n let acceptedTypesList: string[] = [];\n if (this.accept != null) {\n acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n }\n\n if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n const code = files.length > 1 ? 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE' : 'INVALID_MIME_TYPE';\n return this.failure.emit({ reason, code });\n }\n\n if (this.maxFileSize != null && file.size > this.maxFileSize) {\n const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n const code = files.length > 1 ? 'ONE_OR_MULTIPLE_FILES_TOO_BIG' : 'FILE_TOO_BIG';\n return this.failure.emit({ reason, code });\n }\n }\n\n this.success.emit({ files } as SixFileUploadSuccessPayload);\n };\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.addEventListener(eventName, this.preventDefaults, false);\n document.body.addEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.removeEventListener(eventName, this.preventDefaults, false);\n document.body.removeEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private preventDefaults(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n private onChange = () => {\n if (this.fileInput?.files != null) {\n const files = this.fileInput.files;\n this.handleFiles(files);\n this.fileInput.value = '';\n }\n };\n\n private renderLabel() {\n return (\n this.label ??\n (this.compact ? (\n 'Upload'\n ) : (\n <span>\n Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n </span>\n ))\n );\n }\n\n render() {\n const Container = this.compact ? 'six-button' : 'six-card';\n\n const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter(\n (text) => text != null && text.trim() !== ''\n );\n\n return (\n <div\n class={{\n 'six-file-upload': true,\n 'six-file-upload--disabled': this.disabled \|\| this.uploading,\n }}\n >\n <Container\n disabled={this.disabled \|\| this.uploading}\n aria-invalid={this.invalid ? 'true' : 'false'}\n class={{\n 'six-file-upload__container--compact': this.compact,\n 'six-file-upload__container--full': !this.compact,\n }}\n >\n {this.compact && !this.uploading && <six-icon slot=\"prefix\">arrow_circle_up</six-icon>}\n <div\n class={{\n 'six-file-upload__drop-zone': true,\n 'six-file-upload__drop-zone--hover': this.isOver,\n 'six-file-upload__drop-zone--compact': this.compact,\n }}\n >\n {this.uploading ? (\n <span class=\"six-file-upload__drop-zone__spinner-container\">\n <six-spinner /> Uploading...\n </span>\n ) : (\n <div>\n <span>{this.renderLabel()}</span>\n <input\n class=\"six-file-upload__input\"\n type=\"file\"\n name=\"resume\"\n disabled={this.disabled}\n accept={this.accept}\n multiple={this.multiple}\n onChange={this.onChange}\n ref={(el) => (this.fileInput = el)}\n />\n </div>\n )}\n </div>\n </Container>\n <div aria-hidden={this.invalid ? 'false' : 'true'}>\n <slot name=\"error-text\">\n {errorMessages.map((text) => (\n <six-error>\n <div class=\"six-file-upload__error-text\">{text}</div>\n </six-error>\n ))}\n </slot>\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"six-file-upload.js","sourceRoot":"","sources":["../../../src/components/six-file-upload/six-file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\nexport interface SixFileUploadSuccessPayload {\n files: FileList;\n}\n\nexport interface SixFileUploadFailurePayload {\n reason: string;\n code:\n \| 'ONLY_ONE_FILE_ALLOWED'\n \| 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE'\n \| 'INVALID_MIME_TYPE'\n \| 'ONE_OR_MULTIPLE_FILES_TOO_BIG'\n \| 'FILE_TOO_BIG';\n}\n\n/*\n @since 2.0.0\n * @status experimental\n \n @slot error-text - Error text that is shown when the status is set to invalid. Alternatively, you can use the error-text prop.\n /\n@Component({\n tag: 'six-file-upload',\n styleUrl: 'six-file-upload.scss',\n scoped: true,\n shadow: false,\n})\nexport class SixFileUpload {\n @Element() readonly host!: HTMLSixFileUploadElement;\n\n private fileInput?: HTMLInputElement;\n\n @State() isOver = false;\n @State() hasError = false;\n\n /* Set to true if file control should be small. /\n @Prop() readonly compact: boolean = false;\n\n /* Label of the drop area. /\n @Prop() readonly label?: string;\n\n /* Set when button is disabled. /\n @Prop() readonly disabled = false;\n\n /* Accepted MIME-Types. /\n @Prop() readonly accept?: string;\n\n /* More than one file allowed. /\n @Prop() readonly multiple = false;\n\n /* Allowed max file size in bytes. /\n @Prop() readonly maxFileSize?: number;\n\n /* Set to true to draw the control in a loading state. /\n @Prop({ reflect: true }) uploading = false;\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* Triggers when a file is added. /\n @Event({ eventName: 'six-file-upload-success' }) success!: EventEmitter<SixFileUploadSuccessPayload>;\n\n /* Triggers when an uploaded file doesn't match MIME type or max file size. */\n @Event({ eventName: 'six-file-upload-failure' }) failure!: EventEmitter<SixFileUploadFailurePayload>;\n\n @Listen('dragenter', { capture: false })\n dragenterHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragover', { capture: false })\n dragoverHandler() {\n if (!this.disabled) {\n this.isOver = true;\n }\n }\n\n @Listen('dragleave', { capture: false })\n dragleaveHandler() {\n if (!this.disabled) {\n this.isOver = false;\n }\n }\n\n @Listen('drop', { capture: false })\n dropHandler(event: DragEvent) {\n if (!this.disabled) {\n this.isOver = false;\n if (event.dataTransfer?.files) {\n this.handleFiles(event.dataTransfer.files);\n }\n }\n }\n\n private handleSlotChange = () => {\n let validType = false;\n\n if (\n this.errorText != null &&\n ((typeof this.errorText == 'string' && this.errorText.trim().length > 0) \|\|\n (typeof this.errorText == 'object' && this.errorText.length > 0))\n ) {\n validType = true;\n }\n\n this.hasError = validType \|\| hasSlot(this.host, 'error-text');\n };\n\n private handleFiles = (files: FileList) => {\n if (this.disabled \|\| files.length === 0 \|\| this.uploading) {\n return;\n }\n\n if (!this.multiple && files.length > 1) {\n return this.failure.emit({\n reason: 'Only one file is allowed.',\n code: 'ONLY_ONE_FILE_ALLOWED',\n });\n }\n\n for (const file of files) {\n if (file == null) {\n return;\n }\n\n let acceptedTypesList: string[] = [];\n if (this.accept != null) {\n acceptedTypesList = this.accept.replace(/\\s/g, '').split(',');\n }\n\n if (acceptedTypesList.length > 0 && acceptedTypesList.indexOf(file.type) === -1) {\n const reason = files.length > 1 ? 'One or more files have invalid MIME type.' : 'File has invalid MIME type.';\n const code = files.length > 1 ? 'ONE_OR_MORE_FILES_HAVE_INVALID_MIME_TYPE' : 'INVALID_MIME_TYPE';\n return this.failure.emit({ reason, code });\n }\n\n if (this.maxFileSize != null && file.size > this.maxFileSize) {\n const reason = files.length > 1 ? 'One or more files are too big' : 'File is too big.';\n const code = files.length > 1 ? 'ONE_OR_MULTIPLE_FILES_TOO_BIG' : 'FILE_TOO_BIG';\n return this.failure.emit({ reason, code });\n }\n }\n\n this.success.emit({ files } as SixFileUploadSuccessPayload);\n };\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.addEventListener(eventName, this.preventDefaults, false);\n document.body.addEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n }\n\n disconnectedCallback() {\n ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {\n this.host.removeEventListener(eventName, this.preventDefaults, false);\n document.body.removeEventListener(eventName, this.preventDefaults, false);\n });\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n }\n\n private preventDefaults(e: Event) {\n e.preventDefault();\n e.stopPropagation();\n }\n\n private onChange = () => {\n if (this.fileInput?.files != null) {\n const files = this.fileInput.files;\n this.handleFiles(files);\n this.fileInput.value = '';\n }\n };\n\n private renderLabel() {\n return (\n this.label ??\n (this.compact ? (\n 'Upload'\n ) : (\n <span>\n Drop files to upload, or <span class=\"six-file-upload__label--highlighted\">browse</span>\n </span>\n ))\n );\n }\n\n render() {\n const Container = this.compact ? 'six-button' : 'six-card';\n\n const errorMessages = (Array.isArray(this.errorText) ? this.errorText : [this.errorText]).filter(\n (text) => text != null && text.trim() !== ''\n );\n\n return (\n <div\n class={{\n 'six-file-upload': true,\n 'six-file-upload--disabled': this.disabled \|\| this.uploading,\n }}\n >\n <Container\n disabled={this.disabled \|\| this.uploading}\n aria-invalid={this.invalid ? 'true' : 'false'}\n class={{\n 'six-file-upload__container--compact': this.compact,\n 'six-file-upload__container--full': !this.compact,\n }}\n >\n {this.compact && !this.uploading && <six-icon slot=\"prefix\">arrow_circle_up</six-icon>}\n <div\n class={{\n 'six-file-upload__drop-zone': true,\n 'six-file-upload__drop-zone--hover': this.isOver,\n 'six-file-upload__drop-zone--compact': this.compact,\n }}\n >\n {this.uploading ? (\n <span class=\"six-file-upload__drop-zone__spinner-container\">\n <six-spinner /> Uploading...\n </span>\n ) : (\n <div>\n <span>{this.renderLabel()}</span>\n <input\n class=\"six-file-upload__input\"\n type=\"file\"\n name=\"resume\"\n disabled={this.disabled}\n accept={this.accept}\n multiple={this.multiple}\n onChange={this.onChange}\n ref={(el) => (this.fileInput = el)}\n />\n </div>\n )}\n </div>\n </Container>\n <div aria-hidden={this.invalid ? 'false' : 'true'}>\n <slot name=\"error-text\">\n {errorMessages.map((text) => (\n <six-error>\n <div class=\"six-file-upload__error-text\">{text}</div>\n </six-error>\n ))}\n </slot>\n </div>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/six-footer/six-footer.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { h } from "@stencil/core";
  */
 export class SixFooter {
     render() {
-        return (h("footer", { key: 'fe39b58edfd331a6b6ae1d551286fd45e3783f5d', class: "six-footer" }, h("slot", { key: '7c93a54de4e4160adabc4790b368401b790d6fcc' })));
+        return (h("footer", { key: '21f693d3b5de440dba60926318d0627ca1c260b1', class: "six-footer" }, h("slot", { key: 'ecd570f552abf35060d5b449c4ce900b23b2abb6' })));
     }
     static get is() { return "six-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-group-label/six-group-label.js CHANGED Viewed

@@ -52,7 +52,7 @@ export class SixGroupLabel {
         (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     }
     render() {
-        return (h(FormControl, { key: '2bdb482e336b09325fe0bfc30cd3082846cbce6a', inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", { key: 'cd79f08e30f7059290c81d83bb00e5b9f68a1181' })));
+        return (h(FormControl, { key: '69a1a4643e5c47c3348c90f7a8c6227da1bdf6c0', inputId: this.wrapperLabelId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, size: this.size, disabled: this.disabled, required: this.required }, h("slot", { key: '49f66c0010c80c65a8d95c6f68ed06adbab00fdb' })));
     }
     static get is() { return "six-group-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-header/six-header.js CHANGED Viewed

@@ -28,11 +28,11 @@ export class SixHeader {
         this.eventListeners.removeAll();
     }
     render() {
-        return (h(Host, { key: '3c03ee28b12600576e0b714e5077ea2c800a4c65' }, h("header", { key: '8d3807cb3b05ca07cce629bf1dcdbdb49a6d400a', part: "header", class: "six-header" }, h("slot", { key: '7a920fedf946e99c4d7a538706e8061e165a0015' })), h("div", { key: 'c884119828755832b8312412647b8ff89fae5a88', class: {
+        return (h(Host, { key: '0a956c7cad628545be41c926565852f8b9489013' }, h("header", { key: '86ef3e269cdd9ee040c36189e886afca8024f0bd', part: "header", class: "six-header" }, h("slot", { key: 'c1f6c06a72dcbb8518ec4b66d047461d10b6dab9' })), h("div", { key: '875e7f2dae91404374e8481a303b0bc0ed72b24a', class: {
                 'six-header__search-field': true,
                 'six-header__search-field--visible': this.openSearch,
                 'six-header__search-field--shift-content': this.shiftContent,
-            } }, h("slot", { key: '42d1ab374144bc3da2b1cd144e3328c64ee75204', name: 'search-field' }))));
+            } }, h("slot", { key: '366b4b035f3b5a480cdd980cd6271fe181fca2c5', name: 'search-field' }))));
     }
     static get is() { return "six-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-header-dropdown-item/six-header-dropdown-item.js CHANGED Viewed

@@ -24,9 +24,9 @@ export class SixHeaderDropdownItem {
         this.updateDropdownDistance();
     }
     render() {
-        return (h(Host, { key: 'f2d143e5da9526b536b6e4d663d7f854ee1a3bf2', class: {
+        return (h(Host, { key: '98b4b1ccfd9a0857cc30679ce08bdf79fd22ba57', class: {
                 'six-header-dropdown-item--active': this.active,
-            } }, h("six-dropdown", { key: 'ad3420fd33db605a06c62a4e7fdca7ecbeb6e3c2', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false), filter: this.filter, filterPlaceholder: this.filterPlaceholder }, h("slot", { key: '0bf9ab3feeaa7dbbaf48fb26b18919d0d5e4e936', slot: "trigger", name: "trigger" }), h("slot", { key: '25e063e170bac1f46a805cb2b4b49977212b560a' }))));
+            } }, h("six-dropdown", { key: '584f301f301f84f39e7dcbc724fb5afd7adeca55', ref: (el) => (this.dropdownElement = el), hoist: true, skidding: 0, placement: "bottom-end", "onSix-dropdown-show": () => (this.active = true), "onSix-dropdown-hide": () => (this.active = false), filter: this.filter, filterPlaceholder: this.filterPlaceholder }, h("slot", { key: 'cff60f757172303731a50d00717a476f48f3e56c', slot: "trigger", name: "trigger" }), h("slot", { key: 'f1a80cd16e7c30352a15db4a1550c38fa0a21023' }))));
     }
     updateDropdownDistance() {
         const trigger = getSlot(this.host, 'trigger');

package/dist/collection/components/six-header-item/six-header-item.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class SixHeaderItem {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: 'c53b61e12c5df9a806e3b3fb9d5d5398dd7d928f', class: { 'six-header-item--active': this.active } }, h("slot", { key: '92e5a89e4a4bcb795c3bfc9f3e076d267be01153' })));
+        return (h(Host, { key: 'e94d72bc167c8ade7d81f416f48ee900693f48c0', class: { 'six-header-item--active': this.active } }, h("slot", { key: '86eac95abbec808cfe2bab0f1ad4b89dd69d781d' })));
     }
     static get is() { return "six-header-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-header-menu-button/six-header-menu-button.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class SixHeaderMenuButton {
         this.reset = false;
     }
     render() {
-        return (h("six-button", { key: 'f24f383b4bfab7416a6da813c08fe42905560d32', type: "secondary", caret: this.caret, disabled: this.disabled, loading: this.loading, submit: this.submit, reset: this.reset }, h("slot", { key: '0c5dff4023b79b26d0e7c8d79adb78223d4df61c', name: "suffix", slot: "suffix" }), h("slot", { key: 'cdf0bf1a34a284066e288c1b138afcedb02c7e4a', name: "prefix", slot: "prefix" }), h("slot", { key: 'c5e704b918a9e2395a61f40fdbf3ac74da97285f' })));
+        return (h("six-button", { key: '8f16a33fa8b582d5ec3d149d01bbfd8cc99816f7', type: "secondary", caret: this.caret, disabled: this.disabled, loading: this.loading, submit: this.submit, reset: this.reset }, h("slot", { key: '52e7d5689dd7134a5a95f5ec065eb6ebfe274dc4', name: "suffix", slot: "suffix" }), h("slot", { key: '6170bff5e2846774d293a9eee5e1b94149b609cf', name: "prefix", slot: "prefix" }), h("slot", { key: '6506ee3f4d7bd48e6b0f67f0a5ac9911d74786f1' })));
     }
     static get is() { return "six-header-menu-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/six-icon/six-icon.css CHANGED Viewed

@@ -1,48 +1,37 @@
-:host {
-  position: relative;
-  box-sizing: border-box;
-}
-:host *, :host *:before, :host *:after {
-  box-sizing: border-box;
-}
-/* Hides content visually while still making it available to screen readers */
-.sr-only {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
+@charset "UTF-8";
 :host {
   display: inline-flex;
   vertical-align: middle;
 }
-.material-icons {
+/* ==========================================================================
+   Common icon text baseline
+   ========================================================================== */
+.material-icons,
+.material-icons-outlined,
+.material-icons-filled,
+.material-symbols-outlined,
+.material-symbols {
+  display: inline-block;
   vertical-align: middle;
-  font-weight: normal;
-  font-style: normal;
-  text-transform: none;
   letter-spacing: normal;
   word-wrap: normal;
   white-space: nowrap;
   direction: ltr;
-  /* Support for all WebKit browsers. */
+  /* rendering */
   -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-  /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;
-  /* Support for IE. */
+  text-rendering: optimizeLegibility;
   font-feature-settings: "liga";
-  /* Icon name should not be selectable. */
+  font-style: normal;
+  font-weight: normal;
+  font-synthesis-weight: none;
   user-select: none;
 }
+/* ==========================================================================
+   Material Icons (classic)
+   ========================================================================== */
 .material-icons-filled {
   font-family: "Material Icons";
 }
@@ -51,6 +40,34 @@
   font-family: "Material Icons Outlined";
 }
+/* ==========================================================================
+   Material Symbols (variable font)
+   We always use the "Outlined Variable" family and drive style via axes.
+   (One font for both outlined/filled via FILL axis.)
+   ========================================================================== */
+.material-symbols-outlined,
+.material-symbols {
+  font-family: "Material Symbols Outlined Variable";
+  /* Base variations shared by both */
+  font-variation-settings: "wght" 400, "GRAD" 0, "opsz" 24;
+}
+/* Outlined → FILL 0 */
+.material-symbols-outlined {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+/* Filled → FILL 1 */
+.material-symbols {
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
+}
+/* ==========================================================================
+   Size helpers (unchanged API, a bit more explicit)
+   ========================================================================== */
+.icon {
+  /* default in Google’s docs */
+}
 .icon--xsmall {
   font-size: 12px;
 }