@dataengineeringformachinelearning/viking-ui 4.0.3 → 4.0.5

package/dist/viking-tokens.json

@@ -299,13 +299,15 @@
     "controlHeightXs": "24px",
     "btnMinWidth": "120px",
     "touchTargetMin": "44px",
-    "pageGutter": "16px",
-    "pageGutterLg": "24px",
-    "pageStackGap": "24px",
-    "pageSectionGap": "32px",
-    "cardPadding": "24px",
-    "cardPaddingCompact": "16px",
-    "panelPadding": "24px",
+    "pageGutter": "24px",
+    "pageGutterLg": "32px",
+    "pageStackGap": "32px",
+    "pageSectionGap": "48px",
+    "cardPadding": "32px",
+    "cardPaddingCompact": "24px",
+    "cardContentGap": "24px",
+    "cardContentGapCompact": "16px",
+    "panelPadding": "32px",
     "formMaxWidth": "42rem",
     "formNarrowMaxWidth": "28rem",
     "contentReadableMaxWidth": "48rem"

package/dist/viking-ui-elements.js

@@ -23,6 +23,12 @@
 }
 
 .viking-btn {
+  --viking-btn-depth-shadow: var(--viking-shadow-sm);
+  --viking-btn-hover-shadow: var(--viking-shadow-hover);
+  --viking-btn-press-shadow:
+    inset 0 1px 2px color-mix(in srgb, var(--viking-black) 28%, transparent),
+    var(--viking-shadow-xs);
+
   font-family: inherit;
   font-size: var(--viking-font-size-ui, var(--viking-font-size-sm));
   font-weight: var(--viking-font-weight-semibold);
@@ -31,10 +37,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--viking-space-1);
+  gap: var(--viking-space-1-5);
   min-height: var(--viking-control-height);
-  padding: 0 var(--viking-control-padding-x);
-  border-radius: var(--viking-radius-lg);
+  padding: var(--viking-space-half) var(--viking-control-padding-x);
+  border-radius: var(--viking-radius-md);
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -49,7 +55,7 @@
   -webkit-tap-highlight-color: transparent;
   box-sizing: border-box;
   overflow: hidden;
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-depth-shadow);
 }
 
 .viking-btn::before {
@@ -64,7 +70,7 @@
     transparent
   );
   pointer-events: none;
-  opacity: 0.82;
+  opacity: 0.88;
   transition: var(--viking-transition-interactive);
 }
 
@@ -82,9 +88,13 @@
   box-shadow: none !important;
 }
 
+.viking-btn[aria-busy='true'] {
+  cursor: wait;
+}
+
 .viking-btn[aria-busy='true']::before,
 .viking-btn[aria-busy='true'] .viking-btn-label {
-  opacity: 0.85;
+  opacity: 0.78;
   transform: translateY(1px);
 }
 
@@ -188,27 +198,26 @@
   flex-shrink: 0;
   pointer-events: none;
   flex: 0 0 auto;
+  margin-block: calc(var(--viking-space-half) * -1);
 }
 
 .viking-btn-outline {
   background: var(--viking-surface);
   color: var(--viking-text);
   border-color: var(--viking-border-strong);
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-depth-shadow);
 }
 
 .viking-btn-outline:hover:not(:disabled):not([aria-busy='true']) {
-  background: var(--viking-surface-alt);
+  background: color-mix(in srgb, var(--viking-accent) 5%, var(--viking-surface-alt));
   border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border-strong));
-  box-shadow: var(--viking-shadow-md);
+  box-shadow: var(--viking-btn-hover-shadow);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
 .viking-btn-outline:active:not(:disabled):not([aria-busy='true']) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: inset 0 1px 2px
-      color-mix(in srgb, var(--viking-black) 28%, transparent),
-    var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-press-shadow);
   border-color: var(--viking-border-strong);
 }
 
@@ -216,21 +225,21 @@
   background: var(--viking-accent);
   color: var(--viking-accent-content);
   border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow:
+    var(--viking-btn-depth-shadow),
+    inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 12%, transparent);
 }
 
 .viking-btn-primary:hover:not(:disabled):not([aria-busy='true']) {
   background: var(--viking-accent-hover);
   border-color: var(--viking-accent-hover);
-  box-shadow: var(--viking-shadow-hover);
+  box-shadow: var(--viking-btn-hover-shadow);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
 .viking-btn-primary:active:not(:disabled):not([aria-busy='true']) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: inset 0 1px 2px
-      color-mix(in srgb, var(--viking-black) 28%, transparent),
-    var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-press-shadow);
   border-color: color-mix(in srgb, var(--viking-accent) 82%, var(--viking-black));
 }
 
@@ -238,21 +247,21 @@
   background: var(--viking-accent-secondary);
   color: var(--viking-accent-secondary-content);
   border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow:
+    var(--viking-btn-depth-shadow),
+    inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 10%, transparent);
 }
 
 .viking-btn-secondary:hover:not(:disabled):not([aria-busy='true']) {
   background: var(--viking-accent-secondary-hover);
   border-color: var(--viking-accent-secondary-hover);
-  box-shadow: var(--viking-shadow-hover);
+  box-shadow: var(--viking-btn-hover-shadow);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
 .viking-btn-secondary:active:not(:disabled):not([aria-busy='true']) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: inset 0 1px 2px
-      color-mix(in srgb, var(--viking-black) 28%, transparent),
-    var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-press-shadow);
   border-color: color-mix(in srgb, var(--viking-accent-secondary) 82%, var(--viking-black));
 }
 
@@ -266,13 +275,13 @@
 .viking-btn-filled:hover:not(:disabled):not([aria-busy='true']) {
   border-color: color-mix(in srgb, var(--viking-accent) 45%, var(--viking-border));
   background: color-mix(in srgb, var(--viking-accent) 8%, var(--viking-surface-alt));
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-depth-shadow);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
 .viking-btn-filled:active:not(:disabled):not([aria-busy='true']) {
   transform: translateY(0) scale(var(--viking-state-active-scale));
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-press-shadow);
   border-color: color-mix(in srgb, var(--viking-accent) 20%, var(--viking-border));
   background: color-mix(in srgb, var(--viking-surface-alt) 84%, var(--viking-accent));
 }
@@ -281,13 +290,15 @@
   background: var(--viking-danger);
   color: var(--viking-on-danger);
   border-color: color-mix(in srgb, var(--viking-danger) 85%, var(--viking-black));
-  box-shadow: var(--viking-shadow-sm);
+  box-shadow:
+    var(--viking-btn-depth-shadow),
+    inset 0 1px 0 color-mix(in srgb, var(--viking-white-pure) 10%, transparent);
 }
 
 .viking-btn-danger:hover:not(:disabled):not([aria-busy='true']) {
   background: color-mix(in srgb, var(--viking-danger) 88%, var(--viking-white));
   border-color: color-mix(in srgb, var(--viking-danger) 92%, var(--viking-white));
-  box-shadow: var(--viking-shadow-hover);
+  box-shadow: var(--viking-btn-hover-shadow);
   transform: translateY(var(--viking-state-hover-lift));
 }
 
@@ -295,9 +306,7 @@
   transform: translateY(0) scale(var(--viking-state-active-scale));
   border-color: color-mix(in srgb, var(--viking-danger) 72%, var(--viking-black));
   background: color-mix(in srgb, var(--viking-danger) 84%, var(--viking-black));
-  box-shadow: inset 0 1px 2px
-      color-mix(in srgb, var(--viking-black) 28%, transparent),
-    var(--viking-shadow-sm);
+  box-shadow: var(--viking-btn-press-shadow);
 }
 
 .viking-btn-ghost {
@@ -311,6 +320,8 @@
 .viking-btn-ghost:hover:not(:disabled):not([aria-busy='true']) {
   background: var(--viking-accent-soft);
   color: var(--viking-accent-strong);
+  border-color: var(--viking-border-subtle);
+  transform: translateY(var(--viking-state-hover-lift));
 }
 
 .viking-btn-ghost:active:not(:disabled):not([aria-busy='true']) {
@@ -356,11 +367,12 @@
 }
 
 .viking-btn-spinner {
-  width: 1.125rem;
-  height: 1.125rem;
+  flex: 0 0 auto;
+  width: var(--viking-icon-size-sm, 18px);
+  height: var(--viking-icon-size-sm, 18px);
   border: 2px solid currentColor;
   border-right-color: transparent;
-  border-radius: 50%;
+  border-radius: var(--viking-radius-pill);
   animation: viking-spin 0.8s linear infinite;
 }
 
@@ -1325,7 +1337,7 @@ input:disabled {
           <footer class="viking-modal-footer" part="footer"><slot name="actions"></slot></footer>
         </div>
       </dialog>
-    `,this.dialogEl=this.shadow.querySelector("dialog"),this.shadow.querySelector(".viking-modal-close")?.addEventListener("click",()=>this.closeModal()),this.dialogEl?.addEventListener("keydown",i=>{i.key==="Escape"&&this.dismissible&&(i.preventDefault(),this.closeModal())})}},Q=()=>{c(m.tag,m),d(m.legacyTag,m),d(m.dialogTag,m)};var it=t=>{let e=t.getAttribute("items");if(!e)return[];try{let i=JSON.parse(e);return Array.isArray(i)?i:[]}catch{return[]}},nt=(t,e)=>[t.title,t.snippet??"",t.group??"",t.href,...t.keywords??[]].join(" ").toLowerCase().includes(e),rt=(t,e)=>{let i=e.trim().toLowerCase();return i?t.filter(n=>nt(n,i)):t},at=t=>{let e=new Map;return t.forEach(i=>{let n=i.group??null,r=e.get(n)??[];r.push(i),e.set(n,r)}),Array.from(e.entries()).map(([i,n])=>({group:i,items:n}))},b=class extends l{static tag="viking-command-palette";static searchTag="viking-search-palette";static legacyTag="viking-search-palette-wc";static get observedAttributes(){return["open","placeholder","items","global-shortcut"]}shadow;dialogEl=null;inputEl=null;resultsEl=null;globalKeyHandler=null;resultsId=x("viking-search-results");inputId=x("viking-search-input");query="";activeIndex=0;flatResults=[];constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),v(this.shadow,Le)}connectedCallback(){this.render(),this.syncOpen(),this.bindGlobalShortcut(),this.dialogEl?.addEventListener("close",this.onClose),this.dialogEl?.addEventListener("click",this.onBackdropClick),this.inputEl?.addEventListener("input",this.onInput),this.inputEl?.addEventListener("keydown",this.onInputKeydown)}disconnectedCallback(){this.dialogEl?.removeEventListener("close",this.onClose),this.dialogEl?.removeEventListener("click",this.onBackdropClick),this.inputEl?.removeEventListener("input",this.onInput),this.inputEl?.removeEventListener("keydown",this.onInputKeydown),this.unbindGlobalShortcut()}attributeChangedCallback(e){if(this.isConnected&&(e==="open"&&this.syncOpen(),e==="global-shortcut"&&(this.unbindGlobalShortcut(),this.bindGlobalShortcut()),e==="items"||e==="placeholder"))if(e==="placeholder"&&this.inputEl){let i=this.getAttribute("placeholder")??"Search documentation, dashboard, API\u2026";this.inputEl.placeholder=i,this.inputEl.setAttribute("aria-label",i)}else this.renderResults()}openPalette(){this.setAttribute("open",""),this.syncOpen()}closePalette(){this.removeAttribute("open"),T(this.dialogEl)}search(e){this.query=e,this.inputEl&&(this.inputEl.value=e),this.activeIndex=0,this.renderResults(),this.dispatchEvent(new CustomEvent("viking-query",{bubbles:!0,composed:!0,detail:{query:this.query}}))}onClose=()=>{this.removeAttribute("open"),this.query="",this.activeIndex=0,this.inputEl&&(this.inputEl.value=""),this.dispatchEvent(new CustomEvent("viking-close",{bubbles:!0,composed:!0}))};onBackdropClick=e=>{e.target===this.dialogEl&&this.closePalette()};onInput=e=>{this.query=e.target.value??this.inputEl?.value??"",this.activeIndex=0,this.renderResults(),this.dispatchEvent(new CustomEvent("viking-query",{bubbles:!0,composed:!0,detail:{query:this.query}}))};onInputKeydown=e=>{if(this.flatResults.length===0){e.key==="Escape"&&(e.preventDefault(),this.closePalette());return}if(e.key==="ArrowDown"){e.preventDefault(),this.activeIndex=Math.min(this.flatResults.length-1,this.activeIndex+1),this.renderResults(),this.scrollActiveIntoView();return}if(e.key==="ArrowUp"){e.preventDefault(),this.activeIndex=Math.max(0,this.activeIndex-1),this.renderResults(),this.scrollActiveIntoView();return}if(e.key==="Enter"){e.preventDefault();let i=this.flatResults[this.activeIndex];i&&this.activateItem(i)}};bindGlobalShortcut(){h(this,"global-shortcut")&&(this.globalKeyHandler=e=>{(e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==="k"&&(e.preventDefault(),this.hasAttribute("open")?this.closePalette():this.openPalette())},document.addEventListener("keydown",this.globalKeyHandler))}unbindGlobalShortcut(){this.globalKeyHandler&&(document.removeEventListener("keydown",this.globalKeyHandler),this.globalKeyHandler=null)}syncOpen(){if(!this.dialogEl)return;let e=this.hasAttribute("open");e&&!this.dialogEl.open?(this.dialogEl.removeAttribute("aria-hidden"),G(this.dialogEl),this.activeIndex=0,this.renderResults(),queueMicrotask(()=>this.inputEl?.focus())):!e&&this.dialogEl.open?(T(this.dialogEl),this.dialogEl.setAttribute("aria-hidden","true")):e||this.dialogEl.setAttribute("aria-hidden","true")}scrollActiveIntoView(){this.resultsEl?.querySelector(".viking-search-result.is-selected")?.scrollIntoView({block:"nearest"})}activateItem(e){if(this.dispatchEvent(new CustomEvent("viking-select",{bubbles:!0,composed:!0,detail:{item:e}})),this.closePalette(),e.action==="cookie-settings"){globalThis.DemlWidgets?.openCookieSettings?.();return}if(e.action==="bug-report"){let i=globalThis.DemlWidgets;if(i?.openBugReport){i.openBugReport();return}}e.href&&e.href!=="#"&&window.location.assign(e.href)}renderResults(){if(!this.resultsEl)return;let e=it(this),i=this.query.trim().toLowerCase(),n=rt(e,i);if(this.flatResults=n,n.length===0){let p=this.query.trim();this.resultsEl.innerHTML=`<p class="viking-search-empty" role="status">${p?"No results found":"Start typing to search\u2026"}</p>`,this.inputEl?.removeAttribute("aria-activedescendant");return}this.activeIndex>=n.length&&(this.activeIndex=n.length-1);let r=0,s=at(n).map(({group:p,items:k})=>{let y=p?`<p class="viking-search-group-label" role="presentation">${a(p)}</p>`:"",L=k.map(V=>{let re=`${this.resultsId}-result-${r}`,P=r===this.activeIndex;return r+=1,`
+    `,this.dialogEl=this.shadow.querySelector("dialog"),this.shadow.querySelector(".viking-modal-close")?.addEventListener("click",()=>this.closeModal()),this.dialogEl?.addEventListener("keydown",i=>{i.key==="Escape"&&this.dismissible&&(i.preventDefault(),this.closeModal())})}},Q=()=>{c(m.tag,m),d(m.legacyTag,m),d(m.dialogTag,m)};var it=t=>{let e=t.getAttribute("items");if(!e)return[];try{let i=JSON.parse(e);return Array.isArray(i)?i:[]}catch{return[]}},nt=(t,e)=>[t.title,t.snippet??"",t.group??"",t.href,...t.keywords??[]].join(" ").toLowerCase().includes(e),rt=(t,e)=>{let i=e.trim().toLowerCase();return i?t.filter(n=>nt(n,i)):t},at=t=>{let e=new Map;return t.forEach(i=>{let n=i.group??null,r=e.get(n)??[];r.push(i),e.set(n,r)}),Array.from(e.entries()).map(([i,n])=>({group:i,items:n}))},b=class extends l{static tag="viking-command-palette";static searchTag="viking-search-palette";static legacyTag="viking-search-palette-wc";static get observedAttributes(){return["open","placeholder","items","global-shortcut"]}shadow;dialogEl=null;inputEl=null;resultsEl=null;globalKeyHandler=null;resultsId=x("viking-search-results");inputId=x("viking-search-input");query="";activeIndex=0;flatResults=[];constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),v(this.shadow,Le)}connectedCallback(){this.render(),this.removeAttribute("open"),this.syncOpen(),this.bindGlobalShortcut(),this.dialogEl?.addEventListener("close",this.onClose),this.dialogEl?.addEventListener("click",this.onBackdropClick),this.inputEl?.addEventListener("input",this.onInput),this.inputEl?.addEventListener("keydown",this.onInputKeydown)}disconnectedCallback(){this.dialogEl?.removeEventListener("close",this.onClose),this.dialogEl?.removeEventListener("click",this.onBackdropClick),this.inputEl?.removeEventListener("input",this.onInput),this.inputEl?.removeEventListener("keydown",this.onInputKeydown),this.unbindGlobalShortcut()}attributeChangedCallback(e){if(this.isConnected&&(e==="open"&&this.syncOpen(),e==="global-shortcut"&&(this.unbindGlobalShortcut(),this.bindGlobalShortcut()),e==="items"||e==="placeholder"))if(e==="placeholder"&&this.inputEl){let i=this.getAttribute("placeholder")??"Search documentation, dashboard, API\u2026";this.inputEl.placeholder=i,this.inputEl.setAttribute("aria-label",i)}else this.renderResults()}openPalette(){this.setAttribute("open",""),this.syncOpen()}closePalette(){this.removeAttribute("open"),T(this.dialogEl)}search(e){this.query=e,this.inputEl&&(this.inputEl.value=e),this.activeIndex=0,this.renderResults(),this.dispatchEvent(new CustomEvent("viking-query",{bubbles:!0,composed:!0,detail:{query:this.query}}))}onClose=()=>{this.removeAttribute("open"),this.query="",this.activeIndex=0,this.inputEl&&(this.inputEl.value=""),this.dispatchEvent(new CustomEvent("viking-close",{bubbles:!0,composed:!0}))};onBackdropClick=e=>{e.target===this.dialogEl&&this.closePalette()};onInput=e=>{this.query=e.target.value??this.inputEl?.value??"",this.activeIndex=0,this.renderResults(),this.dispatchEvent(new CustomEvent("viking-query",{bubbles:!0,composed:!0,detail:{query:this.query}}))};onInputKeydown=e=>{if(this.flatResults.length===0){e.key==="Escape"&&(e.preventDefault(),this.closePalette());return}if(e.key==="ArrowDown"){e.preventDefault(),this.activeIndex=Math.min(this.flatResults.length-1,this.activeIndex+1),this.renderResults(),this.scrollActiveIntoView();return}if(e.key==="ArrowUp"){e.preventDefault(),this.activeIndex=Math.max(0,this.activeIndex-1),this.renderResults(),this.scrollActiveIntoView();return}if(e.key==="Enter"){e.preventDefault();let i=this.flatResults[this.activeIndex];i&&this.activateItem(i)}};bindGlobalShortcut(){h(this,"global-shortcut")&&(this.globalKeyHandler=e=>{(e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==="k"&&(e.preventDefault(),this.hasAttribute("open")?this.closePalette():this.openPalette())},document.addEventListener("keydown",this.globalKeyHandler))}unbindGlobalShortcut(){this.globalKeyHandler&&(document.removeEventListener("keydown",this.globalKeyHandler),this.globalKeyHandler=null)}syncOpen(){if(!this.dialogEl)return;let e=this.hasAttribute("open");e&&!this.dialogEl.open?(this.dialogEl.removeAttribute("aria-hidden"),G(this.dialogEl),this.activeIndex=0,this.renderResults(),queueMicrotask(()=>this.inputEl?.focus())):!e&&this.dialogEl.open?(T(this.dialogEl),this.dialogEl.setAttribute("aria-hidden","true")):e||this.dialogEl.setAttribute("aria-hidden","true")}scrollActiveIntoView(){this.resultsEl?.querySelector(".viking-search-result.is-selected")?.scrollIntoView({block:"nearest"})}activateItem(e){if(this.dispatchEvent(new CustomEvent("viking-select",{bubbles:!0,composed:!0,detail:{item:e}})),this.closePalette(),e.action==="cookie-settings"){globalThis.DemlWidgets?.openCookieSettings?.();return}if(e.action==="bug-report"){let i=globalThis.DemlWidgets;if(i?.openBugReport){i.openBugReport();return}}e.href&&e.href!=="#"&&window.location.assign(e.href)}renderResults(){if(!this.resultsEl)return;let e=it(this),i=this.query.trim().toLowerCase(),n=rt(e,i);if(this.flatResults=n,n.length===0){let p=this.query.trim();this.resultsEl.innerHTML=`<p class="viking-search-empty" role="status">${p?"No results found":"Start typing to search\u2026"}</p>`,this.inputEl?.removeAttribute("aria-activedescendant");return}this.activeIndex>=n.length&&(this.activeIndex=n.length-1);let r=0,s=at(n).map(({group:p,items:k})=>{let y=p?`<p class="viking-search-group-label" role="presentation">${a(p)}</p>`:"",L=k.map(V=>{let re=`${this.resultsId}-result-${r}`,P=r===this.activeIndex;return r+=1,`
               <a
                 id="${re}"
                 class="viking-search-result${P?" is-selected":""}"