wj-elements 0.1.90 → 0.1.92

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 (6) hide show
  1. package/dist/dark.css +4 -0
  2. package/dist/light.css +2 -0
  3. package/dist/wje-button.js +1 -1
  4. package/dist/wje-chip.js +1 -0
  5. package/dist/wje-rate.js +1 -1
  6. package/package.json +1 -1
package/dist/dark.css CHANGED
@@ -175,6 +175,10 @@
175
175
  /* Option */
176
176
  --wje-option-highlighted: var(--wje-color-contrast-3);
177
177
 
178
+ /* Rate */
179
+ --wje-rate-color: var(--wje-color-contrast-11);
180
+ --wje-rate-selected-color: var(--wje-color-danger-6);
181
+
178
182
  /* Tab */
179
183
  --wje-tab-color-active: var(--wje-color-primary-11);
180
184
  --wje-tab-color-hover: var(--wje-color-primary-1);
package/dist/light.css CHANGED
@@ -430,6 +430,8 @@
430
430
 
431
431
  /* Rate */
432
432
  --wje-rate-gap: .25rem;
433
+ --wje-rate-color: var(--wje-color-contrast-11);
434
+ --wje-rate-selected-color: var(--wje-color-danger-9);
433
435
 
434
436
  /* Status */
435
437
  --wje-status-size: var(--wje-size-small);
package/dist/wje-button.js CHANGED
@@ -9,7 +9,7 @@ import Icon from "./wje-icon.js";
9
9
  const bool = (v) => {
10
10
  return v === "false" || v === "null" || v === "NaN" || v === "undefined" || v === "0" ? false : !!v;
11
11
  };
12
- const styles = '/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n background-color: var(--wje-color-primary-9);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n background-color: var(--wje-color-primary-1);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n background-color: var(--wje-color-complete-9);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n background-color: var(--wje-color-complete-1);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n background-color: var(--wje-color-success-9);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n background-color: var(--wje-color-success-1);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n background-color: var(--wje-color-warning-9);\n border-color: var(--wje-color-warning-9);\n color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n background-color: var(--wje-color-warning-1);\n border-color: var(--wje-color-warning-11);\n color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n background-color: var(--wje-color-danger-9);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n background-color: var(--wje-color-danger-1);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-neutral {\n background-color: var(--wje-color-contrast-9);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-neutral {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n background-color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-contrast-3);\n color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-5);\n color: var(--wje-color-contrast-11);\n}\n\n:host {\n --wje-padding-top: .4rem;\n --wje-padding-start: .5rem;\n --wje-padding-end: .5rem;\n --wje-padding-bottom: .4rem;\n\n display: inline-flex;\n position: relative;\n width: auto;\n cursor: pointer;\n margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n display: block;\n}\n\n.native-button {\n font-family: var(--wje-font-family);\n font-size: var(--wje-font-size);\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n min-height: inherit;\n /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n border-width: var(--wje-button-border-width);\n border-style: var(--wje-button-border-style);\n border-color: var(--wje-button-border-color);\n background-color: transparent;\n /*color: var(--wje-button-color);*/\n line-height: 1;\n contain: layout style;\n cursor: pointer;\n z-index: 0;\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n border-radius: var(--wje-button-border-radius);\n padding-top: var(--wje-padding-top);\n padding-bottom: var(--wje-padding-bottom);\n padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n white-space: nowrap;\n}\n\n.native-button:hover {\n outline-style: solid;\n outline-width: var(--wje-button-outline-width);\n transition: outline-width .1s linear;\n}\n\n@media (any-hover: hover) {\n .wje-button-solid.wje-color-primary:hover {\n background-color: var(--wje-color-primary-9);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-primary-2);\n }\n\n .wje-button-outline.wje-color-primary:hover {\n background-color: var(--wje-color-primary-1);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-primary-9);\n outline-color: var(--wje-color-primary-2);\n }\n\n .wje-button-solid.wje-color-complete:hover {\n background-color: var(--wje-color-complete-9);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-complete-2);\n }\n\n .wje-button-outline.wje-color-complete:hover {\n background-color: var(--wje-color-complete-1);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-complete-9);\n outline-color: var(--wje-color-complete-2);\n }\n\n .wje-button-solid.wje-color-success:hover {\n background-color: var(--wje-color-success-9);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-success-2);\n }\n\n .wje-button-outline.wje-color-success:hover {\n background-color: var(--wje-color-success-1);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-success-9);\n outline-color: var(--wje-color-success-2);\n }\n\n .wje-button-solid.wje-color-warning:hover {\n background-color: var(--wje-color-warning-9);\n border-color: var(--wje-color-warning-9);\n color: var(--wje-color-black);\n outline-color: var(--wje-color-warning-2);\n }\n\n .wje-button-outline.wje-color-warning:hover {\n background-color: var(--wje-color-warning-1);\n border-color: var(--wje-color-warning-11);\n color: var(--wje-color-warning-11);\n outline-color: var(--wje-color-warning-2);\n }\n\n .wje-button-solid.wje-color-danger:hover {\n background-color: var(--wje-color-danger-9);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-danger-2);\n }\n\n .wje-button-outline.wje-color-danger:hover {\n background-color: var(--wje-color-danger-1);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-danger-9);\n outline-color: var(--wje-color-danger-2);\n }\n\n .wje-button-solid.wje-color-neutral:hover {\n background-color: var(--wje-color-contrast-9);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-outline.wje-color-neutral:hover {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-9);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-solid.wje-color-default:hover {\n background-color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-contrast-3);\n color: var(--wje-color-contrast-11);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-outline.wje-color-default:hover {\n background-color: var(--wje-color-contrast-2);\n border-color: var(--wje-color-contrast-5);\n color: var(--wje-color-contrast-11);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-link:hover {\n background-color: var(--wje-color-contrast-3);\n border-color: transparent;\n color: var(--wje-color-contrast-11);\n outline-color: transparent;\n outline-width: 0;\n }\n}\n\n.button-inner {\n display: flex;\n position: relative;\n flex-flow: row nowrap;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n z-index: 1;\n line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n border-width: var(--wje-button-border-width);\n border-radius: var(--wje-button-border-radius);\n border-color: transparent;\n background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n cursor: default;\n opacity: .5;\n pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n border-radius: var(--wje-border-radius-circle);\n aspect-ratio: 1/1;\n width: 1.813rem;\n display: flex;\n align-items: center;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n\n}\n\n:host([size=small]) .native-button {\n --wje-padding-top: .25rem;\n --wje-padding-start: .25rem;\n --wje-padding-end: .25rem;\n --wje-padding-bottom: .25rem;\n}\n\n:host([size=large]) .native-button {\n --wje-padding-top: .6rem;\n --wje-padding-start: .7rem;\n --wje-padding-end: .7rem;\n --wje-padding-bottom: .6rem;\n}\n\n:host([size=small][circle]) .native-button {\n width: 1.5rem;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n}\n\n:host([size=large][circle]) .native-button {\n width: 2.188rem;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot="start"]) {\n margin: 0 .3rem 0 -.3rem;\n}\n\n::slotted(wje-icon[slot="end"]) {\n margin: 0 -.2rem 0 .3rem;\n}\n\n:host(:not([only-caret])) slot[name="caret"] {\n padding: 0 0 0 .3rem;\n}\n\n:host([only-caret]) slot[name="caret"] {\n padding: 0;\n display: block;\n}\n\n:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n}\n\n:host(.wje-button-group-inner) .native-button {\n border-radius: 0;\n}\n\n:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n\n:host(.wje-button-group-button:not(.wje-button-group-first)) {\n margin-inline-start: calc(-1 * var(--wje-button-border-width)) !important;\n}\n\n::slotted([slot="toggle"]) {\n display: none;\n}\n\n::slotted([slot="toggle"].show) {\n display: block;\n}\n';
12
+ const styles = '/*\n[ WJ Button ]\n*/\n\n/*PRIMARY*/\n.wje-button-solid.wje-color-primary {\n background-color: var(--wje-color-primary-9);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-primary {\n background-color: var(--wje-color-primary-1);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-primary-9);\n}\n\n.wje-button-link.wje-color-primary {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-primary-9);\n}\n\n/*COMPLETE*/\n.wje-button-solid.wje-color-complete {\n background-color: var(--wje-color-complete-9);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-complete {\n background-color: var(--wje-color-complete-1);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-complete-9);\n}\n\n.wje-button-link.wje-color-complete {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-complete-9);\n}\n\n/*SUCCESS*/\n.wje-button-solid.wje-color-success {\n background-color: var(--wje-color-success-9);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-success {\n background-color: var(--wje-color-success-1);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-success-9);\n}\n\n.wje-button-link.wje-color-success {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-success-9);\n}\n\n/*WARNING*/\n.wje-button-solid.wje-color-warning {\n background-color: var(--wje-color-warning-9);\n border-color: var(--wje-color-warning-9);\n color: var(--wje-color-black);\n}\n\n.wje-button-outline.wje-color-warning {\n background-color: var(--wje-color-warning-1);\n border-color: var(--wje-color-warning-11);\n color: var(--wje-color-warning-11);\n}\n\n.wje-button-link.wje-color-warning {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-warning-11);\n}\n\n/*DANGER*/\n.wje-button-solid.wje-color-danger {\n background-color: var(--wje-color-danger-9);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-danger {\n background-color: var(--wje-color-danger-1);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-danger-9);\n}\n\n.wje-button-link.wje-color-danger {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-danger-9);\n}\n\n/*NEUTRAL*/\n.wje-button-solid.wje-color-info {\n background-color: var(--wje-color-contrast-9);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-0);\n}\n\n.wje-button-outline.wje-color-info {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-9);\n}\n\n.wje-button-link.wje-color-info {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-contrast-9);\n}\n\n/*DEFAULT*/\n.wje-button-solid.wje-color-default {\n background-color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-contrast-3);\n color: var(--wje-color-contrast-11);\n}\n\n.wje-button-outline.wje-color-default {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-5);\n color: var(--wje-color-contrast-11);\n}\n\n.wje-button-link.wje-color-default {\n background-color: transparent;\n border-color: transparent;\n color: var(--wje-color-contrast-11);\n}\n\n:host {\n --wje-padding-top: .4rem;\n --wje-padding-start: .5rem;\n --wje-padding-end: .5rem;\n --wje-padding-bottom: .4rem;\n\n display: inline-flex;\n position: relative;\n width: auto;\n cursor: pointer;\n margin-inline: var(--wje-button-margin-inline);\n}\n\n:host(.wje-button-group-button) {\n display: block;\n}\n\n.native-button {\n font-family: var(--wje-font-family);\n font-size: var(--wje-font-size);\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: 100%;\n min-height: inherit;\n /*overflow: hidden;*/ /* Sposobovalo problemy s badge a tooltip */\n border-width: var(--wje-button-border-width);\n border-style: var(--wje-button-border-style);\n border-color: var(--wje-button-border-color);\n background-color: transparent;\n /*color: var(--wje-button-color);*/\n line-height: 1;\n contain: layout style;\n cursor: pointer;\n z-index: 0;\n box-sizing: border-box;\n appearance: none;\n margin: 0;\n border-radius: var(--wje-button-border-radius);\n padding-top: var(--wje-padding-top);\n padding-bottom: var(--wje-padding-bottom);\n padding-inline: var(--wje-padding-start) var(--wje-padding-end);\n white-space: nowrap;\n}\n\n.native-button:hover {\n outline-style: solid;\n outline-width: var(--wje-button-outline-width);\n transition: outline-width .1s linear;\n}\n\n@media (any-hover: hover) {\n .wje-button-solid.wje-color-primary:hover {\n background-color: var(--wje-color-primary-9);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-primary-2);\n }\n\n .wje-button-outline.wje-color-primary:hover {\n background-color: var(--wje-color-primary-1);\n border-color: var(--wje-color-primary-9);\n color: var(--wje-color-primary-9);\n outline-color: var(--wje-color-primary-2);\n }\n\n .wje-button-link.wje-color-primary:hover {\n background-color: var(--wje-color-primary-1);\n border-color: transparent;\n color: var(--wje-color-primary-9);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-complete:hover {\n background-color: var(--wje-color-complete-9);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-complete-2);\n }\n\n .wje-button-outline.wje-color-complete:hover {\n background-color: var(--wje-color-complete-1);\n border-color: var(--wje-color-complete-9);\n color: var(--wje-color-complete-9);\n outline-color: var(--wje-color-complete-2);\n }\n\n .wje-button-link.wje-color-complete:hover {\n background-color: var(--wje-color-complete-1);\n border-color: transparent;\n color: var(--wje-color-complete-9);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-success:hover {\n background-color: var(--wje-color-success-9);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-success-2);\n }\n\n .wje-button-outline.wje-color-success:hover {\n background-color: var(--wje-color-success-1);\n border-color: var(--wje-color-success-9);\n color: var(--wje-color-success-9);\n outline-color: var(--wje-color-success-2);\n }\n\n .wje-button-link.wje-color-success:hover {\n background-color: var(--wje-color-success-1);\n border-color: transparent;\n color: var(--wje-color-success-9);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-warning:hover {\n background-color: var(--wje-color-warning-9);\n border-color: var(--wje-color-warning-9);\n color: var(--wje-color-black);\n outline-color: var(--wje-color-warning-2);\n }\n\n .wje-button-outline.wje-color-warning:hover {\n background-color: var(--wje-color-warning-1);\n border-color: var(--wje-color-warning-11);\n color: var(--wje-color-warning-11);\n outline-color: var(--wje-color-warning-2);\n }\n\n .wje-button-link.wje-color-warning:hover {\n background-color: var(--wje-color-warning-1);\n border-color: transparent;\n color: var(--wje-color-warning-11);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-danger:hover {\n background-color: var(--wje-color-danger-9);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-danger-2);\n }\n\n .wje-button-outline.wje-color-danger:hover {\n background-color: var(--wje-color-danger-1);\n border-color: var(--wje-color-danger-9);\n color: var(--wje-color-danger-9);\n outline-color: var(--wje-color-danger-2);\n }\n\n .wje-button-link.wje-color-danger:hover {\n background-color: var(--wje-color-danger-1);\n border-color: transparent;\n color: var(--wje-color-danger-9);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-info:hover {\n background-color: var(--wje-color-contrast-9);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-0);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-outline.wje-color-info:hover {\n background-color: var(--wje-color-contrast-1);\n border-color: var(--wje-color-contrast-9);\n color: var(--wje-color-contrast-9);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-link.wje-color-info:hover {\n background-color: var(--wje-color-contrast-3);\n border-color: transparent;\n color: var(--wje-color-contrast-11);\n outline-color: transparent;\n outline-width: 0;\n }\n\n .wje-button-solid.wje-color-default:hover {\n background-color: var(--wje-color-contrast-0);\n border-color: var(--wje-color-contrast-3);\n color: var(--wje-color-contrast-11);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-outline.wje-color-default:hover {\n background-color: var(--wje-color-contrast-2);\n border-color: var(--wje-color-contrast-5);\n color: var(--wje-color-contrast-11);\n outline-color: var(--wje-color-contrast-3);\n }\n\n .wje-button-link.wje-color-default:hover {\n background-color: var(--wje-color-contrast-3);\n border-color: transparent;\n color: var(--wje-color-contrast-11);\n outline-color: transparent;\n outline-width: 0;\n }\n}\n\n.button-inner {\n display: flex;\n position: relative;\n flex-flow: row nowrap;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n z-index: 1;\n line-height: normal;\n}\n\n/*\n[ Link ]\n*/\n\n.wje-button-link {\n border-width: var(--wje-button-border-width);\n border-radius: var(--wje-button-border-radius);\n border-color: transparent;\n background-color: transparent;\n}\n\n/*\n[ Disabled ]\n*/\n\n.wje-button-disabled {\n cursor: default;\n opacity: .5;\n pointer-events: none;\n}\n\n/*\n[ Round ]\n*/\n\n:host([round]) .native-button {\n border-radius: var(--wje-border-radius-pill);\n}\n\n:host([circle]) .native-button {\n border-radius: var(--wje-border-radius-circle);\n aspect-ratio: 1/1;\n width: 1.813rem;\n display: flex;\n align-items: center;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n\n}\n\n:host([size=small]) .native-button {\n --wje-padding-top: .25rem;\n --wje-padding-start: .25rem;\n --wje-padding-end: .25rem;\n --wje-padding-bottom: .25rem;\n}\n\n:host([size=large]) .native-button {\n --wje-padding-top: .6rem;\n --wje-padding-start: .7rem;\n --wje-padding-end: .7rem;\n --wje-padding-bottom: .6rem;\n}\n\n:host([size=small][circle]) .native-button {\n width: 1.5rem;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n}\n\n:host([size=large][circle]) .native-button {\n width: 2.188rem;\n --wje-padding-top: 0;\n --wje-padding-start: 0;\n --wje-padding-end: 0;\n --wje-padding-bottom: 0;\n}\n\n::slotted(wje-icon[slot="start"]) {\n margin: 0 .3rem 0 -.3rem;\n}\n\n::slotted(wje-icon[slot="end"]) {\n margin: 0 -.2rem 0 .3rem;\n}\n\n:host(:not([only-caret])) slot[name="caret"] {\n padding: 0 0 0 .3rem;\n}\n\n:host([only-caret]) slot[name="caret"] {\n padding: 0;\n display: block;\n}\n\n:host(.wje-button-group-first:not(.wje-button-group-last)) .native-button {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n}\n\n:host(.wje-button-group-inner) .native-button {\n border-radius: 0;\n}\n\n:host(.wje-button-group-last:not(.wje-button-group-first)) .native-button {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n}\n\n:host(.wje-button-group-button:not(.wje-button-group-first)) {\n margin-inline-start: calc(-1 * var(--wje-button-border-width)) !important;\n}\n\n::slotted([slot="toggle"]) {\n display: none;\n}\n\n::slotted([slot="toggle"].show) {\n display: block;\n}\n';
13
13
  class Button extends WJElement {
14
14
  /**
15
15
  * Button constructor
package/dist/wje-chip.js CHANGED
@@ -25,6 +25,7 @@ class Chip extends WJElement {
25
25
  let remove = document.createElement("wje-button");
26
26
  remove.setAttribute("part", "remove");
27
27
  remove.setAttribute("fill", "link");
28
+ remove.setAttribute("color", this.color || "default");
28
29
  remove.innerHTML = `<wje-icon name="x"></wje-icon>`;
29
30
  let active = document.createElement("wje-icon");
30
31
  active.setAttribute("name", "check");
package/dist/wje-rate.js CHANGED
@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
5
5
  return value;
6
6
  };
7
7
  import WJElement from "./wje-element.js";
8
- const styles = "/*\n[ WJ Rate ]\n*/\n\n:host {\n --wje-rate-gap: .25rem;\n display: flex;\n}\n\n:host([readonly]) .wje-rate-icon {\n cursor: default;\n}\n\n.native-rate {\n position: relative;\n display: flex;\n gap: var(--wje-rate-gap);\n}\n\n.wje-rate-icon {\n position: relative;\n cursor: pointer;\n}\n\n.selected {\n color: var(--wje-color-danger-9);\n}\n\n:host(:not([readonly])) .wje-rate-icon:hover {\n transform: scale(1.2);\n}\n\nwje-icon:first-child {\n color: var(--wje-color);\n}\n\nwje-icon:last-child {\n color: currentColor;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n:host([disabled]) .native-rate {\n pointer-events: none;\n opacity: .5;\n}\n\n";
8
+ const styles = "/*\n[ WJ Rate ]\n*/\n\n:host {\n display: flex;\n color: var(--wje-rate-color);\n}\n\n:host([readonly]) .wje-rate-icon {\n cursor: default;\n}\n\n.native-rate {\n position: relative;\n display: flex;\n gap: var(--wje-rate-gap);\n}\n\n.wje-rate-icon {\n position: relative;\n cursor: pointer;\n}\n\n.selected {\n color: var(--wje-rate-selected-color);\n}\n\n:host(:not([readonly])) .wje-rate-icon:hover {\n transform: scale(1.2);\n}\n\nwje-icon:first-child {\n color: var(--wje-rate-color);\n}\n\nwje-icon:last-child {\n color: currentColor;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n:host([disabled]) .native-rate {\n pointer-events: none;\n opacity: .5;\n}\n\n";
9
9
  class Rate extends WJElement {
10
10
  /**
11
11
  * Creates an instance of Rate.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "wj-elements",
3
3
  "description": "WebJET Elements is a modern set of user interface tools harnessing the power of web components designed to simplify web application development.",
4
- "version": "0.1.90",
4
+ "version": "0.1.92",
5
5
  "homepage": "https://github.com/lencys/wj-elements",
6
6
  "author": "Lukáš Ondrejček <lukas.ondrejcek@gmail.com>",
7
7
  "license": "MIT",