@gemboss/ui 0.48.0 → 0.50.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 +260 -0
- package/README.md +127 -11
- package/catalog/editor.html +1 -1
- package/catalog/index.html +10 -10
- package/gemboss-ui.css +3 -3
- package/package.json +22 -2
- package/parts/components.css +3 -3
- package/parts/core.css +1 -1
- package/parts/shell.css +2 -2
- package/src/app-shell.css +1 -1
- package/src/assistant/chat.tsx +50 -6
- package/src/assistant/host.tsx +19 -7
- package/src/assistant/index.ts +1 -1
- package/src/assistant/sessions.tsx +2 -1
- package/src/assistant-chat.css +1 -1
- package/src/assistant.css +1 -1
- package/src/auth-signin-plain.js +1 -0
- package/src/auth-sso-plain.js +1 -1
- package/src/auth.tsx +105 -8
- package/src/briefing-card.css +1 -1
- package/src/collections.css +1 -1
- package/src/create-shell.css +1 -0
- package/src/create-shell.tsx +221 -0
- package/src/editor-insert.css +1 -0
- package/src/editor.css +1 -1
- package/src/empty-stage.css +1 -0
- package/src/empty-stage.tsx +31 -0
- package/src/icons.tsx +2 -0
- package/src/index-table.tsx +7 -4
- package/src/index.ts +16 -2
- package/src/kit-plain.css +1 -1
- package/src/kit-plain.js +1 -1
- package/src/language-switcher.tsx +10 -41
- package/src/list-page.css +1 -0
- package/src/list-page.tsx +239 -0
- package/src/menu-extras.css +1 -0
- package/src/menu-keys.ts +199 -0
- package/src/menu-layer.ts +2 -1
- package/src/menu-plain.js +1 -0
- package/src/menu.css +1 -0
- package/src/menu.tsx +83 -35
- package/src/pager-extras.css +1 -0
- package/src/pager.css +1 -0
- package/src/pager.tsx +88 -0
- package/src/portal.css +1 -1
- package/src/segmented.tsx +12 -2
- package/src/selection.tsx +3 -1
- package/src/session-rail-plain.js +1 -1
- package/src/settings-dialog.tsx +29 -2
- package/src/shell.css +1 -1
- package/src/stage-path.css +1 -0
- package/src/stage-path.tsx +89 -0
- package/src/stage.css +1 -0
- package/src/stage.tsx +52 -0
- package/src/starting-point.css +1 -0
- package/src/starting-point.tsx +93 -0
- package/src/status-list.css +1 -0
- package/src/status-list.tsx +65 -0
- package/src/status-matrix.css +1 -0
- package/src/status-matrix.tsx +131 -0
- package/src/team-chat.css +1 -1
- package/src/translation-row.css +1 -0
- package/src/translation-row.tsx +113 -0
- package/src/ui.css +1 -1
package/src/kit-plain.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ui-btn--icon{flex:none;width:var(--ui-btn-h);padding:0}.ui-btn--icon svg{width:18px;height:18px}.ui-menu{position:relative;display:inline-block}.ui-menu>summary{list-style:none;cursor:pointer}.ui-menu>summary::-webkit-details-marker{display:none}.ui-menu__list{position:absolute;z-index:20;top:calc(100% + 4px);left:0;display:grid;min-width:220px;padding:6px;box-sizing:border-box}.ui-menu--end .ui-menu__list{left:auto;right:0}.ui-menu__list[popover]{position:fixed;inset:auto;margin:0;overflow:auto}.ui-menu__list[popover]:not(:popover-open){display:none}:where(.ui-menu__list[popover]){border:0;background:none;color:inherit}:root[data-gb-menus=float] .ui-menu[open]>.ui-menu__list:not([popover]){visibility:hidden}.ui-menu__item:is([disabled],[aria-disabled=true]){opacity:.5;cursor:not-allowed;pointer-events:none}.ui-menu__hint{margin-left:auto;padding-left:var(--ui-space-4);color:var(--ui-text-muted);font-size:var(--ui-fs-caption)}.ui-menu__sep{height:1px;margin:var(--ui-space-1) 0;border:0;background:var(--ui-border)}.ui-check{display:inline-flex;align-items:center;gap:var(--ui-space-2);min-height:44px;max-width:100%;overflow-wrap:break-word;cursor:pointer;font-size:var(--ui-fs-body);color:var(--ui-text)}.ui-check>input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--ui-accent);cursor:inherit}.ui-check>input:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}.ui-check:has(>input:disabled){opacity:.5;cursor:not-allowed}.ui-check>:last-child:not(input){min-width:0}.ui-label{display:block;margin:0 0 var(--ui-space-1);font-size:var(--ui-fs-caption);font-weight:600;color:var(--ui-text-muted)}.ui-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--ui-space-2) var(--ui-space-4);margin:0;font-size:var(--ui-fs-body)}.ui-kv>dt{color:var(--ui-text-muted)}.ui-kv>dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--ui-text)}@media (pointer: coarse){.ui-btn--icon:not(.ui-btn--sm){min-width:44px}}@media (max-width: 47.9975em){.ui-btn--icon:not(.ui-btn--sm){min-width:44px;min-height:44px}}.ui-link,.ui-prose :where(a:not([class])){color:var(--gemboss-accent-strong, #3a44de);text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:2px}.ui-link:visited,.ui-prose :where(a:not([class])):visited{color:var(--gemboss-accent-strong, #3a44de)}.ui-link:hover,.ui-prose :where(a:not([class])):hover{color:var(--gemboss-accent, #5661f5);text-decoration-thickness:2px}.ui-link:focus-visible,.ui-prose :where(a:not([class])):focus-visible{outline:2px solid var(--ui-focus, #5661f5);outline-offset:2px;border-radius:2px}.ui-card--media{position:relative;padding:0;overflow:hidden;display:flex;flex-direction:column}.ui-card__link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;color:var(--ui-text);font-size:var(--ui-fs-body);line-height:20px;font-weight:650;text-decoration:none;overflow-wrap:anywhere}.ui-card__link:after{content:"";position:absolute;inset:0;z-index:0}.ui-card__link:focus-visible{outline:none}.ui-card--media:has(.ui-card__link){cursor:pointer}.ui-card--media:has(.ui-card__link:hover){border-color:var(--ui-text-muted)}.ui-card--media:has(.ui-card__link:focus-visible){outline:2px solid var(--ui-focus);outline-offset:1px}.ui-card--media :is(.ui-card__foot button,.ui-card__foot a,.ui-card__body a:not(.ui-card__link),.ui-card__body button,select,input,summary){position:relative;z-index:1}.ui-card__menu{position:absolute;top:8px;right:8px;z-index:2}.ui-card--media:has(>.ui-card__menu){overflow:visible}.ui-card--media:has(>.ui-card__menu)>.ui-card__media{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.ui-card__meta{color:var(--ui-text-muted);font-size:var(--ui-fs-caption);line-height:16px}.ui-card--media[data-ratio="4/3"]>.ui-card__media{aspect-ratio:4 / 3}.ui-card--media[data-ratio="1/1"]>.ui-card__media{aspect-ratio:1 / 1}.ui-card__media{display:block;width:100%;aspect-ratio:16 / 10;margin:0;padding:0;border:0;border-bottom:1px solid var(--ui-border);background:var(--ui-surface-2);overflow:hidden;color:inherit}.ui-card__media>img{display:block;width:100%;height:100%;object-fit:cover}button.ui-card__media,a.ui-card__media{cursor:pointer}.ui-card__media:focus-visible{outline:2px solid var(--ui-focus, #5661f5);outline-offset:-2px}.ui-card__body{display:grid;justify-items:start;gap:var(--ui-space-2, 8px);padding:var(--ui-space-3, 12px) var(--ui-space-4, 16px);min-width:0}.ui-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ui-space-2, 8px);margin-top:auto;padding:0 var(--ui-space-4, 16px) var(--ui-space-3, 12px);color:var(--ui-text-muted);font-size:var(--ui-fs-caption, 13px)}.ui-modal__subtitle{display:block;margin-top:2px;font-size:var(--ui-fs-caption);line-height:16px;font-weight:450;color:var(--ui-text-muted);overflow-wrap:anywhere}.ui-modal__actions{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2)}.ui-overlay>.ui-modal{display:flex;flex-direction:column;max-height:calc(100dvh - 40px)}.ui-modal>.ui-modal__head,.ui-modal>.ui-modal__foot{flex:none}.ui-modal>.ui-modal__body{flex:1 1 auto;min-height:0;overflow:auto}:root{--ui-series-1: var(--gemboss-accent, #5661f5);--ui-series-2: #0f9f8f;--ui-series-3: #d9822b;--ui-series-4: #c2417a;--ui-series-5: #6b7280}.ui-delta{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px;font-size:var(--gemboss-fs-caption);font-weight:600;color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-delta--good{color:var(--ui-success-fg)}.ui-delta--bad{color:var(--ui-danger-fg)}.ui-metrics--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--ui-space-3);margin:0}.ui-metric--lg{gap:4px;padding:var(--ui-space-3) var(--ui-space-4)}.ui-metric--lg .ui-metric__val{font-size:24px;line-height:32px}.ui-metric--lg .ui-metric__lbl{order:-1;font-size:var(--ui-fs-body)}.ui-metric__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}@media (max-width: 520px){.ui-metrics--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.ui-barlist{display:grid;gap:var(--ui-space-3);margin:0;padding:0;list-style:none;font-size:var(--ui-fs-body, 13px)}.ui-barlist>li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px var(--ui-space-3)}.ui-barlist__label{min-width:0;overflow-wrap:anywhere;color:var(--ui-text)}.ui-barlist__label a{color:inherit}.ui-barlist__val{font-weight:600;color:var(--ui-text);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}.ui-barlist__share{margin-left:6px;font-weight:400;color:var(--ui-text-muted)}.ui-barlist__note{grid-column:1 / -1;margin-top:-2px;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}.ui-barlist__bar{grid-column:1 / -1;position:relative;height:6px;border-radius:999px;background:var(--ui-surface-2);overflow:hidden}.ui-barlist__bar:after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v, 0) * 100%);min-width:3px;border-radius:inherit;background:var(--c, var(--ui-series-1))}.ui-chart{margin:0}.ui-chart__plot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:3px;height:180px;padding-top:18px;border-bottom:1px solid var(--ui-border);background:linear-gradient(to top,var(--ui-border) 1px,transparent 1px) 0 0 / 100% 25% repeat-y;background-origin:content-box;background-clip:content-box}.ui-chart__plot[data-max]:before{content:attr(data-max);position:absolute;top:0;left:0;font-size:var(--gemboss-fs-micro, 11px);line-height:1;color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-chart__col{position:relative;flex:1 1 0;min-width:0;max-width:48px;height:100%;display:flex;flex-direction:column-reverse}.ui-chart__col:hover{background:color-mix(in srgb,var(--ui-text) 6%,transparent)}.ui-chart__seg{display:block;flex:none;height:calc(var(--v, 0) * 100%);background:var(--c, var(--ui-series-1))}.ui-chart__dot{position:absolute;left:50%;bottom:calc(var(--v, 0) * 100%);width:8px;height:8px;margin:0 0 -4px -4px;box-sizing:border-box;border-radius:50%;background:var(--ui-surface);border:2px solid var(--c, var(--ui-text-strong, var(--ui-text)))}.ui-chart__axis{display:flex;justify-content:space-between;gap:var(--ui-space-2);margin-top:6px;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:var(--ui-space-2) 0 0;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}.ui-legend__item{display:inline-flex;align-items:center;gap:6px}.ui-legend__item>i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--c, var(--ui-series-1))}.ui-legend__item--dot>i{border-radius:50%;background:var(--ui-surface);border:2px solid var(--c, var(--ui-text-strong, var(--ui-text)));box-sizing:border-box}.ui-funnel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--ui-space-2);margin:0;padding:0;list-style:none}.ui-funnel>li{position:relative;display:flex;flex-direction:column;gap:2px;padding:var(--ui-space-3);border-radius:var(--ui-radius-md);background:var(--ui-surface-2);min-width:0}.ui-funnel__val{font-size:20px;font-weight:700;color:var(--ui-text);font-variant-numeric:tabular-nums;line-height:24px}.ui-funnel__lbl{font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted);overflow-wrap:anywhere}.ui-funnel__rate{order:-1;font-size:var(--gemboss-fs-caption);font-weight:600;color:var(--ui-series-1);font-variant-numeric:tabular-nums}@media (max-width: 520px){.ui-funnel{grid-auto-flow:row}}.ui-grid{display:grid;gap:var(--ui-space-4);align-items:start}.ui-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width: 1100px){.ui-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 960px){.ui-grid--2{grid-template-columns:minmax(0,1fr)}}@media (max-width: 720px){.ui-grid--3{grid-template-columns:minmax(0,1fr)}}.ui-section-head{margin:var(--ui-space-4) 0 0}.ui-section-head>h2{margin:0;font-size:14px;line-height:20px;font-weight:650;color:var(--ui-text)}.ui-section-head>p{margin:2px 0 0;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}.ui-seg{max-width:100%;overflow-x:auto}.ui-seg :is(button,a).is-text{flex:none;white-space:nowrap}@media (max-width: 360px){.ui-seg :is(button,a).is-text{padding:0 9px}}@media (pointer: coarse),(max-width: 47.9975em){.ui-seg :is(button,a){height:44px;min-height:44px}}.ui-btn--critical{color:var(--gemboss-danger-strong)}.ui-btn--critical:hover{background:var(--gemboss-danger-soft);color:var(--gemboss-danger-strong)}.ui-btn--primary.ui-btn--critical{background:var(--gemboss-danger);border-color:var(--gemboss-danger);color:var(--gemboss-on-primary)}.ui-btn--primary.ui-btn--critical:hover{background:var(--gemboss-danger-strong);border-color:var(--gemboss-danger-strong);color:var(--gemboss-on-primary)}.ui-btn--critical:focus-visible{outline-color:var(--gemboss-danger-strong)}@media (pointer: coarse),(max-width: 47.9975em){.ui-btn,.ui-btn.ui-btn--sm,.ui-select.ui-select{min-height:44px}.ui-btn--icon.ui-btn--sm,.ui-seg :is(button,a):not(.is-text){min-width:44px}}.ui-badge--success{background:var(--gemboss-success-soft);color:var(--gemboss-success-strong)}.ui-badge--warning{background:var(--gemboss-warning-soft);color:var(--gemboss-warning)}.ui-badge--critical{background:var(--gemboss-danger-soft);color:var(--gemboss-danger-strong)}.ui-badge--info{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong)}.ui-badge--dot:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}.ui-banner{--ui-banner-bg: var(--ui-surface-2);--ui-banner-fg: var(--ui-text);border-radius:var(--ui-radius-lg);overflow:hidden;background:var(--ui-surface);color:var(--ui-text);box-shadow:0 0 0 1px var(--ui-border),0 3px 1px -1px #1a1a1a12;font-size:var(--ui-fs-body);line-height:20px}.ui-banner--success{--ui-banner-bg: var(--gemboss-success-soft);--ui-banner-fg: var(--gemboss-success-strong)}.ui-banner--warning{--ui-banner-bg: var(--gemboss-warning-soft);--ui-banner-fg: var(--gemboss-warning)}.ui-banner--critical{--ui-banner-bg: var(--gemboss-danger-soft);--ui-banner-fg: var(--gemboss-danger-strong)}.ui-banner--info{--ui-banner-bg: var(--gemboss-accent-soft);--ui-banner-fg: var(--gemboss-accent-strong)}.ui-banner__head{display:flex;align-items:center;gap:var(--ui-space-2);min-height:32px;padding:6px var(--ui-space-3);background:var(--ui-banner-bg);color:var(--ui-banner-fg)}.ui-banner__icon{flex:none;width:20px;height:20px;fill:currentColor}.ui-banner__title{flex:1 1 auto;min-width:0;margin:0;font-size:var(--ui-fs-body);font-weight:650;line-height:20px}.ui-banner__close{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin:-6px -8px -6px 0;border:0;border-radius:var(--ui-radius-md);background:transparent;color:inherit;cursor:pointer}.ui-banner__close:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.ui-banner__close:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-banner__close svg{width:16px;height:16px}.ui-banner__body{padding:var(--ui-space-3) var(--ui-space-4)}.ui-banner__body>:first-child{margin-top:0}.ui-banner__body>:last-child{margin-bottom:0}.ui-banner__actions{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);margin-top:var(--ui-space-3)}@media (pointer: coarse),(max-width: 47.9975em){.ui-banner__close{width:44px;height:44px;margin:-12px -12px -12px 0}}.ui-help{margin:var(--ui-space-1) 0 0;font-size:var(--ui-fs-body);line-height:20px;color:var(--ui-text-muted)}.ui-error:empty{display:none}.ui-error{display:flex;gap:6px;margin:var(--ui-space-1) 0 0;font-size:var(--ui-fs-body);line-height:20px;color:var(--gemboss-danger-strong)}.ui-error:before{content:"";flex:none;width:16px;height:16px;margin-top:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat}.gemboss-field[aria-invalid=true],.gemboss-field--group:has([aria-invalid=true]),.ui-select[aria-invalid=true],.ui-textarea[aria-invalid=true]{border-color:var(--gemboss-danger-strong);background-color:var(--gemboss-danger-soft)}.ui-choices{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;border:0;min-width:0}.ui-choices>legend{padding:0}.ui-switch>input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;width:32px;height:20px;margin:0;border-radius:var(--gemboss-radius-full);background:var(--gemboss-field-line);transition:background-color var(--gemboss-transition-fast) ease}.ui-switch>input[type=checkbox]:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--gemboss-surface);box-shadow:0 1px 2px #0003;transition:transform var(--gemboss-transition-fast) ease}.ui-switch>input[type=checkbox]:checked{background:var(--ui-accent)}.ui-switch>input[type=checkbox]:checked:before{transform:translate(12px)}@media (prefers-reduced-motion: reduce){.ui-switch>input[type=checkbox],.ui-switch>input[type=checkbox]:before{transition:none}}.ui-tooltip{position:relative;display:inline-flex}.ui-tooltip__bubble{position:absolute;z-index:30;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);width:max-content;max-width:240px;padding:4px 8px;border-radius:var(--ui-radius-md);background:var(--ui-surface);color:var(--ui-text);font-size:var(--ui-fs-body);line-height:20px;font-weight:450;box-shadow:0 8px 16px -4px #1a1a1a38,0 0 0 1px var(--ui-border);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--gemboss-transition-fast) ease}.ui-tooltip--end .ui-tooltip__bubble{left:auto;right:0;transform:none}.ui-tooltip:hover>.ui-tooltip__bubble,.ui-tooltip:focus-within>.ui-tooltip__bubble{opacity:1;visibility:visible}.ui-spinner{display:inline-block;flex:none;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:2px solid color-mix(in srgb,var(--ui-text) 18%,transparent);border-top-color:var(--ui-text);animation:ui-spin .7s linear infinite;vertical-align:middle}.ui-spinner--lg{width:44px;height:44px;border-width:4px}@keyframes ui-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ui-spinner{animation-duration:2s}}.ui-progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:8px;border:0;border-radius:var(--gemboss-radius-full);overflow:hidden;background:var(--gemboss-divider);color:var(--ui-accent)}.ui-progress::-webkit-progress-bar{background:var(--gemboss-divider);border-radius:inherit}.ui-progress::-webkit-progress-value{background:currentColor;border-radius:inherit}.ui-progress::-moz-progress-bar{background:currentColor;border-radius:inherit}.ui-progress--success{color:var(--gemboss-success)}.ui-progress--critical{color:var(--gemboss-danger)}.ui-modal--wide{width:min(620px,100%)}dialog.ui-modal{padding:0;max-width:calc(100% - 40px);max-height:calc(100dvh - 40px);color:var(--ui-text)}dialog.ui-modal[open]{display:flex;flex-direction:column}dialog.ui-modal::backdrop{background:#00000080}html:has(dialog.ui-modal:modal){overflow:hidden}@media (pointer: coarse),(max-width: 47.9975em){.ui-btn.ui-btn--sm{min-width:44px}}.ui-badge--wrap{white-space:normal;overflow-wrap:anywhere;line-height:16px}.ui-page-head--actions{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px}.ui-page-head--actions>:first-child{min-width:0}.ui-page-head__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2)}.ui-chips>button.ui-tag--chip{min-height:28px;padding:4px 12px;border-radius:var(--ui-radius-md, 8px);cursor:pointer;font-family:inherit;font-size:var(--gemboss-fs-caption, 12px);color:var(--ui-text)}.ui-chips>button.ui-tag--chip:hover{background:var(--ui-surface-2);border-color:var(--ui-text-muted)}.ui-chips>button.ui-tag--chip:focus-visible{outline:2px solid var(--ui-focus, #5661f5);outline-offset:1px}.ui-chips>button.ui-tag--chip[aria-pressed=true]{background:var(--ui-accent-soft);border-color:var(--ui-accent);color:var(--ui-accent-strong);font-weight:600}@media (pointer: coarse),(max-width: 47.9975em){.ui-chips>button.ui-tag--chip{min-height:44px;min-width:44px;justify-content:center}}@media (max-width: 47.9975em){.gemboss-ec-input.gemboss-ec-input textarea{font-size:16px}}.ui-seg button[aria-pressed=true]{background:var(--ui-accent-soft);color:var(--ui-accent-strong)}:is(.gemboss-field,.ui-textarea)[readonly][readonly]{background:var(--ui-surface-2);border-color:var(--ui-border);cursor:default}.ui-modal>form{display:contents}.ui-modal>form>.ui-modal__head,.ui-modal>form>.ui-modal__foot{flex:none}.ui-modal>form>.ui-modal__body{flex:1 1 auto;min-height:0;overflow:auto}button.ui-metric{font:inherit;text-align:left;color:inherit;cursor:pointer}button.ui-metric:hover{border-color:var(--ui-text-muted)}button.ui-metric:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}.ui-metric.ui-metric:is([aria-pressed=true],[aria-current=page]){border-color:var(--gemboss-accent);box-shadow:inset 0 0 0 1px var(--gemboss-accent)}.ui-pager>a,.ui-pager>[aria-disabled=true]{min-width:32px;justify-content:center;box-sizing:border-box;gap:4px}.ui-pager>a[aria-current=page]{background:var(--ui-text);border-color:var(--ui-text);color:var(--ui-surface);font-size:var(--ui-fs-body);font-weight:600}.ui-pager>a[aria-current=page]:hover{background:var(--ui-text)}.ui-pager>[aria-disabled=true]{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-md);color:var(--ui-text-muted);font-size:var(--ui-fs-body);opacity:.55;cursor:default}.ui-pager>[aria-disabled=true]:hover{background:none}.ui-pager__gap{min-width:16px;text-align:center;color:var(--ui-text-muted)}.ui-pager__range{margin-left:auto;color:var(--ui-text-muted);font-size:var(--ui-fs-body);font-variant-numeric:tabular-nums}.ui-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:16px 0;color:var(--ui-text-muted);font-size:var(--ui-fs-body);text-align:center}.ui-more[hidden]{display:none}@media (pointer: coarse),(max-width: 47.9975em){.ui-pager>a,.ui-pager>[aria-disabled=true]{min-width:44px;min-height:44px}}@media (max-width: 35.9975em){.ui-pager>a:not([rel]):not([aria-current]):not([aria-disabled]),.ui-pager__gap{display:none}}.ui-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;height:var(--ui-btn-h, 28px);padding:0 12px;border:1px dashed var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface);color:var(--ui-text);font:inherit;font-size:var(--ui-fs-caption);font-weight:550;line-height:16px;white-space:nowrap;text-decoration:none;cursor:pointer}.ui-chip:hover{border-style:solid;background:var(--ui-surface-2)}.ui-chip:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}.ui-chip:is([aria-pressed=true],[aria-current=page],[aria-current=true]){border-style:solid;border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent-strong)}@media (pointer: coarse),(max-width: 47.9975em){.ui-chip{height:auto;min-height:44px;min-width:44px}}.ui-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ui-space-4)}.ui-stack--tight{gap:var(--ui-space-2)}
|
|
1
|
+
.ui-check{display:inline-flex;align-items:center;gap:var(--ui-space-2);min-height:44px;max-width:100%;overflow-wrap:break-word;cursor:pointer;font-size:var(--ui-fs-body);color:var(--ui-text)}.ui-check>input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--ui-accent);cursor:inherit}.ui-check>input:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}.ui-check:has(>input:disabled){opacity:.5;cursor:not-allowed}.ui-check>:last-child:not(input){min-width:0}.ui-label{display:block;margin:0 0 var(--ui-space-1);font-size:var(--ui-fs-caption);font-weight:600;color:var(--ui-text-muted)}.ui-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:var(--ui-space-2) var(--ui-space-4);margin:0;font-size:var(--ui-fs-body)}.ui-kv>dt{color:var(--ui-text-muted)}.ui-kv>dd{margin:0;min-width:0;overflow-wrap:anywhere;color:var(--ui-text)}.ui-link,.ui-prose :where(a:not([class])){color:var(--gemboss-accent-strong, #3a44de);text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:2px}.ui-link:visited,.ui-prose :where(a:not([class])):visited{color:var(--gemboss-accent-strong, #3a44de)}.ui-link:hover,.ui-prose :where(a:not([class])):hover{color:var(--gemboss-accent, #5661f5);text-decoration-thickness:2px}.ui-link:focus-visible,.ui-prose :where(a:not([class])):focus-visible{outline:2px solid var(--ui-focus, #5661f5);outline-offset:2px;border-radius:2px}.ui-card--media{position:relative;padding:0;overflow:hidden;display:flex;flex-direction:column}.ui-card__link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;color:var(--ui-text);font-size:var(--ui-fs-body);line-height:20px;font-weight:650;text-decoration:none;overflow-wrap:anywhere}.ui-card__link:after{content:"";position:absolute;inset:0;z-index:0}.ui-card__link:focus-visible{outline:none}.ui-card--media:has(.ui-card__link){cursor:pointer}.ui-card--media:has(.ui-card__link:hover){border-color:var(--ui-text-muted)}.ui-card--media:has(.ui-card__link:focus-visible){outline:2px solid var(--ui-focus);outline-offset:1px}.ui-card--media :is(.ui-card__foot button,.ui-card__foot a,.ui-card__body a:not(.ui-card__link),.ui-card__body button,select,input,summary){position:relative;z-index:1}.ui-card__menu{position:absolute;top:8px;right:8px;z-index:2}.ui-card--media:has(>.ui-card__menu){overflow:visible}.ui-card--media:has(>.ui-card__menu)>.ui-card__media{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}.ui-card__meta{color:var(--ui-text-muted);font-size:var(--ui-fs-caption);line-height:16px}.ui-card--media[data-ratio="4/3"]>.ui-card__media{aspect-ratio:4 / 3}.ui-card--media[data-ratio="1/1"]>.ui-card__media{aspect-ratio:1 / 1}.ui-card__media{display:block;width:100%;aspect-ratio:16 / 10;margin:0;padding:0;border:0;border-bottom:1px solid var(--ui-border);background:var(--ui-surface-2);overflow:hidden;color:inherit}.ui-card__media>img{display:block;width:100%;height:100%;object-fit:cover}button.ui-card__media,a.ui-card__media{cursor:pointer}.ui-card__media:focus-visible{outline:2px solid var(--ui-focus, #5661f5);outline-offset:-2px}.ui-card__body{display:grid;justify-items:start;gap:var(--ui-space-2, 8px);padding:var(--ui-space-3, 12px) var(--ui-space-4, 16px);min-width:0}.ui-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--ui-space-2, 8px);margin-top:auto;padding:0 var(--ui-space-4, 16px) var(--ui-space-3, 12px);color:var(--ui-text-muted);font-size:var(--ui-fs-caption, 13px)}.ui-overlay>.ui-modal{display:flex;flex-direction:column;max-height:calc(100dvh - 40px)}.ui-modal>.ui-modal__head,.ui-modal>.ui-modal__foot{flex:none}.ui-modal>.ui-modal__body{flex:1 1 auto;min-height:0;overflow:auto}:root{--ui-series-1: var(--gemboss-accent, #5661f5);--ui-series-2: #0f9f8f;--ui-series-3: #d9822b;--ui-series-4: #c2417a;--ui-series-5: #6b7280}.ui-delta{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px;font-size:var(--gemboss-fs-caption);font-weight:600;color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-delta--good{color:var(--ui-success-fg)}.ui-delta--bad{color:var(--ui-danger-fg)}.ui-metrics--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--ui-space-3);margin:0}.ui-metric--lg{gap:4px;padding:var(--ui-space-3) var(--ui-space-4)}.ui-metric--lg .ui-metric__val{font-size:24px;line-height:32px}.ui-metric--lg .ui-metric__lbl{order:-1;font-size:var(--ui-fs-body)}.ui-metric__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}@media (max-width: 520px){.ui-metrics--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.ui-barlist{display:grid;gap:var(--ui-space-3);margin:0;padding:0;list-style:none;font-size:var(--ui-fs-body, 13px)}.ui-barlist>li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px var(--ui-space-3)}.ui-barlist__label{min-width:0;overflow-wrap:anywhere;color:var(--ui-text)}.ui-barlist__label a{color:inherit}.ui-barlist__val{font-weight:600;color:var(--ui-text);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}.ui-barlist__share{margin-left:6px;font-weight:400;color:var(--ui-text-muted)}.ui-barlist__note{grid-column:1 / -1;margin-top:-2px;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}.ui-barlist__bar{grid-column:1 / -1;position:relative;height:6px;border-radius:999px;background:var(--ui-surface-2);overflow:hidden}.ui-barlist__bar:after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v, 0) * 100%);min-width:3px;border-radius:inherit;background:var(--c, var(--ui-series-1))}.ui-chart{margin:0}.ui-chart__plot{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:3px;height:180px;padding-top:18px;border-bottom:1px solid var(--ui-border);background:linear-gradient(to top,var(--ui-border) 1px,transparent 1px) 0 0 / 100% 25% repeat-y;background-origin:content-box;background-clip:content-box}.ui-chart__plot[data-max]:before{content:attr(data-max);position:absolute;top:0;left:0;font-size:var(--gemboss-fs-micro, 11px);line-height:1;color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-chart__col{position:relative;flex:1 1 0;min-width:0;max-width:48px;height:100%;display:flex;flex-direction:column-reverse}.ui-chart__col:hover{background:color-mix(in srgb,var(--ui-text) 6%,transparent)}.ui-chart__seg{display:block;flex:none;height:calc(var(--v, 0) * 100%);background:var(--c, var(--ui-series-1))}.ui-chart__dot{position:absolute;left:50%;bottom:calc(var(--v, 0) * 100%);width:8px;height:8px;margin:0 0 -4px -4px;box-sizing:border-box;border-radius:50%;background:var(--ui-surface);border:2px solid var(--c, var(--ui-text-strong, var(--ui-text)))}.ui-chart__axis{display:flex;justify-content:space-between;gap:var(--ui-space-2);margin-top:6px;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted);font-variant-numeric:tabular-nums}.ui-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:var(--ui-space-2) 0 0;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}.ui-legend__item{display:inline-flex;align-items:center;gap:6px}.ui-legend__item>i{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--c, var(--ui-series-1))}.ui-legend__item--dot>i{border-radius:50%;background:var(--ui-surface);border:2px solid var(--c, var(--ui-text-strong, var(--ui-text)));box-sizing:border-box}.ui-funnel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--ui-space-2);margin:0;padding:0;list-style:none}.ui-funnel>li{position:relative;display:flex;flex-direction:column;gap:2px;padding:var(--ui-space-3);border-radius:var(--ui-radius-md);background:var(--ui-surface-2);min-width:0}.ui-funnel__val{font-size:20px;font-weight:700;color:var(--ui-text);font-variant-numeric:tabular-nums;line-height:24px}.ui-funnel__lbl{font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted);overflow-wrap:anywhere}.ui-funnel__rate{order:-1;font-size:var(--gemboss-fs-caption);font-weight:600;color:var(--ui-series-1);font-variant-numeric:tabular-nums}@media (max-width: 520px){.ui-funnel{grid-auto-flow:row}}.ui-grid{display:grid;gap:var(--ui-space-4);align-items:start}.ui-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (max-width: 1100px){.ui-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 960px){.ui-grid--2{grid-template-columns:minmax(0,1fr)}}@media (max-width: 720px){.ui-grid--3{grid-template-columns:minmax(0,1fr)}}.ui-section-head{margin:var(--ui-space-4) 0 0}.ui-section-head>h2{margin:0;font-size:14px;line-height:20px;font-weight:650;color:var(--ui-text)}.ui-section-head>p{margin:2px 0 0;font-size:var(--gemboss-fs-caption);color:var(--ui-text-muted)}.ui-seg{max-width:100%;overflow-x:auto}.ui-seg :is(button,a).is-text{flex:none;white-space:nowrap}@media (max-width: 360px){.ui-seg :is(button,a).is-text{padding:0 9px}}@media (pointer: coarse),(max-width: 47.9975em){.ui-seg :is(button,a){height:44px;min-height:44px}}.ui-btn--critical{color:var(--gemboss-danger-strong)}.ui-btn--critical:hover{background:var(--gemboss-danger-soft);color:var(--gemboss-danger-strong)}.ui-btn--primary.ui-btn--critical{background:var(--gemboss-danger);border-color:var(--gemboss-danger);color:var(--gemboss-on-primary)}.ui-btn--primary.ui-btn--critical:hover{background:var(--gemboss-danger-strong);border-color:var(--gemboss-danger-strong);color:var(--gemboss-on-primary)}.ui-btn--critical:focus-visible{outline-color:var(--gemboss-danger-strong)}@media (pointer: coarse),(max-width: 47.9975em){.ui-btn,.ui-btn.ui-btn--sm,.ui-select.ui-select{min-height:44px}.ui-btn--icon.ui-btn--sm,.ui-seg :is(button,a):not(.is-text){min-width:44px}}.ui-badge--success{background:var(--gemboss-success-soft);color:var(--gemboss-success-strong)}.ui-badge--warning{background:var(--gemboss-warning-soft);color:var(--gemboss-warning)}.ui-badge--critical{background:var(--gemboss-danger-soft);color:var(--gemboss-danger-strong)}.ui-badge--info{background:var(--gemboss-accent-soft);color:var(--gemboss-accent-strong)}.ui-badge--dot:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}.ui-banner{--ui-banner-bg: var(--ui-surface-2);--ui-banner-fg: var(--ui-text);border-radius:var(--ui-radius-lg);overflow:hidden;background:var(--ui-surface);color:var(--ui-text);box-shadow:0 0 0 1px var(--ui-border),0 3px 1px -1px #1a1a1a12;font-size:var(--ui-fs-body);line-height:20px}.ui-banner--success{--ui-banner-bg: var(--gemboss-success-soft);--ui-banner-fg: var(--gemboss-success-strong)}.ui-banner--warning{--ui-banner-bg: var(--gemboss-warning-soft);--ui-banner-fg: var(--gemboss-warning)}.ui-banner--critical{--ui-banner-bg: var(--gemboss-danger-soft);--ui-banner-fg: var(--gemboss-danger-strong)}.ui-banner--info{--ui-banner-bg: var(--gemboss-accent-soft);--ui-banner-fg: var(--gemboss-accent-strong)}.ui-banner__head{display:flex;align-items:center;gap:var(--ui-space-2);min-height:32px;padding:6px var(--ui-space-3);background:var(--ui-banner-bg);color:var(--ui-banner-fg)}.ui-banner__icon{flex:none;width:20px;height:20px;fill:currentColor}.ui-banner__title{flex:1 1 auto;min-width:0;margin:0;font-size:var(--ui-fs-body);font-weight:650;line-height:20px}.ui-banner__close{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin:-6px -8px -6px 0;border:0;border-radius:var(--ui-radius-md);background:transparent;color:inherit;cursor:pointer}.ui-banner__close:hover{background:color-mix(in srgb,currentColor 10%,transparent)}.ui-banner__close:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.ui-banner__close svg{width:16px;height:16px}.ui-banner__body{padding:var(--ui-space-3) var(--ui-space-4)}.ui-banner__body>:first-child{margin-top:0}.ui-banner__body>:last-child{margin-bottom:0}.ui-banner__actions{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);margin-top:var(--ui-space-3)}@media (pointer: coarse),(max-width: 47.9975em){.ui-banner__close{width:44px;height:44px;margin:-12px -12px -12px 0}}.ui-help{margin:var(--ui-space-1) 0 0;font-size:var(--ui-fs-body);line-height:20px;color:var(--ui-text-muted)}.ui-error:empty{display:none}.ui-error{display:flex;gap:6px;margin:var(--ui-space-1) 0 0;font-size:var(--ui-fs-body);line-height:20px;color:var(--gemboss-danger-strong)}.ui-error:before{content:"";flex:none;width:16px;height:16px;margin-top:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.75 4h1.5v5.5h-1.5V6Zm.75 9a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/></svg>") center / contain no-repeat}.gemboss-field[aria-invalid=true],.gemboss-field--group:has([aria-invalid=true]),.ui-select[aria-invalid=true],.ui-textarea[aria-invalid=true]{border-color:var(--gemboss-danger-strong);background-color:var(--gemboss-danger-soft)}.ui-choices{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:0;border:0;min-width:0}.ui-choices>legend{padding:0}.ui-switch>input[type=checkbox]{appearance:none;-webkit-appearance:none;position:relative;width:32px;height:20px;margin:0;border-radius:var(--gemboss-radius-full);background:var(--gemboss-field-line);transition:background-color var(--gemboss-transition-fast) ease}.ui-switch>input[type=checkbox]:before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--gemboss-surface);box-shadow:0 1px 2px #0003;transition:transform var(--gemboss-transition-fast) ease}.ui-switch>input[type=checkbox]:checked{background:var(--ui-accent)}.ui-switch>input[type=checkbox]:checked:before{transform:translate(12px)}@media (prefers-reduced-motion: reduce){.ui-switch>input[type=checkbox],.ui-switch>input[type=checkbox]:before{transition:none}}.ui-tooltip{position:relative;display:inline-flex}.ui-tooltip__bubble{position:absolute;z-index:30;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);width:max-content;max-width:240px;padding:4px 8px;border-radius:var(--ui-radius-md);background:var(--ui-surface);color:var(--ui-text);font-size:var(--ui-fs-body);line-height:20px;font-weight:450;box-shadow:0 8px 16px -4px #1a1a1a38,0 0 0 1px var(--ui-border);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--gemboss-transition-fast) ease}.ui-tooltip--end .ui-tooltip__bubble{left:auto;right:0;transform:none}.ui-tooltip:hover>.ui-tooltip__bubble,.ui-tooltip:focus-within>.ui-tooltip__bubble{opacity:1;visibility:visible}.ui-spinner{display:inline-block;flex:none;width:20px;height:20px;box-sizing:border-box;border-radius:50%;border:2px solid color-mix(in srgb,var(--ui-text) 18%,transparent);border-top-color:var(--ui-text);animation:ui-spin .7s linear infinite;vertical-align:middle}.ui-spinner--lg{width:44px;height:44px;border-width:4px}@keyframes ui-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ui-spinner{animation-duration:2s}}.ui-progress{appearance:none;-webkit-appearance:none;display:block;width:100%;height:8px;border:0;border-radius:var(--gemboss-radius-full);overflow:hidden;background:var(--gemboss-divider);color:var(--ui-accent)}.ui-progress::-webkit-progress-bar{background:var(--gemboss-divider);border-radius:inherit}.ui-progress::-webkit-progress-value{background:currentColor;border-radius:inherit}.ui-progress::-moz-progress-bar{background:currentColor;border-radius:inherit}.ui-progress--success{color:var(--gemboss-success)}.ui-progress--critical{color:var(--gemboss-danger)}.ui-modal--wide{width:min(620px,100%)}dialog.ui-modal{padding:0;max-width:calc(100% - 40px);max-height:calc(100dvh - 40px);color:var(--ui-text)}dialog.ui-modal[open]{display:flex;flex-direction:column}dialog.ui-modal::backdrop{background:#00000080}html:has(dialog.ui-modal:modal){overflow:hidden}@media (pointer: coarse),(max-width: 47.9975em){.ui-btn.ui-btn--sm{min-width:44px}}.ui-badge--wrap{white-space:normal;overflow-wrap:anywhere;line-height:16px}.ui-page-head--actions{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px}.ui-page-head--actions>:first-child{min-width:0}.ui-page-head__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2)}.ui-chips>button.ui-tag--chip{min-height:28px;padding:4px 12px;border-radius:var(--ui-radius-md, 8px);cursor:pointer;font-family:inherit;font-size:var(--gemboss-fs-caption, 12px);color:var(--ui-text)}.ui-chips>button.ui-tag--chip:hover{background:var(--ui-surface-2);border-color:var(--ui-text-muted)}.ui-chips>button.ui-tag--chip:focus-visible{outline:2px solid var(--ui-focus, #5661f5);outline-offset:1px}.ui-chips>button.ui-tag--chip[aria-pressed=true]{background:var(--ui-accent-soft);border-color:var(--ui-accent);color:var(--ui-accent-strong);font-weight:600}@media (pointer: coarse),(max-width: 47.9975em){.ui-chips>button.ui-tag--chip{min-height:44px;min-width:44px;justify-content:center}}@media (max-width: 47.9975em){.gemboss-ec-input.gemboss-ec-input textarea{font-size:16px}}.ui-seg button[aria-pressed=true]{background:var(--ui-accent-soft);color:var(--ui-accent-strong)}:is(.gemboss-field,.ui-textarea)[readonly][readonly]{background:var(--ui-surface-2);border-color:var(--ui-border);cursor:default}.ui-modal>form{display:contents}.ui-modal>form>.ui-modal__head,.ui-modal>form>.ui-modal__foot{flex:none}.ui-modal>form>.ui-modal__body{flex:1 1 auto;min-height:0;overflow:auto}button.ui-metric{font:inherit;text-align:left;color:inherit;cursor:pointer}button.ui-metric:hover{border-color:var(--ui-text-muted)}button.ui-metric:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}.ui-metric.ui-metric:is([aria-pressed=true],[aria-current=page]){border-color:var(--gemboss-accent);box-shadow:inset 0 0 0 1px var(--gemboss-accent)}.ui-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:16px 0;color:var(--ui-text-muted);font-size:var(--ui-fs-body);text-align:center}.ui-more[hidden]{display:none}.ui-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;height:var(--ui-btn-h, 28px);padding:0 12px;border:1px dashed var(--ui-border);border-radius:var(--ui-radius-md);background:var(--ui-surface);color:var(--ui-text);font:inherit;font-size:var(--ui-fs-caption);font-weight:550;line-height:16px;white-space:nowrap;text-decoration:none;cursor:pointer}.ui-chip:hover{border-style:solid;background:var(--ui-surface-2)}.ui-chip:focus-visible{outline:2px solid var(--ui-focus);outline-offset:1px}.ui-chip:is([aria-pressed=true],[aria-current=page],[aria-current=true]){border-style:solid;border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent-strong)}@media (pointer: coarse),(max-width: 47.9975em){.ui-chip{height:auto;min-height:44px;min-width:44px}}.ui-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ui-space-4)}.ui-stack--tight{gap:var(--ui-space-2)}
|
package/src/kit-plain.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(g){"use strict";if(g.gembossUI)return;var X='<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" fill="none"/></svg>',xe='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, iframe, [tabindex]:not([tabindex="-1"])',Le=function(e){return Array.prototype.slice.call(e.querySelectorAll(xe)).filter(function(t){return t.checkVisibility?t.checkVisibility({visibilityProperty:!0}):t.getClientRects().length>0})},E=function(e){return String(e).replace(/[&<>"']/g,function(t){return{"&":"&","<":"<",">":">",'"':""","'":"'"}[t]})},m=[],we=0,H=null;function z(e){var t=e.title||"",r=e.label||"",n=e.closeLabel||"Close",a=document.activeElement,i=document.createElement("div");i.className="ui-overlay"+(e.overlayClass?" "+e.overlayClass:""),i.setAttribute("role","presentation");var l="gb-modal-title-"+ ++we;i.innerHTML='<div class="ui-modal'+(e.className?" "+e.className:"")+'" role="dialog" aria-modal="true" '+(t?'aria-labelledby="'+l+'"':'aria-label="'+E(r)+'"')+' tabindex="-1">'+(t?'<div class="ui-modal__head"><div class="ui-modal__title" id="'+l+'">'+t+'</div><button type="button" class="ui-modal__close" aria-label="'+E(n)+'">'+X+"</button></div>":"")+(e.body||"")+(e.foot?'<div class="ui-modal__foot">'+e.foot+"</div>":"")+"</div>";var u=i.firstChild,s=!1,c={panel:u,overlay:i,close:function(d,b){var A=b&&b.force;return m.indexOf(c)<0?Promise.resolve():!A&&e.beforeClose?s?Promise.resolve():(s=!0,Promise.resolve().then(function(){return e.beforeClose(d)}).catch(function(x){return console.error(x),!1}).then(function(x){s=!1,x&&m.indexOf(c)>=0&&f(d)})):(f(d),Promise.resolve())}};function f(d){m.splice(m.indexOf(c),1),removeEventListener("keydown",v),i.remove();var b=m[m.length-1];b||(document.body.style.overflow=H||"",H=null),a&&a.isConnected&&a.focus&&(!b||b.panel.contains(a))?a.focus():b&&b.panel.focus(),e.onClose&&e.onClose(d)}function v(d){if(!(d===S||m[m.length-1]!==c)){if(d.key==="Escape"){if(d.isComposing||d.keyCode===229)return;d.preventDefault(),c.close(null);return}if(d.key==="Tab"){var b=Le(u);if(b.length){var A=b[0],x=b[b.length-1];u.contains(document.activeElement)?!d.shiftKey&&document.activeElement===x?(d.preventDefault(),A.focus()):d.shiftKey&&document.activeElement===A&&(d.preventDefault(),x.focus()):(d.preventDefault(),A.focus())}}}}var h=!1;i.addEventListener("mousedown",function(d){h=d.target===i}),i.addEventListener("click",function(d){d.target===i&&h&&c.close(null),h=!1});var p=u.querySelector(".ui-modal__head .ui-modal__close");p&&(p.onclick=function(){c.close(null)});var S=window.event;addEventListener("keydown",v),m.length||(H=document.body.style.overflow),m.push(c);var O=document.body;try{for(var k=document.querySelectorAll("dialog[open]"),y=k.length-1;y>=0;y--)if(k[y].matches(":modal")){O=k[y];break}}catch{}return O.append(i),document.body.style.overflow="hidden",setTimeout(function(){(u.querySelector("[autofocus]")||u).focus()},0),c}function qe(e,t){t=t||{};var r=document.querySelector(".gemboss-toast-viewport"),n=!r;r||(r=document.createElement("div"),r.className="gemboss-toast-viewport",r.setAttribute("role","status"),r.setAttribute("aria-live","polite"),document.body.append(r));var a=document.createElement("div");a.className="gemboss-toast"+(t.error?" is-error":""),t.error&&a.setAttribute("role","alert");var i=document.createElement("span");i.className="gemboss-toast-text",i.textContent=String(e),a.append(i);var l=t.duration===0;if(l){var u=document.createElement("button");u.type="button",u.className="gemboss-toast-dismiss",u.setAttribute("aria-label",t.dismissLabel||"Dismiss"),u.innerHTML=X,u.onclick=function(){a.remove()},a.append(u)}n&&(r.dataset.readyAt=String(Date.now()+50));var s=Math.max(0,Number(r.dataset.readyAt||0)-Date.now()),c=function(){r.append(a)};return s||r._gbQueue?((r._gbQueue=r._gbQueue||[]).push(c),r._gbFlush||(r._gbFlush=setTimeout(function(){var f=r._gbQueue;r._gbQueue=null,r._gbFlush=null,f.forEach(function(v){v()})},s))):c(),l||setTimeout(function(){a.remove()},s+(t.duration||(t.error?6e3:3500))),a}var G=!1,Ce="details.ui-menu, details.gb-account",Me=".ui-menu__item, .gemboss-account-menu-item";function F(e){document.querySelectorAll("details.ui-menu[open], details.gb-account[open]").forEach(function(t){t!==e&&(t.open=!1)})}function Te(){G||(G=!0,document.addEventListener("click",function(e){var t=e.target.closest&&e.target.closest(Ce);F(t),t&&e.target.closest(Me)&&(t.open=!1)}),addEventListener("blur",function(){F()}),addEventListener("keydown",function(e){var t=e.key==="Escape"&&!e.isComposing&&document.querySelector("details.ui-menu[open], details.gb-account[open]");if(t){e.preventDefault(),e.stopImmediatePropagation(),t.open=!1;var r=t.querySelector("summary");r&&r.focus()}},!0))}var J=!1,Y=typeof HTMLElement<"u"&&Object.prototype.hasOwnProperty.call(HTMLElement.prototype,"popover");function R(e){return{list:e.querySelector(":scope > .ui-menu__list"),button:e.querySelector(":scope > summary")}}function j(e,t,r){e.style.maxHeight="",e.style.left="0px",e.style.top="0px";var n=t.getBoundingClientRect(),a=document.documentElement.clientWidth,i=g.innerHeight,l=e.offsetWidth,u=e.offsetHeight,s=i-n.bottom-4-8,c=n.top-4-8,f;u<=s||s>=c?(f=n.bottom+4,u>s&&(e.style.maxHeight=Math.max(s,0)+"px"),e.setAttribute("data-side","bottom")):(u>c&&(e.style.maxHeight=Math.max(c,0)+"px"),f=n.top-4-Math.min(u,c),e.setAttribute("data-side","top"));var v=r?n.right-l:n.left;v=Math.max(8,Math.min(v,a-l-8)),e.style.left=Math.round(v)+"px",e.style.top=Math.round(f)+"px"}function B(e){var t=R(e),r=t.list,n=t.button;!r||!n||!e.open||!Y||(r.getAttribute("popover")!=="manual"&&r.setAttribute("popover","manual"),r.matches(":popover-open")||r.showPopover(),j(r,n,e.classList.contains("ui-menu--end")))}function Ne(e){var t=R(e).list;t&&t.hasAttribute("popover")&&t.matches(":popover-open")&&t.hidePopover()}function Z(e){e&&e.closest&&e.closest(".ui-menu__list")||document.querySelectorAll("details.ui-menu[open]").forEach(function(t){var r=R(t).list;!r||!r.matches(":popover-open")||(!e||e.nodeType===9||e.contains&&e.contains(t))&&(t.open=!1)})}function ee(){var e=document.documentElement;e.getAttribute("data-gb-menus")!=="float"&&e.setAttribute("data-gb-menus","float")}function te(){J||!Y||typeof document>"u"||(J=!0,addEventListener("click",function(e){var t=e.target;t&&t.closest&&t.closest("details.ui-menu > summary")&&ee()},!0),document.querySelectorAll("details.ui-menu[open]").forEach(B),document.addEventListener("toggle",function(e){var t=e.target;!t||!t.matches||!t.matches("details.ui-menu")||(t.open?(ee(),B(t)):Ne(t))},!0),document.addEventListener("scroll",function(e){Z(e.target)},!0),addEventListener("resize",function(){Z(null)}))}te();function Oe(e){e=e||{};var t=e.tone==="critical";return new Promise(function(r){var n=z({title:E(e.title||""),label:e.title?"":e.label||"Confirm",closeLabel:e.closeLabel||e.cancelLabel,body:e.body?'<div class="ui-modal__body">'+E(e.body)+"</div>":"",foot:'<button type="button" class="ui-btn" data-gb-confirm="0"'+(t?" autofocus":"")+">"+E(e.cancelLabel||"Cancel")+'</button><button type="button" class="ui-btn ui-btn--primary'+(t?" ui-btn--critical":"")+'" data-gb-confirm="1"'+(t?"":" autofocus")+">"+E(e.confirmLabel||"OK")+"</button>",onClose:function(a){r(a===!0)}});n.panel.querySelectorAll("[data-gb-confirm]").forEach(function(a){a.onclick=function(){n.close(a.getAttribute("data-gb-confirm")==="1")}})})}var re=!1;function De(){if(!re){re=!0;var e=function(){return document.querySelector(".gemboss-platform-shell")},t=function(n){var a=e();if(a){a.classList.toggle("is-mobile-nav-open",n);var i=a.querySelector(".gemboss-mobile-nav-backdrop");i&&(i.tabIndex=n?0:-1);var l=a.querySelector(".gemboss-mobile-menu-btn");if(l){var u=a.querySelector(".icon-nav[id]");u&&!l.hasAttribute("aria-controls")&&l.setAttribute("aria-controls",u.id),l.setAttribute("aria-expanded",String(n));var s=l.getAttribute(n?"data-label-close":"data-label-open");s&&l.setAttribute("aria-label",s)}}},r=function(){var n=e();return!!n&&n.classList.contains("is-mobile-nav-open")};document.addEventListener("click",function(n){var a=n.target;a.closest&&(a.closest(".gemboss-mobile-menu-btn")?t(!r()):(a.closest(".gemboss-mobile-nav-backdrop")||a.closest(".icon-nav .gnav-item, .icon-nav .gnav-subitem"))&&t(!1))}),addEventListener("keydown",function(n){n.key==="Escape"&&!n.isComposing&&n.keyCode!==229&&r()&&!m.length&&t(!1)}),addEventListener("gemboss:assistant-docked",function(){t(!1)}),t(r())}}var ne=!1,ae="M3 17 17 3";function ie(e){return document.getElementById(e.getAttribute("aria-controls")||"")||e.parentNode&&e.parentNode.querySelector("input")}function oe(e,t){var r=ie(e);if(r){r.type=t?"text":"password";var n=t?e.getAttribute("data-label-hide")||"Hide password":e.getAttribute("data-label-show")||"Show password";e.setAttribute("aria-label",n),e.setAttribute("title",n);var a=e.querySelector("svg"),i=a&&a.querySelector('path[d="'+ae+'"]');if(a&&t&&!i){var l=document.createElementNS("http://www.w3.org/2000/svg","path");l.setAttribute("d",ae),a.append(l)}i&&!t&&i.remove()}}function Pe(){ne||(ne=!0,document.addEventListener("click",function(e){var t=e.target.closest&&e.target.closest(".gb-auth-pw-toggle"),r=t&&ie(t);r&&oe(t,r.type==="password")}))}function Ke(){document.querySelectorAll(".gb-auth-pw-toggle").forEach(function(e){oe(e,!1)})}var le=!1;function He(){le||(le=!0,document.addEventListener("keydown",function(e){var t=document.querySelector(".gemboss-topbar-search-input");if(t){var r=e.target,n=r&&(r.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(r.tagName));(e.key==="k"||e.key==="K")&&(e.metaKey||e.ctrlKey)&&!e.altKey?(e.preventDefault(),t.focus(),t.select()):e.key==="/"&&!n&&!e.metaKey&&!e.ctrlKey&&!e.altKey?(e.preventDefault(),t.focus()):e.key==="Escape"&&r===t&&t.blur()}}))}var Fe=120,Re=15e3,Be=typeof HTMLScriptElement<"u"&&!!HTMLScriptElement.supports&&HTMLScriptElement.supports("speculationrules"),ue=!1,I=0,ce=0,D=null,se={},de=!1;function L(e){var t=e&&e.closest?e.closest("a[href]"):null;if(!t||!(t.matches(".gnav-item, .gnav-subitem")||t.hasAttribute("data-gb-pending"))||t.getAttribute("data-gb-nav")==="next"||t.closest('[data-gb-nav="off"]')||t.target&&t.target!=="_self"||t.hasAttribute("download"))return null;var r;try{r=new URL(t.href,location.href)}catch{return null}return r.origin!==location.origin||!/^https?:$/.test(r.protocol)||r.pathname===location.pathname&&r.search===location.search&&(r.hash||(t.getAttribute("href")||"").indexOf("#")>-1)?null:t}function w(){clearTimeout(ce),document.querySelectorAll("[data-gb-busy]").forEach(function(e){e.removeAttribute("data-gb-busy"),e.removeAttribute("aria-busy");var t=e.querySelector(":scope > .gb-pending-mark");t&&t.remove()})}function Ie(e){if(w(),e.setAttribute("data-gb-busy",""),e.setAttribute("aria-busy","true"),e.hasAttribute("data-gb-pending")){var t=document.createElement("span");t.className="gb-pending-mark",t.setAttribute("role","status"),t.innerHTML='<span class="ui-sr-only">'+E(e.getAttribute("data-gb-pending-label")||"Loading")+"</span>",e.appendChild(t)}ce=setTimeout(w,Re)}function fe(e){if(!(de||g.next||g.__next_f||g.__NEXT_DATA__||e.closest('[data-gb-prefetch="off"]'))){var t=navigator.connection;if(!(t&&t.saveData)){var r=new URL(e.href,location.href);r.hash="";var n=r.href;if(!(se[n]||r.pathname===location.pathname&&r.search===location.search)){se[n]=!0;var a;Be?(a=document.createElement("script"),a.type="speculationrules",a.textContent=JSON.stringify({prefetch:[{source:"list",urls:[n]}]})):(a=document.createElement("link"),a.rel="prefetch",a.href=n),a.setAttribute("data-gb-prefetched",""),document.head.appendChild(a)}}}}function be(){if(!(ue||typeof document>"u")){ue=!0,addEventListener("click",function(r){if(!(r.button!==0||r.metaKey||r.ctrlKey||r.shiftKey||r.altKey)){var n=L(r.target);if(n){if(r.defaultPrevented){de=!0;return}Ie(n)}}});var e=function(r){r!==D&&(clearTimeout(I),D=r,r&&(I=setTimeout(function(){D===r&&fe(r)},Fe)))},t=null;document.addEventListener("mousedown",function(r){t=L(r.target),t&&t===D&&clearTimeout(I)}),document.addEventListener("mouseover",function(r){e(L(r.target))}),document.addEventListener("focusin",function(r){var n=L(r.target);n&&n===t||e(n)}),document.addEventListener("touchstart",function(r){var n=L(r.target);n&&fe(n)},{passive:!0}),addEventListener("pageshow",w),addEventListener("keydown",function(r){r.key==="Escape"&&w()}),g.navigation&&g.navigation.addEventListener&&g.navigation.addEventListener("navigateerror",w)}}be();var Ue='a[href], button, input, select, textarea, label, summary, details, dialog, [role="dialog"], [role="menu"], [role="button"], [role="menuitem"], [role="checkbox"], [contenteditable="true"], [contenteditable=""], [data-row-ignore], .ui-table__check',ve='details[open], dialog[open], [role="dialog"], [role="menu"]';function Ve(e,t){return t&&t.closest&&t.closest(ve)?!0:Array.prototype.some.call(e.querySelectorAll(ve),function(r){return r.getClientRects().length>0})}var me=!1,q=null,U=".ui-index, .ui-resource";function We(e){for(var t=e.getAttribute("data-href"),r=e.querySelectorAll("a[href]"),n=0;n<r.length;n++)if(r[n].getAttribute("href")===t)return r[n];return null}function pe(e){if(!(e.defaultPrevented||e.button>1||!e.target.closest)){var t=e.target.closest("[data-href]");if(t){var r=e.target.closest(Ue);if(!(r&&t.contains(r))){var n=g.getSelection?g.getSelection():null;if(!(n&&!n.isCollapsed&&n.anchorNode&&t.contains(n.anchorNode))){var a=We(t),i=a?a.href:new URL(t.getAttribute("data-href"),location.href).href;if(e.metaKey||e.ctrlKey||e.shiftKey||e.button===1){g.open(i,"_blank","noopener");return}a?a.click():location.assign(i)}}}}}function ge(e){var t=[];return e.querySelectorAll("input[data-gb-select]").forEach(function(r){r.checked&&t.push(r.value)}),t}function C(e){var t=e.querySelectorAll("input[data-gb-select]"),r=0;t.forEach(function(i){var l=i.closest("tr, .ui-list__item, [data-href]");i.checked&&r++,l&&(l.classList.toggle("is-selected",i.checked),l.matches(".ui-list__item")||l.setAttribute("aria-selected",i.checked?"true":"false"))}),e.querySelectorAll("input[data-gb-select-all]").forEach(function(i){i.checked=r>0&&r===t.length,i.indeterminate=r>0&&r<t.length});var n=e.querySelector(".ui-bulkbar");n&&e.matches(".ui-resource")?n.querySelectorAll(".ui-bulkbar__actions button").forEach(function(i){i.disabled=r===0}):n&&(n.hidden=r===0);var a=e.querySelector("[data-gb-count]");a&&(a.textContent=(a.getAttribute("data-gb-count")||"{n} selected").replace("{n}",r)),e.dispatchEvent(new CustomEvent("gb:selection",{bubbles:!0,detail:{ids:ge(e),total:t.length}}))}function he(e){e.querySelectorAll("input[data-gb-select]").forEach(function(t){t.checked=!1}),C(e)}function ye(e){if(!e)return"";var t=e.getAttribute("data-sort-value");return t??e.textContent.trim()}function Qe(e){var t=e.closest("th"),r=e.closest("table");if(!(!t||!r)){var n=t.getAttribute("aria-sort")==="ascending"?"descending":"ascending";if(r.querySelectorAll("thead th[aria-sort]").forEach(function(c){c!==t&&c.setAttribute("aria-sort","none")}),t.setAttribute("aria-sort",n),r.getAttribute("data-gb-sort")!=="client"){r.dispatchEvent(new CustomEvent("gb:sort",{bubbles:!0,detail:{key:t.getAttribute("data-key"),direction:n}}));return}var a=Array.prototype.indexOf.call(t.parentElement.children,t),i=r.tBodies[0];if(i){var l=Array.prototype.slice.call(i.rows),u=n==="ascending"?1:-1,s=function(c){var f=String(c).replace(/[\s,%$€£¥]/g,"");return f!==""&&!isNaN(+f)?+f:null};l.sort(function(c,f){var v=ye(c.cells[a]),h=ye(f.cells[a]),p=s(v),S=s(h);return u*(p!=null&&S!=null?p-S:String(v).localeCompare(String(h),void 0,{numeric:!0,sensitivity:"base"}))}),l.forEach(function(c){i.appendChild(c)})}}}function $e(e){return Array.prototype.slice.call(e.querySelectorAll(":scope > .ui-board__col[data-col]"))}function M(e){return Array.prototype.slice.call(e.querySelectorAll("li[data-id]")).filter(function(t){return t.closest(".ui-board__col")===e})}function V(e){var t=e.getAttribute("data-name")||(e.querySelector(".ui-card__link, h2, h3, h4")||e).textContent||"";return t.trim().replace(/\s+/g," ").slice(0,80)||"Card"}function P(e){var t=e.querySelector(".ui-board__name");return(t&&t.textContent||e.getAttribute("data-col")||"").trim()}function _(e,t){var r=e.querySelector(":scope > [data-gb-live]");r||(r=document.createElement("div"),r.className="ui-sr-only",r.setAttribute("aria-live","assertive"),r.setAttribute("data-gb-live",""),e.appendChild(r)),r.textContent="",setTimeout(function(){r.textContent=t},30)}function Ae(e,t){var r=e.querySelector(".ui-board__count"),n=r?parseInt(r.textContent,10):NaN;r&&String(n)===r.textContent.trim()&&(r.textContent=String(n+t))}function Xe(e,t,r,n){var a=t.closest(".ui-board__col"),i=M(r).filter(function(f){return f!==t});if(n<i.length)i[n].parentNode.insertBefore(t,i[n]);else if(i.length){var l=i[i.length-1];l.parentNode.insertBefore(t,l.nextSibling)}else{var u=r.querySelector("ol.ui-board__list");if(!u){u=document.createElement("ol"),u.className="ui-board__list";var s=r.querySelector(":scope > .ui-board__empty");s?s.replaceWith(u):r.querySelector(".ui-board__head").after(u)}u.appendChild(t)}if(a!==r&&(Ae(a,-1),Ae(r,1),!M(a).length&&!a.querySelector(".ui-board__next a[data-gb-more]"))){var c=document.createElement("p");c.className="ui-board__empty",c.textContent=e.getAttribute("data-empty-label")||"Nothing here",a.querySelectorAll(":scope > ol.ui-board__list, :scope > details.ui-board__more").forEach(function(f){f.remove()}),a.querySelector(".ui-board__head").after(c)}}var o=null;function T(e){return M(e).filter(function(t){return!o||t!==o.li})}function W(e){e.querySelectorAll("[data-gb-drop]").forEach(function(t){t.removeAttribute("data-gb-drop")}),e.querySelectorAll("[data-gb-over]").forEach(function(t){t.removeAttribute("data-gb-over")})}function Q(){if(o){W(o.b),o.to.setAttribute("data-gb-over","");var e=T(o.to),t=o.index<e.length?e[o.index]:e[e.length-1];if(t){t.setAttribute("data-gb-drop",o.index<e.length?"before":"after");var r=t.closest("details:not([open])");r&&o.b.contains(r)&&(r.open=!0),o.keys&&t.scrollIntoView&&t.scrollIntoView({block:"nearest",inline:"nearest"})}}}function K(){return o?P(o.to)+", position "+(o.index+1)+" of "+(T(o.to).length+1):""}function $(){o&&(o.li.removeAttribute("data-gb-lifted"),o.b.removeAttribute("data-gb-dragging"),W(o.b),o=null)}function Ee(e,t,r){var n=t.closest(".ui-board__col");if(!(!n||!t.getAttribute("data-id"))){var a=M(n).indexOf(t);o={b:e,li:t,id:t.getAttribute("data-id"),from:n,to:n,index:a,origin:a,keys:r},t.setAttribute("data-gb-lifted",r?"key":"drag"),r&&(Q(),_(e,"Picked up "+V(t)+". "+K()+". Arrow keys move it, Space drops it, Escape cancels."))}}function _e(){if(o){var e=o,t=V(e.li),r=e.to===e.from&&e.index===e.origin,n=K();if($(),r){_(e.b,t+" dropped where it was, in "+P(e.from)+".");return}var a=new CustomEvent("gb:move",{bubbles:!0,cancelable:!0,detail:{id:e.id,from:e.from.getAttribute("data-col"),to:e.to.getAttribute("data-col"),index:e.index}}),i=e.b.dispatchEvent(a);if(i&&Xe(e.b,e.li,e.to,e.index),_(e.b,"Moved "+t+" to "+n+"."),e.keys){var l=10,u=function(){var s=Array.prototype.slice.call(e.b.querySelectorAll("li[data-id]")).filter(function(c){return c.getAttribute("data-id")===e.id})[0];s&&document.activeElement!==s?s.focus():!s&&l-- >0&&requestAnimationFrame(u)};requestAnimationFrame(u)}}}function N(e){if(o){var t=o;$(),t.keys&&_(t.b,(e||"")+V(t.li)+" stays in "+P(t.from)+".")}}function Se(e){var t=e&&e.closest?e.closest(".ui-board[data-gb-move]"):null;return t}function ze(e){var t=Se(e.target),r=t&&e.target.closest("li[data-id]");if(!(!r||!t.contains(r)||t.__gbMoveOn)){if(!o){(e.key===" "||e.key==="Spacebar")&&e.target===r&&(e.preventDefault(),Ee(t,r,!0));return}if(!(o.li!==r||!o.keys)){var n=$e(t);if(e.key==="ArrowUp"||e.key==="ArrowDown")e.preventDefault(),o.index=Math.max(0,Math.min(T(o.to).length,o.index+(e.key==="ArrowUp"?-1:1)));else if(e.key==="ArrowLeft"||e.key==="ArrowRight"){e.preventDefault();var a=n.indexOf(o.to)+(e.key==="ArrowLeft"?-1:1);if(a<0||a>=n.length){_(t,K()+". No column further "+(e.key==="ArrowLeft"?"left":"right")+".");return}o.to=n[a],o.index=Math.min(o.index,T(o.to).length)}else if(e.key===" "||e.key==="Spacebar"||e.key==="Enter"){e.preventDefault(),_e();return}else if(e.key==="Escape"){e.preventDefault(),e.stopPropagation(),N("Move cancelled. ");return}else if(e.key==="Tab"){N("Move cancelled. ");return}else return;Q(),_(t,K())}}}function Ge(e){var t=e.closest(".ui-board__col"),r=e.closest(".ui-board"),n=e.closest(".ui-board__next")||e.parentNode;if(!(!t||!r||n.getAttribute("aria-busy")==="true")){var a=t.getAttribute("data-col"),i=e.href;n.setAttribute("aria-busy","true"),n.innerHTML='<span class="ui-spinner" aria-hidden="true"></span><span role="status">Loading\u2026</span>',fetch(i,{headers:{Accept:"text/html"},credentials:"same-origin"}).then(function(l){if(!l.ok)throw new Error(String(l.status));return l.text()}).then(function(l){var u=new DOMParser().parseFromString(l,"text/html"),s=r.id?u.getElementById(r.id):u,c=Array.prototype.slice.call((s||u).querySelectorAll(".ui-board__col[data-col]")).filter(function(b){return b.getAttribute("data-col")===a})[0];if(!c)throw new Error("no column "+a);var f={};r.querySelectorAll("li[data-id]").forEach(function(b){f[b.getAttribute("data-id")]=1});var v=t.querySelector(":scope > ol.ui-board__list");if(!v){v=document.createElement("ol"),v.className="ui-board__list";var h=t.querySelector(":scope > .ui-board__empty");h?h.replaceWith(v):n.before(v)}var p=M(c).filter(function(b){return!f[b.getAttribute("data-id")]}).map(function(b){var A=document.importNode(b,!0);return v.appendChild(A),A}),S=c.querySelector(".ui-board__count"),O=t.querySelector(".ui-board__count");S&&O&&(O.textContent=S.textContent);var k=c.querySelector(".ui-board__next");k&&k.querySelector("a[data-gb-more]")?(n.innerHTML=k.innerHTML,n.removeAttribute("aria-busy")):n.remove();try{history.replaceState(history.state,"",i)}catch{}_(r,p.length+" more "+(p.length===1?"card":"cards")+" in "+P(t)+".");var y=p[0];if(y){var d=y.matches("[tabindex]")?y:y.querySelector("a[href], button, [tabindex]");d&&d.focus({preventScroll:!1})}}).catch(function(){n.removeAttribute("aria-busy"),n.innerHTML=`<span role="alert" class="ui-more__error">Couldn't load.</span>`;var l=document.createElement("a");l.className="ui-btn ui-btn--sm",l.href=i,l.setAttribute("data-gb-more",""),l.textContent="Try again",n.appendChild(l),l.focus()})}}function ke(){if(!(me||typeof document>"u")){me=!0,document.addEventListener("keydown",ze),document.addEventListener("focusout",function(t){o&&o.keys&&t.target===o.li&&!o.li.contains(t.relatedTarget)&&N("Move cancelled. ")}),document.addEventListener("dragstart",function(t){var r=Se(t.target),n=r&&t.target.closest("li[data-id]");!n||!r.contains(n)||r.__gbMoveOn||!t.dataTransfer||(o&&$(),Ee(r,n,!1),t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",n.getAttribute("data-id")||""),requestAnimationFrame(function(){o&&r.setAttribute("data-gb-dragging","")}))});var e=function(t){var r=t.target.closest?t.target.closest(".ui-board__col[data-col]"):null;if(!r||!o||!o.b.contains(r))return null;for(var n=T(r),a=n.length,i=0;i<n.length;i++){var l=n[i].getBoundingClientRect();if(l.height){if(t.clientY<l.top+l.height/2){a=i;break}a=i+1}}return{col:r,index:a}};document.addEventListener("dragover",function(t){if(!(!o||o.keys)){var r=e(t);r&&(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),(r.col!==o.to||r.index!==o.index||!o.b.querySelector("[data-gb-over]"))&&(o.to=r.col,o.index=r.index,Q()))}}),document.addEventListener("dragleave",function(t){o&&!o.keys&&!o.b.contains(t.relatedTarget)&&W(o.b)}),document.addEventListener("drop",function(t){if(!(!o||o.keys)){t.preventDefault();var r=e(t);if(!r){N();return}o.to=r.col,o.index=r.index,_e()}}),document.addEventListener("dragend",function(){o&&!o.keys&&N()}),document.addEventListener("click",function(t){var r=t.target;if(!(!r||!r.closest)){var n=r.closest(".ui-board a[data-gb-more][href]");if(n){!t.defaultPrevented&&t.button===0&&!t.metaKey&&!t.ctrlKey&&!t.shiftKey&&!t.altKey&&typeof fetch=="function"&&(t.preventDefault(),Ge(n));return}var a=r.closest("table[data-gb-sort] button.ui-table__sort");if(a){Qe(a);return}var i=r.closest("td.ui-table__check, th.ui-table__check");if(i&&r===i){var l=i.querySelector("input[data-gb-select], input[data-gb-select-all]");if(l){l.click();return}}var u=r.closest("input[data-gb-select]");if(u){var s=u.closest(U);if(s&&t.shiftKey&&q&&q!==u&&s.contains(q)){for(var c=Array.prototype.slice.call(s.querySelectorAll("input[data-gb-select]")),f=c.indexOf(q),v=c.indexOf(u),h=u.checked,p=Math.min(f,v);p<=Math.max(f,v);p++)c[p].checked=h;C(s)}q=u;return}pe(t)}}),document.addEventListener("auxclick",function(t){t.button===1&&pe(t)}),document.addEventListener("change",function(t){var r=t.target;if(!(!r||!r.matches)){var n=r.closest(U);n&&(r.matches("input[data-gb-select-all]")?(n.querySelectorAll("input[data-gb-select]").forEach(function(a){a.checked=r.checked}),C(n)):r.matches("input[data-gb-select]")&&C(n))}}),document.addEventListener("keydown",function(t){if(!(t.key!=="Escape"||t.defaultPrevented||m.length)){var r=document.activeElement&&document.activeElement.closest?document.activeElement.closest(U):null;r&&Ve(r,document.activeElement)||r&&r.querySelector("input[data-gb-select]:checked")&&he(r)}})}}ke(),g.gembossUI={openModal:z,toast:qe,confirm:Oe,initMenus:Te,closeMenus:F,initSearch:He,initShell:De,initPasswordFields:Pe,resetPasswordFields:Ke,initNav:be,openModals:function(){return m.length},initCollections:ke,selection:ge,clearSelection:he,syncSelection:C,initMenuLayer:te,floatMenu:B,placeFloating:j}})(globalThis);
|
|
1
|
+
(function(g){"use strict";if(g.gembossUI)return;var X='<svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" fill="none"/></svg>',we='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), summary, iframe, [tabindex]:not([tabindex="-1"])',qe=function(e){return Array.prototype.slice.call(e.querySelectorAll(we)).filter(function(t){return!t.matches('[tabindex="-1"]')&&(t.checkVisibility?t.checkVisibility({visibilityProperty:!0}):t.getClientRects().length>0)})},E=function(e){return String(e).replace(/[&<>"']/g,function(t){return{"&":"&","<":"<",">":">",'"':""","'":"'"}[t]})},m=[],Ce=0,H=null;function z(e){var t=e.title||"",r=e.label||"",n=e.closeLabel||"Close",a=document.activeElement,i=document.createElement("div");i.className="ui-overlay"+(e.overlayClass?" "+e.overlayClass:""),i.setAttribute("role","presentation");var l="gb-modal-title-"+ ++Ce;i.innerHTML='<div class="ui-modal'+(e.className?" "+e.className:"")+'" role="dialog" aria-modal="true" '+(t?'aria-labelledby="'+l+'"':'aria-label="'+E(r)+'"')+' tabindex="-1">'+(t?'<div class="ui-modal__head"><div class="ui-modal__title" id="'+l+'">'+t+'</div><button type="button" class="ui-modal__close" aria-label="'+E(n)+'">'+X+"</button></div>":"")+(e.body||"")+(e.foot?'<div class="ui-modal__foot">'+e.foot+"</div>":"")+"</div>";var u=i.firstChild,s=!1,c={panel:u,overlay:i,close:function(d,b){var A=b&&b.force;return m.indexOf(c)<0?Promise.resolve():!A&&e.beforeClose?s?Promise.resolve():(s=!0,Promise.resolve().then(function(){return e.beforeClose(d)}).catch(function(L){return console.error(L),!1}).then(function(L){s=!1,L&&m.indexOf(c)>=0&&f(d)})):(f(d),Promise.resolve())}};function f(d){m.splice(m.indexOf(c),1),removeEventListener("keydown",v),i.remove();var b=m[m.length-1];b||(document.body.style.overflow=H||"",H=null),a&&a.isConnected&&a.focus&&(!b||b.panel.contains(a))?a.focus():b&&b.panel.focus(),e.onClose&&e.onClose(d)}function v(d){if(!(d===S||m[m.length-1]!==c)){if(d.key==="Escape"){if(d.isComposing||d.keyCode===229)return;d.preventDefault(),c.close(null);return}if(d.key==="Tab"){var b=qe(u);if(b.length){var A=b[0],L=b[b.length-1];u.contains(document.activeElement)?!d.shiftKey&&document.activeElement===L?(d.preventDefault(),A.focus()):d.shiftKey&&document.activeElement===A&&(d.preventDefault(),L.focus()):(d.preventDefault(),A.focus())}}}}var h=!1;i.addEventListener("mousedown",function(d){h=d.target===i}),i.addEventListener("click",function(d){d.target===i&&h&&c.close(null),h=!1});var p=u.querySelector(".ui-modal__head .ui-modal__close");p&&(p.onclick=function(){c.close(null)});var S=window.event;addEventListener("keydown",v),m.length||(H=document.body.style.overflow),m.push(c);var O=document.body;try{for(var k=document.querySelectorAll("dialog[open]"),y=k.length-1;y>=0;y--)if(k[y].matches(":modal")){O=k[y];break}}catch{}return O.append(i),document.body.style.overflow="hidden",setTimeout(function(){(u.querySelector("[autofocus]")||u).focus()},0),c}function Me(e,t){t=t||{};var r=document.querySelector(".gemboss-toast-viewport"),n=!r;r||(r=document.createElement("div"),r.className="gemboss-toast-viewport",r.setAttribute("role","status"),r.setAttribute("aria-live","polite"),document.body.append(r));var a=document.createElement("div");a.className="gemboss-toast"+(t.error?" is-error":""),t.error&&a.setAttribute("role","alert");var i=document.createElement("span");i.className="gemboss-toast-text",i.textContent=String(e),a.append(i);var l=t.duration===0;if(l){var u=document.createElement("button");u.type="button",u.className="gemboss-toast-dismiss",u.setAttribute("aria-label",t.dismissLabel||"Dismiss"),u.innerHTML=X,u.onclick=function(){a.remove()},a.append(u)}n&&(r.dataset.readyAt=String(Date.now()+50));var s=Math.max(0,Number(r.dataset.readyAt||0)-Date.now()),c=function(){r.append(a)};return s||r._gbQueue?((r._gbQueue=r._gbQueue||[]).push(c),r._gbFlush||(r._gbFlush=setTimeout(function(){var f=r._gbQueue;r._gbQueue=null,r._gbFlush=null,f.forEach(function(v){v()})},s))):c(),l||setTimeout(function(){a.remove()},s+(t.duration||(t.error?6e3:3500))),a}var G=!1,J="details.ui-menu, details.gb-account",Y=".ui-menu__item, .gemboss-account-menu-item";function F(e){document.querySelectorAll("details.ui-menu[open], details.gb-account[open]").forEach(function(t){t!==e&&!(e&&t.contains(e))&&(t.open=!1)})}function Te(){G||(G=!0,document.addEventListener("click",function(e){var t=e.target.closest&&e.target.closest(Y),r=t&&t.closest(J);r&&r.open&&r.contains(document.activeElement)&&r.querySelector("summary").focus()},!0),document.addEventListener("click",function(e){var t=e.target.closest&&e.target.closest(J);F(t),t&&e.target.closest(Y)&&(t.open=!1)}),addEventListener("blur",function(){F()}),addEventListener("keydown",function(e){var t=e.key==="Escape"&&!e.isComposing&&document.querySelector("details.ui-menu[open], details.gb-account[open]");if(t){e.preventDefault(),e.stopImmediatePropagation(),t.open=!1;var r=t.querySelector("summary");r&&r.focus()}},!0))}var j=!1,Z=typeof HTMLElement<"u"&&Object.prototype.hasOwnProperty.call(HTMLElement.prototype,"popover");function R(e){return{list:e.querySelector(":scope > .ui-menu__list"),button:e.querySelector(":scope > summary")}}function ee(e,t,r){e.style.maxHeight="",e.style.left="0px",e.style.top="0px";var n=t.getBoundingClientRect(),a=document.documentElement.clientWidth,i=g.innerHeight,l=e.offsetWidth,u=e.offsetHeight,s=i-n.bottom-4-8,c=n.top-4-8,f;u<=s||s>=c?(f=n.bottom+4,u>s&&(e.style.maxHeight=Math.max(s,0)+"px"),e.setAttribute("data-side","bottom")):(u>c&&(e.style.maxHeight=Math.max(c,0)+"px"),f=n.top-4-Math.min(u,c),e.setAttribute("data-side","top"));var v=r?n.right-l:n.left;v=Math.max(8,Math.min(v,a-l-8)),e.style.left=Math.round(v)+"px",e.style.top=Math.round(f)+"px"}function B(e){var t=R(e),r=t.list,n=t.button;!r||!n||!e.open||!Z||(r.getAttribute("popover")!=="manual"&&r.setAttribute("popover","manual"),r.matches(":popover-open")||r.showPopover(),ee(r,n,e.classList.contains("ui-menu--end")))}function Ne(e){var t=R(e).list;t&&t.hasAttribute("popover")&&t.matches(":popover-open")&&t.hidePopover()}function te(e){e&&e.closest&&e.closest(".ui-menu__list")||document.querySelectorAll("details.ui-menu[open]").forEach(function(t){var r=R(t).list;!r||!r.matches(":popover-open")||(!e||e.nodeType===9||e.contains&&e.contains(t))&&(t.open=!1)})}function re(){var e=document.documentElement;e.getAttribute("data-gb-menus")!=="float"&&e.setAttribute("data-gb-menus","float")}function ne(){j||!Z||typeof document>"u"||(j=!0,addEventListener("click",function(e){var t=e.target;t&&t.closest&&t.closest("details.ui-menu > summary")&&re()},!0),document.querySelectorAll("details.ui-menu[open]").forEach(B),document.addEventListener("toggle",function(e){var t=e.target;!t||!t.matches||!t.matches("details.ui-menu")||(t.open?(re(),B(t)):Ne(t))},!0),document.addEventListener("scroll",function(e){te(e.target)},!0),addEventListener("resize",function(){te(null)}))}ne();function Oe(e){e=e||{};var t=e.tone==="critical";return new Promise(function(r){var n=z({title:E(e.title||""),label:e.title?"":e.label||"Confirm",closeLabel:e.closeLabel||e.cancelLabel,body:e.body?'<div class="ui-modal__body">'+E(e.body)+"</div>":"",foot:'<button type="button" class="ui-btn" data-gb-confirm="0"'+(t?" autofocus":"")+">"+E(e.cancelLabel||"Cancel")+'</button><button type="button" class="ui-btn ui-btn--primary'+(t?" ui-btn--critical":"")+'" data-gb-confirm="1"'+(t?"":" autofocus")+">"+E(e.confirmLabel||"OK")+"</button>",onClose:function(a){r(a===!0)}});n.panel.querySelectorAll("[data-gb-confirm]").forEach(function(a){a.onclick=function(){n.close(a.getAttribute("data-gb-confirm")==="1")}})})}var ae=!1;function De(){if(!ae){ae=!0;var e=function(){return document.querySelector(".gemboss-platform-shell")},t=function(n){var a=e();if(a){a.classList.toggle("is-mobile-nav-open",n);var i=a.querySelector(".gemboss-mobile-nav-backdrop");i&&(i.tabIndex=n?0:-1);var l=a.querySelector(".gemboss-mobile-menu-btn");if(l){var u=a.querySelector(".icon-nav[id]");u&&!l.hasAttribute("aria-controls")&&l.setAttribute("aria-controls",u.id),l.setAttribute("aria-expanded",String(n));var s=l.getAttribute(n?"data-label-close":"data-label-open");s&&l.setAttribute("aria-label",s)}}},r=function(){var n=e();return!!n&&n.classList.contains("is-mobile-nav-open")};document.addEventListener("click",function(n){var a=n.target;a.closest&&(a.closest(".gemboss-mobile-menu-btn")?t(!r()):(a.closest(".gemboss-mobile-nav-backdrop")||a.closest(".icon-nav .gnav-item, .icon-nav .gnav-subitem"))&&t(!1))}),addEventListener("keydown",function(n){n.key==="Escape"&&!n.isComposing&&n.keyCode!==229&&r()&&!m.length&&t(!1)}),addEventListener("gemboss:assistant-docked",function(){t(!1)}),t(r())}}var ie=!1,oe="M3 17 17 3";function le(e){return document.getElementById(e.getAttribute("aria-controls")||"")||e.parentNode&&e.parentNode.querySelector("input")}function ue(e,t){var r=le(e);if(r){r.type=t?"text":"password";var n=t?e.getAttribute("data-label-hide")||"Hide password":e.getAttribute("data-label-show")||"Show password";e.setAttribute("aria-label",n),e.setAttribute("title",n);var a=e.querySelector("svg"),i=a&&a.querySelector('path[d="'+oe+'"]');if(a&&t&&!i){var l=document.createElementNS("http://www.w3.org/2000/svg","path");l.setAttribute("d",oe),a.append(l)}i&&!t&&i.remove()}}function Pe(){ie||(ie=!0,document.addEventListener("click",function(e){var t=e.target.closest&&e.target.closest(".gb-auth-pw-toggle"),r=t&&le(t);r&&ue(t,r.type==="password")}))}function Ke(){document.querySelectorAll(".gb-auth-pw-toggle").forEach(function(e){ue(e,!1)})}var ce=!1;function He(){ce||(ce=!0,document.addEventListener("keydown",function(e){var t=document.querySelector(".gemboss-topbar-search-input");if(t){var r=e.target,n=r&&(r.isContentEditable||/^(INPUT|TEXTAREA|SELECT)$/.test(r.tagName));(e.key==="k"||e.key==="K")&&(e.metaKey||e.ctrlKey)&&!e.altKey?(e.preventDefault(),t.focus(),t.select()):e.key==="/"&&!n&&!e.metaKey&&!e.ctrlKey&&!e.altKey?(e.preventDefault(),t.focus()):e.key==="Escape"&&r===t&&t.blur()}}))}var Fe=120,Re=15e3,Be=typeof HTMLScriptElement<"u"&&!!HTMLScriptElement.supports&&HTMLScriptElement.supports("speculationrules"),se=!1,I=0,de=0,D=null,fe={},be=!1;function x(e){var t=e&&e.closest?e.closest("a[href]"):null;if(!t||!(t.matches(".gnav-item, .gnav-subitem")||t.hasAttribute("data-gb-pending"))||t.getAttribute("data-gb-nav")==="next"||t.closest('[data-gb-nav="off"]')||t.target&&t.target!=="_self"||t.hasAttribute("download"))return null;var r;try{r=new URL(t.href,location.href)}catch{return null}return r.origin!==location.origin||!/^https?:$/.test(r.protocol)||r.pathname===location.pathname&&r.search===location.search&&(r.hash||(t.getAttribute("href")||"").indexOf("#")>-1)?null:t}function w(){clearTimeout(de),document.querySelectorAll("[data-gb-busy]").forEach(function(e){e.removeAttribute("data-gb-busy"),e.removeAttribute("aria-busy");var t=e.querySelector(":scope > .gb-pending-mark");t&&t.remove()})}function Ie(e){if(w(),e.setAttribute("data-gb-busy",""),e.setAttribute("aria-busy","true"),e.hasAttribute("data-gb-pending")){var t=document.createElement("span");t.className="gb-pending-mark",t.setAttribute("role","status"),t.innerHTML='<span class="ui-sr-only">'+E(e.getAttribute("data-gb-pending-label")||"Loading")+"</span>",e.appendChild(t)}de=setTimeout(w,Re)}function ve(e){if(!(be||g.next||g.__next_f||g.__NEXT_DATA__||e.closest('[data-gb-prefetch="off"]'))){var t=navigator.connection;if(!(t&&t.saveData)){var r=new URL(e.href,location.href);r.hash="";var n=r.href;if(!(fe[n]||r.pathname===location.pathname&&r.search===location.search)){fe[n]=!0;var a;Be?(a=document.createElement("script"),a.type="speculationrules",a.textContent=JSON.stringify({prefetch:[{source:"list",urls:[n]}]})):(a=document.createElement("link"),a.rel="prefetch",a.href=n),a.setAttribute("data-gb-prefetched",""),document.head.appendChild(a)}}}}function me(){if(!(se||typeof document>"u")){se=!0,addEventListener("click",function(r){if(!(r.button!==0||r.metaKey||r.ctrlKey||r.shiftKey||r.altKey)){var n=x(r.target);if(n){if(r.defaultPrevented){be=!0;return}Ie(n)}}});var e=function(r){r!==D&&(clearTimeout(I),D=r,r&&(I=setTimeout(function(){D===r&&ve(r)},Fe)))},t=null;document.addEventListener("mousedown",function(r){t=x(r.target),t&&t===D&&clearTimeout(I)}),document.addEventListener("mouseover",function(r){e(x(r.target))}),document.addEventListener("focusin",function(r){var n=x(r.target);n&&n===t||e(n)}),document.addEventListener("touchstart",function(r){var n=x(r.target);n&&ve(n)},{passive:!0}),addEventListener("pageshow",w),addEventListener("keydown",function(r){r.key==="Escape"&&w()}),g.navigation&&g.navigation.addEventListener&&g.navigation.addEventListener("navigateerror",w)}}me();var Ue='a[href], button, input, select, textarea, label, summary, details, dialog, [role="dialog"], [role="menu"], [role="button"], [role="menuitem"], [role="checkbox"], [contenteditable="true"], [contenteditable=""], [data-row-ignore], .ui-table__check',pe='details[open], dialog[open], [role="dialog"], [role="menu"]';function Ve(e,t){return t&&t.closest&&t.closest(pe)?!0:Array.prototype.some.call(e.querySelectorAll(pe),function(r){return r.checkVisibility?r.checkVisibility():r.getClientRects().length>0})}var ge=!1,q=null,U=".ui-index, .ui-resource";function We(e){for(var t=e.getAttribute("data-href"),r=e.querySelectorAll("a[href]"),n=0;n<r.length;n++)if(r[n].getAttribute("href")===t)return r[n];return null}function he(e){if(!(e.defaultPrevented||e.button>1||!e.target.closest)){var t=e.target.closest("[data-href]");if(t){var r=e.target.closest(Ue);if(!(r&&t.contains(r))){var n=g.getSelection?g.getSelection():null;if(!(n&&!n.isCollapsed&&n.anchorNode&&t.contains(n.anchorNode))){var a=We(t),i=a?a.href:new URL(t.getAttribute("data-href"),location.href).href;if(e.metaKey||e.ctrlKey||e.shiftKey||e.button===1){g.open(i,"_blank","noopener");return}a?a.click():location.assign(i)}}}}}function ye(e){var t=[];return e.querySelectorAll("input[data-gb-select]").forEach(function(r){r.checked&&t.push(r.value)}),t}function C(e){var t=e.querySelectorAll("input[data-gb-select]"),r=0;t.forEach(function(i){var l=i.closest("tr, .ui-list__item, [data-href]");i.checked&&r++,l&&(l.classList.toggle("is-selected",i.checked),l.matches(".ui-list__item")||l.setAttribute("aria-selected",i.checked?"true":"false"))}),e.querySelectorAll("input[data-gb-select-all]").forEach(function(i){i.checked=r>0&&r===t.length,i.indeterminate=r>0&&r<t.length});var n=e.querySelector(".ui-bulkbar");n&&e.matches(".ui-resource")?n.querySelectorAll(".ui-bulkbar__actions button").forEach(function(i){i.disabled=r===0}):n&&(n.hidden=r===0);var a=e.querySelector("[data-gb-count]");a&&(a.textContent=(a.getAttribute("data-gb-count")||"{n} selected").replace("{n}",r)),e.dispatchEvent(new CustomEvent("gb:selection",{bubbles:!0,detail:{ids:ye(e),total:t.length}}))}function Ae(e){e.querySelectorAll("input[data-gb-select]").forEach(function(t){t.checked=!1}),C(e)}function Ee(e){if(!e)return"";var t=e.getAttribute("data-sort-value");return t??e.textContent.trim()}function Qe(e){var t=e.closest("th"),r=e.closest("table");if(!(!t||!r)){var n=t.getAttribute("aria-sort")==="ascending"?"descending":"ascending";if(r.querySelectorAll("thead th[aria-sort]").forEach(function(c){c!==t&&c.setAttribute("aria-sort","none")}),t.setAttribute("aria-sort",n),r.getAttribute("data-gb-sort")!=="client"){r.dispatchEvent(new CustomEvent("gb:sort",{bubbles:!0,detail:{key:t.getAttribute("data-key"),direction:n}}));return}var a=Array.prototype.indexOf.call(t.parentElement.children,t),i=r.tBodies[0];if(i){var l=Array.prototype.slice.call(i.rows),u=n==="ascending"?1:-1,s=function(c){var f=String(c).replace(/[\s,%$€£¥]/g,"");return f!==""&&!isNaN(+f)?+f:null};l.sort(function(c,f){var v=Ee(c.cells[a]),h=Ee(f.cells[a]),p=s(v),S=s(h);return u*(p!=null&&S!=null?p-S:String(v).localeCompare(String(h),void 0,{numeric:!0,sensitivity:"base"}))}),l.forEach(function(c){i.appendChild(c)})}}}function $e(e){return Array.prototype.slice.call(e.querySelectorAll(":scope > .ui-board__col[data-col]"))}function M(e){return Array.prototype.slice.call(e.querySelectorAll("li[data-id]")).filter(function(t){return t.closest(".ui-board__col")===e})}function V(e){var t=e.getAttribute("data-name")||(e.querySelector(".ui-card__link, h2, h3, h4")||e).textContent||"";return t.trim().replace(/\s+/g," ").slice(0,80)||"Card"}function P(e){var t=e.querySelector(".ui-board__name");return(t&&t.textContent||e.getAttribute("data-col")||"").trim()}function _(e,t){var r=e.querySelector(":scope > [data-gb-live]");r||(r=document.createElement("div"),r.className="ui-sr-only",r.setAttribute("aria-live","assertive"),r.setAttribute("data-gb-live",""),e.appendChild(r)),r.textContent="",setTimeout(function(){r.textContent=t},30)}function _e(e,t){var r=e.querySelector(".ui-board__count"),n=r?parseInt(r.textContent,10):NaN;r&&String(n)===r.textContent.trim()&&(r.textContent=String(n+t))}function Xe(e,t,r,n){var a=t.closest(".ui-board__col"),i=M(r).filter(function(f){return f!==t});if(n<i.length)i[n].parentNode.insertBefore(t,i[n]);else if(i.length){var l=i[i.length-1];l.parentNode.insertBefore(t,l.nextSibling)}else{var u=r.querySelector("ol.ui-board__list");if(!u){u=document.createElement("ol"),u.className="ui-board__list";var s=r.querySelector(":scope > .ui-board__empty");s?s.replaceWith(u):r.querySelector(".ui-board__head").after(u)}u.appendChild(t)}if(a!==r&&(_e(a,-1),_e(r,1),!M(a).length&&!a.querySelector(".ui-board__next a[data-gb-more]"))){var c=document.createElement("p");c.className="ui-board__empty",c.textContent=e.getAttribute("data-empty-label")||"Nothing here",a.querySelectorAll(":scope > ol.ui-board__list, :scope > details.ui-board__more").forEach(function(f){f.remove()}),a.querySelector(".ui-board__head").after(c)}}var o=null;function T(e){return M(e).filter(function(t){return!o||t!==o.li})}function W(e){e.querySelectorAll("[data-gb-drop]").forEach(function(t){t.removeAttribute("data-gb-drop")}),e.querySelectorAll("[data-gb-over]").forEach(function(t){t.removeAttribute("data-gb-over")})}function Q(){if(o){W(o.b),o.to.setAttribute("data-gb-over","");var e=T(o.to),t=o.index<e.length?e[o.index]:e[e.length-1];if(t){t.setAttribute("data-gb-drop",o.index<e.length?"before":"after");var r=t.closest("details:not([open])");r&&o.b.contains(r)&&(r.open=!0),o.keys&&t.scrollIntoView&&t.scrollIntoView({block:"nearest",inline:"nearest"})}}}function K(){return o?P(o.to)+", position "+(o.index+1)+" of "+(T(o.to).length+1):""}function $(){o&&(o.li.removeAttribute("data-gb-lifted"),o.b.removeAttribute("data-gb-dragging"),W(o.b),o=null)}function Se(e,t,r){var n=t.closest(".ui-board__col");if(!(!n||!t.getAttribute("data-id"))){var a=M(n).indexOf(t);o={b:e,li:t,id:t.getAttribute("data-id"),from:n,to:n,index:a,origin:a,keys:r},t.setAttribute("data-gb-lifted",r?"key":"drag"),r&&(Q(),_(e,"Picked up "+V(t)+". "+K()+". Arrow keys move it, Space drops it, Escape cancels."))}}function ke(){if(o){var e=o,t=V(e.li),r=e.to===e.from&&e.index===e.origin,n=K();if($(),r){_(e.b,t+" dropped where it was, in "+P(e.from)+".");return}var a=new CustomEvent("gb:move",{bubbles:!0,cancelable:!0,detail:{id:e.id,from:e.from.getAttribute("data-col"),to:e.to.getAttribute("data-col"),index:e.index}}),i=e.b.dispatchEvent(a);if(i&&Xe(e.b,e.li,e.to,e.index),_(e.b,"Moved "+t+" to "+n+"."),e.keys){var l=10,u=function(){var s=Array.prototype.slice.call(e.b.querySelectorAll("li[data-id]")).filter(function(c){return c.getAttribute("data-id")===e.id})[0];s&&document.activeElement!==s?s.focus():!s&&l-- >0&&requestAnimationFrame(u)};requestAnimationFrame(u)}}}function N(e){if(o){var t=o;$(),t.keys&&_(t.b,(e||"")+V(t.li)+" stays in "+P(t.from)+".")}}function Le(e){var t=e&&e.closest?e.closest(".ui-board[data-gb-move]"):null;return t}function ze(e){var t=Le(e.target),r=t&&e.target.closest("li[data-id]");if(!(!r||!t.contains(r)||t.__gbMoveOn)){if(!o){(e.key===" "||e.key==="Spacebar")&&e.target===r&&(e.preventDefault(),Se(t,r,!0));return}if(!(o.li!==r||!o.keys)){var n=$e(t);if(e.key==="ArrowUp"||e.key==="ArrowDown")e.preventDefault(),o.index=Math.max(0,Math.min(T(o.to).length,o.index+(e.key==="ArrowUp"?-1:1)));else if(e.key==="ArrowLeft"||e.key==="ArrowRight"){e.preventDefault();var a=n.indexOf(o.to)+(e.key==="ArrowLeft"?-1:1);if(a<0||a>=n.length){_(t,K()+". No column further "+(e.key==="ArrowLeft"?"left":"right")+".");return}o.to=n[a],o.index=Math.min(o.index,T(o.to).length)}else if(e.key===" "||e.key==="Spacebar"||e.key==="Enter"){e.preventDefault(),ke();return}else if(e.key==="Escape"){e.preventDefault(),e.stopPropagation(),N("Move cancelled. ");return}else if(e.key==="Tab"){N("Move cancelled. ");return}else return;Q(),_(t,K())}}}function Ge(e){var t=e.closest(".ui-board__col"),r=e.closest(".ui-board"),n=e.closest(".ui-board__next")||e.parentNode;if(!(!t||!r||n.getAttribute("aria-busy")==="true")){var a=t.getAttribute("data-col"),i=e.href;n.setAttribute("aria-busy","true"),n.innerHTML='<span class="ui-spinner" aria-hidden="true"></span><span role="status">Loading\u2026</span>',fetch(i,{headers:{Accept:"text/html"},credentials:"same-origin"}).then(function(l){if(!l.ok)throw new Error(String(l.status));return l.text()}).then(function(l){var u=new DOMParser().parseFromString(l,"text/html"),s=r.id?u.getElementById(r.id):u,c=Array.prototype.slice.call((s||u).querySelectorAll(".ui-board__col[data-col]")).filter(function(b){return b.getAttribute("data-col")===a})[0];if(!c)throw new Error("no column "+a);var f={};r.querySelectorAll("li[data-id]").forEach(function(b){f[b.getAttribute("data-id")]=1});var v=t.querySelector(":scope > ol.ui-board__list");if(!v){v=document.createElement("ol"),v.className="ui-board__list";var h=t.querySelector(":scope > .ui-board__empty");h?h.replaceWith(v):n.before(v)}var p=M(c).filter(function(b){return!f[b.getAttribute("data-id")]}).map(function(b){var A=document.importNode(b,!0);return v.appendChild(A),A}),S=c.querySelector(".ui-board__count"),O=t.querySelector(".ui-board__count");S&&O&&(O.textContent=S.textContent);var k=c.querySelector(".ui-board__next");k&&k.querySelector("a[data-gb-more]")?(n.innerHTML=k.innerHTML,n.removeAttribute("aria-busy")):n.remove();try{history.replaceState(history.state,"",i)}catch{}_(r,p.length+" more "+(p.length===1?"card":"cards")+" in "+P(t)+".");var y=p[0];if(y){var d=y.matches("[tabindex]")?y:y.querySelector("a[href], button, [tabindex]");d&&d.focus({preventScroll:!1})}}).catch(function(){n.removeAttribute("aria-busy"),n.innerHTML=`<span role="alert" class="ui-more__error">Couldn't load.</span>`;var l=document.createElement("a");l.className="ui-btn ui-btn--sm",l.href=i,l.setAttribute("data-gb-more",""),l.textContent="Try again",n.appendChild(l),l.focus()})}}function xe(){if(!(ge||typeof document>"u")){ge=!0,document.addEventListener("keydown",ze),document.addEventListener("focusout",function(t){o&&o.keys&&t.target===o.li&&!o.li.contains(t.relatedTarget)&&N("Move cancelled. ")}),document.addEventListener("dragstart",function(t){var r=Le(t.target),n=r&&t.target.closest("li[data-id]");!n||!r.contains(n)||r.__gbMoveOn||!t.dataTransfer||(o&&$(),Se(r,n,!1),t.dataTransfer.effectAllowed="move",t.dataTransfer.setData("text/plain",n.getAttribute("data-id")||""),requestAnimationFrame(function(){o&&r.setAttribute("data-gb-dragging","")}))});var e=function(t){var r=t.target.closest?t.target.closest(".ui-board__col[data-col]"):null;if(!r||!o||!o.b.contains(r))return null;for(var n=T(r),a=n.length,i=0;i<n.length;i++){var l=n[i].getBoundingClientRect();if(l.height){if(t.clientY<l.top+l.height/2){a=i;break}a=i+1}}return{col:r,index:a}};document.addEventListener("dragover",function(t){if(!(!o||o.keys)){var r=e(t);r&&(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect="move"),(r.col!==o.to||r.index!==o.index||!o.b.querySelector("[data-gb-over]"))&&(o.to=r.col,o.index=r.index,Q()))}}),document.addEventListener("dragleave",function(t){o&&!o.keys&&!o.b.contains(t.relatedTarget)&&W(o.b)}),document.addEventListener("drop",function(t){if(!(!o||o.keys)){t.preventDefault();var r=e(t);if(!r){N();return}o.to=r.col,o.index=r.index,ke()}}),document.addEventListener("dragend",function(){o&&!o.keys&&N()}),document.addEventListener("click",function(t){var r=t.target;if(!(!r||!r.closest)){var n=r.closest(".ui-board a[data-gb-more][href]");if(n){!t.defaultPrevented&&t.button===0&&!t.metaKey&&!t.ctrlKey&&!t.shiftKey&&!t.altKey&&typeof fetch=="function"&&(t.preventDefault(),Ge(n));return}var a=r.closest("table[data-gb-sort] button.ui-table__sort");if(a){Qe(a);return}var i=r.closest("td.ui-table__check, th.ui-table__check");if(i&&r===i){var l=i.querySelector("input[data-gb-select], input[data-gb-select-all]");if(l){l.click();return}}var u=r.closest("input[data-gb-select]");if(u){var s=u.closest(U);if(s&&t.shiftKey&&q&&q!==u&&s.contains(q)){for(var c=Array.prototype.slice.call(s.querySelectorAll("input[data-gb-select]")),f=c.indexOf(q),v=c.indexOf(u),h=u.checked,p=Math.min(f,v);p<=Math.max(f,v);p++)c[p].checked=h;C(s)}q=u;return}he(t)}}),document.addEventListener("auxclick",function(t){t.button===1&&he(t)}),document.addEventListener("change",function(t){var r=t.target;if(!(!r||!r.matches)){var n=r.closest(U);n&&(r.matches("input[data-gb-select-all]")?(n.querySelectorAll("input[data-gb-select]").forEach(function(a){a.checked=r.checked}),C(n)):r.matches("input[data-gb-select]")&&C(n))}}),document.addEventListener("keydown",function(t){if(!(t.key!=="Escape"||t.defaultPrevented||m.length)){var r=document.activeElement&&document.activeElement.closest?document.activeElement.closest(U):null;r&&Ve(r,document.activeElement)||r&&r.querySelector("input[data-gb-select]:checked")&&Ae(r)}})}}xe(),g.gembossUI={openModal:z,toast:Me,confirm:Oe,initMenus:Te,closeMenus:F,initSearch:He,initShell:De,initPasswordFields:Pe,resetPasswordFields:Ke,initNav:me,openModals:function(){return m.length},initCollections:xe,selection:ye,clearSelection:Ae,syncSelection:C,initMenuLayer:ne,floatMenu:B,placeFloating:ee}})(globalThis);
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
import "./language-switcher.css";
|
|
25
25
|
import React, { useEffect, useRef } from "react";
|
|
26
26
|
import { Icon } from "./icons";
|
|
27
|
-
import { canFloatMenus, floatMenu, listenForDetachedMenus
|
|
27
|
+
import { canFloatMenus, floatMenu, listenForDetachedMenus } from "./menu-layer";
|
|
28
|
+
import { closeMenu, menuKeyDown, openMenu, registerMenu } from "./menu-keys";
|
|
28
29
|
|
|
29
30
|
/** One language: `code` (what `onChange` gets, and the `lang` its name is spoken in), `label` (its NATIVE name: the menu
|
|
30
31
|
* lists every language in its own words), `short` (what the button shows; default the code's first part, upper case),
|
|
@@ -96,14 +97,6 @@ function focusCurrent(d: HTMLDetailsElement) {
|
|
|
96
97
|
const rows = rowsOf(d);
|
|
97
98
|
(rows.find((r) => r.getAttribute("aria-checked") === "true") ?? rows[0])?.focus();
|
|
98
99
|
}
|
|
99
|
-
function openMenu(d: HTMLDetailsElement) {
|
|
100
|
-
d.open = true;
|
|
101
|
-
if (canFloatMenus()) floatMenu(d);
|
|
102
|
-
}
|
|
103
|
-
function closeMenu(d: HTMLDetailsElement) {
|
|
104
|
-
d.open = false;
|
|
105
|
-
d.querySelector<HTMLElement>(":scope > summary")?.focus();
|
|
106
|
-
}
|
|
107
100
|
|
|
108
101
|
export function LanguageSwitcher({ value, languages = FLEET_LANGUAGES, onChange, suggested, labels, variant = "topbar", end = true, className }: LanguageSwitcherProps) {
|
|
109
102
|
const ref = useRef<HTMLDetailsElement>(null);
|
|
@@ -116,25 +109,17 @@ export function LanguageSwitcher({ value, languages = FLEET_LANGUAGES, onChange,
|
|
|
116
109
|
useEffect(() => {
|
|
117
110
|
const el = ref.current;
|
|
118
111
|
if (!el) return undefined;
|
|
119
|
-
// Menu's
|
|
120
|
-
// menu floats. Plus: an opening puts focus on the checked row
|
|
121
|
-
const
|
|
122
|
-
const
|
|
123
|
-
const onToggle = () => {
|
|
124
|
-
if (!el.open) { sinkMenu(el); return; }
|
|
125
|
-
if (canFloatMenus()) floatMenu(el);
|
|
126
|
-
focusCurrent(el);
|
|
127
|
-
};
|
|
128
|
-
document.addEventListener("click", onDoc);
|
|
129
|
-
document.addEventListener("keydown", onKey);
|
|
112
|
+
// Menu's page-wide rules (./menu-keys registerMenu): an outside click closes it, Escape closes it with focus back on
|
|
113
|
+
// the button, an open menu floats, one menu open at a time. Plus: an opening puts focus on the checked row.
|
|
114
|
+
const off = registerMenu(el);
|
|
115
|
+
const onToggle = () => { if (el.open) focusCurrent(el); };
|
|
130
116
|
el.addEventListener("toggle", onToggle);
|
|
131
117
|
if (canFloatMenus()) {
|
|
132
118
|
listenForDetachedMenus();
|
|
133
119
|
if (el.open) floatMenu(el);
|
|
134
120
|
}
|
|
135
121
|
return () => {
|
|
136
|
-
|
|
137
|
-
document.removeEventListener("keydown", onKey);
|
|
122
|
+
off();
|
|
138
123
|
el.removeEventListener("toggle", onToggle);
|
|
139
124
|
};
|
|
140
125
|
}, []);
|
|
@@ -146,26 +131,10 @@ export function LanguageSwitcher({ value, languages = FLEET_LANGUAGES, onChange,
|
|
|
146
131
|
e.preventDefault();
|
|
147
132
|
if (el.open) el.open = false; else openMenu(el);
|
|
148
133
|
};
|
|
134
|
+
// The kit menu's keys (./menu-keys, Menu's too): ↓ / ↑ on the button open the menu (or go into it) on the checked row;
|
|
135
|
+
// in it ↑ ↓ wrap, Home End, Escape closes with focus on the button, Tab closes and goes on, Space acts on a link row.
|
|
149
136
|
const onKeyDown = (e: React.KeyboardEvent<HTMLDetailsElement>) => {
|
|
150
|
-
|
|
151
|
-
const t = e.target as HTMLElement;
|
|
152
|
-
if (t.tagName === "SUMMARY") {
|
|
153
|
-
// ↓ / ↑ on the button open the menu (or go into it), on the checked row.
|
|
154
|
-
if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
|
|
155
|
-
e.preventDefault();
|
|
156
|
-
if (el.open) focusCurrent(el); else openMenu(el);
|
|
157
|
-
return;
|
|
158
|
-
}
|
|
159
|
-
const rows = rowsOf(el);
|
|
160
|
-
const i = rows.indexOf(t);
|
|
161
|
-
if (i < 0) return;
|
|
162
|
-
// Tab leaves the menu: it closes and focus goes on from the button, forward or back (not prevented).
|
|
163
|
-
if (e.key === "Tab") { closeMenu(el); return; }
|
|
164
|
-
const next = e.key === "ArrowDown" ? (i + 1) % rows.length : e.key === "ArrowUp" ? (i - 1 + rows.length) % rows.length
|
|
165
|
-
: e.key === "Home" ? 0 : e.key === "End" ? rows.length - 1 : -1;
|
|
166
|
-
if (next < 0) return;
|
|
167
|
-
e.preventDefault();
|
|
168
|
-
rows[next].focus();
|
|
137
|
+
menuKeyDown(e.currentTarget, e, { row: ITEM, entry: (d) => focusCurrent(d) });
|
|
169
138
|
};
|
|
170
139
|
const pick = (code: string) => (e: React.MouseEvent<HTMLElement>) => {
|
|
171
140
|
const el = e.currentTarget.closest("details");
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.ui-list-page{box-sizing:border-box;max-width:var(--ui-content-max, 900px);margin-inline:auto;padding-inline:24px;display:flex;flex-direction:column;gap:16px;padding-bottom:24px;container:ui-list-page / inline-size;--ui-list-page-text: var(--p-color-text, var(--ui-text-strong));--ui-list-page-muted: var(--p-color-text-secondary, var(--ui-text-muted));--ui-list-page-fill: var(--p-color-bg-fill-tertiary, #e3e3e3);--ui-list-page-fill-hover: var(--p-color-bg-fill-tertiary-hover, #d4d4d4);--ui-list-page-fill-active: var(--p-color-bg-fill-tertiary-active, #cccccc)}@media (max-width: 30.6225em){.ui-list-page{padding-inline:0}}.ui-list-page__head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title actions" "sub .";align-items:start;column-gap:16px;padding-top:24px;margin-bottom:8px}.ui-list-page__head--back{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"back title actions" ". sub ."}.ui-list-page__head--back>:is(.ui-list-page__title-row,.ui-list-page__subtitle){margin-left:-12px}.ui-list-page__back{grid-area:back;color:var(--ui-list-page-text);border-color:transparent}.ui-list-page__back:hover{background:var(--ui-list-page-fill-hover)}.ui-list-page__back svg{width:20px;height:20px}.ui-list-page__title-row{grid-area:title;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;min-height:28px}.ui-list-page__title{margin:0;color:var(--ui-list-page-text);font-size:20px;line-height:24px;font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere}.ui-list-page__subtitle{grid-area:sub;min-width:0;margin:2px 0 0;color:var(--ui-list-page-muted);font-size:12px;line-height:16px;overflow-wrap:anywhere}.ui-list-page__actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}.ui-list-page__action{background:var(--ui-list-page-fill);border-color:transparent;color:var(--ui-list-page-text)}.ui-list-page__action:not([aria-disabled=true]):hover{background:var(--ui-list-page-fill-hover)}.ui-list-page__action:not([aria-disabled=true]):active{background:var(--ui-list-page-fill-active)}.ui-list-page__action--danger{color:var(--gemboss-danger-strong, #8e0b21)}.ui-list-page__more>summary{background:var(--ui-list-page-fill);border-color:transparent;color:var(--ui-list-page-text)}.ui-list-page__more>summary:hover{background:var(--ui-list-page-fill-hover)}.ui-list-page__narrow{display:none}.ui-list-page__notices:empty,.ui-list-page__toolbar:empty,.ui-list-page__notices:has(>:only-child:empty),.ui-list-page__toolbar:has(>:only-child:empty){display:none}@container ui-list-page (max-width: 559.98px){.ui-list-page__wide{display:none}.ui-list-page__narrow{display:inline-flex}}@media (max-width: 47.9975em){.ui-list-page__head{padding-top:16px;margin-bottom:0;grid-template-areas:"title actions" "sub sub"}.ui-list-page__head--back{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"back . actions" "title title title" "sub sub sub"}.ui-list-page__head--back>:is(.ui-list-page__title-row,.ui-list-page__subtitle){margin-left:0}.ui-list-page__head--back>.ui-list-page__title-row{margin-top:12px}.ui-list-page__head:not(.ui-list-page__head--back):has(>.ui-list-page__actions)>.ui-list-page__title-row{min-height:44px}.ui-list-page__wide{display:none}.ui-list-page__narrow{display:inline-flex}}.ui-list-page__card{padding:0;overflow:hidden}@media (max-width: 30.6225em){.ui-list-page__card{border-radius:0}}.ui-list-page__card-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:16px;border-bottom:1px solid var(--ui-border)}.ui-list-page__card-title{margin:0;color:var(--ui-list-page-text);font-size:14px;line-height:20px;font-weight:650}.ui-list-page__skeleton{display:grid;gap:8px;padding:16px}.ui-list-page__skeleton+.ui-list-page__skeleton{border-top:1px solid var(--ui-border)}.ui-list-page__skeleton .ui-skeleton__line:last-child{width:60%}.ui-list-page__error{padding:16px}.ui-list-page__error .ui-notice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}.ui-list-page__no-match{padding:32px 16px}.ui-list-page__section-title{margin-bottom:-8px}
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
/**
|
|
3
|
+
* ListPage (23/10/2026, step 3 of the ⋯ / list standard, Gems/CLAUDE.md §13): the frame of a page that lists one kind of
|
|
4
|
+
* thing. Its header (a way back, the title, one line under it, the primary action, the rest), its notices, its toolbar, and
|
|
5
|
+
* ONE card holding the list, or, in the list's place, what the list is doing: loading, empty, nothing matching, or not read.
|
|
6
|
+
*
|
|
7
|
+
* Until now every admin list page drew this itself on Polaris `Page`, and each drew the states its own way: five kinds of
|
|
8
|
+
* empty state, four labels on a retry ("Try again", "Retry", "Reload", "Refresh"), a skeleton of 3 or 4 lines or a spinner or
|
|
9
|
+
* nothing. Here there is one of each: a page says WHICH state it is in, and the kit draws it.
|
|
10
|
+
*
|
|
11
|
+
* The header takes Polaris Page's numbers, measured in the admin (_local/gemboss/list-page-2026-10-23): title 20/24/700 on a
|
|
12
|
+
* 28px row, the line under it 12/16 muted 2px below that row, actions 28px tall 8px apart, 24px above the header and under it
|
|
13
|
+
* from 768px up, 16 below. What it does differently, on purpose:
|
|
14
|
+
* - secondary actions: in a page column of 560px or more the first two are buttons and the rest go behind ⋯; in a narrower
|
|
15
|
+
* column (the admin at 768, beside its rail) and below 768px all of them are behind ⋯. Polaris measures the room in
|
|
16
|
+
* script and folds a different number at every width; this folds the same way every time.
|
|
17
|
+
* - below 768 the controls are 44px tall (the kit's rule for a finger and a phone width, §9.1), not Polaris' 32.
|
|
18
|
+
*
|
|
19
|
+
* `primaryAction` is a node, so a page passes its own button (the admin's Polaris Button, its Publish button that counts
|
|
20
|
+
* changes). Secondary actions are data, so the kit can put them behind ⋯ when there is no room; an action is the same as a
|
|
21
|
+
* button and as a ⋯ row (its URL through `linkAs`, its `onAction` on both, its reason when disabled). `linkAs` draws the back
|
|
22
|
+
* link and every URL action with the app's link (Next's Link), as IndexTable does.
|
|
23
|
+
*
|
|
24
|
+
* The states are drawn here, not with collections.tsx' CollectionState / CollectionSkeleton: importing that module brings
|
|
25
|
+
* collections.css (15.6 KB gzip, tables, boards, grids) into every page that lists something. The markup is the same
|
|
26
|
+
* core classes (ui.css: `ui-empty`, `ui-notice--danger`, `ui-skeleton__line`); the no-match padding is this entry's own, since
|
|
27
|
+
* `ui-empty--no-match` lives in collections.css (the parts gate holds a component to the CSS it imports).
|
|
28
|
+
*/
|
|
29
|
+
import "./list-page.css";
|
|
30
|
+
import React, { useId } from "react";
|
|
31
|
+
import { Icon } from "./icons";
|
|
32
|
+
import { Menu, MenuGroup, MenuItem, MenuSeparator } from "./menu";
|
|
33
|
+
|
|
34
|
+
export interface ListPageAction {
|
|
35
|
+
content: string;
|
|
36
|
+
onAction?: () => void;
|
|
37
|
+
url?: string;
|
|
38
|
+
/** A new tab. */
|
|
39
|
+
external?: boolean;
|
|
40
|
+
disabled?: boolean;
|
|
41
|
+
destructive?: boolean;
|
|
42
|
+
/** Why it is disabled, or what it will do: the button's title, the menu row's hint. */
|
|
43
|
+
helpText?: string;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/** A choice in an action group: the one that is on is `active` (a check before it; the others none). */
|
|
47
|
+
export interface ListPageChoice extends ListPageAction {
|
|
48
|
+
active?: boolean;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export type ListPageState = "ready" | "loading" | "empty" | "no-match" | "error";
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
/** How many secondary actions stand as buttons from 768px up; the rest are behind ⋯. */
|
|
55
|
+
const WIDE_SECONDARY = 2;
|
|
56
|
+
|
|
57
|
+
export function ListPage({
|
|
58
|
+
title, subtitle, back, titleMeta, primaryAction, secondaryActions = [], actionGroups = [], notices, toolbar,
|
|
59
|
+
state = "ready", empty, noMatch, error, loadingRows = 3, loadingText = "Loading…", cardTitle, cardMeta, cardLead, card = true, cardProps, after, children, linkAs = "a",
|
|
60
|
+
}: {
|
|
61
|
+
title: React.ReactNode;
|
|
62
|
+
/** One line under the title: what the page holds, with its count first when it has one ("12 rules · 9 on."). */
|
|
63
|
+
subtitle?: React.ReactNode;
|
|
64
|
+
/** The page this one sits in ("Types" from a type's entries). */
|
|
65
|
+
back?: { href: string; label: string };
|
|
66
|
+
/** Beside the title: a badge (a count, a status). */
|
|
67
|
+
titleMeta?: React.ReactNode;
|
|
68
|
+
/** The ONE thing to do here, as the page's own button. */
|
|
69
|
+
primaryAction?: React.ReactNode;
|
|
70
|
+
secondaryActions?: ListPageAction[];
|
|
71
|
+
/** Choices of one kind, always behind ⋯ (Polaris Page's actionGroups): a title, and the one that is on marked `active`
|
|
72
|
+
* (Products' Auto-refresh: Daily, Off). Never header buttons, at any width. */
|
|
73
|
+
actionGroups?: { title: string; actions: ListPageChoice[] }[];
|
|
74
|
+
/** What sits between the header and the toolbar: banners about the page (a change failed, a note), a band, the one item
|
|
75
|
+
* shown apart (Themes' current theme). Not the list's read error: that is `state`. */
|
|
76
|
+
notices?: React.ReactNode;
|
|
77
|
+
/** Search, filters, sort, a view switch: above the card. */
|
|
78
|
+
toolbar?: React.ReactNode;
|
|
79
|
+
/** What the card shows: the list (`children`), or the state the list is in. */
|
|
80
|
+
state?: ListPageState;
|
|
81
|
+
/** The empty state, the page's own (an EmptyStage). Default: one line. */
|
|
82
|
+
empty?: React.ReactNode;
|
|
83
|
+
/** Filters found nothing: the header and the toolbar stay, the card says so and offers to clear them. */
|
|
84
|
+
noMatch?: { title?: React.ReactNode; body?: React.ReactNode; onClear?: () => void };
|
|
85
|
+
/** The list could not be read: what failed, and "Try again" (`retrying` while the new read is on its way). A failed action
|
|
86
|
+
* over a list that IS there is a notice. */
|
|
87
|
+
error?: { title?: React.ReactNode; message?: React.ReactNode; onRetry?: () => void; retrying?: boolean };
|
|
88
|
+
/** Rows the loading placeholder draws (at most 10). */
|
|
89
|
+
loadingRows?: number;
|
|
90
|
+
/** What a screen reader hears while the list loads ("Loading your rules…"). */
|
|
91
|
+
loadingText?: string;
|
|
92
|
+
/** A heading at the top of the card ("Your rules"). */
|
|
93
|
+
cardTitle?: React.ReactNode;
|
|
94
|
+
/** Beside and under that heading, not in it: a hint about the card ("Drop images here to upload"), so a screen reader's heading
|
|
95
|
+
* list reads the heading alone. */
|
|
96
|
+
cardMeta?: React.ReactNode;
|
|
97
|
+
/** false: no card around a list that draws its own (a grid of cards), and its `empty` is drawn as given: a page's own
|
|
98
|
+
* starting point (StartingPoint) stands on the page. Loading, no match and a failed read still draw in a card. */
|
|
99
|
+
card?: boolean;
|
|
100
|
+
/** Attributes on the card itself (a drop zone's class and drag handlers), so a state drawn in it keeps them: an empty
|
|
101
|
+
* library is still where files are dropped. */
|
|
102
|
+
cardProps?: React.HTMLAttributes<HTMLElement>;
|
|
103
|
+
/** Rows at the top of the card in EVERY state, the state's loading, empty or error after them: a row that does not wait for the
|
|
104
|
+
* list's read (Funnels' Website, the funnel every store has). A page with a lead always has its card, so the lead stays the
|
|
105
|
+
* same element (an open row stays open) from one state to the next. */
|
|
106
|
+
cardLead?: React.ReactNode;
|
|
107
|
+
/** Sections after the list (a library to add from, ready-made templates). */
|
|
108
|
+
after?: React.ReactNode;
|
|
109
|
+
children?: React.ReactNode;
|
|
110
|
+
/** The app's link (Next's Link), as IndexTable takes it. */
|
|
111
|
+
linkAs?: React.ElementType;
|
|
112
|
+
}) {
|
|
113
|
+
const Link = linkAs;
|
|
114
|
+
const uid = useId();
|
|
115
|
+
const wide = secondaryActions.slice(0, WIDE_SECONDARY);
|
|
116
|
+
const overflow = secondaryActions.slice(WIDE_SECONDARY);
|
|
117
|
+
const hasActions = Boolean(primaryAction) || secondaryActions.length > 0 || actionGroups.length > 0;
|
|
118
|
+
// Each group is a titled set of choices, every one of them a menuitemradio (its `active` true or false), after a line when
|
|
119
|
+
// rows come before it.
|
|
120
|
+
const groups = (after: boolean) => actionGroups.map((g, gi) => (
|
|
121
|
+
<React.Fragment key={`${gi}:${g.title}`}>
|
|
122
|
+
{after || gi > 0 ? <MenuSeparator /> : null}
|
|
123
|
+
<MenuGroup title={g.title}>{g.actions.map((a, i) => item(a, i, !!a.active))}</MenuGroup>
|
|
124
|
+
</React.Fragment>
|
|
125
|
+
));
|
|
126
|
+
// A ⋯ that holds only one group of choices is named by it ("Auto-refresh options"), as the caret beside Refresh now was;
|
|
127
|
+
// any other is "More actions" (review of 3f).
|
|
128
|
+
const wideMore = overflow.length === 0 && actionGroups.length === 1 ? `${actionGroups[0].title} options` : "More actions";
|
|
129
|
+
// `checked` only for a group's choices: an action is never a radio row in the ⋯ and a plain button beside it.
|
|
130
|
+
const item = (a: ListPageAction, i: number, checked?: boolean) => (
|
|
131
|
+
<MenuItem key={`${i}:${a.content}`} checked={checked} href={a.url} linkAs={a.url && !a.external ? Link : undefined} danger={a.destructive} disabled={a.disabled} hint={a.helpText}
|
|
132
|
+
onClick={a.onAction ? () => a.onAction!() : undefined}
|
|
133
|
+
{...(a.url && a.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}>{a.content}</MenuItem>
|
|
134
|
+
);
|
|
135
|
+
// A button says the same as its ⋯ row: a disabled one stays focusable (aria-disabled) with its reason as its description,
|
|
136
|
+
// which a keyboard and a screen reader reach; a `title` alone, on a `disabled` button, reaches neither.
|
|
137
|
+
const button = (a: ListPageAction, i: number) => {
|
|
138
|
+
const cls = `ui-btn ui-list-page__action${a.destructive ? " ui-list-page__action--danger" : ""} ui-list-page__wide`;
|
|
139
|
+
const why = a.helpText ? `${uid}-why-${i}` : undefined;
|
|
140
|
+
const run = a.onAction ? () => a.onAction!() : undefined;
|
|
141
|
+
// An external action (a new tab, a download) is a plain link: through the app's Link, Next would prefetch it, and a
|
|
142
|
+
// download route would build its file on every visit (review of 3e, Tests' Export CSV).
|
|
143
|
+
const To: React.ElementType = a.external ? "a" : Link;
|
|
144
|
+
return (
|
|
145
|
+
<React.Fragment key={`${i}:${a.content}`}>
|
|
146
|
+
{a.url && !a.disabled ? (
|
|
147
|
+
<To href={a.url} className={cls} title={a.helpText} aria-describedby={why} onClick={run}
|
|
148
|
+
{...(a.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}>{a.content}</To>
|
|
149
|
+
) : (
|
|
150
|
+
<button type="button" className={cls} aria-disabled={a.disabled || undefined} title={a.helpText} aria-describedby={why}
|
|
151
|
+
onClick={a.disabled ? undefined : run}>{a.content}</button>
|
|
152
|
+
)}
|
|
153
|
+
{why ? <span id={why} hidden>{a.helpText}</span> : null}
|
|
154
|
+
</React.Fragment>
|
|
155
|
+
);
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
// The words are said by the page's one status region (below), not by the busy rows: a screen reader may hold back a live
|
|
159
|
+
// region inside an aria-busy one.
|
|
160
|
+
const placeholder = (
|
|
161
|
+
<div className="ui-list-page__loading">
|
|
162
|
+
<div aria-busy="true" aria-hidden="true">
|
|
163
|
+
{Array.from({ length: Math.max(1, Math.min(10, loadingRows)) }, (_, i) => (
|
|
164
|
+
<div key={i} className="ui-list-page__skeleton"><span className="ui-skeleton__line" /><span className="ui-skeleton__line" /></div>
|
|
165
|
+
))}
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
);
|
|
169
|
+
const body = state === "loading" ? placeholder
|
|
170
|
+
: state === "empty" ? (empty ?? <div className="ui-empty"><p className="ui-empty__title">Nothing here yet</p></div>)
|
|
171
|
+
: state === "no-match" ? (
|
|
172
|
+
<div className="ui-empty ui-list-page__no-match">
|
|
173
|
+
<p className="ui-empty__title">{noMatch?.title ?? "Nothing matches"}</p>
|
|
174
|
+
{noMatch?.body ? <p className="ui-empty__body">{noMatch.body}</p> : null}
|
|
175
|
+
{noMatch?.onClear ? <button type="button" className="ui-btn" onClick={noMatch.onClear}>Clear filters</button> : null}
|
|
176
|
+
</div>
|
|
177
|
+
)
|
|
178
|
+
: state === "error" ? (
|
|
179
|
+
<div className="ui-list-page__error">
|
|
180
|
+
<div className="ui-notice ui-notice--danger" role="alert">
|
|
181
|
+
<div><b>{error?.title ?? "This list couldn’t be read."}</b>{error?.message ? <> {error.message}</> : null}</div>
|
|
182
|
+
{error?.onRetry ? (
|
|
183
|
+
<button type="button" className="ui-btn" aria-disabled={error.retrying || undefined}
|
|
184
|
+
onClick={error.retrying ? undefined : error.onRetry}>{error.retrying ? "Trying again…" : "Try again"}</button>
|
|
185
|
+
) : null}
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
)
|
|
189
|
+
: children;
|
|
190
|
+
// A page with no card around its list draws its OWN empty as given (a starting point stands on the page); the kit's default
|
|
191
|
+
// line is still boxed, as every other state (review of 3c).
|
|
192
|
+
// A lead is card content, and a card that came and went would remount it (review of 3d).
|
|
193
|
+
const boxed = card || (cardLead != null && cardLead !== false) || (state !== "ready" && !(state === "empty" && empty != null));
|
|
194
|
+
|
|
195
|
+
return (
|
|
196
|
+
<div className="ui-list-page">
|
|
197
|
+
<header className={`ui-list-page__head${back ? " ui-list-page__head--back" : ""}`}>
|
|
198
|
+
{back ? (
|
|
199
|
+
<Link href={back.href} className="ui-btn ui-btn--icon ui-list-page__back" aria-label={`Back to ${back.label}`} title={back.label}>
|
|
200
|
+
<Icon name="arrowLeft" />
|
|
201
|
+
</Link>
|
|
202
|
+
) : null}
|
|
203
|
+
<div className="ui-list-page__title-row">
|
|
204
|
+
<h1 className="ui-list-page__title">{title}</h1>
|
|
205
|
+
{titleMeta}
|
|
206
|
+
</div>
|
|
207
|
+
{/* Its own cell: under the title from 768px up, across the whole header below (where the actions share the title's row). */}
|
|
208
|
+
{subtitle ? <p className="ui-list-page__subtitle">{subtitle}</p> : null}
|
|
209
|
+
{hasActions ? (
|
|
210
|
+
<div className="ui-list-page__actions">
|
|
211
|
+
{wide.map(button)}
|
|
212
|
+
{overflow.length || actionGroups.length ? <span className="ui-list-page__wide"><Menu label={wideMore} end className="ui-list-page__more">{overflow.map((a, i) => item(a, i))}{groups(overflow.length > 0)}</Menu></span> : null}
|
|
213
|
+
{secondaryActions.length || actionGroups.length ? <span className="ui-list-page__narrow"><Menu label="More actions" end className="ui-list-page__more">{secondaryActions.map((a, i) => item(a, i))}{groups(secondaryActions.length > 0)}</Menu></span> : null}
|
|
214
|
+
{primaryAction}
|
|
215
|
+
</div>
|
|
216
|
+
) : null}
|
|
217
|
+
</header>
|
|
218
|
+
{/* ONE status region for the page, there in every state: a live region added with its words already in it is often not
|
|
219
|
+
read out, so the region stays and only its words change (review of 3d). */}
|
|
220
|
+
<span className="ui-sr-only" role="status">{state === "loading" ? loadingText : ""}</span>
|
|
221
|
+
{notices ? <div className="ui-list-page__notices">{notices}</div> : null}
|
|
222
|
+
{toolbar ? <div className="ui-list-page__toolbar">{toolbar}</div> : null}
|
|
223
|
+
{boxed ? (
|
|
224
|
+
<section {...cardProps} className={["ui-card ui-list-page__card", cardProps?.className].filter(Boolean).join(" ")}>
|
|
225
|
+
{cardTitle ? <div className="ui-list-page__card-head"><h2 className="ui-list-page__card-title">{cardTitle}</h2>{cardMeta}</div> : null}
|
|
226
|
+
{cardLead}
|
|
227
|
+
{body}
|
|
228
|
+
</section>
|
|
229
|
+
) : (
|
|
230
|
+
// No card around a list that draws its own (a grid of cards): the heading stays, so it does not come and go with the state.
|
|
231
|
+
<>
|
|
232
|
+
{cardTitle ? <h2 className="ui-list-page__card-title ui-list-page__section-title">{cardTitle}</h2> : null}
|
|
233
|
+
{body}
|
|
234
|
+
</>
|
|
235
|
+
)}
|
|
236
|
+
{after}
|
|
237
|
+
</div>
|
|
238
|
+
);
|
|
239
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.ui-menu__busy{width:16px;height:16px;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ui-menu-busy .8s linear infinite}@keyframes ui-menu-busy{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ui-menu__busy{animation-duration:2s}}.ui-menu__list{max-width:calc(100vw - 16px)}.ui-menu__item{flex-wrap:wrap}.ui-menu__hint{max-width:32ch;white-space:normal;text-align:right}.ui-menu:not([open])>.ui-menu__list{display:none}.ui-menu__check{display:inline-flex;flex:none;width:16px;height:16px;visibility:hidden}.ui-menu__item[aria-checked=true]>.ui-menu__check{visibility:visible}.ui-menu__item[aria-checked=true]{font-weight:600}.ui-menu__group-title{padding:6px 6px 2px;color:var(--ui-text-muted);font-size:var(--ui-fs-caption);line-height:16px}@media (pointer: coarse),(max-width: 47.9975em){.ui-menu__group-title{padding:8px 16px 4px}}
|