@getflip/swirl-components 0.36.0 → 0.38.0

package/dist/types/components/swirl-search/swirl-search.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+export type SwirlSearchVariant = "filled" | "outline";
 export declare class SwirlSearch {
   autoFocus?: boolean;
   clearButtonLabel?: string;
@@ -8,6 +9,7 @@ export declare class SwirlSearch {
   label?: string;
   placeholder?: string;
   value?: string;
+  variant?: SwirlSearchVariant;
   inputBlur: EventEmitter<FocusEvent>;
   inputFocus: EventEmitter<FocusEvent>;
   valueChange: EventEmitter<string>;

package/dist/types/components/swirl-separator/swirl-separator.d.ts

@@ -1,3 +1,5 @@
+export type SwirlSeparatorSpacing = "0" | "2" | "4" | "8" | "12" | "16" | "24" | "32";
 export declare class SwirlSeparator {
+  spacing?: SwirlSeparatorSpacing;
   render(): any;
 }

package/dist/types/components.d.ts

@@ -36,6 +36,8 @@ import { SwirlPopoverAnimation } from "./components/swirl-popover/swirl-popover"
 import { Placement } from "@floating-ui/dom";
 import { SwirlProgressIndicatorSize, SwirlProgressIndicatorVariant } from "./components/swirl-progress-indicator/swirl-progress-indicator";
 import { SwirlRadioState } from "./components/swirl-radio/swirl-radio";
+import { SwirlSearchVariant } from "./components/swirl-search/swirl-search";
+import { SwirlSeparatorSpacing } from "./components/swirl-separator/swirl-separator";
 import { SwirlSkeletonBoxBorderRadius } from "./components/swirl-skeleton-box/swirl-skeleton-box";
 import { SwirlSkeletonTextSize } from "./components/swirl-skeleton-text/swirl-skeleton-text";
 import { SwirlSpinnerSize } from "./components/swirl-spinner/swirl-spinner";
@@ -81,6 +83,8 @@ export { SwirlPopoverAnimation } from "./components/swirl-popover/swirl-popover"
 export { Placement } from "@floating-ui/dom";
 export { SwirlProgressIndicatorSize, SwirlProgressIndicatorVariant } from "./components/swirl-progress-indicator/swirl-progress-indicator";
 export { SwirlRadioState } from "./components/swirl-radio/swirl-radio";
+export { SwirlSearchVariant } from "./components/swirl-search/swirl-search";
+export { SwirlSeparatorSpacing } from "./components/swirl-separator/swirl-separator";
 export { SwirlSkeletonBoxBorderRadius } from "./components/swirl-skeleton-box/swirl-skeleton-box";
 export { SwirlSkeletonTextSize } from "./components/swirl-skeleton-text/swirl-skeleton-text";
 export { SwirlSpinnerSize } from "./components/swirl-spinner/swirl-spinner";
@@ -214,6 +218,10 @@ export namespace Components {
         "maxWidth"?: string;
         "overflow"?: SwirlBoxOverflow;
         "padding"?: SwirlBoxPadding;
+        "paddingBlockEnd"?: SwirlBoxPadding;
+        "paddingBlockStart"?: SwirlBoxPadding;
+        "paddingInlineEnd"?: SwirlBoxPadding;
+        "paddingInlineStart"?: SwirlBoxPadding;
     }
     interface SwirlButton {
         "disabled"?: boolean;
@@ -887,9 +895,9 @@ export namespace Components {
         "label": string;
     }
     interface SwirlPagination {
-        "accessibleNextButtonLabel"?: string;
-        "accessiblePrevButtonLabel"?: string;
+        "firstPageButtonLabel"?: string;
         "label": string;
+        "lastPageButtonLabel"?: string;
         "nextButtonLabel"?: string;
         "page": number;
         "pageLabel"?: string;
@@ -999,6 +1007,7 @@ export namespace Components {
         "label"?: string;
         "placeholder"?: string;
         "value"?: string;
+        "variant"?: SwirlSearchVariant;
     }
     interface SwirlSelect {
         "disabled"?: boolean;
@@ -1011,6 +1020,7 @@ export namespace Components {
         "value"?: string[];
     }
     interface SwirlSeparator {
+        "spacing"?: SwirlSeparatorSpacing;
     }
     interface SwirlShellLayout {
         /**
@@ -2794,6 +2804,10 @@ declare namespace LocalJSX {
         "maxWidth"?: string;
         "overflow"?: SwirlBoxOverflow;
         "padding"?: SwirlBoxPadding;
+        "paddingBlockEnd"?: SwirlBoxPadding;
+        "paddingBlockStart"?: SwirlBoxPadding;
+        "paddingInlineEnd"?: SwirlBoxPadding;
+        "paddingInlineStart"?: SwirlBoxPadding;
     }
     interface SwirlButton {
         "disabled"?: boolean;
@@ -3405,9 +3419,9 @@ declare namespace LocalJSX {
         "label": string;
     }
     interface SwirlPagination {
-        "accessibleNextButtonLabel"?: string;
-        "accessiblePrevButtonLabel"?: string;
+        "firstPageButtonLabel"?: string;
         "label": string;
+        "lastPageButtonLabel"?: string;
         "nextButtonLabel"?: string;
         "onSetPage"?: (event: SwirlPaginationCustomEvent<number>) => void;
         "page": number;
@@ -3509,6 +3523,7 @@ declare namespace LocalJSX {
         "onValueChange"?: (event: SwirlSearchCustomEvent<string>) => void;
         "placeholder"?: string;
         "value"?: string;
+        "variant"?: SwirlSearchVariant;
     }
     interface SwirlSelect {
         "disabled"?: boolean;
@@ -3522,6 +3537,7 @@ declare namespace LocalJSX {
         "value"?: string[];
     }
     interface SwirlSeparator {
+        "spacing"?: SwirlSeparatorSpacing;
     }
     interface SwirlShellLayout {
         "hideSidebar"?: boolean;

package/package.json

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

package/vscode-data.json

@@ -624,6 +624,138 @@
               "name": "8"
             }
           ]
+        },
+        {
+          "name": "padding-block-end",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "padding-block-start",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "padding-inline-end",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "padding-inline-start",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
         }
       ]
     },
@@ -3462,15 +3594,15 @@
       },
       "attributes": [
         {
-          "name": "accessible-next-button-label",
+          "name": "first-page-button-label",
           "description": ""
         },
         {
-          "name": "accessible-prev-button-label",
+          "name": "label",
           "description": ""
         },
         {
-          "name": "label",
+          "name": "last-page-button-label",
           "description": ""
         },
         {
@@ -3926,6 +4058,18 @@
         {
           "name": "value",
           "description": ""
+        },
+        {
+          "name": "variant",
+          "description": "",
+          "values": [
+            {
+              "name": "filled"
+            },
+            {
+              "name": "outline"
+            }
+          ]
         }
       ]
     },
@@ -3972,7 +4116,38 @@
         "kind": "markdown",
         "value": ""
       },
-      "attributes": []
+      "attributes": [
+        {
+          "name": "spacing",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "swirl-shell-layout",

package/dist/swirl-components/p-27566da1.entry.js

@@ -1 +0,0 @@
-import{r as s,h as a,H as r}from"./p-05c15d47.js";const o=class{constructor(a){s(this,a)}render(){return a(r,{class:"table-cell",role:"cell"},a("slot",null))}};o.style=":host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-background-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host(:first-child){border-left:var(--s-border-width-default) solid var(--s-border-default)}:host(:last-child){border-right:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}";export{o as swirl_table_cell}

package/dist/swirl-components/p-50430bab.entry.js

@@ -1 +0,0 @@
-import{r as s,h as t,H as r,g as e}from"./p-05c15d47.js";const i=class{constructor(t){s(this,t),this.sort=void 0,this.sortable=void 0,this.maxWidth=void 0,this.minWidth="fit-content",this.sticky=void 0,this.width=void 0}render(){const s={flex:Boolean(this.width)?`0 0 ${this.width}`:"",maxWidth:this.maxWidth||"",minWidth:this.minWidth||""};return t(r,{"aria-sort":this.sort,class:"table-column",role:"columnheader",style:s},t("span",null,t("slot",null)),this.sortable&&t("span",{class:"table-column__sort-indicator"},"ascending"===this.sort&&t("swirl-icon-arrow-upward",{"aria-hidden":"true",size:20}),"descending"===this.sort&&t("swirl-icon-arrow-downward",{"aria-hidden":"true",size:20}),!Boolean(this.sort)&&" "))}get el(){return e(this)}};i.style=":host{display:flex;overflow:hidden;padding-top:var(--s-space-12);padding-right:var(--s-space-16);padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-default);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);background-color:var(--s-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;letter-spacing:var(--s-letter-spacing-tighter);text-overflow:ellipsis;transition:box-shadow 0.15s;gap:var(--s-space-8)}:host(:first-child){border-left:var(--s-border-width-default) solid var(--s-border-default)}:host(:last-child){border-right:var(--s-border-width-default) solid var(--s-border-default)}:host(.table-column--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-column--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}.table-column__sort-indicator{display:inline-flex;width:1.25rem;height:1.25rem;flex-grow:0;flex-shrink:0}";export{i as swirl_table_column}

package/dist/swirl-components/p-774483bc.entry.js

@@ -1 +0,0 @@
-import{r as s,c as e,h as r,H as a}from"./p-05c15d47.js";import{c as i}from"./p-b7898321.js";import{g as c}from"./p-438b3941.js";const t=class{constructor(r){s(this,r),this.inputBlur=e(this,"inputBlur",7),this.inputFocus=e(this,"inputFocus",7),this.valueChange=e(this,"valueChange",7),this.desktopMediaQuery=c(),this.desktopMediaQueryHandler=s=>{this.forceIconProps(s.matches)},this.clear=()=>{this.input.value="",this.input.focus(),this.valueChange.emit("")},this.onBlur=s=>{this.inputBlur.emit(s)},this.onChange=s=>{this.valueChange.emit(s.target.value)},this.onFocus=s=>{this.inputFocus.emit(s)},this.autoFocus=void 0,this.clearButtonLabel="Clear search term",this.disabled=void 0,this.inputName=void 0,this.inputId=void 0,this.label=void 0,this.placeholder="Search …",this.value=void 0}componentDidLoad(){var s,e;this.forceIconProps(this.desktopMediaQuery.matches),null===(e=(s=this.desktopMediaQuery).addEventListener)||void 0===e||e.call(s,"change",this.desktopMediaQueryHandler)}disconnectedCallback(){var s,e;null===(e=(s=this.desktopMediaQuery).removeEventListener)||void 0===e||e.call(s,"change",this.desktopMediaQueryHandler)}forceIconProps(s){if(!Boolean(this.iconEl))return;const e=this.iconEl.children[0];null==e||e.setAttribute("size",s?"20":"24")}onKeyDown(s){"KeyK"!==s.code&&"Slash"!==s.code||!s.ctrlKey&&!s.metaKey||this.input.focus()}render(){const s=i("search",{"search--disabled":this.disabled});return r(a,null,r("span",{class:s,ref:s=>this.iconEl=s},r("swirl-icon-search",{class:"search__icon"}),r("input",{"aria-disabled":this.disabled?"true":void 0,"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,placeholder:this.placeholder,ref:s=>this.input=s,type:"search",value:this.value}),!this.disabled&&r("button",{"aria-label":this.clearButtonLabel,class:"search__clear-button",onClick:this.clear,type:"button"},r("swirl-icon-cancel",null))))}};t.style=".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--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{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding-left:calc(var(--s-space-8) + 1.5rem + var(--s-space-8))}}.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%)}";export{t as swirl_search}

package/dist/swirl-components/p-968773d7.entry.js

@@ -1 +0,0 @@
-import{r as i,c as a,h as t,H as s}from"./p-05c15d47.js";import{c as n}from"./p-b7898321.js";const e=class{constructor(t){i(this,t),this.setPage=a(this,"setPage",7),this.onPrevButtonClick=()=>{const i=Math.max(this.page-1,1);this.page!==i&&this.setPage.emit(i)},this.onNextButtonClick=()=>{const i=Math.min(this.page+1,this.pages);this.page!==i&&this.setPage.emit(i)},this.onSelect=i=>{const a=+i.target.value;this.page!==a&&this.setPage.emit(a)},this.accessibleNextButtonLabel="Next page",this.accessiblePrevButtonLabel="Previous page",this.nextButtonLabel="Next",this.pageLabel="out of",this.prevButtonLabel="Prev",this.label=void 0,this.page=void 0,this.pages=void 0,this.pageSelectLabel="Select a page",this.variant="default"}render(){const i="advanced"!==this.variant,a="simple"!==this.variant,e="advanced"===this.variant,o=`${this.page} ${this.pageLabel} ${this.pages}`,l=n("pagination",`pagination--variant-${this.variant}`);return t(s,null,t("nav",{"aria-label":this.label,class:l},t("ul",{class:"pagination__list",part:"pagination__list"},t("li",{class:"pagination__list-item"},t("swirl-button",{class:"pagination__prev-button",disabled:this.page<=1,swirlAriaLabel:this.accessiblePrevButtonLabel,hideLabel:i,icon:"<swirl-icon-chevron-left></swirl-icon-chevron-left>",intent:"primary",label:this.prevButtonLabel,onClick:this.onPrevButtonClick})),t("li",{class:"pagination__list-item"},a?t("span",null,e?t("span",{"aria-current":"page",class:"pagination__advanced-label"},t("span",{class:"pagination__page-select-container"},t("select",{"aria-label":this.pageSelectLabel,class:"pagination__page-select",onChange:this.onSelect},new Array(this.pages).fill(void 0).map(((i,a)=>a+1)).map((i=>t("option",{selected:this.page===i,value:String(i)},i)))),t("swirl-icon-expand-more",{"aria-hidden":"true",class:"pagination__page-select-icon",size:16})),t("span",{"aria-hidden":"true"},this.pageLabel," ",this.pages)):t("span",{"aria-current":"page"},o)):t("swirl-visually-hidden",null,t("span",{"aria-current":"page"},o))),t("li",{class:"pagination__list-item"},t("swirl-button",{class:"pagination__next-button",disabled:this.page>=this.pages,swirlAriaLabel:this.accessibleNextButtonLabel,hideLabel:i,icon:"<swirl-icon-chevron-right></swirl-icon-chevron-right>",iconPosition:"end",intent:"primary",label:this.nextButtonLabel,onClick:this.onNextButtonClick})))))}};e.style=":host{display:block;width:100%}:host *{box-sizing:border-box}.pagination{display:block;width:100%}.pagination--variant-simple .pagination__list{gap:0}.pagination__list{display:flex;margin:0;padding:0;justify-content:flex-start;align-items:center;line-height:var(--s-line-height-base);list-style:none;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.pagination__list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.pagination__advanced-label{display:flex;align-items:center;white-space:nowrap;gap:var(--s-space-8)}.pagination__page-select-container{position:relative}.pagination__page-select{display:inline-flex;padding-right:var(--s-space-16);border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.pagination__page-select:focus:not(:focus-visible){outline:none}.pagination__page-select:focus-visible{outline-color:var(--s-focus-default)}.pagination__page-select-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);pointer-events:none}";export{e as swirl_pagination}