@studiolxd/brand 49.9.0 → 49.10.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/CHANGELOG.md +54 -0
- package/dist/_shared/tokens.js +3 -0
- package/dist/_types/molecules/AppLauncher/AppLauncher.d.ts +19 -0
- package/dist/_types/molecules/SiteNav/SiteNav.d.ts +12 -0
- package/dist/app-launcher.css +1 -1
- package/dist/app-launcher.js +15 -10
- package/dist/brand.css +10 -1
- package/dist/site-nav.css +1 -1
- package/dist/site-nav.js +31 -21
- package/dist/tokens.css +10 -1
- package/package.json +341 -171
- package/src/tokens/molecules/app-launcher.css +2 -0
- package/src/tokens/molecules/site-nav.css +3 -0
- package/src/tokens/scss/molecules/_app-launcher.scss +1 -0
- package/src/tokens/scss/molecules/_site-nav.scss +2 -0
- package/src/tokens/surface-invert.css +2 -0
- package/src/tokens/surface-light.css +2 -0
- package/src/tokens/tokens.json +3 -0
package/dist/site-nav.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.site-nav{gap:var(--site-nav-group-gap);grid-template-columns:repeat(12,1fr);display:grid}.site-nav__group{grid-column:span 12;min-inline-size:0}@media (width>=768px){.site-nav__group{grid-column:span 6}}@media (width>=768px) and (width<=1023.98px){.site-nav__group:nth-child(odd):last-child{grid-column:span 12}}@media (width>=1024px){.site-nav__group{grid-column:span 4}}@media (width>=1024px) and (width<=1279.98px){.site-nav__group:nth-child(3n+1):last-child{grid-column:span 12}.site-nav__group:nth-child(3n+1):nth-last-child(2),.site-nav__group:nth-child(3n+1):nth-last-child(2)~.site-nav__group{grid-column:span 6}}@media (width>=1280px){.site-nav__group{grid-column:span 3}.site-nav[data-columns="1"]>.site-nav__group{grid-column:span 12}.site-nav[data-columns="2"]>.site-nav__group{grid-column:span 6}.site-nav[data-columns="3"]>.site-nav__group{grid-column:span 4}.site-nav[data-columns="4"]>.site-nav__group{grid-column:span 3}.site-nav[data-columns="5"]{grid-template-columns:repeat(5,1fr)}.site-nav[data-columns="5"]>.site-nav__group{grid-column:span 1}.site-nav[data-columns="5"]>.site-nav__group:nth-child(5n+1):last-child{grid-column:span 5}}.site-nav__label{margin-block:0 var(--site-nav-label-margin-block-end)}.site-nav__list{gap:var(--site-nav-item-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.site-nav__link,.site-nav__label-link{color:inherit;box-shadow:none;padding-block-end:var(--site-nav-item-underline-offset);text-decoration:none}.site-nav__link{font-size:var(--site-nav-item-font-size);font-weight:var(--site-nav-item-font-weight);line-height:var(--site-nav-item-line-height);color:var(--site-nav-item-color);display:inline-block}.site-nav__link:hover,.site-nav__label-link:hover{color:var(--site-nav-item-hover-color);box-shadow:inset 0 calc(-1 * var(--site-nav-item-hover-line-width)) 0 0 currentColor}.site-nav__link.site-nav__link--current{font-weight:var(--site-nav-item-current-font-weight)}.site-nav__link:focus-visible,.site-nav__label-link:focus-visible{outline:var(--site-nav-focus-ring-width) solid var(--site-nav-focus-ring-color);outline-offset:var(--site-nav-focus-ring-offset)}
|
|
1
|
+
.site-nav{gap:var(--site-nav-group-gap);grid-template-columns:repeat(12,1fr);display:grid}.site-nav__group{grid-column:span 12;min-inline-size:0}@media (width>=768px){.site-nav__group{grid-column:span 6}}@media (width>=768px) and (width<=1023.98px){.site-nav__group:nth-child(odd):last-child{grid-column:span 12}}@media (width>=1024px){.site-nav__group{grid-column:span 4}}@media (width>=1024px) and (width<=1279.98px){.site-nav__group:nth-child(3n+1):last-child{grid-column:span 12}.site-nav__group:nth-child(3n+1):nth-last-child(2),.site-nav__group:nth-child(3n+1):nth-last-child(2)~.site-nav__group{grid-column:span 6}}@media (width>=1280px){.site-nav__group{grid-column:span 3}.site-nav[data-columns="1"]>.site-nav__group{grid-column:span 12}.site-nav[data-columns="2"]>.site-nav__group{grid-column:span 6}.site-nav[data-columns="3"]>.site-nav__group{grid-column:span 4}.site-nav[data-columns="4"]>.site-nav__group{grid-column:span 3}.site-nav[data-columns="5"]{grid-template-columns:repeat(5,1fr)}.site-nav[data-columns="5"]>.site-nav__group{grid-column:span 1}.site-nav[data-columns="5"]>.site-nav__group:nth-child(5n+1):last-child{grid-column:span 5}}.site-nav__label{margin-block:0 var(--site-nav-label-margin-block-end)}.site-nav__item{align-items:center;gap:var(--site-nav-item-badge-gap);flex-wrap:wrap;display:flex}.site-nav__list{gap:var(--site-nav-item-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.site-nav__link,.site-nav__label-link{color:inherit;box-shadow:none;padding-block-end:var(--site-nav-item-underline-offset);text-decoration:none}.site-nav__link{font-size:var(--site-nav-item-font-size);font-weight:var(--site-nav-item-font-weight);line-height:var(--site-nav-item-line-height);color:var(--site-nav-item-color);display:inline-block}.site-nav__link:not(.site-nav__link--disabled):hover,.site-nav__label-link:hover{color:var(--site-nav-item-hover-color);box-shadow:inset 0 calc(-1 * var(--site-nav-item-hover-line-width)) 0 0 currentColor}.site-nav__link.site-nav__link--current{font-weight:var(--site-nav-item-current-font-weight)}.site-nav__link.site-nav__link--disabled{color:var(--site-nav-item-disabled-color);cursor:default}.site-nav__link:focus-visible,.site-nav__label-link:focus-visible{outline:var(--site-nav-focus-ring-width) solid var(--site-nav-focus-ring-color);outline-offset:var(--site-nav-focus-ring-offset)}
|
package/dist/site-nav.js
CHANGED
|
@@ -2,55 +2,65 @@
|
|
|
2
2
|
import './site-nav.css';
|
|
3
3
|
import { n as e } from "./_shared/brandmessagescontext.js";
|
|
4
4
|
import { Heading as t } from "./heading.js";
|
|
5
|
-
import {
|
|
5
|
+
import { Tag as n } from "./tag.js";
|
|
6
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
6
7
|
//#region src/stories/molecules/SiteNav/SiteNav.tsx
|
|
7
|
-
function
|
|
8
|
-
return /* @__PURE__ */
|
|
8
|
+
function a({ href: e, children: t, className: n, "aria-current": i, target: a, rel: o }) {
|
|
9
|
+
return /* @__PURE__ */ r("a", {
|
|
9
10
|
href: e,
|
|
10
|
-
className:
|
|
11
|
+
className: n,
|
|
11
12
|
"aria-current": i,
|
|
12
13
|
target: a,
|
|
13
14
|
rel: o,
|
|
14
15
|
children: t
|
|
15
16
|
});
|
|
16
17
|
}
|
|
17
|
-
function
|
|
18
|
+
function o(e, t) {
|
|
18
19
|
return t || (e === "_blank" ? "noopener noreferrer" : void 0);
|
|
19
20
|
}
|
|
20
|
-
var
|
|
21
|
-
function
|
|
22
|
-
let
|
|
23
|
-
return /* @__PURE__ */
|
|
24
|
-
className:
|
|
25
|
-
"aria-label":
|
|
26
|
-
"data-columns":
|
|
27
|
-
children:
|
|
21
|
+
var s = 5;
|
|
22
|
+
function c({ groups: c, label: l, renderLink: u = a, className: d }) {
|
|
23
|
+
let f = e("siteNav"), p = ["site-nav", d].filter(Boolean).join(" "), m = Math.min(c.length, s) || 1;
|
|
24
|
+
return /* @__PURE__ */ r("nav", {
|
|
25
|
+
className: p,
|
|
26
|
+
"aria-label": f("label", l),
|
|
27
|
+
"data-columns": m,
|
|
28
|
+
children: c.map((e) => /* @__PURE__ */ i("div", {
|
|
28
29
|
className: "site-nav__group",
|
|
29
|
-
children: [/* @__PURE__ */
|
|
30
|
+
children: [/* @__PURE__ */ r(t, {
|
|
30
31
|
level: 2,
|
|
31
32
|
size: 6,
|
|
32
33
|
className: "site-nav__label",
|
|
33
|
-
children: e.href ?
|
|
34
|
+
children: e.href ? u({
|
|
34
35
|
href: e.href,
|
|
35
36
|
className: "site-nav__label-link",
|
|
36
37
|
children: e.label
|
|
37
38
|
}) : e.label
|
|
38
|
-
}), /* @__PURE__ */
|
|
39
|
+
}), /* @__PURE__ */ r("ul", {
|
|
39
40
|
className: "site-nav__list",
|
|
40
|
-
children: e.items.map((e) => /* @__PURE__ */
|
|
41
|
+
children: e.items.map((e) => /* @__PURE__ */ i("li", {
|
|
41
42
|
className: "site-nav__item",
|
|
42
|
-
children:
|
|
43
|
+
children: [e.disabled ? /* @__PURE__ */ r("span", {
|
|
44
|
+
className: "site-nav__link site-nav__link--disabled",
|
|
45
|
+
role: "link",
|
|
46
|
+
"aria-disabled": "true",
|
|
47
|
+
children: e.label
|
|
48
|
+
}) : u({
|
|
43
49
|
href: e.href,
|
|
44
50
|
className: ["site-nav__link", e.current ? "site-nav__link--current" : ""].filter(Boolean).join(" "),
|
|
45
51
|
"aria-current": e.current ? "page" : void 0,
|
|
46
52
|
target: e.target,
|
|
47
|
-
rel:
|
|
53
|
+
rel: o(e.target, e.rel),
|
|
48
54
|
children: e.label
|
|
49
|
-
})
|
|
55
|
+
}), e.badge && /* @__PURE__ */ r(n, {
|
|
56
|
+
variant: e.disabled ? "neutral" : "info",
|
|
57
|
+
className: "site-nav__badge",
|
|
58
|
+
children: e.badge
|
|
59
|
+
})]
|
|
50
60
|
}, e.id))
|
|
51
61
|
})]
|
|
52
62
|
}, e.id))
|
|
53
63
|
});
|
|
54
64
|
}
|
|
55
65
|
//#endregion
|
|
56
|
-
export {
|
|
66
|
+
export { c as SiteNav };
|