@reliability-design/web 1.1.1 → 1.2.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 (64) hide show
  1. package/dist/components/rel-accordion/rel-accordion.ts +17 -32
  2. package/dist/components/rel-alert/rel-alert.ts +34 -34
  3. package/dist/components/rel-avatar/rel-avatar.ts +5 -3
  4. package/dist/components/rel-badge/rel-badge.ts +2 -1
  5. package/dist/components/rel-breadcrumb/rel-breadcrumb.ts +6 -6
  6. package/dist/components/rel-button/rel-button.ts +67 -21
  7. package/dist/components/rel-calendar/rel-calendar.ts +15 -8
  8. package/dist/components/rel-card/rel-card.ts +9 -17
  9. package/dist/components/rel-cardmedia/rel-cardmedia.ts +20 -23
  10. package/dist/components/rel-carousel/rel-carousel.ts +596 -468
  11. package/dist/components/rel-checkbox/rel-checkbox.ts +68 -16
  12. package/dist/components/rel-chip/rel-chip.ts +291 -244
  13. package/dist/components/rel-container/rel-container.ts +2 -2
  14. package/dist/components/rel-date-picker/rel-date-picker.ts +23 -19
  15. package/dist/components/rel-divider/rel-divider.ts +3 -3
  16. package/dist/components/rel-drawer/rel-drawer-footer.ts +0 -2
  17. package/dist/components/rel-drawer/rel-drawer.ts +41 -88
  18. package/dist/components/rel-kbd/rel-kbd.ts +94 -118
  19. package/dist/components/rel-layout/rel-layout.ts +49 -58
  20. package/dist/components/rel-menu/rel-menu.ts +359 -359
  21. package/dist/components/rel-menubar/rel-menubar-menu.css +3 -0
  22. package/dist/components/rel-menubar/rel-menubar-menu.ts +2 -1
  23. package/dist/components/rel-menubar/rel-menubar.ts +602 -605
  24. package/dist/components/rel-otp/rel-otp.ts +22 -25
  25. package/dist/components/rel-pagination/rel-pagination.ts +101 -57
  26. package/dist/components/rel-popover/rel-popover-content.ts +6 -5
  27. package/dist/components/rel-popover/rel-popover.ts +26 -7
  28. package/dist/components/rel-progress/rel-progress.ts +10 -9
  29. package/dist/components/rel-radio/rel-radio.ts +228 -172
  30. package/dist/components/rel-range-picker/rel-range-picker.css +349 -0
  31. package/dist/components/rel-range-picker/rel-range-picker.ts +1079 -0
  32. package/dist/components/rel-resizable/rel-resizable-handle.ts +8 -7
  33. package/dist/components/rel-segmented-button/rel-segmented-button.ts +41 -20
  34. package/dist/components/rel-select/rel-select.ts +103 -32
  35. package/dist/components/rel-sheet/rel-sheet.ts +362 -684
  36. package/dist/components/rel-slider/rel-slider.ts +49 -27
  37. package/dist/components/rel-snackbar/rel-snackbar.ts +28 -28
  38. package/dist/components/rel-stepper/rel-stepper.ts +11 -10
  39. package/dist/components/rel-switch/rel-switch.ts +7 -6
  40. package/dist/components/rel-tab/rel-tab.ts +15 -29
  41. package/dist/components/rel-textfield/rel-textfield.ts +144 -35
  42. package/dist/components/rel-toast/rel-toast.ts +25 -12
  43. package/dist/components/rel-tooltip/rel-tooltip.ts +123 -123
  44. package/dist/components/rel-topbar/rel-topbar-actions.ts +1 -0
  45. package/dist/components/rel-topbar/rel-topbar-brand.ts +1 -0
  46. package/dist/components/rel-topbar/rel-topbar-dropdown-item.ts +32 -2
  47. package/dist/components/rel-topbar/rel-topbar-dropdown.ts +1 -1
  48. package/dist/components/rel-topbar/rel-topbar-item.ts +15 -10
  49. package/dist/components/rel-topbar/rel-topbar-mobile-panel.ts +1 -0
  50. package/dist/components/rel-topbar/rel-topbar-profile.ts +30 -56
  51. package/dist/components/rel-topbar/rel-topbar-utilities.ts +1 -0
  52. package/dist/components/rel-topbar/rel-topbar.ts +137 -28
  53. package/dist/index.d.mts +153 -178
  54. package/dist/index.d.ts +153 -178
  55. package/dist/index.js +4711 -3875
  56. package/dist/index.js.map +1 -1
  57. package/dist/index.mjs +4047 -3202
  58. package/dist/index.mjs.map +1 -1
  59. package/dist/rel-menubar-menu-BEEQDAXW.css +3 -0
  60. package/dist/styles/vars-v2.css +525 -0
  61. package/dist/styles/vars.css +346 -346
  62. package/dist/{vars-TBB4BMSD.css → vars-I2PC74XD.css} +346 -346
  63. package/dist/vars-v2-VMGWTFJZ.css +525 -0
  64. package/package.json +2 -1
package/dist/components/rel-cardmedia/rel-cardmedia.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { LitElement, html, css } from "lit";
2
2
  import { customElement, property } from "lit/decorators.js";
3
+ import "../../styles/vars-v2.css";
3
4
 
4
5
  @customElement("rel-card-media")
5
6
  export class RelCardMedia extends LitElement {
6
- @property({ type: String }) imageSrc = "";
7
- @property({ type: String }) imageAlt = "Card image";
7
+ @property({ type: String, attribute: "image-src" }) imageSrc = "";
8
+ @property({ type: String, attribute: "image-alt" }) imageAlt = "Card image";
8
9
  @property({ type: String }) title = "";
9
10
  @property({ type: String }) subtitle = "";
10
11
 
@@ -15,26 +16,11 @@ export class RelCardMedia extends LitElement {
15
16
  }
16
17
 
17
18
  .card-media {
18
- background-color: var(--rel-colors-white, #fff);
19
- color: var(--rel-text-primary, #333);
20
- border-radius: var(--rel-borders-radius-border-radius-300);
19
+ background-color: var(--rel-color-bg-primary);
20
+ color: var(--rel-color-text-primary);
21
+ border-radius: var(--rel-borders-radius-border-radius-200);
22
+ border: 1px solid var(--rel-color-border-default);
21
23
  overflow: hidden;
22
- box-shadow: var(--rel-shadows-shadow-200);
23
- transition: transform 0.2s ease, box-shadow 0.2s ease;
24
- }
25
-
26
- .card-media:hover {
27
- transform: translateY(-4px);
28
- box-shadow: var(--rel-shadows-shadow-300);
29
- }
30
-
31
- @media (prefers-reduced-motion: reduce) {
32
- .card-media {
33
- transition: none;
34
- }
35
- .card-media:hover {
36
- transform: none;
37
- }
38
24
  }
39
25
 
40
26
  .card-image img {
@@ -52,13 +38,24 @@ export class RelCardMedia extends LitElement {
52
38
  margin: 0 0 4px 0;
53
39
  font-size: var(--rel-fontSizes-md);
54
40
  font-weight: var(--rel-fontWeights-semibold);
55
- color: var(--rel-text-heading, #2b2b2b);
41
+ color: var(--rel-color-text-heading);
56
42
  }
57
43
 
58
44
  .card-content p {
59
45
  margin: 0 0 8px 0;
60
46
  font-size: var(--rel-fontSizes-sm);
61
- color: var(--rel-text-primary, #333);
47
+ color: var(--rel-color-text-primary);
48
+ }
49
+
50
+ :host-context([data-theme="dark"]) .card-media,
51
+ :host-context(.dark) .card-media {
52
+ background-color: var(--rel-color-bg-primary);
53
+ border-color: var(--rel-color-border-default);
54
+ }
55
+
56
+ :host-context([data-theme="dark"]) .card-content h3,
57
+ :host-context(.dark) .card-content h3 {
58
+ color: var(--rel-color-text-heading);
62
59
  }
63
60
  `;
64
61