vanilla-breeze 0.3.0 → 0.4.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/README.md +33 -4
- package/dist/cdn/components/activity-feed.js +1 -1
- package/dist/cdn/components/audio-player.js +2 -2
- package/dist/cdn/components/carousel-wc.js +1 -1
- package/dist/cdn/components/comment-box.js +16 -16
- package/dist/cdn/components/comment-thread.js +20 -20
- package/dist/cdn/components/comment-wc.js +1 -1
- package/dist/cdn/components/content-lens.js +1 -1
- package/dist/cdn/components/context-menu.js +1 -1
- package/dist/cdn/components/diagram-wc.js +1 -1
- package/dist/cdn/components/drop-down.js +1 -1
- package/dist/cdn/components/image-gallery.js +1 -1
- package/dist/cdn/components/manifest.json +44 -20
- package/dist/cdn/components/reaction-bar.js +1 -1
- package/dist/cdn/components/score-card.js +2 -2
- package/dist/cdn/components/settings-panel.js +15 -15
- package/dist/cdn/components/site-search.js +1 -1
- package/dist/cdn/components/social-embed.js +1 -1
- package/dist/cdn/components/tab-set.js +1 -1
- package/dist/cdn/components/theme-picker.js +45 -45
- package/dist/cdn/components/time-index.js +2 -2
- package/dist/cdn/components/time-picker.js +1 -1
- package/dist/cdn/components/version-switcher.js +1 -1
- package/dist/cdn/packs/effects.full.js +1 -1
- package/dist/cdn/packs/journal.effects.css +1 -1
- package/dist/cdn/packs/journal.full.css +1 -1
- package/dist/cdn/packs/kawaii.effects.css +1 -1
- package/dist/cdn/packs/kawaii.full.css +2 -2
- package/dist/cdn/packs/kawaii.full.js +4 -4
- package/dist/cdn/packs/kawaii.theme.css +1 -1
- package/dist/cdn/packs/manifest.json +11 -11
- package/dist/cdn/packs/memphis.full.css +1 -1
- package/dist/cdn/packs/memphis.theme.css +1 -1
- package/dist/cdn/packs/ui.full.css +1 -1
- package/dist/cdn/packs/ui.full.js +52 -52
- package/dist/cdn/themes/8bit.css +1 -1
- package/dist/cdn/themes/8bit.tokens.json +4 -4
- package/dist/cdn/themes/alpha1999-dark.tokens.json +4 -4
- package/dist/cdn/themes/alpha1999.css +1 -1
- package/dist/cdn/themes/alpha1999.tokens.json +4 -4
- package/dist/cdn/themes/anthropic.css +1 -1
- package/dist/cdn/themes/anthropic.tokens.json +4 -4
- package/dist/cdn/themes/art-deco-dark.tokens.json +4 -4
- package/dist/cdn/themes/art-deco.css +1 -1
- package/dist/cdn/themes/art-deco.tokens.json +4 -4
- package/dist/cdn/themes/bauhaus-dark.tokens.json +1 -1
- package/dist/cdn/themes/bauhaus.css +1 -1
- package/dist/cdn/themes/bauhaus.tokens.json +4 -4
- package/dist/cdn/themes/brutalist-dark.tokens.json +4 -4
- package/dist/cdn/themes/brutalist.css +1 -1
- package/dist/cdn/themes/brutalist.tokens.json +4 -4
- package/dist/cdn/themes/catalog/atlassian.tokens.json +2 -2
- package/dist/cdn/themes/catalog/bootstrap.tokens.json +2 -2
- package/dist/cdn/themes/catalog/carbon.tokens.json +2 -2
- package/dist/cdn/themes/catalog/catppuccin-mocha.tokens.json +2 -2
- package/dist/cdn/themes/catalog/govuk.tokens.json +2 -2
- package/dist/cdn/themes/catalog/manifest.json +1 -1
- package/dist/cdn/themes/catalog/material.tokens.json +2 -2
- package/dist/cdn/themes/catalog/salesforce.tokens.json +2 -2
- package/dist/cdn/themes/catalog/tailwind.tokens.json +2 -2
- package/dist/cdn/themes/catppuccin-frappe.css +1 -1
- package/dist/cdn/themes/catppuccin-frappe.tokens.json +4 -4
- package/dist/cdn/themes/catppuccin-latte-dark.tokens.json +4 -4
- package/dist/cdn/themes/catppuccin-latte.css +1 -1
- package/dist/cdn/themes/catppuccin-latte.tokens.json +4 -4
- package/dist/cdn/themes/catppuccin-macchiato.css +1 -1
- package/dist/cdn/themes/catppuccin-macchiato.tokens.json +4 -4
- package/dist/cdn/themes/catppuccin-mocha.css +1 -1
- package/dist/cdn/themes/catppuccin-mocha.tokens.json +4 -4
- package/dist/cdn/themes/classic-dark.tokens.json +4 -4
- package/dist/cdn/themes/classic.css +1 -1
- package/dist/cdn/themes/classic.tokens.json +4 -4
- package/dist/cdn/themes/claymorphism-dark.tokens.json +10 -10
- package/dist/cdn/themes/claymorphism.css +1 -1
- package/dist/cdn/themes/claymorphism.tokens.json +10 -10
- package/dist/cdn/themes/clinical-dark.tokens.json +4 -4
- package/dist/cdn/themes/clinical.css +1 -1
- package/dist/cdn/themes/clinical.tokens.json +4 -4
- package/dist/cdn/themes/cottagecore-dark.tokens.json +4 -4
- package/dist/cdn/themes/cottagecore.css +1 -1
- package/dist/cdn/themes/cottagecore.tokens.json +4 -4
- package/dist/cdn/themes/cyber.css +1 -1
- package/dist/cdn/themes/cyber.tokens.json +4 -5
- package/dist/cdn/themes/dawn-dark.tokens.json +4 -4
- package/dist/cdn/themes/dawn.css +1 -1
- package/dist/cdn/themes/dawn.tokens.json +4 -4
- package/dist/cdn/themes/dracula.css +1 -1
- package/dist/cdn/themes/dracula.tokens.json +4 -4
- package/dist/cdn/themes/dusk.css +1 -1
- package/dist/cdn/themes/dusk.tokens.json +4 -4
- package/dist/cdn/themes/editorial-dark.tokens.json +3 -3
- package/dist/cdn/themes/editorial.css +1 -1
- package/dist/cdn/themes/editorial.tokens.json +4 -4
- package/dist/cdn/themes/financial-dark.tokens.json +4 -4
- package/dist/cdn/themes/financial.css +1 -1
- package/dist/cdn/themes/financial.tokens.json +4 -4
- package/dist/cdn/themes/genai.css +1 -1
- package/dist/cdn/themes/genai.tokens.json +4 -4
- package/dist/cdn/themes/glassmorphism-dark.tokens.json +4 -4
- package/dist/cdn/themes/glassmorphism.css +1 -1
- package/dist/cdn/themes/glassmorphism.tokens.json +4 -4
- package/dist/cdn/themes/government-dark.tokens.json +4 -4
- package/dist/cdn/themes/government.css +1 -1
- package/dist/cdn/themes/government.tokens.json +4 -4
- package/dist/cdn/themes/gruvbox-dark.tokens.json +4 -4
- package/dist/cdn/themes/gruvbox.css +1 -1
- package/dist/cdn/themes/gruvbox.tokens.json +4 -4
- package/dist/cdn/themes/high-noon-dark.tokens.json +4 -4
- package/dist/cdn/themes/high-noon.css +1 -1
- package/dist/cdn/themes/high-noon.tokens.json +4 -4
- package/dist/cdn/themes/ibm.css +1 -1
- package/dist/cdn/themes/ibm.tokens.json +6 -6
- package/dist/cdn/themes/journal-dark.tokens.json +4 -4
- package/dist/cdn/themes/journal.css +1 -1
- package/dist/cdn/themes/journal.tokens.json +4 -4
- package/dist/cdn/themes/kawaii-dark.tokens.json +4 -4
- package/dist/cdn/themes/kawaii.css +1 -1
- package/dist/cdn/themes/kawaii.tokens.json +4 -4
- package/dist/cdn/themes/magna-dark.tokens.json +4 -4
- package/dist/cdn/themes/magna.css +1 -1
- package/dist/cdn/themes/magna.tokens.json +4 -4
- package/dist/cdn/themes/manifest.json +48 -48
- package/dist/cdn/themes/mcdonalds.css +1 -1
- package/dist/cdn/themes/mcdonalds.tokens.json +4 -4
- package/dist/cdn/themes/midnight.css +1 -1
- package/dist/cdn/themes/midnight.tokens.json +4 -4
- package/dist/cdn/themes/minimal-dark.tokens.json +4 -4
- package/dist/cdn/themes/minimal.css +1 -1
- package/dist/cdn/themes/minimal.tokens.json +4 -4
- package/dist/cdn/themes/modern-dark.tokens.json +4 -4
- package/dist/cdn/themes/modern.css +1 -1
- package/dist/cdn/themes/modern.tokens.json +4 -4
- package/dist/cdn/themes/nes-dark.tokens.json +4 -4
- package/dist/cdn/themes/nes.css +1 -1
- package/dist/cdn/themes/nes.tokens.json +4 -4
- package/dist/cdn/themes/neumorphism-dark.tokens.json +10 -10
- package/dist/cdn/themes/neumorphism.css +1 -1
- package/dist/cdn/themes/neumorphism.tokens.json +10 -10
- package/dist/cdn/themes/nord-dark.tokens.json +4 -4
- package/dist/cdn/themes/nord.css +1 -1
- package/dist/cdn/themes/nord.tokens.json +4 -4
- package/dist/cdn/themes/organic-dark.tokens.json +4 -4
- package/dist/cdn/themes/organic.css +1 -1
- package/dist/cdn/themes/organic.tokens.json +4 -4
- package/dist/cdn/themes/rose-pine-dark.tokens.json +4 -4
- package/dist/cdn/themes/rose-pine.css +1 -1
- package/dist/cdn/themes/rose-pine.tokens.json +4 -4
- package/dist/cdn/themes/rough-dark.tokens.json +4 -5
- package/dist/cdn/themes/rough.css +1 -1
- package/dist/cdn/themes/rough.tokens.json +5 -6
- package/dist/cdn/themes/solarized-dark.tokens.json +4 -4
- package/dist/cdn/themes/solarized.css +1 -1
- package/dist/cdn/themes/solarized.tokens.json +4 -4
- package/dist/cdn/themes/starbucks.css +1 -1
- package/dist/cdn/themes/starbucks.tokens.json +4 -4
- package/dist/cdn/themes/startup-dark.tokens.json +4 -4
- package/dist/cdn/themes/startup.css +1 -1
- package/dist/cdn/themes/startup.tokens.json +4 -4
- package/dist/cdn/themes/super2026-dark.tokens.json +4 -4
- package/dist/cdn/themes/super2026.css +1 -1
- package/dist/cdn/themes/super2026.tokens.json +4 -4
- package/dist/cdn/themes/swiss-dark.tokens.json +1 -1
- package/dist/cdn/themes/swiss.css +1 -1
- package/dist/cdn/themes/swiss.tokens.json +4 -4
- package/dist/cdn/themes/terminal.css +1 -1
- package/dist/cdn/themes/terminal.tokens.json +4 -4
- package/dist/cdn/themes/tokyo-night-dark.tokens.json +4 -4
- package/dist/cdn/themes/tokyo-night.css +1 -1
- package/dist/cdn/themes/tokyo-night.tokens.json +4 -4
- package/dist/cdn/themes/vaporwave-dark.tokens.json +4 -4
- package/dist/cdn/themes/vaporwave.css +1 -1
- package/dist/cdn/themes/vaporwave.tokens.json +4 -4
- package/dist/cdn/themes/win9x-dark.tokens.json +4 -4
- package/dist/cdn/themes/win9x.css +1 -1
- package/dist/cdn/themes/win9x.tokens.json +4 -4
- package/dist/cdn/vanilla-breeze-charts.css +1 -1
- package/dist/cdn/vanilla-breeze-core.css +1 -1
- package/dist/cdn/vanilla-breeze-core.js +62 -62
- package/dist/cdn/vanilla-breeze-dev.css +1 -1
- package/dist/cdn/vanilla-breeze-extras.js +19 -19
- package/dist/cdn/vanilla-breeze-labs.css +1 -1
- package/dist/cdn/vanilla-breeze.css +1 -1
- package/dist/cdn/vanilla-breeze.js +170 -170
- package/package.json +5 -8
- package/dist/cdn/components/accessibility-specimen.js +0 -11
- package/dist/cdn/components/adr-wc.js +0 -403
- package/dist/cdn/components/breakpoint-specimen.js +0 -26
- package/dist/cdn/components/burndown-chart.js +0 -2
- package/dist/cdn/components/capacity-plan.js +0 -25
- package/dist/cdn/components/color-palette.js +0 -16
- package/dist/cdn/components/component-sampler.js +0 -45
- package/dist/cdn/components/empathy-map.js +0 -582
- package/dist/cdn/components/font-pairer.js +0 -108
- package/dist/cdn/components/gantt-chart.js +0 -2
- package/dist/cdn/components/gradient-builder.js +0 -52
- package/dist/cdn/components/impact-effort.js +0 -2
- package/dist/cdn/components/iron-triangle.js +0 -2
- package/dist/cdn/components/kanban-board.js +0 -2
- package/dist/cdn/components/layout-specimen.js +0 -35
- package/dist/cdn/components/motion-specimen.js +0 -21
- package/dist/cdn/components/palette-generator.js +0 -15
- package/dist/cdn/components/product-roadmap.js +0 -3
- package/dist/cdn/components/quadrant-grid.js +0 -3
- package/dist/cdn/components/quality-target.js +0 -12
- package/dist/cdn/components/requirement-card.js +0 -122
- package/dist/cdn/components/review-surface.js +0 -535
- package/dist/cdn/components/risk-register.js +0 -25
- package/dist/cdn/components/semantic-palette.js +0 -30
- package/dist/cdn/components/spacing-specimen.js +0 -6
- package/dist/cdn/components/story-map.js +0 -2
- package/dist/cdn/components/theme-catalog.js +0 -28
- package/dist/cdn/components/theme-export.js +0 -26
- package/dist/cdn/components/theme-import.js +0 -44
- package/dist/cdn/components/token-specimen.js +0 -26
- package/dist/cdn/components/traceability-matrix.js +0 -3
- package/dist/cdn/components/type-specimen.js +0 -19
- package/dist/cdn/components/user-journey.js +0 -366
- package/dist/cdn/components/user-persona.js +0 -402
- package/dist/cdn/components/user-story.js +0 -411
- package/dist/cdn/components/work-item.js +0 -447
- package/dist/cdn/packs/design-system.full.css +0 -2
- package/dist/cdn/packs/design-system.full.js +0 -175
- package/dist/cdn/packs/ux-planning.full.css +0 -2
- package/dist/cdn/packs/ux-planning.full.js +0 -3160
|
@@ -1,175 +0,0 @@
|
|
|
1
|
-
var $e=window.matchMedia("(prefers-reduced-motion: reduce)");var rt=new Map;function h(r,t,e={}){let s=e.priority??10,o={impl:t,bundle:e.bundle,contract:e.contract,priority:s},n=rt.get(r);if(customElements.get(r)){if(!n||n.priority>=s){n&&n.priority===s&&n.impl!==t&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${n.bundle}" (priority ${n.priority}). Skipping "${e.bundle}".`);return}console.warn(`[VB Bundle] Tag <${r}> defined by "${n.bundle}" cannot be replaced (customElements.define is permanent). "${e.bundle}" has higher priority but arrived late.`);return}if(n&&n.priority>=s){n.priority===s&&console.warn(`[VB Bundle] Tag <${r}> already registered by "${n.bundle}". Skipping "${e.bundle}" (first wins at equal priority).`);return}rt.set(r,o),customElements.define(r,t)}var m=class extends HTMLElement{#t=[];#e;connectedCallback(){this.hasAttribute("data-upgraded")||this.setup()!==!1&&(this.setAttribute("data-upgraded",""),queueMicrotask(()=>{this.dispatchEvent(new CustomEvent(`${this.localName}:upgraded`,{bubbles:!0}))}))}disconnectedCallback(){for(let t of this.#t)t();this.#t=[],this.removeAttribute("data-upgraded"),this.teardown()}listen(t,e,s,o){t.addEventListener(e,s,o),this.#t.push(()=>t.removeEventListener(e,s,o))}setup(){}teardown(){}setState(t,e){this.#e||(this.#e=this.attachInternals());let s=this.#e.states;try{e?s.add(t):s.delete(t)}catch{let o=`--${t}`;e?s.add(o):s.delete(o)}}_adoptInternals(t){this.#e||(this.#e=t)}};var O="[data-copy], [data-copy-target], [data-paste-target]",zt="Copied to clipboard",Et="Pasted from clipboard",N=new WeakMap;async function k(r,t={}){if(r==null||r==="")return!1;let{button:e,announceMessage:s=zt,duration:o=1500}=t;try{await navigator.clipboard.writeText(r)}catch{return!1}return it({button:e,duration:o,announceMessage:s,eventDetail:{text:r}}),!0}function it({button:r,duration:t,announceMessage:e,eventDetail:s,state:o="copied",eventName:n="copy"}){if(r){r.dataset.state=o;let i=N.get(r);i&&clearTimeout(i),N.set(r,setTimeout(()=>{delete r.dataset.state,N.delete(r)},t)),r.dispatchEvent(new CustomEvent(n,{bubbles:!0,detail:s}))}Mt(e,r??document.body)}async function Ct(r,t={}){let{button:e,announceMessage:s=Et,duration:o=1500}=t,n;try{n=await navigator.clipboard.readText()}catch{return null}return r&&("value"in r&&(r instanceof HTMLInputElement||r instanceof HTMLTextAreaElement||r instanceof HTMLSelectElement)?r.value=n:r.textContent=n,r.dispatchEvent(new Event("input",{bubbles:!0}))),it({button:e,duration:o,announceMessage:s,eventDetail:{text:n},state:"pasted",eventName:"paste"}),n}function nt(r=document){r.querySelectorAll(O).forEach(q)}function q(r){r.hasAttribute("data-copy-init")||(r.setAttribute("data-copy-init",""),r.addEventListener("click",()=>{if(r.dataset.pasteTarget){let e=document.querySelector(r.dataset.pasteTarget);if(!e)return;Ct(e,{button:r});return}let t=Tt(r);t&&k(t,{button:r})}))}function Tt(r){if(r.dataset.copy)return r.dataset.copy;if(r.dataset.copyTarget){let t=document.querySelector(r.dataset.copyTarget);if(!t)return"";let e=r.dataset.copyAttr;return e?t.getAttribute(e)??"":t.textContent??""}return""}function Mt(r,t){let e=document.createElement("div");e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.className="visually-hidden",e.textContent=r,t.appendChild(e),setTimeout(()=>e.remove(),1e3)}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>nt()):nt();var Lt=new MutationObserver(r=>{for(let t of r)for(let e of t.addedNodes){if(e.nodeType!==Node.ELEMENT_NODE)continue;let s=e;s.matches(O)&&q(s),s.querySelectorAll(O).forEach(o=>q(o))}});Lt.observe(document.documentElement,{childList:!0,subtree:!0});var B=class extends m{static observedAttributes=["colors","names","layout","show-values","show-names","size","editable"];#t=[];setup(){this.#e()}attributeChangedCallback(){this.isConnected&&this.#e()}#e(){let t=this.getAttribute("colors")||"",e=this.getAttribute("names")||"",s=this.getAttribute("layout")||"inline",o=this.getAttribute("size")||"md",n=this.hasAttribute("show-values"),i=this.hasAttribute("show-names")||e.length>0,a=this.hasAttribute("editable"),l=this.#c(t);this.#t=l.slice();let c=e?e.split(",").map(b=>b.trim()):[],d={sm:48,md:80,lg:120}[o]||80,u="display:flex;flex-wrap:wrap;gap:var(--size-xs,0.5rem)";s==="grid"?u=`display:grid;grid-template-columns:repeat(auto-fill,minmax(${d}px,1fr));gap:var(--size-xs,0.5rem)`:s==="list"&&(u="display:flex;flex-direction:column;gap:var(--size-xs,0.5rem)");let $=l.map((b,y)=>{let g=c[y]||"",w=this.#l(b),et=s==="list"?"display:flex;flex-direction:row;align-items:center;gap:0.75rem":`display:flex;flex-direction:column;align-items:center;gap:0.25rem;max-inline-size:${d}px`,st=s==="list"?36:d,ot=`background:${b};color:${w};width:${st}px;height:${st}px;border:1px solid oklch(0% 0 0/0.15);border-radius:var(--radius-s,0.25rem);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-family:var(--font-mono,monospace);position:relative;overflow:hidden;flex-shrink:0`;if(a){let At=this.#a(b);return`<div class="swatch-wrap" role="listitem" style="${et}">
|
|
2
|
-
<label class="color-box color-box-edit" style="${ot};cursor:pointer" data-index="${y}" title="Click to edit${g?": "+g:""}" aria-label="${g||"Color "+(y+1)}: ${b}. Click to edit.">
|
|
3
|
-
<input type="color" class="color-input" value="${At}" data-index="${y}" style="position:absolute;inset:0;opacity:0;cursor:pointer;inline-size:100%;block-size:100%" aria-label="${g||"Color "+(y+1)} picker">
|
|
4
|
-
<span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${n?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease;pointer-events:none">${this.#i(b)}</span>
|
|
5
|
-
</label>
|
|
6
|
-
${i&&g?`<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${g}</span>`:""}
|
|
7
|
-
</div>`}return`<div class="swatch-wrap" role="listitem" style="${et}">
|
|
8
|
-
<button type="button" class="color-box" data-index="${y}"
|
|
9
|
-
style="${ot}"
|
|
10
|
-
title="Click to copy${g?": "+g:""}"
|
|
11
|
-
aria-label="${g||"Color "+(y+1)}: ${b}">
|
|
12
|
-
<span class="color-value" style="font-size:0.625rem;line-height:1.2;opacity:${n?"1":"0"};text-align:center;padding:2px 4px;word-break:break-all;transition:opacity 0.15s ease">${this.#i(b)}</span>
|
|
13
|
-
</button>
|
|
14
|
-
${i&&g?`<span style="font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);text-align:center;max-inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${g}</span>`:""}
|
|
15
|
-
</div>`}).join("");this.innerHTML=`<div class="palette ${s}" role="list" aria-label="Color palette" style="${u}">${$}</div>`,a?this.#r(c):(this.#o(l,c),this.#s(l,c,n))}#s(t,e,s){this.querySelectorAll(".color-box").forEach(o=>{let n=o;s||(n.addEventListener("pointerenter",()=>{let i=n.querySelector(".color-value");i&&(i.style.opacity="1")}),n.addEventListener("pointerleave",()=>{let i=n.querySelector(".color-value");i&&(i.style.opacity="0")})),n.addEventListener("click",()=>{let i=Number(n.dataset.index),a=t[i],l=e[i]||"";k(a,{button:n,announceMessage:"Color copied"}),this.dispatchEvent(new CustomEvent("color-palette:select",{bubbles:!0,detail:{color:a,name:l,index:i}})),n.style.outline="3px solid currentColor",n.style.outlineOffset="2px",setTimeout(()=>{n.style.outline="",n.style.outlineOffset=""},600)})})}#r(t){this.querySelectorAll(".color-input").forEach(e=>{e.addEventListener("input",()=>{let s=Number(e.dataset.index),o=e.value;this.#t[s]=o;let n=e.parentElement;if(n){n.style.background=o,n.style.color=this.#l(o);let i=n.querySelector(".color-value");i&&(i.textContent=this.#i(o)),n.title=`Click to edit${t[s]?": "+t[s]:""} (${o})`,n.setAttribute("aria-label",`${t[s]||"Color "+(s+1)}: ${o}. Click to edit.`)}this.setAttribute("colors",this.#t.join(",")),this.dispatchEvent(new CustomEvent("color-palette:change",{bubbles:!0,detail:{color:o,name:t[s]||"",index:s,colors:this.#t.slice()}}))})})}get colors(){return this.#t.slice()}#o(t,e){this.querySelectorAll(".color-box").forEach(s=>{let o=Number(s.dataset.index),n=t[o];if(!n||!n.includes("var("))return;let i=getComputedStyle(s).backgroundColor,a=this.#n(i)||i;t[o]=a,this.#t[o]=a;let l=s.querySelector(".color-value");l&&(l.textContent=a),s.style.color=this.#l(a);let c=e[o]||"";s.title=`Click to copy${c?": "+c:""} (${a})`,s.setAttribute("aria-label",`${c||"Color "+(o+1)}: ${a}`)})}#n(t){let e=t.match(/rgba?\(\s*([\d.]+),?\s*([\d.]+),?\s*([\d.]+)/);if(!e)return null;let[,s,o,n]=e,i=a=>Math.round(Number(a)).toString(16).padStart(2,"0");return`#${i(s)}${i(o)}${i(n)}`}#a(t){if(/^#[0-9a-f]{6}$/i.test(t))return t.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(t))return("#"+t.slice(1).split("").map(o=>o+o).join("")).toLowerCase();if(typeof document>"u")return"#000000";let e=document.createElement("span");e.style.color=t,e.style.display="none",document.body.appendChild(e);let s=getComputedStyle(e).color;return e.remove(),this.#n(s)||"#000000"}#i(t){if(t.startsWith("#"))return t;let e=t.match(/oklch\(\s*([\d.]+)%?\s+([\d.]+)\s+([\d.]+)/);return e?`${e[1]}% .${e[2].replace("0.","")}`:t.length>12?t.slice(0,12)+"\u2026":t}#c(t){if(!t)return[];let e=[],s=0,o="";for(let n of t)n==="("?s++:n===")"&&s--,n===","&&s===0?(e.push(o.trim()),o=""):o+=n;return o.trim()&&e.push(o.trim()),e}#l(t){let e=t.match(/oklch\(\s*([\d.]+)%?\s/);if(e){let s=parseFloat(e[1]);return(s>1?s/100:s)>.6?"#000":"#fff"}if(t.startsWith("#")){let s=t.replace("#",""),o=parseInt(s.substring(0,2),16)/255,n=parseInt(s.substring(2,4),16)/255,i=parseInt(s.substring(4,6),16)/255;return .2126*o+.7152*n+.0722*i>.4?"#000":"#fff"}return"#000"}};h("color-palette",B);var Nt=["system-ui","Georgia","Inter, sans-serif",'"JetBrains Mono", monospace',"Verdana","Cambria","ui-serif"],R=class extends m{static observedAttributes=["font-family","label","sample","show-scale","show-weights","show-characters","weights","editable","target","token"];setup(){this.#t(),this.#e()}attributeChangedCallback(){this.isConnected&&(this.#t(),this.#e())}#t(){let t=this.getAttribute("font-family")||"system-ui",e=this.getAttribute("label")||t.replace(/['"]/g,"").split(",")[0],s=this.getAttribute("sample")||"The quick brown fox jumps over the lazy dog",o=this.hasAttribute("show-scale"),n=this.hasAttribute("show-weights"),i=this.hasAttribute("show-characters"),l=(this.getAttribute("weights")||"300,400,500,600,700").split(",").map(u=>u.trim()),c="",d=this.hasAttribute("editable")?`<input type="text" class="specimen-font-input" value="${t.replace(/"/g,""")}" aria-label="Font family" style="font:inherit;padding:0.25rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);min-inline-size:18rem;max-inline-size:100%;font-family:${t};font-size:var(--font-size-sm,0.875rem)">
|
|
16
|
-
<span class="specimen-quick" style="display:inline-flex;flex-wrap:wrap;gap:0.25rem;margin-inline-start:0.5rem">
|
|
17
|
-
${Nt.map(u=>`<button type="button" class="specimen-quick-btn" data-font="${u.replace(/"/g,""")}" style="font:inherit;font-size:var(--font-size-xs,0.75rem);padding:0.125rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:999px;background:var(--color-surface,#fff);color:var(--color-text,#222);cursor:pointer">${u.split(",")[0].replace(/["']/g,"")}</button>`).join("")}
|
|
18
|
-
</span>`:`<span class="specimen-label">${e}</span>`;if(c+=`<div class="specimen-header" style="font-family:${t}">
|
|
19
|
-
${d}
|
|
20
|
-
<p class="specimen-sample" contenteditable="plaintext-only" spellcheck="false">${s}</p>
|
|
21
|
-
</div>`,i&&(c+=`<div class="specimen-chars" style="font-family:${t}">
|
|
22
|
-
<div class="char-row"><span class="char-label">Upper</span>${"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").map(u=>`<span>${u}</span>`).join("")}</div>
|
|
23
|
-
<div class="char-row"><span class="char-label">Lower</span>${"abcdefghijklmnopqrstuvwxyz".split("").map(u=>`<span>${u}</span>`).join("")}</div>
|
|
24
|
-
<div class="char-row"><span class="char-label">Digits</span>${"0123456789".split("").map(u=>`<span>${u}</span>`).join("")}</div>
|
|
25
|
-
<div class="char-row"><span class="char-label">Punct</span>${"!@#$%^&*()_+-=[]{}|;:,.<>?".split("").map(u=>`<span>${u==="<"?"<":u===">"?">":u==="&"?"&":u}</span>`).join("")}</div>
|
|
26
|
-
</div>`),n){c+='<div class="specimen-weights">';for(let u of l)c+=`<div class="weight-sample" style="font-family:${t};font-weight:${u}">
|
|
27
|
-
<span class="weight-label">${u}</span>
|
|
28
|
-
<span class="weight-text">Aa</span>
|
|
29
|
-
</div>`;c+="</div>"}if(o){let u=[{name:"xs",rem:.75},{name:"sm",rem:.875},{name:"md",rem:1},{name:"lg",rem:1.125},{name:"xl",rem:1.25},{name:"2xl",rem:1.5},{name:"3xl",rem:1.875},{name:"4xl",rem:2.25},{name:"5xl",rem:3}];c+='<div class="specimen-scale">';for(let $ of u)c+=`<div class="scale-step" style="font-family:${t};font-size:${$.rem}rem">
|
|
30
|
-
<span class="scale-label">${$.name}</span>
|
|
31
|
-
<span class="scale-text">${s.substring(0,30)}</span>
|
|
32
|
-
</div>`;c+="</div>"}this.innerHTML=c}#e(){if(!this.hasAttribute("editable"))return;let t=this.querySelector(".specimen-font-input");t&&this.listen(t,"input",()=>this.#s(t.value)),this.querySelectorAll(".specimen-quick-btn").forEach(e=>{this.listen(e,"click",()=>{let s=e.getAttribute("data-font")||"";t&&(t.value=s),this.#s(s)})})}#s(t){let e=this.#r(),s=this.getAttribute("token")||"font-family-base";e&&e.style.setProperty(`--${s}`,t),this.setAttribute("font-family",t),this.dispatchEvent(new CustomEvent("type-specimen:change",{bubbles:!0,detail:{fontFamily:t,token:s,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}};h("type-specimen",R);var F=class extends m{static observedAttributes=["tokens","prefix","show-values","label","editable","target"];setup(){this.#t(),this.#e()}attributeChangedCallback(){this.isConnected&&(this.#t(),this.#e())}#t(){let t=this.getAttribute("tokens")||"3xs,2xs,xs,s,m,l,xl,2xl,3xl",e=this.getAttribute("prefix")||"--size-",s=this.getAttribute("show-values")!=="false",o=this.getAttribute("label")||"",n=this.hasAttribute("editable"),i=t.split(",").map(l=>l.trim()),a="";o&&(a+=`<div style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#666);margin-block-end:0.75rem;font-family:var(--font-sans,system-ui)">${o}</div>`),a+=`<div role="list" aria-label="${o||"Spacing scale"}" style="display:flex;flex-direction:column;gap:0.25rem">`;for(let l of i){let c=`${e}${l}`,p=n?`<input type="text" class="scale-edit" data-token="${l}" aria-label="${l} value" style="font-family:var(--font-mono,monospace);font-size:0.75rem;padding:0.125rem 0.375rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);inline-size:6rem;text-align:end">`:s?'<span class="scale-value" style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);font-variant-numeric:tabular-nums;min-inline-size:3.5rem;text-align:end"></span>':"";a+=`<div role="listitem" style="display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:0.75rem;min-block-size:1.75rem">
|
|
33
|
-
<span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${l}</span>
|
|
34
|
-
<div class="scale-bar" style="display:block;block-size:var(--size-m,1rem);min-inline-size:2px;inline-size:var(${c});background:var(--color-interactive,oklch(55% 0.2 260));border-radius:var(--radius-s,0.25rem)" aria-hidden="true"></div>
|
|
35
|
-
${p}
|
|
36
|
-
</div>`}a+="</div>",this.innerHTML=a,requestAnimationFrame(()=>{if(n){let l=getComputedStyle(this);this.querySelectorAll(".scale-edit").forEach(c=>{let p=c,d=p.getAttribute("data-token"),u=l.getPropertyValue(`${e}${d}`).trim();p.value=u||""})}else s&&this.querySelectorAll(".scale-bar").forEach(l=>{let c=l.getBoundingClientRect().width,p=l.nextElementSibling;p&&(p.textContent=`${Math.round(c*100)/100}px`)})})}#e(){if(!this.hasAttribute("editable"))return;let t=this.getAttribute("prefix")||"--size-";this.querySelectorAll(".scale-edit").forEach(e=>{this.listen(e,"change",()=>this.#s(e,t)),this.listen(e,"keydown",s=>{s.key==="Enter"&&this.#s(e,t)})})}#s(t,e){let s=t.getAttribute("data-token"),o=t.value.trim();if(!s||!o)return;let n=this.#r(),i=`${e}${s}`;n&&n.style.setProperty(i,o),this.dispatchEvent(new CustomEvent("spacing-specimen:change",{bubbles:!0,detail:{name:s,value:o,token:i,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}};h("spacing-specimen",F);var at={shadow:{prefix:"--shadow-",tokens:"xs,s,m,l,xl,2xl"},radius:{prefix:"--radius-",tokens:"xs,s,m,l,xl,2xl,full"},border:{prefix:"--border-width-",tokens:"thin,medium,thick"},color:{prefix:"--color-",tokens:"primary,secondary,accent,success,warning,error,info"},size:{prefix:"--size-",tokens:"3xs,2xs,xs,s,m,l,xl,2xl,3xl"},icon:{prefix:"",tokens:"home,search,settings,user,bell,heart,star,check,x,chevron-right,menu,trash"}},lt={shadow:Ot,radius:qt,border:Bt,color:Rt,size:Ft,icon:Dt},D=class extends m{static observedAttributes=["type","tokens","prefix","show-values","label","size","icon-set","editable","target"];setup(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}#t(){let t=this.getAttribute("type")||"shadow",e=at[t]||at.shadow,s=this.getAttribute("prefix")||e.prefix,o=this.getAttribute("tokens")||e.tokens,n=this.getAttribute("show-values")!=="false",i=this.getAttribute("label")||"",a=o.split(",").map(d=>d.trim()),l=lt[t]||lt.shadow,c="";i&&(c+=`<p style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#666);margin-block-end:0.75rem;font-family:var(--font-sans,system-ui)">${i}</p>`),c+=l(a,s,n,this),this.innerHTML=c;let p=this.hasAttribute("editable")&&t!=="icon";n&&t!=="icon"?requestAnimationFrame(()=>{this.#o(t,s,a),p&&this.#e(t,s)}):p&&requestAnimationFrame(()=>this.#e(t,s))}#e(t,e){let s=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(o=>{let n=o,i=n.dataset.tokenValue,a=s.getPropertyValue(`${e}${i}`).trim(),l=document.createElement("input");l.type=t==="color"&&/^#[0-9a-f]{3,8}$/i.test(a)?"color":"text",l.value=a||"",l.className="ts-edit",l.setAttribute("data-token",i||""),l.setAttribute("aria-label",`${i} value`),l.style.cssText=`font-family:var(--font-mono,monospace);font-size:0.625rem;padding:0.125rem 0.25rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);inline-size:${t==="color"?"3rem":"100%"};${t==="color"?"block-size:1.5rem;padding:0;":"max-inline-size:8rem;"}`,n.replaceWith(l),this.listen(l,"change",()=>this.#s(l,e)),this.listen(l,"keydown",c=>{c.key==="Enter"&&this.#s(l,e)})})}#s(t,e){let s=t.getAttribute("data-token"),o=t.value.trim();if(!s||!o)return;let n=this.#r(),i=`${e}${s}`;n&&n.style.setProperty(i,o),this.dispatchEvent(new CustomEvent("token-specimen:change",{bubbles:!0,detail:{name:s,value:o,token:i,target:this.getAttribute("target")||":root"}}))}#r(){let t=this.getAttribute("target")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}#o(t,e,s){let o=getComputedStyle(this);this.querySelectorAll("[data-token-value]").forEach(n=>{let i=n,a=i.dataset.tokenValue,l=o.getPropertyValue(`${e}${a}`).trim();if(t==="radius"||t==="size"){let c=this.querySelector(`[data-token-sample="${a}"]`);if(c){let p=t==="radius"?"borderRadius":"width",d=t==="size"?c.getBoundingClientRect().width:null;i.textContent=d!=null?`${Math.round(d*100)/100}px`:l||"\u2014"}}else i.textContent=l||"\u2014"})}};function Ot(r,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let o of r)s+=`<div role="listitem" style="text-align:center">
|
|
37
|
-
<div style="width:7rem;height:5rem;background:var(--color-surface,#fff);border-radius:var(--radius-m,0.5rem);box-shadow:var(${t}${o})" aria-hidden="true"></div>
|
|
38
|
-
<p style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);margin-block-start:0.5rem">${o}</p>
|
|
39
|
-
${e?`<p data-token-value="${o}" style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#999);max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></p>`:""}
|
|
40
|
-
</div>`;return s+="</div>",s}function qt(r,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem;align-items:end">';for(let o of r)s+=`<div role="listitem" style="text-align:center">
|
|
41
|
-
<div data-token-sample="${o}" style="width:4.5rem;height:4.5rem;background:var(--color-primary,oklch(55% 0.2 260));border-radius:var(${t}${o});display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-family:var(--font-mono,monospace)" aria-hidden="true">${o}</div>
|
|
42
|
-
${e?`<p data-token-value="${o}" style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#999);margin-block-start:0.25rem"></p>`:""}
|
|
43
|
-
</div>`;return s+="</div>",s}function Bt(r,t,e){let s='<div role="list" style="display:flex;flex-direction:column;gap:0.75rem">';for(let o of r)s+=`<div role="listitem" style="display:grid;grid-template-columns:4rem 1fr auto;align-items:center;gap:0.75rem">
|
|
44
|
-
<span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${o}</span>
|
|
45
|
-
<div style="border-block-start:var(${t}${o}) solid var(--color-text,#333);min-inline-size:4rem" aria-hidden="true"></div>
|
|
46
|
-
${e?`<span data-token-value="${o}" style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);font-variant-numeric:tabular-nums"></span>`:""}
|
|
47
|
-
</div>`;return s+="</div>",s}function Rt(r,t,e){let s='<div role="list" style="display:flex;flex-wrap:wrap;gap:0.75rem">';for(let o of r)s+=`<div role="listitem" style="text-align:center">
|
|
48
|
-
<div style="width:4rem;height:3rem;background:var(${t}${o});border-radius:var(--radius-s,0.25rem);border:1px solid var(--color-border,#ddd)" aria-hidden="true"></div>
|
|
49
|
-
<p style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#666);margin-block-start:0.25rem">${o}</p>
|
|
50
|
-
${e?`<p data-token-value="${o}" style="font-family:var(--font-mono,monospace);font-size:0.5625rem;color:var(--color-text-muted,#999);max-width:4rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></p>`:""}
|
|
51
|
-
</div>`;return s+="</div>",s}function Ft(r,t,e){let s='<div role="list" style="display:flex;flex-direction:column;gap:0.25rem">';for(let o of r)s+=`<div role="listitem" style="display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:0.75rem;min-block-size:1.75rem">
|
|
52
|
-
<span style="font-family:var(--font-mono,monospace);font-size:0.875rem;color:var(--color-text-muted,#666);text-align:end">${o}</span>
|
|
53
|
-
<div data-token-sample="${o}" style="display:block;block-size:var(--size-m,1rem);min-inline-size:2px;inline-size:var(${t}${o});background:var(--color-interactive,oklch(55% 0.2 260));border-radius:var(--radius-s,0.25rem)" aria-hidden="true"></div>
|
|
54
|
-
${e?`<span data-token-value="${o}" style="font-family:var(--font-mono,monospace);font-size:0.75rem;color:var(--color-text-muted,#666);font-variant-numeric:tabular-nums;min-inline-size:3.5rem;text-align:end"></span>`:""}
|
|
55
|
-
</div>`;return s+="</div>",s}function Dt(r,t,e,s){let o=s?.getAttribute("size")||"md",n=s?.getAttribute("icon-set")||"",i=n?` set="${n}"`:"",a='<div role="list" style="display:flex;flex-wrap:wrap;gap:1rem">';for(let l of r)a+=`<div role="listitem" style="display:flex;flex-direction:column;align-items:center;gap:0.375rem;min-inline-size:4.5rem">
|
|
56
|
-
<span style="display:inline-flex;align-items:center;justify-content:center;padding:var(--size-s,0.75rem);background:var(--color-surface-raised,#f5f5f5);border-radius:var(--radius-s,0.25rem);border:1px solid var(--color-border,#ddd);color:var(--color-text,#222)">
|
|
57
|
-
<icon-wc name="${l}" size="${o}"${i}></icon-wc>
|
|
58
|
-
</span>
|
|
59
|
-
${e?`<code style="font-family:var(--font-mono,monospace);font-size:0.625rem;color:var(--color-text-muted,#666);max-inline-size:5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${l}</code>`:""}
|
|
60
|
-
</div>`;return a+="</div>",a}h("token-specimen",D);var jt={button:()=>`
|
|
61
|
-
<layout-cluster data-layout-gap="s">
|
|
62
|
-
<button>Primary</button>
|
|
63
|
-
<button class="secondary">Secondary</button>
|
|
64
|
-
<button disabled>Disabled</button>
|
|
65
|
-
</layout-cluster>`,input:()=>`
|
|
66
|
-
<layout-stack data-layout-gap="xs">
|
|
67
|
-
<input type="text" placeholder="Text input" aria-label="Sample text input"/>
|
|
68
|
-
<input type="email" placeholder="email@example.com" aria-label="Sample email"/>
|
|
69
|
-
<input type="text" value="Read only" readonly aria-label="Read-only input"/>
|
|
70
|
-
</layout-stack>`,select:()=>`
|
|
71
|
-
<select aria-label="Sample select">
|
|
72
|
-
<option>Choose an option</option>
|
|
73
|
-
<option>Option A</option>
|
|
74
|
-
<option>Option B</option>
|
|
75
|
-
<option>Option C</option>
|
|
76
|
-
</select>`,checkbox:()=>`
|
|
77
|
-
<layout-stack data-layout-gap="xs">
|
|
78
|
-
<label><input type="checkbox" checked="checked"/> Checked option</label>
|
|
79
|
-
<label><input type="checkbox"/> Unchecked option</label>
|
|
80
|
-
<label><input type="checkbox" disabled/> Disabled option</label>
|
|
81
|
-
</layout-stack>`,radio:()=>`
|
|
82
|
-
<layout-stack data-layout-gap="xs">
|
|
83
|
-
<label><input type="radio" name="sampler-radio" checked="checked"/> Selected</label>
|
|
84
|
-
<label><input type="radio" name="sampler-radio"/> Unselected</label>
|
|
85
|
-
<label><input type="radio" name="sampler-radio" disabled/> Disabled</label>
|
|
86
|
-
</layout-stack>`,badge:()=>`
|
|
87
|
-
<layout-cluster data-layout-gap="xs">
|
|
88
|
-
<layout-badge>Default</layout-badge>
|
|
89
|
-
<layout-badge data-color="success">Success</layout-badge>
|
|
90
|
-
<layout-badge data-color="warning">Warning</layout-badge>
|
|
91
|
-
<layout-badge data-color="danger">Danger</layout-badge>
|
|
92
|
-
<layout-badge data-color="info">Info</layout-badge>
|
|
93
|
-
</layout-cluster>`,progress:()=>`
|
|
94
|
-
<layout-stack data-layout-gap="xs">
|
|
95
|
-
<progress value="33" max="100">33%</progress>
|
|
96
|
-
<progress value="66" max="100">66%</progress>
|
|
97
|
-
<progress value="100" max="100">100%</progress>
|
|
98
|
-
</layout-stack>`,range:()=>`
|
|
99
|
-
<input type="range" min="0" max="100" value="50" aria-label="Sample range"/>`,textarea:()=>`
|
|
100
|
-
<textarea rows="3" placeholder="Textarea sample" aria-label="Sample textarea" style="width:100%"></textarea>`},j=class extends m{static observedAttributes=["components","label","compact"];setup(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}#t(){let t=this.getAttribute("components")||"button,input,select,checkbox,radio,badge,progress",e=this.getAttribute("label")||"",s=this.hasAttribute("compact"),o=t.split(",").map(a=>a.trim()),n=s?"0.75rem":"1.25rem",i="";e&&(i+=`<p style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#666);margin-block-end:0.75rem;font-family:var(--font-sans,system-ui)">${e}</p>`),i+=`<section style="display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:${n}">`;for(let a of o){let l=jt[a];l&&(i+=`<article style="border:1px solid var(--color-border,#ddd);border-radius:var(--radius-m,0.5rem);padding:var(--size-m,1rem);background:var(--color-surface,#fff)">
|
|
101
|
-
<p style="font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-text-muted,#999);margin-block-end:var(--size-s,0.5rem);font-family:var(--font-sans,system-ui)">${a}</p>
|
|
102
|
-
${l()}
|
|
103
|
-
</article>`)}i+="</section>",this.innerHTML=i}};h("component-sampler",j);function It(r,t,e){t/=100,e/=100;let s=i=>(i+r/30)%12,o=t*Math.min(e,1-e),n=i=>e-o*Math.max(-1,Math.min(s(i)-3,9-s(i),1));return{r:Math.round(n(0)*255),g:Math.round(n(8)*255),b:Math.round(n(4)*255)}}function Vt(r,t,e){r/=255,t/=255,e/=255;let s=Math.max(r,t,e),o=Math.min(r,t,e),n=(s+o)/2,i=0,a=0;if(s!==o){let l=s-o;switch(a=n>.5?l/(2-s-o):l/(s+o),s){case r:i=((t-e)/l+(t<e?6:0))/6;break;case t:i=((e-r)/l+2)/6;break;case e:i=((r-t)/l+4)/6;break}}return{h:Math.round(i*360),s:Math.round(a*100),l:Math.round(n*100)}}function C(r){r=r.replace(/^#/,""),r.length===3&&(r=r[0]+r[0]+r[1]+r[1]+r[2]+r[2]);let t=parseInt(r,16);return{r:t>>16&255,g:t>>8&255,b:t&255}}function T(r,t,e){return"#"+[r,t,e].map(s=>Math.max(0,Math.min(255,Math.round(s))).toString(16).padStart(2,"0")).join("")}function ct(r){let{r:t,g:e,b:s}=C(r);return Vt(t,e,s)}function f(r,t,e){let{r:s,g:o,b:n}=It(r,t,e);return T(s,o,n)}var I=r=>r<=.04045?r/12.92:Math.pow((r+.055)/1.055,2.4),V=r=>r<=.0031308?12.92*r:1.055*Math.pow(r,1/2.4)-.055,H=r=>r<0?0:r>1?1:r;function A(r){let{r:t,g:e,b:s}=C(r),o=I(t/255),n=I(e/255),i=I(s/255),a=.4122214708*o+.5363325363*n+.0514459929*i,l=.2119034982*o+.6806995451*n+.1073969566*i,c=.0883024619*o+.2817188376*n+.6299787005*i,p=Math.cbrt(a),d=Math.cbrt(l),u=Math.cbrt(c),$=.2104542553*p+.793617785*d-.0040720468*u,b=1.9779984951*p-2.428592205*d+.4505937099*u,y=.0259040371*p+.7827717662*d-.808675766*u,g=Math.sqrt(b*b+y*y),w=Math.atan2(y,b)*180/Math.PI;return w<0&&(w+=360),{l:$,c:g,h:w}}function z(r,t,e){let s=e*Math.PI/180,o=t*Math.cos(s),n=t*Math.sin(s),i=r+.3963377774*o+.2158037573*n,a=r-.1055613458*o-.0638541728*n,l=r-.0894841775*o-1.291485548*n,c=i*i*i,p=a*a*a,d=l*l*l,u=4.0767416621*c-3.3077115913*p+.2309699292*d,$=-1.2684380046*c+2.6097574011*p-.3413193965*d,b=-.0041960863*c-.7034186147*p+1.707614701*d,y=H(V(u)),g=H(V($)),w=H(V(b));return T(Math.round(y*255),Math.round(g*255),Math.round(w*255))}function U(r,t){if(!r)return null;let e=String(r).trim();if(/^#[0-9a-f]{6}$/i.test(e))return e.toLowerCase();if(/^#[0-9a-f]{3}$/i.test(e))return("#"+e.slice(1).split("").map(i=>i+i).join("")).toLowerCase();if(typeof document>"u")return null;let s=t||document.createElement("span");t||(s.style.display="none",document.body.appendChild(s)),s.style.color="",s.style.color=e;let o=getComputedStyle(s).color;t||s.remove();let n=o.match(/rgba?\(\s*([0-9.]+)[\s,]+([0-9.]+)[\s,]+([0-9.]+)/);return n?T(Math.round(+n[1]),Math.round(+n[2]),Math.round(+n[3])):null}function ut({l:r,c:t,h:e}){return`oklch(${(r*100).toFixed(1)}% ${t.toFixed(3)} ${e.toFixed(1)})`}function _(r){let{r:t,g:e,b:s}=C(r),o=n=>{let i=n/255;return i<=.03928?i/12.92:Math.pow((i+.055)/1.055,2.4)};return .2126*o(t)+.7152*o(e)+.0722*o(s)}function pt(r,t){let e=_(r),s=_(t),o=Math.max(e,s),n=Math.min(e,s);return(o+.05)/(n+.05)}function dt(r){return r>=7?"AAA":r>=4.5?"AA":"Fail"}function P(r){return _(r)>.4?"#000000":"#ffffff"}var v=r=>(r%360+360)%360;function Ht(r,t,e){return{colors:[f(r,t,e),f(v(r+180),t,e)],names:["Base","Complement"]}}function _t(r,t,e){return{colors:[f(v(r-30),t,e),f(r,t,e),f(v(r+30),t,e)],names:["Analog A","Base","Analog B"]}}function Ut(r,t,e){return{colors:[f(r,t,e),f(v(r+120),t,e),f(v(r+240),t,e)],names:["Base","Triad A","Triad B"]}}function Pt(r,t,e){return{colors:[f(r,t,e),f(v(r+150),t,e),f(v(r+210),t,e)],names:["Base","Split A","Split B"]}}function Wt(r,t,e){return{colors:[f(r,t,e),f(v(r+90),t,e),f(v(r+180),t,e),f(v(r+270),t,e)],names:["Base","Tetrad A","Tetrad B","Tetrad C"]}}var Jt=[{label:"50",l:96},{label:"100",l:90},{label:"200",l:80},{label:"300",l:70},{label:"400",l:60},{label:"500",l:50},{label:"600",l:40},{label:"700",l:30},{label:"800",l:22},{label:"900",l:15},{label:"950",l:10}];function Xt(r,t,e){let s=[],o=[];for(let n of Jt){let i=n.l>85||n.l<20?Math.max(t*.6,5):t;s.push(f(r,Math.round(i),n.l)),o.push(n.label)}return{colors:s,names:o}}var mt={complementary:Ht,analogous:_t,triadic:Ut,"split-complementary":Pt,tetradic:Wt,monochromatic:Xt};function ft(r,t){let{h:e,s,l:o}=ct(r);return(mt[t]||mt.complementary)(e,s,o)}var M=["primary","secondary","accent"],gt=["success","warning","error","info"],Gt=[...M,...gt],ht={primary:"Primary",secondary:"Secondary",accent:"Accent",success:"Success",warning:"Warning",error:"Error",info:"Info"},Yt={aaa:{bg:"oklch(92% 0.08 145)",fg:"oklch(30% 0.12 145)"},aa:{bg:"oklch(94% 0.08 90)",fg:"oklch(35% 0.12 70)"},fail:{bg:"oklch(92% 0.08 25)",fg:"oklch(35% 0.15 25)"}},W="var(--font-mono, monospace)",J="var(--color-text-muted, #666)",X="var(--color-border, #ddd)",bt="var(--color-surface, #fff)",Kt="var(--color-text, #222)",S="var(--radius-s, 0.25rem)",Qt="var(--radius-m, 0.5rem)",G=class extends m{static observedAttributes=["colors","roles","show-export","label"];#t=[];#e=[];#s=null;#r=null;#o=null;setup(){this.#o=document.createElement("span"),this.#o.style.cssText="position:absolute;visibility:hidden;pointer-events:none",this.append(this.#o),this.#s=this.querySelector("color-palette, palette-generator"),this.#a(),this.#n(),this.#c(),this.#l("init"),this.#x(),this.#m(),this.#d("init")}attributeChangedCallback(t){!this.isConnected||!this.hasAttribute("data-upgraded")||(t==="roles"&&this.#a(),t==="colors"&&this.#n(),this.#c(),this.#l("attribute"),this.#m(),this.#d("attribute"))}teardown(){this.#o?.remove(),this.#o=null}#n(){let t=this.querySelector("color-palette");if(t){if(typeof t.colors<"u"&&t.colors.length){this.#t=t.colors.slice();return}let n=(t.getAttribute("colors")||"").split(",").map(i=>i.trim()).filter(Boolean);if(n.length){this.#t=n;return}}let e=this.querySelector("palette-generator");if(e){let o=e.getAttribute("seed")||e.querySelector('input[type="color"]')?.value||"",n=e.getAttribute("harmony")||"complementary";if(o)try{let{colors:i}=ft(o,n);this.#t=i.slice();return}catch{}}let s=this.getAttribute("colors")||"";this.#t=s.split(",").map(o=>o.trim()).filter(Boolean)}#a(){let e=(this.getAttribute("roles")||M.join(",")).split(",").map(s=>s.trim().toLowerCase()).filter(s=>Gt.includes(s));this.#e=e.length?e:[...M]}#i(){let t={};for(let e=0;e<this.#e.length;e++)t[this.#e[e]]=this.#t[e]||this.#t[this.#t.length-1]||"#888888";return t}#c(){let t=this.querySelector(":scope > .sp-shell");t&&t.remove();let e=this.getAttribute("label"),s=this.hasAttribute("show-export"),o=document.createElement("div");if(o.className="sp-shell",o.style.cssText="display:flex;flex-direction:column;gap:var(--size-m,1rem);margin-block-start:var(--size-s,0.75rem)",e){let i=document.createElement("p");i.style.cssText="font-weight:600;margin:0",i.textContent=e,o.append(i)}let n=document.createElement("section");n.className="sp-previews",n.setAttribute("aria-label","Role previews"),n.style.cssText="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(22rem,100%),1fr));gap:var(--size-m,1rem)",o.append(n),this.#r=n,s&&o.insertAdjacentHTML("beforeend",this.#v()),this.append(o)}#l(t){if(!this.#r)return;let e=this.#i();this.#r.innerHTML=this.#e.map(s=>this.#b(s,e[s])).join("")}#b(t,e){let s=ht[t]||t,n=gt.includes(t)?this.#y(t,e):this.#g(t,e),i=`display:flex;flex-direction:column;gap:var(--size-s,0.75rem);padding:var(--size-m,1rem);border:1px solid ${X};border-radius:${Qt};background:${bt};min-inline-size:0`;return`<article class="sp-card" data-role="${t}" aria-label="${s} role preview" style="${i}">
|
|
104
|
-
<header style="display:flex;align-items:center;justify-content:space-between;gap:var(--size-s,0.75rem)">
|
|
105
|
-
<div>
|
|
106
|
-
<code style="font-family:${W};font-size:var(--font-size-sm,0.875rem);font-weight:600">${t}</code>
|
|
107
|
-
<span style="display:block;font-size:var(--font-size-xs,0.75rem);color:${J}">${s}</span>
|
|
108
|
-
</div>
|
|
109
|
-
<div style="display:flex;align-items:center;gap:0.5rem">
|
|
110
|
-
<span class="sp-swatch" style="display:inline-block;inline-size:1.75rem;block-size:1.75rem;border-radius:${S};border:1px solid oklch(0% 0 0 / 0.15);background:${e}"></span>
|
|
111
|
-
<code style="font-family:${W};font-size:var(--font-size-xs,0.75rem);color:${J}">${e}</code>
|
|
112
|
-
</div>
|
|
113
|
-
</header>
|
|
114
|
-
<div class="sp-samples" style="display:flex;flex-wrap:wrap;gap:var(--size-s,0.75rem);align-items:flex-start">${n}</div>
|
|
115
|
-
</article>`}#g(t,e){let s=this.#$(t,e),o=this.#f(),n=this.#k(t,e),i=this.#A(e);return[this.#u({render:`<button type="button" tabindex="-1" style="all:unset;display:inline-block;padding:0.375rem 0.875rem;border-radius:${S};background:${e};color:${s};font-family:inherit;font-size:var(--font-size-sm,0.875rem);font-weight:600;cursor:default">Button</button>`,fg:s,bg:e,caption:"On role"}),this.#u({render:`<span style="color:${e};background:${o};padding:0.25rem 0.5rem;border-radius:${S};font-size:var(--font-size-sm,0.875rem);font-weight:500;text-decoration:underline">Linked text</span>`,fg:e,bg:o||"#ffffff",caption:"On surface"}),this.#u({render:`<span style="display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;background:${n};color:${i};font-size:var(--font-size-xs,0.75rem);font-weight:600;letter-spacing:0.04em;text-transform:uppercase">Badge</span>`,fg:i,bg:n,caption:"Subtle"})].join("")}#y(t,e){let s=this.#f(),o=this.#w(t,e),n=this.#S(t,e),i=P(e);return[this.#u({render:`<div style="display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:${S};background:${o};color:${n};border:1px solid ${e};font-size:var(--font-size-sm,0.875rem);max-inline-size:100%">
|
|
116
|
-
<span style="display:inline-block;inline-size:0.5rem;block-size:0.5rem;border-radius:50%;background:${e};flex-shrink:0"></span>
|
|
117
|
-
<span><strong>${ht[t]||t}</strong> \u2014 message text</span>
|
|
118
|
-
</div>`,fg:n,bg:o,caption:"Alert"}),this.#u({render:`<span style="display:inline-block;padding:0.125rem 0.5rem;border-radius:999px;background:${e};color:${i};font-size:var(--font-size-xs,0.75rem);font-weight:700;letter-spacing:0.04em;text-transform:uppercase">${t}</span>`,fg:i,bg:e,caption:"Badge"}),this.#u({render:`<span style="color:${e};background:${s};padding:0.25rem 0.5rem;border-radius:${S};font-size:var(--font-size-sm,0.875rem);font-weight:600">Inline status</span>`,fg:e,bg:s||"#ffffff",caption:"On surface"})].join("")}#u({render:t,fg:e,bg:s,caption:o}){let n=U(e,this.#o||void 0)||"#000000",i=U(s,this.#o||void 0)||"#ffffff",a=pt(n,i),l=dt(a).toLowerCase(),c=Yt[l],p=`display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.375rem;border-radius:${S};font-family:${W};font-size:var(--font-size-xs,0.75rem);background:${c.bg};color:${c.fg}`;return`<div style="display:flex;flex-direction:column;gap:0.25rem;align-items:flex-start;min-inline-size:0;max-inline-size:100%">
|
|
119
|
-
<div style="max-inline-size:100%">${t}</div>
|
|
120
|
-
<div style="display:flex;align-items:center;gap:0.375rem;font-size:var(--font-size-xs,0.75rem);color:${J}">
|
|
121
|
-
<span style="${p}" title="${o}: ${a.toFixed(2)}:1">${a.toFixed(2)} <small>${l.toUpperCase()}</small></span>
|
|
122
|
-
<span>${o}</span>
|
|
123
|
-
</div>
|
|
124
|
-
</div>`}#v(){let t=`display:flex;gap:var(--size-2xs,0.375rem);padding-block-start:var(--size-xs,0.5rem);border-block-start:1px solid ${X}`,e=`padding:0.375rem 0.875rem;border:1px solid ${X};border-radius:${S};background:${bt};color:${Kt};cursor:pointer;font:inherit;font-size:var(--font-size-sm,0.875rem)`;return`<div class="sp-export" role="toolbar" aria-label="Export semantic palette" style="${t}">
|
|
125
|
-
<button type="button" class="sp-copy-css" style="${e}">Copy Theme CSS</button>
|
|
126
|
-
<button type="button" class="sp-copy-json" style="${e}">Copy JSON</button>
|
|
127
|
-
</div>`}#x(){let t=this.querySelector("color-palette");t&&this.listen(t,"color-palette:change",()=>{this.#n(),this.#l("palette"),this.#d("palette")});let e=this.querySelector("palette-generator");e&&this.listen(e,"palette-generator:generate",()=>{this.#n(),this.#l("palette"),this.#d("palette")})}#m(){let t=this.querySelector(".sp-copy-css"),e=this.querySelector(".sp-copy-json");t&&this.listen(t,"click",()=>{k(this.#h(),{button:t,announceMessage:"Theme CSS copied"})}),e&&this.listen(e,"click",()=>{k(JSON.stringify(this.#i(),null,2),{button:e,announceMessage:"JSON copied"})})}#p(){return getComputedStyle(this)}#f(){return this.#p().getPropertyValue("--color-surface").trim()||"#ffffff"}#$(t,e){return this.#p().getPropertyValue(`--color-text-on-${t}`).trim()||P(e)}#k(t,e){let s=this.#p().getPropertyValue(`--color-${t}-subtle`).trim();if(s)return s;let{h:o}=A(e);return z(.95,.03,o)}#w(t,e){let s=this.#p().getPropertyValue(`--color-${t}-subtle`).trim();if(s)return s;let{h:o}=A(e);return z(.94,.05,o)}#S(t,e){let s=this.#p().getPropertyValue(`--color-${t}-text`).trim();if(s)return s;let{h:o}=A(e);return z(.3,.14,o)}#A(t){let{l:e,c:s,h:o}=A(t);return z(Math.max(.2,e-.25),s,o)}#h(){let t=this.#i(),e=[],s=[];for(let n of this.#e){let i=t[n];if(!i)continue;let{l:a,c:l,h:c}=A(i);M.includes(n)?e.push(` --hue-${n}: ${c.toFixed(1)};`,` --lightness-${n}: ${(a*100).toFixed(1)}%;`,` --chroma-${n}: ${l.toFixed(3)};`):s.push(` --color-${n}: ${ut({l:a,c:l,h:c})};`)}let o=[];return e.length&&o.push(" /* Brand seeds */",...e),s.length&&(e.length&&o.push(""),o.push(" /* Status colors */",...s)),`:root {
|
|
128
|
-
${o.join(`
|
|
129
|
-
`)}
|
|
130
|
-
}
|
|
131
|
-
`}#d(t){this.dispatchEvent(new CustomEvent("semantic-palette:change",{bubbles:!0,detail:{mapping:this.#i(),tokens:this.#h(),source:t}}))}};h("semantic-palette",G);var Zt="1,2,3,4,5,in-1,in-2,in-3,out-1,out-2,out-3,out-4,out-5,elastic-1,elastic-2,squish-1,squish-2",te="instant,fast,normal,slow,slower",yt="ms-keyframes",ee=`
|
|
132
|
-
@keyframes ms-slide { from { inset-inline-start: 0 } to { inset-inline-start: calc(100% - 1rem) } }
|
|
133
|
-
@keyframes ms-fill { 0% { transform: scaleX(0) } 60% { transform: scaleX(1) } 100% { transform: scaleX(1); opacity: 0.3 } }
|
|
134
|
-
@media (prefers-reduced-motion: reduce) {
|
|
135
|
-
motion-specimen .ms-dot { animation: none !important; inset-inline-start: calc(50% - 0.5rem) !important }
|
|
136
|
-
motion-specimen .ms-bar-fill { animation: none !important; transform: scaleX(0.6) !important; opacity: 0.6 !important }
|
|
137
|
-
}
|
|
138
|
-
`;function se(){if(typeof document>"u"||document.getElementById(yt))return;let r=document.createElement("style");r.id=yt,r.textContent=ee,document.head.append(r)}var vt="var(--font-mono, monospace)",xt="var(--color-text-muted, #666)",$t="var(--color-interactive, oklch(55% 0.2 260))",kt="var(--color-surface-sunken, #f1f1f1)",Y=class extends m{static observedAttributes=["type","tokens","prefix","duration","show-values","label"];setup(){se(),this.#t()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&this.#t()}#t(){let t=this.getAttribute("type")||"easing",e=this.getAttribute("duration")||"1.2s",s=this.getAttribute("show-values")!=="false",o=this.getAttribute("label")||"",n="";o&&(n+=`<p style="font-weight:600;margin:0 0 var(--size-s,0.75rem)">${o}</p>`),(t==="easing"||t==="both")&&(n+=this.#n(e,s)),(t==="duration"||t==="both")&&(t==="both"&&(n+='<div aria-hidden="true" style="block-size:var(--size-m,1rem)"></div>'),n+=this.#a(s)),this.innerHTML=n,s&&requestAnimationFrame(()=>this.#i())}#e(){return"display:grid;grid-template-columns:5rem 1fr auto;align-items:center;gap:var(--size-s,0.75rem);min-block-size:1.75rem"}#s(){return`font-family:${vt};font-size:var(--font-size-sm,0.875rem);color:${xt};text-align:end`}#r(){return`font-family:${vt};font-size:var(--font-size-xs,0.75rem);color:${xt};font-variant-numeric:tabular-nums;white-space:nowrap`}#o(){return"list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--size-2xs,0.375rem)"}#n(t,e){let s=(this.getAttribute("tokens")||Zt).split(",").map(l=>l.trim()),o=this.getAttribute("prefix")||"--ease-",n=`position:relative;display:block;block-size:0.5rem;background:${kt};border-radius:999px`,i=`position:absolute;inset-block-start:50%;inset-inline-start:0;inline-size:1rem;block-size:1rem;background:${$t};border-radius:50%;transform:translateY(-50%)`,a=s.map(l=>{let c=`${o}${l}`;return`<li class="ms-row ms-row-ease" role="listitem" style="${this.#e()}">
|
|
139
|
-
<span style="${this.#s()}">${l}</span>
|
|
140
|
-
<span style="${n}" aria-hidden="true">
|
|
141
|
-
<span class="ms-dot" style="${i};animation: ms-slide ${t} var(${c}) infinite alternate"></span>
|
|
142
|
-
</span>
|
|
143
|
-
${e?`<span class="ms-value" data-var="${c}" style="${this.#r()}"></span>`:""}
|
|
144
|
-
</li>`}).join("");return`<ul class="ms-list" role="list" aria-label="Easing scale" style="${this.#o()}">${a}</ul>`}#a(t){let e=(this.getAttribute("tokens")||te).split(",").map(a=>a.trim()),s=this.getAttribute("prefix")||"--duration-",o=`position:relative;display:block;block-size:0.5rem;background:${kt};border-radius:999px;overflow:hidden`,n=`position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;background:${$t};transform-origin:left center;animation-name:ms-fill;animation-iteration-count:infinite;animation-timing-function:linear`,i=e.map(a=>{let l=`${s}${a}`;return`<li class="ms-row ms-row-dur" role="listitem" style="${this.#e()}">
|
|
145
|
-
<span style="${this.#s()}">${a}</span>
|
|
146
|
-
<span style="${o}" aria-hidden="true">
|
|
147
|
-
<span class="ms-bar-fill" style="${n};animation-duration: var(${l})"></span>
|
|
148
|
-
</span>
|
|
149
|
-
${t?`<span class="ms-value" data-var="${l}" style="${this.#r()}"></span>`:""}
|
|
150
|
-
</li>`}).join("");return`<ul class="ms-list" role="list" aria-label="Duration scale" style="${this.#o()}">${i}</ul>`}#i(){this.querySelectorAll(".ms-value").forEach(t=>{let e=t.getAttribute("data-var");if(!e)return;let s=getComputedStyle(this).getPropertyValue(e).trim();t.textContent=s||"\u2014"})}};h("motion-specimen",Y);var x="com.vanilla-breeze",oe="2025.10";function wt(r,t={}){let e={},s=[],o=!1;for(let[i,a]of r){let l=String(a).trim(),c=re(i);if(!c){s.push(i);continue}c.path[0]==="color"&&c.path[1]==="seeds"&&(o=!0);let p=ne(i,l,c);ye(e,c.path,c.name,p)}let n={spec:oe};return t.vbVersion&&(n.vbVersion=t.vbVersion),o&&(n.seedDerivation=!0),s.length&&(n.unmapped=s),e.$extensions={[x]:n},e}function re(r){let t=[{p:"--hue-",path:["color","seeds"],type:"number",keep:!0},{p:"--lightness-",path:["color","seeds"],type:"number",keep:!0},{p:"--chroma-",path:["color","seeds"],type:"number",keep:!0},{p:"--color-",path:["color"],type:"color"},{p:"--font-size-",path:["typography","size"],type:"dimension"},{p:"--font-weight-",path:["typography","weight"],type:"fontWeight"},{p:"--font-",path:["typography","family"],type:"fontFamily"},{p:"--line-height-",path:["typography","lineHeight"],type:"number"},{p:"--letter-spacing-",path:["typography","letterSpacing"],type:"dimension"},{p:"--size-",path:["spacing"],type:"dimension"},{p:"--radius-",path:["border","radius"],type:"dimension"},{p:"--border-width-",path:["border","width"],type:"dimension"},{p:"--duration-",path:["motion","duration"],type:"duration"},{p:"--ease-",path:["motion","easing"],type:"cubicBezier"},{p:"--shadow-",path:["effect","shadow"],type:"shadow"}];for(let{p:e,path:s,type:o,keep:n}of t)if(r.startsWith(e)){let i=n?r.slice(2):r.slice(e.length);return{path:s,type:o,name:i}}return null}function ne(r,t,e){switch(e.type){case"color":return ie(t);case"fontFamily":return{$type:"fontFamily",$value:pe(t)};case"fontWeight":return{$type:"fontWeight",$value:Z(t)};case"number":return ce(t);case"dimension":return ue(t);case"duration":return{$type:"duration",$value:de(t)};case"cubicBezier":return me(t);case"shadow":return fe(t);default:return{$value:t}}}function ie(r){let t=ge(r);if(t)return{$root:{$type:"color",$value:E(t.light)??K(t.light)},light:{$type:"color",$value:E(t.light)??K(t.light)},dark:{$type:"color",$value:E(t.dark)??K(t.dark)},$extensions:{[x]:{lightDark:r}}};if(/\bfrom\b/.test(r)&&/^oklch\(/i.test(r))return{$type:"color",$value:{colorSpace:"srgb",components:[0,0,0]},$extensions:{[x]:{expression:r}}};let e=E(r);return e?{$type:"color",$value:e}:{$type:"color",$value:{colorSpace:"srgb",components:[0,0,0]},$extensions:{[x]:{literal:r}}}}function K(r){return{colorSpace:"srgb",components:[0,0,0],$vbLiteral:r}}function E(r){let t=String(r).trim(),e=t.match(/^oklch\(\s*([^)]+)\)\s*$/i);if(e){let[s,o]=le(e[1]),n=s.trim().split(/\s+/);if(n.length<3)return null;let i=L(n[0]),a=Z(n[1]),l=Z(n[2]);if([i,a,l].some(Number.isNaN))return null;let c={colorSpace:"oklch",components:[ae(n[0],i),a,l]};return o!=null&&(c.alpha=o),c}if(e=t.match(/^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i),e){let s=e[1],o,n,i,a;s.length===3||s.length===4?(o=parseInt(s[0]+s[0],16)/255,n=parseInt(s[1]+s[1],16)/255,i=parseInt(s[2]+s[2],16)/255,s.length===4&&(a=parseInt(s[3]+s[3],16)/255)):(o=parseInt(s.slice(0,2),16)/255,n=parseInt(s.slice(2,4),16)/255,i=parseInt(s.slice(4,6),16)/255,s.length===8&&(a=parseInt(s.slice(6,8),16)/255));let l={colorSpace:"srgb",components:[o,n,i],hex:"#"+(s.length<=4?s.slice(0,3).split("").map(c=>c+c).join(""):s.slice(0,6)).toLowerCase()};return a!=null&&(l.alpha=a),l}if(e=t.match(/^rgba?\(\s*([^)]+)\)\s*$/i),e){let s=e[1].split(/\s*,\s*|\s+/).filter(Boolean);if(s.length<3)return null;let o=Q(s[0]),n=Q(s[1]),i=Q(s[2]),a={colorSpace:"srgb",components:[o,n,i]};return s[3]!=null&&(a.alpha=L(s[3])),a}return null}function ae(r,t){return typeof r=="string"&&r.endsWith("%")?t/100:t}function le(r){let t=r.indexOf("/");if(t<0)return[r,null];let e=r.slice(0,t),s=L(r.slice(t+1).trim());return[e,s]}function Q(r){let t=r.trim();return t.endsWith("%")?parseFloat(t)/100:parseFloat(t)/255}function ce(r){let e={$type:"number",$value:L(r)};return typeof r=="string"&&r.trim().endsWith("%")&&(e.$extensions={[x]:{unit:"%"}}),e}function ue(r){let t=String(r).trim(),e=t.match(/^(-?[\d.]+)(px|rem|em|%)?$/);if(!e)return{$type:"dimension",$value:{value:0,unit:"px"},$extensions:{[x]:{literal:t}}};let s=parseFloat(e[1]),o=e[2]||"px",i={$type:"dimension",$value:{value:s,unit:o==="px"||o==="rem"?o:"rem"}};return o!=="px"&&o!=="rem"&&(i.$extensions={[x]:{unit:o}}),i}function Z(r){return parseFloat(String(r).trim())}function L(r){let t=String(r).trim();return t.endsWith("%"),parseFloat(t)}function pe(r){let t=[],e="",s=null;for(let n of String(r))if(s){if(n===s){s=null;continue}e+=n}else if(n==='"'||n==="'")s=n;else if(n===","){let i=e.trim();i&&t.push(i),e=""}else e+=n;let o=e.trim();return o&&t.push(o),t}function de(r){let t=String(r).trim(),e=t.match(/^(-?[\d.]+)(ms|s)$/);return e?{value:parseFloat(e[1]),unit:e[2]}:{value:parseFloat(t),unit:"ms"}}function me(r){let t=String(r).match(/^cubic-bezier\(\s*([^)]+)\)\s*$/i);if(!t)return{$type:"cubicBezier",$value:[0,0,1,1],$extensions:{[x]:{literal:r}}};let e=t[1].split(",").map(s=>parseFloat(s.trim()));return e.length!==4||e.some(Number.isNaN)?{$type:"cubicBezier",$value:[0,0,1,1],$extensions:{[x]:{literal:r}}}:{$type:"cubicBezier",$value:e}}function fe(r){let e=St(String(r)).map(he);return e.some(s=>s==null)?{$type:"shadow",$value:{offsetX:{value:0,unit:"px"},offsetY:{value:0,unit:"px"},blur:{value:0,unit:"px"},color:{colorSpace:"srgb",components:[0,0,0]}},$extensions:{[x]:{literal:r}}}:e.length===1?{$type:"shadow",$value:e[0]}:{$type:"shadow",$value:e}}function he(r){let t=r.trim(),e=t.match(/(#[0-9a-f]{3,8}|rgba?\([^)]+\)|oklch\([^)]+\))$/i);if(!e)return null;let s=E(e[0]);if(!s)return null;let n=t.slice(0,e.index).trim().split(/\s+/).filter(Boolean);if(n.length<3)return null;let i=l=>be(n[l]),a={offsetX:i(0),offsetY:i(1),blur:i(2),color:s};return n[3]&&(a.spread=i(3)),a}function be(r){let t=r.match(/^(-?[\d.]+)(px|rem|em)?$/);if(!t)return{value:0,unit:"px"};let e=parseFloat(t[1]),s=t[2]||"px";return{value:e,unit:s==="px"||s==="rem"?s:"rem"}}function St(r){let t=[],e="",s=0;for(let o of r)o==="("?s++:o===")"&&s--,o===","&&s===0?(t.push(e),e=""):e+=o;return e.trim()&&t.push(e),t}function ge(r){let t=String(r).match(/^light-dark\(\s*([\s\S]+)\s*\)\s*$/i);if(!t)return null;let e=St(t[1]);return e.length!==2?null:{light:e[0].trim(),dark:e[1].trim()}}function ye(r,t,e,s){let o=r;for(let n of t)(!o[n]||typeof o[n]!="object")&&(o[n]={}),o=o[n];o[e]=s}var ve="--color-,--hue-,--lightness-,--chroma-,--font-,--size-,--radius-,--shadow-,--border-width-,--ease-,--duration-,--line-height-,--letter-spacing-",xe=["type-specimen:change","spacing-specimen:change","token-specimen:change","semantic-palette:change"],tt=class extends m{static observedAttributes=["scope","selector","include","format","label","live"];setup(){this.#o(),this.#n(),this.#a(),this.#c()}attributeChangedCallback(){this.isConnected&&this.hasAttribute("data-upgraded")&&(this.#o(),this.#n(),this.#a(),this.#c())}#t(){let t=this.getAttribute("scope")||":root";try{return t===":root"?document.documentElement:document.querySelector(t)}catch{return document.documentElement}}#e(){return(this.getAttribute("include")||ve).split(",").map(e=>e.trim()).filter(Boolean)}#s(){let t=this.#t();if(!t)return[];let e=this.#e(),s=t.style,o=[];for(let n=0;n<s.length;n++){let i=s.item(n);if(!i.startsWith("--")||!e.some(l=>i.startsWith(l)))continue;let a=s.getPropertyValue(i).trim();a&&o.push([i,a])}return o}#r(t){let e=this.getAttribute("format")||"css";if(e==="json"){let n=Object.fromEntries(t);return JSON.stringify(n,null,2)}if(e==="dtcg"){let n=this.getAttribute("vb-version")||void 0;return JSON.stringify(wt(t,{vbVersion:n}),null,2)}let s=this.getAttribute("selector")||":root";if(!t.length)return`${s} {
|
|
151
|
-
/* No theme overrides detected yet. Edit a specimen to populate. */
|
|
152
|
-
}
|
|
153
|
-
`;let o=t.map(([n,i])=>` ${n}: ${i};`).join(`
|
|
154
|
-
`);return`${s} {
|
|
155
|
-
${o}
|
|
156
|
-
}
|
|
157
|
-
`}#o(){let t=this.getAttribute("label")||"",e=t?`<p style="font-weight:600;margin:0 0 var(--size-xs,0.5rem)">${t}</p>`:"",s="display:flex;gap:var(--size-2xs,0.375rem);margin-block-end:var(--size-xs,0.5rem);align-items:center;flex-wrap:wrap",o="padding:0.375rem 0.75rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);cursor:pointer;font:inherit;font-size:var(--font-size-xs,0.75rem)",n="padding:0.375rem 0.5rem;border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface,#fff);color:var(--color-text,#222);font:inherit;font-size:var(--font-size-xs,0.75rem)",i="inline-size:100%;block-size:16rem;padding:var(--size-s,0.75rem);border:1px solid var(--color-border,#ccc);border-radius:var(--radius-s,0.25rem);background:var(--color-surface-sunken,#f8f8f8);color:var(--color-text,#222);font-family:var(--font-mono,monospace);font-size:var(--font-size-xs,0.75rem);white-space:pre;overflow:auto;tab-size:2;resize:vertical;box-sizing:border-box",a=this.getAttribute("format")||"css";this.innerHTML=`
|
|
158
|
-
${e}
|
|
159
|
-
<div class="te-toolbar" style="${s}">
|
|
160
|
-
<label style="display:flex;gap:var(--size-2xs,0.375rem);align-items:center;font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666)">
|
|
161
|
-
Format
|
|
162
|
-
<select class="te-format" style="${n}" aria-label="Output format">
|
|
163
|
-
<option value="css"${a==="css"?" selected":""}>CSS</option>
|
|
164
|
-
<option value="json"${a==="json"?" selected":""}>JSON</option>
|
|
165
|
-
<option value="dtcg"${a==="dtcg"?" selected":""}>DTCG</option>
|
|
166
|
-
</select>
|
|
167
|
-
</label>
|
|
168
|
-
<button type="button" class="te-refresh" style="${o}" aria-label="Refresh">Refresh</button>
|
|
169
|
-
<button type="button" class="te-copy" style="${o}">Copy</button>
|
|
170
|
-
<button type="button" class="te-download" style="${o}">Download</button>
|
|
171
|
-
<span class="te-count" style="align-self:center;font-size:var(--font-size-xs,0.75rem);color:var(--color-text-muted,#666);margin-inline-start:auto"></span>
|
|
172
|
-
</div>
|
|
173
|
-
<textarea class="te-output" readonly aria-label="Theme output" style="${i}"></textarea>
|
|
174
|
-
`}#n(){let t=this.#s(),e=this.#r(t),s=this.querySelector(".te-output"),o=this.querySelector(".te-count");s&&(s.value=e),o&&(o.textContent=`${t.length} token${t.length===1?"":"s"}`),this.dispatchEvent(new CustomEvent("theme-export:change",{bubbles:!0,detail:{output:e,format:this.getAttribute("format")||"css",tokens:Object.fromEntries(t)}}))}#a(){let t=this.querySelector(".te-refresh"),e=this.querySelector(".te-copy"),s=this.querySelector(".te-download"),o=this.querySelector(".te-format");o&&this.listen(o,"change",()=>{this.setAttribute("format",o.value)}),t&&this.listen(t,"click",()=>this.#n()),e&&this.listen(e,"click",()=>{let n=this.querySelector(".te-output");n&&k(n.value,{button:e,announceMessage:"Theme copied"})}),s&&this.listen(s,"click",()=>this.#i())}#i(){let t=this.querySelector(".te-output");if(!t)return;let e=this.getAttribute("format")||"css",s="css",o="text/css",n="theme.css";e==="json"?(s="json",o="application/json",n="theme.json"):e==="dtcg"&&(s="tokens.json",o="application/design-tokens+json",n="theme.tokens.json");let i=new Blob([t.value],{type:o}),a=URL.createObjectURL(i),l=document.createElement("a");l.href=a,l.download=n,l.click(),URL.revokeObjectURL(a)}#c(){if(this.hasAttribute("live"))for(let t of xe)this.listen(document,t,()=>this.#n())}};h("theme-export",tt);
|
|
175
|
-
//# sourceMappingURL=design-system.full.js.map
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
impact-effort{display:block;container-type:inline-size}impact-effort:not(:defined){display:block}.ie-wrapper{display:flex;align-items:stretch}.ie-y-label{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.7rem;font-weight:600;color:var(--color-text-muted, #666);text-align:center;padding:0 var(--size-xs, 8px);display:flex;align-items:center;justify-content:center;user-select:none}.ie-x-label{font-size:.7rem;font-weight:600;color:var(--color-text-muted, #666);text-align:center;padding:var(--size-xs, 8px) 0;user-select:none}.ie-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;background:var(--color-border, #e0e0e0);border:1px solid var(--color-border, #e0e0e0);border-radius:var(--radius-l, .75rem);overflow:hidden;min-height:24rem;display:grid;flex:1}.ie-quadrant{background:var(--color-surface, #fff);padding:var(--size-m, 16px);display:flex;flex-direction:column;gap:var(--size-xs, 8px)}.ie-quadrant-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #666);margin-bottom:var(--size-xs, 8px)}.ie-quadrant-desc{font-size:.65rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--color-text-muted, #999);display:block}[data-quadrant-zone=quick-wins]{background:color-mix(in oklch,var(--color-success, #22c55e) 6%,var(--color-surface, #fff))}[data-quadrant-zone=big-bets]{background:color-mix(in oklch,var(--color-warning, #f59e0b) 6%,var(--color-surface, #fff))}[data-quadrant-zone=fill-ins]{background:color-mix(in oklch,var(--color-info, #3b82f6) 6%,var(--color-surface, #fff))}[data-quadrant-zone=money-pit]{background:color-mix(in oklch,var(--color-error, #ef4444) 6%,var(--color-surface, #fff))}impact-effort drag-surface{min-block-size:6rem;flex:1}.ie-live-region{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}impact-effort[compact] .ie-grid{min-height:16rem}impact-effort[compact] .ie-quadrant{padding:var(--size-xs, 8px);gap:var(--size-2xs, 4px)}impact-effort[compact] .ie-quadrant-label{font-size:.65rem;margin-bottom:var(--size-2xs, 4px)}impact-effort[compact] .ie-quadrant-desc{font-size:.6rem}impact-effort[compact] drag-surface{min-block-size:4rem}impact-effort[compact] .ie-y-label,impact-effort[compact] .ie-x-label{font-size:.6rem}@container (max-width: 30rem){.ie-grid{grid-template-columns:1fr;grid-template-rows:auto}}@media(prefers-reduced-motion:reduce){impact-effort,impact-effort *{transition:none}}@media print{.ie-grid{border:1px solid #ccc;gap:0;min-height:auto}.ie-quadrant{border:.5pt solid #ccc;break-inside:avoid}impact-effort drag-surface{min-block-size:auto}impact-effort [draggable]{cursor:default}}quadrant-grid:not(:defined){display:block}quadrant-grid{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(quadrant-grid){.qg-wrapper{display:grid;grid-template-columns:max-content max-content 1fr;grid-template-rows:max-content 1fr max-content max-content;grid-template-areas:"y-label . ." "y-scale grid grid" ". x-scale x-scale" ". x-label x-label";gap:var(--size-2xs, .25rem);margin:0}.qg-y-label{grid-area:y-label;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);text-align:start;padding-inline-end:var(--size-xs, .5rem)}.qg-x-label{grid-area:x-label;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);text-align:end}.qg-y-scale{grid-area:y-scale;display:flex;flex-direction:column;justify-content:space-between;padding-block:var(--size-2xs, .25rem);font-family:var(--font-mono, ui-monospace, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);text-align:end;padding-inline-end:var(--size-xs, .5rem);min-inline-size:3rem}.qg-x-scale{grid-area:x-scale;display:flex;justify-content:space-between;font-family:var(--font-mono, ui-monospace, monospace);font-size:var(--font-size-xs, .75rem);color:var(--color-text-muted, #666);padding-block-start:var(--size-2xs, .25rem)}.qg-grid{grid-area:grid;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--size-2xs, .25rem);min-block-size:var(--qg-min-size, 24rem);background:var(--color-border, oklch(85% 0 0));padding:1px;border-radius:var(--radius-m, .5rem)}.qg-quadrant{position:relative;background:var(--color-surface, #fff);padding:var(--size-s, .75rem);display:flex;flex-direction:column;gap:var(--size-xs, .5rem);overflow:hidden}.qg-quadrant[data-quadrant-zone="0"]{grid-row:1;grid-column:2;border-radius:0 var(--radius-m, .5rem) 0 0}.qg-quadrant[data-quadrant-zone="1"]{grid-row:1;grid-column:1;border-radius:var(--radius-m, .5rem) 0 0 0}.qg-quadrant[data-quadrant-zone="2"]{grid-row:2;grid-column:1;border-radius:0 0 0 var(--radius-m, .5rem)}.qg-quadrant[data-quadrant-zone="3"]{grid-row:2;grid-column:2;border-radius:0 0 var(--radius-m, .5rem) 0}.qg-quadrant-label{font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);margin:0}.qg-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--size-2xs, .25rem)}.qg-items>li{background:var(--color-surface-raised, oklch(96% 0 0));padding:var(--size-2xs, .25rem) var(--size-xs, .5rem);border-radius:var(--radius-s, .25rem);font-size:var(--font-size-sm, .875rem)}.qg-pinned{position:absolute;inline-size:max-content;max-inline-size:calc(100% - var(--size-xs, .5rem));padding:var(--size-3xs, .125rem) var(--size-xs, .5rem);background:var(--color-accent, oklch(45% .18 260));color:var(--color-text-on-primary, #fff);border-radius:var(--radius-s, .25rem);font-size:var(--font-size-xs, .75rem);inset-inline-start:clamp(var(--qg-pin-half-w, 1.5rem),calc(var(--qg-local-x, .5) * 100%),calc(100% - var(--qg-pin-half-w, 1.5rem)));inset-block-end:clamp(var(--qg-pin-half-h, .75rem),calc(var(--qg-local-y, .5) * 100%),calc(100% - var(--qg-pin-half-h, .75rem)));transform:translate(calc(-50% + var(--qg-fan-x, 0px)),calc(50% + var(--qg-fan-y, 0px)));box-shadow:0 1px 3px #00000026;filter:hue-rotate(var(--qg-pin-hue, 0deg));transition:transform .18s ease,box-shadow .18s ease,z-index 0s}.qg-quadrant:hover .qg-pinned.qg-clustered,.qg-quadrant:focus-within .qg-pinned.qg-clustered{--qg-fan-angle: calc((var(--qg-cluster-i, 0) / var(--qg-cluster-n, 1)) * 360deg);--qg-fan-radius: calc(var(--qg-pin-half-w, 1.5rem) * 1.4);--qg-fan-x: calc(cos(var(--qg-fan-angle)) * var(--qg-fan-radius));--qg-fan-y: calc(sin(var(--qg-fan-angle)) * var(--qg-fan-radius) * -1)}.qg-pinned.qg-clustered:hover,.qg-pinned.qg-clustered:focus-visible{z-index:2;box-shadow:0 4px 12px #00000040}}@media(prefers-reduced-motion:reduce){quadrant-grid *{transition:none!important}}@media print{quadrant-grid .qg-y-label,quadrant-grid .qg-x-label,quadrant-grid .qg-y-scale,quadrant-grid .qg-x-scale{color:#000}}risk-register:not(:defined){display:block}risk-register{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(risk-register){.rr-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem)}.rr-layout{display:grid;grid-template-columns:1fr;gap:var(--size-l, 1.5rem)}@media(width>=64rem){.rr-layout{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}}}traceability-matrix:not(:defined){display:block}traceability-matrix{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(traceability-matrix){.tm-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem)}.tm-empty{color:var(--color-text-muted, #666);font-style:italic}td[data-linked]{background:#d7f5d78c;text-align:center;font-weight:600;color:var(--color-accent, oklch(45% .18 260))}td:not([data-linked]){color:var(--color-text-muted, #666);text-align:center}th[scope=row]{text-align:start;font-weight:600;background:var(--color-surface-raised, oklch(96% 0 0));white-space:nowrap}tr[data-state-highlighted]{outline:2px solid var(--color-accent, oklch(45% .18 260));outline-offset:-2px}td[data-state-highlighted],th[data-state-highlighted]{background:#9be39db3}tr[data-orphan] th[scope=row]:after,th[data-orphan]:after{content:" \26a0";color:var(--color-warning, oklch(60% .15 60));font-weight:700}td,th{padding:var(--size-2xs, .25rem) var(--size-s, .75rem);border-block-end:var(--border-width-thin, 1px) solid var(--color-border, oklch(85% 0 0));cursor:default}td[data-linked]{cursor:pointer}}[data-state-highlighted]:not(traceability-matrix *){outline:2px solid var(--color-accent, oklch(45% .18 260));outline-offset:2px;scroll-margin-block:var(--size-l, 1.5rem)}@media print{traceability-matrix td[data-state-highlighted],traceability-matrix tr[data-state-highlighted]{outline:none;background:none}}burndown-chart:not(:defined){display:block}burndown-chart{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}@scope(burndown-chart){.bdc-label{display:block;font-size:var(--font-size-xs, .75rem);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);margin-block-end:var(--size-s, .75rem)}chart-wc{display:block;min-block-size:var(--burndown-min-height, 18rem)}.bdc-scope-changes{margin-block-start:var(--size-m, 1rem);padding:var(--size-s, .75rem) var(--size-m, 1rem);background:var(--color-surface-raised, oklch(96% 0 0));border-inline-start:var(--border-width-medium, 3px) solid var(--color-warning, oklch(70% .15 60));border-radius:var(--radius-s, .25rem);font-size:var(--font-size-sm, .875rem)}.bdc-scope-changes h4{margin:0 0 var(--size-2xs, .25rem);font-size:var(--font-size-xs, .75rem);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666)}.bdc-scope-changes ul{margin:0;padding-inline-start:var(--size-m, 1rem)}.bdc-scope-changes li{margin-block:var(--size-3xs, .125rem)}.bdc-scope-changes time{font-family:var(--font-mono, ui-monospace, monospace);color:var(--color-text-muted, #666)}}product-roadmap:not(:defined){display:block}product-roadmap{display:block;font-family:var(--font-sans, system-ui);color:var(--color-text, #1a1a1a)}product-roadmap>section[data-lane]{display:none}@scope(product-roadmap){.rm-wrapper{display:grid;grid-template-columns:minmax(8rem,max-content) 1fr;gap:var(--size-2xs, .25rem)}.rm-axis{grid-column:2;position:relative;block-size:var(--size-l, 1.5rem);border-block-end:var(--border-width-thin, 1px) solid var(--color-border, oklch(85% 0 0));margin-block-end:var(--size-2xs, .25rem)}.rm-tick{position:absolute;inset-block:0;inset-inline-start:calc(var(--rm-x) * 100%);inline-size:calc(var(--rm-w) * 100%);border-inline-end:var(--border-width-thin, 1px) dashed var(--color-border, oklch(85% 0 0));padding-inline:var(--size-2xs, .25rem);font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted, #666);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.rm-lanes{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;gap:var(--size-2xs, .25rem);position:relative}.rm-lane{display:contents}.rm-lane-label{grid-column:1;font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-text, currentColor);padding:var(--size-xs, .5rem) var(--size-s, .75rem);background:var(--color-surface-raised, oklch(96% 0 0));border-radius:var(--radius-s, .25rem);align-self:stretch;display:flex;align-items:center}.rm-track{grid-column:2;position:relative;min-block-size:var(--size-2xl, 3rem);background:repeating-linear-gradient(to right,var(--color-surface, transparent),var(--color-surface, transparent) calc(var(--rm-tick-w, 25%) - 1px),var(--color-border, oklch(85% 0 0 / .4)) calc(var(--rm-tick-w, 25%) - 1px),var(--color-border, oklch(85% 0 0 / .4)) var(--rm-tick-w, 25%));border-radius:var(--radius-s, .25rem)}.rm-bar{position:absolute;inset-block:var(--size-2xs, .25rem);inset-inline-start:calc(var(--rm-x) * 100%);inline-size:calc(var(--rm-w) * 100%);background:var(--color-accent, oklch(45% .18 260));color:var(--color-text-on-primary, #fff);border-radius:var(--radius-s, .25rem);padding:var(--size-2xs, .25rem) var(--size-s, .75rem);font-size:var(--font-size-sm, .875rem);line-height:1.2;overflow:hidden;box-shadow:0 1px 2px #00000026;cursor:grab;user-select:none;display:flex;align-items:center;gap:var(--size-2xs, .25rem)}.rm-bar:active{cursor:grabbing}.rm-bar-title{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.rm-bar-handle{position:absolute;inset-block:0;inset-inline-end:0;inline-size:var(--size-xs, .5rem);background:#ffffff40;cursor:ew-resize;border-start-end-radius:var(--radius-s, .25rem);border-end-end-radius:var(--radius-s, .25rem)}.rm-bar[data-status=planned]{background:var(--color-info, oklch(60% .12 240))}.rm-bar[data-status=in-progress]{background:var(--color-accent, oklch(50% .16 260))}.rm-bar[data-status=at-risk]{background:var(--color-warning, oklch(65% .16 60));color:var(--color-text, #1a1a1a)}.rm-bar[data-status=shipped]{background:var(--color-success, oklch(55% .14 145))}.rm-bar[data-status=blocked]{background:var(--color-danger, oklch(55% .18 25))}.rm-today{position:absolute;inset-block:0;inset-inline-start:calc(var(--rm-x) * 100%);inline-size:0;border-inline-start:var(--border-width-medium, 2px) solid var(--color-warning, oklch(60% .18 60));pointer-events:none;z-index:2;transform:translate(0)}}product-roadmap:not([editable]) .rm-bar{cursor:default}product-roadmap:not([editable]) .rm-bar-handle{display:none}@media(prefers-reduced-motion:reduce){product-roadmap .rm-bar{transition:none}}kanban-board{display:block;container-type:inline-size}kanban-board:not(:defined){display:block}.kb-columns{display:flex;gap:1px;background:var(--color-border, #e0e0e0);border:1px solid var(--color-border, #e0e0e0);border-radius:var(--radius-l, .75rem);overflow:hidden;flex-wrap:wrap}.kb-column{min-inline-size:14rem;flex:1 1 14rem;display:flex;flex-direction:column;background:var(--color-surface, #fff);margin-block:0!important;padding-block-start:0!important;border-block-start:0!important}.kb-column-header{position:sticky;inset-block-start:0;z-index:2;padding:var(--size-s, 12px) var(--size-m, 16px);background:var(--color-surface-raised, #f8f9fa);border-block-end:2px solid var(--color-border, #e0e0e0)}.kb-column-header h3{margin:0;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text, #1a1a1a);display:flex;align-items:center;gap:.25em}.kb-count{font-size:.7rem;font-weight:600;color:var(--color-text-muted, #666);background:var(--color-border, #e0e0e0);border-radius:var(--radius-full, 9999px);padding:1px 8px;margin-inline-start:4px}.kb-wip{font-size:.65rem;font-weight:400;color:var(--color-text-muted, #999)}[data-wip-exceeded] .kb-column-header{border-block-end-color:var(--color-error, #ef4444)}[data-wip-exceeded] .kb-count{background:color-mix(in oklch,var(--color-error, #ef4444) 15%,var(--color-surface, #fff));color:var(--color-error, #ef4444)}[data-column-tint=success]{background:color-mix(in oklch,var(--color-success, #22c55e) 6%,var(--color-surface, #fff))}[data-column-tint=warning]{background:color-mix(in oklch,var(--color-warning, #f59e0b) 6%,var(--color-surface, #fff))}[data-column-tint=error]{background:color-mix(in oklch,var(--color-error, #ef4444) 6%,var(--color-surface, #fff))}[data-column-tint=info]{background:color-mix(in oklch,var(--color-info, #3b82f6) 6%,var(--color-surface, #fff))}[data-column-tint=interactive]{background:color-mix(in oklch,var(--color-interactive, #3b82f6) 6%,var(--color-surface, #fff))}kanban-board drag-surface{padding:var(--size-s, 12px);min-block-size:6rem;flex:1}kanban-board .kb-card{background:var(--color-surface, #fff);border:var(--border-width-thin, 1px) solid var(--color-border, #e0e0e0);border-radius:var(--radius-s, .375rem);padding:var(--size-xs, 8px) var(--size-s, 12px);cursor:grab;font-size:var(--font-size-s, .875rem);line-height:1.4}kanban-board .kb-card:active{cursor:grabbing}.kb-empty{color:var(--color-text-muted, #888);font-size:.8rem;font-style:italic;padding:var(--size-s, 12px);margin:0}.kb-title{margin-block-end:var(--size-s, 12px)}.kb-live-region{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;padding:0;margin:-1px}kanban-board[compact] .kb-column{min-inline-size:11rem;flex:1 1 11rem}kanban-board[compact] .kb-column-header{padding:var(--size-xs, 8px) var(--size-s, 12px)}kanban-board[compact] .kb-column-header h3{font-size:.75rem}kanban-board[compact] drag-surface{padding:var(--size-xs, 8px);min-block-size:4rem}kanban-board[compact] .kb-count{font-size:.6rem}@container (max-width: 30rem){.kb-columns{flex-direction:column}.kb-column{min-inline-size:unset}}@media(prefers-reduced-motion:reduce){kanban-board,kanban-board *{transition:none}}@media print{.kb-columns{flex-wrap:wrap;border:.5pt solid #ccc;gap:0}.kb-column{border:.5pt solid #ccc;break-inside:avoid}.kb-column-header{position:static}kanban-board drag-surface{min-block-size:auto}kanban-board [draggable]{cursor:default}}story-map{display:block;container-type:inline-size}story-map:not(:defined){display:block}.sm-scroll{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch}.sm-columns{display:flex;gap:1px;background:var(--color-border, #e0e0e0);min-inline-size:min-content;border:1px solid var(--color-border, #e0e0e0);border-radius:var(--radius-l, .75rem);overflow:hidden}.sm-column{min-inline-size:14rem;max-inline-size:22rem;flex:1 0 14rem;display:flex;flex-direction:column;background:var(--color-surface, #fff)}.sm-activity-header{position:sticky;inset-block-start:0;z-index:2;padding:var(--size-s, 12px) var(--size-m, 16px);background:var(--color-surface-raised, #f8f9fa);border-block-end:2px solid var(--color-border, #e0e0e0)}.sm-activity-header h3{margin:0;font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text, #1a1a1a)}.sm-activity-count{font-size:.7rem;font-weight:600;color:var(--color-text-muted, #666);background:var(--color-border, #e0e0e0);border-radius:var(--radius-full, 9999px);padding:1px 8px;margin-inline-start:8px}story-map drag-surface{padding:var(--size-s, 12px);min-block-size:8rem;flex:1}story-map drag-surface>*{margin-block-end:var(--size-xs, 8px)}story-map drag-surface>*:last-child{margin-block-end:0}.sm-empty{color:var(--color-text-muted, #888);font-size:.8rem;font-style:italic;padding:var(--size-s, 12px);margin:0}.sm-live-region{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}story-map[compact] .sm-column{min-inline-size:11rem;flex:1 0 11rem}story-map[compact] .sm-activity-header{padding:var(--size-xs, 8px) var(--size-s, 12px)}story-map[compact] .sm-activity-header h3{font-size:.75rem}story-map[compact] drag-surface{padding:var(--size-xs, 8px)}@container (max-width: 30rem){.sm-columns{flex-direction:column}.sm-column{max-inline-size:none}}@media(prefers-reduced-motion:reduce){.sm-scroll{scroll-behavior:auto}}@media print{.sm-scroll{overflow:visible}.sm-activity-header{position:static}.sm-columns{flex-wrap:wrap}.sm-column{break-inside:avoid}}gantt-chart{display:block;container-type:inline-size;font-family:var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);line-height:1.5;color:var(--color-text, #1a1a1a)}gantt-chart:not([data-upgraded])>table{width:100%}.gc-title{font-size:var(--font-size-xl, 1.25rem);font-weight:700;margin-block-end:var(--size-s, .75rem)}.gc-container{border:1px solid var(--color-border, #e0e0e0);border-radius:var(--radius-m, .5rem);overflow:hidden;background:var(--color-surface, #ffffff)}.gc-timeline-header{display:flex;position:relative;border-block-end:1px solid var(--color-border, #e0e0e0);background:var(--color-surface-raised, #f8f9fa);min-height:32px}.gc-timeline-spacer{flex:0 0 var(--gc-task-width, 180px);border-inline-end:1px solid var(--color-border, #e0e0e0)}.gc-timeline-dates{flex:1;position:relative;min-height:32px}.gc-date-label{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-size:11px;font-weight:600;color:var(--color-text-muted, #666666);padding-inline-start:6px;white-space:nowrap;border-inline-start:1px solid var(--color-border, #e0e0e0)}.gc-date-label:first-child{border-inline-start:none}.gc-body{display:flex;min-height:0}.gc-task-list{flex:0 0 var(--gc-task-width, 180px);border-inline-end:1px solid var(--color-border, #e0e0e0);overflow:hidden}.gc-task-row{display:flex;align-items:center;gap:6px;height:var(--gc-row-height, 36px);padding-inline:12px;border-block-end:1px solid color-mix(in srgb,var(--color-border, #e0e0e0) 50%,transparent);font-size:var(--font-size-sm, .875rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gc-task-row:last-child{border-block-end:none}.gc-task-name{overflow:hidden;text-overflow:ellipsis}.gc-task-dates{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.gc-group-header{display:flex;align-items:center;height:28px;padding-inline:12px;background:var(--color-surface-raised, #f8f9fa);border-block-end:1px solid var(--color-border, #e0e0e0)}.gc-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted, #666666)}.gc-group-spacer{height:28px;background:var(--color-surface-raised, #f8f9fa);border-block-end:1px solid var(--color-border, #e0e0e0)}.gc-bars{flex:1;position:relative;min-width:0;overflow-x:auto}.gc-grid-lines{position:absolute;inset:0;pointer-events:none}.gc-grid-line{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--color-border, #e0e0e0) 50%,transparent)}.gc-bar-row{position:relative;height:var(--gc-row-height, 36px);border-block-end:1px solid color-mix(in srgb,var(--color-border, #e0e0e0) 50%,transparent)}.gc-bar-row:last-child{border-block-end:none}.gc-bar{position:absolute;top:6px;bottom:6px;border-radius:var(--radius-s, 4px);background:var(--gc-bar-color, var(--color-interactive, #0066cc));cursor:pointer;min-width:4px;display:flex;align-items:center;overflow:hidden;transition:filter .15s ease}.gc-bar:hover{filter:brightness(1.1)}.gc-bar:focus-visible{outline:2px solid var(--color-interactive, #0066cc);outline-offset:2px}.gc-bar-fill{height:100%;border-radius:inherit;background:color-mix(in srgb,var(--gc-bar-color, var(--color-interactive, #0066cc)) 65%,white);pointer-events:none}.gc-bar-label{position:absolute;inset:0;display:flex;align-items:center;padding-inline:6px;font-size:11px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.gc-bar[data-status=done]{--gc-bar-color: var(--color-success, #16a34a)}.gc-bar[data-status=blocked]{--gc-bar-color: var(--color-error, #dc2626)}.gc-bar[data-status=not-started]{--gc-bar-color: var(--color-text-muted, #666666);opacity:.6}.gc-milestone{position:absolute;top:50%;width:14px;height:14px;transform:translate(-50%,-50%) rotate(45deg);background:var(--gc-bar-color, var(--color-interactive, #0066cc));border:2px solid var(--color-surface, #ffffff);cursor:pointer}.gc-milestone:focus-visible{outline:2px solid var(--color-interactive, #0066cc);outline-offset:3px}.gc-milestone[data-status=done]{--gc-bar-color: var(--color-success, #16a34a)}.gc-today-line{position:absolute;top:0;bottom:0;width:2px;background:var(--color-error, #dc2626);z-index:5;pointer-events:none}.gc-today-label{position:absolute;top:-22px;left:50%;transform:translate(-50%);font-size:10px;font-weight:700;color:var(--color-error, #dc2626);white-space:nowrap}.gc-deps{position:absolute;inset:0;pointer-events:none;overflow:visible}.gc-dep-line{fill:none;stroke:var(--color-text-muted, #666666);stroke-width:1.5;marker-end:url(#gc-arrowhead)}.gc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}gantt-chart[compact]{--gc-row-height: 28px;--gc-task-width: 140px}gantt-chart[compact] .gc-task-row{font-size:12px;padding-inline:8px}gantt-chart[compact] .gc-bar{top:5px;bottom:5px}gantt-chart[compact] .gc-group-header{height:24px}gantt-chart[compact] .gc-group-spacer{height:24px}@container (max-width: 30rem){.gc-body{flex-direction:column}.gc-task-list{flex:none;border-inline-end:none;border-block-end:1px solid var(--color-border, #e0e0e0)}.gc-task-row{height:auto;padding-block:4px}.gc-timeline-spacer{display:none}}@media(prefers-reduced-motion:reduce){.gc-bar{transition:none}}@media print{gantt-chart[data-upgraded] .gc-container,gantt-chart[data-upgraded] .gc-title{display:none}gantt-chart[data-upgraded] .gc-sr-only{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal}}::view-transition-old(*),::view-transition-new(*){animation-duration:.22s;animation-timing-function:ease-out}
|
|
2
|
-
/*# sourceMappingURL=ux-planning.full.css.map */
|