@cck-ui/core 0.34.0 → 0.34.1

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 (3) hide show
  1. package/package.json +1 -1
  2. package/styles.css +115 -115
  3. package/styles.layer.css +115 -115
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cck-ui/core",
3
- "version": "0.34.0",
3
+ "version": "0.34.1",
4
4
  "description": "Vue component library focused on usability, accessibility and developer experience",
5
5
  "homepage": "https://cck-ui.jackatlas.xyz",
6
6
  "license": "ISC",
package/styles.css CHANGED
@@ -714,6 +714,121 @@ fieldset:disabled .c-active:active {
714
714
  display: -webkit-box;
715
715
  }
716
716
 
717
+ .m_a4a0a883 {
718
+ --paper-radius: var(--c-radius-default);
719
+
720
+ outline: 0;
721
+ -webkit-tap-heighlight-color: transparent;
722
+ display: block;
723
+ touch-action: manipulation;
724
+ text-decoration: none;
725
+ border-radius: var(--paper-radius);
726
+ box-shadow: var(--paper-shadow);
727
+ background-color: var(--c-color-body);
728
+ }
729
+
730
+ [data-c-color-scheme='light'] .m_a4a0a883 {
731
+ --paper-border-color: var(--c-color-gray-3);
732
+ }
733
+
734
+ [data-c-color-scheme='dark'] .m_a4a0a883 {
735
+ --paper-border-color: var(--c-color-dark-4);
736
+ }
737
+
738
+ .m_a4a0a883:where([data-with-border]) {
739
+ border: calc(0.0625rem * var(--c-scale)) solid var(--paper-border-color);
740
+ }
741
+
742
+ .m_6ea3917f {
743
+ --card-padding: var(--c-spacing-md);
744
+
745
+ position: relative;
746
+ overflow: hidden;
747
+ display: flex;
748
+ padding: var(--card-padding);
749
+ color: var(--c-color-text);
750
+ }
751
+
752
+ .m_6ea3917f:where([data-orientation='horizontal']) {
753
+ flex-direction: row;
754
+ }
755
+
756
+ .m_6ea3917f:where([data-orientation='vertical']) {
757
+ flex-direction: column;
758
+ }
759
+
760
+ :where([data-c-color-scheme='light']) .m_6ea3917f {
761
+ background-color: var(--c-color-white);
762
+ }
763
+
764
+ :where([data-c-color-scheme='dark']) .m_6ea3917f {
765
+ background-color: var(--c-color-dark-6);
766
+ }
767
+
768
+ .m_4fcecd28 {
769
+ display: block;
770
+ margin-inline: calc(var(--card-padding) * -1);
771
+ }
772
+
773
+ :where([data-c-color-scheme='light']) .m_4fcecd28 {
774
+ --border-color: var(--c-color-gray-3);
775
+ }
776
+
777
+ :where([data-c-color-scheme='dark']) .m_4fcecd28 {
778
+ --border-color: var(--c-color-dark-4);
779
+ }
780
+
781
+ .m_4fcecd28:where([data-orientation='vertical']):first-child {
782
+ margin-top: calc(var(--card-padding) * -1);
783
+ border-top: none !important;
784
+ }
785
+
786
+ .m_4fcecd28:where([data-orientation='vertical']):last-child {
787
+ margin-bottom: calc(var(--card-padding) * -1);
788
+ border-bottom: none !important;
789
+ }
790
+
791
+ .m_4fcecd28:where([data-orientation='vertical'])[data-inherit-padding] {
792
+ padding-inline: var(--card-padding);
793
+ }
794
+
795
+ .m_4fcecd28:where([data-orientation='vertical'])[data-with-border] {
796
+ border-top: 1px solid var(--border-color);
797
+ border-bottom: 1px solid var(--border-color);
798
+ }
799
+
800
+ .m_4fcecd28:where([data-orientation='vertical']) + .m_4fcecd28:where([data-orientation='vertical']) {
801
+ border-top: none !important;
802
+ }
803
+
804
+ .m_4fcecd28:where([data-orientation='horizontal']) {
805
+ margin-block: calc(var(--card-padding) * -1);
806
+ margin-inline: 0;
807
+ }
808
+
809
+ .m_4fcecd28:where([data-orientation='horizontal']):first-child {
810
+ margin-inline-start: calc(var(--card-padding) * -1);
811
+ border-inline-start: none !important;
812
+ }
813
+
814
+ .m_4fcecd28:where([data-orientation='horizontal']):last-child {
815
+ margin-inline-end: calc(var(--card-padding) * -1);
816
+ border-inline-end: none !important;
817
+ }
818
+
819
+ .m_4fcecd28:where([data-orientation='horizontal'])[data-inherit-padding] {
820
+ padding-block: var(--card-padding);
821
+ }
822
+
823
+ .m_4fcecd28:where([data-orientation='horizontal'])[data-with-border] {
824
+ border-inline-start: 1px solid var(--border-color);
825
+ border-inline-end: 1px solid var(--border-color);
826
+ }
827
+
828
+ .m_4fcecd28:where([data-orientation='horizontal']) + .m_4fcecd28:where([data-orientation='horizontal']) {
829
+ border-inline-start: none !important;
830
+ }
831
+
717
832
  .m_537a2afc {
718
833
  background-color: transparent;
719
834
  cursor: pointer;
@@ -1587,96 +1702,6 @@ fieldset:disabled .c-active:active {
1587
1702
  transform: translateY(calc(var(--burger-size) / -3)) rotate(-45deg);
1588
1703
  }
1589
1704
 
1590
- .m_6ea3917f {
1591
- --card-padding: var(--c-spacing-md);
1592
-
1593
- position: relative;
1594
- overflow: hidden;
1595
- display: flex;
1596
- padding: var(--card-padding);
1597
- color: var(--c-color-text);
1598
- }
1599
-
1600
- .m_6ea3917f:where([data-orientation='horizontal']) {
1601
- flex-direction: row;
1602
- }
1603
-
1604
- .m_6ea3917f:where([data-orientation='vertical']) {
1605
- flex-direction: column;
1606
- }
1607
-
1608
- :where([data-c-color-scheme='light']) .m_6ea3917f {
1609
- background-color: var(--c-color-white);
1610
- }
1611
-
1612
- :where([data-c-color-scheme='dark']) .m_6ea3917f {
1613
- background-color: var(--c-color-dark-6);
1614
- }
1615
-
1616
- .m_4fcecd28 {
1617
- display: block;
1618
- margin-inline: calc(var(--card-padding) * -1);
1619
- }
1620
-
1621
- :where([data-c-color-scheme='light']) .m_4fcecd28 {
1622
- --border-color: var(--c-color-gray-3);
1623
- }
1624
-
1625
- :where([data-c-color-scheme='dark']) .m_4fcecd28 {
1626
- --border-color: var(--c-color-dark-4);
1627
- }
1628
-
1629
- .m_4fcecd28:where([data-orientation='vertical']):first-child {
1630
- margin-top: calc(var(--card-padding) * -1);
1631
- border-top: none !important;
1632
- }
1633
-
1634
- .m_4fcecd28:where([data-orientation='vertical']):last-child {
1635
- margin-bottom: calc(var(--card-padding) * -1);
1636
- border-bottom: none !important;
1637
- }
1638
-
1639
- .m_4fcecd28:where([data-orientation='vertical'])[data-inherit-padding] {
1640
- padding-inline: var(--card-padding);
1641
- }
1642
-
1643
- .m_4fcecd28:where([data-orientation='vertical'])[data-with-border] {
1644
- border-top: 1px solid var(--border-color);
1645
- border-bottom: 1px solid var(--border-color);
1646
- }
1647
-
1648
- .m_4fcecd28:where([data-orientation='vertical']) + .m_4fcecd28:where([data-orientation='vertical']) {
1649
- border-top: none !important;
1650
- }
1651
-
1652
- .m_4fcecd28:where([data-orientation='horizontal']) {
1653
- margin-block: calc(var(--card-padding) * -1);
1654
- margin-inline: 0;
1655
- }
1656
-
1657
- .m_4fcecd28:where([data-orientation='horizontal']):first-child {
1658
- margin-inline-start: calc(var(--card-padding) * -1);
1659
- border-inline-start: none !important;
1660
- }
1661
-
1662
- .m_4fcecd28:where([data-orientation='horizontal']):last-child {
1663
- margin-inline-end: calc(var(--card-padding) * -1);
1664
- border-inline-end: none !important;
1665
- }
1666
-
1667
- .m_4fcecd28:where([data-orientation='horizontal'])[data-inherit-padding] {
1668
- padding-block: var(--card-padding);
1669
- }
1670
-
1671
- .m_4fcecd28:where([data-orientation='horizontal'])[data-with-border] {
1672
- border-inline-start: 1px solid var(--border-color);
1673
- border-inline-end: 1px solid var(--border-color);
1674
- }
1675
-
1676
- .m_4fcecd28:where([data-orientation='horizontal']) + .m_4fcecd28:where([data-orientation='horizontal']) {
1677
- border-inline-start: none !important;
1678
- }
1679
-
1680
1705
  .m_e0e8435a {
1681
1706
  display: flex;
1682
1707
  align-items: center;
@@ -2147,31 +2172,6 @@ fieldset:disabled .c-active:active {
2147
2172
  animation: m_1309882b 1.2s linear infinite;
2148
2173
  }
2149
2174
 
2150
- .m_a4a0a883 {
2151
- --paper-radius: var(--c-radius-default);
2152
-
2153
- outline: 0;
2154
- -webkit-tap-heighlight-color: transparent;
2155
- display: block;
2156
- touch-action: manipulation;
2157
- text-decoration: none;
2158
- border-radius: var(--paper-radius);
2159
- box-shadow: var(--paper-shadow);
2160
- background-color: var(--c-color-body);
2161
- }
2162
-
2163
- [data-c-color-scheme='light'] .m_a4a0a883 {
2164
- --paper-border-color: var(--c-color-gray-3);
2165
- }
2166
-
2167
- [data-c-color-scheme='dark'] .m_a4a0a883 {
2168
- --paper-border-color: var(--c-color-dark-4);
2169
- }
2170
-
2171
- .m_a4a0a883:where([data-with-border]) {
2172
- border: calc(0.0625rem * var(--c-scale)) solid var(--paper-border-color);
2173
- }
2174
-
2175
2175
  .m_6f2f9f44 {
2176
2176
  --scp-filled-segment-color: var(--c-primary-color-filled);
2177
2177
  --scp-transition-duration: 0ms;
package/styles.layer.css CHANGED
@@ -714,6 +714,121 @@ fieldset:disabled .c-active:active {
714
714
  display: -webkit-box;
715
715
  }
716
716
 
717
+ .m_a4a0a883 {
718
+ --paper-radius: var(--c-radius-default);
719
+
720
+ outline: 0;
721
+ -webkit-tap-heighlight-color: transparent;
722
+ display: block;
723
+ touch-action: manipulation;
724
+ text-decoration: none;
725
+ border-radius: var(--paper-radius);
726
+ box-shadow: var(--paper-shadow);
727
+ background-color: var(--c-color-body);
728
+ }
729
+
730
+ [data-c-color-scheme='light'] .m_a4a0a883 {
731
+ --paper-border-color: var(--c-color-gray-3);
732
+ }
733
+
734
+ [data-c-color-scheme='dark'] .m_a4a0a883 {
735
+ --paper-border-color: var(--c-color-dark-4);
736
+ }
737
+
738
+ .m_a4a0a883:where([data-with-border]) {
739
+ border: calc(0.0625rem * var(--c-scale)) solid var(--paper-border-color);
740
+ }
741
+
742
+ .m_6ea3917f {
743
+ --card-padding: var(--c-spacing-md);
744
+
745
+ position: relative;
746
+ overflow: hidden;
747
+ display: flex;
748
+ padding: var(--card-padding);
749
+ color: var(--c-color-text);
750
+ }
751
+
752
+ .m_6ea3917f:where([data-orientation='horizontal']) {
753
+ flex-direction: row;
754
+ }
755
+
756
+ .m_6ea3917f:where([data-orientation='vertical']) {
757
+ flex-direction: column;
758
+ }
759
+
760
+ :where([data-c-color-scheme='light']) .m_6ea3917f {
761
+ background-color: var(--c-color-white);
762
+ }
763
+
764
+ :where([data-c-color-scheme='dark']) .m_6ea3917f {
765
+ background-color: var(--c-color-dark-6);
766
+ }
767
+
768
+ .m_4fcecd28 {
769
+ display: block;
770
+ margin-inline: calc(var(--card-padding) * -1);
771
+ }
772
+
773
+ :where([data-c-color-scheme='light']) .m_4fcecd28 {
774
+ --border-color: var(--c-color-gray-3);
775
+ }
776
+
777
+ :where([data-c-color-scheme='dark']) .m_4fcecd28 {
778
+ --border-color: var(--c-color-dark-4);
779
+ }
780
+
781
+ .m_4fcecd28:where([data-orientation='vertical']):first-child {
782
+ margin-top: calc(var(--card-padding) * -1);
783
+ border-top: none !important;
784
+ }
785
+
786
+ .m_4fcecd28:where([data-orientation='vertical']):last-child {
787
+ margin-bottom: calc(var(--card-padding) * -1);
788
+ border-bottom: none !important;
789
+ }
790
+
791
+ .m_4fcecd28:where([data-orientation='vertical'])[data-inherit-padding] {
792
+ padding-inline: var(--card-padding);
793
+ }
794
+
795
+ .m_4fcecd28:where([data-orientation='vertical'])[data-with-border] {
796
+ border-top: 1px solid var(--border-color);
797
+ border-bottom: 1px solid var(--border-color);
798
+ }
799
+
800
+ .m_4fcecd28:where([data-orientation='vertical']) + .m_4fcecd28:where([data-orientation='vertical']) {
801
+ border-top: none !important;
802
+ }
803
+
804
+ .m_4fcecd28:where([data-orientation='horizontal']) {
805
+ margin-block: calc(var(--card-padding) * -1);
806
+ margin-inline: 0;
807
+ }
808
+
809
+ .m_4fcecd28:where([data-orientation='horizontal']):first-child {
810
+ margin-inline-start: calc(var(--card-padding) * -1);
811
+ border-inline-start: none !important;
812
+ }
813
+
814
+ .m_4fcecd28:where([data-orientation='horizontal']):last-child {
815
+ margin-inline-end: calc(var(--card-padding) * -1);
816
+ border-inline-end: none !important;
817
+ }
818
+
819
+ .m_4fcecd28:where([data-orientation='horizontal'])[data-inherit-padding] {
820
+ padding-block: var(--card-padding);
821
+ }
822
+
823
+ .m_4fcecd28:where([data-orientation='horizontal'])[data-with-border] {
824
+ border-inline-start: 1px solid var(--border-color);
825
+ border-inline-end: 1px solid var(--border-color);
826
+ }
827
+
828
+ .m_4fcecd28:where([data-orientation='horizontal']) + .m_4fcecd28:where([data-orientation='horizontal']) {
829
+ border-inline-start: none !important;
830
+ }
831
+
717
832
  .m_537a2afc {
718
833
  background-color: transparent;
719
834
  cursor: pointer;
@@ -1587,96 +1702,6 @@ fieldset:disabled .c-active:active {
1587
1702
  transform: translateY(calc(var(--burger-size) / -3)) rotate(-45deg);
1588
1703
  }
1589
1704
 
1590
- .m_6ea3917f {
1591
- --card-padding: var(--c-spacing-md);
1592
-
1593
- position: relative;
1594
- overflow: hidden;
1595
- display: flex;
1596
- padding: var(--card-padding);
1597
- color: var(--c-color-text);
1598
- }
1599
-
1600
- .m_6ea3917f:where([data-orientation='horizontal']) {
1601
- flex-direction: row;
1602
- }
1603
-
1604
- .m_6ea3917f:where([data-orientation='vertical']) {
1605
- flex-direction: column;
1606
- }
1607
-
1608
- :where([data-c-color-scheme='light']) .m_6ea3917f {
1609
- background-color: var(--c-color-white);
1610
- }
1611
-
1612
- :where([data-c-color-scheme='dark']) .m_6ea3917f {
1613
- background-color: var(--c-color-dark-6);
1614
- }
1615
-
1616
- .m_4fcecd28 {
1617
- display: block;
1618
- margin-inline: calc(var(--card-padding) * -1);
1619
- }
1620
-
1621
- :where([data-c-color-scheme='light']) .m_4fcecd28 {
1622
- --border-color: var(--c-color-gray-3);
1623
- }
1624
-
1625
- :where([data-c-color-scheme='dark']) .m_4fcecd28 {
1626
- --border-color: var(--c-color-dark-4);
1627
- }
1628
-
1629
- .m_4fcecd28:where([data-orientation='vertical']):first-child {
1630
- margin-top: calc(var(--card-padding) * -1);
1631
- border-top: none !important;
1632
- }
1633
-
1634
- .m_4fcecd28:where([data-orientation='vertical']):last-child {
1635
- margin-bottom: calc(var(--card-padding) * -1);
1636
- border-bottom: none !important;
1637
- }
1638
-
1639
- .m_4fcecd28:where([data-orientation='vertical'])[data-inherit-padding] {
1640
- padding-inline: var(--card-padding);
1641
- }
1642
-
1643
- .m_4fcecd28:where([data-orientation='vertical'])[data-with-border] {
1644
- border-top: 1px solid var(--border-color);
1645
- border-bottom: 1px solid var(--border-color);
1646
- }
1647
-
1648
- .m_4fcecd28:where([data-orientation='vertical']) + .m_4fcecd28:where([data-orientation='vertical']) {
1649
- border-top: none !important;
1650
- }
1651
-
1652
- .m_4fcecd28:where([data-orientation='horizontal']) {
1653
- margin-block: calc(var(--card-padding) * -1);
1654
- margin-inline: 0;
1655
- }
1656
-
1657
- .m_4fcecd28:where([data-orientation='horizontal']):first-child {
1658
- margin-inline-start: calc(var(--card-padding) * -1);
1659
- border-inline-start: none !important;
1660
- }
1661
-
1662
- .m_4fcecd28:where([data-orientation='horizontal']):last-child {
1663
- margin-inline-end: calc(var(--card-padding) * -1);
1664
- border-inline-end: none !important;
1665
- }
1666
-
1667
- .m_4fcecd28:where([data-orientation='horizontal'])[data-inherit-padding] {
1668
- padding-block: var(--card-padding);
1669
- }
1670
-
1671
- .m_4fcecd28:where([data-orientation='horizontal'])[data-with-border] {
1672
- border-inline-start: 1px solid var(--border-color);
1673
- border-inline-end: 1px solid var(--border-color);
1674
- }
1675
-
1676
- .m_4fcecd28:where([data-orientation='horizontal']) + .m_4fcecd28:where([data-orientation='horizontal']) {
1677
- border-inline-start: none !important;
1678
- }
1679
-
1680
1705
  .m_e0e8435a {
1681
1706
  display: flex;
1682
1707
  align-items: center;
@@ -2147,31 +2172,6 @@ fieldset:disabled .c-active:active {
2147
2172
  animation: m_1309882b 1.2s linear infinite;
2148
2173
  }
2149
2174
 
2150
- .m_a4a0a883 {
2151
- --paper-radius: var(--c-radius-default);
2152
-
2153
- outline: 0;
2154
- -webkit-tap-heighlight-color: transparent;
2155
- display: block;
2156
- touch-action: manipulation;
2157
- text-decoration: none;
2158
- border-radius: var(--paper-radius);
2159
- box-shadow: var(--paper-shadow);
2160
- background-color: var(--c-color-body);
2161
- }
2162
-
2163
- [data-c-color-scheme='light'] .m_a4a0a883 {
2164
- --paper-border-color: var(--c-color-gray-3);
2165
- }
2166
-
2167
- [data-c-color-scheme='dark'] .m_a4a0a883 {
2168
- --paper-border-color: var(--c-color-dark-4);
2169
- }
2170
-
2171
- .m_a4a0a883:where([data-with-border]) {
2172
- border: calc(0.0625rem * var(--c-scale)) solid var(--paper-border-color);
2173
- }
2174
-
2175
2175
  .m_6f2f9f44 {
2176
2176
  --scp-filled-segment-color: var(--c-primary-color-filled);
2177
2177
  --scp-transition-duration: 0ms;