@studiolxd/brand 49.8.1 → 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.
Files changed (32) hide show
  1. package/CHANGELOG.md +126 -0
  2. package/dist/_shared/calendargrid.js +111 -30
  3. package/dist/_shared/tokens.js +9 -0
  4. package/dist/_types/molecules/AppLauncher/AppLauncher.d.ts +19 -0
  5. package/dist/_types/molecules/CalendarPlanner/CalendarPlanner.d.ts +54 -1
  6. package/dist/_types/molecules/Card/Card.d.ts +50 -3
  7. package/dist/_types/molecules/SiteNav/SiteNav.d.ts +12 -0
  8. package/dist/_types/molecules/_shared/calendarGrid.d.ts +32 -0
  9. package/dist/_types/molecules/_shared/dropdownItems.d.ts +8 -3
  10. package/dist/app-launcher.css +1 -1
  11. package/dist/app-launcher.js +15 -10
  12. package/dist/brand.css +20 -1
  13. package/dist/calendar-planner.css +1 -1
  14. package/dist/calendar-planner.js +185 -89
  15. package/dist/calendar-roster.js +8 -8
  16. package/dist/calendar.js +56 -56
  17. package/dist/card.css +1 -1
  18. package/dist/card.js +31 -18
  19. package/dist/site-nav.css +1 -1
  20. package/dist/site-nav.js +31 -21
  21. package/dist/tokens.css +20 -1
  22. package/package.json +341 -171
  23. package/src/tokens/molecules/app-launcher.css +2 -0
  24. package/src/tokens/molecules/calendar-planner.css +7 -0
  25. package/src/tokens/molecules/site-nav.css +3 -0
  26. package/src/tokens/scss/molecules/_app-launcher.scss +1 -0
  27. package/src/tokens/scss/molecules/_calendar-planner.scss +6 -0
  28. package/src/tokens/scss/molecules/_site-nav.scss +2 -0
  29. package/src/tokens/surface-invert.css +3 -0
  30. package/src/tokens/surface-light.css +3 -0
  31. package/src/tokens/surface-public.css +1 -0
  32. package/src/tokens/tokens.json +9 -0
package/dist/app-launcher.css CHANGED
@@ -1 +1 @@
1
- .app-launcher__trigger{all:unset;box-sizing:border-box;width:var(--app-launcher-trigger-size);height:var(--app-launcher-trigger-size);border-radius:var(--app-launcher-trigger-border-radius);color:var(--app-launcher-trigger-color);cursor:pointer;transition:box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);justify-content:center;align-items:center;display:flex}.app-launcher__trigger:hover{background-color:var(--app-launcher-trigger-hover-bg);color:var(--app-launcher-trigger-hover-color)}.app-launcher__trigger:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__trigger--label{gap:var(--app-launcher-trigger-label-gap);width:auto;height:auto;padding-block:var(--app-launcher-trigger-label-padding-block);padding-inline:var(--app-launcher-trigger-label-padding-inline);border-radius:var(--app-launcher-trigger-label-border-radius);color:var(--app-launcher-trigger-label-color)}.app-launcher__trigger-label{font-size:var(--app-launcher-trigger-label-font-size);font-weight:var(--app-launcher-trigger-label-font-weight);line-height:var(--app-launcher-trigger-label-line-height)}.app-launcher__trigger--label:hover{color:var(--app-launcher-trigger-label-color);background-color:#0000}.app-launcher__content{box-sizing:border-box;background-color:var(--app-launcher-content-bg);border-width:var(--app-launcher-content-border-width);border-style:solid;border-color:var(--app-launcher-content-border-color);border-radius:var(--app-launcher-content-border-radius);box-shadow:var(--app-launcher-content-shadow);padding-block:var(--app-launcher-content-padding-block);padding-inline:var(--app-launcher-content-padding-inline);min-width:var(--app-launcher-content-min-width);transform-origin:var(--transform-origin);animation-duration:var(--app-launcher-transition-duration);animation-timing-function:var(--app-launcher-transition-easing);max-height:var(--app-launcher-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.app-launcher__content[data-open]{animation-name:app-launcher-in}.app-launcher__content[data-closed]{animation-name:app-launcher-out}@keyframes app-launcher-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes app-launcher-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.app-launcher__grid{grid-template-columns:repeat(var(--app-launcher-content-columns), 1fr);gap:var(--app-launcher-content-gap);margin:0;padding:0;list-style:none;display:grid}.app-launcher__tile{box-sizing:border-box;align-items:center;gap:var(--app-launcher-tile-gap);padding-block:var(--app-launcher-tile-padding-block);padding-inline:var(--app-launcher-tile-padding-inline);border-radius:var(--app-launcher-tile-border-radius);box-shadow:none;text-align:start;cursor:pointer;transition:background-color var(--app-launcher-transition-duration) var(--app-launcher-transition-easing), box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);outline:none;text-decoration:none;display:flex}.app-launcher__tile:hover,.app-launcher__tile:focus-visible{background-color:var(--app-launcher-tile-highlighted-bg);color:var(--app-launcher-tile-highlighted-color)}.app-launcher__tile:hover .app-launcher__tile-name,.app-launcher__tile:focus-visible .app-launcher__tile-name{color:inherit}.app-launcher__tile:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__tile--active .app-launcher__tile-name{font-weight:var(--app-launcher-tile-name-active-font-weight)}.app-launcher__tile-name{font-size:var(--app-launcher-tile-name-font-size);font-weight:var(--app-launcher-tile-name-font-weight);line-height:var(--app-launcher-tile-name-line-height);color:var(--app-launcher-tile-name-color)}.app-launcher__tile-badge{pointer-events:none}.app-launcher__tile:hover .app-launcher__tile-badge,.app-launcher__tile:focus-visible .app-launcher__tile-badge{--tag-info-bg:var(--app-launcher-tile-badge-hover-bg);--tag-info-color:var(--app-launcher-tile-badge-hover-color)}.app-launcher__positioner{z-index:var(--app-launcher-content-z-index)}
1
+ .app-launcher__trigger{all:unset;box-sizing:border-box;width:var(--app-launcher-trigger-size);height:var(--app-launcher-trigger-size);border-radius:var(--app-launcher-trigger-border-radius);color:var(--app-launcher-trigger-color);cursor:pointer;transition:box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);justify-content:center;align-items:center;display:flex}.app-launcher__trigger:hover{background-color:var(--app-launcher-trigger-hover-bg);color:var(--app-launcher-trigger-hover-color)}.app-launcher__trigger:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__trigger--label{gap:var(--app-launcher-trigger-label-gap);width:auto;height:auto;padding-block:var(--app-launcher-trigger-label-padding-block);padding-inline:var(--app-launcher-trigger-label-padding-inline);border-radius:var(--app-launcher-trigger-label-border-radius);color:var(--app-launcher-trigger-label-color)}.app-launcher__trigger-label{font-size:var(--app-launcher-trigger-label-font-size);font-weight:var(--app-launcher-trigger-label-font-weight);line-height:var(--app-launcher-trigger-label-line-height)}.app-launcher__trigger--label:hover{color:var(--app-launcher-trigger-label-color);background-color:#0000}.app-launcher__content{box-sizing:border-box;background-color:var(--app-launcher-content-bg);border-width:var(--app-launcher-content-border-width);border-style:solid;border-color:var(--app-launcher-content-border-color);border-radius:var(--app-launcher-content-border-radius);box-shadow:var(--app-launcher-content-shadow);padding-block:var(--app-launcher-content-padding-block);padding-inline:var(--app-launcher-content-padding-inline);min-width:var(--app-launcher-content-min-width);transform-origin:var(--transform-origin);animation-duration:var(--app-launcher-transition-duration);animation-timing-function:var(--app-launcher-transition-easing);max-height:var(--app-launcher-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.app-launcher__content[data-open]{animation-name:app-launcher-in}.app-launcher__content[data-closed]{animation-name:app-launcher-out}@keyframes app-launcher-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes app-launcher-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.app-launcher__grid{grid-template-columns:repeat(var(--app-launcher-content-columns), 1fr);gap:var(--app-launcher-content-gap);margin:0;padding:0;list-style:none;display:grid}.app-launcher__tile{box-sizing:border-box;align-items:center;gap:var(--app-launcher-tile-gap);padding-block:var(--app-launcher-tile-padding-block);padding-inline:var(--app-launcher-tile-padding-inline);border-radius:var(--app-launcher-tile-border-radius);box-shadow:none;text-align:start;cursor:pointer;transition:background-color var(--app-launcher-transition-duration) var(--app-launcher-transition-easing), box-shadow var(--app-launcher-transition-duration) var(--app-launcher-transition-easing);outline:none;text-decoration:none;display:flex}.app-launcher__tile:not(.app-launcher__tile--disabled):hover,.app-launcher__tile:focus-visible{background-color:var(--app-launcher-tile-highlighted-bg);color:var(--app-launcher-tile-highlighted-color)}.app-launcher__tile:not(.app-launcher__tile--disabled):hover .app-launcher__tile-name,.app-launcher__tile:focus-visible .app-launcher__tile-name{color:inherit}.app-launcher__tile:focus-visible{outline:var(--app-launcher-focus-ring-width) solid var(--app-launcher-focus-ring-color);outline-offset:var(--app-launcher-focus-ring-offset)}.app-launcher__tile--active .app-launcher__tile-name{font-weight:var(--app-launcher-tile-name-active-font-weight)}.app-launcher__tile.app-launcher__tile--disabled{cursor:default}.app-launcher__tile--disabled .app-launcher__tile-name{color:var(--app-launcher-tile-disabled-color)}.app-launcher__tile-name{font-size:var(--app-launcher-tile-name-font-size);font-weight:var(--app-launcher-tile-name-font-weight);line-height:var(--app-launcher-tile-name-line-height);color:var(--app-launcher-tile-name-color)}.app-launcher__tile-badge{pointer-events:none}.app-launcher__tile:not(.app-launcher__tile--disabled):hover .app-launcher__tile-badge,.app-launcher__tile:focus-visible .app-launcher__tile-badge{--tag-info-bg:var(--app-launcher-tile-badge-hover-bg);--tag-info-color:var(--app-launcher-tile-badge-hover-color)}.app-launcher__positioner{z-index:var(--app-launcher-content-z-index)}
package/dist/app-launcher.js CHANGED
@@ -10,19 +10,24 @@ import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
10
10
  import { Popover as l } from "@base-ui/react/popover";
11
11
  //#region src/stories/molecules/AppLauncher/AppLauncher.tsx
12
12
  function u({ app: t, isCurrent: n, newLabel: i }) {
13
- let a = e("appLauncher");
14
- return /* @__PURE__ */ c("a", {
13
+ let a = e("appLauncher"), l = t.badge ?? (t.isNew ? a("new", i) : void 0), u = /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("span", {
14
+ className: "app-launcher__tile-name",
15
+ children: t.name
16
+ }), l && /* @__PURE__ */ s(r, {
17
+ variant: t.disabled ? "neutral" : "info",
18
+ className: "app-launcher__tile-badge",
19
+ children: l
20
+ })] });
21
+ return t.disabled ? /* @__PURE__ */ s("span", {
22
+ className: "app-launcher__tile app-launcher__tile--disabled",
23
+ role: "link",
24
+ "aria-disabled": "true",
25
+ children: u
26
+ }) : /* @__PURE__ */ s("a", {
15
27
  href: t.url,
16
28
  className: `app-launcher__tile${n ? " app-launcher__tile--active" : ""}`,
17
29
  "aria-current": n ? "page" : void 0,
18
- children: [/* @__PURE__ */ s("span", {
19
- className: "app-launcher__tile-name",
20
- children: t.name
21
- }), t.isNew && /* @__PURE__ */ s(r, {
22
- variant: "info",
23
- className: "app-launcher__tile-badge",
24
- children: a("new", i)
25
- })]
30
+ children: u
26
31
  });
27
32
  }
28
33
  function d({ apps: e, currentAppId: t, newLabel: n }) {