@tangible/ui 0.0.4 → 0.0.5

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 (10) hide show
  1. package/components/Accordion/Accordion.d.ts +1 -1
  2. package/components/Accordion/Accordion.js +93 -22
  3. package/components/Accordion/index.d.ts +1 -1
  4. package/components/Accordion/types.d.ts +20 -3
  5. package/package.json +1 -1
  6. package/styles/all.css +1 -1
  7. package/styles/all.expanded.css +44 -7
  8. package/styles/all.expanded.unlayered.css +44 -7
  9. package/styles/all.unlayered.css +1 -1
  10. package/tui-manifest.json +15 -4
package/styles/all.expanded.css CHANGED
@@ -23,11 +23,17 @@
23
23
  --tui-accordion-bg
24
24
  --tui-accordion-bg-open
25
25
  --tui-accordion-border
26
+ --tui-accordion-divider
26
27
  --tui-accordion-radius
27
28
  --tui-accordion-padding
29
+ --tui-accordion-trigger-padding
30
+ --tui-accordion-trigger-bg
31
+ --tui-accordion-trigger-hover
32
+ --tui-accordion-panel-padding
33
+ --tui-accordion-panel-bg
34
+ --tui-accordion-panel-spacing
28
35
  --tui-accordion-gap
29
36
  --tui-accordion-indicator
30
- --tui-accordion-trigger-hover
31
37
  */
32
38
  /* @tui-tokens
33
39
  --tui-avatar-size
@@ -676,10 +682,15 @@
676
682
  --_bg: var(--tui-accordion-bg, var(--tui-color-bg-surface));
677
683
  --_bg-open: var(--tui-accordion-bg-open, var(--_bg));
678
684
  --_border: var(--tui-accordion-border, var(--tui-color-border));
685
+ --_divider: var(--tui-accordion-divider, var(--_border));
679
686
  --_radius: var(--tui-accordion-radius, var(--tui-radius-md));
680
687
  --_padding: var(--tui-accordion-padding, var(--tui-spacing-md));
681
- --_indicator: var(--tui-accordion-indicator, currentColor);
688
+ --_trigger-padding: var(--tui-accordion-trigger-padding, var(--_padding));
689
+ --_trigger-bg: var(--tui-accordion-trigger-bg, transparent);
682
690
  --_trigger-hover: var(--tui-accordion-trigger-hover, var(--tui-color-bg-muted));
691
+ --_panel-padding: var(--tui-accordion-panel-padding, var(--_padding));
692
+ --_panel-bg: var(--tui-accordion-panel-bg, transparent);
693
+ --_indicator: var(--tui-accordion-indicator, currentColor);
683
694
  background-color: var(--_bg);
684
695
  border: var(--tui-border-width) solid var(--_border);
685
696
  border-radius: var(--_radius);
@@ -691,7 +702,7 @@
691
702
  :where(.tui-interface) .tui-accordion__item[data-disabled] {
692
703
  opacity: var(--tui-opacity-disabled);
693
704
  }
694
- :where(.tui-interface) .tui-accordion__heading {
705
+ .tui-interface .tui-accordion__heading {
695
706
  margin: 0;
696
707
  font: inherit;
697
708
  }
@@ -701,10 +712,10 @@
701
712
  justify-content: space-between;
702
713
  gap: var(--tui-spacing-sm);
703
714
  width: 100%;
704
- padding: var(--_padding);
715
+ padding: var(--_trigger-padding);
705
716
  border: none;
706
717
  border-radius: var(--_radius);
707
- background: transparent;
718
+ background: var(--_trigger-bg);
708
719
  color: inherit;
709
720
  font: inherit;
710
721
  font-weight: var(--tui-font-weight-medium, 500);
@@ -753,9 +764,11 @@
753
764
  grid-template-rows: 1fr;
754
765
  }
755
766
  :where(.tui-interface) .tui-accordion__panel-content {
767
+ --_panel-spacing: var(--tui-accordion-panel-spacing, var(--_panel-padding));
756
768
  min-height: 0;
757
769
  overflow: hidden;
758
- padding-inline: var(--_padding);
770
+ padding-inline: var(--_panel-padding);
771
+ background: var(--_panel-bg);
759
772
  }
760
773
  :where(.tui-interface) .tui-accordion__panel-content > *:first-child {
761
774
  margin-block-start: 0;
@@ -763,10 +776,15 @@
763
776
  :where(.tui-interface) .tui-accordion__panel-content > *:last-child {
764
777
  margin-block-end: 0;
765
778
  }
779
+ :where(.tui-interface) .tui-accordion__panel-content::before {
780
+ content: "";
781
+ display: block;
782
+ height: var(--_panel-spacing);
783
+ }
766
784
  :where(.tui-interface) .tui-accordion__panel-content::after {
767
785
  content: "";
768
786
  display: block;
769
- height: var(--_padding);
787
+ height: var(--_panel-spacing);
770
788
  }
771
789
  :where(.tui-interface) .tui-accordion__panel[data-state=closed] > .tui-accordion__panel-content {
772
790
  animation: tui-fadeToTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
@@ -774,6 +792,25 @@
774
792
  :where(.tui-interface) .tui-accordion__panel[data-state=open] > .tui-accordion__panel-content {
775
793
  animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
776
794
  }
795
+ :where(.tui-interface) .tui-accordion__item[data-state=open] > .tui-accordion__panel {
796
+ border-block-start: var(--tui-border-width) solid var(--_divider);
797
+ }
798
+ :where(.tui-interface) .tui-accordion.is-variant-flush {
799
+ gap: 0;
800
+ border: var(--tui-border-width) solid var(--tui-accordion-border, var(--tui-color-border));
801
+ border-radius: var(--tui-accordion-radius, var(--tui-radius-md));
802
+ overflow: hidden;
803
+ }
804
+ :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__item {
805
+ border: none;
806
+ border-radius: 0;
807
+ }
808
+ :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__item + .tui-accordion__item {
809
+ border-block-start: var(--tui-border-width) solid var(--_border);
810
+ }
811
+ :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__trigger {
812
+ border-radius: 0;
813
+ }
777
814
  @media (forced-colors: active) {
778
815
  :where(.tui-interface) .tui-accordion__item {
779
816
  border-color: CanvasText;
package/styles/all.expanded.unlayered.css CHANGED
@@ -23,11 +23,17 @@
23
23
  --tui-accordion-bg
24
24
  --tui-accordion-bg-open
25
25
  --tui-accordion-border
26
+ --tui-accordion-divider
26
27
  --tui-accordion-radius
27
28
  --tui-accordion-padding
29
+ --tui-accordion-trigger-padding
30
+ --tui-accordion-trigger-bg
31
+ --tui-accordion-trigger-hover
32
+ --tui-accordion-panel-padding
33
+ --tui-accordion-panel-bg
34
+ --tui-accordion-panel-spacing
28
35
  --tui-accordion-gap
29
36
  --tui-accordion-indicator
30
- --tui-accordion-trigger-hover
31
37
  */
32
38
  /* @tui-tokens
33
39
  --tui-avatar-size
@@ -676,10 +682,15 @@
676
682
  --_bg: var(--tui-accordion-bg, var(--tui-color-bg-surface));
677
683
  --_bg-open: var(--tui-accordion-bg-open, var(--_bg));
678
684
  --_border: var(--tui-accordion-border, var(--tui-color-border));
685
+ --_divider: var(--tui-accordion-divider, var(--_border));
679
686
  --_radius: var(--tui-accordion-radius, var(--tui-radius-md));
680
687
  --_padding: var(--tui-accordion-padding, var(--tui-spacing-md));
681
- --_indicator: var(--tui-accordion-indicator, currentColor);
688
+ --_trigger-padding: var(--tui-accordion-trigger-padding, var(--_padding));
689
+ --_trigger-bg: var(--tui-accordion-trigger-bg, transparent);
682
690
  --_trigger-hover: var(--tui-accordion-trigger-hover, var(--tui-color-bg-muted));
691
+ --_panel-padding: var(--tui-accordion-panel-padding, var(--_padding));
692
+ --_panel-bg: var(--tui-accordion-panel-bg, transparent);
693
+ --_indicator: var(--tui-accordion-indicator, currentColor);
683
694
  background-color: var(--_bg);
684
695
  border: var(--tui-border-width) solid var(--_border);
685
696
  border-radius: var(--_radius);
@@ -691,7 +702,7 @@
691
702
  :where(.tui-interface) .tui-accordion__item[data-disabled] {
692
703
  opacity: var(--tui-opacity-disabled);
693
704
  }
694
- :where(.tui-interface) .tui-accordion__heading {
705
+ .tui-interface .tui-accordion__heading {
695
706
  margin: 0;
696
707
  font: inherit;
697
708
  }
@@ -701,10 +712,10 @@
701
712
  justify-content: space-between;
702
713
  gap: var(--tui-spacing-sm);
703
714
  width: 100%;
704
- padding: var(--_padding);
715
+ padding: var(--_trigger-padding);
705
716
  border: none;
706
717
  border-radius: var(--_radius);
707
- background: transparent;
718
+ background: var(--_trigger-bg);
708
719
  color: inherit;
709
720
  font: inherit;
710
721
  font-weight: var(--tui-font-weight-medium, 500);
@@ -753,9 +764,11 @@
753
764
  grid-template-rows: 1fr;
754
765
  }
755
766
  :where(.tui-interface) .tui-accordion__panel-content {
767
+ --_panel-spacing: var(--tui-accordion-panel-spacing, var(--_panel-padding));
756
768
  min-height: 0;
757
769
  overflow: hidden;
758
- padding-inline: var(--_padding);
770
+ padding-inline: var(--_panel-padding);
771
+ background: var(--_panel-bg);
759
772
  }
760
773
  :where(.tui-interface) .tui-accordion__panel-content > *:first-child {
761
774
  margin-block-start: 0;
@@ -763,10 +776,15 @@
763
776
  :where(.tui-interface) .tui-accordion__panel-content > *:last-child {
764
777
  margin-block-end: 0;
765
778
  }
779
+ :where(.tui-interface) .tui-accordion__panel-content::before {
780
+ content: "";
781
+ display: block;
782
+ height: var(--_panel-spacing);
783
+ }
766
784
  :where(.tui-interface) .tui-accordion__panel-content::after {
767
785
  content: "";
768
786
  display: block;
769
- height: var(--_padding);
787
+ height: var(--_panel-spacing);
770
788
  }
771
789
  :where(.tui-interface) .tui-accordion__panel[data-state=closed] > .tui-accordion__panel-content {
772
790
  animation: tui-fadeToTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
@@ -774,6 +792,25 @@
774
792
  :where(.tui-interface) .tui-accordion__panel[data-state=open] > .tui-accordion__panel-content {
775
793
  animation: tui-fadeFromTransparent var(--tui-motion-duration) var(--tui-motion-timing) forwards;
776
794
  }
795
+ :where(.tui-interface) .tui-accordion__item[data-state=open] > .tui-accordion__panel {
796
+ border-block-start: var(--tui-border-width) solid var(--_divider);
797
+ }
798
+ :where(.tui-interface) .tui-accordion.is-variant-flush {
799
+ gap: 0;
800
+ border: var(--tui-border-width) solid var(--tui-accordion-border, var(--tui-color-border));
801
+ border-radius: var(--tui-accordion-radius, var(--tui-radius-md));
802
+ overflow: hidden;
803
+ }
804
+ :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__item {
805
+ border: none;
806
+ border-radius: 0;
807
+ }
808
+ :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__item + .tui-accordion__item {
809
+ border-block-start: var(--tui-border-width) solid var(--_border);
810
+ }
811
+ :where(.tui-interface) .tui-accordion.is-variant-flush .tui-accordion__trigger {
812
+ border-radius: 0;
813
+ }
777
814
  @media (forced-colors: active) {
778
815
  :where(.tui-interface) .tui-accordion__item {
779
816
  border-color: CanvasText;