@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.
- package/dist/components-lean.css +53 -0
- package/dist/components.css +53 -0
- package/dist/custom-elements.json +2151 -2151
- package/dist/native-ui-lean.css +53 -0
- package/dist/native-ui.css +53 -0
- package/package.json +1 -1
package/dist/native-ui-lean.css
CHANGED
|
@@ -6671,6 +6671,59 @@
|
|
|
6671
6671
|
padding-left: 0;
|
|
6672
6672
|
}
|
|
6673
6673
|
|
|
6674
|
+
/* ── Collapsed Icon-Rail Content ── */
|
|
6675
|
+
/* WHY: When collapsed, sidebar slot becomes a narrow icon rail.
|
|
6676
|
+
Text and trailing slots are hidden; only icons remain visible.
|
|
6677
|
+
Nav items hide entirely — only group headers (with icons) stay. */
|
|
6678
|
+
|
|
6679
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-content) {
|
|
6680
|
+
align-items: center;
|
|
6681
|
+
padding: 0.5rem;
|
|
6682
|
+
}
|
|
6683
|
+
|
|
6684
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-header),
|
|
6685
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-footer) {
|
|
6686
|
+
justify-content: center;
|
|
6687
|
+
padding-inline: 0.5rem;
|
|
6688
|
+
}
|
|
6689
|
+
|
|
6690
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-trigger) :where([slot="label"]),
|
|
6691
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-trigger) :where([slot="trailing"]) {
|
|
6692
|
+
display: none;
|
|
6693
|
+
}
|
|
6694
|
+
|
|
6695
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-item) {
|
|
6696
|
+
display: none;
|
|
6697
|
+
}
|
|
6698
|
+
|
|
6699
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) > :where(details) > :where(summary) {
|
|
6700
|
+
justify-content: center;
|
|
6701
|
+
}
|
|
6702
|
+
|
|
6703
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) > :where(details) > :where(summary)::after {
|
|
6704
|
+
display: none;
|
|
6705
|
+
}
|
|
6706
|
+
|
|
6707
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group)::after,
|
|
6708
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group)::before {
|
|
6709
|
+
display: none;
|
|
6710
|
+
}
|
|
6711
|
+
|
|
6712
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group-header) {
|
|
6713
|
+
justify-content: center;
|
|
6714
|
+
font-size: 0;
|
|
6715
|
+
gap: 0;
|
|
6716
|
+
}
|
|
6717
|
+
|
|
6718
|
+
/* WHY: Icon keeps its size even though parent font-size is 0. */
|
|
6719
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group-header) :where(ui-icon) {
|
|
6720
|
+
font-size: var(--_font-size, 1rem);
|
|
6721
|
+
}
|
|
6722
|
+
|
|
6723
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) + :where(ui-nav-group) {
|
|
6724
|
+
margin-block-start: 0;
|
|
6725
|
+
}
|
|
6726
|
+
|
|
6674
6727
|
/* ── Sidebar Header ── */
|
|
6675
6728
|
|
|
6676
6729
|
:where(ui-layout-sidebar-header) {
|
package/dist/native-ui.css
CHANGED
|
@@ -6745,6 +6745,59 @@
|
|
|
6745
6745
|
padding-left: 0;
|
|
6746
6746
|
}
|
|
6747
6747
|
|
|
6748
|
+
/* ── Collapsed Icon-Rail Content ── */
|
|
6749
|
+
/* WHY: When collapsed, sidebar slot becomes a narrow icon rail.
|
|
6750
|
+
Text and trailing slots are hidden; only icons remain visible.
|
|
6751
|
+
Nav items hide entirely — only group headers (with icons) stay. */
|
|
6752
|
+
|
|
6753
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-content) {
|
|
6754
|
+
align-items: center;
|
|
6755
|
+
padding: 0.5rem;
|
|
6756
|
+
}
|
|
6757
|
+
|
|
6758
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-header),
|
|
6759
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-footer) {
|
|
6760
|
+
justify-content: center;
|
|
6761
|
+
padding-inline: 0.5rem;
|
|
6762
|
+
}
|
|
6763
|
+
|
|
6764
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-trigger) :where([slot="label"]),
|
|
6765
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-layout-sidebar-trigger) :where([slot="trailing"]) {
|
|
6766
|
+
display: none;
|
|
6767
|
+
}
|
|
6768
|
+
|
|
6769
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-item) {
|
|
6770
|
+
display: none;
|
|
6771
|
+
}
|
|
6772
|
+
|
|
6773
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) > :where(details) > :where(summary) {
|
|
6774
|
+
justify-content: center;
|
|
6775
|
+
}
|
|
6776
|
+
|
|
6777
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) > :where(details) > :where(summary)::after {
|
|
6778
|
+
display: none;
|
|
6779
|
+
}
|
|
6780
|
+
|
|
6781
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group)::after,
|
|
6782
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group)::before {
|
|
6783
|
+
display: none;
|
|
6784
|
+
}
|
|
6785
|
+
|
|
6786
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group-header) {
|
|
6787
|
+
justify-content: center;
|
|
6788
|
+
font-size: 0;
|
|
6789
|
+
gap: 0;
|
|
6790
|
+
}
|
|
6791
|
+
|
|
6792
|
+
/* WHY: Icon keeps its size even though parent font-size is 0. */
|
|
6793
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group-header) :where(ui-icon) {
|
|
6794
|
+
font-size: var(--_font-size, 1rem);
|
|
6795
|
+
}
|
|
6796
|
+
|
|
6797
|
+
:where(ui-layout-sidebar)[collapsed] :where([slot="sidebar"]) :where(ui-nav-group) + :where(ui-nav-group) {
|
|
6798
|
+
margin-block-start: 0;
|
|
6799
|
+
}
|
|
6800
|
+
|
|
6748
6801
|
/* ── Sidebar Header ── */
|
|
6749
6802
|
|
|
6750
6803
|
:where(ui-layout-sidebar-header) {
|
package/package.json
CHANGED