@getflip/swirl-components 0.0.0-new-shell-20231128124118

package/dist/cjs/swirl-radio.cjs.entry.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlRadioCss = ".sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.radio--variant-card.sc-swirl-radio:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),\n      0 0 0 0.25rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:none}.radio--variant-card.sc-swirl-radio:hover:not(.radio--disabled){background-color:var(--s-surface-hovered)}.radio--variant-card.sc-swirl-radio:active:not(.radio--disabled){background-color:var(--s-surface-pressed)}.radio--variant-card.radio--checked.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-highlight)}.radio--variant-card.radio--invalid.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-critical)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlRadio = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "valueChange", 7);
+    this.onChange = () => {
+      this.checked = true;
+      this.valueChange.emit(this.value);
+    };
+    this.checked = false;
+    this.description = undefined;
+    this.disabled = false;
+    this.inputId = undefined;
+    this.inputName = undefined;
+    this.invalid = undefined;
+    this.label = undefined;
+    this.value = undefined;
+    this.variant = "default";
+  }
+  getAriaCheckedLabel(checked, unchecked) {
+    if (checked) {
+      return "true";
+    }
+    else if (unchecked) {
+      return "false";
+    }
+    return "mixed";
+  }
+  render() {
+    const unchecked = this.checked === false || this.checked === "false";
+    const checked = this.checked === true || this.checked === "true";
+    const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
+    const ariaInvalid = this.invalid;
+    const className = index$1.classnames("radio", `radio--variant-${this.variant}`, {
+      "radio--checked": checked,
+      "radio--disabled": this.disabled,
+      "radio--invalid": this.invalid,
+      "radio--unchecked": unchecked,
+    });
+    return (index.h(index.Host, { style: { width: this.variant === "card" ? "100%" : undefined } }, index.h("label", { class: className, htmlFor: this.inputId }, index.h("span", { class: "radio__control" }, index.h("swirl-visually-hidden", null, index.h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), index.h("span", { "aria-hidden": "true", class: "radio__box" })), index.h("span", { class: "radio__label-container" }, this.label && index.h("span", { class: "radio__label" }, this.label), this.description && (index.h("span", { class: "radio__description", innerHTML: this.description }))))));
+  }
+};
+SwirlRadio.style = swirlRadioCss;
+
+exports.swirl_radio = SwirlRadio;

package/dist/cjs/swirl-resource-list-file-item.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlResourceListFileItemCss = ".sc-swirl-resource-list-file-item-h{display:block;width:100%}.sc-swirl-resource-list-file-item-h *.sc-swirl-resource-list-file-item{box-sizing:border-box}.resource-list-file-item.sc-swirl-resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item.sc-swirl-resource-list-file-item:focus{outline:none}.resource-list-file-item.sc-swirl-resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item.sc-swirl-resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control.sc-swirl-resource-list-file-item .resource-list-file-item__label-container.sc-swirl-resource-list-file-item{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon.sc-swirl-resource-list-file-item{color:var(--s-icon-highlight)}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container.sc-swirl-resource-list-file-item:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label.sc-swirl-resource-list-file-item{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description.sc-swirl-resource-list-file-item{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message.sc-swirl-resource-list-file-item{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner.sc-swirl-resource-list-file-item{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
+
+const SwirlResourceListFileItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.remove = index.createEvent(this, "remove", 7);
+    this.desktopMediaQuery = utils.getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+    this.description = undefined;
+    this.errorMessage = undefined;
+    this.icon = "<swirl-icon-file></swirl-icon-file>";
+    this.label = undefined;
+    this.loading = undefined;
+    this.removable = undefined;
+    this.removeButtonLabel = "Remove file";
+  }
+  componentDidLoad() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  disconnectedCallback() {
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  render() {
+    const showError = Boolean(this.errorMessage);
+    const showDescription = !showError && Boolean(this.description);
+    const showSpinner = !showError && this.loading;
+    const showRemoveButton = this.removable && !showSpinner;
+    const className = index$1.classnames("resource-list-file-item", {
+      "resource-list-file-item--has-control": showSpinner || showRemoveButton,
+    });
+    return (index.h(index.Host, { role: "row" }, index.h("div", { class: className, part: "resource-list-file-item", role: "gridcell" }, index.h("span", { class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), index.h("span", { class: "resource-list-file-item__label-container" }, index.h("span", { class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (index.h("span", { class: "resource-list-file-item__description" }, this.description)), showError && (index.h("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" }, index.h("swirl-inline-error", { message: this.errorMessage, size: "s" })))), showSpinner && (index.h("span", { class: "resource-list-file-item__spinner" }, index.h("swirl-spinner", { size: "s" }))), showRemoveButton && (index.h("span", { class: "resource-list-file-item__remove-button" }, index.h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+  }
+};
+SwirlResourceListFileItem.style = swirlResourceListFileItemCss;
+
+exports.swirl_resource_list_file_item = SwirlResourceListFileItem;

package/dist/cjs/swirl-search.cjs.entry.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlSearchCss = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-swirl-search{box-sizing:border-box}.search.sc-swirl-search{position:relative;display:flex;width:100%}.search--variant-outline.sc-swirl-search .search__input.sc-swirl-search{background-color:transparent;box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.search--disabled.sc-swirl-search .search__icon.sc-swirl-search{color:var(--s-icon-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-swirl-search .search__input.sc-swirl-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-swirl-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}.search__input.sc-swirl-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-swirl-search:focus:not(:focus-visible){outline:none}.search__input.sc-swirl-search:focus-visible{outline-color:var(--s-focus-default)}.search__input.sc-swirl-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-swirl-search::-webkit-search-decoration,.search__input.sc-swirl-search::-webkit-search-cancel-button,.search__input.sc-swirl-search::-webkit-search-results-button,.search__input.sc-swirl-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-swirl-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}.search__input.sc-swirl-search:not(:placeholder-shown)+.search__clear-button.sc-swirl-search{display:inline-flex}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.search__input.sc-swirl-search{height:2.25rem;padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8));font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.search__clear-button.sc-swirl-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";
+
+const SwirlSearch = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.inputBlur = index.createEvent(this, "inputBlur", 7);
+    this.inputFocus = index.createEvent(this, "inputFocus", 7);
+    this.inputInput = index.createEvent(this, "inputInput", 7);
+    this.valueChange = index.createEvent(this, "valueChange", 7);
+    this.desktopMediaQuery = utils.getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+    this.clear = () => {
+      this.input.value = "";
+      this.input.focus();
+      this.valueChange.emit("");
+    };
+    this.onBlur = (event) => {
+      this.inputBlur.emit(event);
+    };
+    this.onChange = (event) => {
+      this.valueChange.emit(event.target.value);
+    };
+    this.onFocus = (event) => {
+      this.inputFocus.emit(event);
+    };
+    this.onInput = (event) => {
+      this.inputInput.emit(event.target.value);
+    };
+    this.autoFocus = undefined;
+    this.clearButtonLabel = "Clear search term";
+    this.disabled = undefined;
+    this.inputName = undefined;
+    this.inputId = undefined;
+    this.label = undefined;
+    this.placeholder = "Search …";
+    this.value = undefined;
+    this.variant = "filled";
+  }
+  componentDidLoad() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.input.focus();
+      });
+    }
+  }
+  disconnectedCallback() {
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon?.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  onKeyDown(event) {
+    if ((event.code === "KeyK" || event.code === "Slash") &&
+      (event.ctrlKey || event.metaKey)) {
+      this.input.focus();
+    }
+  }
+  render() {
+    const className = index$1.classnames("search", `search--variant-${this.variant}`, {
+      "search--disabled": this.disabled,
+    });
+    return (index.h(index.Host, null, index.h("span", { class: className, ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-search", { class: "search__icon" }), index.h("input", { "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (index.h("button", { "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, index.h("swirl-icon-cancel", null))))));
+  }
+};
+SwirlSearch.style = swirlSearchCss;
+
+exports.swirl_search = SwirlSearch;

package/dist/cjs/swirl-select.cjs.entry.js

@@ -0,0 +1,141 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}";
+
+const SwirlSelect = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.searchChange = index.createEvent(this, "searchChange", 7);
+    this.valueChange = index.createEvent(this, "valueChange", 7);
+    this.select = (event) => {
+      this.value = event.detail;
+      this.valueChange.emit(this.value);
+      if (!this.multiSelect) {
+        this.popover.close();
+      }
+    };
+    this.unselectOption = (value) => {
+      if (!this.allowDeselect) {
+        return;
+      }
+      this.value = this.value.filter((v) => v !== value);
+      this.valueChange.emit(this.value);
+    };
+    this.onSlotChange = () => {
+      this.updateOptions();
+    };
+    this.onOpen = (event) => {
+      this.placement = event.detail.position?.placement;
+      this.open = true;
+      if (this.withSearch && Boolean(this.searchInput)) {
+        this.searchInput.focus();
+      }
+      else {
+        this.optionList.querySelector('[tabIndex="0"]')?.focus();
+      }
+    };
+    this.onClose = () => {
+      if (Boolean(this.searchInput)) {
+        this.searchInput.value = "";
+        this.searchChange.emit("");
+      }
+      this.open = false;
+      this.input.focus();
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Space" || event.code === "Enter") {
+        if (event.target === this.searchInput) {
+          return;
+        }
+        event.preventDefault();
+        this.popover.open(this.el);
+      }
+      else if (event.code === "ArrowDown" &&
+        event.target === this.searchInput) {
+        this.optionList.querySelector('[tabIndex="0"]')?.focus();
+      }
+    };
+    this.onSearchInput = (event) => {
+      this.searchChange.emit(event.target.value);
+    };
+    this.allowDeselect = true;
+    this.disabled = undefined;
+    this.emptyListLabel = "No results found.";
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.label = undefined;
+    this.multiSelect = undefined;
+    this.required = undefined;
+    this.searchInputLabel = "Search options";
+    this.searchLoading = undefined;
+    this.searchPlaceholder = undefined;
+    this.selectId = Math.round(Math.random() * 1000000).toString();
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.withSearch = undefined;
+    this.options = [];
+    this.open = undefined;
+    this.placement = undefined;
+  }
+  componentWillLoad() {
+    queueMicrotask(() => {
+      this.updateOptions();
+      this.observeSlotChanges();
+    });
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+  }
+  onWindowFocusIn(event) {
+    if (event.target === this.el.querySelector("input")) {
+      event.stopImmediatePropagation();
+    }
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateOptions();
+    });
+    this.observer.observe(this.el, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  updateOptions() {
+    this.options = utils.querySelectorAllDeep(this.el, "swirl-option-list-item");
+  }
+  render() {
+    const label = Boolean(this.value)
+      ? this.value
+        ?.map((value) => this.options.find((option) => option.value === value)?.label)
+        .join(", ")
+      : "";
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const formControl = this.el.closest("swirl-form-control");
+    const offset = formControl?.inline || formControl?.labelPosition === "outside"
+      ? -12
+      : -16;
+    const className = index$1.classnames("select", `select--placement-${this.placement}`, {
+      "select--disabled": this.disabled,
+      "select--inline": this.inline,
+      "select--multi": this.multiSelect,
+      "select--search-loading": this.searchLoading,
+    });
+    return (index.h(index.Host, { onKeyDown: this.onKeyDown }, index.h("div", { class: className }, index.h("swirl-popover-trigger", { popover: this.popover, setAriaAttributes: false }, index.h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label })), index.h("span", { class: "select__multi-select-values" }, this.value
+      ?.map((value) => this.options.find((option) => option.value === value))
+      ?.map((option) => (index.h("swirl-tag", { "aria-hidden": "true", label: option?.label,
+      // eslint-disable-next-line react/jsx-no-bind
+      onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), index.h("span", { class: "select__indicator" }, this.open ? (index.h("swirl-icon-expand-less", null)) : (index.h("swirl-icon-expand-more", null))), index.h("swirl-popover", { animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: [0, offset], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.popover = el), useContainerWidth: "swirl-form-control" }, this.withSearch && (index.h("div", { class: "select__search" }, index.h("swirl-icon-search", { class: "select__search-icon", size: 20 }), index.h("input", { "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (index.h("swirl-spinner", { class: "select__search-spinner", size: "s" })))), index.h("swirl-option-list", { allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (index.h("div", { "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, index.h("swirl-text", { color: "subdued", weight: "medium" }, this.emptyListLabel))), index.h("slot", { onSlotchange: this.onSlotChange }))))));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlSelect.style = swirlSelectCss;
+
+exports.swirl_select = SwirlSelect;

package/dist/cjs/swirl-shell-layout.cjs.entry.js

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const focusTrap_esm = require('./focus-trap.esm-21561e09.js');
+
+const swirlShellLayoutCss = ":root .sc-swirl-shell-layout-h{--swirl-shell-background:rgba(20, 90, 245, 1)}:root.theme-dark .sc-swirl-shell-layout-h{--swirl-shell-background:rgba(45, 72, 127, 1)}.sc-swirl-shell-layout-h{--swirl-shell-text-color:rgba(255, 255, 255, 1);--swirl-shell-header-height:3.25rem;--swirl-shell-collapsed-nav-width:3.75rem;--swirl-shell-extended-nav-width:14rem;--swirl-shell-sidebar-width:21rem;display:flex;width:100%;height:100%}.sc-swirl-shell-layout-h *.sc-swirl-shell-layout{box-sizing:border-box}.shell-layout.sc-swirl-shell-layout{display:grid;width:100%;min-height:100%;background-color:var(--swirl-shell-background);transition:grid-template-columns 0.2s;grid-template-columns:0 1fr 0;grid-template-rows:1fr;grid-template-areas:\"nav main\"}@media (min-width: 992px){.shell-layout.sc-swirl-shell-layout{padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);gap:var(--s-space-8);grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:\"header header\"\n      \"nav main\"}}@media (min-width: 1440px){.shell-layout.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr 0;grid-template-rows:var(--swirl-shell-header-height) 1fr;grid-template-areas:\"header header header\"\n      \"nav main sidebar\"}}@media (min-width: 992px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr}}@media (min-width: 1440px){.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr 0}}@media (min-width: 1440px){.shell-layout--sidebar-active.shell-layout--navigation-collapsed.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-collapsed-nav-width) 1fr var(\n          --swirl-shell-sidebar-width\n        )}}@media (min-width: 1440px){.shell-layout--sidebar-active.sc-swirl-shell-layout{grid-template-columns:var(--swirl-shell-extended-nav-width) 1fr var(\n        --swirl-shell-sidebar-width\n      )}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:translate3d(0, 0, 0);box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__nav.sc-swirl-shell-layout{transform:none;box-shadow:none}}.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:block}@media (min-width: 992px){.shell-layout--mobile-navigation-active.sc-swirl-shell-layout .shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{display:none}}.shell-layout__header.sc-swirl-shell-layout{position:relative;display:none;padding-top:var(--s-space-8);padding-right:var(--s-space-8);padding-bottom:0;padding-left:var(--s-space-16);justify-content:space-between;align-items:center;color:var(--swirl-shell-text-color);grid-area:header}@media (min-width: 992px){.shell-layout__header.sc-swirl-shell-layout{display:flex}}.shell-layout__skip-link.sc-swirl-shell-layout{position:absolute;top:0;left:0;padding:var(--s-space-4);border:none;color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);font:inherit;cursor:pointer}.shell-layout__skip-link.sc-swirl-shell-layout:not(:focus):not(:active){position:absolute;overflow:hidden;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%)}.shell-layout__header-left.sc-swirl-shell-layout{display:flex;flex-basis:8rem;flex-shrink:0;gap:var(--s-space-8)}.shell-layout__header-right.sc-swirl-shell-layout{display:flex;flex-basis:8rem;flex-shrink:0;justify-content:flex-end;align-items:center;gap:var(--s-space-8)}.shell-layout__logo.sc-swirl-shell-layout{display:flex;flex-grow:1;justify-content:center;align-items:center}.shell-layout__logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}.shell-layout__header-tool.sc-swirl-shell-layout{width:2.25rem;height:2.25rem;padding:var(--s-space-8);border:none;border-radius:var(--s-border-radius-sm);color:var(--swirl-shell-text-color);background-color:transparent;font:inherit;cursor:pointer}.shell-layout__header-tool.sc-swirl-shell-layout:hover{background-color:rgba(255, 255, 255, 0.15)}.shell-layout__header-tool.sc-swirl-shell-layout:active{background-color:rgba(255, 255, 255, 0.2)}.shell-layout__header-tool.sc-swirl-shell-layout:focus{outline:none}.shell-layout__header-tool.sc-swirl-shell-layout:focus-visible{box-shadow:0 0 0 0.125rem var(--s-focus-default)}.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:none}@media (min-width: 1440px){.shell-layout__sidebar-toggle.sc-swirl-shell-layout{display:block}}.shell-layout__nav.sc-swirl-shell-layout{position:fixed;z-index:9;top:0;bottom:0;left:0;overflow:auto;width:100%;max-width:var(--swirl-shell-extended-nav-width);padding:var(--s-space-8);color:var(--swirl-shell-text-color);background-color:var(--swirl-shell-background);transition:transform 0.2s, box-shadow 0.2s;transform:translate3d(-100%, 0, 0);grid-area:nav}.shell-layout__nav.sc-swirl-shell-layout-s ul{margin:0;padding:0;list-style:none}.shell-layout__nav.sc-swirl-shell-layout-s li{display:flex}@media (min-width: 992px){.shell-layout__nav.sc-swirl-shell-layout{position:static;max-width:none;padding-top:var(--s-space-8);padding-right:var(--s-space-4);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);transform:none;inset:auto}}.shell-layout__mobile-logo.sc-swirl-shell-layout{padding-top:var(--s-space-12);padding-bottom:var(--s-space-12);padding-left:var(--s-space-12)}.shell-layout__mobile-logo.sc-swirl-shell-layout-s>img{max-height:1.75rem}@media (min-width: 992px){.shell-layout__mobile-logo.sc-swirl-shell-layout{display:none}}.shell-layout__mobile-nav-backdrop.sc-swirl-shell-layout{position:fixed;z-index:8;display:none;background-color:rgba(0, 0, 0, 0.25);animation:shell-layout-backdrop-fade-in 0.2s;inset:0}.shell-layout__main.sc-swirl-shell-layout{overflow:hidden;grid-area:main}@media (min-width: 992px){.shell-layout__main.sc-swirl-shell-layout{border-radius:var(--s-border-radius-sm)}}.shell-layout__sidebar.sc-swirl-shell-layout{display:none;overflow:hidden;border-radius:var(--s-border-radius-sm);background-color:var(--s-background-default);grid-area:sidebar}@media (min-width: 1440px){.shell-layout__sidebar.sc-swirl-shell-layout{display:block}}.shell-layout__sidebar-body.sc-swirl-shell-layout{display:flex;width:var(--swirl-shell-sidebar-width);height:100%;flex-direction:column}.shell-layout__sidebar-app-bar.sc-swirl-shell-layout{flex-grow:0;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.shell-layout__sidebar-content.sc-swirl-shell-layout{overflow:auto;flex-grow:1}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}";
+
+const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
+const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
+const SwirlShellLayout = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sidebarToggleClick = index.createEvent(this, "sidebarToggleClick", 7);
+    this.skipLinkClick = index.createEvent(this, "skipLinkClick", 7);
+    this.onBrowserBackClick = () => {
+      history.back();
+    };
+    this.onBrowserForwardClick = () => {
+      history.forward();
+    };
+    this.onNavigationToggleClick = () => {
+      this.navigationCollapsed = !this.navigationCollapsed;
+    };
+    this.onNavigationClick = () => {
+      this.hideMobileNavigation();
+    };
+    this.browserBackButtonLabel = "Navigate back";
+    this.browserForwardButtonLabel = "Navigate forward";
+    this.navigationLabel = "Main";
+    this.navigationToggleLabel = "Toggle navigation";
+    this.sidebarActive = undefined;
+    this.sidebarToggleIcon = "notifications";
+    this.sidebarToggleLabel = "Toggle sidebar";
+    this.skipLinkLabel = "Skip to main content";
+    this.mobileNavigationActive = undefined;
+    this.navigationCollapsed = undefined;
+  }
+  componentWillLoad() {
+    const restoredSidebarState = localStorage.getItem(SIDEBAR_STORAGE_KEY) === "true";
+    this.sidebarActive =
+      this.sidebarActive === undefined
+        ? restoredSidebarState
+        : this.sidebarActive;
+    const restoredNavigationCollapseState = localStorage.getItem(NAVIGATION_COLLAPSE_STORAGE_KEY) === "true";
+    this.navigationCollapsed = restoredNavigationCollapseState;
+  }
+  componentDidLoad() {
+    this.focusTrap = focusTrap_esm.createFocusTrap(this.navElement, {
+      allowOutsideClick: true,
+      tabbableOptions: {
+        getShadowRoot: (node) => {
+          return node.shadowRoot;
+        },
+      },
+    });
+  }
+  componentDidRender() {
+    this.focusTrap?.updateContainerElements(this.navElement);
+  }
+  disconnectedCallback() {
+    this.focusTrap?.deactivate();
+  }
+  onWindowKeyDown(event) {
+    if (event.key === "Escape" && this.mobileNavigationActive) {
+      this.hideMobileNavigation();
+    }
+  }
+  watchMobileNavigationState() {
+    if (this.mobileNavigationActive) {
+      // wait for animation
+      setTimeout(() => {
+        this.focusTrap.activate();
+      }, 200);
+    }
+    else {
+      this.focusTrap.deactivate();
+    }
+  }
+  watchNavigationCollapsed() {
+    localStorage.setItem(NAVIGATION_COLLAPSE_STORAGE_KEY, String(this.navigationCollapsed));
+  }
+  watchSidebarActive() {
+    localStorage.setItem(SIDEBAR_STORAGE_KEY, String(this.sidebarActive));
+  }
+  /**
+   * Opens the mobile navigation.
+   */
+  async showMobileNavigation() {
+    this.mobileNavigationActive = true;
+  }
+  /**
+   * Hides the mobile navigation.
+   */
+  async hideMobileNavigation() {
+    this.mobileNavigationActive = false;
+  }
+  render() {
+    const className = index$1.classnames("shell-layout", {
+      "shell-layout--mobile-navigation-active": this.mobileNavigationActive,
+      "shell-layout--navigation-collapsed": this.navigationCollapsed,
+      "shell-layout--sidebar-active": this.sidebarActive,
+    });
+    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, index.h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), index.h("div", { class: "shell-layout__header-left" }, index.h("button", { class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, index.h("swirl-icon-dock-left", { size: 20 }), index.h("swirl-visually-hidden", null, this.navigationToggleLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, index.h("swirl-icon-arrow-back", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserBackButtonLabel)), index.h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, index.h("swirl-icon-arrow-forward", { size: 20 }), index.h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), index.h("div", { class: "shell-layout__logo" }, index.h("slot", { name: "logo" })), index.h("div", { class: "shell-layout__header-right" }, index.h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, index.h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), index.h("swirl-visually-hidden", null, this.sidebarToggleLabel)), index.h("slot", { name: "header-tools" }))), index.h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), index.h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, index.h("div", { class: "shell-layout__mobile-logo" }, index.h("slot", { name: "mobile-logo" })), index.h("swirl-visually-hidden", null, index.h("span", { id: "main-navigation-label" }, this.navigationLabel)), index.h("slot", { name: "nav" })), index.h("main", { class: "shell-layout__main", id: "main-content" }, index.h("slot", null)), index.h("aside", { class: "shell-layout__sidebar" }, index.h("div", { class: "shell-layout__sidebar-body" }, index.h("div", { class: "shell-layout__sidebar-app-bar" }, index.h("slot", { name: "sidebar-app-bar" })), index.h("div", { class: "shell-layout__sidebar-content" }, index.h("slot", { name: "sidebar" })))))));
+  }
+  static get watchers() { return {
+    "mobileNavigationActive": ["watchMobileNavigationState"],
+    "navigationCollapsed": ["watchNavigationCollapsed"],
+    "sidebarActive": ["watchSidebarActive"]
+  }; }
+};
+SwirlShellLayout.style = swirlShellLayoutCss;
+
+exports.swirl_shell_layout = SwirlShellLayout;

package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 2.75rem;\n  padding: var(--s-space-12);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  border-radius: var(--s-border-radius-sm);\n  background-color: transparent;\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  cursor: pointer;\n  container-type: inline-size;\n  gap: var(--s-space-16);\n}\n\n:host(:hover) {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n:host(:hover) .shell-navigation-item__badge {\n      --swirl-badge-border-color: rgba(255, 255, 255, 0.15);\n    }\n\n:host(:active) {\n    background-color: rgba(255, 255, 255, 0.2);\n  }\n\n:host(:active) .shell-navigation-item__badge {\n      --swirl-badge-border-color: rgba(255, 255, 255, 0.2);\n    }\n\n:host(:focus) {\n    outline: none;\n  }\n\n:host(:focus-visible) {\n    box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n  }\n\n:host(.shell-navigation-item--active) {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n:host(.shell-navigation-item--active) .shell-navigation-item__badge {\n      --swirl-badge-border-color: rgba(255, 255, 255, 0.1);\n    }\n\n:host(.shell-navigation-item--active:hover) {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n:host(.shell-navigation-item--active:hover) .shell-navigation-item__badge {\n      --swirl-badge-border-color: rgba(255, 255, 255, 0.15);\n    }\n\n:host(.shell-navigation-item--active:active) {\n    background-color: rgba(255, 255, 255, 0.2);\n  }\n\n:host(.shell-navigation-item--active:active) .shell-navigation-item__badge {\n      --swirl-badge-border-color: rgba(255, 255, 255, 0.2);\n    }\n\n:host * {\n    box-sizing: border-box;\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  min-width: 1.25rem;\n  min-height: 1.25rem;\n  justify-content: center;\n  align-items: center;\n}\n\n.shell-navigation-item__label {\n  overflow: hidden;\n  min-width: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.shell-navigation-item__badge {\n  --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\n  .shell-navigation-item__label {\n    display: none;\n  }\n\n  .shell-navigation-item__badge {\n    position: absolute;\n    right: var(--s-space-4);\n    bottom: 0;\n  }\n}\n\n@container (min-width: 14rem) {\n  .shell-navigation-item__badge {\n    margin-left: auto;\n    padding-right: var(--s-space-4);\n  }\n}\n";
+
+const SwirlShellNavigationItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onKeyDown = (event) => {
+      if (event.code === "Enter") {
+        event.preventDefault();
+        this.el.click();
+      }
+    };
+    this.active = undefined;
+    this.badgeLabel = undefined;
+    this.label = undefined;
+  }
+  render() {
+    const className = index$1.classnames("shell-navigation-item", {
+      "shell-navigation-item--active": this.active,
+    });
+    return (index.h(index.Host, { class: className, onKeyDown: this.onKeyDown, role: "link", tabIndex: 0 }, index.h("span", { class: "shell-navigation-item__icon" }, index.h("slot", { name: "icon" })), index.h("span", { class: "shell-navigation-item__label" }, this.label), this.badgeLabel && (index.h("swirl-badge", { class: "shell-navigation-item__badge", size: "s", "aria-label": this.badgeLabel, label: this.badgeLabel }))));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlShellNavigationItem.style = swirlShellNavigationItemCss;
+
+exports.swirl_shell_navigation_item = SwirlShellNavigationItem;

package/dist/cjs/swirl-skeleton-box.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0) 12%,\n      var(--s-surface-raised-default) 50%,\n      rgba(255, 255, 255, 0) 88%,\n      rgba(255, 255, 255, 0) 100%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}";
+
+const SwirlSkeletonBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.animated = true;
+    this.aspectRatio = undefined;
+    this.borderRadius = "base";
+    this.height = undefined;
+    this.width = undefined;
+  }
+  render() {
+    const className = index$1.classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
+    return (index.h(index.Host, { style: {
+        width: !Boolean(this.width) && !Boolean(this.aspectRatio)
+          ? "100%"
+          : undefined,
+      } }, index.h("div", { class: className, style: {
+        aspectRatio: this.aspectRatio,
+        borderRadius: this.borderRadius !== "pill"
+          ? `var(--s-border-radius-${this.borderRadius})`
+          : undefined,
+        height: this.height,
+        width: this.width,
+      } })));
+  }
+};
+SwirlSkeletonBox.style = swirlSkeletonBoxCss;
+
+exports.swirl_skeleton_box = SwirlSkeletonBox;

package/dist/cjs/swirl-skeleton-text.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlSkeletonTextCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.skeleton-text{position:relative}.skeleton-text--static .skeleton-text__line:after{display:none}.skeleton-text--size-sm{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n  )}.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm);border-radius:calc(var(--s-font-size-sm) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n    )}}.skeleton-text--size-base{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-base) - var(--s-font-size-base)) / 2\n  )}.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-base);border-radius:calc(var(--s-font-size-base) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n    )}}.skeleton-text--size-lg{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-lg) - var(--s-font-size-lg)) / 2\n  )}.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-lg);border-radius:calc(var(--s-font-size-lg) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-base) - var(--s-font-size-base)) / 2\n    )}}.skeleton-text--size-xl{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-xl) - var(--s-font-size-xl)) / 2\n  )}.skeleton-text--size-xl .skeleton-text__line{height:var(--s-line-height-xl);border-radius:calc(var(--s-font-size-xl) / 2)}.skeleton-text--size-2xl{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-2xl) - var(--s-font-size-2xl)) / 2\n  )}.skeleton-text--size-2xl .skeleton-text__line{height:var(--s-line-height-2xl);border-radius:calc(var(--s-font-size-2xl) / 2)}.skeleton-text__line{overflow:hidden;width:100%;padding-top:var(--skeleton-text-line-padding);padding-bottom:var(--skeleton-text-line-padding)}.skeleton-text__line:before{display:block;width:100%;height:100%;border-radius:10rem;background-color:var(--s-surface-raised-hovered);content:\"\"}.skeleton-text__line:after{position:relative;z-index:1;top:-100%;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      var(--s-surface-raised-default) 33%,\n      rgba(255, 255, 255, 0) 66%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-text-shimmer 3s infinite}.skeleton-text__line:first-child:last-child{width:100%}.skeleton-text__line:last-child:not(:first-child){width:25%}@keyframes skeleton-text-shimmer{100%{transform:translateX(100%)}}";
+
+const SwirlSkeletonText = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.animated = true;
+    this.lines = 1;
+    this.size = "base";
+  }
+  render() {
+    const className = index$1.classnames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
+    const lineClassName = index$1.classnames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
+    return (index.h(index.Host, null, index.h("div", { class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index$1) => (index.h("div", { class: lineClassName, key: index$1, part: lineClassName }))))));
+  }
+};
+SwirlSkeletonText.style = swirlSkeletonTextCss;
+
+exports.swirl_skeleton_text = SwirlSkeletonText;

package/dist/cjs/swirl-stack.cjs.entry.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlStackCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:1}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-horizontal{flex-direction:row}.stack--wrap{flex-wrap:wrap}";
+
+const SwirlStack = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.align = "start";
+    this.as = "div";
+    this.height = undefined;
+    this.justify = "start";
+    this.orientation = "vertical";
+    this.spacing = "0";
+    this.wrap = false;
+  }
+  render() {
+    const Tag = this.as;
+    const className = index$1.classnames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
+    return (index.h(index.Host, { style: { height: this.height } }, index.h(Tag, { class: className, style: { gap: `var(--s-space-${this.spacing})`, height: this.height } }, index.h("slot", null))));
+  }
+};
+SwirlStack.style = swirlStackCss;
+
+exports.swirl_stack = SwirlStack;