@spectrum-web-components/search 0.33.3-overlay.66 → 0.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/README.md +35 -1
  2. package/custom-elements.json +3 -3
  3. package/package.json +7 -7
  4. package/src/Search.dev.js +1 -0
  5. package/src/Search.dev.js.map +2 -2
  6. package/src/Search.js +4 -3
  7. package/src/Search.js.map +2 -2
  8. package/src/search.css.dev.js +38 -6
  9. package/src/search.css.dev.js.map +2 -2
  10. package/src/search.css.js +38 -6
  11. package/src/search.css.js.map +2 -2
  12. package/src/spectrum-config.js +9 -0
  13. package/src/spectrum-search.css.dev.js +5 -5
  14. package/src/spectrum-search.css.dev.js.map +1 -1
  15. package/src/spectrum-search.css.js +5 -5
  16. package/src/spectrum-search.css.js.map +1 -1
  17. package/stories/search-sizes.stories.js +30 -0
  18. package/stories/search-sizes.stories.js.map +7 -0
  19. package/test/search-sizes.test-vrt.js +5 -0
  20. package/test/search-sizes.test-vrt.js.map +7 -0
package/README.md CHANGED
@@ -24,13 +24,47 @@ When looking to leverage the `Search` base class as a type and/or for extension
24
24
  import { Search } from '@spectrum-web-components/search';
25
25
  ```
26
26
 
27
- ## Example
27
+ ## Sizes
28
+
29
+ <sp-tabs selected="m" auto label="Size Attribute Options">
30
+ <sp-tab value="s">Small</sp-tab>
31
+ <sp-tab-panel value="s">
32
+
33
+ ```html
34
+ <sp-search size="s"></sp-search>
35
+ <sp-search size="s" disabled></sp-search>
36
+ ```
37
+
38
+ </sp-tab-panel>
39
+ <sp-tab value="m">Medium</sp-tab>
40
+ <sp-tab-panel value="m">
28
41
 
29
42
  ```html
30
43
  <sp-search></sp-search>
31
44
  <sp-search disabled></sp-search>
32
45
  ```
33
46
 
47
+ </sp-tab-panel>
48
+ <sp-tab value="l">Large</sp-tab>
49
+ <sp-tab-panel value="l">
50
+
51
+ ```html
52
+ <sp-search size="l"></sp-search>
53
+ <sp-search size="l" disabled></sp-search>
54
+ ```
55
+
56
+ </sp-tab-panel>
57
+ <sp-tab value="xl">Extra Large</sp-tab>
58
+ <sp-tab-panel value="xl">
59
+
60
+ ```html
61
+ <sp-search size="xl"></sp-search>
62
+ <sp-search size="xl" disabled></sp-search>
63
+ ```
64
+
65
+ </sp-tab-panel>
66
+ </sp-tabs>
67
+
34
68
  ## Variants
35
69
 
36
70
  ### Quiet
package/custom-elements.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "modules": [
5
5
  {
6
6
  "kind": "javascript-module",
7
- "path": "sp-search.ts",
7
+ "path": "sp-search.js",
8
8
  "declarations": [],
9
9
  "exports": [
10
10
  {
@@ -19,7 +19,7 @@
19
19
  },
20
20
  {
21
21
  "kind": "javascript-module",
22
- "path": "src/Search.ts",
22
+ "path": "src/Search.js",
23
23
  "declarations": [
24
24
  {
25
25
  "kind": "class",
@@ -196,7 +196,7 @@
196
196
  "name": "Search",
197
197
  "declaration": {
198
198
  "name": "Search",
199
- "module": "src/Search.ts"
199
+ "module": "src/Search.js"
200
200
  }
201
201
  }
202
202
  ]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/search",
3
- "version": "0.33.3-overlay.66+30e96d5ea",
3
+ "version": "0.34.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -57,11 +57,11 @@
57
57
  "lit-html"
58
58
  ],
59
59
  "dependencies": {
60
- "@spectrum-web-components/base": "^0.33.3-overlay.66+30e96d5ea",
61
- "@spectrum-web-components/button": "^0.33.3-overlay.66+30e96d5ea",
62
- "@spectrum-web-components/icon": "^0.33.3-overlay.66+30e96d5ea",
63
- "@spectrum-web-components/icons-workflow": "^0.33.3-overlay.66+30e96d5ea",
64
- "@spectrum-web-components/textfield": "^0.33.3-overlay.66+30e96d5ea"
60
+ "@spectrum-web-components/base": "^0.34.0",
61
+ "@spectrum-web-components/button": "^0.34.0",
62
+ "@spectrum-web-components/icon": "^0.34.0",
63
+ "@spectrum-web-components/icons-workflow": "^0.34.0",
64
+ "@spectrum-web-components/textfield": "^0.34.0"
65
65
  },
66
66
  "devDependencies": {
67
67
  "@spectrum-css/search": "^6.0.2"
@@ -72,5 +72,5 @@
72
72
  "./sp-*.js",
73
73
  "./**/*.dev.js"
74
74
  ],
75
- "gitHead": "30e96d5eaed31b7b2af916d78cabccb722889fe3"
75
+ "gitHead": "f9b3294d67cdd52b2c36897cdc1c20ceaeb019cf"
76
76
  }
package/src/Search.dev.js CHANGED
@@ -86,6 +86,7 @@ export class Search extends Textfield {
86
86
  label="Reset"
87
87
  tabindex="-1"
88
88
  type="reset"
89
+ size=${ifDefined(this.size)}
89
90
  @keydown=${stopPropagation}
90
91
  ></sp-clear-button>
91
92
  ` : html``}
package/src/Search.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Search.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport { Textfield } from '@spectrum-web-components/textfield';\nimport '@spectrum-web-components/button/sp-clear-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\n\nimport searchStyles from './search.css.js';\n\nconst stopPropagation = (event: Event): void => event.stopPropagation();\n\n/**\n * @element sp-search\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n *\n * @fires submit - The search form has been submitted.\n */\nexport class Search extends Textfield {\n public static override get styles(): CSSResultArray {\n return [...super.styles, searchStyles];\n }\n\n @property()\n public action = '';\n\n @property()\n public override label = 'Search';\n\n @property()\n public method?: 'GET' | 'POST' | 'dialog';\n\n @property()\n public override placeholder = 'Search';\n\n @query('#form')\n public form!: HTMLFormElement;\n\n private handleSubmit(event: Event): void {\n const applyDefault = this.dispatchEvent(\n new Event('submit', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n event.preventDefault();\n }\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n if (!this.value || code !== 'Escape') {\n return;\n }\n this.reset();\n }\n\n public async reset(): Promise<void> {\n this.value = '';\n await this.updateComplete;\n this.focusElement.dispatchEvent(\n new InputEvent('input', {\n bubbles: true,\n composed: true,\n })\n );\n // The native `change` event on an `input` element is not composed,\n // so this synthetic replication of a `change` event must not be\n // either as the `Textfield` baseclass should only need to handle\n // the native variant of this interaction.\n this.focusElement.dispatchEvent(\n new InputEvent('change', {\n bubbles: true,\n })\n );\n }\n\n protected override renderField(): TemplateResult {\n return html`\n <form\n action=${this.action}\n id=\"form\"\n method=${ifDefined(this.method)}\n @submit=${this.handleSubmit}\n @reset=${this.reset}\n @keydown=${this.handleKeydown}\n >\n <sp-icon-magnify\n class=\"icon magnifier icon-workflow icon-search\"\n ></sp-icon-magnify>\n ${super.renderField()}\n ${this.value\n ? html`\n <sp-clear-button\n id=\"button\"\n label=\"Reset\"\n tabindex=\"-1\"\n type=\"reset\"\n @keydown=${stopPropagation}\n ></sp-clear-button>\n `\n : html``}\n </form>\n `;\n }\n\n public override firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n this.inputElement.setAttribute('type', 'search');\n }\n\n public override willUpdate(): void {\n this.multiline = false;\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAGG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB;AAC1B,OAAO;AACP,OAAO;AAEP,OAAO,kBAAkB;AAEzB,MAAM,kBAAkB,CAAC,UAAuB,MAAM,gBAAgB;AAS/D,aAAM,eAAe,UAAU;AAAA,EAA/B;AAAA;AAMH,SAAO,SAAS;AAGhB,SAAgB,QAAQ;AAMxB,SAAgB,cAAc;AAAA;AAAA,EAd9B,WAA2B,SAAyB;AAChD,WAAO,CAAC,GAAG,MAAM,QAAQ,YAAY;AAAA,EACzC;AAAA,EAiBQ,aAAa,OAAoB;AACrC,UAAM,eAAe,KAAK;AAAA,MACtB,IAAI,MAAM,UAAU;AAAA,QAChB,YAAY;AAAA,QACZ,SAAS;AAAA,MACb,CAAC;AAAA,IACL;AACA,QAAI,CAAC,cAAc;AACf,YAAM,eAAe;AAAA,IACzB;AAAA,EACJ;AAAA,EAEQ,cAAc,OAA4B;AAC9C,UAAM,EAAE,KAAK,IAAI;AACjB,QAAI,CAAC,KAAK,SAAS,SAAS,UAAU;AAClC;AAAA,IACJ;AACA,SAAK,MAAM;AAAA,EACf;AAAA,EAEA,MAAa,QAAuB;AAChC,SAAK,QAAQ;AACb,UAAM,KAAK;AACX,SAAK,aAAa;AAAA,MACd,IAAI,WAAW,SAAS;AAAA,QACpB,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AAKA,SAAK,aAAa;AAAA,MACd,IAAI,WAAW,UAAU;AAAA,QACrB,SAAS;AAAA,MACb,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEmB,cAA8B;AAC7C,WAAO;AAAA;AAAA,yBAEU,KAAK;AAAA;AAAA,yBAEL,UAAU,KAAK,MAAM;AAAA,0BACpB,KAAK;AAAA,yBACN,KAAK;AAAA,2BACH,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKd,MAAM,YAAY;AAAA,kBAClB,KAAK,QACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAMmB;AAAA;AAAA,0BAGnB;AAAA;AAAA;AAAA,EAGlB;AAAA,EAEgB,aAAa,mBAAyC;AAClE,UAAM,aAAa,iBAAiB;AACpC,SAAK,aAAa,aAAa,QAAQ,QAAQ;AAAA,EACnD;AAAA,EAEgB,aAAmB;AAC/B,SAAK,YAAY;AAAA,EACrB;AACJ;AA3FW;AAAA,EADN,SAAS;AAAA,GALD,OAMF;AAGS;AAAA,EADf,SAAS;AAAA,GARD,OASO;AAGT;AAAA,EADN,SAAS;AAAA,GAXD,OAYF;AAGS;AAAA,EADf,SAAS;AAAA,GAdD,OAeO;AAGT;AAAA,EADN,MAAM,OAAO;AAAA,GAjBL,OAkBF;",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport { Textfield } from '@spectrum-web-components/textfield';\nimport '@spectrum-web-components/button/sp-clear-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\n\nimport searchStyles from './search.css.js';\n\nconst stopPropagation = (event: Event): void => event.stopPropagation();\n\n/**\n * @element sp-search\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n *\n * @fires submit - The search form has been submitted.\n */\nexport class Search extends Textfield {\n public static override get styles(): CSSResultArray {\n return [...super.styles, searchStyles];\n }\n\n @property()\n public action = '';\n\n @property()\n public override label = 'Search';\n\n @property()\n public method?: 'GET' | 'POST' | 'dialog';\n\n @property()\n public override placeholder = 'Search';\n\n @query('#form')\n public form!: HTMLFormElement;\n\n private handleSubmit(event: Event): void {\n const applyDefault = this.dispatchEvent(\n new Event('submit', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n event.preventDefault();\n }\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n if (!this.value || code !== 'Escape') {\n return;\n }\n this.reset();\n }\n\n public async reset(): Promise<void> {\n this.value = '';\n await this.updateComplete;\n this.focusElement.dispatchEvent(\n new InputEvent('input', {\n bubbles: true,\n composed: true,\n })\n );\n // The native `change` event on an `input` element is not composed,\n // so this synthetic replication of a `change` event must not be\n // either as the `Textfield` baseclass should only need to handle\n // the native variant of this interaction.\n this.focusElement.dispatchEvent(\n new InputEvent('change', {\n bubbles: true,\n })\n );\n }\n\n protected override renderField(): TemplateResult {\n return html`\n <form\n action=${this.action}\n id=\"form\"\n method=${ifDefined(this.method)}\n @submit=${this.handleSubmit}\n @reset=${this.reset}\n @keydown=${this.handleKeydown}\n >\n <sp-icon-magnify\n class=\"icon magnifier icon-workflow icon-search\"\n ></sp-icon-magnify>\n ${super.renderField()}\n ${this.value\n ? html`\n <sp-clear-button\n id=\"button\"\n label=\"Reset\"\n tabindex=\"-1\"\n type=\"reset\"\n size=${ifDefined(this.size)}\n @keydown=${stopPropagation}\n ></sp-clear-button>\n `\n : html``}\n </form>\n `;\n }\n\n public override firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n this.inputElement.setAttribute('type', 'search');\n }\n\n public override willUpdate(): void {\n this.multiline = false;\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,OAGG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB;AAC1B,OAAO;AACP,OAAO;AAEP,OAAO,kBAAkB;AAEzB,MAAM,kBAAkB,CAAC,UAAuB,MAAM,gBAAgB;AAS/D,aAAM,eAAe,UAAU;AAAA,EAA/B;AAAA;AAMH,SAAO,SAAS;AAGhB,SAAgB,QAAQ;AAMxB,SAAgB,cAAc;AAAA;AAAA,EAd9B,WAA2B,SAAyB;AAChD,WAAO,CAAC,GAAG,MAAM,QAAQ,YAAY;AAAA,EACzC;AAAA,EAiBQ,aAAa,OAAoB;AACrC,UAAM,eAAe,KAAK;AAAA,MACtB,IAAI,MAAM,UAAU;AAAA,QAChB,YAAY;AAAA,QACZ,SAAS;AAAA,MACb,CAAC;AAAA,IACL;AACA,QAAI,CAAC,cAAc;AACf,YAAM,eAAe;AAAA,IACzB;AAAA,EACJ;AAAA,EAEQ,cAAc,OAA4B;AAC9C,UAAM,EAAE,KAAK,IAAI;AACjB,QAAI,CAAC,KAAK,SAAS,SAAS,UAAU;AAClC;AAAA,IACJ;AACA,SAAK,MAAM;AAAA,EACf;AAAA,EAEA,MAAa,QAAuB;AAChC,SAAK,QAAQ;AACb,UAAM,KAAK;AACX,SAAK,aAAa;AAAA,MACd,IAAI,WAAW,SAAS;AAAA,QACpB,SAAS;AAAA,QACT,UAAU;AAAA,MACd,CAAC;AAAA,IACL;AAKA,SAAK,aAAa;AAAA,MACd,IAAI,WAAW,UAAU;AAAA,QACrB,SAAS;AAAA,MACb,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEmB,cAA8B;AAC7C,WAAO;AAAA;AAAA,yBAEU,KAAK;AAAA;AAAA,yBAEL,UAAU,KAAK,MAAM;AAAA,0BACpB,KAAK;AAAA,yBACN,KAAK;AAAA,2BACH,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKd,MAAM,YAAY;AAAA,kBAClB,KAAK,QACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAMe,UAAU,KAAK,IAAI;AAAA,yCACf;AAAA;AAAA,0BAGnB;AAAA;AAAA;AAAA,EAGlB;AAAA,EAEgB,aAAa,mBAAyC;AAClE,UAAM,aAAa,iBAAiB;AACpC,SAAK,aAAa,aAAa,QAAQ,QAAQ;AAAA,EACnD;AAAA,EAEgB,aAAmB;AAC/B,SAAK,YAAY;AAAA,EACrB;AACJ;AA5FW;AAAA,EADN,SAAS;AAAA,GALD,OAMF;AAGS;AAAA,EADf,SAAS;AAAA,GARD,OASO;AAGT;AAAA,EADN,SAAS;AAAA,GAXD,OAYF;AAGS;AAAA,EADf,SAAS;AAAA,GAdD,OAeO;AAGT;AAAA,EADN,MAAM,OAAO;AAAA,GAjBL,OAkBF;",
6
6
  "names": []
7
7
  }
package/src/Search.js CHANGED
@@ -1,8 +1,8 @@
1
- "use strict";var u=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=(o,s,e,t)=>{for(var i=t>1?void 0:t?d(s,e):s,n=o.length-1,p;n>=0;n--)(p=o[n])&&(i=(t?p(s,e,i):p(i))||i);return t&&i&&u(s,e,i),i};import{html as a}from"@spectrum-web-components/base";import{property as l,query as c}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as m}from"@spectrum-web-components/base/src/directives.js";import{Textfield as b}from"@spectrum-web-components/textfield";import"@spectrum-web-components/button/sp-clear-button.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";import h from"./search.css.js";const f=o=>o.stopPropagation();export class Search extends b{constructor(){super(...arguments);this.action="";this.label="Search";this.placeholder="Search"}static get styles(){return[...super.styles,h]}handleSubmit(e){this.dispatchEvent(new Event("submit",{cancelable:!0,bubbles:!0}))||e.preventDefault()}handleKeydown(e){const{code:t}=e;!this.value||t!=="Escape"||this.reset()}async reset(){this.value="",await this.updateComplete,this.focusElement.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.focusElement.dispatchEvent(new InputEvent("change",{bubbles:!0}))}renderField(){return a`
1
+ "use strict";var d=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var r=(o,s,e,t)=>{for(var i=t>1?void 0:t?c(s,e):s,n=o.length-1,p;n>=0;n--)(p=o[n])&&(i=(t?p(s,e,i):p(i))||i);return t&&i&&d(s,e,i),i};import{html as a}from"@spectrum-web-components/base";import{property as l,query as m}from"@spectrum-web-components/base/src/decorators.js";import{ifDefined as u}from"@spectrum-web-components/base/src/directives.js";import{Textfield as b}from"@spectrum-web-components/textfield";import"@spectrum-web-components/button/sp-clear-button.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js";import h from"./search.css.js";const f=o=>o.stopPropagation();export class Search extends b{constructor(){super(...arguments);this.action="";this.label="Search";this.placeholder="Search"}static get styles(){return[...super.styles,h]}handleSubmit(e){this.dispatchEvent(new Event("submit",{cancelable:!0,bubbles:!0}))||e.preventDefault()}handleKeydown(e){const{code:t}=e;!this.value||t!=="Escape"||this.reset()}async reset(){this.value="",await this.updateComplete,this.focusElement.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.focusElement.dispatchEvent(new InputEvent("change",{bubbles:!0}))}renderField(){return a`
2
2
  <form
3
3
  action=${this.action}
4
4
  id="form"
5
- method=${m(this.method)}
5
+ method=${u(this.method)}
6
6
  @submit=${this.handleSubmit}
7
7
  @reset=${this.reset}
8
8
  @keydown=${this.handleKeydown}
@@ -17,9 +17,10 @@
17
17
  label="Reset"
18
18
  tabindex="-1"
19
19
  type="reset"
20
+ size=${u(this.size)}
20
21
  @keydown=${f}
21
22
  ></sp-clear-button>
22
23
  `:a``}
23
24
  </form>
24
- `}firstUpdated(e){super.firstUpdated(e),this.inputElement.setAttribute("type","search")}willUpdate(){this.multiline=!1}}r([l()],Search.prototype,"action",2),r([l()],Search.prototype,"label",2),r([l()],Search.prototype,"method",2),r([l()],Search.prototype,"placeholder",2),r([c("#form")],Search.prototype,"form",2);
25
+ `}firstUpdated(e){super.firstUpdated(e),this.inputElement.setAttribute("type","search")}willUpdate(){this.multiline=!1}}r([l()],Search.prototype,"action",2),r([l()],Search.prototype,"label",2),r([l()],Search.prototype,"method",2),r([l()],Search.prototype,"placeholder",2),r([m("#form")],Search.prototype,"form",2);
25
26
  //# sourceMappingURL=Search.js.map
package/src/Search.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["Search.ts"],
4
- "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport { Textfield } from '@spectrum-web-components/textfield';\nimport '@spectrum-web-components/button/sp-clear-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\n\nimport searchStyles from './search.css.js';\n\nconst stopPropagation = (event: Event): void => event.stopPropagation();\n\n/**\n * @element sp-search\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n *\n * @fires submit - The search form has been submitted.\n */\nexport class Search extends Textfield {\n public static override get styles(): CSSResultArray {\n return [...super.styles, searchStyles];\n }\n\n @property()\n public action = '';\n\n @property()\n public override label = 'Search';\n\n @property()\n public method?: 'GET' | 'POST' | 'dialog';\n\n @property()\n public override placeholder = 'Search';\n\n @query('#form')\n public form!: HTMLFormElement;\n\n private handleSubmit(event: Event): void {\n const applyDefault = this.dispatchEvent(\n new Event('submit', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n event.preventDefault();\n }\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n if (!this.value || code !== 'Escape') {\n return;\n }\n this.reset();\n }\n\n public async reset(): Promise<void> {\n this.value = '';\n await this.updateComplete;\n this.focusElement.dispatchEvent(\n new InputEvent('input', {\n bubbles: true,\n composed: true,\n })\n );\n // The native `change` event on an `input` element is not composed,\n // so this synthetic replication of a `change` event must not be\n // either as the `Textfield` baseclass should only need to handle\n // the native variant of this interaction.\n this.focusElement.dispatchEvent(\n new InputEvent('change', {\n bubbles: true,\n })\n );\n }\n\n protected override renderField(): TemplateResult {\n return html`\n <form\n action=${this.action}\n id=\"form\"\n method=${ifDefined(this.method)}\n @submit=${this.handleSubmit}\n @reset=${this.reset}\n @keydown=${this.handleKeydown}\n >\n <sp-icon-magnify\n class=\"icon magnifier icon-workflow icon-search\"\n ></sp-icon-magnify>\n ${super.renderField()}\n ${this.value\n ? html`\n <sp-clear-button\n id=\"button\"\n label=\"Reset\"\n tabindex=\"-1\"\n type=\"reset\"\n @keydown=${stopPropagation}\n ></sp-clear-button>\n `\n : html``}\n </form>\n `;\n }\n\n public override firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n this.inputElement.setAttribute('type', 'search');\n }\n\n public override willUpdate(): void {\n this.multiline = false;\n }\n}\n"],
5
- "mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,aAAAC,MAAiB,kDAE1B,OAAS,aAAAC,MAAiB,qCAC1B,MAAO,qDACP,MAAO,mEAEP,OAAOC,MAAkB,kBAEzB,MAAMC,EAAmBC,GAAuBA,EAAM,gBAAgB,EAS/D,aAAM,eAAeH,CAAU,CAA/B,kCAMH,KAAO,OAAS,GAGhB,KAAgB,MAAQ,SAMxB,KAAgB,YAAc,SAd9B,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQC,CAAY,CACzC,CAiBQ,aAAaE,EAAoB,CAChB,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,WAAY,GACZ,QAAS,EACb,CAAC,CACL,GAEIA,EAAM,eAAe,CAE7B,CAEQ,cAAcA,EAA4B,CAC9C,KAAM,CAAE,KAAAC,CAAK,EAAID,EACb,CAAC,KAAK,OAASC,IAAS,UAG5B,KAAK,MAAM,CACf,CAEA,MAAa,OAAuB,CAChC,KAAK,MAAQ,GACb,MAAM,KAAK,eACX,KAAK,aAAa,cACd,IAAI,WAAW,QAAS,CACpB,QAAS,GACT,SAAU,EACd,CAAC,CACL,EAKA,KAAK,aAAa,cACd,IAAI,WAAW,SAAU,CACrB,QAAS,EACb,CAAC,CACL,CACJ,CAEmB,aAA8B,CAC7C,OAAOR;AAAA;AAAA,yBAEU,KAAK;AAAA;AAAA,yBAELG,EAAU,KAAK,MAAM;AAAA,0BACpB,KAAK;AAAA,yBACN,KAAK;AAAA,2BACH,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKd,MAAM,YAAY;AAAA,kBAClB,KAAK,MACDH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yCAMmBM;AAAA;AAAA,wBAGnBN;AAAA;AAAA,SAGlB,CAEgB,aAAaS,EAAyC,CAClE,MAAM,aAAaA,CAAiB,EACpC,KAAK,aAAa,aAAa,OAAQ,QAAQ,CACnD,CAEgB,YAAmB,CAC/B,KAAK,UAAY,EACrB,CACJ,CA3FWC,EAAA,CADNT,EAAS,GALD,OAMF,sBAGSS,EAAA,CADfT,EAAS,GARD,OASO,qBAGTS,EAAA,CADNT,EAAS,GAXD,OAYF,sBAGSS,EAAA,CADfT,EAAS,GAdD,OAeO,2BAGTS,EAAA,CADNR,EAAM,OAAO,GAjBL,OAkBF",
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport { Textfield } from '@spectrum-web-components/textfield';\nimport '@spectrum-web-components/button/sp-clear-button.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-magnify.js';\n\nimport searchStyles from './search.css.js';\n\nconst stopPropagation = (event: Event): void => event.stopPropagation();\n\n/**\n * @element sp-search\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n *\n * @fires submit - The search form has been submitted.\n */\nexport class Search extends Textfield {\n public static override get styles(): CSSResultArray {\n return [...super.styles, searchStyles];\n }\n\n @property()\n public action = '';\n\n @property()\n public override label = 'Search';\n\n @property()\n public method?: 'GET' | 'POST' | 'dialog';\n\n @property()\n public override placeholder = 'Search';\n\n @query('#form')\n public form!: HTMLFormElement;\n\n private handleSubmit(event: Event): void {\n const applyDefault = this.dispatchEvent(\n new Event('submit', {\n cancelable: true,\n bubbles: true,\n })\n );\n if (!applyDefault) {\n event.preventDefault();\n }\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n const { code } = event;\n if (!this.value || code !== 'Escape') {\n return;\n }\n this.reset();\n }\n\n public async reset(): Promise<void> {\n this.value = '';\n await this.updateComplete;\n this.focusElement.dispatchEvent(\n new InputEvent('input', {\n bubbles: true,\n composed: true,\n })\n );\n // The native `change` event on an `input` element is not composed,\n // so this synthetic replication of a `change` event must not be\n // either as the `Textfield` baseclass should only need to handle\n // the native variant of this interaction.\n this.focusElement.dispatchEvent(\n new InputEvent('change', {\n bubbles: true,\n })\n );\n }\n\n protected override renderField(): TemplateResult {\n return html`\n <form\n action=${this.action}\n id=\"form\"\n method=${ifDefined(this.method)}\n @submit=${this.handleSubmit}\n @reset=${this.reset}\n @keydown=${this.handleKeydown}\n >\n <sp-icon-magnify\n class=\"icon magnifier icon-workflow icon-search\"\n ></sp-icon-magnify>\n ${super.renderField()}\n ${this.value\n ? html`\n <sp-clear-button\n id=\"button\"\n label=\"Reset\"\n tabindex=\"-1\"\n type=\"reset\"\n size=${ifDefined(this.size)}\n @keydown=${stopPropagation}\n ></sp-clear-button>\n `\n : html``}\n </form>\n `;\n }\n\n public override firstUpdated(changedProperties: PropertyValues): void {\n super.firstUpdated(changedProperties);\n this.inputElement.setAttribute('type', 'search');\n }\n\n public override willUpdate(): void {\n this.multiline = false;\n }\n}\n"],
5
+ "mappings": "qNAYA,OAEI,QAAAA,MAGG,gCACP,OACI,YAAAC,EACA,SAAAC,MACG,kDACP,OAAS,aAAAC,MAAiB,kDAE1B,OAAS,aAAAC,MAAiB,qCAC1B,MAAO,qDACP,MAAO,mEAEP,OAAOC,MAAkB,kBAEzB,MAAMC,EAAmBC,GAAuBA,EAAM,gBAAgB,EAS/D,aAAM,eAAeH,CAAU,CAA/B,kCAMH,KAAO,OAAS,GAGhB,KAAgB,MAAQ,SAMxB,KAAgB,YAAc,SAd9B,WAA2B,QAAyB,CAChD,MAAO,CAAC,GAAG,MAAM,OAAQC,CAAY,CACzC,CAiBQ,aAAaE,EAAoB,CAChB,KAAK,cACtB,IAAI,MAAM,SAAU,CAChB,WAAY,GACZ,QAAS,EACb,CAAC,CACL,GAEIA,EAAM,eAAe,CAE7B,CAEQ,cAAcA,EAA4B,CAC9C,KAAM,CAAE,KAAAC,CAAK,EAAID,EACb,CAAC,KAAK,OAASC,IAAS,UAG5B,KAAK,MAAM,CACf,CAEA,MAAa,OAAuB,CAChC,KAAK,MAAQ,GACb,MAAM,KAAK,eACX,KAAK,aAAa,cACd,IAAI,WAAW,QAAS,CACpB,QAAS,GACT,SAAU,EACd,CAAC,CACL,EAKA,KAAK,aAAa,cACd,IAAI,WAAW,SAAU,CACrB,QAAS,EACb,CAAC,CACL,CACJ,CAEmB,aAA8B,CAC7C,OAAOR;AAAA;AAAA,yBAEU,KAAK;AAAA;AAAA,yBAELG,EAAU,KAAK,MAAM;AAAA,0BACpB,KAAK;AAAA,yBACN,KAAK;AAAA,2BACH,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKd,MAAM,YAAY;AAAA,kBAClB,KAAK,MACDH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qCAMeG,EAAU,KAAK,IAAI;AAAA,yCACfG;AAAA;AAAA,wBAGnBN;AAAA;AAAA,SAGlB,CAEgB,aAAaS,EAAyC,CAClE,MAAM,aAAaA,CAAiB,EACpC,KAAK,aAAa,aAAa,OAAQ,QAAQ,CACnD,CAEgB,YAAmB,CAC/B,KAAK,UAAY,EACrB,CACJ,CA5FWC,EAAA,CADNT,EAAS,GALD,OAMF,sBAGSS,EAAA,CADfT,EAAS,GARD,OASO,qBAGTS,EAAA,CADNT,EAAS,GAXD,OAYF,sBAGSS,EAAA,CADfT,EAAS,GAdD,OAeO,2BAGTS,EAAA,CADNR,EAAM,OAAO,GAjBL,OAkBF",
6
6
  "names": ["html", "property", "query", "ifDefined", "Textfield", "searchStyles", "stopPropagation", "event", "code", "changedProperties", "__decorateClass"]
7
7
  }
package/src/search.css.dev.js CHANGED
@@ -59,7 +59,7 @@ const styles = css`
59
59
  --mod-search-background-color,var(--spectrum-search-background-color)
60
60
  );--mod-textfield-background-color-disabled:var(
61
61
  --mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)
62
- )}.spectrum-Search--sizeS{--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}.spectrum-Search--sizeL{--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}.spectrum-Search--sizeXL{--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(
62
+ )}:host([size=s]){--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}:host([size=l]){--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}:host([size=xl]){--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(
63
63
  --mod-workflow-icon-size-100,
64
64
  var(--spectrum-workflow-icon-size-100)
65
65
  )/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(
@@ -123,25 +123,57 @@ var(--spectrum-search-quiet-button-offset)
123
123
  --system-spectrum-search-border-color-focus-hover
124
124
  );--spectrum-search-border-color-key-focus:var(
125
125
  --system-spectrum-search-border-color-key-focus
126
- )}.spectrum-Search--sizeS{--spectrum-search-border-radius:var(
126
+ )}:host([size=s]){--spectrum-search-border-radius:var(
127
127
  --system-spectrum-search-sizes-border-radius
128
128
  );--spectrum-search-edge-to-visual:var(
129
129
  --system-spectrum-search-sizes-edge-to-visual
130
- )}.spectrum-Search--sizeM{--spectrum-search-border-radius:var(
130
+ )}:host([size=m]){--spectrum-search-border-radius:var(
131
131
  --system-spectrum-search-sizem-border-radius
132
132
  );--spectrum-search-edge-to-visual:var(
133
133
  --system-spectrum-search-sizem-edge-to-visual
134
- )}.spectrum-Search--sizeL{--spectrum-search-border-radius:var(
134
+ )}:host([size=l]){--spectrum-search-border-radius:var(
135
135
  --system-spectrum-search-sizel-border-radius
136
136
  );--spectrum-search-edge-to-visual:var(
137
137
  --system-spectrum-search-sizel-edge-to-visual
138
- )}.spectrum-Search--sizeXL{--spectrum-search-border-radius:var(
138
+ )}:host([size=xl]){--spectrum-search-border-radius:var(
139
139
  --system-spectrum-search-sizexl-border-radius
140
140
  );--spectrum-search-edge-to-visual:var(
141
141
  --system-spectrum-search-sizexl-edge-to-visual
142
142
  )}:host{--mod-textfield-spacing-inline:var(
143
143
  --spectrum-alias-infieldbutton-full-height-m
144
- )}input::-webkit-search-cancel-button{display:none}
144
+ )}input::-webkit-search-cancel-button{display:none}:host([size=s]){--spectrum-icon-tshirt-size-height:var(
145
+ --spectrum-alias-workflow-icon-size-s
146
+ );--spectrum-icon-tshirt-size-width:var(
147
+ --spectrum-alias-workflow-icon-size-s
148
+ );--spectrum-ui-icon-tshirt-size-height:var(
149
+ --spectrum-alias-ui-icon-cornertriangle-size-75
150
+ );--spectrum-ui-icon-tshirt-size-width:var(
151
+ --spectrum-alias-ui-icon-cornertriangle-size-75
152
+ )}:host([size=m]){--spectrum-icon-tshirt-size-height:var(
153
+ --spectrum-alias-workflow-icon-size-m
154
+ );--spectrum-icon-tshirt-size-width:var(
155
+ --spectrum-alias-workflow-icon-size-m
156
+ );--spectrum-ui-icon-tshirt-size-height:var(
157
+ --spectrum-alias-ui-icon-cornertriangle-size-100
158
+ );--spectrum-ui-icon-tshirt-size-width:var(
159
+ --spectrum-alias-ui-icon-cornertriangle-size-100
160
+ )}:host([size=l]){--spectrum-icon-tshirt-size-height:var(
161
+ --spectrum-alias-workflow-icon-size-l
162
+ );--spectrum-icon-tshirt-size-width:var(
163
+ --spectrum-alias-workflow-icon-size-l
164
+ );--spectrum-ui-icon-tshirt-size-height:var(
165
+ --spectrum-alias-ui-icon-cornertriangle-size-200
166
+ );--spectrum-ui-icon-tshirt-size-width:var(
167
+ --spectrum-alias-ui-icon-cornertriangle-size-200
168
+ )}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(
169
+ --spectrum-alias-workflow-icon-size-xl
170
+ );--spectrum-icon-tshirt-size-width:var(
171
+ --spectrum-alias-workflow-icon-size-xl
172
+ );--spectrum-ui-icon-tshirt-size-height:var(
173
+ --spectrum-alias-ui-icon-cornertriangle-size-300
174
+ );--spectrum-ui-icon-tshirt-size-width:var(
175
+ --spectrum-alias-ui-icon-cornertriangle-size-300
176
+ )}
145
177
  `;
146
178
  export default styles;
147
179
  //# sourceMappingURL=search.css.dev.js.map
package/src/search.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["search.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-search-inline-size:var(--spectrum-field-width);--spectrum-search-block-size:var(--spectrum-component-height-100);--spectrum-search-button-inline-size:var(--spectrum-search-block-size);--spectrum-search-min-inline-size:calc(var(--spectrum-search-field-minimum-width-multiplier)*var(--spectrum-search-block-size));--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-search-to-help-text:var(--spectrum-help-text-to-component);--spectrum-search-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-search-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-search-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-search-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-search-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-search-font-family:var(--spectrum-sans-font-family-stack);--spectrum-search-font-weight:var(--spectrum-regular-font-weight);--spectrum-search-font-style:var(--spectrum-default-font-style);--spectrum-search-line-height:var(--spectrum-line-height-100);--spectrum-search-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-search-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-search-color-focus:var(--spectrum-neutral-content-color-focus);--spectrum-search-color-focus-hover:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-search-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-search-border-width:var(--spectrum-border-width-100);--spectrum-search-background-color:var(--spectrum-gray-50);--spectrum-search-color-disabled:var(--spectrum-disabled-content-color);--spectrum-search-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-background-color\n);--mod-textfield-font-family:var(\n--mod-search-font-family,var(--spectrum-search-font-family)\n);--mod-textfield-font-weight:var(\n--mod-search-font-weight,var(--spectrum-search-font-weight)\n);--mod-textfield-corner-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);--mod-textfield-border-width:var(\n--mod-search-border-width,var(--spectrum-search-border-width)\n);--mod-textfield-focus-indicator-gap:var(\n--mod-search-focus-indicator-gap,var(--spectrum-search-focus-indicator-gap)\n);--mod-textfield-focus-indicator-width:var(\n--mod-search-focus-indicator-thickness,var(--spectrum-search-focus-indicator-thickness)\n);--mod-textfield-focus-indicator-color:var(\n--mod-search-focus-indicator-color,var(--spectrum-search-focus-indicator-color)\n);--mod-textfield-text-color-default:var(\n--mod-search-color-default,var(--spectrum-search-color-default)\n);--mod-textfield-text-color-hover:var(\n--mod-search-color-hover,var(--spectrum-search-color-hover)\n);--mod-textfield-text-color-focus:var(\n--mod-search-color-focus,var(--spectrum-search-color-focus)\n);--mod-textfield-text-color-focus-hover:var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n);--mod-textfield-text-color-keyboard-focus:var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n);--mod-textfield-text-color-disabled:var(\n--mod-search-color-disabled,var(--spectrum-search-color-disabled)\n);--mod-textfield-border-color:var(\n--mod-search-border-color-default,var(--spectrum-search-border-color-default)\n);--mod-textfield-border-color-hover:var(\n--mod-search-border-color-hover,var(--spectrum-search-border-color-hover)\n);--mod-textfield-border-color-focus:var(\n--mod-search-border-color-focus,var(--spectrum-search-border-color-focus)\n);--mod-textfield-border-color-focus-hover:var(\n--mod-search-border-color-focus-hover,var(--spectrum-search-border-color-focus-hover)\n);--mod-textfield-border-color-keyboard-focus:var(\n--mod-search-border-color-key-focus,var(--spectrum-search-border-color-key-focus)\n);--mod-textfield-border-color-disabled:var(\n--mod-search-border-color-disabled,var(--spectrum-search-border-color-disabled)\n);--mod-textfield-background-color:var(\n--mod-search-background-color,var(--spectrum-search-background-color)\n);--mod-textfield-background-color-disabled:var(\n--mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)\n)}.spectrum-Search--sizeS{--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}.spectrum-Search--sizeL{--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}.spectrum-Search--sizeXL{--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(\n--mod-workflow-icon-size-100,\nvar(--spectrum-workflow-icon-size-100)\n)/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-border-color\n)}:host([quiet]) #textfield{--spectrum-search-border-radius:0;--spectrum-search-edge-to-visual:var(\n--spectrum-field-edge-to-visual-quiet\n)}@media (forced-colors:active){#textfield #textfield,#textfield #textfield .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#textfield #button .spectrum-ClearButton-fill{background-color:#0000;forced-color-adjust:none}}#textfield{display:inline-block;inline-size:var(\n--mod-search-inline-size,var(--spectrum-search-inline-size)\n);min-inline-size:var(\n--mod-search-min-inline-size,var(--spectrum-search-min-inline-size)\n);position:relative}#textfield .spectrum-HelpText{margin-block-start:var(\n--mod-search-to-help-text,var(--spectrum-search-to-help-text)\n)}#button{inset-block-start:0;inset-inline-end:0;position:absolute}#button,#button .spectrum-ClearButton-fill{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n)}#textfield.is-disabled #button{display:none}#textfield{inline-size:100%}.icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-default,var(--mod-search-color-default,var(--spectrum-search-color-default))\n);color:var(--spectrum-search-color);display:block;inset-block:0;margin-block:auto;position:absolute}#textfield:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-hover,var(--mod-search-color-hover,var(--spectrum-search-color-hover))\n)}#textfield.is-focused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(--mod-search-color-focus,var(--spectrum-search-color-focus))\n)}#textfield.is-focused:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n)\n)}#textfield.is-keyboardFocused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n)\n)}#textfield.is-disabled .icon-search,#textfield.is-disabled:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-disabled,var(--mod-search-color-disabled,var(--spectrum-search-color-disabled))\n)}.input{-webkit-appearance:none;block-size:var(--mod-search-block-size,var(--spectrum-search-block-size));font-style:var(--mod-search-font-style,var(--spectrum-search-font-style));line-height:var(\n--mod-search-line-height,var(--spectrum-search-line-height)\n);padding-block-end:calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-block-start:calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none}:host(:not([quiet])) #textfield .icon-search{inset-inline-start:var(\n--mod-search-edge-to-visual,var(--spectrum-search-edge-to-visual)\n)}:host(:not([quiet])) #textfield .input{padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host([quiet]) #button{transform:translateX(var(\n--mod-search-quiet-button-offset,var(--spectrum-search-quiet-button-offset)\n))}:host([quiet]) #textfield .input{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);padding-block-start:var(\n--mod-search-top-to-text,var(--spectrum-search-top-to-text)\n);padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(\n--mod-search-quiet-button-offset,\nvar(--spectrum-search-quiet-button-offset)\n));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host{--spectrum-search-border-radius:var(\n--system-spectrum-search-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-edge-to-visual\n);--spectrum-search-border-color-default:var(\n--system-spectrum-search-border-color-default\n);--spectrum-search-border-color-hover:var(\n--system-spectrum-search-border-color-hover\n);--spectrum-search-border-color-focus:var(\n--system-spectrum-search-border-color-focus\n);--spectrum-search-border-color-focus-hover:var(\n--system-spectrum-search-border-color-focus-hover\n);--spectrum-search-border-color-key-focus:var(\n--system-spectrum-search-border-color-key-focus\n)}.spectrum-Search--sizeS{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizes-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizes-edge-to-visual\n)}.spectrum-Search--sizeM{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizem-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizem-edge-to-visual\n)}.spectrum-Search--sizeL{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizel-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizel-edge-to-visual\n)}.spectrum-Search--sizeXL{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizexl-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizexl-edge-to-visual\n)}:host{--mod-textfield-spacing-inline:var(\n--spectrum-alias-infieldbutton-full-height-m\n)}input::-webkit-search-cancel-button{display:none}\n`;\nexport default styles;"],
5
- "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+If,eAAe;",
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-search-inline-size:var(--spectrum-field-width);--spectrum-search-block-size:var(--spectrum-component-height-100);--spectrum-search-button-inline-size:var(--spectrum-search-block-size);--spectrum-search-min-inline-size:calc(var(--spectrum-search-field-minimum-width-multiplier)*var(--spectrum-search-block-size));--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-search-to-help-text:var(--spectrum-help-text-to-component);--spectrum-search-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-search-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-search-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-search-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-search-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-search-font-family:var(--spectrum-sans-font-family-stack);--spectrum-search-font-weight:var(--spectrum-regular-font-weight);--spectrum-search-font-style:var(--spectrum-default-font-style);--spectrum-search-line-height:var(--spectrum-line-height-100);--spectrum-search-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-search-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-search-color-focus:var(--spectrum-neutral-content-color-focus);--spectrum-search-color-focus-hover:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-search-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-search-border-width:var(--spectrum-border-width-100);--spectrum-search-background-color:var(--spectrum-gray-50);--spectrum-search-color-disabled:var(--spectrum-disabled-content-color);--spectrum-search-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-background-color\n);--mod-textfield-font-family:var(\n--mod-search-font-family,var(--spectrum-search-font-family)\n);--mod-textfield-font-weight:var(\n--mod-search-font-weight,var(--spectrum-search-font-weight)\n);--mod-textfield-corner-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);--mod-textfield-border-width:var(\n--mod-search-border-width,var(--spectrum-search-border-width)\n);--mod-textfield-focus-indicator-gap:var(\n--mod-search-focus-indicator-gap,var(--spectrum-search-focus-indicator-gap)\n);--mod-textfield-focus-indicator-width:var(\n--mod-search-focus-indicator-thickness,var(--spectrum-search-focus-indicator-thickness)\n);--mod-textfield-focus-indicator-color:var(\n--mod-search-focus-indicator-color,var(--spectrum-search-focus-indicator-color)\n);--mod-textfield-text-color-default:var(\n--mod-search-color-default,var(--spectrum-search-color-default)\n);--mod-textfield-text-color-hover:var(\n--mod-search-color-hover,var(--spectrum-search-color-hover)\n);--mod-textfield-text-color-focus:var(\n--mod-search-color-focus,var(--spectrum-search-color-focus)\n);--mod-textfield-text-color-focus-hover:var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n);--mod-textfield-text-color-keyboard-focus:var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n);--mod-textfield-text-color-disabled:var(\n--mod-search-color-disabled,var(--spectrum-search-color-disabled)\n);--mod-textfield-border-color:var(\n--mod-search-border-color-default,var(--spectrum-search-border-color-default)\n);--mod-textfield-border-color-hover:var(\n--mod-search-border-color-hover,var(--spectrum-search-border-color-hover)\n);--mod-textfield-border-color-focus:var(\n--mod-search-border-color-focus,var(--spectrum-search-border-color-focus)\n);--mod-textfield-border-color-focus-hover:var(\n--mod-search-border-color-focus-hover,var(--spectrum-search-border-color-focus-hover)\n);--mod-textfield-border-color-keyboard-focus:var(\n--mod-search-border-color-key-focus,var(--spectrum-search-border-color-key-focus)\n);--mod-textfield-border-color-disabled:var(\n--mod-search-border-color-disabled,var(--spectrum-search-border-color-disabled)\n);--mod-textfield-background-color:var(\n--mod-search-background-color,var(--spectrum-search-background-color)\n);--mod-textfield-background-color-disabled:var(\n--mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)\n)}:host([size=s]){--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}:host([size=l]){--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}:host([size=xl]){--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(\n--mod-workflow-icon-size-100,\nvar(--spectrum-workflow-icon-size-100)\n)/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-border-color\n)}:host([quiet]) #textfield{--spectrum-search-border-radius:0;--spectrum-search-edge-to-visual:var(\n--spectrum-field-edge-to-visual-quiet\n)}@media (forced-colors:active){#textfield #textfield,#textfield #textfield .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#textfield #button .spectrum-ClearButton-fill{background-color:#0000;forced-color-adjust:none}}#textfield{display:inline-block;inline-size:var(\n--mod-search-inline-size,var(--spectrum-search-inline-size)\n);min-inline-size:var(\n--mod-search-min-inline-size,var(--spectrum-search-min-inline-size)\n);position:relative}#textfield .spectrum-HelpText{margin-block-start:var(\n--mod-search-to-help-text,var(--spectrum-search-to-help-text)\n)}#button{inset-block-start:0;inset-inline-end:0;position:absolute}#button,#button .spectrum-ClearButton-fill{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n)}#textfield.is-disabled #button{display:none}#textfield{inline-size:100%}.icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-default,var(--mod-search-color-default,var(--spectrum-search-color-default))\n);color:var(--spectrum-search-color);display:block;inset-block:0;margin-block:auto;position:absolute}#textfield:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-hover,var(--mod-search-color-hover,var(--spectrum-search-color-hover))\n)}#textfield.is-focused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(--mod-search-color-focus,var(--spectrum-search-color-focus))\n)}#textfield.is-focused:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n)\n)}#textfield.is-keyboardFocused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n)\n)}#textfield.is-disabled .icon-search,#textfield.is-disabled:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-disabled,var(--mod-search-color-disabled,var(--spectrum-search-color-disabled))\n)}.input{-webkit-appearance:none;block-size:var(--mod-search-block-size,var(--spectrum-search-block-size));font-style:var(--mod-search-font-style,var(--spectrum-search-font-style));line-height:var(\n--mod-search-line-height,var(--spectrum-search-line-height)\n);padding-block-end:calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-block-start:calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none}:host(:not([quiet])) #textfield .icon-search{inset-inline-start:var(\n--mod-search-edge-to-visual,var(--spectrum-search-edge-to-visual)\n)}:host(:not([quiet])) #textfield .input{padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host([quiet]) #button{transform:translateX(var(\n--mod-search-quiet-button-offset,var(--spectrum-search-quiet-button-offset)\n))}:host([quiet]) #textfield .input{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);padding-block-start:var(\n--mod-search-top-to-text,var(--spectrum-search-top-to-text)\n);padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(\n--mod-search-quiet-button-offset,\nvar(--spectrum-search-quiet-button-offset)\n));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host{--spectrum-search-border-radius:var(\n--system-spectrum-search-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-edge-to-visual\n);--spectrum-search-border-color-default:var(\n--system-spectrum-search-border-color-default\n);--spectrum-search-border-color-hover:var(\n--system-spectrum-search-border-color-hover\n);--spectrum-search-border-color-focus:var(\n--system-spectrum-search-border-color-focus\n);--spectrum-search-border-color-focus-hover:var(\n--system-spectrum-search-border-color-focus-hover\n);--spectrum-search-border-color-key-focus:var(\n--system-spectrum-search-border-color-key-focus\n)}:host([size=s]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizes-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizes-edge-to-visual\n)}:host([size=m]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizem-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizem-edge-to-visual\n)}:host([size=l]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizel-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizel-edge-to-visual\n)}:host([size=xl]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizexl-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizexl-edge-to-visual\n)}:host{--mod-textfield-spacing-inline:var(\n--spectrum-alias-infieldbutton-full-height-m\n)}input::-webkit-search-cancel-button{display:none}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n)}\n`;\nexport default styles;"],
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+Kf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/search.css.js CHANGED
@@ -57,7 +57,7 @@
57
57
  --mod-search-background-color,var(--spectrum-search-background-color)
58
58
  );--mod-textfield-background-color-disabled:var(
59
59
  --mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)
60
- )}.spectrum-Search--sizeS{--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}.spectrum-Search--sizeL{--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}.spectrum-Search--sizeXL{--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(
60
+ )}:host([size=s]){--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}:host([size=l]){--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}:host([size=xl]){--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(
61
61
  --mod-workflow-icon-size-100,
62
62
  var(--spectrum-workflow-icon-size-100)
63
63
  )/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(
@@ -121,24 +121,56 @@ var(--spectrum-search-quiet-button-offset)
121
121
  --system-spectrum-search-border-color-focus-hover
122
122
  );--spectrum-search-border-color-key-focus:var(
123
123
  --system-spectrum-search-border-color-key-focus
124
- )}.spectrum-Search--sizeS{--spectrum-search-border-radius:var(
124
+ )}:host([size=s]){--spectrum-search-border-radius:var(
125
125
  --system-spectrum-search-sizes-border-radius
126
126
  );--spectrum-search-edge-to-visual:var(
127
127
  --system-spectrum-search-sizes-edge-to-visual
128
- )}.spectrum-Search--sizeM{--spectrum-search-border-radius:var(
128
+ )}:host([size=m]){--spectrum-search-border-radius:var(
129
129
  --system-spectrum-search-sizem-border-radius
130
130
  );--spectrum-search-edge-to-visual:var(
131
131
  --system-spectrum-search-sizem-edge-to-visual
132
- )}.spectrum-Search--sizeL{--spectrum-search-border-radius:var(
132
+ )}:host([size=l]){--spectrum-search-border-radius:var(
133
133
  --system-spectrum-search-sizel-border-radius
134
134
  );--spectrum-search-edge-to-visual:var(
135
135
  --system-spectrum-search-sizel-edge-to-visual
136
- )}.spectrum-Search--sizeXL{--spectrum-search-border-radius:var(
136
+ )}:host([size=xl]){--spectrum-search-border-radius:var(
137
137
  --system-spectrum-search-sizexl-border-radius
138
138
  );--spectrum-search-edge-to-visual:var(
139
139
  --system-spectrum-search-sizexl-edge-to-visual
140
140
  )}:host{--mod-textfield-spacing-inline:var(
141
141
  --spectrum-alias-infieldbutton-full-height-m
142
- )}input::-webkit-search-cancel-button{display:none}
142
+ )}input::-webkit-search-cancel-button{display:none}:host([size=s]){--spectrum-icon-tshirt-size-height:var(
143
+ --spectrum-alias-workflow-icon-size-s
144
+ );--spectrum-icon-tshirt-size-width:var(
145
+ --spectrum-alias-workflow-icon-size-s
146
+ );--spectrum-ui-icon-tshirt-size-height:var(
147
+ --spectrum-alias-ui-icon-cornertriangle-size-75
148
+ );--spectrum-ui-icon-tshirt-size-width:var(
149
+ --spectrum-alias-ui-icon-cornertriangle-size-75
150
+ )}:host([size=m]){--spectrum-icon-tshirt-size-height:var(
151
+ --spectrum-alias-workflow-icon-size-m
152
+ );--spectrum-icon-tshirt-size-width:var(
153
+ --spectrum-alias-workflow-icon-size-m
154
+ );--spectrum-ui-icon-tshirt-size-height:var(
155
+ --spectrum-alias-ui-icon-cornertriangle-size-100
156
+ );--spectrum-ui-icon-tshirt-size-width:var(
157
+ --spectrum-alias-ui-icon-cornertriangle-size-100
158
+ )}:host([size=l]){--spectrum-icon-tshirt-size-height:var(
159
+ --spectrum-alias-workflow-icon-size-l
160
+ );--spectrum-icon-tshirt-size-width:var(
161
+ --spectrum-alias-workflow-icon-size-l
162
+ );--spectrum-ui-icon-tshirt-size-height:var(
163
+ --spectrum-alias-ui-icon-cornertriangle-size-200
164
+ );--spectrum-ui-icon-tshirt-size-width:var(
165
+ --spectrum-alias-ui-icon-cornertriangle-size-200
166
+ )}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(
167
+ --spectrum-alias-workflow-icon-size-xl
168
+ );--spectrum-icon-tshirt-size-width:var(
169
+ --spectrum-alias-workflow-icon-size-xl
170
+ );--spectrum-ui-icon-tshirt-size-height:var(
171
+ --spectrum-alias-ui-icon-cornertriangle-size-300
172
+ );--spectrum-ui-icon-tshirt-size-width:var(
173
+ --spectrum-alias-ui-icon-cornertriangle-size-300
174
+ )}
143
175
  `;export default e;
144
176
  //# sourceMappingURL=search.css.js.map
package/src/search.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["search.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-search-inline-size:var(--spectrum-field-width);--spectrum-search-block-size:var(--spectrum-component-height-100);--spectrum-search-button-inline-size:var(--spectrum-search-block-size);--spectrum-search-min-inline-size:calc(var(--spectrum-search-field-minimum-width-multiplier)*var(--spectrum-search-block-size));--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-search-to-help-text:var(--spectrum-help-text-to-component);--spectrum-search-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-search-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-search-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-search-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-search-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-search-font-family:var(--spectrum-sans-font-family-stack);--spectrum-search-font-weight:var(--spectrum-regular-font-weight);--spectrum-search-font-style:var(--spectrum-default-font-style);--spectrum-search-line-height:var(--spectrum-line-height-100);--spectrum-search-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-search-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-search-color-focus:var(--spectrum-neutral-content-color-focus);--spectrum-search-color-focus-hover:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-search-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-search-border-width:var(--spectrum-border-width-100);--spectrum-search-background-color:var(--spectrum-gray-50);--spectrum-search-color-disabled:var(--spectrum-disabled-content-color);--spectrum-search-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-background-color\n);--mod-textfield-font-family:var(\n--mod-search-font-family,var(--spectrum-search-font-family)\n);--mod-textfield-font-weight:var(\n--mod-search-font-weight,var(--spectrum-search-font-weight)\n);--mod-textfield-corner-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);--mod-textfield-border-width:var(\n--mod-search-border-width,var(--spectrum-search-border-width)\n);--mod-textfield-focus-indicator-gap:var(\n--mod-search-focus-indicator-gap,var(--spectrum-search-focus-indicator-gap)\n);--mod-textfield-focus-indicator-width:var(\n--mod-search-focus-indicator-thickness,var(--spectrum-search-focus-indicator-thickness)\n);--mod-textfield-focus-indicator-color:var(\n--mod-search-focus-indicator-color,var(--spectrum-search-focus-indicator-color)\n);--mod-textfield-text-color-default:var(\n--mod-search-color-default,var(--spectrum-search-color-default)\n);--mod-textfield-text-color-hover:var(\n--mod-search-color-hover,var(--spectrum-search-color-hover)\n);--mod-textfield-text-color-focus:var(\n--mod-search-color-focus,var(--spectrum-search-color-focus)\n);--mod-textfield-text-color-focus-hover:var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n);--mod-textfield-text-color-keyboard-focus:var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n);--mod-textfield-text-color-disabled:var(\n--mod-search-color-disabled,var(--spectrum-search-color-disabled)\n);--mod-textfield-border-color:var(\n--mod-search-border-color-default,var(--spectrum-search-border-color-default)\n);--mod-textfield-border-color-hover:var(\n--mod-search-border-color-hover,var(--spectrum-search-border-color-hover)\n);--mod-textfield-border-color-focus:var(\n--mod-search-border-color-focus,var(--spectrum-search-border-color-focus)\n);--mod-textfield-border-color-focus-hover:var(\n--mod-search-border-color-focus-hover,var(--spectrum-search-border-color-focus-hover)\n);--mod-textfield-border-color-keyboard-focus:var(\n--mod-search-border-color-key-focus,var(--spectrum-search-border-color-key-focus)\n);--mod-textfield-border-color-disabled:var(\n--mod-search-border-color-disabled,var(--spectrum-search-border-color-disabled)\n);--mod-textfield-background-color:var(\n--mod-search-background-color,var(--spectrum-search-background-color)\n);--mod-textfield-background-color-disabled:var(\n--mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)\n)}.spectrum-Search--sizeS{--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}.spectrum-Search--sizeL{--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}.spectrum-Search--sizeXL{--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(\n--mod-workflow-icon-size-100,\nvar(--spectrum-workflow-icon-size-100)\n)/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-border-color\n)}:host([quiet]) #textfield{--spectrum-search-border-radius:0;--spectrum-search-edge-to-visual:var(\n--spectrum-field-edge-to-visual-quiet\n)}@media (forced-colors:active){#textfield #textfield,#textfield #textfield .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#textfield #button .spectrum-ClearButton-fill{background-color:#0000;forced-color-adjust:none}}#textfield{display:inline-block;inline-size:var(\n--mod-search-inline-size,var(--spectrum-search-inline-size)\n);min-inline-size:var(\n--mod-search-min-inline-size,var(--spectrum-search-min-inline-size)\n);position:relative}#textfield .spectrum-HelpText{margin-block-start:var(\n--mod-search-to-help-text,var(--spectrum-search-to-help-text)\n)}#button{inset-block-start:0;inset-inline-end:0;position:absolute}#button,#button .spectrum-ClearButton-fill{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n)}#textfield.is-disabled #button{display:none}#textfield{inline-size:100%}.icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-default,var(--mod-search-color-default,var(--spectrum-search-color-default))\n);color:var(--spectrum-search-color);display:block;inset-block:0;margin-block:auto;position:absolute}#textfield:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-hover,var(--mod-search-color-hover,var(--spectrum-search-color-hover))\n)}#textfield.is-focused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(--mod-search-color-focus,var(--spectrum-search-color-focus))\n)}#textfield.is-focused:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n)\n)}#textfield.is-keyboardFocused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n)\n)}#textfield.is-disabled .icon-search,#textfield.is-disabled:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-disabled,var(--mod-search-color-disabled,var(--spectrum-search-color-disabled))\n)}.input{-webkit-appearance:none;block-size:var(--mod-search-block-size,var(--spectrum-search-block-size));font-style:var(--mod-search-font-style,var(--spectrum-search-font-style));line-height:var(\n--mod-search-line-height,var(--spectrum-search-line-height)\n);padding-block-end:calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-block-start:calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none}:host(:not([quiet])) #textfield .icon-search{inset-inline-start:var(\n--mod-search-edge-to-visual,var(--spectrum-search-edge-to-visual)\n)}:host(:not([quiet])) #textfield .input{padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host([quiet]) #button{transform:translateX(var(\n--mod-search-quiet-button-offset,var(--spectrum-search-quiet-button-offset)\n))}:host([quiet]) #textfield .input{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);padding-block-start:var(\n--mod-search-top-to-text,var(--spectrum-search-top-to-text)\n);padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(\n--mod-search-quiet-button-offset,\nvar(--spectrum-search-quiet-button-offset)\n));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host{--spectrum-search-border-radius:var(\n--system-spectrum-search-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-edge-to-visual\n);--spectrum-search-border-color-default:var(\n--system-spectrum-search-border-color-default\n);--spectrum-search-border-color-hover:var(\n--system-spectrum-search-border-color-hover\n);--spectrum-search-border-color-focus:var(\n--system-spectrum-search-border-color-focus\n);--spectrum-search-border-color-focus-hover:var(\n--system-spectrum-search-border-color-focus-hover\n);--spectrum-search-border-color-key-focus:var(\n--system-spectrum-search-border-color-key-focus\n)}.spectrum-Search--sizeS{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizes-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizes-edge-to-visual\n)}.spectrum-Search--sizeM{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizem-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizem-edge-to-visual\n)}.spectrum-Search--sizeL{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizel-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizel-edge-to-visual\n)}.spectrum-Search--sizeXL{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizexl-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizexl-edge-to-visual\n)}:host{--mod-textfield-spacing-inline:var(\n--spectrum-alias-infieldbutton-full-height-m\n)}input::-webkit-search-cancel-button{display:none}\n`;\nexport default styles;"],
5
- "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+If,eAAeC",
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-search-inline-size:var(--spectrum-field-width);--spectrum-search-block-size:var(--spectrum-component-height-100);--spectrum-search-button-inline-size:var(--spectrum-search-block-size);--spectrum-search-min-inline-size:calc(var(--spectrum-search-field-minimum-width-multiplier)*var(--spectrum-search-block-size));--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-search-to-help-text:var(--spectrum-help-text-to-component);--spectrum-search-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-search-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-search-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-search-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-search-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-search-font-family:var(--spectrum-sans-font-family-stack);--spectrum-search-font-weight:var(--spectrum-regular-font-weight);--spectrum-search-font-style:var(--spectrum-default-font-style);--spectrum-search-line-height:var(--spectrum-line-height-100);--spectrum-search-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-search-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-search-color-focus:var(--spectrum-neutral-content-color-focus);--spectrum-search-color-focus-hover:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-search-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-search-border-width:var(--spectrum-border-width-100);--spectrum-search-background-color:var(--spectrum-gray-50);--spectrum-search-color-disabled:var(--spectrum-disabled-content-color);--spectrum-search-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-background-color\n);--mod-textfield-font-family:var(\n--mod-search-font-family,var(--spectrum-search-font-family)\n);--mod-textfield-font-weight:var(\n--mod-search-font-weight,var(--spectrum-search-font-weight)\n);--mod-textfield-corner-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);--mod-textfield-border-width:var(\n--mod-search-border-width,var(--spectrum-search-border-width)\n);--mod-textfield-focus-indicator-gap:var(\n--mod-search-focus-indicator-gap,var(--spectrum-search-focus-indicator-gap)\n);--mod-textfield-focus-indicator-width:var(\n--mod-search-focus-indicator-thickness,var(--spectrum-search-focus-indicator-thickness)\n);--mod-textfield-focus-indicator-color:var(\n--mod-search-focus-indicator-color,var(--spectrum-search-focus-indicator-color)\n);--mod-textfield-text-color-default:var(\n--mod-search-color-default,var(--spectrum-search-color-default)\n);--mod-textfield-text-color-hover:var(\n--mod-search-color-hover,var(--spectrum-search-color-hover)\n);--mod-textfield-text-color-focus:var(\n--mod-search-color-focus,var(--spectrum-search-color-focus)\n);--mod-textfield-text-color-focus-hover:var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n);--mod-textfield-text-color-keyboard-focus:var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n);--mod-textfield-text-color-disabled:var(\n--mod-search-color-disabled,var(--spectrum-search-color-disabled)\n);--mod-textfield-border-color:var(\n--mod-search-border-color-default,var(--spectrum-search-border-color-default)\n);--mod-textfield-border-color-hover:var(\n--mod-search-border-color-hover,var(--spectrum-search-border-color-hover)\n);--mod-textfield-border-color-focus:var(\n--mod-search-border-color-focus,var(--spectrum-search-border-color-focus)\n);--mod-textfield-border-color-focus-hover:var(\n--mod-search-border-color-focus-hover,var(--spectrum-search-border-color-focus-hover)\n);--mod-textfield-border-color-keyboard-focus:var(\n--mod-search-border-color-key-focus,var(--spectrum-search-border-color-key-focus)\n);--mod-textfield-border-color-disabled:var(\n--mod-search-border-color-disabled,var(--spectrum-search-border-color-disabled)\n);--mod-textfield-background-color:var(\n--mod-search-background-color,var(--spectrum-search-background-color)\n);--mod-textfield-background-color-disabled:var(\n--mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)\n)}:host([size=s]){--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}:host([size=l]){--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}:host([size=xl]){--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(\n--mod-workflow-icon-size-100,\nvar(--spectrum-workflow-icon-size-100)\n)/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-border-color\n)}:host([quiet]) #textfield{--spectrum-search-border-radius:0;--spectrum-search-edge-to-visual:var(\n--spectrum-field-edge-to-visual-quiet\n)}@media (forced-colors:active){#textfield #textfield,#textfield #textfield .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#textfield #button .spectrum-ClearButton-fill{background-color:#0000;forced-color-adjust:none}}#textfield{display:inline-block;inline-size:var(\n--mod-search-inline-size,var(--spectrum-search-inline-size)\n);min-inline-size:var(\n--mod-search-min-inline-size,var(--spectrum-search-min-inline-size)\n);position:relative}#textfield .spectrum-HelpText{margin-block-start:var(\n--mod-search-to-help-text,var(--spectrum-search-to-help-text)\n)}#button{inset-block-start:0;inset-inline-end:0;position:absolute}#button,#button .spectrum-ClearButton-fill{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n)}#textfield.is-disabled #button{display:none}#textfield{inline-size:100%}.icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-default,var(--mod-search-color-default,var(--spectrum-search-color-default))\n);color:var(--spectrum-search-color);display:block;inset-block:0;margin-block:auto;position:absolute}#textfield:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-hover,var(--mod-search-color-hover,var(--spectrum-search-color-hover))\n)}#textfield.is-focused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(--mod-search-color-focus,var(--spectrum-search-color-focus))\n)}#textfield.is-focused:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n)\n)}#textfield.is-keyboardFocused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n)\n)}#textfield.is-disabled .icon-search,#textfield.is-disabled:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-disabled,var(--mod-search-color-disabled,var(--spectrum-search-color-disabled))\n)}.input{-webkit-appearance:none;block-size:var(--mod-search-block-size,var(--spectrum-search-block-size));font-style:var(--mod-search-font-style,var(--spectrum-search-font-style));line-height:var(\n--mod-search-line-height,var(--spectrum-search-line-height)\n);padding-block-end:calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-block-start:calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none}:host(:not([quiet])) #textfield .icon-search{inset-inline-start:var(\n--mod-search-edge-to-visual,var(--spectrum-search-edge-to-visual)\n)}:host(:not([quiet])) #textfield .input{padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host([quiet]) #button{transform:translateX(var(\n--mod-search-quiet-button-offset,var(--spectrum-search-quiet-button-offset)\n))}:host([quiet]) #textfield .input{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);padding-block-start:var(\n--mod-search-top-to-text,var(--spectrum-search-top-to-text)\n);padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(\n--mod-search-quiet-button-offset,\nvar(--spectrum-search-quiet-button-offset)\n));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host{--spectrum-search-border-radius:var(\n--system-spectrum-search-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-edge-to-visual\n);--spectrum-search-border-color-default:var(\n--system-spectrum-search-border-color-default\n);--spectrum-search-border-color-hover:var(\n--system-spectrum-search-border-color-hover\n);--spectrum-search-border-color-focus:var(\n--system-spectrum-search-border-color-focus\n);--spectrum-search-border-color-focus-hover:var(\n--system-spectrum-search-border-color-focus-hover\n);--spectrum-search-border-color-key-focus:var(\n--system-spectrum-search-border-color-key-focus\n)}:host([size=s]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizes-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizes-edge-to-visual\n)}:host([size=m]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizem-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizem-edge-to-visual\n)}:host([size=l]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizel-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizel-edge-to-visual\n)}:host([size=xl]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizexl-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizexl-edge-to-visual\n)}:host{--mod-textfield-spacing-inline:var(\n--spectrum-alias-infieldbutton-full-height-m\n)}input::-webkit-search-cancel-button{display:none}:host([size=s]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-s\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-75\n)}:host([size=m]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-m\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-100\n)}:host([size=l]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-l\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-200\n)}:host([size=xl]){--spectrum-icon-tshirt-size-height:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-icon-tshirt-size-width:var(\n--spectrum-alias-workflow-icon-size-xl\n);--spectrum-ui-icon-tshirt-size-height:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n);--spectrum-ui-icon-tshirt-size-width:var(\n--spectrum-alias-ui-icon-cornertriangle-size-300\n)}\n`;\nexport default styles;"],
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+Kf,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/src/spectrum-config.js CHANGED
@@ -36,6 +36,15 @@ const config = {
36
36
  converter.classToAttribute('spectrum-Search--quiet', 'quiet'),
37
37
  converter.classToId('spectrum-Search-clearButton', 'button'),
38
38
  converter.classToId('spectrum-Search-textfield', 'textfield'),
39
+ ...converter.enumerateAttributes(
40
+ [
41
+ ['spectrum-Search--sizeS', 's'],
42
+ ['spectrum-Search--sizeM', 'm'],
43
+ ['spectrum-Search--sizeL', 'l'],
44
+ ['spectrum-Search--sizeXL', 'xl'],
45
+ ],
46
+ 'size'
47
+ ),
39
48
  {
40
49
  find: {
41
50
  type: 'pseudo-class',
package/src/spectrum-search.css.dev.js CHANGED
@@ -59,7 +59,7 @@ const styles = css`
59
59
  --mod-search-background-color,var(--spectrum-search-background-color)
60
60
  );--mod-textfield-background-color-disabled:var(
61
61
  --mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)
62
- )}.spectrum-Search--sizeS{--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}.spectrum-Search--sizeL{--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}.spectrum-Search--sizeXL{--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(
62
+ )}:host([size=s]){--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}:host([size=l]){--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}:host([size=xl]){--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(
63
63
  --mod-workflow-icon-size-100,
64
64
  var(--spectrum-workflow-icon-size-100)
65
65
  )/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(
@@ -123,19 +123,19 @@ var(--spectrum-search-quiet-button-offset)
123
123
  --system-spectrum-search-border-color-focus-hover
124
124
  );--spectrum-search-border-color-key-focus:var(
125
125
  --system-spectrum-search-border-color-key-focus
126
- )}.spectrum-Search--sizeS{--spectrum-search-border-radius:var(
126
+ )}:host([size=s]){--spectrum-search-border-radius:var(
127
127
  --system-spectrum-search-sizes-border-radius
128
128
  );--spectrum-search-edge-to-visual:var(
129
129
  --system-spectrum-search-sizes-edge-to-visual
130
- )}.spectrum-Search--sizeM{--spectrum-search-border-radius:var(
130
+ )}:host([size=m]){--spectrum-search-border-radius:var(
131
131
  --system-spectrum-search-sizem-border-radius
132
132
  );--spectrum-search-edge-to-visual:var(
133
133
  --system-spectrum-search-sizem-edge-to-visual
134
- )}.spectrum-Search--sizeL{--spectrum-search-border-radius:var(
134
+ )}:host([size=l]){--spectrum-search-border-radius:var(
135
135
  --system-spectrum-search-sizel-border-radius
136
136
  );--spectrum-search-edge-to-visual:var(
137
137
  --system-spectrum-search-sizel-edge-to-visual
138
- )}.spectrum-Search--sizeXL{--spectrum-search-border-radius:var(
138
+ )}:host([size=xl]){--spectrum-search-border-radius:var(
139
139
  --system-spectrum-search-sizexl-border-radius
140
140
  );--spectrum-search-edge-to-visual:var(
141
141
  --system-spectrum-search-sizexl-edge-to-visual
package/src/spectrum-search.css.dev.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-search.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-search-inline-size:var(--spectrum-field-width);--spectrum-search-block-size:var(--spectrum-component-height-100);--spectrum-search-button-inline-size:var(--spectrum-search-block-size);--spectrum-search-min-inline-size:calc(var(--spectrum-search-field-minimum-width-multiplier)*var(--spectrum-search-block-size));--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-search-to-help-text:var(--spectrum-help-text-to-component);--spectrum-search-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-search-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-search-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-search-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-search-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-search-font-family:var(--spectrum-sans-font-family-stack);--spectrum-search-font-weight:var(--spectrum-regular-font-weight);--spectrum-search-font-style:var(--spectrum-default-font-style);--spectrum-search-line-height:var(--spectrum-line-height-100);--spectrum-search-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-search-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-search-color-focus:var(--spectrum-neutral-content-color-focus);--spectrum-search-color-focus-hover:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-search-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-search-border-width:var(--spectrum-border-width-100);--spectrum-search-background-color:var(--spectrum-gray-50);--spectrum-search-color-disabled:var(--spectrum-disabled-content-color);--spectrum-search-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-background-color\n);--mod-textfield-font-family:var(\n--mod-search-font-family,var(--spectrum-search-font-family)\n);--mod-textfield-font-weight:var(\n--mod-search-font-weight,var(--spectrum-search-font-weight)\n);--mod-textfield-corner-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);--mod-textfield-border-width:var(\n--mod-search-border-width,var(--spectrum-search-border-width)\n);--mod-textfield-focus-indicator-gap:var(\n--mod-search-focus-indicator-gap,var(--spectrum-search-focus-indicator-gap)\n);--mod-textfield-focus-indicator-width:var(\n--mod-search-focus-indicator-thickness,var(--spectrum-search-focus-indicator-thickness)\n);--mod-textfield-focus-indicator-color:var(\n--mod-search-focus-indicator-color,var(--spectrum-search-focus-indicator-color)\n);--mod-textfield-text-color-default:var(\n--mod-search-color-default,var(--spectrum-search-color-default)\n);--mod-textfield-text-color-hover:var(\n--mod-search-color-hover,var(--spectrum-search-color-hover)\n);--mod-textfield-text-color-focus:var(\n--mod-search-color-focus,var(--spectrum-search-color-focus)\n);--mod-textfield-text-color-focus-hover:var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n);--mod-textfield-text-color-keyboard-focus:var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n);--mod-textfield-text-color-disabled:var(\n--mod-search-color-disabled,var(--spectrum-search-color-disabled)\n);--mod-textfield-border-color:var(\n--mod-search-border-color-default,var(--spectrum-search-border-color-default)\n);--mod-textfield-border-color-hover:var(\n--mod-search-border-color-hover,var(--spectrum-search-border-color-hover)\n);--mod-textfield-border-color-focus:var(\n--mod-search-border-color-focus,var(--spectrum-search-border-color-focus)\n);--mod-textfield-border-color-focus-hover:var(\n--mod-search-border-color-focus-hover,var(--spectrum-search-border-color-focus-hover)\n);--mod-textfield-border-color-keyboard-focus:var(\n--mod-search-border-color-key-focus,var(--spectrum-search-border-color-key-focus)\n);--mod-textfield-border-color-disabled:var(\n--mod-search-border-color-disabled,var(--spectrum-search-border-color-disabled)\n);--mod-textfield-background-color:var(\n--mod-search-background-color,var(--spectrum-search-background-color)\n);--mod-textfield-background-color-disabled:var(\n--mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)\n)}.spectrum-Search--sizeS{--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}.spectrum-Search--sizeL{--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}.spectrum-Search--sizeXL{--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(\n--mod-workflow-icon-size-100,\nvar(--spectrum-workflow-icon-size-100)\n)/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-border-color\n)}:host([quiet]) #textfield{--spectrum-search-border-radius:0;--spectrum-search-edge-to-visual:var(\n--spectrum-field-edge-to-visual-quiet\n)}@media (forced-colors:active){#textfield #textfield,#textfield #textfield .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#textfield #button .spectrum-ClearButton-fill{background-color:#0000;forced-color-adjust:none}}#textfield{display:inline-block;inline-size:var(\n--mod-search-inline-size,var(--spectrum-search-inline-size)\n);min-inline-size:var(\n--mod-search-min-inline-size,var(--spectrum-search-min-inline-size)\n);position:relative}#textfield .spectrum-HelpText{margin-block-start:var(\n--mod-search-to-help-text,var(--spectrum-search-to-help-text)\n)}#button{inset-block-start:0;inset-inline-end:0;position:absolute}#button,#button .spectrum-ClearButton-fill{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n)}#textfield.is-disabled #button{display:none}#textfield{inline-size:100%}.icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-default,var(--mod-search-color-default,var(--spectrum-search-color-default))\n);color:var(--spectrum-search-color);display:block;inset-block:0;margin-block:auto;position:absolute}#textfield:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-hover,var(--mod-search-color-hover,var(--spectrum-search-color-hover))\n)}#textfield.is-focused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(--mod-search-color-focus,var(--spectrum-search-color-focus))\n)}#textfield.is-focused:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n)\n)}#textfield.is-keyboardFocused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n)\n)}#textfield.is-disabled .icon-search,#textfield.is-disabled:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-disabled,var(--mod-search-color-disabled,var(--spectrum-search-color-disabled))\n)}.input{-webkit-appearance:none;block-size:var(--mod-search-block-size,var(--spectrum-search-block-size));font-style:var(--mod-search-font-style,var(--spectrum-search-font-style));line-height:var(\n--mod-search-line-height,var(--spectrum-search-line-height)\n);padding-block-end:calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-block-start:calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none}:host(:not([quiet])) #textfield .icon-search{inset-inline-start:var(\n--mod-search-edge-to-visual,var(--spectrum-search-edge-to-visual)\n)}:host(:not([quiet])) #textfield .input{padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host([quiet]) #button{transform:translateX(var(\n--mod-search-quiet-button-offset,var(--spectrum-search-quiet-button-offset)\n))}:host([quiet]) #textfield .input{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);padding-block-start:var(\n--mod-search-top-to-text,var(--spectrum-search-top-to-text)\n);padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(\n--mod-search-quiet-button-offset,\nvar(--spectrum-search-quiet-button-offset)\n));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host{--spectrum-search-border-radius:var(\n--system-spectrum-search-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-edge-to-visual\n);--spectrum-search-border-color-default:var(\n--system-spectrum-search-border-color-default\n);--spectrum-search-border-color-hover:var(\n--system-spectrum-search-border-color-hover\n);--spectrum-search-border-color-focus:var(\n--system-spectrum-search-border-color-focus\n);--spectrum-search-border-color-focus-hover:var(\n--system-spectrum-search-border-color-focus-hover\n);--spectrum-search-border-color-key-focus:var(\n--system-spectrum-search-border-color-key-focus\n)}.spectrum-Search--sizeS{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizes-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizes-edge-to-visual\n)}.spectrum-Search--sizeM{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizem-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizem-edge-to-visual\n)}.spectrum-Search--sizeL{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizel-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizel-edge-to-visual\n)}.spectrum-Search--sizeXL{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizexl-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizexl-edge-to-visual\n)}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-search-inline-size:var(--spectrum-field-width);--spectrum-search-block-size:var(--spectrum-component-height-100);--spectrum-search-button-inline-size:var(--spectrum-search-block-size);--spectrum-search-min-inline-size:calc(var(--spectrum-search-field-minimum-width-multiplier)*var(--spectrum-search-block-size));--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-search-to-help-text:var(--spectrum-help-text-to-component);--spectrum-search-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-search-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-search-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-search-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-search-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-search-font-family:var(--spectrum-sans-font-family-stack);--spectrum-search-font-weight:var(--spectrum-regular-font-weight);--spectrum-search-font-style:var(--spectrum-default-font-style);--spectrum-search-line-height:var(--spectrum-line-height-100);--spectrum-search-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-search-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-search-color-focus:var(--spectrum-neutral-content-color-focus);--spectrum-search-color-focus-hover:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-search-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-search-border-width:var(--spectrum-border-width-100);--spectrum-search-background-color:var(--spectrum-gray-50);--spectrum-search-color-disabled:var(--spectrum-disabled-content-color);--spectrum-search-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-background-color\n);--mod-textfield-font-family:var(\n--mod-search-font-family,var(--spectrum-search-font-family)\n);--mod-textfield-font-weight:var(\n--mod-search-font-weight,var(--spectrum-search-font-weight)\n);--mod-textfield-corner-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);--mod-textfield-border-width:var(\n--mod-search-border-width,var(--spectrum-search-border-width)\n);--mod-textfield-focus-indicator-gap:var(\n--mod-search-focus-indicator-gap,var(--spectrum-search-focus-indicator-gap)\n);--mod-textfield-focus-indicator-width:var(\n--mod-search-focus-indicator-thickness,var(--spectrum-search-focus-indicator-thickness)\n);--mod-textfield-focus-indicator-color:var(\n--mod-search-focus-indicator-color,var(--spectrum-search-focus-indicator-color)\n);--mod-textfield-text-color-default:var(\n--mod-search-color-default,var(--spectrum-search-color-default)\n);--mod-textfield-text-color-hover:var(\n--mod-search-color-hover,var(--spectrum-search-color-hover)\n);--mod-textfield-text-color-focus:var(\n--mod-search-color-focus,var(--spectrum-search-color-focus)\n);--mod-textfield-text-color-focus-hover:var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n);--mod-textfield-text-color-keyboard-focus:var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n);--mod-textfield-text-color-disabled:var(\n--mod-search-color-disabled,var(--spectrum-search-color-disabled)\n);--mod-textfield-border-color:var(\n--mod-search-border-color-default,var(--spectrum-search-border-color-default)\n);--mod-textfield-border-color-hover:var(\n--mod-search-border-color-hover,var(--spectrum-search-border-color-hover)\n);--mod-textfield-border-color-focus:var(\n--mod-search-border-color-focus,var(--spectrum-search-border-color-focus)\n);--mod-textfield-border-color-focus-hover:var(\n--mod-search-border-color-focus-hover,var(--spectrum-search-border-color-focus-hover)\n);--mod-textfield-border-color-keyboard-focus:var(\n--mod-search-border-color-key-focus,var(--spectrum-search-border-color-key-focus)\n);--mod-textfield-border-color-disabled:var(\n--mod-search-border-color-disabled,var(--spectrum-search-border-color-disabled)\n);--mod-textfield-background-color:var(\n--mod-search-background-color,var(--spectrum-search-background-color)\n);--mod-textfield-background-color-disabled:var(\n--mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)\n)}:host([size=s]){--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}:host([size=l]){--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}:host([size=xl]){--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(\n--mod-workflow-icon-size-100,\nvar(--spectrum-workflow-icon-size-100)\n)/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-border-color\n)}:host([quiet]) #textfield{--spectrum-search-border-radius:0;--spectrum-search-edge-to-visual:var(\n--spectrum-field-edge-to-visual-quiet\n)}@media (forced-colors:active){#textfield #textfield,#textfield #textfield .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#textfield #button .spectrum-ClearButton-fill{background-color:#0000;forced-color-adjust:none}}#textfield{display:inline-block;inline-size:var(\n--mod-search-inline-size,var(--spectrum-search-inline-size)\n);min-inline-size:var(\n--mod-search-min-inline-size,var(--spectrum-search-min-inline-size)\n);position:relative}#textfield .spectrum-HelpText{margin-block-start:var(\n--mod-search-to-help-text,var(--spectrum-search-to-help-text)\n)}#button{inset-block-start:0;inset-inline-end:0;position:absolute}#button,#button .spectrum-ClearButton-fill{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n)}#textfield.is-disabled #button{display:none}#textfield{inline-size:100%}.icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-default,var(--mod-search-color-default,var(--spectrum-search-color-default))\n);color:var(--spectrum-search-color);display:block;inset-block:0;margin-block:auto;position:absolute}#textfield:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-hover,var(--mod-search-color-hover,var(--spectrum-search-color-hover))\n)}#textfield.is-focused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(--mod-search-color-focus,var(--spectrum-search-color-focus))\n)}#textfield.is-focused:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n)\n)}#textfield.is-keyboardFocused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n)\n)}#textfield.is-disabled .icon-search,#textfield.is-disabled:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-disabled,var(--mod-search-color-disabled,var(--spectrum-search-color-disabled))\n)}.input{-webkit-appearance:none;block-size:var(--mod-search-block-size,var(--spectrum-search-block-size));font-style:var(--mod-search-font-style,var(--spectrum-search-font-style));line-height:var(\n--mod-search-line-height,var(--spectrum-search-line-height)\n);padding-block-end:calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-block-start:calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none}:host(:not([quiet])) #textfield .icon-search{inset-inline-start:var(\n--mod-search-edge-to-visual,var(--spectrum-search-edge-to-visual)\n)}:host(:not([quiet])) #textfield .input{padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host([quiet]) #button{transform:translateX(var(\n--mod-search-quiet-button-offset,var(--spectrum-search-quiet-button-offset)\n))}:host([quiet]) #textfield .input{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);padding-block-start:var(\n--mod-search-top-to-text,var(--spectrum-search-top-to-text)\n);padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(\n--mod-search-quiet-button-offset,\nvar(--spectrum-search-quiet-button-offset)\n));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host{--spectrum-search-border-radius:var(\n--system-spectrum-search-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-edge-to-visual\n);--spectrum-search-border-color-default:var(\n--system-spectrum-search-border-color-default\n);--spectrum-search-border-color-hover:var(\n--system-spectrum-search-border-color-hover\n);--spectrum-search-border-color-focus:var(\n--system-spectrum-search-border-color-focus\n);--spectrum-search-border-color-focus-hover:var(\n--system-spectrum-search-border-color-focus-hover\n);--spectrum-search-border-color-key-focus:var(\n--system-spectrum-search-border-color-key-focus\n)}:host([size=s]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizes-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizes-edge-to-visual\n)}:host([size=m]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizem-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizem-edge-to-visual\n)}:host([size=l]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizel-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizel-edge-to-visual\n)}:host([size=xl]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizexl-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizexl-edge-to-visual\n)}\n`;\nexport default styles;"],
5
5
  "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6If,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-search.css.js CHANGED
@@ -57,7 +57,7 @@
57
57
  --mod-search-background-color,var(--spectrum-search-background-color)
58
58
  );--mod-textfield-background-color-disabled:var(
59
59
  --mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)
60
- )}.spectrum-Search--sizeS{--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}.spectrum-Search--sizeL{--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}.spectrum-Search--sizeXL{--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(
60
+ )}:host([size=s]){--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}:host([size=l]){--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}:host([size=xl]){--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(
61
61
  --mod-workflow-icon-size-100,
62
62
  var(--spectrum-workflow-icon-size-100)
63
63
  )/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(
@@ -121,19 +121,19 @@ var(--spectrum-search-quiet-button-offset)
121
121
  --system-spectrum-search-border-color-focus-hover
122
122
  );--spectrum-search-border-color-key-focus:var(
123
123
  --system-spectrum-search-border-color-key-focus
124
- )}.spectrum-Search--sizeS{--spectrum-search-border-radius:var(
124
+ )}:host([size=s]){--spectrum-search-border-radius:var(
125
125
  --system-spectrum-search-sizes-border-radius
126
126
  );--spectrum-search-edge-to-visual:var(
127
127
  --system-spectrum-search-sizes-edge-to-visual
128
- )}.spectrum-Search--sizeM{--spectrum-search-border-radius:var(
128
+ )}:host([size=m]){--spectrum-search-border-radius:var(
129
129
  --system-spectrum-search-sizem-border-radius
130
130
  );--spectrum-search-edge-to-visual:var(
131
131
  --system-spectrum-search-sizem-edge-to-visual
132
- )}.spectrum-Search--sizeL{--spectrum-search-border-radius:var(
132
+ )}:host([size=l]){--spectrum-search-border-radius:var(
133
133
  --system-spectrum-search-sizel-border-radius
134
134
  );--spectrum-search-edge-to-visual:var(
135
135
  --system-spectrum-search-sizel-edge-to-visual
136
- )}.spectrum-Search--sizeXL{--spectrum-search-border-radius:var(
136
+ )}:host([size=xl]){--spectrum-search-border-radius:var(
137
137
  --system-spectrum-search-sizexl-border-radius
138
138
  );--spectrum-search-edge-to-visual:var(
139
139
  --system-spectrum-search-sizexl-edge-to-visual
package/src/spectrum-search.css.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["spectrum-search.css.ts"],
4
- "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-search-inline-size:var(--spectrum-field-width);--spectrum-search-block-size:var(--spectrum-component-height-100);--spectrum-search-button-inline-size:var(--spectrum-search-block-size);--spectrum-search-min-inline-size:calc(var(--spectrum-search-field-minimum-width-multiplier)*var(--spectrum-search-block-size));--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-search-to-help-text:var(--spectrum-help-text-to-component);--spectrum-search-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-search-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-search-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-search-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-search-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-search-font-family:var(--spectrum-sans-font-family-stack);--spectrum-search-font-weight:var(--spectrum-regular-font-weight);--spectrum-search-font-style:var(--spectrum-default-font-style);--spectrum-search-line-height:var(--spectrum-line-height-100);--spectrum-search-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-search-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-search-color-focus:var(--spectrum-neutral-content-color-focus);--spectrum-search-color-focus-hover:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-search-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-search-border-width:var(--spectrum-border-width-100);--spectrum-search-background-color:var(--spectrum-gray-50);--spectrum-search-color-disabled:var(--spectrum-disabled-content-color);--spectrum-search-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-background-color\n);--mod-textfield-font-family:var(\n--mod-search-font-family,var(--spectrum-search-font-family)\n);--mod-textfield-font-weight:var(\n--mod-search-font-weight,var(--spectrum-search-font-weight)\n);--mod-textfield-corner-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);--mod-textfield-border-width:var(\n--mod-search-border-width,var(--spectrum-search-border-width)\n);--mod-textfield-focus-indicator-gap:var(\n--mod-search-focus-indicator-gap,var(--spectrum-search-focus-indicator-gap)\n);--mod-textfield-focus-indicator-width:var(\n--mod-search-focus-indicator-thickness,var(--spectrum-search-focus-indicator-thickness)\n);--mod-textfield-focus-indicator-color:var(\n--mod-search-focus-indicator-color,var(--spectrum-search-focus-indicator-color)\n);--mod-textfield-text-color-default:var(\n--mod-search-color-default,var(--spectrum-search-color-default)\n);--mod-textfield-text-color-hover:var(\n--mod-search-color-hover,var(--spectrum-search-color-hover)\n);--mod-textfield-text-color-focus:var(\n--mod-search-color-focus,var(--spectrum-search-color-focus)\n);--mod-textfield-text-color-focus-hover:var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n);--mod-textfield-text-color-keyboard-focus:var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n);--mod-textfield-text-color-disabled:var(\n--mod-search-color-disabled,var(--spectrum-search-color-disabled)\n);--mod-textfield-border-color:var(\n--mod-search-border-color-default,var(--spectrum-search-border-color-default)\n);--mod-textfield-border-color-hover:var(\n--mod-search-border-color-hover,var(--spectrum-search-border-color-hover)\n);--mod-textfield-border-color-focus:var(\n--mod-search-border-color-focus,var(--spectrum-search-border-color-focus)\n);--mod-textfield-border-color-focus-hover:var(\n--mod-search-border-color-focus-hover,var(--spectrum-search-border-color-focus-hover)\n);--mod-textfield-border-color-keyboard-focus:var(\n--mod-search-border-color-key-focus,var(--spectrum-search-border-color-key-focus)\n);--mod-textfield-border-color-disabled:var(\n--mod-search-border-color-disabled,var(--spectrum-search-border-color-disabled)\n);--mod-textfield-background-color:var(\n--mod-search-background-color,var(--spectrum-search-background-color)\n);--mod-textfield-background-color-disabled:var(\n--mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)\n)}.spectrum-Search--sizeS{--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}.spectrum-Search--sizeL{--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}.spectrum-Search--sizeXL{--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(\n--mod-workflow-icon-size-100,\nvar(--spectrum-workflow-icon-size-100)\n)/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-border-color\n)}:host([quiet]) #textfield{--spectrum-search-border-radius:0;--spectrum-search-edge-to-visual:var(\n--spectrum-field-edge-to-visual-quiet\n)}@media (forced-colors:active){#textfield #textfield,#textfield #textfield .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#textfield #button .spectrum-ClearButton-fill{background-color:#0000;forced-color-adjust:none}}#textfield{display:inline-block;inline-size:var(\n--mod-search-inline-size,var(--spectrum-search-inline-size)\n);min-inline-size:var(\n--mod-search-min-inline-size,var(--spectrum-search-min-inline-size)\n);position:relative}#textfield .spectrum-HelpText{margin-block-start:var(\n--mod-search-to-help-text,var(--spectrum-search-to-help-text)\n)}#button{inset-block-start:0;inset-inline-end:0;position:absolute}#button,#button .spectrum-ClearButton-fill{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n)}#textfield.is-disabled #button{display:none}#textfield{inline-size:100%}.icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-default,var(--mod-search-color-default,var(--spectrum-search-color-default))\n);color:var(--spectrum-search-color);display:block;inset-block:0;margin-block:auto;position:absolute}#textfield:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-hover,var(--mod-search-color-hover,var(--spectrum-search-color-hover))\n)}#textfield.is-focused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(--mod-search-color-focus,var(--spectrum-search-color-focus))\n)}#textfield.is-focused:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n)\n)}#textfield.is-keyboardFocused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n)\n)}#textfield.is-disabled .icon-search,#textfield.is-disabled:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-disabled,var(--mod-search-color-disabled,var(--spectrum-search-color-disabled))\n)}.input{-webkit-appearance:none;block-size:var(--mod-search-block-size,var(--spectrum-search-block-size));font-style:var(--mod-search-font-style,var(--spectrum-search-font-style));line-height:var(\n--mod-search-line-height,var(--spectrum-search-line-height)\n);padding-block-end:calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-block-start:calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none}:host(:not([quiet])) #textfield .icon-search{inset-inline-start:var(\n--mod-search-edge-to-visual,var(--spectrum-search-edge-to-visual)\n)}:host(:not([quiet])) #textfield .input{padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host([quiet]) #button{transform:translateX(var(\n--mod-search-quiet-button-offset,var(--spectrum-search-quiet-button-offset)\n))}:host([quiet]) #textfield .input{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);padding-block-start:var(\n--mod-search-top-to-text,var(--spectrum-search-top-to-text)\n);padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(\n--mod-search-quiet-button-offset,\nvar(--spectrum-search-quiet-button-offset)\n));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host{--spectrum-search-border-radius:var(\n--system-spectrum-search-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-edge-to-visual\n);--spectrum-search-border-color-default:var(\n--system-spectrum-search-border-color-default\n);--spectrum-search-border-color-hover:var(\n--system-spectrum-search-border-color-hover\n);--spectrum-search-border-color-focus:var(\n--system-spectrum-search-border-color-focus\n);--spectrum-search-border-color-focus-hover:var(\n--system-spectrum-search-border-color-focus-hover\n);--spectrum-search-border-color-key-focus:var(\n--system-spectrum-search-border-color-key-focus\n)}.spectrum-Search--sizeS{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizes-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizes-edge-to-visual\n)}.spectrum-Search--sizeM{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizem-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizem-edge-to-visual\n)}.spectrum-Search--sizeL{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizel-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizel-edge-to-visual\n)}.spectrum-Search--sizeXL{--spectrum-search-border-radius:var(\n--system-spectrum-search-sizexl-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizexl-edge-to-visual\n)}\n`;\nexport default styles;"],
4
+ "sourcesContent": ["/*\nCopyright 2023 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-search-inline-size:var(--spectrum-field-width);--spectrum-search-block-size:var(--spectrum-component-height-100);--spectrum-search-button-inline-size:var(--spectrum-search-block-size);--spectrum-search-min-inline-size:calc(var(--spectrum-search-field-minimum-width-multiplier)*var(--spectrum-search-block-size));--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-100);--spectrum-search-to-help-text:var(--spectrum-help-text-to-component);--spectrum-search-top-to-text:var(--spectrum-component-top-to-text-100);--spectrum-search-bottom-to-text:var(\n--spectrum-component-bottom-to-text-100\n);--spectrum-search-focus-indicator-thickness:var(\n--spectrum-focus-indicator-thickness\n);--spectrum-search-focus-indicator-gap:var(--spectrum-focus-indicator-gap);--spectrum-search-focus-indicator-color:var(\n--spectrum-focus-indicator-color\n);--spectrum-search-font-family:var(--spectrum-sans-font-family-stack);--spectrum-search-font-weight:var(--spectrum-regular-font-weight);--spectrum-search-font-style:var(--spectrum-default-font-style);--spectrum-search-line-height:var(--spectrum-line-height-100);--spectrum-search-color-default:var(\n--spectrum-neutral-content-color-default\n);--spectrum-search-color-hover:var(--spectrum-neutral-content-color-hover);--spectrum-search-color-focus:var(--spectrum-neutral-content-color-focus);--spectrum-search-color-focus-hover:var(\n--spectrum-neutral-content-color-focus-hover\n);--spectrum-search-color-key-focus:var(\n--spectrum-neutral-content-color-key-focus\n);--spectrum-search-border-width:var(--spectrum-border-width-100);--spectrum-search-background-color:var(--spectrum-gray-50);--spectrum-search-color-disabled:var(--spectrum-disabled-content-color);--spectrum-search-background-color-disabled:var(\n--spectrum-disabled-background-color\n);--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-background-color\n);--mod-textfield-font-family:var(\n--mod-search-font-family,var(--spectrum-search-font-family)\n);--mod-textfield-font-weight:var(\n--mod-search-font-weight,var(--spectrum-search-font-weight)\n);--mod-textfield-corner-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);--mod-textfield-border-width:var(\n--mod-search-border-width,var(--spectrum-search-border-width)\n);--mod-textfield-focus-indicator-gap:var(\n--mod-search-focus-indicator-gap,var(--spectrum-search-focus-indicator-gap)\n);--mod-textfield-focus-indicator-width:var(\n--mod-search-focus-indicator-thickness,var(--spectrum-search-focus-indicator-thickness)\n);--mod-textfield-focus-indicator-color:var(\n--mod-search-focus-indicator-color,var(--spectrum-search-focus-indicator-color)\n);--mod-textfield-text-color-default:var(\n--mod-search-color-default,var(--spectrum-search-color-default)\n);--mod-textfield-text-color-hover:var(\n--mod-search-color-hover,var(--spectrum-search-color-hover)\n);--mod-textfield-text-color-focus:var(\n--mod-search-color-focus,var(--spectrum-search-color-focus)\n);--mod-textfield-text-color-focus-hover:var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n);--mod-textfield-text-color-keyboard-focus:var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n);--mod-textfield-text-color-disabled:var(\n--mod-search-color-disabled,var(--spectrum-search-color-disabled)\n);--mod-textfield-border-color:var(\n--mod-search-border-color-default,var(--spectrum-search-border-color-default)\n);--mod-textfield-border-color-hover:var(\n--mod-search-border-color-hover,var(--spectrum-search-border-color-hover)\n);--mod-textfield-border-color-focus:var(\n--mod-search-border-color-focus,var(--spectrum-search-border-color-focus)\n);--mod-textfield-border-color-focus-hover:var(\n--mod-search-border-color-focus-hover,var(--spectrum-search-border-color-focus-hover)\n);--mod-textfield-border-color-keyboard-focus:var(\n--mod-search-border-color-key-focus,var(--spectrum-search-border-color-key-focus)\n);--mod-textfield-border-color-disabled:var(\n--mod-search-border-color-disabled,var(--spectrum-search-border-color-disabled)\n);--mod-textfield-background-color:var(\n--mod-search-background-color,var(--spectrum-search-background-color)\n);--mod-textfield-background-color-disabled:var(\n--mod-search-background-color-disabled,var(--spectrum-search-background-color-disabled)\n)}:host([size=s]){--spectrum-search-block-size:var(--spectrum-component-height-75);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-75);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-75)}:host([size=l]){--spectrum-search-block-size:var(--spectrum-component-height-200);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-200);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-200)}:host([size=xl]){--spectrum-search-block-size:var(--spectrum-component-height-300);--spectrum-search-icon-size:var(--spectrum-workflow-icon-size-300);--spectrum-search-text-to-icon:var(--spectrum-text-to-visual-300)}:host([quiet]){--spectrum-search-quiet-button-offset:calc(var(--mod-search-block-size, var(--spectrum-search-block-size))/2 - var(\n--mod-workflow-icon-size-100,\nvar(--spectrum-workflow-icon-size-100)\n)/2);--spectrum-search-background-color:transparent;--spectrum-search-background-color-disabled:transparent;--spectrum-search-border-color-disabled:var(\n--spectrum-disabled-border-color\n)}:host([quiet]) #textfield{--spectrum-search-border-radius:0;--spectrum-search-edge-to-visual:var(\n--spectrum-field-edge-to-visual-quiet\n)}@media (forced-colors:active){#textfield #textfield,#textfield #textfield .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#textfield #button .spectrum-ClearButton-fill{background-color:#0000;forced-color-adjust:none}}#textfield{display:inline-block;inline-size:var(\n--mod-search-inline-size,var(--spectrum-search-inline-size)\n);min-inline-size:var(\n--mod-search-min-inline-size,var(--spectrum-search-min-inline-size)\n);position:relative}#textfield .spectrum-HelpText{margin-block-start:var(\n--mod-search-to-help-text,var(--spectrum-search-to-help-text)\n)}#button{inset-block-start:0;inset-inline-end:0;position:absolute}#button,#button .spectrum-ClearButton-fill{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n)}#textfield.is-disabled #button{display:none}#textfield{inline-size:100%}.icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-default,var(--mod-search-color-default,var(--spectrum-search-color-default))\n);color:var(--spectrum-search-color);display:block;inset-block:0;margin-block:auto;position:absolute}#textfield:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-hover,var(--mod-search-color-hover,var(--spectrum-search-color-hover))\n)}#textfield.is-focused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(--mod-search-color-focus,var(--spectrum-search-color-focus))\n)}#textfield.is-focused:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-focus-hover,var(--spectrum-search-color-focus-hover)\n)\n)}#textfield.is-keyboardFocused .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-focus,var(\n--mod-search-color-key-focus,var(--spectrum-search-color-key-focus)\n)\n)}#textfield.is-disabled .icon-search,#textfield.is-disabled:hover .icon-search{--spectrum-search-color:var(\n--highcontrast-search-color-disabled,var(--mod-search-color-disabled,var(--spectrum-search-color-disabled))\n)}.input{-webkit-appearance:none;block-size:var(--mod-search-block-size,var(--spectrum-search-block-size));font-style:var(--mod-search-font-style,var(--spectrum-search-font-style));line-height:var(\n--mod-search-line-height,var(--spectrum-search-line-height)\n);padding-block-end:calc(var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-block-start:calc(var(--mod-search-top-to-text, var(--spectrum-search-top-to-text)) - var(--mod-search-border-width, var(--spectrum-search-border-width)))}.input::-webkit-search-cancel-button,.input::-webkit-search-decoration{-webkit-appearance:none}:host(:not([quiet])) #textfield .icon-search{inset-inline-start:var(\n--mod-search-edge-to-visual,var(--spectrum-search-edge-to-visual)\n)}:host(:not([quiet])) #textfield .input{padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(--mod-search-border-width, var(--spectrum-search-border-width)));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) - var(--mod-search-border-width, var(--spectrum-search-border-width)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host([quiet]) #button{transform:translateX(var(\n--mod-search-quiet-button-offset,var(--spectrum-search-quiet-button-offset)\n))}:host([quiet]) #textfield .input{border-radius:var(\n--mod-search-border-radius,var(--spectrum-search-border-radius)\n);padding-block-start:var(\n--mod-search-top-to-text,var(--spectrum-search-top-to-text)\n);padding-inline-end:calc(var(\n--mod-search-button-inline-size,\nvar(--spectrum-search-button-inline-size)\n) - var(\n--mod-search-quiet-button-offset,\nvar(--spectrum-search-quiet-button-offset)\n));padding-inline-start:calc(var(--mod-search-edge-to-visual, var(--spectrum-search-edge-to-visual)) + var(--mod-search-icon-size, var(--spectrum-search-icon-size)) + var(--mod-search-text-to-icon, var(--spectrum-search-text-to-icon)))}:host{--spectrum-search-border-radius:var(\n--system-spectrum-search-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-edge-to-visual\n);--spectrum-search-border-color-default:var(\n--system-spectrum-search-border-color-default\n);--spectrum-search-border-color-hover:var(\n--system-spectrum-search-border-color-hover\n);--spectrum-search-border-color-focus:var(\n--system-spectrum-search-border-color-focus\n);--spectrum-search-border-color-focus-hover:var(\n--system-spectrum-search-border-color-focus-hover\n);--spectrum-search-border-color-key-focus:var(\n--system-spectrum-search-border-color-key-focus\n)}:host([size=s]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizes-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizes-edge-to-visual\n)}:host([size=m]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizem-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizem-edge-to-visual\n)}:host([size=l]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizel-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizel-edge-to-visual\n)}:host([size=xl]){--spectrum-search-border-radius:var(\n--system-spectrum-search-sizexl-border-radius\n);--spectrum-search-edge-to-visual:var(\n--system-spectrum-search-sizexl-edge-to-visual\n)}\n`;\nexport default styles;"],
5
5
  "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6If,eAAeC",
6
6
  "names": ["css", "styles"]
7
7
  }
package/stories/search-sizes.stories.js ADDED
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ import { html } from "@spectrum-web-components/base";
3
+ import "@spectrum-web-components/search/sp-search.js";
4
+ import "@spectrum-web-components/field-label/sp-field-label.js";
5
+ import "@spectrum-web-components/help-text/sp-help-text.js";
6
+ import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
7
+ export default {
8
+ component: "sp-search",
9
+ title: "Search/Sizes"
10
+ };
11
+ const template = ({
12
+ size
13
+ } = {}) => {
14
+ return html`
15
+ <sp-field-label for="name" size=${ifDefined(size)}>
16
+ What would you like to find?
17
+ </sp-field-label>
18
+ <sp-search id="name" size=${ifDefined(size)} value="Sized Search">
19
+ <sp-help-text size=${ifDefined(size)} slot="help-text">
20
+ Anything within reason...
21
+ </sp-help-text>
22
+ </sp-search>
23
+ `;
24
+ };
25
+ export const s = () => template({ size: "s" });
26
+ export const noSize = () => template();
27
+ export const m = () => template({ size: "m" });
28
+ export const l = () => template({ size: "l" });
29
+ export const XL = () => template({ size: "xl" });
30
+ //# sourceMappingURL=search-sizes.stories.js.map
package/stories/search-sizes.stories.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["search-sizes.stories.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2018 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/search/sp-search.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport '@spectrum-web-components/help-text/sp-help-text.js';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nexport default {\n component: 'sp-search',\n title: 'Search/Sizes',\n};\n\nconst template = ({\n size,\n}: {\n size?: 's' | 'm' | 'l' | 'xl';\n} = {}): TemplateResult => {\n return html`\n <sp-field-label for=\"name\" size=${ifDefined(size)}>\n What would you like to find?\n </sp-field-label>\n <sp-search id=\"name\" size=${ifDefined(size)} value=\"Sized Search\">\n <sp-help-text size=${ifDefined(size)} slot=\"help-text\">\n Anything within reason...\n </sp-help-text>\n </sp-search>\n `;\n};\n\nexport const s = (): TemplateResult => template({ size: 's' });\nexport const noSize = (): TemplateResult => template();\nexport const m = (): TemplateResult => template({ size: 'm' });\nexport const l = (): TemplateResult => template({ size: 'l' });\nexport const XL = (): TemplateResult => template({ size: 'xl' });\n"],
5
+ "mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,iBAAiB;AAE1B,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEA,MAAM,WAAW,CAAC;AAAA,EACd;AACJ,IAEI,CAAC,MAAsB;AACvB,SAAO;AAAA,0CAC+B,UAAU,IAAI;AAAA;AAAA;AAAA,oCAGpB,UAAU,IAAI;AAAA,iCACjB,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA;AAK/C;AAEO,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;AACtD,aAAM,SAAS,MAAsB,SAAS;AAC9C,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;AACtD,aAAM,IAAI,MAAsB,SAAS,EAAE,MAAM,IAAI,CAAC;AACtD,aAAM,KAAK,MAAsB,SAAS,EAAE,MAAM,KAAK,CAAC;",
6
+ "names": []
7
+ }
package/test/search-sizes.test-vrt.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ import * as stories from "../stories/search-sizes.stories.js";
3
+ import { regressVisuals } from "../../../test/visual/test.js";
4
+ regressVisuals("SearchSizesStories", stories);
5
+ //# sourceMappingURL=search-sizes.test-vrt.js.map
package/test/search-sizes.test-vrt.js.map ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["search-sizes.test-vrt.ts"],
4
+ "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport * as stories from '../stories/search-sizes.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\nimport type { TestsType } from '../../../test/visual/test.js';\n\nregressVisuals('SearchSizesStories', stories as unknown as TestsType);\n"],
5
+ "mappings": ";AAYA,YAAY,aAAa;AACzB,SAAS,sBAAsB;AAG/B,eAAe,sBAAsB,OAA+B;",
6
+ "names": []
7
+ }