@getflip/swirl-components 0.389.0 → 0.390.0

package/dist/collection/components/swirl-separator/swirl-separator.js

@@ -5,6 +5,7 @@ export class SwirlSeparator {
         this.borderColor = "default";
         this.color = "default";
         this.orientation = "horizontal";
+        this.semantics = "separator";
         this.spacing = "8";
     }
     componentWillLoad() {
@@ -27,7 +28,10 @@ export class SwirlSeparator {
                 paddingLeft: `var(--s-space-${this.spacing})`,
             };
         const className = classnames("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`);
-        return (h(Host, { key: '17b01a0eecb1f97564885965da64a90967730e14', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, h("span", { key: 'e9f7f71c5da01191f232455e8f5e6d9c39131a24', class: "separator__line" }), this.label && (h(Fragment, { key: '1f9f5c1d0b16766ed8677d7657946c335a5ab8ac' }, h("span", { key: 'ae1e1cc3149d5f0be42ea4be999cfda0fcfb6def', class: "separator__label" }, this.label), h("span", { key: '029ca069ba60923d67310941f464a92212e4fbd5', class: "separator__line" })))));
+        const attributes = this.semantics === "separator"
+            ? { "aria-orientation": this.orientation }
+            : {};
+        return (h(Host, { key: '23acb3a29638b92737838e75a54d7616e6c9150e', ...attributes, class: className, role: this.semantics, style: styles }, h("span", { key: '3ebf80f47fb36438403551f560db91ecf7d7e559', class: "separator__line" }), this.label && (h(Fragment, { key: '84ac7960ba714ab27559751c11bd7c4b56ac3176' }, h("span", { key: '6f8dc3ad3bde938789e28ad05c67da657262a4d1', class: "separator__label" }, this.label), h("span", { key: '63ddb77ea887a890bb1731d12a939783b592e21a', class: "separator__line" })))));
     }
     static get is() { return "swirl-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -140,6 +144,32 @@ export class SwirlSeparator {
                 "reflect": false,
                 "defaultValue": "\"horizontal\""
             },
+            "semantics": {
+                "type": "string",
+                "attribute": "semantics",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlSeparatorSemantics",
+                    "resolved": "\"none\" | \"separator\"",
+                    "references": {
+                        "SwirlSeparatorSemantics": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-separator/swirl-separator.tsx",
+                            "id": "src/components/swirl-separator/swirl-separator.tsx::SwirlSeparatorSemantics"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"separator\""
+            },
             "spacing": {
                 "type": "string",
                 "attribute": "spacing",

package/dist/collection/components/swirl-text-input/swirl-text-input.css

@@ -32,10 +32,6 @@
     width: 100%;
   }
 
-.text-input--disabled .text-input__character-counter {
-    color: var(--s-text-disabled);
-  }
-
 .text-input--font-size-sm {
   font-size: var(--s-font-size-sm);
   line-height: var(--s-line-height-sm);
@@ -146,7 +142,7 @@
   }
 
 .text-input__input:disabled {
-    color: var(--s-text-disabled);
+    color: var(--s-text-subdued);
     background-color: transparent;
   }
 

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -133,10 +133,11 @@ export class SwirlTextInput {
         const ariaInvalid = this.invalid === true || this.invalid === false
             ? String(this.invalid)
             : undefined;
-        const showStepper = this.type === "number" && !this.disabled;
+        const showStepper = this.type === "number" && !this.disabled && !this.readonly;
         const showPasswordToggle = this.type === "password" && !this.disabled;
         const showClearButton = this.clearable &&
             !this.disabled &&
+            !this.readonly &&
             Boolean(this.value) &&
             !showPasswordToggle &&
             !showStepper &&
@@ -145,13 +146,12 @@ export class SwirlTextInput {
         const className = classnames("text-input", `text-input--font-size-${this.fontSize}`, `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 || Boolean(this.placeholder),
             "text-input--has-suffix": Boolean(this.suffixLabel),
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (h(Host, { key: '118c43993df15e8a56132135bd6e5bd7b20c7fa5' }, h("div", { key: 'b32019d666499025e823f65c84107090b3e0bdde', class: className }, this.prefixLabel && (h("span", { key: 'e92f359d218821987e795d91ba09de0a5ac83787', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '311c606dc2c9b78965d35543c79c828bbf04939d', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2e2987f816f1a26b074ca67fc67d2b88031af88e', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: '82218c372d0374651f5cb3a07a679c5f045dabfc', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: '9c42c315b34e9a614a145d2e8a00da2b28fcc21e', size: this.iconSize }))), showPasswordToggle && (h("button", { key: 'd78dcd286ba441a8d5df0a9d9e8b02c466dab617', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'e29c6cb14c6bb8ff7ebf67800b2b267ca0208df9', class: "text-input__stepper" }, h("button", { key: '6218def82164fd3b57015d3fb8c40391cefcf84d', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '9b338df89a94563b9f9fde0ba16cb1fae537c203', size: this.iconSize })), h("button", { key: '6d31cb2c37f9a2887c57f2350afe184a76dd09f8', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: 'f2b7974999012a8ad29d84dd5df8a908605f57b4', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: '4dae89e8b35db216b513bbca04dff56c48b64696', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: 'c48b6c6017b6b2a8524a2f3f5e9d2d8869026b3f' }, this.characterCounterLabel), this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (h(Host, { key: '47932ba64512368fef5948a2560afdf722ae106c' }, h("div", { key: '089210f7581a26934fa1851899e1b279c96a4f55', class: className }, this.prefixLabel && (h("span", { key: '7d77cb2af315fe8909fa92f7ea328e4970c853fb', class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { key: '1c73d0168a7ca0e7380b665c0e398b3dfb8be35b', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, name: this.inputName, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value, readonly: this.readonly }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { key: '2ae0f456126a27f0256b5dfd851da830ea379018', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { key: 'ea47c05178f0ce61188ca8ed15f3bbe6f132b1dc', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, h("swirl-icon-cancel", { key: 'd419f462f82b28bc6c8602f3d4cf65d2649d0234', size: this.iconSize }))), showPasswordToggle && (h("button", { key: '565f3c92ef3fd90d1d43c673b94feec9bcf213cf', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("swirl-icon-visibility-off", { size: this.iconSize })) : (h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (h("span", { key: 'ec02752a5258a06827fc156fd4b4cd5a0e712751', class: "text-input__stepper" }, h("button", { key: 'c698d2fda7bf64b338920410ef0c894955cf6372', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-less", { key: '0f662dd62d1a315d288622a31e4f0dfb0ee530e0', size: this.iconSize })), h("button", { key: '49fc4ece3d4b67e3b6fa38ecdb681edf5e2e0791', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("swirl-icon-expand-more", { key: '49de410032a3f513ba78e7f6a986645441db80eb', size: this.iconSize })))), this.showCharacterCounter && (h("span", { key: 'cc12de838a87f683af5ab14009cedcd1f98b39bb', class: "text-input__character-counter", "aria-live": "polite" }, h("swirl-visually-hidden", { key: '8df695b8970b8f35d7b119bff1cfe573c427f1e6' }, this.characterCounterLabel), this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get is() { return "swirl-text-input"; }
     static get encapsulation() { return "scoped"; }
@@ -818,6 +818,25 @@ export class SwirlTextInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

package/dist/collection/components/swirl-time-input/swirl-time-input.js

@@ -136,7 +136,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: 'ae938e34b6749f2d8769188b03ba397f48053c7c' }, h("div", { key: '820bb9a8af14ec2e0566610cdc7acf685ebaab49', class: className }, h("input", { key: '01f30edbb831a35124af67a6a9632b8177f30d17', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("span", { key: '8e239ac224665ffcd26ec4f2ef3786394ae21bbb', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'a23c7d2781e37cd572778bab9bca884d7800fbf6', size: this.iconSize })))));
+        return (h(Host, { key: 'e23b038bf99ddfd9893ff2b2cc2981ee7de0fbda' }, h("div", { key: '26b6cbb9a67cfb986bae34b2ff604862992f7076', class: className }, h("input", { key: 'd5123ad3101a1c0571e491d91c5916fba51aabe9', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'd53e9ea53813798aa0cdd2ce7f6f685053859862', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '61e91a6ae302b0b64d4283525f02b97bad37e9ad', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }
@@ -343,6 +343,25 @@ export class SwirlTimeInput {
                 "getter": false,
                 "setter": false,
                 "reflect": true
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }