@nordcode/ui 2.1.8 → 2.1.9

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 (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/out/complete.css +6 -20
  3. package/out/complete_configless.css +6 -20
  4. package/package.json +1 -1
  5. package/src/styles/components/dialogs.css +6 -21
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 2.1.9 (2026-01-02)
2
+
3
+ ### fixes
4
+
5
+ - fix dialog styles
6
+
1
7
  ## 2.1.8 (2026-01-02)
2
8
 
3
9
  ### features
package/out/complete.css CHANGED
@@ -1852,34 +1852,22 @@
1852
1852
  @layer components.dialogs {
1853
1853
  :where(.nc-dialog) {
1854
1854
  --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
1855
- --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
1856
1855
  --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
1857
- --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
1858
- --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
1859
- --_dialog-radius: 0;
1860
- z-index: var(--layer-important);
1861
1856
  border: var(--border-width-thin) solid var(--color-border-base);
1862
1857
  block-size: max-content;
1863
1858
  inline-size: 100dvw;
1864
- max-inline-size: var(--_dialog-max-inline-size);
1859
+ max-inline-size: var(--dialog-max-inline-size, 28rem);
1865
1860
  background: var(--color-surface-base);
1866
- border-radius: var(--_dialog-radius);
1867
- overflow-clip-margin: var(--control-spacing-far, 1em);
1868
- pointer-events: all;
1861
+ border-radius: var(--dialog-radius, var(--border-radius-medium));
1869
1862
  max-block-size: 100dvh;
1870
- margin: auto 0;
1871
1863
  padding: 0;
1872
- display: block;
1873
- position: fixed;
1874
- inset: 0;
1875
- overflow: clip;
1864
+ overflow: hidden;
1876
1865
  }
1877
1866
 
1878
1867
  @media (width >= 36rem) {
1879
1868
  :where(.nc-dialog) {
1880
- --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
1881
- inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
1882
- max-block-size: var(--_dialog-max-block-size);
1869
+ inline-size: calc(100dvw - 2 * var(--layout-padding, var(--spacing-base)));
1870
+ max-block-size: var(--dialog-max-block-size, 90dvh);
1883
1871
  box-shadow: var(--shadow-medium);
1884
1872
  margin-inline: auto;
1885
1873
  }
@@ -1936,14 +1924,12 @@
1936
1924
  :where(.nc-dialog) :where(.dialog-container) {
1937
1925
  block-size: max-content;
1938
1926
  inline-size: 100%;
1939
- max-block-size: var(--_dialog-max-block-size);
1940
- overflow-clip-margin: var(--control-spacing-far, 1em);
1927
+ max-block-size: inherit;
1941
1928
  grid-template: "header header"
1942
1929
  "content content" 1fr
1943
1930
  "footer footer"
1944
1931
  / 1fr 1fr;
1945
1932
  display: grid;
1946
- overflow: clip;
1947
1933
  }
1948
1934
 
1949
1935
  :where(.nc-dialog) :where(.dialog-container) > :first-child {
package/out/complete_configless.css CHANGED
@@ -1636,34 +1636,22 @@
1636
1636
  @layer components.dialogs {
1637
1637
  :where(.nc-dialog) {
1638
1638
  --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
1639
- --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
1640
1639
  --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
1641
- --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
1642
- --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
1643
- --_dialog-radius: 0;
1644
- z-index: var(--layer-important);
1645
1640
  border: var(--border-width-thin) solid var(--color-border-base);
1646
1641
  block-size: max-content;
1647
1642
  inline-size: 100dvw;
1648
- max-inline-size: var(--_dialog-max-inline-size);
1643
+ max-inline-size: var(--dialog-max-inline-size, 28rem);
1649
1644
  background: var(--color-surface-base);
1650
- border-radius: var(--_dialog-radius);
1651
- overflow-clip-margin: var(--control-spacing-far, 1em);
1652
- pointer-events: all;
1645
+ border-radius: var(--dialog-radius, var(--border-radius-medium));
1653
1646
  max-block-size: 100dvh;
1654
- margin: auto 0;
1655
1647
  padding: 0;
1656
- display: block;
1657
- position: fixed;
1658
- inset: 0;
1659
- overflow: clip;
1648
+ overflow: hidden;
1660
1649
  }
1661
1650
 
1662
1651
  @media (width >= 36rem) {
1663
1652
  :where(.nc-dialog) {
1664
- --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
1665
- inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
1666
- max-block-size: var(--_dialog-max-block-size);
1653
+ inline-size: calc(100dvw - 2 * var(--layout-padding, var(--spacing-base)));
1654
+ max-block-size: var(--dialog-max-block-size, 90dvh);
1667
1655
  box-shadow: var(--shadow-medium);
1668
1656
  margin-inline: auto;
1669
1657
  }
@@ -1720,14 +1708,12 @@
1720
1708
  :where(.nc-dialog) :where(.dialog-container) {
1721
1709
  block-size: max-content;
1722
1710
  inline-size: 100%;
1723
- max-block-size: var(--_dialog-max-block-size);
1724
- overflow-clip-margin: var(--control-spacing-far, 1em);
1711
+ max-block-size: inherit;
1725
1712
  grid-template: "header header"
1726
1713
  "content content" 1fr
1727
1714
  "footer footer"
1728
1715
  / 1fr 1fr;
1729
1716
  display: grid;
1730
- overflow: clip;
1731
1717
  }
1732
1718
 
1733
1719
  :where(.nc-dialog) :where(.dialog-container) > :first-child {
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "type": "git",
13
13
  "url": "https://github.com/nordcode-agency/nordcode/tree/main/packages/ui"
14
14
  },
15
- "version": "2.1.8",
15
+ "version": "2.1.9",
16
16
  "publishConfig": {
17
17
  "access": "public"
18
18
  },
package/src/styles/components/dialogs.css CHANGED
@@ -1,34 +1,21 @@
1
1
  @layer components.dialogs {
2
2
  :where(.nc-dialog) {
3
3
  --_dialog-padding-inline: var(--dialog-padding-inline, var(--spacing-base));
4
- --_dialog-layout-padding: var(--layout-padding, var(--spacing-base));
5
4
  --_dialog-close-size: var(--dialog-close-size, var(--control-height-base));
6
5
 
7
- --_dialog-max-block-size: var(--dialog-max-block-size, 90dvh);
8
- --_dialog-max-inline-size: var(--dialog-max-inline-size, 28rem);
9
-
10
- --_dialog-radius: 0;
11
- display: block;
12
- z-index: var(--layer-important);
13
- position: fixed;
14
- inset: 0;
15
6
  border: var(--border-width-thin) solid var(--color-border-base);
16
7
  inline-size: 100dvw;
17
8
  block-size: max-content;
18
- max-inline-size: var(--_dialog-max-inline-size);
9
+ max-inline-size: var(--dialog-max-inline-size, 28rem);
19
10
  max-block-size: 100dvh;
20
11
  background: var(--color-surface-base);
21
- margin: auto 0;
22
12
  padding: 0;
23
- border-radius: var(--_dialog-radius);
24
- overflow: clip;
25
- overflow-clip-margin: var(--control-spacing-far, 1em);
26
- pointer-events: all;
13
+ overflow: hidden;
14
+ border-radius: var(--dialog-radius, var(--border-radius-medium));
27
15
 
28
16
  @media (min-width: 36rem) {
29
- --_dialog-radius: var(--dialog-radius, var(--border-radius-medium));
30
- inline-size: calc(100dvw - 2 * var(--_dialog-layout-padding));
31
- max-block-size: var(--_dialog-max-block-size);
17
+ inline-size: calc(100dvw - 2 * var(--layout-padding, var(--spacing-base)));
18
+ max-block-size: var(--dialog-max-block-size, 90dvh);
32
19
  margin-inline: auto;
33
20
  box-shadow: var(--shadow-medium);
34
21
  }
@@ -102,9 +89,7 @@
102
89
  "footer footer" auto / 1fr 1fr;
103
90
  inline-size: 100%;
104
91
  block-size: max-content;
105
- max-block-size: var(--_dialog-max-block-size);
106
- overflow: clip;
107
- overflow-clip-margin: var(--control-spacing-far, 1em);
92
+ max-block-size: inherit;
108
93
 
109
94
  & > *:first-child {
110
95
  border-radius: var(--_dialog-radius) var(--_dialog-radius) 0 0;