@blukavantui/community 0.0.0-stage → 1.1.0

package/styles/modal.css

@@ -0,0 +1,210 @@
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Top-layer overlay. Native Content and Footer widgets stay alive while closed. */
+.blu-overlay{
+  position:fixed;
+  inset:0;
+  width:100vw;
+  height:100dvh;
+  max-width:none;
+  max-height:none;
+  border:0;
+  margin:0;
+  padding:24px;
+  box-sizing:border-box;
+  background:rgba(8,14,27,.52);
+  backdrop-filter:blur(3px);
+  z-index:1100;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  color:var(--bluui-text)
+}
+.blu-overlay[hidden]{
+  display:none!important
+}
+.blu-overlay::backdrop{
+  background:transparent
+}
+.blu-overlay__panel{
+  width:min(560px,100%);
+  max-height:calc(100dvh - 48px);
+  display:flex;
+  flex-direction:column;
+  border:1px solid var(--bluui-border);
+  border-radius:18px;
+  background:var(--bluui-surface);
+  box-shadow:0 28px 90px #0005;
+  outline:none;
+  overflow:hidden
+}
+.blu-overlay[data-size=small] .blu-overlay__panel{
+  width:min(400px,100%)
+}
+.blu-overlay[data-size=large] .blu-overlay__panel{
+  width:min(800px,100%)
+}
+.blu-overlay__header{
+  position:relative;
+  padding:24px 64px 20px 24px;
+  border-bottom:1px solid var(--bluui-border)
+}
+.blu-overlay__header h2{
+  font-size:21px;
+  line-height:1.35;
+  letter-spacing:-.02em;
+  margin:0
+}
+.blu-overlay__description{
+  margin:8px 0 0;
+  font-size:14px;
+  line-height:1.6;
+  color:var(--bluui-text-muted)
+}
+.blu-overlay__description[hidden]{
+  display:none
+}
+.blu-overlay__close{
+  position:absolute;
+  right:18px;
+  top:20px;
+  padding:0;
+  width:34px;
+  min-height:34px;
+  font-size:23px;
+  border:0;
+  background:transparent
+}
+.blu-overlay__content{
+  padding:24px;
+  overflow:auto;
+  min-height:0;
+  line-height:1.6
+}
+.blu-overlay__footer{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:12px;
+  flex-wrap:wrap;
+  padding:16px 24px;
+  background:var(--bluui-surface-muted);
+  border-top:1px solid var(--bluui-border)
+}
+.blu-overlay__footer[hidden]{
+  display:none
+}
+.blu-overlay__actions{
+  display:flex;
+  gap:8px;
+  margin-left:auto
+}
+.blu-overlay__actions[hidden]{
+  display:none
+}
+/* Drawer variations share the same overlay and focus behavior. */
+.blu-overlay--drawer{
+  padding:0;
+  justify-content:flex-end;
+  align-items:stretch
+}
+.blu-overlay--drawer .blu-overlay__panel{
+  max-height:100dvh;
+  border-radius:18px 0 0 18px;
+  width:min(480px,calc(100vw - 24px))
+}
+.blu-overlay--drawer .blu-overlay__content{
+  flex:1
+}
+.blu-overlay--drawer[data-placement=left]{
+  justify-content:flex-start
+}
+.blu-overlay--drawer[data-placement=left] .blu-overlay__panel{
+  border-radius:0 18px 18px 0
+}
+.blu-overlay--drawer[data-placement=bottom]{
+  align-items:flex-end;
+  justify-content:center
+}
+.blu-overlay--drawer[data-placement=bottom] .blu-overlay__panel{
+  width:100%;
+  max-height:85dvh;
+  border-radius:18px 18px 0 0
+}
+@media(max-width:600px){.blu-overlay{
+  padding:12px
+}
+.blu-overlay--drawer{
+  padding:0
+}
+.blu-overlay__panel{
+  max-height:calc(100dvh - 24px)
+}
+.blu-overlay__header,.blu-overlay__content{
+  padding:20px
+}
+.blu-overlay__header{
+  padding-right:56px
+}
+.blu-overlay__footer{
+  padding:14px 20px
+}}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-modal-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}

package/styles/notification-center.css

@@ -0,0 +1,49 @@
+/* Shared control rules are scoped into each owning Block at build time.
+   Colors inherit BluUITheme; no screen or theme stylesheet additions are needed. */
+:is(.blu-notification-center, .blu-notification-center__panel) { box-sizing:border-box; width:100%; min-width:0; color:var(--bluui-text,#182230); font:14px/1.5 var(--blu-font-family,sans-serif); }
+:is(.blu-notification-center, .blu-notification-center__panel) *, :is(.blu-notification-center, .blu-notification-center__panel) *::before, :is(.blu-notification-center, .blu-notification-center__panel) *::after { box-sizing:border-box; }
+:is(.blu-notification-center, .blu-notification-center__panel) [hidden] { display:none !important; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__body { min-width:0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__heading { margin:0 0 12px; font-size:18px; font-weight:650; line-height:1.4; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 16px; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__toolbar > .blu-platform__heading { flex:1; margin:0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:7px 12px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:8px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:600 13px/1.4 var(--blu-font-family,sans-serif); cursor:pointer; text-decoration:none; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button:hover:not(:disabled) { background:var(--bluui-hover,#f0f2f7); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button[aria-pressed="true"] { color:var(--bluui-color-primary-text,#4338ca); border-color:var(--bluui-primary,#4f46e5); background:var(--bluui-color-primary-soft,#eef2ff); box-shadow:inset 0 0 0 1px var(--bluui-primary,#4f46e5); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button--primary { background:var(--bluui-color-primary-solid,#4f46e5); border-color:var(--bluui-color-primary-solid,#4f46e5); color:var(--bluui-color-primary-contrast,#fff); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button--primary:hover:not(:disabled) { background:var(--bluui-primary-hover,#4338ca); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button:disabled, :is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__input:disabled { cursor:default; background:var(--bluui-surface-muted,#f7f8fb); color:var(--bluui-text-muted,#5c6b80); border-color:var(--bluui-border,#e2e8f0); }
+:is(.blu-notification-center, .blu-notification-center__panel) :is(button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--bluui-primary,#4f46e5); outline-offset:3px; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__input { display:block; width:100%; min-width:0; min-height:38px; border:1px solid var(--bluui-control-border,#7b8799); border-radius:7px; padding:8px 10px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); font:inherit; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__input[aria-invalid="true"] { border-color:var(--bluui-color-error-text,#a33133); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__field { display:flex; flex-direction:column; gap:6px; margin:0; min-width:0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__label { font-size:12px; font-weight:600; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__muted { color:var(--bluui-text-muted,#5c6b80); font-size:12px; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__error { display:block; color:var(--bluui-color-error-text,#a33133); font-size:13px; overflow-wrap:anywhere; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__success { color:var(--bluui-color-success-text,#2d6c0e); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__status { color:var(--bluui-text-muted,#5c6b80); margin:10px 0 0; font-size:13px; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__status:empty { margin:0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__empty { border:1px dashed var(--bluui-border-strong,#b8c4d4); border-radius:10px; padding:28px 20px; text-align:center; margin:12px 0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__empty p { color:var(--bluui-text-muted,#5c6b80); margin:6px 0 0; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__savebar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; margin:0 0 16px; border:1px solid var(--bluui-color-primary-border,#c7d2fe); border-radius:10px; background:var(--bluui-color-primary-soft,#eef2ff); }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__savebar > span { flex:1; min-width:100px; color:var(--bluui-color-primary-text,#4338ca); font-weight:600; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__count { border-radius:20px; padding:3px 8px; background:var(--bluui-color-primary-soft,#eef2ff); color:var(--bluui-color-primary-text,#4338ca); font-size:12px; }
+:is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
+@media (forced-colors:active) { :is(.blu-notification-center, .blu-notification-center__panel) .blu-platform__button[aria-pressed="true"] { outline:2px solid Highlight; } }
+
+/* The same inbox can be embedded or placed beside its bell as a nonmodal dialog. */
+.blu-notification-center__bell { position:relative; }
+.blu-notification-center__panel { box-sizing:border-box; width:100%; padding:20px; background:var(--bluui-surface,#fff); color:var(--bluui-text,#182230); border:1px solid var(--bluui-border,#e2e8f0); border-radius:14px; }
+.blu-notification-center__panel > input { margin-bottom:12px; }
+.blu-notification-center__panel--popover { position:fixed; z-index:9000; overflow:auto; overscroll-behavior:contain; box-shadow:var(--bluui-menu-shadow); }
+.blu-notification-center__list { padding:0; margin:14px 0 0; list-style:none; }
+.blu-notification-center__item { padding:16px 0 16px 12px; border-bottom:1px solid var(--bluui-border,#e2e8f0); border-left:3px solid transparent; margin-bottom:4px; }
+.blu-notification-center__item--unread { border-left-color:var(--blu-inbox-color,var(--bluui-primary,#4f46e5)); background:var(--bluui-surface-muted,#f7f8fb); }
+.blu-notification-center__item h4 { margin:0 0 6px; font-size:14px; }
+.blu-notification-center__item p { margin:0 0 8px; overflow-wrap:anywhere; }
+.blu-notification-center__item .blu-platform__muted { display:flex; flex-wrap:wrap; gap:8px; }
+.blu-notification-center__actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
+.blu-notification-center__actions .blu-platform__button { min-height:30px; padding:5px 8px; font-size:12px; }
+
+/* A visible design-time caption is hidden after the runtime mounts. */
+.blu-notification-center-block > .blu-component-preview { padding:20px; border:1px dashed var(--bluui-border-strong); color:var(--bluui-text-muted); border-radius:10px; }

package/styles/notification.css

@@ -0,0 +1,155 @@
+/* Shared controls used by this Block. Colors resolve through BluUITheme. */
+.blu-common-button{
+  appearance:none;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:8px;
+  min-height:36px;
+  padding:7px 13px;
+  border:1px solid var(--bluui-border,#dce3ed);
+  border-radius:8px;
+  background:var(--bluui-surface,#fff);
+  color:var(--bluui-text,#182333);
+  font:inherit;
+  font-size:13px;
+  font-weight:600;
+  line-height:1.4;
+  white-space:nowrap;
+  cursor:pointer;
+  text-decoration:none;
+  box-shadow:none
+}
+.blu-common-button:hover:not(:disabled){
+  background:var(--bluui-surface-muted,#f4f6fa);
+  border-color:var(--bluui-primary,#5144ed)
+}
+.blu-common-button--primary{
+  background:var(--bluui-color-primary-solid,#5144ed);
+  color:var(--bluui-color-primary-contrast,#fff);
+  border-color:transparent
+}
+.blu-common-button--primary:hover:not(:disabled){
+  background:var(--bluui-color-primary-solid,#5144ed);
+  filter:brightness(.93)
+}
+.blu-common-button:disabled{
+  opacity:.45;
+  cursor:not-allowed
+}
+.blu-common-button:focus-visible,.blu-pagination input:focus-visible,.blu-pagination select:focus-visible{
+  outline:3px solid var(--bluui-primary,#5144ed);
+  outline-offset:2px
+}
+.blu-common-muted{
+  color:var(--bluui-text-muted,#68758b);
+  font-size:14px
+}
+.blu-common-error{
+  color:var(--bluui-color-error-text,#b42318);
+  font-size:13px;
+  margin:8px 0
+}
+.blu-common-error[hidden]{
+  display:none!important
+}
+
+/* Fixed message stack. Only individual cards receive pointer events. */
+/* Persistent live regions remain accessible while taking no visual space.
+   Never use display:none or hidden: either would suppress announcements. */
+.blu-notification__announcer{
+  position:absolute;
+  width:1px;
+  height:1px;
+  padding:0;
+  margin:-1px;
+  overflow:hidden;
+  clip-path:inset(50%);
+  white-space:nowrap;
+  border:0
+}
+.blu-notifications{
+  position:fixed;
+  z-index:1300;
+  width:min(380px,calc(100vw - 32px));
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+  pointer-events:none;
+  color:var(--bluui-text)
+}
+.blu-notifications[data-placement=TopRight]{
+  top:24px;
+  right:24px
+}
+.blu-notifications[data-placement=TopLeft]{
+  top:24px;
+  left:24px
+}
+.blu-notifications[data-placement=BottomRight]{
+  bottom:24px;
+  right:24px
+}
+.blu-notifications[data-placement=BottomLeft]{
+  bottom:24px;
+  left:24px
+}
+.blu-notification{
+  pointer-events:auto;
+  display:grid;
+  grid-template-columns:32px minmax(0,1fr) 26px;
+  gap:12px;
+  padding:18px;
+  background:var(--bluui-surface);
+  border:1px solid var(--bluui-border);
+  border-radius:14px;
+  box-shadow:0 12px 40px #0002;
+  animation:blu-notice-enter .18s ease-out
+}
+.blu-notification__icon{
+  display:grid;
+  place-items:center;
+  width:30px;
+  height:30px;
+  font-weight:700;
+  border-radius:50%;
+  background:var(--blu-common-soft);
+  color:var(--blu-common-color)
+}
+.blu-notification__copy strong{
+  font-size:14px;
+  line-height:1.5
+}
+.blu-notification__copy p{
+  margin:5px 0 12px;
+  color:var(--bluui-text-muted);
+  font-size:13px;
+  line-height:1.6
+}
+.blu-notification>button{
+  align-self:start;
+  border:0;
+  min-height:26px;
+  padding:0;
+  font-size:21px;
+  background:transparent
+}
+@keyframes blu-notice-enter{from{
+  opacity:0;
+  transform:translateY(-8px)
+}to{
+  opacity:1;
+  transform:translateY(0)
+}}
+@media(prefers-reduced-motion:reduce){.blu-notification{
+  animation:none
+}}
+@media(max-width:600px){.blu-notifications{
+  right:16px!important;
+  left:auto!important
+}}
+
+/* Hide the canvas-only caption once this instance has initialized. */
+.blu-notification-block:has([data-blu-ready]) > .blu-component-preview {
+  display: none;
+}

package/styles/page-header.css

@@ -0,0 +1,184 @@
+/* BluUI_Core → Breadcrumbs — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-breadcrumbs {
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--bluui-text, #182230);
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+}
+/* Breadcrumbs — a wrapping path of links and the current-page label.
+The native Block supplies the list/navigation semantics and click events. */
+.blu-breadcrumbs {
+  width: 100%;
+}
+.blu-breadcrumbs .blu-breadcrumbs__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  list-style: none;
+}
+.blu-breadcrumbs .blu-breadcrumbs__list > :is([data-container], .list-item, [data-block]) {
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+  padding: 0;
+  border: 0;
+}
+.blu-breadcrumbs .blu-breadcrumbs__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.6;
+}
+.blu-breadcrumbs .blu-breadcrumbs__link {
+  color: var(--bluui-primary, #4f46e5);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  border-radius: 3px;
+  overflow-wrap: anywhere;
+}
+.blu-breadcrumbs .blu-breadcrumbs__link:focus-visible {
+  outline: 2px solid var(--bluui-primary, #4f46e5);
+  outline-offset: 3px;
+}
+.blu-breadcrumbs .blu-breadcrumbs__current {
+  color: var(--bluui-text, #182230);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+.blu-breadcrumbs .blu-breadcrumbs__separator {
+  color: var(--bluui-text-muted, #64748b);
+}
+/* Only the optional BreadcrumbPreview container uses this class.
+Normal browsers hide it; Service Studio displays the sample path. */
+.blu-breadcrumbs.blu-breadcrumbs__preview {
+  display: none;
+  -servicestudio-display: flex;
+  -servicestudio-align-items: center;
+  -servicestudio-flex-wrap: wrap;
+  -servicestudio-gap: 8px;
+  -servicestudio-font-size: 12px;
+  -servicestudio-line-height: 1.6;
+}
+
+/* The existing Items List owns the actual breadcrumb path. */
+.blu-breadcrumbs.blu-breadcrumbs__live {
+  -servicestudio-display: none;
+}
+
+/* BluUI_Core → PageHeader — Style Sheet.
+Canonical Block CSS. Paste the whole file into this Block only.
+Theme variables remain inherited; selectors keep the existing widget classes. */
+
+.blu-page-header {
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--bluui-text, #182230);
+  font-family: var(--bluui-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+}
+/* PageHeader — section label, title/description, and trailing action slot.
+The responsive section below stacks these areas on smaller screens. */
+.blu-page-header {
+  width: 100%;
+}
+.blu-page-header .blu-page-header__breadcrumbs {
+  margin-bottom: 14px;
+}
+.blu-page-header .blu-page-header__section {
+  display: block;
+  margin-bottom: 14px;
+  color: var(--bluui-text-muted, #64748b);
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1.5;
+  letter-spacing: .12em;
+  overflow-wrap: anywhere;
+}
+.blu-page-header .blu-page-header__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  width: 100%;
+  min-width: 0;
+}
+.blu-page-header .blu-page-header__copy {
+  flex: 1 1 0%;
+  width: auto;
+  min-width: 0;
+}
+.blu-page-header .blu-page-header__title {
+  display: block;
+  margin: 0;
+  color: var(--bluui-text, #182230);
+  font-size: clamp(24px, 2.4vw, 34px);
+  font-weight: 650;
+  line-height: 1.2;
+  letter-spacing: -.035em;
+  overflow-wrap: anywhere;
+}
+.blu-page-header .blu-page-header__description {
+  display: block;
+  margin-top: 10px;
+  color: var(--bluui-text-muted, #64748b);
+  font-size: 13px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.blu-page-header .blu-page-header__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
+  flex: 0 1 auto;
+  max-width: 45%;
+  margin-inline-start: auto;
+}
+/* Placeholders and referenced Blocks may add wrapper elements. */
+.blu-page-header__actions > :is([data-block], [data-container]) {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: auto;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Smaller screens retain source order and reduce spacing. */
+@media (max-width: 700px) {
+  .blu-page-header .blu-page-header__row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 16px;
+  }
+  .blu-page-header .blu-page-header__copy {
+    flex-basis: auto;
+  }
+  .blu-page-header .blu-page-header__actions {
+    justify-content: flex-start;
+    max-width: 100%;
+    margin-inline-start: 0;
+  }
+}
+/* Design canvas: reserve space for optional slots. */
+.blu-page-header .blu-page-header__actions {
+  -servicestudio-min-width: 112px;
+  -servicestudio-min-height: 32px;
+}
+.blu-page-header .blu-page-header__breadcrumbs {
+  -servicestudio-min-height: 28px;
+}