@muraldevkit/ui-toolkit 4.11.1 → 4.12.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 (13) hide show
  1. package/dist/components/filter/MrlFilter/MrlFilter.d.ts +28 -0
  2. package/dist/components/filter/MrlFilter/index.d.ts +1 -0
  3. package/dist/components/filter/MrlFilterContext/MrlFilterContext.d.ts +34 -0
  4. package/dist/components/filter/MrlFilterContext/index.d.ts +1 -0
  5. package/dist/components/filter/MrlFilterItem/MrlFilterItem.d.ts +23 -0
  6. package/dist/components/filter/MrlFilterItem/index.d.ts +1 -0
  7. package/dist/components/filter/index.d.ts +3 -0
  8. package/dist/components/index.d.ts +1 -0
  9. package/dist/index.js +1 -1
  10. package/dist/styles/MrlFilter/module.scss +5 -0
  11. package/dist/styles/MrlFilterItem/module.scss +54 -0
  12. package/dist/styles.css +2 -0
  13. package/package.json +1 -1
package/dist/styles/MrlFilter/module.scss ADDED
@@ -0,0 +1,5 @@
1
+ .MrlFilter {
2
+ display: flex;
3
+ gap: var(--mrl-spacing-02);
4
+ margin: var(--mrl-spacing-05) 0;
5
+ }
package/dist/styles/MrlFilterItem/module.scss ADDED
@@ -0,0 +1,54 @@
1
+ @use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
2
+ .MrlFilterItem {
3
+ align-items: center;
4
+ background-color: var(--mrl-color-background-decorative);
5
+ border-radius: var(--mrl-border-radius-rounded);
6
+ color: rgba(var(--mrl-gray-100), 1);
7
+ display: flex;
8
+ font-family: var(--mrl-body-font);
9
+ font-size: var(--mrl-font-size-02);
10
+ font-weight: var(--mrl-font-weight-04);
11
+ gap: var(--mrl-spacing-02);
12
+ height: var(--mrl-spacing-08);
13
+ justify-content: center;
14
+ line-height: var(--mrl-line-height-06);
15
+ min-width: 3.5rem;
16
+ outline-color: transparent;
17
+ padding: var(--mrl-spacing-03) var(--mrl-spacing-04);
18
+ text-align: center;
19
+ text-transform: capitalize;
20
+ transition: outline-color var(--mrl-duration-04) var(--mrl-timing-m2),
21
+ background-color var(--mrl-duration-04) var(--mrl-timing-m2),
22
+ color var(--mrl-duration-04) var(--mrl-timing-m2);
23
+ :global(.MrlBadge) {
24
+ border-radius: var(--mrl-border-radius-rounded);
25
+ color: rgba(var(--mrl-gray-100), 1);
26
+ font-size: 0.625rem;
27
+ font-weight: var(--mrl-font-weight-04);
28
+ height: var(--mrl-spacing-05);
29
+ line-height: var(--mrl-line-height-02);
30
+ padding: var(--mrl-spacing-01) var(--mrl-spacing-02);
31
+ transition: outline-color var(--mrl-duration-04) var(--mrl-timing-m2),
32
+ background-color var(--mrl-duration-04) var(--mrl-timing-m2),
33
+ color var(--mrl-duration-04) var(--mrl-timing-m2);
34
+ }
35
+ &:focus-within {
36
+ outline: var(--mrl-line-width-focus) solid var(--mrl-color-focus);
37
+ outline-offset: var(--mrl-space-offset-focus);
38
+ }
39
+ &:hover {
40
+ background-color: var(--mrl-color-background-highlight-emph-active);
41
+ cursor: pointer;
42
+ }
43
+ &[aria-checked='true'] {
44
+ background-color: var(--mrl-color-background-inverse);
45
+ color: var(--mrl-color-text-inverse-selected);
46
+ :global(.MrlBadge) {
47
+ background-color: var(--mrl-color-background);
48
+ color: rgba(var(--mrl-gray-100), 1);
49
+ }
50
+ }
51
+ }
52
+ .MrlFilterItem-has-count {
53
+ padding-right: var(--mrl-spacing-03);
54
+ }
package/dist/styles.css CHANGED
@@ -92,3 +92,5 @@
92
92
  .MrlPanelStickyHeader--I1FiZ{background-color:var(--mrl-color-background);position:sticky;top:0}.MrlPanelStickyHeader--I1FiZ::after{background:var(--mrl-color-background);content:"";display:block;inset:0 calc(-1*var(--mrl-spacing-03));pointer-events:all;position:absolute;z-index:-1}
93
93
  .MrlToolbar--Lrhb6{align-items:center;background:var(--mrl-color-background);border-radius:var(--mrl-border-radius-container);box-shadow:var(--mrl-shadows-lifted);cursor:default;display:flex;gap:var(--mrl-spacing-02);min-height:3rem;padding:var(--mrl-spacing-03);pointer-events:all;transition:opacity var(--mrl-duration-03) var(--mrl-timing-m3)}.MrlToolbar-inverse--OwdSd{background:var(--mrl-color-background-inverse);box-shadow:none;color:var(--mrl-color-text-inverse)}.MrlToolbar-skeleton--eWZQv.MrlToolbar-vertical--hO8hj{background-color:rgba(var(--mrl-gray-30), 1)}.MrlToolbar-medium--FKg7Y{gap:calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));min-height:3.5rem;padding:calc(var(--mrl-spacing-02) + var(--mrl-spacing-01))}.MrlToolbar-xsmall--St9Ez{gap:var(--mrl-spacing-01);min-height:2rem;padding:var(--mrl-spacing-02)}.MrlToolbar-vertical--hO8hj{flex-direction:column;min-height:0;min-width:3rem}.MrlToolbar-vertical--hO8hj.MrlToolbar-medium--FKg7Y{min-width:3.5rem}.MrlToolbar-vertical--hO8hj.MrlToolbar-xsmall--St9Ez{min-width:2rem}.MrlToolbar-spaced--gmE0X{gap:var(--mrl-spacing-05);padding-left:var(--mrl-spacing-05)}.MrlToolbar-spaced--gmE0X .mrlButton--Oymf3+.mrlButton--Oymf3{margin-left:calc(var(--mrl-spacing-03)/2*-1)}
94
94
  .MrlToolbarButtonIcon--Oetsi{margin-right:var(--mrl-spacing-03)}
95
+ .mrl-u-focus-wrapper--f4yRC{position:relative}.MrlFilterItem--qYLqp{align-items:center;background-color:var(--mrl-color-background-decorative);border-radius:var(--mrl-border-radius-rounded);color:rgba(var(--mrl-gray-100), 1);display:flex;font-family:var(--mrl-body-font);font-size:var(--mrl-font-size-02);font-weight:var(--mrl-font-weight-04);gap:var(--mrl-spacing-02);height:var(--mrl-spacing-08);justify-content:center;line-height:var(--mrl-line-height-06);min-width:3.5rem;outline-color:rgba(0,0,0,0);padding:var(--mrl-spacing-03) var(--mrl-spacing-04);text-align:center;text-transform:capitalize;transition:outline-color var(--mrl-duration-04) var(--mrl-timing-m2),background-color var(--mrl-duration-04) var(--mrl-timing-m2),color var(--mrl-duration-04) var(--mrl-timing-m2)}.MrlFilterItem--qYLqp .MrlBadge{border-radius:var(--mrl-border-radius-rounded);color:rgba(var(--mrl-gray-100), 1);font-size:.625rem;font-weight:var(--mrl-font-weight-04);height:var(--mrl-spacing-05);line-height:var(--mrl-line-height-02);padding:var(--mrl-spacing-01) var(--mrl-spacing-02);transition:outline-color var(--mrl-duration-04) var(--mrl-timing-m2),background-color var(--mrl-duration-04) var(--mrl-timing-m2),color var(--mrl-duration-04) var(--mrl-timing-m2)}.MrlFilterItem--qYLqp:focus-within{outline:var(--mrl-line-width-focus) solid var(--mrl-color-focus);outline-offset:var(--mrl-space-offset-focus)}.MrlFilterItem--qYLqp:hover{background-color:var(--mrl-color-background-highlight-emph-active);cursor:pointer}.MrlFilterItem--qYLqp[aria-checked=true]{background-color:var(--mrl-color-background-inverse);color:var(--mrl-color-text-inverse-selected)}.MrlFilterItem--qYLqp[aria-checked=true] .MrlBadge{background-color:var(--mrl-color-background);color:rgba(var(--mrl-gray-100), 1)}.MrlFilterItem-has-count--sHcsy{padding-right:var(--mrl-spacing-03)}
96
+ .MrlFilter--f_g2l{display:flex;gap:var(--mrl-spacing-02);margin:var(--mrl-spacing-05) 0}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ui-toolkit",
3
- "version": "4.11.1",
3
+ "version": "4.12.0",
4
4
  "description": "Mural's UI Toolkit",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",