@getflip/swirl-components 0.388.0 → 0.389.1

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 (30) hide show
  1. package/components.json +75 -1
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/swirl-components.cjs.js +1 -1
  4. package/dist/cjs/swirl-resource-list-section.cjs.entry.js +1 -1
  5. package/dist/cjs/swirl-separator.cjs.entry.js +5 -1
  6. package/dist/cjs/swirl-shell-navigation-item.cjs.entry.js +6 -2
  7. package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js +1 -1
  8. package/dist/collection/components/swirl-separator/swirl-separator.js +31 -1
  9. package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js +26 -2
  10. package/dist/components/assets/pdfjs/pdf.worker.min.mjs +4 -1
  11. package/dist/components/swirl-resource-list-section.js +1 -1
  12. package/dist/components/swirl-separator2.js +6 -1
  13. package/dist/components/swirl-shell-navigation-item.js +7 -2
  14. package/dist/esm/loader.js +1 -1
  15. package/dist/esm/swirl-components.js +1 -1
  16. package/dist/esm/swirl-resource-list-section.entry.js +1 -1
  17. package/dist/esm/swirl-separator.entry.js +5 -1
  18. package/dist/esm/swirl-shell-navigation-item.entry.js +6 -2
  19. package/dist/swirl-components/p-83cb302b.entry.js +1 -0
  20. package/dist/swirl-components/p-b243a736.entry.js +1 -0
  21. package/dist/swirl-components/p-ccd7a58d.entry.js +1 -0
  22. package/dist/swirl-components/swirl-components.esm.js +1 -1
  23. package/dist/types/components/swirl-separator/swirl-separator.d.ts +2 -0
  24. package/dist/types/components/swirl-shell-navigation-item/swirl-shell-navigation-item.d.ts +1 -0
  25. package/dist/types/components.d.ts +18 -2
  26. package/package.json +1 -1
  27. package/vscode-data.json +16 -0
  28. package/dist/swirl-components/p-5f5034b5.entry.js +0 -1
  29. package/dist/swirl-components/p-efcb16ef.entry.js +0 -1
  30. package/dist/swirl-components/p-fc54fadf.entry.js +0 -1
package/dist/swirl-components/p-efcb16ef.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r as n,h as i,H as e,d as a}from"./p-CWOhMVtL.js";import{c as t}from"./p-orsBiyT_.js";const l=class{constructor(i){n(this,i),this.hideLabel=!1,this.inlineLabelColor="default",this.markAsNewLabel="New",this.variant="default"}componentWillLoad(){this.forceIconProps()}componentDidRender(){this.forceIconProps()}forceIconProps(){const n=this.el.querySelector("[slot='icon']"),i=this.hideLabel&&"app-icon"===this.variant||"default"===this.variant;n&&(n.tagName.startsWith("SWIRL-ICON")||n.tagName.startsWith("SWIRL-EMOJI")||n.tagName.startsWith("SWIRL-SYMBOL"))&&n.setAttribute("size",i?"20":"32")}render(){const n=Boolean(this.el.querySelector("swirl-app-icon")),a=t("shell-navigation-item",`shell-navigation-item--${this.variant}`,{"shell-navigation-item--active":this.active,"shell-navigation-item--boxed":this.boxed,"shell-navigation-item--filled":this.filled,"shell-navigation-item--inline-label":this.inlineLabel,"shell-navigation-item--gradient":this.withGradient,"shell-navigation-item--hide-label":this.hideLabel,"shell-navigation-item--has-app-icon":n}),l=t("shell-navigation-item__label",{"shell-navigation-item__label--light":"light"===this.inlineLabelColor,"shell-navigation-item__label--dark":"dark"===this.inlineLabelColor,"shell-navigation-item__label--inline":this.inlineLabel}),s=null!=this.badgeLabel,o=!s&&this.markAsNew&&!this.hideLabel&&"default"===this.variant,r=!s&&this.markAsNew&&this.hideLabel&&"default"===this.variant,h=Boolean(this.href);return i(e,{key:"eb3cc38916a4a868d447c631b65d2ebfb3c158e5"},i("swirl-tooltip",{key:"5d38b0bf756b0a845d0ddff0aa6fe2a955da44f8",active:this.hideLabel,content:this.description?`${this.label} ${this.description}`:this.label,delay:100,position:"right",positioning:"fixed"},i(h?"a":"button",{key:"852f4913ae1c9e90f0ecccf32f14d857321c5694",class:a,href:this.href,target:this.target,type:h?void 0:"button",title:this.hideLabel?void 0:this.label},i("span",{key:"f9de6d6dc253563b0397fbbc42d4bdb5260015fb",class:"shell-navigation-item__icon"},i("slot",{key:"e1a0fc498c658f9094c906b8319971af9025883e",name:"icon"})),this.hideLabel?i("swirl-visually-hidden",null,i("span",{class:l},this.label)):"default"!==this.variant?i("span",{class:l},this.label):i("div",{class:"shell-navigation-item__text-wrapper"},i("span",{class:l},this.label),this.description&&i("span",{class:"shell-navigation-item__description"},this.description)),s&&i("span",{key:"6697baa3fdc919e7a2b7c8595b871566a6b8eaa2",class:"shell-navigation-item__badge-wrapper"},i("swirl-badge",{key:"feadd39faef80c53f72a77e16a5def012d77c53b","aria-label":this.badgeLabel,class:t("shell-navigation-item__badge",{"shell-navigation-item__badge--dot":""===this.badgeLabel}),label:this.badgeLabel,size:"xs",variant:""===this.badgeLabel?"dot":"default"})),o&&i("swirl-tag",{key:"dd8f48f9940c328b8fae2676e9a3b773a70e12d1",class:"shell-navigation-item__is-new-tag",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"s",variant:"strong"}),r&&i("swirl-badge",{key:"ffbfa549236b20fc6fff35a96865386ea7b7517f",class:"shell-navigation-item__is-new-badge",intent:"info",label:this.markAsNewLabel.toLocaleUpperCase(),size:"xs",variant:"dot"}))))}get el(){return a(this)}};l.style='/**\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 --swirl-app-icon-size: 2rem;\n --swirl-shell-navigation-item-gradient: linear-gradient(\n rgba(0, 0, 0, 0),\n rgba(0, 0, 0, 0.8)\n );\n\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 .shell-navigation-item:hover .shell-navigation-item__is-new-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 .shell-navigation-item:active .shell-navigation-item__is-new-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 {\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--boxed .shell-navigation-item__icon {\n overflow: hidden;\n border-radius: var(--s-border-radius-sm);\n background-color: var(--s-background-default);\n box-shadow: 0 0 0 var(--s-border-width-default) var(--s-border-default);\n }\n\n.shell-navigation-item.shell-navigation-item--default.shell-navigation-item--filled .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--filled {\n padding: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--filled:not(.shell-navigation-item--has-app-icon) .shell-navigation-item__icon {\n color: var(--s-icon-on-action-primary);\n background-color: var(--s-action-primary-default);\n }\n\n.shell-navigation-item.shell-navigation-item--filled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled {\n --swirl-app-icon-size: 100%;\n\n height: auto;\n padding: 0;\n align-items: start;\n border-radius: var(--s-border-radius-base);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover {\n background-color: transparent;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled:hover .shell-navigation-item__label {\n text-decoration: underline;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(*) {\n position: absolute;\n top: var(--s-space-12);\n left: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled ::slotted(swirl-app-icon) {\n position: inherit;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n min-width: 100%;\n height: auto;\n min-height: auto;\n border-radius: var(--s-border-radius-base);\n background-color: var(--s-surface-sunken-hovered);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled.shell-navigation-item--gradient .shell-navigation-item__icon::after {\n position: absolute;\n display: inline-block;\n width: 100%;\n border-radius: var(--s-border-radius-base);\n background-image: var(--swirl-shell-navigation-item-gradient);\n content: "";\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n color: var(--s-text-default);\n font-weight: var(--s-font-weight-semibold);\n text-align: start;\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline {\n position: absolute;\n bottom: var(--s-space-12);\n left: var(--s-space-12);\n margin-right: var(--s-space-12);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--light {\n color: rgba(242, 242, 242, 1);\n }\n\n.shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label--inline.shell-navigation-item__label--dark {\n color: rgb(25, 25, 25);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon {\n --swirl-app-icon-size: 100%;\n font-size: var(--s-font-size-xs);\n padding: var(--s-space-8) var(--s-space-4);\n align-items: center;\n height: auto;\n border-radius: var(--s-border-radius-sm);\n flex-direction: column;\n container-type: inline-size;\n gap: var(--s-space-8);\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label {\n align-items: start;\n padding: var(--s-space-8);\n --swirl-app-icon-size: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__icon {\n border-radius: var(--s-border-radius-sm);\n max-width: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon.shell-navigation-item--hide-label .shell-navigation-item__badge-wrapper {\n max-width: 2rem;\n max-height: 2rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__icon {\n overflow: hidden;\n width: 100%;\n max-width: 3.5rem;\n height: auto;\n border-radius: var(--s-border-radius-base);\n\n color: var(--s-icon-on-action-primary);\n aspect-ratio: 1;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper {\n max-width: 3.5rem;\n max-height: 3.5rem;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label {\n line-height: var(--s-line-height-xs);\n text-align: center;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge-wrapper, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge-wrapper {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__label, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__label {\n display: -webkit-box;\n overflow: hidden;\n white-space: normal;\n text-overflow: unset;\n overflow-wrap: anywhere;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n.shell-navigation-item.shell-navigation-item--app-icon .shell-navigation-item__badge, .shell-navigation-item.shell-navigation-item--tiled .shell-navigation-item__badge {\n position: absolute;\n top: -0.375rem;\n right: -0.375rem;\n padding: var(--s-space-2);\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__icon {\n color: var(--s-icon-highlight);\n }\n\n.shell-navigation-item.shell-navigation-item--active .shell-navigation-item__label {\n color: var(--s-text-highlight);\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 width: 2rem;\n min-width: 2rem;\n height: 2rem;\n min-height: 2rem;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n border-radius: var(--s-border-radius-base);\n}\n\n.shell-navigation-item__text-wrapper {\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__description {\n margin-left: var(--s-space-8);\n font-weight: var(--s-font-weight-normal);\n color: var(--s-text-subdued);\n}\n\n.shell-navigation-item__badge {\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n.shell-navigation-item__is-new-tag {\n flex-shrink: 0;\n}\n\n.shell-navigation-item__is-new-badge {\n position: absolute;\n top: 0.625rem;\n right: 0.625rem;\n flex-shrink: 0;\n --swirl-badge-border-color: var(--swirl-shell-background);\n}\n\n@container (max-width: 4rem) {\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--gradient .shell-navigation-item__icon {\n --swirl-shell-navigation-item-gradient: none;\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';export{l as swirl_shell_navigation_item}
package/dist/swirl-components/p-fc54fadf.entry.js DELETED
@@ -1 +0,0 @@
1
- import{r,h as a,F as t,H as e}from"./p-CWOhMVtL.js";import{c as o}from"./p-orsBiyT_.js";const s=class{constructor(a){r(this,a),this.borderColor="default",this.color="default",this.orientation="horizontal",this.spacing="8"}componentWillLoad(){this.forceColor()}forceColor(){"default"!==this.borderColor&&(console.warn('[Swirl] The "borderColor" prop of swirl-separator is deprecated and will be removed with the next major release. Please use the "color" prop to achieve the same result.'),this.color=this.borderColor)}render(){const r="horizontal"===this.orientation?{paddingTop:`var(--s-space-${this.spacing})`,paddingBottom:`var(--s-space-${this.spacing})`}:{paddingRight:`var(--s-space-${this.spacing})`,paddingLeft:`var(--s-space-${this.spacing})`},s=o("separator",`separator--color-${this.color}`,`separator--orientation-${this.orientation}`);return a(e,{key:"17b01a0eecb1f97564885965da64a90967730e14","aria-orientation":this.orientation,class:s,role:"separator",style:r},a("span",{key:"e9f7f71c5da01191f232455e8f5e6d9c39131a24",class:"separator__line"}),this.label&&a(t,{key:"1f9f5c1d0b16766ed8677d7657946c335a5ab8ac"},a("span",{key:"ae1e1cc3149d5f0be42ea4be999cfda0fcfb6def",class:"separator__label"},this.label),a("span",{key:"029ca069ba60923d67310941f464a92212e4fbd5",class:"separator__line"})))}};s.style=":host{display:flex;width:100%;align-items:center;gap:var(--s-space-8)}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto;flex-direction:column}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--color-critical) .separator__line{background-color:var(--s-border-critical)}:host(.separator--color-critical) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-strong) .separator__line{background-color:var(--s-border-strong)}:host(.separator--color-strong) .separator__label{color:var(--s-text-subdued)}:host(.separator--color-highlight) .separator__line{background-color:var(--s-border-highlight)}:host(.separator--color-highlight) .separator__label{color:var(--s-text-highlight)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}.separator__label{flex-shrink:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-size:var(--s-font-size-sm);color:var(--s-text-disabled)}";export{s as swirl_separator}