@getflip/swirl-components 0.248.0 → 0.249.1

package/dist/types/components.d.ts

@@ -2279,6 +2279,14 @@ export namespace Components {
          */
         "toast": (newToast: SwirlToastConfig) => Promise<SwirlToastMessage>;
     }
+    interface SwirlToggleButton {
+        "identifier": string;
+        "isPressed": boolean;
+        "label": string;
+    }
+    interface SwirlToggleGroup {
+        "selectedToggleId": string;
+    }
     interface SwirlToolbar {
         "label": string;
         "orientation"?: SwirlToolbarOrientation;
@@ -2524,6 +2532,10 @@ export interface SwirlToastCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSwirlToastElement;
 }
+export interface SwirlToggleGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSwirlToggleGroupElement;
+}
 export interface SwirlTreeViewCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSwirlTreeViewElement;
@@ -5225,6 +5237,29 @@ declare global {
         prototype: HTMLSwirlToastProviderElement;
         new (): HTMLSwirlToastProviderElement;
     };
+    interface HTMLSwirlToggleButtonElement extends Components.SwirlToggleButton, HTMLStencilElement {
+    }
+    var HTMLSwirlToggleButtonElement: {
+        prototype: HTMLSwirlToggleButtonElement;
+        new (): HTMLSwirlToggleButtonElement;
+    };
+    interface HTMLSwirlToggleGroupElementEventMap {
+        "selectedToggleChange": string;
+    }
+    interface HTMLSwirlToggleGroupElement extends Components.SwirlToggleGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSwirlToggleGroupElementEventMap>(type: K, listener: (this: HTMLSwirlToggleGroupElement, ev: SwirlToggleGroupCustomEvent<HTMLSwirlToggleGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSwirlToggleGroupElementEventMap>(type: K, listener: (this: HTMLSwirlToggleGroupElement, ev: SwirlToggleGroupCustomEvent<HTMLSwirlToggleGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSwirlToggleGroupElement: {
+        prototype: HTMLSwirlToggleGroupElement;
+        new (): HTMLSwirlToggleGroupElement;
+    };
     interface HTMLSwirlToolbarElement extends Components.SwirlToolbar, HTMLStencilElement {
     }
     var HTMLSwirlToolbarElement: {
@@ -5641,6 +5676,8 @@ declare global {
         "swirl-time-input": HTMLSwirlTimeInputElement;
         "swirl-toast": HTMLSwirlToastElement;
         "swirl-toast-provider": HTMLSwirlToastProviderElement;
+        "swirl-toggle-button": HTMLSwirlToggleButtonElement;
+        "swirl-toggle-group": HTMLSwirlToggleGroupElement;
         "swirl-toolbar": HTMLSwirlToolbarElement;
         "swirl-tooltip": HTMLSwirlTooltipElement;
         "swirl-tree-navigation-item": HTMLSwirlTreeNavigationItemElement;
@@ -7633,6 +7670,15 @@ declare namespace LocalJSX {
          */
         "globalDuration"?: number;
     }
+    interface SwirlToggleButton {
+        "identifier": string;
+        "isPressed"?: boolean;
+        "label": string;
+    }
+    interface SwirlToggleGroup {
+        "onSelectedToggleChange"?: (event: SwirlToggleGroupCustomEvent<string>) => void;
+        "selectedToggleId": string;
+    }
     interface SwirlToolbar {
         "label"?: string;
         "orientation"?: SwirlToolbarOrientation;
@@ -8026,6 +8072,8 @@ declare namespace LocalJSX {
         "swirl-time-input": SwirlTimeInput;
         "swirl-toast": SwirlToast;
         "swirl-toast-provider": SwirlToastProvider;
+        "swirl-toggle-button": SwirlToggleButton;
+        "swirl-toggle-group": SwirlToggleGroup;
         "swirl-toolbar": SwirlToolbar;
         "swirl-tooltip": SwirlTooltip;
         "swirl-tree-navigation-item": SwirlTreeNavigationItem;
@@ -8392,6 +8440,8 @@ declare module "@stencil/core" {
             "swirl-time-input": LocalJSX.SwirlTimeInput & JSXBase.HTMLAttributes<HTMLSwirlTimeInputElement>;
             "swirl-toast": LocalJSX.SwirlToast & JSXBase.HTMLAttributes<HTMLSwirlToastElement>;
             "swirl-toast-provider": LocalJSX.SwirlToastProvider & JSXBase.HTMLAttributes<HTMLSwirlToastProviderElement>;
+            "swirl-toggle-button": LocalJSX.SwirlToggleButton & JSXBase.HTMLAttributes<HTMLSwirlToggleButtonElement>;
+            "swirl-toggle-group": LocalJSX.SwirlToggleGroup & JSXBase.HTMLAttributes<HTMLSwirlToggleGroupElement>;
             "swirl-toolbar": LocalJSX.SwirlToolbar & JSXBase.HTMLAttributes<HTMLSwirlToolbarElement>;
             "swirl-tooltip": LocalJSX.SwirlTooltip & JSXBase.HTMLAttributes<HTMLSwirlTooltipElement>;
             "swirl-tree-navigation-item": LocalJSX.SwirlTreeNavigationItem & JSXBase.HTMLAttributes<HTMLSwirlTreeNavigationItemElement>;

package/package.json

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

package/vscode-data.json

@@ -17220,6 +17220,40 @@
         }
       ]
     },
+    {
+      "name": "swirl-toggle-button",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "identifier",
+          "description": ""
+        },
+        {
+          "name": "is-pressed",
+          "description": ""
+        },
+        {
+          "name": "label",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "swirl-toggle-group",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "selected-toggle-id",
+          "description": ""
+        }
+      ]
+    },
     {
       "name": "swirl-toolbar",
       "description": {

package/dist/swirl-components/p-128d8185.entry.js

@@ -1 +0,0 @@
-import{r as e,h as r,H as a}from"./p-30e99c25.js";const i=class{constructor(r){e(this,r)}render(){return r(a,{key:"c2e8c2e597d0b5e0bd1f545ae9adc7d9c53f2241"},r("slot",{key:"53d87fb49eea3da3728c0a19f7579116943b8a97"}))}};i.style=".sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}";export{i as swirl_visually_hidden}

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

@@ -1 +0,0 @@
-import{r as e,c as s,h as t,H as i,g as l}from"./p-30e99c25.js";import{c}from"./p-a5dce9e6.js";import{q as a}from"./p-0f3e0216.js";const r=class{constructor(t){e(this,t),this.searchChange=s(this,"searchChange",7),this.valueChange=s(this,"valueChange",7),this.select=e=>{e.stopPropagation(),this.value=e.detail,this.valueChange.emit(this.value),this.multiSelect||this.swirlPopover.close()},this.unselectOption=e=>{this.allowDeselect&&(this.value=this.value.filter((s=>s!==e)),this.valueChange.emit(this.value))},this.onSlotChange=()=>{this.updateOptions()},this.onOpen=e=>{this.placement=e.detail.position?.placement,this.open=!0,this.withSearch&&Boolean(this.searchInput)?this.searchInput.focus():this.optionList.querySelector('[tabIndex="0"]')?.focus()},this.onClose=()=>{Boolean(this.searchInput)&&(this.searchInput.value="",this.searchChange.emit("")),this.open=!1,this.input.focus()},this.onKeyDown=e=>{if("Space"===e.code||"Enter"===e.code){if(e.target===this.searchInput)return;e.preventDefault(),this.swirlPopover.open(this.el)}else"ArrowDown"===e.code&&e.target===this.searchInput&&this.optionList.querySelector('[tabIndex="0"]')?.focus()},this.onSearchInput=e=>{this.searchChange.emit(e.target.value)},this.allowDeselect=!0,this.disabled=void 0,this.emptyListLabel="No results found.",this.inline=void 0,this.invalid=void 0,this.label=void 0,this.multiSelect=void 0,this.required=void 0,this.searchInputLabel="Search options",this.searchLoading=void 0,this.searchPlaceholder=void 0,this.selectId=Math.round(1e6*Math.random()).toString(),this.standalone=void 0,this.swirlAriaDescribedby=void 0,this.value=void 0,this.withSearch=void 0,this.options=[],this.open=void 0,this.placement=void 0}componentWillLoad(){queueMicrotask((()=>{this.updateOptions(),this.observeSlotChanges()}))}disconnectedCallback(){this.observer?.disconnect()}onWindowFocusIn(e){e.target===this.el.querySelector("input")&&e.stopImmediatePropagation()}observeSlotChanges(){this.observer=new MutationObserver((()=>{this.updateOptions()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptions(){this.options=a(this.el,"swirl-option-list-item")}getValueLabel(){return Boolean(this.value)?this.value?.map((e=>this.options.find((s=>s.value===e))?.label)).join(", "):""}render(){const e=this.getValueLabel(),s=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,l=this.el.closest("swirl-form-control"),a=this.standalone?[-8,0]:l?.inline||"outside"===l?.labelPosition?[0,-12]:[0,-16],r=c("select",`select--placement-${this.placement}`,{"select--disabled":this.disabled,"select--inline":this.inline,"select--multi":this.multiSelect,"select--search-loading":this.searchLoading,"select--standalone":this.standalone});return t(i,{key:"2681e0858e2bb5d19efc8edf56cf9752c29fe2c2",onKeyDown:this.onKeyDown},t("div",{key:"07132e2e859fcbeb22c0ad92e8910065616e532c",class:r},t("swirl-popover-trigger",{key:"e3b87e636a965e054224aa42a190e7c706757251",swirlPopover:this.swirlPopover,setAriaAttributes:!1},t("swirl-stack",{key:"b4cd32b961189f45996dcf2121a53f015b5a0408",class:"select__value-container"},this.standalone&&t("span",{key:"c558b9cbf3507ab0826e92137a2e59c548492e51","aria-hidden":"true",class:"select__resize-helper"},e),t("input",{key:"7c7419c34e5a02f15816b676108491520697363a","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":s,class:"select__input",disabled:this.disabled,readOnly:!0,ref:e=>this.input=e,type:"text",value:e}))),t("span",{key:"2bf43748ad4bd6210f7aee1b44e3f737366dc217",class:"select__multi-select-values"},this.value?.map((e=>this.options.find((s=>s.value===e))))?.map((e=>t("swirl-tag",{"aria-hidden":"true",label:e?.label,onRemove:()=>this.unselectOption(e?.value),removable:!this.disabled&&this.allowDeselect})))),t("span",{key:"cd9c0714809adbd03cc2dd72d36a6f2db7db36cd",class:"select__indicator"},t(this.open?"swirl-icon-expand-less":"swirl-icon-expand-more",{size:this.standalone?20:24})),t("swirl-popover",{key:"90b7ea4afcdb00bcfc937624f009c11e0d105e7b",animation:"scale-in-y",class:"select__popover",id:`select-options-${this.selectId}`,label:this.label,offset:a,onPopoverClose:this.onClose,onPopoverOpen:this.onOpen,ref:e=>this.swirlPopover=e,useContainerWidth:!this.standalone&&"swirl-form-control"},this.withSearch&&t("div",{key:"e9b9555f6466b643c3489c69ee4e9b60cdaf6b07",class:"select__search"},t("swirl-icon-search",{key:"e71afb3c98408e2905846893ea3238e4c16452e2",class:"select__search-icon",size:20}),t("input",{key:"906cbd9ca5c730885bdcdec3a03f1ccd9d66ad18","aria-label":this.searchInputLabel,class:"select__search-input",onInput:this.onSearchInput,placeholder:this.searchPlaceholder,ref:e=>this.searchInput=e,type:"search"}),this.searchLoading&&t("swirl-spinner",{key:"2cd9609dedc7d32d9fa00ced7ae5523d373f5002",class:"select__search-spinner",size:"s"})),t("swirl-option-list",{key:"ec5c04eae315a6558332536ea6623aa6630035a6",allowDeselect:this.allowDeselect,onValueChange:this.select,multiSelect:this.multiSelect,ref:e=>this.optionList=e,value:this.value},!this.searchLoading&&t("div",{key:"a265e19d98e7dc26a1fe220b94babb5bc51f8c5d","aria-disabled":"true",class:"select__empty-list-label",role:"option"},t("swirl-text",{key:"813d280f8d78fbfeb5271aa4a711f81ac80f3c69",color:"subdued",weight:"medium"},this.emptyListLabel)),t("slot",{key:"0fbeab63f6682de44a793faebb4251088ac7abb6",onSlotchange:this.onSlotChange})))))}get el(){return l(this)}};r.style=".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}@media (min-width: 768px){.select.sc-swirl-select .sc-swirl-select::part(popover__scroll-container){padding-top:0}}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;width:100%;height:100%;pointer-events:none;opacity:0}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select--standalone.sc-swirl-select{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.select--standalone.sc-swirl-select .select__indicator.sc-swirl-select{position:relative;top:auto;right:auto;cursor:pointer;transform:none}.select--standalone.sc-swirl-select .select__input.sc-swirl-select{padding-right:var(--s-space-8);font-weight:var(--s-font-weight-medium);cursor:pointer}.select--standalone.sc-swirl-select .select__value-container.sc-swirl-select{width:-webkit-min-content;width:-moz-min-content;width:min-content}.select--search-loading.sc-swirl-select .select__search-input.sc-swirl-select{padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8))}.select__resize-helper.sc-swirl-select{display:block;overflow:hidden;width:auto;height:0;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));padding-right:var(--s-space-8);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__resize-helper.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}.select__search.sc-swirl-select{position:relative;display:flex;width:100%;padding:0.0625rem var(--s-space-8);border-bottom:0.0625rem solid var(--s-border-default);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.select__search.sc-swirl-select{position:sticky;z-index:1;top:0;padding-top:var(--s-space-8);padding-right:0.0625rem;padding-left:0.0625rem}}.select__search-icon.sc-swirl-select{position:absolute;top:50%;left:calc(var(--s-space-8) * 2);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}@media (min-width: 768px){.select__search-icon.sc-swirl-select{left:var(--s-space-12);margin-top:var(--s-space-4);padding:0.0625rem}}.select__search-input.sc-swirl-select{width:100%;height:2.5rem;padding-right:var(--s-space-12);padding-left:calc(var(--s-space-12) + 1.25rem + var(--s-space-8));align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.select__search-input.sc-swirl-select:focus:not(:focus-visible){outline:none}.select__search-input.sc-swirl-select:focus-visible{outline-color:var(--s-focus-default)}.select__search-input.sc-swirl-select::-moz-placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::placeholder{color:var(--s-text-subdued)}.select__search-input.sc-swirl-select::-webkit-search-decoration,.select__search-input.sc-swirl-select::-webkit-search-cancel-button,.select__search-input.sc-swirl-select::-webkit-search-results-button,.select__search-input.sc-swirl-select::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__search-input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__search-spinner.sc-swirl-select{position:absolute;top:50%;right:var(--s-space-12);display:inline-flex;transform:translateY(-50%)}@media (min-width: 768px){.select__search-spinner.sc-swirl-select{margin-top:var(--s-space-4)}}.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) 0}.select__empty-list-label.sc-swirl-select:not(:only-child){display:none}@media (min-width: 768px){.select__empty-list-label.sc-swirl-select{padding:var(--s-space-12) var(--s-space-12) var(--s-space-8)}}";export{r as swirl_select}