@getflip/swirl-components 0.179.0 → 0.181.0

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1de6abbd.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  display: inline-flex;\n  width: 100%;\n}\n\n:host * {\n    box-sizing: border-box;\n  }\n\n.shell-navigation-item {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 3rem;\n  padding: var(--s-space-12);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\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  text-decoration: none;\n  cursor: pointer;\n  container-type: size;\n  gap: var(--s-space-16);\n}\n\n.shell-navigation-item:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n.shell-navigation-item:focus {\n    outline: none;\n  }\n\n.shell-navigation-item:focus-visible {\n    z-index: 1;\n    box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n  }\n\n.shell-navigation-item.shell-navigation-item--active {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n    background-color: var(--s-surface-sunken-default)\n}\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  min-width: 1.5rem;\n  min-height: 1.5rem;\n  justify-content: center;\n  align-items: center;\n}\n\n.shell-navigation-item__label {\n  overflow: hidden;\n  min-width: 0;\n  flex-grow: 1;\n  text-align: start;\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    top: var(--s-space-4);\n    right: var(--s-space-4);\n    padding: var(--s-space-2);\n  }\n\n  .shell-navigation-item__badge--dot {\n    top: var(--s-space-8);\n    right: var(--s-space-8);\n  }\n}\n\n@container (min-width: 10rem) {\n  .shell-navigation-item__badge--dot {\n    padding-right: var(--s-space-4);\n  }\n}\n";
+const swirlShellNavigationItemCss = "/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host * {\n    box-sizing: border-box;\n  }\n\n.shell-navigation-item {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 3rem;\n  padding: var(--s-space-8);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  border: none;\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-overlay-default);\n  font: inherit;\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  text-decoration: none;\n  cursor: pointer;\n  container-type: size;\n  gap: var(--s-space-12);\n}\n\n.shell-navigation-item:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n.shell-navigation-item:focus {\n    outline: none;\n  }\n\n.shell-navigation-item:focus-visible {\n    z-index: 1;\n    box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n  }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n      background-color: var(--s-background-default);\n      border-color: var(--s-border-default);\n      border-radius: var(--s-border-radius-sm);\n      border-width: var(--s-border-width-default);\n      border-style: solid;\n    }\n\n.shell-navigation-item.shell-navigation-item--boxed {\n\n    --swirl-app-icon-size: calc(2rem - 2 * var(--s-border-width-default));\n}\n\n.shell-navigation-item.shell-navigation-item--active {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:hover {\n    background-color: var(--s-surface-sunken-hovered);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:hover .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-hovered);\n    }\n\n.shell-navigation-item.shell-navigation-item--active:active {\n    background-color: var(--s-surface-sunken-pressed);\n  }\n\n.shell-navigation-item.shell-navigation-item--active:active .shell-navigation-item__badge {\n      --swirl-badge-border-color: var(--s-surface-sunken-pressed);\n    }\n\n@media (min-width: 992px) {\n\n.shell-navigation-item {\n    background-color: var(--s-surface-sunken-default)\n}\n  }\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  min-width: 2rem;\n  min-height: 2rem;\n  justify-content: center;\n  align-items: center;\n}\n\n.shell-navigation-item__label {\n  overflow: hidden;\n  min-width: 0;\n  flex-grow: 1;\n  text-align: start;\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    top: var(--s-space-4);\n    right: var(--s-space-4);\n    padding: var(--s-space-2);\n  }\n\n  .shell-navigation-item__badge--dot {\n    top: var(--s-space-8);\n    right: var(--s-space-8);\n  }\n}\n\n@container (min-width: 10rem) {\n  .shell-navigation-item__badge--dot {\n    padding-right: var(--s-space-4);\n  }\n}\n";
 
 const SwirlShellNavigationItem = class {
   constructor(hostRef) {
@@ -15,10 +15,12 @@ const SwirlShellNavigationItem = class {
     this.href = undefined;
     this.label = undefined;
     this.target = undefined;
+    this.boxed = undefined;
   }
   render() {
     const className = index$1.classnames("shell-navigation-item", {
       "shell-navigation-item--active": this.active,
+      "shell-navigation-item--boxed": this.boxed,
     });
     const isLink = Boolean(this.href);
     const Tag = isLink ? "a" : "button";

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

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1de6abbd.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-d4123549.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
+
+const SwirlTooltip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onKeydown = (event) => {
+      if (event.code === "Escape") {
+        this.hide();
+      }
+    };
+    this.reposition = async () => {
+      const referenceElement = this.el.children[0];
+      if (!Boolean(referenceElement) || !Boolean(this.popperEl)) {
+        return;
+      }
+      const middleware = [
+        ...this.options.middleware.filter((middleware) => middleware.name !== "arrow"),
+        floatingUi_dom_esm.arrow({ element: this.arrowElement, padding: 12 }),
+      ];
+      this.actualPosition = await floatingUi_dom_esm.computePosition(referenceElement, this.popperEl, { ...this.options, middleware });
+      const arrowX = this.actualPosition.middlewareData.arrow?.x;
+      const arrowY = this.actualPosition.middlewareData.arrow?.y;
+      this.arrowStyles = {
+        left: Boolean(arrowX) ? arrowX + "px" : undefined,
+        top: Boolean(arrowY) ? arrowY + "px" : undefined,
+      };
+    };
+    this.show = () => {
+      this.visible = true;
+      requestAnimationFrame(() => {
+        const referenceElement = this.el.children[0];
+        if (!Boolean(referenceElement)) {
+          return;
+        }
+        this.reposition();
+        this.disableAutoUpdate = floatingUi_dom_esm.autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
+      });
+    };
+    this.showWithDelay = () => {
+      if (Boolean(this.showTimeout)) {
+        clearTimeout(this.showTimeout);
+        this.showTimeout = undefined;
+      }
+      this.showTimeout = setTimeout(() => {
+        this.show();
+      }, this.delay);
+    };
+    this.hide = () => {
+      if (Boolean(this.showTimeout)) {
+        clearTimeout(this.showTimeout);
+        this.showTimeout = undefined;
+      }
+      this.visible = false;
+      this.disableAutoUpdate?.();
+    };
+    this.updateOptions = () => {
+      const margin = +getComputedStyle(document.documentElement)
+        .getPropertyValue("--s-space-12")
+        .replace("rem", "") * 16;
+      this.options = {
+        middleware: [floatingUi_dom_esm.offset(margin), floatingUi_dom_esm.shift(), floatingUi_dom_esm.flip()],
+        placement: this.position,
+        strategy: this.positioning,
+      };
+    };
+    this.content = undefined;
+    this.delay = 300;
+    this.position = "top";
+    this.positioning = "absolute";
+    this.actualPosition = undefined;
+    this.arrowStyles = undefined;
+    this.visible = false;
+  }
+  watchPosition() {
+    this.updateOptions();
+  }
+  onMouseEnter() {
+    this.showWithDelay();
+  }
+  onMouseLeave() {
+    this.hide();
+  }
+  onWindowResize() {
+    this.reposition();
+  }
+  onWindowScroll() {
+    this.reposition();
+  }
+  componentWillLoad() {
+    this.reposition();
+  }
+  componentDidLoad() {
+    this.updateOptions();
+  }
+  render() {
+    const className = index$1.classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
+      "tooltip--visible": this.visible,
+    });
+    return (index.h(index.Host, { onKeydown: this.onKeydown }, index.h("span", { class: className }, index.h("span", { class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, index.h("slot", null)), index.h("span", { class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        top: Boolean(this.actualPosition)
+          ? `${this.actualPosition?.y}px`
+          : "",
+        left: Boolean(this.actualPosition)
+          ? `${this.actualPosition?.x}px`
+          : "",
+        position: this.positioning,
+      } }, this.visible && (index.h("span", { class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { class: "tooltip__content", innerHTML: this.content }))), index.h("span", { class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+        ...this.arrowStyles,
+        visibility: this.visible ? "visible" : "hidden",
+      } })))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "position": ["watchPosition"]
+  }; }
+};
+SwirlTooltip.style = swirlTooltipCss;
+
+exports.swirl_tooltip = SwirlTooltip;