@getflip/swirl-components 0.54.1 → 0.55.0

package/dist/types/components/swirl-icon/swirl-icon.stories.d.ts

@@ -1,13 +1,17 @@
 /// <reference types="mdx" />
 import Docs from "./swirl-icon.mdx";
 declare const _default: {
+  argTypes: {
+    glyph: {
+      control: string;
+      options: string[];
+    };
+  };
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;
-      source: {
-        code: string;
-      };
     };
   };
   title: string;

package/dist/types/components/swirl-inline-error/swirl-inline-error.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-inline-error.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-inline-notification/swirl-inline-notification.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-inline-notification.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-lightbox/swirl-lightbox.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-lightbox.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-link/swirl-link.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-link.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-list/swirl-list.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-list.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-modal/swirl-modal.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-modal.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-option-list/swirl-option-list.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-option-list.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-option-list-item/swirl-option-list-item.stories.d.ts

@@ -10,6 +10,7 @@ declare const _default: {
     };
   };
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-option-list-section/swirl-option-list-section.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-option-list-section.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-pagination/swirl-pagination.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-pagination.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-pdf-reader/swirl-pdf-reader.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-pdf-reader.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-popover/swirl-popover.stories.d.ts

@@ -24,6 +24,7 @@ declare const _default: {
     };
   };
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-progress-indicator/swirl-progress-indicator.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-progress-indicator.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-radio/swirl-radio.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-radio.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-radio-group/swirl-radio-group.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-radio-group.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-resource-list/swirl-resource-list.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-resource-list.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-resource-list-file-item/swirl-resource-list-file-item.stories.d.ts

@@ -12,6 +12,7 @@ declare const _default: {
     };
   };
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-resource-list-item/swirl-resource-list-item.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-resource-list-item.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

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

@@ -2,6 +2,7 @@
 import Docs from "./swirl-search.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-select/swirl-select.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-select.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

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

@@ -2,6 +2,7 @@
 import Docs from "./swirl-separator.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-shell-layout/swirl-shell-layout.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-shell-layout.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   decorators: ((story: any) => HTMLDivElement)[];
   parameters: {
     docs: {

package/dist/types/components/swirl-shell-navigation-item/swirl-shell-navigation-item.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-shell-navigation-item.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-skeleton-box/swirl-skeleton-box.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-skeleton-box.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-skeleton-text/swirl-skeleton-text.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-skeleton-text.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-spinner/swirl-spinner.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-spinner.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-stack/swirl-stack.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-stack.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-switch/swirl-switch.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-switch.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-tab/swirl-tab.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-tab.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-tab-bar/swirl-tab-bar.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-tab-bar.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-table/swirl-table.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-table.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-table-cell/swirl-table-cell.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-table-cell.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-table-column/swirl-table-column.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-table-column.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-table-row/swirl-table-row.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-table-row.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-table-row-group/swirl-table-row-group.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-table-row-group.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-tabs/swirl-tabs.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-tabs.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-tag/swirl-tag.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-tag.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-text/swirl-text.stories.d.ts

@@ -7,6 +7,7 @@ declare const _default: {
     };
   };
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-text-input/swirl-text-input.d.ts

@@ -22,6 +22,7 @@ export declare class SwirlTextInput implements SwirlFormInput {
   max?: number;
   min?: number;
   mode?: SwirlTextInputMode;
+  placeholder?: string;
   prefixLabel?: string;
   required?: boolean;
   rows?: number;

package/dist/types/components/swirl-text-input/swirl-text-input.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-text-input.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-theme-provider/swirl-theme-provider.stories.d.ts

@@ -2,13 +2,16 @@
 import Docs from "./swirl-theme-provider.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
-      inlineStories: boolean;
       page: typeof Docs;
       source: {
         code: string;
       };
+      story: {
+        inline: boolean;
+      };
     };
   };
   title: string;

package/dist/types/components/swirl-thumbnail/swirl-thumbnail.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-thumbnail.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-toast/swirl-toast.stories.d.ts

@@ -15,6 +15,7 @@ declare const _default: {
     };
   };
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-toast-provider/swirl-toast-provider.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-toast-provider.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-tooltip/swirl-tooltip.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-tooltip.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   decorators: ((story: any) => HTMLDivElement)[];
   parameters: {
     docs: {

package/dist/types/components/swirl-tree-navigation-item/swirl-tree-navigation-item.stories.d.ts

@@ -12,6 +12,7 @@ declare const _default: {
     };
   };
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-video-thumbnail/swirl-video-thumbnail.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-video-thumbnail.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components/swirl-visually-hidden/swirl-visually-hidden.stories.d.ts

@@ -2,6 +2,7 @@
 import Docs from "./swirl-visually-hidden.mdx";
 declare const _default: {
   component: string;
+  tags: string[];
   parameters: {
     docs: {
       page: typeof Docs;

package/dist/types/components.d.ts

@@ -1210,6 +1210,7 @@ export namespace Components {
         "min"?: number;
         "mode"?: SwirlTextInputMode1;
         "passwordToggleLabel"?: string;
+        "placeholder"?: string;
         "prefixLabel"?: string;
         "required"?: boolean;
         "rows"?: number;
@@ -3888,6 +3889,7 @@ declare namespace LocalJSX {
         "onInputFocus"?: (event: SwirlTextInputCustomEvent<FocusEvent>) => void;
         "onValueChange"?: (event: SwirlTextInputCustomEvent<string>) => void;
         "passwordToggleLabel"?: string;
+        "placeholder"?: string;
         "prefixLabel"?: string;
         "required"?: boolean;
         "rows"?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components",
-  "version": "0.54.1",
+  "version": "0.55.0",
   "description": "Swirl Design System Web Component Library",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -35,8 +35,8 @@
     "stencil:test": "stencil test --spec",
     "stencil:test:watch": "stencil test --spec --watchAll",
     "stencil:test:coverage": "stencil test --spec --coverage --no-cache",
-    "storybook:start": "DESIGN_TOKEN_GLOB=\"../../node_modules/@getflip/swirl-tokens/dist/css/styles.light.custom-properties.css\" start-storybook -p 6006 --no-manager-cache",
-    "storybook:build": "DESIGN_TOKEN_GLOB=\"../../node_modules/@getflip/swirl-tokens/dist/css/styles.light.custom-properties.css\" build-storybook"
+    "storybook:start": "DESIGN_TOKEN_GLOB=\"../../node_modules/@getflip/swirl-tokens/dist/css/styles.light.custom-properties.css\" storybook dev -p 6006",
+    "storybook:build": "DESIGN_TOKEN_GLOB=\"../../node_modules/@getflip/swirl-tokens/dist/css/styles.light.custom-properties.css\" storybook build"
   },
   "dependencies": {
     "@floating-ui/dom": "1.0.1",
@@ -66,24 +66,25 @@
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/postcss": "^2.1.0",
     "@stencil/react-output-target": "^0.3.1",
-    "@storybook/addon-a11y": "^6.5.15",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-interactions": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addons": "^6.5.15",
-    "@storybook/builder-vite": "^0.3.0",
-    "@storybook/html": "^6.5.15",
-    "@storybook/manager-webpack4": "^6.5.15",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/theming": "^6.5.15",
+    "@storybook/addon-a11y": "^7.0.8",
+    "@storybook/addon-actions": "^7.0.8",
+    "@storybook/addon-docs": "^7.0.8",
+    "@storybook/addon-essentials": "^7.0.8",
+    "@storybook/addon-interactions": "^7.0.8",
+    "@storybook/addon-links": "^7.0.8",
+    "@storybook/addon-mdx-gfm": "^7.0.8",
+    "@storybook/addons": "^7.0.8",
+    "@storybook/html": "^7.0.8",
+    "@storybook/html-vite": "^7.0.8",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/theming": "^7.0.8",
     "@types/autoprefixer": "^10.2.0",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/debounce-promise": "^3.1.5",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^27.0.3",
     "@types/mdx": "^2.0.2",
+    "@types/node": "^20.0.0",
     "@types/papaparse": "^5.3.5",
     "@types/sortablejs": "^1.15.0",
     "@typescript-eslint/parser": "^5.33.0",
@@ -92,13 +93,18 @@
     "chromatic": "^6.7.4",
     "concurrently": "^7.3.0",
     "eslint-plugin-react": "^7.30.1",
+    "handlebars-helpers": "^0.10.0",
     "jest": "^27.4.5",
     "jest-cli": "^27.4.5",
     "plop": "^3.1.1",
     "postcss-custom-media": "^8.0.2",
     "postcss-nested": "^5.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "remark-gfm": "^3.0.1",
+    "storybook": "^7.0.8",
     "storybook-addon-themes": "^6.1.0",
-    "storybook-design-token": "^2.8.2",
+    "storybook-design-token": "^3.0.0-beta.3",
     "svgo": "^2.8.0",
     "typescript": "^4.7.4",
     "vite": "^3.0.5"

package/vscode-data.json

@@ -5087,6 +5087,10 @@
           "name": "password-toggle-label",
           "description": ""
         },
+        {
+          "name": "placeholder",
+          "description": ""
+        },
         {
           "name": "prefix-label",
           "description": ""

package/dist/swirl-components/p-04e84391.entry.js

@@ -1 +0,0 @@
-import{r as o,h as r,H as t,g as s}from"./p-05c15d47.js";import{c as l}from"./p-b7898321.js";const i=class{constructor(r){o(this,r),this.descriptionId=`form-control-description-${Math.round(1e5*Math.random())}`,this.listenToInputValueChanges=()=>{this.inputEl.addEventListener("valueChange",this.checkInputValue)},this.checkInputValue=()=>{var o;this.inputValue=null===(o=this.inputEl)||void 0===o?void 0:o.value},this.onFocusIn=()=>{this.hasFocus=!0},this.onFocusOut=()=>{this.hasFocus&&(this.hasFocus=!1)},this.description=void 0,this.disabled=void 0,this.errorMessage=void 0,this.inline=void 0,this.invalid=void 0,this.label=void 0,this.labelPosition="inside",this.hasFocus=void 0,this.inputValue=void 0}componentWillLoad(){this.inputEl=this.el.children[0],this.associateDescriptionWithInputElement(),this.setInputElementDisabledState(),this.setInputElementInlineState(),this.setInputElementInvalidState(),this.setInputElementLabel(),this.checkInputValue(),this.listenToInputValueChanges()}associateDescriptionWithInputElement(){Boolean(this.description)&&Boolean(this.inputEl)&&this.inputEl.setAttribute("swirl-aria-describedby",this.descriptionId)}setInputElementDisabledState(){Boolean(this.inputEl)&&(this.disabled?this.inputEl.setAttribute("disabled","true"):this.inputEl.removeAttribute("disabled"))}setInputElementInlineState(){Boolean(this.inputEl)&&(this.inline||"outside"===this.labelPosition?this.inputEl.setAttribute("inline","true"):this.inputEl.removeAttribute("inline"))}setInputElementInvalidState(){Boolean(this.inputEl)&&(this.invalid?this.inputEl.setAttribute("invalid","true"):this.inputEl.removeAttribute("invalid"))}setInputElementLabel(){Boolean(this.inputEl)&&this.inputEl.setAttribute("label",this.label)}onWindowClick(o){this.hasFocus&&(this.el.contains(o.target)||(this.hasFocus=!1))}render(){const o=Boolean(this.errorMessage),s=Boolean(this.description)&&!o,i=Array.isArray(this.inputValue)?this.inputValue.length>0:Boolean(this.inputValue),e=l("form-control",`form-control--label-position-${this.labelPosition}`,{"form-control--disabled":this.disabled,"form-control--has-focus":this.hasFocus,"form-control--has-value":i,"form-control--inline":this.inline,"form-control--invalid":this.invalid,"form-control--is-select":"SWIRL-SELECT"===this.inputEl.tagName});return r(t,{onFocusin:this.onFocusIn,onFocusout:this.onFocusOut},r("div",{class:e,role:"group"},r("label",{class:"form-control__label"},r("span",{class:"form-control__label-text"},this.label),r("span",{class:"form-control__input"},r("slot",null))),s&&r("span",{class:"form-control__description",id:this.descriptionId},this.description),o&&r("span",{"aria-live":"polite",class:"form-control__error-message",id:this.descriptionId},r("swirl-inline-error",{message:this.errorMessage,size:"s"}))))}get el(){return s(this)}static get watchers(){return{description:["associateDescriptionWithInputElement"],disabled:["setInputElementDisabledState"],inline:["setInputElementInlineState"],invalid:["setInputElementInvalidState"],label:["setInputElementLabel"]}}};i.style=".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control--label-position-outside.sc-swirl-form-control{padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}";export{i as swirl_form_control}

package/dist/swirl-components/p-3ce8a38c.entry.js

@@ -1 +0,0 @@
-import{r as t,c as i,h as s,H as e}from"./p-05c15d47.js";import{c as n}from"./p-b7898321.js";import{g as r}from"./p-438b3941.js";const o=class{constructor(s){t(this,s),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.valueChange=i(this,"valueChange",7),this.desktopMediaQuery=r(),this.desktopMediaQueryHandler=t=>{this.updateIconSize(t.matches)},this.clear=()=>{this.inputEl.value="",this.value="",this.valueChange.emit(""),this.inputEl.focus()},this.onChange=t=>{const i=t.target;this.value=i.value,this.valueChange.emit(i.value)},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)},this.onKeyPress=t=>{"number"===this.type&&["+","-","e"].includes(t.key)&&t.preventDefault()},this.decreaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min+1:1),this.value=String(Math.max(this.min||-1/0,i-t)),this.valueChange.emit(this.value)},this.increaseValue=()=>{if("number"!==this.type)return;const t=this.step||1;let i=this.inputEl.valueAsNumber;isNaN(this.inputEl.valueAsNumber)&&(i=void 0!==this.min?this.min-1:-1),this.value=String(Math.min(this.max||1/0,i+t)),this.valueChange.emit(this.value)},this.togglePassword=()=>{"password"===this.type&&(this.showPassword=!this.showPassword)},this.autoComplete="on",this.autoFocus=void 0,this.autoGrow=void 0,this.autoSelect=void 0,this.clearable=void 0,this.clearButtonLabel="Clear input",this.disabled=void 0,this.disableDynamicWidth=void 0,this.swirlAriaAutocomplete=void 0,this.swirlAriaControls=void 0,this.swirlAriaDescribedby=void 0,this.swirlAriaExpanded=void 0,this.swirlRole=void 0,this.inline=void 0,this.invalid=void 0,this.maxLength=void 0,this.max=void 0,this.min=void 0,this.mode=void 0,this.prefixLabel=void 0,this.required=void 0,this.rows=1,this.showCharacterCounter=void 0,this.spellCheck=void 0,this.suffixLabel=void 0,this.step=void 0,this.passwordToggleLabel="Toggle password display",this.type="text",this.value=void 0,this.iconSize=24,this.showPassword=!1}componentDidLoad(){var t,i;this.updateIconSize(this.desktopMediaQuery.matches),null===(i=(t=this.desktopMediaQuery).addEventListener)||void 0===i||i.call(t,"change",this.desktopMediaQueryHandler)}componentDidRender(){this.adjustInputSize()}disconnectedCallback(){var t,i;null===(i=(t=this.desktopMediaQuery).removeEventListener)||void 0===i||i.call(t,"change",this.desktopMediaQueryHandler)}updateIconSize(t){this.iconSize=t?20:24}adjustInputSize(){(this.rows>1||this.autoGrow)&&(this.inputEl.style.width="",this.inputEl.style.height="",this.inputEl.style.height=this.inputEl.scrollHeight/16+"rem"),1!==this.rows||this.autoGrow||(this.inputEl.style.height="",this.inputEl.style.width="","password"===this.type||this.disableDynamicWidth||(this.inputEl.style.width=this.inputEl.scrollWidth/16+"rem"))}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){var t;const i=1!==this.rows||this.autoGrow?"textarea":"input",r=!0===this.invalid||!1===this.invalid?String(this.invalid):void 0,o="number"===this.type&&!this.disabled,h="password"===this.type&&!this.disabled,p=this.clearable&&!this.disabled&&Boolean(this.value)&&!h&&!o&&!this.showCharacterCounter,u="password"===this.type&&this.showPassword?"text":this.type,a=n("text-input",`text-input--type-${this.type}`,{"text-input--auto-grow":this.autoGrow,"text-input--clearable":this.clearable,"text-input--disabled":this.disabled,"text-input--disable-dynamic-width":this.disableDynamicWidth,"text-input--inline":this.inline,"text-input--show-password":"password"===this.type&&this.showPassword});return s(e,null,s("div",{class:a},this.prefixLabel&&s("span",{class:"text-input__prefix"},this.prefixLabel),s(i,{"aria-autocomplete":this.swirlAriaAutocomplete,"aria-controls":this.swirlAriaControls,"aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-expanded":this.swirlAriaExpanded,"aria-invalid":r,autoComplete:this.autoComplete,autoFocus:this.autoFocus,class:"text-input__input",disabled:this.disabled,inputMode:this.mode,maxLength:this.maxLength,max:"number"===this.type?this.max:void 0,min:"number"===this.type?this.min:void 0,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,onKeyPress:this.onKeyPress,ref:t=>this.inputEl=t,required:this.required,role:this.swirlRole,rows:this.rows>1?this.rows:this.autoGrow?1:void 0,spellcheck:this.spellCheck,step:"number"===this.type?this.step:void 0,type:u,value:1===this.rows?this.value:void 0},this.rows>1&&this.value),this.suffixLabel&&s("span",{class:"text-input__suffix"},this.suffixLabel),p&&s("button",{"aria-label":this.clearButtonLabel,class:"text-input__clear-button",onClick:this.clear,part:"text-input__clear-button",type:"button"},s("swirl-icon-cancel",{size:this.iconSize})),h&&s("button",{"aria-label":this.passwordToggleLabel,class:"text-input__password-toggle",onClick:this.togglePassword,type:"button"},s(this.showPassword?"swirl-icon-visibility-off":"swirl-icon-visibility",{size:this.iconSize})),o&&s("span",{class:"text-input__stepper"},s("button",{"aria-hidden":"true",class:"text-input__step-button",onClick:this.increaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-less",{size:this.iconSize})),s("button",{"aria-hidden":"true",class:"text-input__step-button",onClick:this.decreaseValue,tabIndex:-1,type:"button"},s("swirl-icon-expand-more",{size:this.iconSize}))),this.showCharacterCounter&&s("span",{class:"text-input__character-counter"},(null===(t=this.value)||void 0===t?void 0:t.length)||0," ",Boolean(this.maxLength)?`/ ${this.maxLength}`:"")))}};o.style='.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-h *.sc-swirl-text-input{box-sizing:border-box}.text-input.sc-swirl-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm)}.text-input--auto-grow.sc-swirl-text-input .text-input__input.sc-swirl-text-input{max-height:none}.text-input--clearable.sc-swirl-text-input,.text-input--type-number.sc-swirl-text-input,.text-input--type-password.sc-swirl-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-swirl-text-input .text-input__input.sc-swirl-text-input{width:100%}.text-input--disabled.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{color:var(--s-text-disabled)}.text-input--inline.sc-swirl-text-input .text-input__stepper.sc-swirl-text-input{display:none}.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input--inline.sc-swirl-text-input .text-input__clear-button.sc-swirl-text-input,.text-input--inline.sc-swirl-text-input .text-input__password-toggle.sc-swirl-text-input{top:0}}.text-input--inline.sc-swirl-text-input .text-input__character-counter.sc-swirl-text-input{top:0}.text-input__input.sc-swirl-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-swirl-text-input:focus{outline:none}.text-input__input.sc-swirl-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-swirl-text-input::-webkit-outer-spin-button,.text-input__input.sc-swirl-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type="number"].sc-swirl-text-input{-moz-appearance:textfield}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__input.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}input.text-input__input.sc-swirl-text-input:not([type="password"]){width:0.25rem;min-width:0.25rem}.text-input--disable-dynamic-width.sc-swirl-text-input input.text-input__input.sc-swirl-text-input:not([type="password"]){width:100%;min-width:0}.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-swirl-text-input:focus:not(:focus-visible),.text-input__password-toggle.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__clear-button.sc-swirl-text-input:focus-visible,.text-input__password-toggle.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__clear-button.sc-swirl-text-input,.text-input__password-toggle.sc-swirl-text-input{top:-0.625rem}}.text-input__stepper.sc-swirl-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__stepper.sc-swirl-text-input{top:-1.25rem}}.text-input__step-button.sc-swirl-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-swirl-text-input:focus:not(:focus-visible){outline:none}.text-input__step-button.sc-swirl-text-input:focus-visible{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-swirl-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.text-input__character-counter.sc-swirl-text-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.text-input__prefix.sc-swirl-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-swirl-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}';export{o as swirl_text_input}