@gjsify/adwaita-web 0.32.0 → 0.33.0
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/adwaita-web.css +72 -50
- package/dist/adwaita-web.css.map +1 -1
- package/lib/types/elements/adw-combo-row.d.ts +10 -0
- package/lib/types/elements/adw-inline-view-switcher.d.ts +37 -1
- package/lib/types/elements/adw-navigation-split-view.d.ts +42 -0
- package/lib/types/elements/adw-overlay-split-view.d.ts +56 -0
- package/lib/types/elements/adw-spinner.d.ts +23 -0
- package/lib/types/elements/adw-view-stack.d.ts +12 -0
- package/lib/types/elements/adw-view-switcher-bar.d.ts +7 -5
- package/lib/types/elements/adw-view-switcher.d.ts +55 -3
- package/lib/types/elements/adw-wrap-box.d.ts +58 -3
- package/lib/types/styles.generated.d.ts +1 -1
- package/package.json +6 -6
- package/scss/_combo_row.scss +19 -0
- package/scss/_navigation_split_view.scss +47 -8
- package/scss/_overlay_split_view.scss +117 -32
- package/scss/_spinner.scss +35 -21
- package/scss/_tab_view.scss +12 -13
- package/scss/_wrap_box.scss +9 -0
- package/src/adw-avatar.spec.ts +37 -0
- package/src/adw-button-content.spec.ts +24 -0
- package/src/adw-row-state.spec.ts +49 -0
- package/src/adw-wrap-box.spec.ts +148 -1
- package/src/chrome.spec.ts +111 -12
- package/src/elements/adw-action-row.ts +11 -1
- package/src/elements/adw-combo-row.ts +17 -0
- package/src/elements/adw-inline-view-switcher.ts +91 -8
- package/src/elements/adw-navigation-split-view.ts +179 -14
- package/src/elements/adw-overlay-split-view.ts +378 -20
- package/src/elements/adw-spinner.ts +165 -21
- package/src/elements/adw-tab-view.ts +20 -2
- package/src/elements/adw-view-stack.ts +21 -0
- package/src/elements/adw-view-switcher-bar.ts +13 -5
- package/src/elements/adw-view-switcher.ts +103 -11
- package/src/elements/adw-wrap-box.ts +290 -135
- package/src/split-views.spec.ts +586 -2
- package/src/styles.generated.ts +1 -1
- package/src/view-switcher.spec.ts +219 -0
package/dist/adwaita-web.css
CHANGED
|
@@ -2040,26 +2040,19 @@ adw-clamp {
|
|
|
2040
2040
|
}
|
|
2041
2041
|
|
|
2042
2042
|
adw-spinner {
|
|
2043
|
-
display: inline-
|
|
2043
|
+
display: inline-flex;
|
|
2044
|
+
align-items: center;
|
|
2045
|
+
justify-content: center;
|
|
2044
2046
|
box-sizing: border-box;
|
|
2045
2047
|
width: 16px;
|
|
2046
2048
|
height: 16px;
|
|
2047
|
-
|
|
2048
|
-
border-top-color: currentColor;
|
|
2049
|
-
border-radius: 50%;
|
|
2050
|
-
animation: adw-spinner-spin 0.8s linear infinite;
|
|
2049
|
+
color: inherit;
|
|
2051
2050
|
}
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
}
|
|
2051
|
+
adw-spinner svg {
|
|
2052
|
+
display: block;
|
|
2053
|
+
flex: none;
|
|
2056
2054
|
}
|
|
2057
2055
|
|
|
2058
|
-
@keyframes adw-spinner-spin {
|
|
2059
|
-
to {
|
|
2060
|
-
transform: rotate(360deg);
|
|
2061
|
-
}
|
|
2062
|
-
}
|
|
2063
2056
|
adw-avatar {
|
|
2064
2057
|
display: inline-flex;
|
|
2065
2058
|
align-items: center;
|
|
@@ -2360,6 +2353,13 @@ adw-combo-row .adw-row-value::after {
|
|
|
2360
2353
|
mask-position: center;
|
|
2361
2354
|
}
|
|
2362
2355
|
|
|
2356
|
+
adw-combo-row[data-presents-chooser=false] .adw-row-value::after {
|
|
2357
|
+
display: none;
|
|
2358
|
+
}
|
|
2359
|
+
adw-combo-row[data-presents-chooser=false] select {
|
|
2360
|
+
cursor: default;
|
|
2361
|
+
}
|
|
2362
|
+
|
|
2363
2363
|
adw-spin-row {
|
|
2364
2364
|
display: flex;
|
|
2365
2365
|
align-items: center;
|
|
@@ -2813,6 +2813,10 @@ adw-wrap-box {
|
|
|
2813
2813
|
align-content: flex-start;
|
|
2814
2814
|
}
|
|
2815
2815
|
|
|
2816
|
+
adw-wrap-box > * {
|
|
2817
|
+
flex-shrink: var(--adw-wrap-box-child-shrink, 0);
|
|
2818
|
+
}
|
|
2819
|
+
|
|
2816
2820
|
adw-wrap-box[data-line-justify=fill] > *:not(:only-child) {
|
|
2817
2821
|
flex-grow: 1;
|
|
2818
2822
|
}
|
|
@@ -2847,13 +2851,13 @@ adw-overlay-split-view .adw-osv-sidebar {
|
|
|
2847
2851
|
background-color: var(--sidebar-bg-color);
|
|
2848
2852
|
overflow-y: auto;
|
|
2849
2853
|
flex-shrink: 0;
|
|
2850
|
-
transition: transform 0.2s ease, opacity 0.2s ease, margin 0.2s ease;
|
|
2851
2854
|
z-index: 10;
|
|
2852
2855
|
align-self: stretch;
|
|
2856
|
+
transition: opacity 0.2s ease;
|
|
2853
2857
|
}
|
|
2854
2858
|
adw-overlay-split-view .adw-osv-content {
|
|
2855
2859
|
flex: 1;
|
|
2856
|
-
min-width:
|
|
2860
|
+
min-width: min-content;
|
|
2857
2861
|
min-height: 0;
|
|
2858
2862
|
display: flex;
|
|
2859
2863
|
flex-direction: column;
|
|
@@ -2862,49 +2866,65 @@ adw-overlay-split-view .adw-osv-content {
|
|
|
2862
2866
|
adw-overlay-split-view:not(.collapsed) .adw-osv-sidebar {
|
|
2863
2867
|
position: relative;
|
|
2864
2868
|
}
|
|
2865
|
-
adw-overlay-split-view:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
|
|
2866
|
-
transform: translateX(-100%);
|
|
2867
|
-
opacity: 0;
|
|
2868
|
-
pointer-events: none;
|
|
2869
|
-
}
|
|
2870
2869
|
adw-overlay-split-view:not(.collapsed).sidebar-end .adw-osv-content {
|
|
2871
2870
|
order: 1;
|
|
2872
2871
|
}
|
|
2873
2872
|
adw-overlay-split-view:not(.collapsed).sidebar-end .adw-osv-sidebar {
|
|
2874
2873
|
order: 2;
|
|
2875
|
-
border-inline-start: 1px solid var(--separator-color);
|
|
2876
2874
|
}
|
|
2877
|
-
adw-overlay-split-view:not(.collapsed)
|
|
2878
|
-
|
|
2875
|
+
adw-overlay-split-view:not(.collapsed) .adw-osv-sidebar {
|
|
2876
|
+
border-inline-end: none;
|
|
2877
|
+
border-inline-start: none;
|
|
2878
|
+
}
|
|
2879
|
+
adw-overlay-split-view:not(.collapsed).sidebar-at-visual-start .adw-osv-sidebar {
|
|
2880
|
+
border-right: 1px solid var(--separator-color);
|
|
2881
|
+
}
|
|
2882
|
+
adw-overlay-split-view:not(.collapsed):not(.sidebar-at-visual-start) .adw-osv-sidebar {
|
|
2883
|
+
border-left: 1px solid var(--separator-color);
|
|
2879
2884
|
}
|
|
2880
2885
|
adw-overlay-split-view.collapsed .adw-osv-sidebar {
|
|
2881
2886
|
position: absolute;
|
|
2882
2887
|
top: 0;
|
|
2883
2888
|
bottom: 0;
|
|
2889
|
+
box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
|
|
2890
|
+
}
|
|
2891
|
+
adw-overlay-split-view.collapsed.sidebar-at-visual-start .adw-osv-sidebar {
|
|
2884
2892
|
left: 0;
|
|
2885
|
-
|
|
2893
|
+
right: auto;
|
|
2894
|
+
}
|
|
2895
|
+
adw-overlay-split-view.collapsed:not(.sidebar-at-visual-start) .adw-osv-sidebar {
|
|
2896
|
+
left: auto;
|
|
2897
|
+
right: 0;
|
|
2898
|
+
}
|
|
2899
|
+
adw-overlay-split-view.collapsed:not(.show-sidebar) .adw-osv-sidebar {
|
|
2886
2900
|
opacity: 0;
|
|
2887
2901
|
pointer-events: none;
|
|
2888
2902
|
}
|
|
2889
|
-
adw-overlay-split-view.collapsed.sidebar-
|
|
2903
|
+
adw-overlay-split-view.collapsed:not(.show-sidebar).sidebar-at-visual-start .adw-osv-sidebar {
|
|
2890
2904
|
left: auto;
|
|
2891
|
-
right:
|
|
2892
|
-
transform: translateX(100%);
|
|
2905
|
+
right: 100%;
|
|
2893
2906
|
}
|
|
2894
|
-
adw-overlay-split-view.collapsed.show-sidebar .adw-osv-sidebar {
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
|
|
2907
|
+
adw-overlay-split-view.collapsed:not(.show-sidebar):not(.sidebar-at-visual-start) .adw-osv-sidebar {
|
|
2908
|
+
left: 100%;
|
|
2909
|
+
right: auto;
|
|
2910
|
+
}
|
|
2911
|
+
adw-overlay-split-view:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
|
|
2912
|
+
width: 0;
|
|
2913
|
+
min-width: 0;
|
|
2914
|
+
overflow: hidden;
|
|
2915
|
+
opacity: 0;
|
|
2916
|
+
pointer-events: none;
|
|
2898
2917
|
}
|
|
2899
2918
|
adw-overlay-split-view .adw-osv-backdrop {
|
|
2900
2919
|
display: none;
|
|
2901
2920
|
}
|
|
2902
|
-
adw-overlay-split-view.collapsed
|
|
2921
|
+
adw-overlay-split-view.collapsed .adw-osv-backdrop:not([hidden]) {
|
|
2903
2922
|
display: block;
|
|
2904
2923
|
position: absolute;
|
|
2905
2924
|
inset: 0;
|
|
2906
2925
|
background: rgba(0, 0, 0, 0.3);
|
|
2907
2926
|
z-index: 9;
|
|
2927
|
+
transition: opacity 0.2s ease;
|
|
2908
2928
|
}
|
|
2909
2929
|
|
|
2910
2930
|
.adw-sidebar-content {
|
|
@@ -2942,27 +2962,36 @@ adw-navigation-split-view .adw-nsv-sidebar {
|
|
|
2942
2962
|
flex-direction: column;
|
|
2943
2963
|
min-height: 0;
|
|
2944
2964
|
flex-shrink: 0;
|
|
2945
|
-
border-right: 1px solid var(--separator-color);
|
|
2946
2965
|
background-color: var(--sidebar-bg-color);
|
|
2947
2966
|
}
|
|
2948
2967
|
adw-navigation-split-view .adw-nsv-content {
|
|
2949
2968
|
display: flex;
|
|
2950
2969
|
flex-direction: column;
|
|
2951
|
-
min-width:
|
|
2970
|
+
min-width: min-content;
|
|
2952
2971
|
min-height: 0;
|
|
2953
2972
|
flex: 1 1 auto;
|
|
2954
2973
|
background-color: var(--window-bg-color);
|
|
2955
2974
|
}
|
|
2956
|
-
adw-navigation-split-view.
|
|
2957
|
-
|
|
2975
|
+
adw-navigation-split-view.sidebar-end .adw-nsv-content {
|
|
2976
|
+
order: 1;
|
|
2977
|
+
}
|
|
2978
|
+
adw-navigation-split-view.sidebar-end .adw-nsv-sidebar {
|
|
2979
|
+
order: 2;
|
|
2980
|
+
}
|
|
2981
|
+
adw-navigation-split-view.sidebar-at-visual-start .adw-nsv-sidebar {
|
|
2982
|
+
border-right: 1px solid var(--separator-color);
|
|
2983
|
+
}
|
|
2984
|
+
adw-navigation-split-view:not(.sidebar-at-visual-start) .adw-nsv-sidebar {
|
|
2985
|
+
border-left: 1px solid var(--separator-color);
|
|
2958
2986
|
}
|
|
2959
|
-
adw-navigation-split-view.collapsed
|
|
2987
|
+
adw-navigation-split-view.collapsed [data-pane-visible=false] {
|
|
2960
2988
|
display: none;
|
|
2961
2989
|
}
|
|
2962
|
-
adw-navigation-split-view.collapsed
|
|
2990
|
+
adw-navigation-split-view.collapsed .adw-nsv-sidebar[data-pane-visible=true] {
|
|
2963
2991
|
flex: 1 1 auto;
|
|
2964
2992
|
max-width: none;
|
|
2965
2993
|
border-right: none;
|
|
2994
|
+
border-left: none;
|
|
2966
2995
|
}
|
|
2967
2996
|
|
|
2968
2997
|
adw-carousel {
|
|
@@ -3154,18 +3183,11 @@ adw-tab-view .adw-tab-icon[hidden],
|
|
|
3154
3183
|
adw-tab-view .adw-tab-indicator[hidden] {
|
|
3155
3184
|
display: none;
|
|
3156
3185
|
}
|
|
3157
|
-
adw-tab-view .adw-tab-
|
|
3158
|
-
|
|
3159
|
-
mask-image: none;
|
|
3160
|
-
border: 2px solid rgba(127, 127, 127, 0.25);
|
|
3161
|
-
border-top-color: currentColor;
|
|
3162
|
-
border-radius: 50%;
|
|
3163
|
-
animation: adw-spinner-spin 0.8s linear infinite;
|
|
3186
|
+
adw-tab-view .adw-tab-spinner {
|
|
3187
|
+
flex: none;
|
|
3164
3188
|
}
|
|
3165
|
-
|
|
3166
|
-
|
|
3167
|
-
animation: none;
|
|
3168
|
-
}
|
|
3189
|
+
adw-tab-view .adw-tab-spinner[hidden] {
|
|
3190
|
+
display: none;
|
|
3169
3191
|
}
|
|
3170
3192
|
adw-tab-view .adw-tab.pinned {
|
|
3171
3193
|
padding: 0 var(--spacing-xs);
|