@luzmo/lucero 1.0.3-alpha.11 → 1.0.3-alpha.13

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 (57) hide show
  1. package/components/avatar/avatar.d.ts +17 -1
  2. package/components/avatar/index.cjs +1 -1
  3. package/components/avatar/index.js +1 -1
  4. package/components/avatar-CCe82byP.js +98 -0
  5. package/components/avatar-CwAC72MX.cjs +34 -0
  6. package/components/color-field/index.cjs +1 -1
  7. package/components/color-field/index.js +1 -1
  8. package/components/{color-field-Bq0IEitn.js → color-field-BBUgyihj.js} +1 -1
  9. package/components/{color-field-IpL7Z89G.cjs → color-field-BKBpEfot.cjs} +1 -1
  10. package/components/color-menu/index.cjs +1 -1
  11. package/components/color-menu/index.js +1 -1
  12. package/components/{color-menu-DtYUtPee.js → color-menu-CZGDEdC4.js} +1 -1
  13. package/components/{color-menu-CBpuPimx.cjs → color-menu-etodAPbs.cjs} +1 -1
  14. package/components/color-picker/index.cjs +1 -1
  15. package/components/color-picker/index.js +1 -1
  16. package/components/{color-picker-WCIGRufq.js → color-picker-CP4_U5xq.js} +1 -1
  17. package/components/{color-picker-CajJUS1c.cjs → color-picker-D6k8Vmaj.cjs} +1 -1
  18. package/components/date-range-picker/index.cjs +1 -1
  19. package/components/date-range-picker/index.js +1 -1
  20. package/components/{date-range-picker-Cv232jtb.js → date-range-picker-C-9uvOgI.js} +1 -1
  21. package/components/{date-range-picker-CNoryq5v.cjs → date-range-picker-LrWdEyeh.cjs} +1 -1
  22. package/components/date-time-picker/index.cjs +1 -1
  23. package/components/date-time-picker/index.js +1 -1
  24. package/components/{date-time-picker-Sgv9SOT_.js → date-time-picker-Bs6_gLo3.js} +1 -1
  25. package/components/{date-time-picker-Cg8RdR2k.cjs → date-time-picker-DOaTFsqF.cjs} +1 -1
  26. package/components/index.cjs +1 -1
  27. package/components/index.js +12 -12
  28. package/components/multi-language-field/index.cjs +1 -1
  29. package/components/multi-language-field/index.js +1 -1
  30. package/components/{multi-language-field-B7dnlCK9.cjs → multi-language-field-CpDYvREK.cjs} +1 -1
  31. package/components/{multi-language-field-DqAlPXww.js → multi-language-field-ccoVXf52.js} +1 -1
  32. package/components/number-field/index.cjs +1 -1
  33. package/components/number-field/index.js +1 -1
  34. package/components/{number-field-BEBoSI-_.cjs → number-field-BiTzYPdP.cjs} +1 -1
  35. package/components/{number-field-B6BiDw0B.js → number-field-qoAjRq-S.js} +1 -1
  36. package/components/prompt-box/index.cjs +1 -1
  37. package/components/prompt-box/index.js +1 -1
  38. package/components/{prompt-box-BbLXopHV.js → prompt-box-Dpa9hHMS.js} +1 -1
  39. package/components/{prompt-box-Bx_iPqV_.cjs → prompt-box-TXcnvkET.cjs} +1 -1
  40. package/components/search/index.cjs +1 -1
  41. package/components/search/index.js +1 -1
  42. package/components/search-DkSM6A2a.cjs +47 -0
  43. package/components/search-ulX07eyR.js +100 -0
  44. package/components/text-field/index.cjs +1 -1
  45. package/components/text-field/index.js +2 -2
  46. package/components/{text-field-D0Z0K_7q.cjs → text-field-BzZ4jEr6.cjs} +1 -1
  47. package/components/{text-field-DItC9-FS.js → text-field-C56-sBct.js} +1 -1
  48. package/components/{text-field-BG6dB1fv.cjs → text-field-COHW36-x.cjs} +1 -1
  49. package/components/{text-field-C9_95TpH.js → text-field-nBag7DTk.js} +1 -1
  50. package/components/{text-field.module-BrBqDht3.js → text-field.module-BHhBReKL.js} +1 -1
  51. package/components/{text-field.module-DDRcQM7Y.cjs → text-field.module-l8CaTCwE.cjs} +1 -1
  52. package/custom-elements.json +1 -1
  53. package/package.json +1 -1
  54. package/components/avatar-79Zd9NiA.js +0 -65
  55. package/components/avatar-BRfwsoBh.cjs +0 -24
  56. package/components/search-COpGXyHi.cjs +0 -47
  57. package/components/search-DJa1-_UC.js +0 -100
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luzmo/lucero",
3
- "version": "1.0.3-alpha.11",
3
+ "version": "1.0.3-alpha.13",
4
4
  "homepage": "https://luzmo.com",
5
5
  "description": "Lucero - The design system for Luzmo",
6
6
  "type": "module",
@@ -1,65 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- import { t as e } from "./decorate-CkCg3wfh.js";
19
- import { n as t, t as n } from "./sized-mixin-DzQTebN-.js";
20
- import { t as r } from "./focusable-DuP0-Kuy.js";
21
- import { t as i } from "./like-anchor-DXCaEv7O.js";
22
- import { html as a, unsafeCSS as o } from "lit";
23
- import { property as s, query as c } from "lit/decorators.js";
24
- import { ifDefined as l } from "lit/directives/if-defined.js";
25
- //#region src/components/avatar/avatar.module.scss?inline
26
- var u = "@media (forced-colors:active){:host{--highcontrast-avatar-focus-indicator-color:CanvasText}}:host{--avatar-border-radius:var(--luzmo-avatar-border-radius,var(--luzmo-avatar-size,var(--avatar-size)));inline-size:var(--luzmo-avatar-size,var(--avatar-size));block-size:var(--luzmo-avatar-size,var(--avatar-size));border-radius:var(--avatar-border-radius);-webkit-user-drag:none;-webkit-user-select:none;user-select:none;opacity:var(--luzmo-avatar-color-opacity,var(--avatar-color-opacity));border-width:0;outline:none;display:inline-block;position:relative;overflow:visible}:host([disabled]){opacity:var(--highcontrast-avatar-color-opacity-disabled,var(--luzmo-avatar-color-opacity-disabled,var(--avatar-color-opacity-disabled)))}:host(:not([disabled])) .is-focused:after,:host(:not([disabled])) .link:focus-visible:after{pointer-events:none;content:\"\";inline-size:calc(var(--luzmo-avatar-custom-size,var(--luzmo-avatar-size,var(--avatar-size))) + var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) * 2);block-size:calc(var(--luzmo-avatar-custom-size,var(--luzmo-avatar-size,var(--avatar-size))) + var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) * 2);border-style:solid;border-width:var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width));border-color:var(--highcontrast-avatar-focus-indicator-color,var(--luzmo-avatar-focus-indicator-color,var(--avatar-focus-indicator-color)));border-radius:var(--avatar-border-radius);position:absolute;inset-block-start:calc((var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) + var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width))) * -1);inset-inline-start:calc((var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) + var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width))) * -1)}.link{outline:0}.image{inline-size:var(--luzmo-avatar-size,var(--avatar-size));block-size:var(--luzmo-avatar-size,var(--avatar-size));border-radius:var(--avatar-border-radius)}:host([rounding=none]),:host([rounding=none]) img{border-radius:0}:host([rounding=full]),:host([rounding=full]) img{border-radius:100%}:host([border=light]){border:var(--luzmo-avatar-border-width,var(--avatar-border-width)) solid var(--luzmo-avatar-border-color,var(--avatar-border-color))}:host([border=none]){border:0}:host{--avatar-color-opacity:1;--avatar-border-width:var(--luzmo-border-width);--avatar-border-color:var(--luzmo-border-color);--avatar-size:32px;--avatar-focus-indicator-width:var(--luzmo-indicator-width);--avatar-focus-indicator-gap:var(--luzmo-indicator-gap);--avatar-focus-indicator-color:var(--luzmo-indicator-color);--avatar-color-opacity-disabled:.3}:host([size=xxs]){--avatar-size:var(--luzmo-component-height-xxs)}:host([size=xs]){--avatar-size:var(--luzmo-component-height-xs)}:host([size=s]){--avatar-size:var(--luzmo-component-height-s)}:host{--avatar-size:var(--luzmo-component-height)}:host([size=l]){--avatar-size:var(--luzmo-component-height-l)}:host([size=xl]){--avatar-size:var(--luzmo-component-height-xl)}:host([size=xxl]){--avatar-size:var(--luzmo-component-height-xxl)}img{vertical-align:top}", d = class extends i(t(r, { validSizes: Object.values(n) })) {
27
- constructor(...e) {
28
- super(...e), this.src = "", this.isDecorative = !1;
29
- }
30
- static get styles() {
31
- return [o(u)];
32
- }
33
- get focusElement() {
34
- return this.anchorElement || this;
35
- }
36
- render() {
37
- let e = a`
38
- <img
39
- class="image"
40
- alt=${l(this.label || (this.isDecorative ? "" : void 0))}
41
- src=${this.src}
42
- />
43
- `;
44
- return this.href ? this.renderAnchor({
45
- id: "link",
46
- className: "link",
47
- anchorContent: e
48
- }) : e;
49
- }
50
- };
51
- //#endregion
52
- //#region src/components/avatar/index.ts
53
- e([s({
54
- type: String,
55
- reflect: !0
56
- })], d.prototype, "border", void 0), e([s({
57
- type: String,
58
- reflect: !0
59
- })], d.prototype, "rounding", void 0), e([c("#link")], d.prototype, "anchorElement", void 0), e([s()], d.prototype, "src", void 0), e([s({
60
- type: Boolean,
61
- reflect: !0,
62
- attribute: "is-decorative"
63
- })], d.prototype, "isDecorative", void 0), customElements.get("luzmo-avatar") || customElements.define("luzmo-avatar", d);
64
- //#endregion
65
- export { d as t };
@@ -1,24 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- const e=require("./decorate-Dq34MBGe.cjs"),t=require("./sized-mixin-BT7cv-fT.cjs"),n=require("./focusable-DTxxQ3yJ.cjs"),r=require("./like-anchor-BX4PSB3d.cjs");let i=require("lit"),a=require("lit/decorators.js"),o=require("lit/directives/if-defined.js");var s=`@media (forced-colors:active){:host{--highcontrast-avatar-focus-indicator-color:CanvasText}}:host{--avatar-border-radius:var(--luzmo-avatar-border-radius,var(--luzmo-avatar-size,var(--avatar-size)));inline-size:var(--luzmo-avatar-size,var(--avatar-size));block-size:var(--luzmo-avatar-size,var(--avatar-size));border-radius:var(--avatar-border-radius);-webkit-user-drag:none;-webkit-user-select:none;user-select:none;opacity:var(--luzmo-avatar-color-opacity,var(--avatar-color-opacity));border-width:0;outline:none;display:inline-block;position:relative;overflow:visible}:host([disabled]){opacity:var(--highcontrast-avatar-color-opacity-disabled,var(--luzmo-avatar-color-opacity-disabled,var(--avatar-color-opacity-disabled)))}:host(:not([disabled])) .is-focused:after,:host(:not([disabled])) .link:focus-visible:after{pointer-events:none;content:"";inline-size:calc(var(--luzmo-avatar-custom-size,var(--luzmo-avatar-size,var(--avatar-size))) + var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) * 2);block-size:calc(var(--luzmo-avatar-custom-size,var(--luzmo-avatar-size,var(--avatar-size))) + var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) * 2);border-style:solid;border-width:var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width));border-color:var(--highcontrast-avatar-focus-indicator-color,var(--luzmo-avatar-focus-indicator-color,var(--avatar-focus-indicator-color)));border-radius:var(--avatar-border-radius);position:absolute;inset-block-start:calc((var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) + var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width))) * -1);inset-inline-start:calc((var(--luzmo-avatar-focus-indicator-gap,var(--avatar-focus-indicator-gap)) + var(--luzmo-avatar-focus-indicator-width,var(--avatar-focus-indicator-width))) * -1)}.link{outline:0}.image{inline-size:var(--luzmo-avatar-size,var(--avatar-size));block-size:var(--luzmo-avatar-size,var(--avatar-size));border-radius:var(--avatar-border-radius)}:host([rounding=none]),:host([rounding=none]) img{border-radius:0}:host([rounding=full]),:host([rounding=full]) img{border-radius:100%}:host([border=light]){border:var(--luzmo-avatar-border-width,var(--avatar-border-width)) solid var(--luzmo-avatar-border-color,var(--avatar-border-color))}:host([border=none]){border:0}:host{--avatar-color-opacity:1;--avatar-border-width:var(--luzmo-border-width);--avatar-border-color:var(--luzmo-border-color);--avatar-size:32px;--avatar-focus-indicator-width:var(--luzmo-indicator-width);--avatar-focus-indicator-gap:var(--luzmo-indicator-gap);--avatar-focus-indicator-color:var(--luzmo-indicator-color);--avatar-color-opacity-disabled:.3}:host([size=xxs]){--avatar-size:var(--luzmo-component-height-xxs)}:host([size=xs]){--avatar-size:var(--luzmo-component-height-xs)}:host([size=s]){--avatar-size:var(--luzmo-component-height-s)}:host{--avatar-size:var(--luzmo-component-height)}:host([size=l]){--avatar-size:var(--luzmo-component-height-l)}:host([size=xl]){--avatar-size:var(--luzmo-component-height-xl)}:host([size=xxl]){--avatar-size:var(--luzmo-component-height-xxl)}img{vertical-align:top}`,c=class extends r.t(t.n(n.t,{validSizes:Object.values(t.t)})){constructor(...e){super(...e),this.src=``,this.isDecorative=!1}static get styles(){return[(0,i.unsafeCSS)(s)]}get focusElement(){return this.anchorElement||this}render(){let e=i.html`
19
- <img
20
- class="image"
21
- alt=${(0,o.ifDefined)(this.label||(this.isDecorative?``:void 0))}
22
- src=${this.src}
23
- />
24
- `;return this.href?this.renderAnchor({id:`link`,className:`link`,anchorContent:e}):e}};e.t([(0,a.property)({type:String,reflect:!0})],c.prototype,`border`,void 0),e.t([(0,a.property)({type:String,reflect:!0})],c.prototype,`rounding`,void 0),e.t([(0,a.query)(`#link`)],c.prototype,`anchorElement`,void 0),e.t([(0,a.property)()],c.prototype,`src`,void 0),e.t([(0,a.property)({type:Boolean,reflect:!0,attribute:`is-decorative`})],c.prototype,`isDecorative`,void 0),customElements.get(`luzmo-avatar`)||customElements.define(`luzmo-avatar`,c),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});
@@ -1,47 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- const e=require("./decorate-Dq34MBGe.cjs");require("./icon-xwNfYSkj.cjs"),require("./button-D7RUI_x1.cjs");const t=require("./text-field-BG6dB1fv.cjs");let n=require("lit"),r=require("lit/decorators.js"),i=require("@luzmo/icons"),a=require("lit/directives/if-defined.js");var o=`@media (forced-colors:active){#text-field #text-field,#text-field #text-field .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#text-field #button .luzmo-ClearButton-fill{forced-color-adjust:none;background-color:initial}}#text-field{--search-button-inline-size:var(--search-block-size);--search-min-inline-size:calc(var(--search-min-inline-multiplier) * var(--search-block-size));--luzmo-text-field-font-family:var(--luzmo-search-font-family,var(--search-font-family));--luzmo-text-field-font-weight:var(--luzmo-search-font-weight,var(--search-font-weight));--luzmo-text-field-border-radius:var(--luzmo-search-border-radius,var(--search-border-radius));--luzmo-text-field-border-width:var(--luzmo-search-border-width,var(--search-border-width));--luzmo-text-field-focus-indicator-gap:var(--luzmo-search-focus-indicator-gap,var(--search-focus-indicator-gap));--luzmo-text-field-focus-indicator-width:var(--luzmo-search-focus-indicator-width,var(--search-focus-indicator-width));--luzmo-text-field-focus-indicator-color:var(--luzmo-search-focus-indicator-color,var(--search-focus-indicator-color));--luzmo-text-field-text-color-default:var(--luzmo-search-color-default,var(--search-color-default));--luzmo-text-field-text-color-hover:var(--luzmo-search-color-hover,var(--search-color-hover));--luzmo-text-field-text-color-focus:var(--luzmo-search-color-focus,var(--search-color-focus));--luzmo-text-field-text-color-focus-hover:var(--luzmo-search-color-focus-hover,var(--search-color-focus-hover));--luzmo-text-field-text-color-keyboard-focus:var(--luzmo-search-color-key-focus,var(--search-color-key-focus));--luzmo-text-field-text-color-disabled:var(--luzmo-search-color-disabled,var(--search-color-disabled));--luzmo-text-field-border-color:var(--luzmo-search-border-color-default,var(--search-border-color-default));--luzmo-text-field-border-color-hover:var(--luzmo-search-border-color-hover,var(--search-border-color-hover));--luzmo-text-field-border-color-focus:var(--luzmo-search-border-color-focus,var(--search-border-color-focus));--luzmo-text-field-border-color-focus-hover:var(--luzmo-search-border-color-focus-hover,var(--search-border-color-focus-hover));--luzmo-text-field-border-color-keyboard-focus:var(--luzmo-search-border-color-key-focus,var(--search-border-color-key-focus));--luzmo-text-field-border-color-disabled:var(--luzmo-search-border-color-disabled,var(--search-border-color-disabled));--luzmo-text-field-background-color:var(--luzmo-search-background-color,var(--search-background-color));--luzmo-text-field-background-color-disabled:var(--luzmo-search-background-color-disabled,var(--search-background-color-disabled));inline-size:var(--luzmo-search-inline-size,var(--search-inline-size));min-inline-size:var(--luzmo-search-min-inline-size,var(--search-min-inline-size));display:inline-block;position:relative}#text-field .luzmo-HelpText{margin-block-start:var(--luzmo-search-to-help-text,var(--search-to-help-text))}#button{height:var(--search-block-size);width:var(--search-block-size);position:absolute;inset-block-start:0;inset-inline-end:0}#button,#button .luzmo-ClearButton-fill{border-radius:var(--luzmo-search-border-radius,var(--search-border-radius))}#text-field.is-disabled #button{display:none}#text-field{inline-size:100%}.icon-search{--search-color:var(--highcontrast-search-color-default,var(--luzmo-search-color-default,var(--search-color-default)));color:var(--search-color);margin-block:auto;display:block;position:absolute;inset-block:0}#text-field.is-focused .icon-search{--search-color:var(--highcontrast-search-color-focus,var(--luzmo-search-color-focus,var(--search-color-focus)))}#text-field.is-disabled .icon-search{--search-color:var(--highcontrast-search-color-disabled,var(--luzmo-search-color-disabled,var(--search-color-disabled)))}@media (hover:hover){#text-field:hover .icon-search{--search-color:var(--highcontrast-search-color-hover,var(--luzmo-search-color-hover,var(--search-color-hover)))}#text-field.is-focused:hover .icon-search{--search-color:var(--highcontrast-search-color-focus,var(--luzmo-search-color-focus-hover,var(--search-color-focus-hover)))}#text-field.is-disabled:hover .icon-search{--search-color:var(--highcontrast-search-color-disabled,var(--luzmo-search-color-disabled,var(--search-color-disabled)))}}.input{appearance:none;block-size:var(--luzmo-search-block-size,var(--search-block-size));font-style:var(--luzmo-search-font-style,var(--search-font-style));line-height:var(--luzmo-search-line-height,var(--search-line-height));padding-block-start:calc(var(--luzmo-search-top-to-text,var(--search-top-to-text)) - var(--luzmo-search-border-width,var(--search-border-width)));padding-block-end:calc(var(--luzmo-search-bottom-to-text,var(--search-bottom-to-text)) - var(--luzmo-search-border-width,var(--search-border-width)))}.input::-webkit-search-cancel-button{appearance:none}.input::-webkit-search-decoration{appearance:none}:host #text-field .icon-search{inset-inline-start:var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual))}:host(:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) - var(--luzmo-search-border-width,var(--search-border-width)) + var(--luzmo-search-icon-size,var(--search-icon-size)) + var(--luzmo-search-text-to-icon,var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size,var(--search-button-inline-size)) - var(--luzmo-search-border-width,var(--search-border-width)))}:host([hide-icon]:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) - var(--luzmo-search-border-width,var(--search-border-width)))}:host([hide-icon][quiet]) #text-field .input{padding-inline-start:var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual))}:host([quiet]){--search-quiet-button-offset:var(--luzmo-search-quiet-button-offset,calc(var(--luzmo-search-block-size,var(--search-block-size)) / 2 - var(--luzmo-search-icon-size,var(--search-icon-size)) / 2))}:host([quiet]) #button .luzmo-ClearButton-icon{transform:translateX(var(--search-quiet-button-offset))}:host([quiet]) #text-field .input{border-radius:var(--luzmo-search-border-radius,var(--search-border-radius));padding-block-start:var(--luzmo-search-top-to-text,var(--search-top-to-text));padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) + var(--luzmo-search-icon-size,var(--search-icon-size)) + var(--luzmo-search-text-to-icon,var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size,var(--search-button-inline-size)) - var(--search-quiet-button-offset))}:host{--search-border-color-default:var(--luzmo-border-color);--search-border-color-hover:rgba(var(--luzmo-primary-rgb), .3);--search-border-color-focus:var(--luzmo-primary);--search-border-color-focus-hover:var(--luzmo-primary);--search-border-color-key-focus:var(--luzmo-primary);--search-inline-size:192px;--search-min-inline-multiplier:3;--search-to-help-text:0px;--search-top-to-text:var(--luzmo-spacing-2);--search-bottom-to-text:var(--luzmo-spacing-2);--search-focus-indicator-width:var(--luzmo-indicator-width);--search-focus-indicator-gap:-1px;--search-focus-indicator-color:var(--luzmo-primary);--search-font-family:var(--luzmo-font-family);--search-font-weight:var(--luzmo-font-weight);--search-font-style:var(--luzmo-font-style);--search-line-height:var(--luzmo-line-height);--search-color-default:var(--luzmo-font-color);--search-color-hover:var(--luzmo-font-color-hover);--search-color-focus:var(--luzmo-font-color-focus);--search-color-focus-hover:var(--luzmo-font-focus);--search-color-key-focus:var(--luzmo-font-color-focus);--search-border-width:var(--luzmo-border-width);--search-background-color:var(--luzmo-background-color);--search-color-disabled:var(--luzmo-disabled-color);--search-background-color-disabled:var(--luzmo-background-color-disabled);--search-border-color-disabled:var(--luzmo-border-color-disabled)}:host #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--search-block-size:var(--luzmo-component-height);--search-icon-size:var(--luzmo-font-size-l);--search-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=s]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:var(--luzmo-spacing-3);--search-block-size:var(--luzmo-component-height-s);--search-icon-size:var(--luzmo-font-size);--search-text-to-icon:var(--luzmo-spacing-3)}:host([size=l]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:var(--luzmo-spacing-4);--search-block-size:var(--luzmo-component-height-l);--search-icon-size:var(--luzmo-font-size-xl);--search-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=xl]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--search-block-size:var(--luzmo-component-height-xl);--search-icon-size:var(--luzmo-font-size-xxl);--search-text-to-icon:var(--luzmo-spacing-4)}:host([quiet]) #text-field{--search-background-color:transparent;--search-background-color-disabled:transparent;--search-border-color-disabled:var(--luzmo-border-color-disabled);--search-border-radius:0;--search-edge-to-visual:0px}:host{--luzmo-text-field-spacing-inline:var(--alias-infield-button-full-height-m)}input::-webkit-search-cancel-button{display:none}@media (forced-colors:active){luzmo-clear-button{--clear-button-fill-background-color:transparent;--clear-button-fill-background-color-disabled:transparent;--clear-button-fill-background-color-down:transparent;--clear-button-fill-background-color-hover:transparent;--clear-button-fill-background-color-key-focus:transparent}}`,s=e=>e.stopPropagation(),c=e=>e===`s`?i.luzmoSearch12:e===`l`?i.luzmoSearch:i.luzmoSearch14,l=class extends t.t{constructor(...e){super(...e),this.action=``,this.label=`Search`,this.placeholder=`Search`,this.hideIcon=!1}static get styles(){return[...super.styles,(0,n.unsafeCSS)(o)]}handleSubmit(e){this.dispatchEvent(new Event(`submit`,{cancelable:!0,bubbles:!0}))||e.preventDefault()}handleKeydown(e){let{code:t}=e;t===`Escape`&&this.holdValueOnEscape||!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 n.html`
19
- <form
20
- action=${this.action}
21
- id="form"
22
- method=${(0,a.ifDefined)(this.method)}
23
- @submit=${this.handleSubmit}
24
- @reset=${this.reset}
25
- @keydown=${this.handleKeydown}
26
- >
27
- ${this.hideIcon?n.nothing:n.html`
28
- <luzmo-icon
29
- block
30
- .icon=${c(this.size)}
31
- size=${this.size}
32
- class="icon magnifier icon-workflow icon-search"
33
- ></luzmo-icon>
34
- `}
35
- ${super.renderField()}
36
- ${this.value?n.html`
37
- <luzmo-clear-button
38
- id="button"
39
- label="Reset"
40
- tabindex="-1"
41
- type="reset"
42
- size=${(0,a.ifDefined)(this.size)}
43
- @keydown=${s}
44
- ></luzmo-clear-button>
45
- `:n.nothing}
46
- </form>
47
- `}firstUpdated(e){super.firstUpdated(e),this.hasAttribute(`holdValueOnEscape`)||this.inputElement.setAttribute(`type`,`search`)}willUpdate(){this.multiline=!1}};e.t([(0,r.property)()],l.prototype,`action`,void 0),e.t([(0,r.property)()],l.prototype,`label`,void 0),e.t([(0,r.property)({type:String,reflect:!0})],l.prototype,`border`,void 0),e.t([(0,r.property)()],l.prototype,`method`,void 0),e.t([(0,r.property)()],l.prototype,`placeholder`,void 0),e.t([(0,r.property)({type:Boolean,reflect:!0,attribute:`hide-icon`})],l.prototype,`hideIcon`,void 0),e.t([(0,r.property)({type:Boolean})],l.prototype,`holdValueOnEscape`,void 0),e.t([(0,r.query)(`#form`)],l.prototype,`form`,void 0),customElements.get(`luzmo-search`)||customElements.define(`luzmo-search`,l),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});
@@ -1,100 +0,0 @@
1
- /*! * Lucero - The design system for Luzmo.
2
- *
3
- * Copyright © 2025 Luzmo
4
- * All rights reserved.
5
- * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
6
- * This license allows users with a current active Luzmo account to use Lucero.
7
- * This license terminates automatically if a user no longer has an active Luzmo account.
8
- * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
9
- *
10
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
11
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
12
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
13
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
14
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
15
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
16
- * SOFTWARE.
17
- * */
18
- import { t as e } from "./decorate-CkCg3wfh.js";
19
- import "./icon-M3agnqx7.js";
20
- import "./button-CPh-7eos.js";
21
- import { t } from "./text-field-DItC9-FS.js";
22
- import { html as n, nothing as r, unsafeCSS as i } from "lit";
23
- import { property as a, query as o } from "lit/decorators.js";
24
- import { luzmoSearch as s, luzmoSearch12 as c, luzmoSearch14 as l } from "@luzmo/icons";
25
- import { ifDefined as u } from "lit/directives/if-defined.js";
26
- //#region src/components/search/search.module.scss?inline
27
- var d = "@media (forced-colors:active){#text-field #text-field,#text-field #text-field .input{--highcontrast-search-color-default:CanvasText;--highcontrast-search-color-hover:CanvasText;--highcontrast-search-color-focus:CanvasText;--highcontrast-search-color-disabled:GrayText}#text-field #button .luzmo-ClearButton-fill{forced-color-adjust:none;background-color:initial}}#text-field{--search-button-inline-size:var(--search-block-size);--search-min-inline-size:calc(var(--search-min-inline-multiplier) * var(--search-block-size));--luzmo-text-field-font-family:var(--luzmo-search-font-family,var(--search-font-family));--luzmo-text-field-font-weight:var(--luzmo-search-font-weight,var(--search-font-weight));--luzmo-text-field-border-radius:var(--luzmo-search-border-radius,var(--search-border-radius));--luzmo-text-field-border-width:var(--luzmo-search-border-width,var(--search-border-width));--luzmo-text-field-focus-indicator-gap:var(--luzmo-search-focus-indicator-gap,var(--search-focus-indicator-gap));--luzmo-text-field-focus-indicator-width:var(--luzmo-search-focus-indicator-width,var(--search-focus-indicator-width));--luzmo-text-field-focus-indicator-color:var(--luzmo-search-focus-indicator-color,var(--search-focus-indicator-color));--luzmo-text-field-text-color-default:var(--luzmo-search-color-default,var(--search-color-default));--luzmo-text-field-text-color-hover:var(--luzmo-search-color-hover,var(--search-color-hover));--luzmo-text-field-text-color-focus:var(--luzmo-search-color-focus,var(--search-color-focus));--luzmo-text-field-text-color-focus-hover:var(--luzmo-search-color-focus-hover,var(--search-color-focus-hover));--luzmo-text-field-text-color-keyboard-focus:var(--luzmo-search-color-key-focus,var(--search-color-key-focus));--luzmo-text-field-text-color-disabled:var(--luzmo-search-color-disabled,var(--search-color-disabled));--luzmo-text-field-border-color:var(--luzmo-search-border-color-default,var(--search-border-color-default));--luzmo-text-field-border-color-hover:var(--luzmo-search-border-color-hover,var(--search-border-color-hover));--luzmo-text-field-border-color-focus:var(--luzmo-search-border-color-focus,var(--search-border-color-focus));--luzmo-text-field-border-color-focus-hover:var(--luzmo-search-border-color-focus-hover,var(--search-border-color-focus-hover));--luzmo-text-field-border-color-keyboard-focus:var(--luzmo-search-border-color-key-focus,var(--search-border-color-key-focus));--luzmo-text-field-border-color-disabled:var(--luzmo-search-border-color-disabled,var(--search-border-color-disabled));--luzmo-text-field-background-color:var(--luzmo-search-background-color,var(--search-background-color));--luzmo-text-field-background-color-disabled:var(--luzmo-search-background-color-disabled,var(--search-background-color-disabled));inline-size:var(--luzmo-search-inline-size,var(--search-inline-size));min-inline-size:var(--luzmo-search-min-inline-size,var(--search-min-inline-size));display:inline-block;position:relative}#text-field .luzmo-HelpText{margin-block-start:var(--luzmo-search-to-help-text,var(--search-to-help-text))}#button{height:var(--search-block-size);width:var(--search-block-size);position:absolute;inset-block-start:0;inset-inline-end:0}#button,#button .luzmo-ClearButton-fill{border-radius:var(--luzmo-search-border-radius,var(--search-border-radius))}#text-field.is-disabled #button{display:none}#text-field{inline-size:100%}.icon-search{--search-color:var(--highcontrast-search-color-default,var(--luzmo-search-color-default,var(--search-color-default)));color:var(--search-color);margin-block:auto;display:block;position:absolute;inset-block:0}#text-field.is-focused .icon-search{--search-color:var(--highcontrast-search-color-focus,var(--luzmo-search-color-focus,var(--search-color-focus)))}#text-field.is-disabled .icon-search{--search-color:var(--highcontrast-search-color-disabled,var(--luzmo-search-color-disabled,var(--search-color-disabled)))}@media (hover:hover){#text-field:hover .icon-search{--search-color:var(--highcontrast-search-color-hover,var(--luzmo-search-color-hover,var(--search-color-hover)))}#text-field.is-focused:hover .icon-search{--search-color:var(--highcontrast-search-color-focus,var(--luzmo-search-color-focus-hover,var(--search-color-focus-hover)))}#text-field.is-disabled:hover .icon-search{--search-color:var(--highcontrast-search-color-disabled,var(--luzmo-search-color-disabled,var(--search-color-disabled)))}}.input{appearance:none;block-size:var(--luzmo-search-block-size,var(--search-block-size));font-style:var(--luzmo-search-font-style,var(--search-font-style));line-height:var(--luzmo-search-line-height,var(--search-line-height));padding-block-start:calc(var(--luzmo-search-top-to-text,var(--search-top-to-text)) - var(--luzmo-search-border-width,var(--search-border-width)));padding-block-end:calc(var(--luzmo-search-bottom-to-text,var(--search-bottom-to-text)) - var(--luzmo-search-border-width,var(--search-border-width)))}.input::-webkit-search-cancel-button{appearance:none}.input::-webkit-search-decoration{appearance:none}:host #text-field .icon-search{inset-inline-start:var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual))}:host(:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) - var(--luzmo-search-border-width,var(--search-border-width)) + var(--luzmo-search-icon-size,var(--search-icon-size)) + var(--luzmo-search-text-to-icon,var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size,var(--search-button-inline-size)) - var(--luzmo-search-border-width,var(--search-border-width)))}:host([hide-icon]:not([quiet])) #text-field .input{padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) - var(--luzmo-search-border-width,var(--search-border-width)))}:host([hide-icon][quiet]) #text-field .input{padding-inline-start:var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual))}:host([quiet]){--search-quiet-button-offset:var(--luzmo-search-quiet-button-offset,calc(var(--luzmo-search-block-size,var(--search-block-size)) / 2 - var(--luzmo-search-icon-size,var(--search-icon-size)) / 2))}:host([quiet]) #button .luzmo-ClearButton-icon{transform:translateX(var(--search-quiet-button-offset))}:host([quiet]) #text-field .input{border-radius:var(--luzmo-search-border-radius,var(--search-border-radius));padding-block-start:var(--luzmo-search-top-to-text,var(--search-top-to-text));padding-inline-start:calc(var(--luzmo-search-edge-to-visual,var(--search-edge-to-visual)) + var(--luzmo-search-icon-size,var(--search-icon-size)) + var(--luzmo-search-text-to-icon,var(--search-text-to-icon)));padding-inline-end:calc(var(--luzmo-search-button-inline-size,var(--search-button-inline-size)) - var(--search-quiet-button-offset))}:host{--search-border-color-default:var(--luzmo-border-color);--search-border-color-hover:rgba(var(--luzmo-primary-rgb), .3);--search-border-color-focus:var(--luzmo-primary);--search-border-color-focus-hover:var(--luzmo-primary);--search-border-color-key-focus:var(--luzmo-primary);--search-inline-size:192px;--search-min-inline-multiplier:3;--search-to-help-text:0px;--search-top-to-text:var(--luzmo-spacing-2);--search-bottom-to-text:var(--luzmo-spacing-2);--search-focus-indicator-width:var(--luzmo-indicator-width);--search-focus-indicator-gap:-1px;--search-focus-indicator-color:var(--luzmo-primary);--search-font-family:var(--luzmo-font-family);--search-font-weight:var(--luzmo-font-weight);--search-font-style:var(--luzmo-font-style);--search-line-height:var(--luzmo-line-height);--search-color-default:var(--luzmo-font-color);--search-color-hover:var(--luzmo-font-color-hover);--search-color-focus:var(--luzmo-font-color-focus);--search-color-focus-hover:var(--luzmo-font-focus);--search-color-key-focus:var(--luzmo-font-color-focus);--search-border-width:var(--luzmo-border-width);--search-background-color:var(--luzmo-background-color);--search-color-disabled:var(--luzmo-disabled-color);--search-background-color-disabled:var(--luzmo-background-color-disabled);--search-border-color-disabled:var(--luzmo-border-color-disabled)}:host #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1));--search-block-size:var(--luzmo-component-height);--search-icon-size:var(--luzmo-font-size-l);--search-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=s]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:var(--luzmo-spacing-3);--search-block-size:var(--luzmo-component-height-s);--search-icon-size:var(--luzmo-font-size);--search-text-to-icon:var(--luzmo-spacing-3)}:host([size=l]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:var(--luzmo-spacing-4);--search-block-size:var(--luzmo-component-height-l);--search-icon-size:var(--luzmo-font-size-xl);--search-text-to-icon:calc(var(--luzmo-spacing-3) + var(--luzmo-spacing-1))}:host([size=xl]) #text-field{--search-border-radius:var(--luzmo-border-radius);--search-edge-to-visual:calc(var(--luzmo-spacing-4) + var(--luzmo-spacing-1));--search-block-size:var(--luzmo-component-height-xl);--search-icon-size:var(--luzmo-font-size-xxl);--search-text-to-icon:var(--luzmo-spacing-4)}:host([quiet]) #text-field{--search-background-color:transparent;--search-background-color-disabled:transparent;--search-border-color-disabled:var(--luzmo-border-color-disabled);--search-border-radius:0;--search-edge-to-visual:0px}:host{--luzmo-text-field-spacing-inline:var(--alias-infield-button-full-height-m)}input::-webkit-search-cancel-button{display:none}@media (forced-colors:active){luzmo-clear-button{--clear-button-fill-background-color:transparent;--clear-button-fill-background-color-disabled:transparent;--clear-button-fill-background-color-down:transparent;--clear-button-fill-background-color-hover:transparent;--clear-button-fill-background-color-key-focus:transparent}}", f = (e) => e.stopPropagation(), p = (e) => e === "s" ? c : e === "l" ? s : l, m = class extends t {
28
- constructor(...e) {
29
- super(...e), this.action = "", this.label = "Search", this.placeholder = "Search", this.hideIcon = !1;
30
- }
31
- static get styles() {
32
- return [...super.styles, i(d)];
33
- }
34
- handleSubmit(e) {
35
- this.dispatchEvent(new Event("submit", {
36
- cancelable: !0,
37
- bubbles: !0
38
- })) || e.preventDefault();
39
- }
40
- handleKeydown(e) {
41
- let { code: t } = e;
42
- t === "Escape" && this.holdValueOnEscape || !this.value || t !== "Escape" || this.reset();
43
- }
44
- async reset() {
45
- this.value = "", await this.updateComplete, this.focusElement.dispatchEvent(new InputEvent("input", {
46
- bubbles: !0,
47
- composed: !0
48
- })), this.focusElement.dispatchEvent(new InputEvent("change", { bubbles: !0 }));
49
- }
50
- renderField() {
51
- return n`
52
- <form
53
- action=${this.action}
54
- id="form"
55
- method=${u(this.method)}
56
- @submit=${this.handleSubmit}
57
- @reset=${this.reset}
58
- @keydown=${this.handleKeydown}
59
- >
60
- ${this.hideIcon ? r : n`
61
- <luzmo-icon
62
- block
63
- .icon=${p(this.size)}
64
- size=${this.size}
65
- class="icon magnifier icon-workflow icon-search"
66
- ></luzmo-icon>
67
- `}
68
- ${super.renderField()}
69
- ${this.value ? n`
70
- <luzmo-clear-button
71
- id="button"
72
- label="Reset"
73
- tabindex="-1"
74
- type="reset"
75
- size=${u(this.size)}
76
- @keydown=${f}
77
- ></luzmo-clear-button>
78
- ` : r}
79
- </form>
80
- `;
81
- }
82
- firstUpdated(e) {
83
- super.firstUpdated(e), this.hasAttribute("holdValueOnEscape") || this.inputElement.setAttribute("type", "search");
84
- }
85
- willUpdate() {
86
- this.multiline = !1;
87
- }
88
- };
89
- //#endregion
90
- //#region src/components/search/index.ts
91
- e([a()], m.prototype, "action", void 0), e([a()], m.prototype, "label", void 0), e([a({
92
- type: String,
93
- reflect: !0
94
- })], m.prototype, "border", void 0), e([a()], m.prototype, "method", void 0), e([a()], m.prototype, "placeholder", void 0), e([a({
95
- type: Boolean,
96
- reflect: !0,
97
- attribute: "hide-icon"
98
- })], m.prototype, "hideIcon", void 0), e([a({ type: Boolean })], m.prototype, "holdValueOnEscape", void 0), e([o("#form")], m.prototype, "form", void 0), customElements.get("luzmo-search") || customElements.define("luzmo-search", m);
99
- //#endregion
100
- export { m as t };