@getflip/swirl-components 0.116.0 → 0.117.0

package/dist/swirl-components/p-c4d4a99d.entry.js

@@ -1 +0,0 @@
-import{r as e,h as a,H as t}from"./p-3fca9a05.js";import{c as i}from"./p-b7898321.js";const r=class{constructor(a){e(this,a),this.icon=void 0,this.intent="critical",this.label=void 0,this.size="m",this.variant="default"}render(){const e=i("badge",`badge--intent-${this.intent}`,`badge--size-${this.size}`,`badge--variant-${this.variant}`,{"badge--has-icon":this.icon});return a(t,{role:"status"},a("span",{class:e},this.icon&&a("span",{class:"badge__icon",innerHTML:this.icon}),void 0===this.icon&&a("span",{class:"badge__label"},this.label)))}};r.style=":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--swirl-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>swirl-icon,.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-neutral{color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>swirl-icon,.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";export{r as swirl_badge}

package/dist/swirl-components/p-ca78767e.entry.js

@@ -1 +0,0 @@
-import{r as n,h as e,H as i,g as t}from"./p-3fca9a05.js";import{c as a}from"./p-b7898321.js";const s=class{constructor(e){n(this,e),this.onKeyDown=n=>{"Enter"===n.code&&(n.preventDefault(),this.el.click())},this.active=void 0,this.badgeLabel=void 0,this.label=void 0}render(){const n=a("shell-navigation-item",{"shell-navigation-item--active":this.active});return e(i,{class:n,onKeyDown:this.onKeyDown,role:"link",tabIndex:0},e("span",{class:"shell-navigation-item__icon"},e("slot",{name:"icon"})),e("span",{class:"shell-navigation-item__label"},this.label),this.badgeLabel&&e("swirl-badge",{class:"shell-navigation-item__badge",size:"s","aria-label":this.badgeLabel,label:this.badgeLabel}))}get el(){return t(this)}};s.style='/**\n* seems the container query does not work as expected\n*/\n\n:host {\n  container-type: inline-size;\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 3.5rem;\n  padding-right: var(--s-space-12);\n  padding-left: var(--s-space-12);\n  flex-shrink: 0;\n  justify-content: flex-start;\n  align-items: center;\n  color: var(--s-text-default);\n  background-color: var(--s-background-default);\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  gap: var(--s-space-12);\n}\n\n:host(:hover) {\n    background-color: var(--s-background-hovered);\n  }\n\n:host(:active) {\n    background-color: var(--s-background-pressed);\n    color: var(--s-text-highlight);\n  }\n\n:host(:focus) {\n    outline: none;\n  }\n\n:host(:focus-visible) .shell-navigation-item__label {\n      border-radius: var(--s-border-radius-xs);\n      box-shadow: 0 0 0 0.125rem var(--s-focus-default);\n    }\n\n:host(.shell-navigation-item--active) {\n    color: var(--s-text-highlight);\n    background-color: var(--s-surface-raised-default);\n  }\n\n:host(.shell-navigation-item--active:hover) {\n    background-color: var(--s-surface-raised-hovered);\n  }\n\n:host(.shell-navigation-item--active:active) {\n    background-color: var(--s-surface-raised-pressed);\n    color: var(--s-text-highlight);\n  }\n\n:host * {\n    box-sizing: border-box;\n  }\n\n:host:before {\n  content: "";\n  display: none;\n  position: absolute;\n  left: 0;\n  height: 2.5rem;\n  width: 4px;\n  background-color: var(--s-icon-highlight);\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}\n\n:host(.shell-navigation-item--active):before {\n  display: block;\n}\n\n.shell-navigation-item__icon {\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  min-width: 2.5rem;\n  min-height: 2.5rem;\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@container (max-width: 4rem) {\n  .shell-navigation-item__label {\n    display: none;\n  }\n\n  .shell-navigation-item__badge {\n    position: absolute;\n    bottom: 0;\n    right: var(--s-space-4);\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';export{s as swirl_shell_navigation_item}

package/dist/swirl-components/p-d2fc7935.entry.js

@@ -1 +0,0 @@
-import{r as l,h as e,H as a}from"./p-3fca9a05.js";import{c as s}from"./p-b7898321.js";import{g as i,a as o}from"./p-6e4e9ae0.js";const t=class{constructor(e){l(this,e),this.desktopMediaQuery=i(),this.desktopMediaQueryHandler=l=>{l.matches?this.expandLeftSidebar():this.collapseLeftSidebar()},this.collapseLeftSidebar=()=>{this.collapsedSidebar=!0,this.collapsing=!0,setTimeout((()=>{this.collapsing=!1,this.sidebarHovered=!1}),200)},this.expandLeftSidebar=()=>{this.hideSidebar||(this.collapsedSidebar=!1)},this.toggleSidebar=()=>{this.collapsedSidebar?this.expandLeftSidebar():this.collapseLeftSidebar()},this.onBackdropClick=()=>{this.collapsedSidebar||this.collapseLeftSidebar()},this.onSidebarClick=()=>{this.collapsedSidebar&&(document.activeElement?.blur(),o()?.blur())},this.onSidebarMouseEnter=()=>{this.sidebarHovered=!0},this.onSidebarMouseLeave=()=>{this.sidebarHovered=!1},this.hideSidebar=void 0,this.mainNavigationLabel="Main",this.sidebarToggleLabel="Toggle sidebar",this.collapsedSidebar=void 0,this.collapsing=void 0,this.sidebarHovered=void 0}componentWillLoad(){this.desktopMediaQuery.matches||this.collapseLeftSidebar(),this.desktopMediaQuery.onchange=this.desktopMediaQueryHandler}async collapseSidebar(){this.collapseLeftSidebar()}async extendSidebar(){this.expandLeftSidebar()}render(){const l=s("shell-layout",{"shell-layout--collapsed-sidebar":this.collapsedSidebar,"shell-layout--collapsing":this.collapsing,"shell-layout--hide-sidebar":this.hideSidebar}),i=s("shell-layout__sidebar-wrapper",{"shell-layout__sidebar-wrapper--hovered":this.sidebarHovered}),o=s("shell-layout__backdrop",{"shell-layout__backdrop--fading":this.collapsing});return e(a,null,e("div",{class:l},e("div",{class:"shell-layout__banner"},e("slot",{name:"banner"})),e("div",{class:i,onClick:this.onSidebarClick,onMouseEnter:this.onSidebarMouseEnter,onMouseLeave:this.onSidebarMouseLeave},!this.hideSidebar&&e("div",{class:"shell-layout__sidebar"},e("header",{class:"shell-layout__header"},e("div",{class:"shell-layout__logo-bar"},e("div",{class:"shell-layout__expanded-logo"},e("slot",{name:"logo-expanded"})),e("div",{class:"shell-layout__collapsed-logo"},e("slot",{name:"logo-collapsed"})),e("div",{class:"shell-layout__toggle"},e("swirl-button",{swirlAriaExpanded:String(!this.collapsedSidebar),hideLabel:!0,icon:this.collapsedSidebar?"<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>":"<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>",label:this.sidebarToggleLabel,onClick:this.toggleSidebar}))),e("div",{class:"shell-layout__tools"},e("slot",{name:"tools"}))),e("nav",{"aria-label":this.mainNavigationLabel,class:"shell-layout__main-navigation"},e("slot",{name:"main-navigation"})))),e("main",{class:"shell-layout__main"},e("slot",{name:"main"})),(!this.collapsedSidebar||this.collapsing)&&e("div",{class:o,onClick:this.onBackdropClick})))}};t.style=':host{--extended-sidebar-width:17rem;--collapsed-sidebar-width:4rem;display:flex;width:100%;height:100%}:host *{box-sizing:border-box}.shell-layout{display:grid;width:100%;min-height:100%;transition:grid-template-columns 0.2s;grid-template-columns:0 1fr;grid-template-rows:auto 1fr;grid-template-areas:"banner banner"\n    "sidebar main"}@media (min-width: 992px){.shell-layout{grid-template-columns:var(--extended-sidebar-width) 1fr}}.shell-layout--collapsed-sidebar{grid-template-columns:0 1fr}@media (min-width: 992px){.shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper.shell-layout__sidebar-wrapper--hovered .shell-layout__sidebar,.shell-layout--collapsed-sidebar:not(.shell-layout--collapsing) .shell-layout__sidebar-wrapper:focus-within .shell-layout__sidebar{width:var(--extended-sidebar-width);box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),\n              0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{transform:translate3d(-100%, 0, 0)}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper .shell-layout__sidebar{width:100%;box-shadow:none}@media (min-width: 992px){.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{max-width:var(--collapsed-sidebar-width);flex-basis:var(--collapsed-sidebar-width);transform:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__sidebar{box-shadow:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__collapsed-logo{display:inline-flex;justify-content:center;align-items:center}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__expanded-logo{display:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__toggle{display:none}}@media (min-width: 992px){.shell-layout--collapsed-sidebar{grid-template-columns:var(--collapsed-sidebar-width) 1fr}}.shell-layout--hide-sidebar{grid-template-columns:1fr;grid-template-areas:"banner"\n    "main"}@media (min-width: 992px){.shell-layout--hide-sidebar{grid-template-columns:1fr}}.shell-layout__banner{grid-area:banner}.shell-layout__sidebar-wrapper{position:absolute;z-index:2;top:0;bottom:0;left:0;width:100%;max-width:var(--extended-sidebar-width);min-height:0;flex-basis:var(--extended-sidebar-width);flex-shrink:0;transition:max-width 0.2s, transform 0.2s;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar-wrapper{position:relative;inset:auto}}.shell-layout__sidebar{display:flex;width:var(--extended-sidebar-width);height:100%;border-right:var(--s-border-width-default) solid var(--s-border-default);flex-direction:column;transition:box-shadow 0.2s, width 0.2s;box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),\n    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}@media (min-width: 992px){.shell-layout__sidebar{box-shadow:none}}.shell-layout__header{flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default)}.shell-layout__logo-bar{display:flex;overflow:hidden;align-items:center;height:4.5rem}.shell-layout__expanded-logo{padding-right:var(--s-space-12);padding-left:var(--s-space-12);flex-grow:1}.shell-layout__collapsed-logo{display:none;padding-right:var(--s-space-12);padding-left:var(--s-space-12);flex-grow:1}.shell-layout__toggle{padding-right:var(--s-space-16);padding-left:var(--s-space-12);flex-grow:0;flex-shrink:0}.shell-layout__mobile-toggle{position:absolute;z-index:2;top:var(--s-space-12);left:calc(100% + var(--s-space-16))}@media (min-width: 992px){.shell-layout__mobile-toggle{display:none}}.shell-layout__main-navigation{overflow:auto;flex-grow:1;background-color:var(--s-background-default)}.shell-layout__main{min-height:0;background-color:var(--s-background-default);grid-area:main}.shell-layout__main>*,.shell-layout__main ::slotted(*){height:100%}.shell-layout__backdrop{position:fixed;z-index:1;background-color:rgba(0, 0, 0, 0.4);animation:shell-layout-backdrop-fade-in 0.1s;inset:0}@media (min-width: 992px){.shell-layout__backdrop{display:none}}.shell-layout__backdrop--fading{animation:shell-layout-backdrop-fade-out 0.2s}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-backdrop-fade-out{from{opacity:1}to{opacity:0}}';export{t as swirl_shell_layout}

package/dist/swirl-components/p-f83a0b0f.entry.js

@@ -1 +0,0 @@
-import{r as C,h as s,F as i}from"./p-3fca9a05.js";import{c as t}from"./p-b7898321.js";const r=class{constructor(s){C(this,s),this.size=24}render(){const C=20===this.size?24:this.size,r=t("swirl-icon",`swirl-icon--size-${this.size}`);return s("svg",{class:r,fill:"none",height:this.size,part:"icon",viewBox:`0 0 ${C} ${C}`,width:this.size,xmlns:"http://www.w3.org/2000/svg"},16===this.size&&s(i,null,s("path",{d:"M4.08503 11.5291C3.9628 11.4068 3.90169 11.2513 3.90169 11.0624C3.90169 10.8735 3.9628 10.7179 4.08503 10.5957L6.66836 7.99572L4.08503 5.39572C3.9628 5.2735 3.89903 5.12061 3.89369 4.93705C3.88792 4.75394 3.95169 4.59572 4.08503 4.46239C4.20725 4.34016 4.3628 4.27905 4.55169 4.27905C4.74058 4.27905 4.89614 4.34016 5.01836 4.46239L8.08503 7.52905C8.15169 7.59572 8.19903 7.66794 8.22703 7.74572C8.25458 7.8235 8.26836 7.90683 8.26836 7.99572C8.26836 8.08461 8.25458 8.16794 8.22703 8.24572C8.19903 8.3235 8.15169 8.39572 8.08503 8.46239L5.01836 11.5291C4.89614 11.6513 4.74325 11.7151 4.55969 11.7204C4.37658 11.7262 4.21836 11.6624 4.08503 11.5291ZM8.48503 11.5291C8.3628 11.4068 8.30169 11.2513 8.30169 11.0624C8.30169 10.8735 8.3628 10.7179 8.48503 10.5957L11.0684 7.99572L8.48503 5.39572C8.3628 5.2735 8.2988 5.12061 8.29303 4.93705C8.28769 4.75394 8.35169 4.59572 8.48503 4.46239C8.60725 4.34016 8.7628 4.27905 8.95169 4.27905C9.14058 4.27905 9.29614 4.34016 9.41836 4.46239L12.485 7.52905C12.5517 7.59572 12.5988 7.66794 12.6264 7.74572C12.6544 7.8235 12.6684 7.90683 12.6684 7.99572C12.6684 8.08461 12.6544 8.16794 12.6264 8.24572C12.5988 8.3235 12.5517 8.39572 12.485 8.46239L9.41836 11.5291C9.29614 11.6513 9.14347 11.7151 8.96036 11.7204C8.7768 11.7262 8.61836 11.6624 8.48503 11.5291Z",fill:"currentColor"})),(20===this.size||24===this.size)&&s(i,null,s("path",{d:"M6.12754 17.2937C5.94421 17.1104 5.85254 16.877 5.85254 16.5937C5.85254 16.3104 5.94421 16.077 6.12754 15.8937L10.0025 11.9937L6.12754 8.0937C5.94421 7.91037 5.84854 7.68103 5.84054 7.4057C5.83187 7.13103 5.92754 6.8937 6.12754 6.6937C6.31087 6.51037 6.54421 6.4187 6.82754 6.4187C7.11087 6.4187 7.34421 6.51037 7.52754 6.6937L12.1275 11.2937C12.2275 11.3937 12.2985 11.502 12.3405 11.6187C12.3819 11.7354 12.4025 11.8604 12.4025 11.9937C12.4025 12.127 12.3819 12.252 12.3405 12.3687C12.2985 12.4854 12.2275 12.5937 12.1275 12.6937L7.52754 17.2937C7.34421 17.477 7.11487 17.5727 6.83954 17.5807C6.56487 17.5894 6.32754 17.4937 6.12754 17.2937ZM12.7275 17.2937C12.5442 17.1104 12.4525 16.877 12.4525 16.5937C12.4525 16.3104 12.5442 16.077 12.7275 15.8937L16.6025 11.9937L12.7275 8.0937C12.5442 7.91037 12.4482 7.68103 12.4395 7.4057C12.4315 7.13103 12.5275 6.8937 12.7275 6.6937C12.9109 6.51037 13.1442 6.4187 13.4275 6.4187C13.7109 6.4187 13.9442 6.51037 14.1275 6.6937L18.7275 11.2937C18.8275 11.3937 18.8982 11.502 18.9395 11.6187C18.9815 11.7354 19.0025 11.8604 19.0025 11.9937C19.0025 12.127 18.9815 12.252 18.9395 12.3687C18.8982 12.4854 18.8275 12.5937 18.7275 12.6937L14.1275 17.2937C13.9442 17.477 13.7152 17.5727 13.4405 17.5807C13.1652 17.5894 12.9275 17.4937 12.7275 17.2937Z",fill:"currentColor"})),28===this.size&&s(i,null,s("path",{d:"M7.14879 20.176C6.93491 19.9621 6.82796 19.6899 6.82796 19.3594C6.82796 19.0288 6.93491 18.7566 7.14879 18.5427L11.6696 13.9927L7.14879 9.44269C6.93491 9.2288 6.82329 8.96125 6.81396 8.64003C6.80385 8.31958 6.91546 8.04269 7.14879 7.80936C7.36268 7.59547 7.63491 7.48853 7.96546 7.48853C8.29602 7.48853 8.56824 7.59547 8.78213 7.80936L14.1488 13.176C14.2655 13.2927 14.3483 13.4191 14.3973 13.5552C14.4455 13.6913 14.4696 13.8371 14.4696 13.9927C14.4696 14.1482 14.4455 14.2941 14.3973 14.4302C14.3483 14.5663 14.2655 14.6927 14.1488 14.8094L8.78213 20.176C8.56824 20.3899 8.30068 20.5015 7.97946 20.5109C7.65902 20.521 7.38213 20.4094 7.14879 20.176ZM14.8488 20.176C14.6349 19.9621 14.528 19.6899 14.528 19.3594C14.528 19.0288 14.6349 18.7566 14.8488 18.5427L19.3696 13.9927L14.8488 9.44269C14.6349 9.2288 14.5229 8.96125 14.5128 8.64003C14.5035 8.31958 14.6155 8.04269 14.8488 7.80936C15.0627 7.59547 15.3349 7.48853 15.6655 7.48853C15.996 7.48853 16.2682 7.59547 16.4821 7.80936L21.8488 13.176C21.9655 13.2927 22.0479 13.4191 22.0961 13.5552C22.1451 13.6913 22.1696 13.8371 22.1696 13.9927C22.1696 14.1482 22.1451 14.2941 22.0961 14.4302C22.0479 14.5663 21.9655 14.6927 21.8488 14.8094L16.4821 20.176C16.2682 20.3899 16.0011 20.5015 15.6806 20.5109C15.3594 20.521 15.0821 20.4094 14.8488 20.176Z",fill:"currentColor"})))}};r.style=":host{display:inline-flex}";export{r as swirl_icon_double_arrow_right}