@nonoun/native-ui 0.2.3 → 0.2.4

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 (6) hide show
  1. package/dist/components-lean.css +53 -0
  2. package/dist/components.css +53 -0
  3. package/dist/custom-elements.json +2151 -2151
  4. package/dist/native-ui-lean.css +53 -0
  5. package/dist/native-ui.css +53 -0
  6. package/package.json +1 -1
package/dist/components-lean.css CHANGED
@@ -4667,6 +4667,59 @@
4667
4667
  padding-left: 0;
4668
4668
  }
4669
4669
 
4670
+ /* ── Collapsed Icon-Rail Content ── */
4671
+ /* WHY: When collapsed, sidebar slot becomes a narrow icon rail.
4672
+ Text and trailing slots are hidden; only icons remain visible.
4673
+ Nav items hide entirely — only group headers (with icons) stay. */
4674
+
4675
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-content) {
4676
+ align-items: center;
4677
+ padding: 0.5rem;
4678
+ }
4679
+
4680
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-header),
4681
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-footer) {
4682
+ justify-content: center;
4683
+ padding-inline: 0.5rem;
4684
+ }
4685
+
4686
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-trigger) :where([slot="label"]),
4687
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-trigger) :where([slot="trailing"]) {
4688
+ display: none;
4689
+ }
4690
+
4691
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-item) {
4692
+ display: none;
4693
+ }
4694
+
4695
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) > :where(details) > :where(summary) {
4696
+ justify-content: center;
4697
+ }
4698
+
4699
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) > :where(details) > :where(summary)::after {
4700
+ display: none;
4701
+ }
4702
+
4703
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group)::after,
4704
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group)::before {
4705
+ display: none;
4706
+ }
4707
+
4708
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group-header) {
4709
+ justify-content: center;
4710
+ font-size: 0;
4711
+ gap: 0;
4712
+ }
4713
+
4714
+ /* WHY: Icon keeps its size even though parent font-size is 0. */
4715
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group-header) :where(ui-icon) {
4716
+ font-size: var(--_font-size, 1rem);
4717
+ }
4718
+
4719
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) + :where(ui-nav-group) {
4720
+ margin-block-start: 0;
4721
+ }
4722
+
4670
4723
  /* ── Sidebar Header ── */
4671
4724
 
4672
4725
  :where(ui-layout-sidebar-header) {
package/dist/components.css CHANGED
@@ -4741,6 +4741,59 @@
4741
4741
  padding-left: 0;
4742
4742
  }
4743
4743
 
4744
+ /* ── Collapsed Icon-Rail Content ── */
4745
+ /* WHY: When collapsed, sidebar slot becomes a narrow icon rail.
4746
+ Text and trailing slots are hidden; only icons remain visible.
4747
+ Nav items hide entirely — only group headers (with icons) stay. */
4748
+
4749
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-content) {
4750
+ align-items: center;
4751
+ padding: 0.5rem;
4752
+ }
4753
+
4754
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-header),
4755
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-footer) {
4756
+ justify-content: center;
4757
+ padding-inline: 0.5rem;
4758
+ }
4759
+
4760
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-trigger) :where([slot="label"]),
4761
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-trigger) :where([slot="trailing"]) {
4762
+ display: none;
4763
+ }
4764
+
4765
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-item) {
4766
+ display: none;
4767
+ }
4768
+
4769
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) > :where(details) > :where(summary) {
4770
+ justify-content: center;
4771
+ }
4772
+
4773
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) > :where(details) > :where(summary)::after {
4774
+ display: none;
4775
+ }
4776
+
4777
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group)::after,
4778
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group)::before {
4779
+ display: none;
4780
+ }
4781
+
4782
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group-header) {
4783
+ justify-content: center;
4784
+ font-size: 0;
4785
+ gap: 0;
4786
+ }
4787
+
4788
+ /* WHY: Icon keeps its size even though parent font-size is 0. */
4789
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group-header) :where(ui-icon) {
4790
+ font-size: var(--_font-size, 1rem);
4791
+ }
4792
+
4793
+ :where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) + :where(ui-nav-group) {
4794
+ margin-block-start: 0;
4795
+ }
4796
+
4744
4797
  /* ── Sidebar Header ── */
4745
4798
 
4746
4799
  :where(ui-layout-sidebar-header) {