@getflip/swirl-components 0.28.0 → 0.29.0

package/dist/types/components.d.ts

@@ -15,8 +15,9 @@ import { SwirlBannerAriaRole, SwirlBannerIntent, SwirlBannerSize } from "./compo
 import { SwirlBoxOverflow, SwirlBoxPadding } from "./components/swirl-box/swirl-box";
 import { SwirlButtonIconPosition, SwirlButtonIntent, SwirlButtonSize, SwirlButtonType, SwirlButtonVariant } from "./components/swirl-button/swirl-button";
 import { SwirlButtonGroupOrientation } from "./components/swirl-button-group/swirl-button-group";
+import { SwirlCardBorderRadius } from "./components/swirl-card/swirl-card";
 import { SwirlCheckboxState } from "./components/swirl-checkbox/swirl-checkbox";
-import { SwirlChipIntent } from "./components/swirl-chip/swirl-chip";
+import { SwirlChipIntent, SwirlChipVariant } from "./components/swirl-chip/swirl-chip";
 import { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
 import { WCDatepickerLabels } from "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker";
 import { SwirlDescriptionListItemOrientation } from "./components/swirl-description-list-item/swirl-description-list-item";
@@ -58,8 +59,9 @@ export { SwirlBannerAriaRole, SwirlBannerIntent, SwirlBannerSize } from "./compo
 export { SwirlBoxOverflow, SwirlBoxPadding } from "./components/swirl-box/swirl-box";
 export { SwirlButtonIconPosition, SwirlButtonIntent, SwirlButtonSize, SwirlButtonType, SwirlButtonVariant } from "./components/swirl-button/swirl-button";
 export { SwirlButtonGroupOrientation } from "./components/swirl-button-group/swirl-button-group";
+export { SwirlCardBorderRadius } from "./components/swirl-card/swirl-card";
 export { SwirlCheckboxState } from "./components/swirl-checkbox/swirl-checkbox";
-export { SwirlChipIntent } from "./components/swirl-chip/swirl-chip";
+export { SwirlChipIntent, SwirlChipVariant } from "./components/swirl-chip/swirl-chip";
 export { SwirlColumnsSpacing } from "./components/swirl-columns/swirl-columns";
 export { WCDatepickerLabels } from "wc-datepicker/dist/types/components/wc-datepicker/wc-datepicker";
 export { SwirlDescriptionListItemOrientation } from "./components/swirl-description-list-item/swirl-description-list-item";
@@ -240,6 +242,7 @@ export namespace Components {
     }
     interface SwirlCard {
         "as"?: string;
+        "borderRadius"?: SwirlCardBorderRadius;
         "elevated"?: boolean;
         "highlighted"?: boolean;
         "href"?: string;
@@ -276,11 +279,11 @@ export namespace Components {
         "value"?: string;
     }
     interface SwirlChip {
-        "avatar"?: string;
         "icon"?: string;
         "intent"?: SwirlChipIntent;
         "interactive"?: boolean;
         "label": string;
+        "variant"?: SwirlChipVariant;
     }
     interface SwirlColumns {
         "columns"?: string;
@@ -2786,6 +2789,7 @@ declare namespace LocalJSX {
     }
     interface SwirlCard {
         "as"?: string;
+        "borderRadius"?: SwirlCardBorderRadius;
         "elevated"?: boolean;
         "highlighted"?: boolean;
         "href"?: string;
@@ -2823,11 +2827,11 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface SwirlChip {
-        "avatar"?: string;
         "icon"?: string;
         "intent"?: SwirlChipIntent;
         "interactive"?: boolean;
         "label": string;
+        "variant"?: SwirlChipVariant;
     }
     interface SwirlColumns {
         "columns"?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "description": "Swirl Design System Web Component Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/vscode-data.json

@@ -811,6 +811,10 @@
           "name": "as",
           "description": ""
         },
+        {
+          "name": "border-radius",
+          "description": ""
+        },
         {
           "name": "elevated",
           "description": ""
@@ -946,10 +950,6 @@
         "value": ""
       },
       "attributes": [
-        {
-          "name": "avatar",
-          "description": ""
-        },
         {
           "name": "icon",
           "description": ""
@@ -976,6 +976,18 @@
         {
           "name": "label",
           "description": ""
+        },
+        {
+          "name": "variant",
+          "description": "",
+          "values": [
+            {
+              "name": "outline"
+            },
+            {
+              "name": "plain"
+            }
+          ]
         }
       ]
     },

package/dist/swirl-components/p-36bcfa97.entry.js

@@ -1 +0,0 @@
-import{r,h as a,H as e,g as t}from"./p-05c15d47.js";import{c as i}from"./p-b7898321.js";const o=class{constructor(a){r(this,a),this.as="div",this.elevated=void 0,this.highlighted=void 0,this.href=void 0,this.imageAspectRatio=void 0,this.interactive=void 0,this.linkTarget=void 0,this.swirlAriaLabel=void 0}render(){const r=Boolean(this.href)?"a":this.as,t=Boolean(this.el.querySelector('[slot="image"]')),o=i("card",{"card--elevated":this.elevated,"card--has-image":t,"card--highlighted":this.highlighted,"card--interactive":this.interactive||this.href});return a(e,null,a(r,{"aria-label":this.swirlAriaLabel,class:o,href:this.href,rel:Boolean(this.href)&&"_blank"===this.linkTarget?"noreferrer":void 0,target:this.linkTarget},a("div",{class:"card__image",style:{aspectRatio:this.imageAspectRatio}},a("slot",{name:"image"})),a("div",{class:"card__body"},a("div",{class:"card__content"},a("slot",{name:"content"})))))}get el(){return t(this)}};o.style=":host{display:block}:host *{box-sizing:border-box}.card{display:block;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:1.5rem;color:var(--s-text-default);background-color:var(--s-surface-default);font:inherit;text-decoration:none}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{background-color:var(--s-surface-hovered)}a.card:active,button.card:active,.card--interactive:active{background-color:var(--s-surface-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--elevated{border-color:transparent;box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),\n    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}:not(.card--has-image) .card__image{height:0;overflow:hidden}.content-section{padding:0 var(--s-space-16)}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__body{display:flex;flex-direction:column;gap:var(--s-space-16);padding:var(--s-space-12) var(--s-space-16) var(--s-space-16)}";export{o as swirl_card}

package/dist/swirl-components/p-79f6377a.entry.js

@@ -1 +0,0 @@
-import{r as i,h as r,H as e}from"./p-05c15d47.js";import{c as s}from"./p-b7898321.js";import{g as t}from"./p-438b3941.js";const a=class{constructor(r){i(this,r),this.desktopMediaQuery=t(),this.desktopMediaQueryHandler=i=>{this.forceIconProps(i.matches)},this.avatar=void 0,this.icon=void 0,this.intent="default",this.interactive=!1,this.label=void 0}componentDidLoad(){var i,r;this.forceAvatarProps(),this.forceIconProps(this.desktopMediaQuery.matches),null===(r=(i=this.desktopMediaQuery).addEventListener)||void 0===r||r.call(i,"change",this.desktopMediaQueryHandler)}disconnectedCallback(){var i,r;null===(r=(i=this.desktopMediaQuery).removeEventListener)||void 0===r||r.call(i,"change",this.desktopMediaQueryHandler)}forceAvatarProps(){if(!Boolean(this.avatarEl))return;const i=this.avatarEl.querySelector("swirl-avatar");null==i||i.removeAttribute("badge"),null==i||i.removeAttribute("interactive"),null==i||i.removeAttribute("show-label"),null==i||i.removeAttribute("variant"),null==i||i.setAttribute("size","xs")}forceIconProps(i){if(!Boolean(this.iconEl))return;const r=this.iconEl.children[0];null==r||r.setAttribute("size",i?"20":"24")}render(){const i=this.interactive?"button":"span",t=Boolean(this.avatar),a=!t&&Boolean(this.icon),o=s("chip",`chip--intent-${this.intent}`,{"chip--interactive":this.interactive});return r(e,null,r(i,{class:o,type:this.interactive?"button":void 0},t&&r("span",{class:"chip__avatar",innerHTML:this.avatar,ref:i=>this.avatarEl=i}),a&&r("span",{class:"chip__icon",innerHTML:this.icon,ref:i=>this.iconEl=i}),r("span",{class:"chip__label"},this.label)))}};a.style=":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.chip{display:inline-flex;max-width:100%;height:2.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}.chip--interactive{cursor:pointer}.chip--interactive:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive:hover ::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive:active ::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--intent-critical{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical .chip__icon{color:var(--s-icon-critical)}.chip--intent-success{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success .chip__icon{color:var(--s-icon-success)}.chip__avatar,.chip__icon{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}";export{a as swirl_chip}

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

@@ -1 +0,0 @@
-import{r as n,h as e,H as i,g as t}from"./p-05c15d47.js";import{c as s}from"./p-b7898321.js";const a=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=s("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)}};a.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-surface-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-surface-hovered);\n  }\n\n:host(:active) {\n    background-color: var(--s-surface-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{a as swirl_shell_navigation_item}