@threadlabs/looma 0.41.1 → 0.41.2
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/docs/catalog.json
CHANGED
|
@@ -463,7 +463,7 @@
|
|
|
463
463
|
],
|
|
464
464
|
"schemaVersion": 1,
|
|
465
465
|
"package": "@threadlabs/looma",
|
|
466
|
-
"version": "0.41.
|
|
466
|
+
"version": "0.41.2",
|
|
467
467
|
"groups": [
|
|
468
468
|
{
|
|
469
469
|
"id": "layout",
|
|
@@ -20449,6 +20449,9 @@
|
|
|
20449
20449
|
{
|
|
20450
20450
|
"name": "--ui-border-width"
|
|
20451
20451
|
},
|
|
20452
|
+
{
|
|
20453
|
+
"name": "--ui-control-min-block-size"
|
|
20454
|
+
},
|
|
20452
20455
|
{
|
|
20453
20456
|
"name": "--ui-focus-ring"
|
|
20454
20457
|
},
|
|
@@ -20575,8 +20578,8 @@
|
|
|
20575
20578
|
"id": "@threadlabs/looma/ui-site-header/01-default",
|
|
20576
20579
|
"name": "01-default",
|
|
20577
20580
|
"title": "Site navigation",
|
|
20578
|
-
"description": "A full-width header keeps its logo visible, places desktop navigation beside it, and puts search and account controls at the trailing edge. On mobile, the navigation moves into the menu.",
|
|
20579
|
-
"markup": "<ui-site-header>\n <a slot=\"brand\" href=\"#home\" aria-label=\"Folio home\"><ui-icon name=\"compass\"></ui-icon>Folio</a>\n <a slot=\"navigation\" href=\"#guide\" aria-current=\"page\">Guide</a>\n <a slot=\"navigation\" href=\"#components\">Components</a>\n <a slot=\"navigation\" href=\"#journal\">Journal</a>\n <ui-icon-button id=\"site-header-menu-trigger\" slot=\"menu\" size=\"sm\" label=\"Open navigation\"><ui-icon name=\"panel-left\"></ui-icon></ui-icon-button>\n <ui-
|
|
20581
|
+
"description": "A full-width header keeps its logo visible, places desktop navigation beside it, and puts search and account controls at the trailing edge. On mobile, the navigation moves into the menu. Pass actions individually so the header can reserve space for their adjustable hit areas.",
|
|
20582
|
+
"markup": "<ui-site-header>\n <a slot=\"brand\" href=\"#home\" aria-label=\"Folio home\"><ui-icon name=\"compass\"></ui-icon>Folio</a>\n <a slot=\"navigation\" href=\"#guide\" aria-current=\"page\">Guide</a>\n <a slot=\"navigation\" href=\"#components\">Components</a>\n <a slot=\"navigation\" href=\"#journal\">Journal</a>\n <ui-icon-button id=\"site-header-menu-trigger\" slot=\"menu\" size=\"sm\" label=\"Open navigation\"><ui-icon name=\"panel-left\"></ui-icon></ui-icon-button>\n <ui-icon-button slot=\"actions\" id=\"site-header-search-trigger\" size=\"sm\" label=\"Search pages\"><ui-icon name=\"search\"></ui-icon></ui-icon-button>\n <ui-icon-button slot=\"actions\" id=\"site-header-account-trigger\" size=\"sm\" label=\"Account\"><ui-icon name=\"user-round\"></ui-icon></ui-icon-button>\n</ui-site-header>\n<ui-popover for=\"site-header-menu-trigger\"><nav aria-label=\"Compact navigation\">\n <ui-stack gap=\"s\"><a href=\"#guide\" aria-current=\"page\">Guide</a><a href=\"#components\">Components</a><a href=\"#journal\">Journal</a></ui-stack>\n </nav></ui-popover>\n<ui-popover for=\"site-header-search-trigger\"><ui-form-field>\n <label slot=\"label\" for=\"site-header-search\">Search pages</label><ui-input id=\"site-header-search\" type=\"search\" placeholder=\"Find a page\"></ui-input>\n </ui-form-field></ui-popover>\n<ui-popover for=\"site-header-account-trigger\"><nav aria-label=\"Account\">\n <ui-stack gap=\"s\"><a href=\"#profile\">Your profile</a><a href=\"#settings\">Settings</a></ui-stack>\n </nav></ui-popover>",
|
|
20580
20583
|
"resizable": false,
|
|
20581
20584
|
"bindings": "",
|
|
20582
20585
|
"frameworks": {}
|
package/package.json
CHANGED
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
align-items: center !important;
|
|
40
40
|
align-content: center !important;
|
|
41
41
|
gap: var(--ui-space-2) !important;
|
|
42
|
+
inline-size: 100%;
|
|
42
43
|
min-inline-size: 0;
|
|
43
44
|
min-block-size: var(--ui-site-header-compact-height, 3.75rem);
|
|
44
45
|
padding: var(--ui-space-2) var(--ui-site-header-padding-inline, var(--ui-space-4)) !important;
|
|
@@ -60,13 +61,16 @@
|
|
|
60
61
|
max-inline-size: 100%;
|
|
61
62
|
}
|
|
62
63
|
.actions {
|
|
63
|
-
|
|
64
|
+
display: grid !important;
|
|
65
|
+
grid-auto-flow: column !important;
|
|
66
|
+
grid-auto-columns: minmax(max-content, var(--ui-control-min-block-size)) !important;
|
|
67
|
+
justify-items: center !important;
|
|
64
68
|
margin-inline-start: auto !important;
|
|
65
69
|
}
|
|
66
70
|
/* Text shares a baseline inside one group; the group is centred beside any control height. */
|
|
67
71
|
.identity {
|
|
68
72
|
display: flex !important;
|
|
69
|
-
flex: 1 1
|
|
73
|
+
flex: 1 1 0;
|
|
70
74
|
flex-wrap: wrap !important;
|
|
71
75
|
align-items: baseline !important;
|
|
72
76
|
gap: var(--ui-space-2) var(--ui-space-6) !important;
|
package/vue/UiSiteHeader.vue
CHANGED
|
@@ -172,6 +172,7 @@ const hostState = computed(() =>
|
|
|
172
172
|
align-items: center !important;
|
|
173
173
|
align-content: center !important;
|
|
174
174
|
gap: var(--ui-space-2) !important;
|
|
175
|
+
inline-size: 100%;
|
|
175
176
|
min-inline-size: 0;
|
|
176
177
|
min-block-size: var(--ui-site-header-compact-height, 3.75rem);
|
|
177
178
|
padding: var(--ui-space-2) var(--ui-site-header-padding-inline, var(--ui-space-4)) !important;
|
|
@@ -194,12 +195,15 @@ const hostState = computed(() =>
|
|
|
194
195
|
max-inline-size: 100%;
|
|
195
196
|
}
|
|
196
197
|
:global(.actions:where([data-hn-ui-site-header])) {
|
|
197
|
-
|
|
198
|
+
display: grid !important;
|
|
199
|
+
grid-auto-flow: column !important;
|
|
200
|
+
grid-auto-columns: minmax(max-content, var(--ui-control-min-block-size)) !important;
|
|
201
|
+
justify-items: center !important;
|
|
198
202
|
margin-inline-start: auto !important;
|
|
199
203
|
}
|
|
200
204
|
:global(.identity:where([data-hn-ui-site-header])) {
|
|
201
205
|
display: flex !important;
|
|
202
|
-
flex: 1 1
|
|
206
|
+
flex: 1 1 0;
|
|
203
207
|
flex-wrap: wrap !important;
|
|
204
208
|
align-items: baseline !important;
|
|
205
209
|
gap: var(--ui-space-2) var(--ui-space-6) !important;
|
package/vue/components.css
CHANGED
|
@@ -10627,6 +10627,7 @@ dialog:where([data-hn-ui-search-shell]) {
|
|
|
10627
10627
|
align-items: center !important;
|
|
10628
10628
|
align-content: center !important;
|
|
10629
10629
|
gap: var(--ui-space-2) !important;
|
|
10630
|
+
inline-size: 100%;
|
|
10630
10631
|
min-inline-size: 0;
|
|
10631
10632
|
min-block-size: var(--ui-site-header-compact-height, 3.75rem);
|
|
10632
10633
|
padding: var(--ui-space-2) var(--ui-site-header-padding-inline, var(--ui-space-4)) !important;
|
|
@@ -10648,12 +10649,15 @@ dialog:where([data-hn-ui-search-shell]) {
|
|
|
10648
10649
|
max-inline-size: 100%;
|
|
10649
10650
|
}
|
|
10650
10651
|
.actions:where([data-hn-ui-site-header]) {
|
|
10651
|
-
|
|
10652
|
+
display: grid !important;
|
|
10653
|
+
grid-auto-flow: column !important;
|
|
10654
|
+
grid-auto-columns: minmax(max-content, var(--ui-control-min-block-size)) !important;
|
|
10655
|
+
justify-items: center !important;
|
|
10652
10656
|
margin-inline-start: auto !important;
|
|
10653
10657
|
}
|
|
10654
10658
|
.identity:where([data-hn-ui-site-header]) {
|
|
10655
10659
|
display: flex !important;
|
|
10656
|
-
flex: 1 1
|
|
10660
|
+
flex: 1 1 0;
|
|
10657
10661
|
flex-wrap: wrap !important;
|
|
10658
10662
|
align-items: baseline !important;
|
|
10659
10663
|
gap: var(--ui-space-2) var(--ui-space-6) !important;
|