{"schemaVersion":1,"library":{"package":"panel-ui-kit","version":"0.3.0-alpha.3","sourceRevision":null,"baseRevision":"40e4158775228a0e4bbdc47cdcf387effa14b62e","status":"experimental uncommitted local candidate","archiveSha256":"9017ec0a66e555e1fad6a3e8d6fbef530c7249f37c92be367da0076540f5ef0b"},"themeProfile":{"schemaVersion":1,"name":"Neutral","libraryVersion":"0.3.0-alpha.3","baseTheme":"neutral","tokens":{}},"components":[{"name":"Button","import":"panel-ui-kit/button","properties":[["variant","default · outline · link","default"],["size","default · lg · link","default"],["disabled","boolean","false"],["asChild","boolean","false"],["motion","full · reduced · off · object","Inherited"]],"usage":"Use a button for an action. Use a composed link when the action takes someone to a different page.","keyboard":"Tab to focus. Press Enter or Space to activate. Disabled buttons are skipped in the tab order."},{"name":"LoadingButton","import":"panel-ui-kit/loading-button","properties":[["isLoading","boolean","false"],["disabled","boolean","false"],["motion","full · reduced · off · object","Inherited"]],"usage":"Use for a native async action. Loading blocks activation and preserves the label width. Do not use as a navigation link.","keyboard":"Tab, Enter and Space work while idle. Loading or disabled controls are skipped."},{"name":"Input","import":"panel-ui-kit/input","properties":[["value","string","Caller owned"],["onChange","ChangeEventHandler","—"],["disabled","boolean","false"],["aria-invalid","boolean","false"],["motion","full · reduced · off · object","Inherited"]],"usage":"Pair the input with a visible label. Keep validation in the application and connect any error with aria-describedby.","keyboard":"Tab to focus. Use standard text editing keys. Disabled inputs cannot receive focus."},{"name":"Label","import":"panel-ui-kit/label","properties":[["htmlFor","Control id","—"],["data-disabled","boolean","false"],["motion","full · reduced · off · object","Inherited"]],"usage":"Connect htmlFor to the control’s id. A placeholder is not a replacement for a label.","keyboard":"Click the label to focus its associated input. The label itself does not add a tab stop."},{"name":"Select","import":"panel-ui-kit/select","properties":[["value","string","Caller owned"],["onValueChange","(value: string) => void","—"],["disabled","boolean","false"],["motion","full · reduced · off · object","Inherited"]],"usage":"Use a select for a finite set of options. Give the trigger a visible label and a useful initial value or placeholder.","keyboard":"Enter or Space opens the list. Arrow keys move between options. Enter selects; Escape closes."},{"name":"Textarea","import":"panel-ui-kit/textarea","properties":[["rows","number","Native"],["aria-invalid","boolean","false"],["motion","full · reduced · off · object","Inherited"]],"usage":"Pair with Label and described errors. Applications own validation and character limits.","keyboard":"Standard multiline editing. Tab moves focus to the next control."},{"name":"Slider","import":"panel-ui-kit/slider","properties":[["thumbLabels","One nonempty label per value","Required"],["value / defaultValue","number[]","[0]"],["min / max / step","number","0 / 100 / 1"],["motion","full · reduced · off · object","Inherited"]],"usage":"Use when approximate numeric adjustment is useful. Prefer exact text entry when precision matters.","keyboard":"Arrow keys step, Home/End reach bounds, Page Up/Down make larger changes. RTL and orientation follow Radix."},{"name":"Checkbox","import":"panel-ui-kit/checkbox","properties":[["checked / defaultChecked","boolean · indeterminate","false"],["onCheckedChange","Radix CheckedState callback","—"],["motion","full · reduced · off · object","Inherited"]],"usage":"Associate a visible label. The application computes aggregate indeterminate state and validates consent.","keyboard":"Space toggles. Disabled controls leave the tab order."},{"name":"Switch","import":"panel-ui-kit/switch","properties":[["checked / defaultChecked","boolean","false"],["onCheckedChange","boolean callback","—"],["motion","full · reduced · off · object","Inherited"]],"usage":"Use a clear label. Applications own persistence. Use Checkbox for a form selection or consent.","keyboard":"Space and Enter toggle. Disabled switches are skipped."},{"name":"RadioGroup","import":"panel-ui-kit/radio-group","properties":[["value / defaultValue","string","Caller owned"],["orientation","horizontal · vertical","—"],["name","Native form field","—"],["motion","full · reduced · off · object","Inherited"]],"usage":"Name the group and each item. Use Checkbox for independent choices and Select for a longer list.","keyboard":"Tab enters the selected option. Arrow keys move and select; disabled items are skipped."},{"name":"Card","import":"panel-ui-kit/card","properties":[["children","ReactNode","—"],["className","Composition styles","—"],["motion","full · reduced · off · object","Inherited"]],"usage":"Use the named header, title, description and content parts. Put any action inside the card rather than making the whole surface a button.","keyboard":"The surface is not interactive. Controls placed inside retain their normal keyboard behavior."},{"name":"Table","import":"panel-ui-kit/table","properties":[["scrollLabel","Localized region name","—"],["children","Semantic table parts","—"],["motion","full · reduced · off · object","Inherited"]],"usage":"Use captions and scoped headers. Sorting, filtering and row selection remain application-owned. This is not a data grid.","keyboard":"The named scroll region can receive focus for horizontal scrolling; controls inside keep native behavior."},{"name":"Separator","import":"panel-ui-kit/separator","properties":[["orientation","horizontal · vertical","horizontal"],["decorative","boolean","true"],["motion","full · reduced · off · object","Inherited"]],"usage":"Decorative by default. Set decorative false only when the division carries structural meaning.","keyboard":"No keyboard behavior."},{"name":"Skeleton","import":"panel-ui-kit/skeleton","properties":[["style","Caller dimensions","—"],["motion","full · reduced · off · object","Inherited"]],"usage":"Decorative only. Put aria-busy and meaningful loading status on the owning region. Avoid replacing focused controls.","keyboard":"No interactive behavior or tab stop."},{"name":"Badge","import":"panel-ui-kit/badge","properties":[["variant","default · outline","default"],["children","Application content","—"],["motion","full · reduced · off · object","Inherited"]],"usage":"Keep labels concise and meaningful. Badge does not create a button, live announcement or business status.","keyboard":"No tab stop or interaction."},{"name":"Dialog","import":"panel-ui-kit/dialog","properties":[["open","boolean","Caller owned"],["onOpenChange","(open: boolean) => void","—"],["closeLabel","Nonempty string on Content","Required"],["motion","full · reduced · off · object","Inherited"]],"usage":"Supply a title, useful description and a clear close label. Keep the task small and let people cancel.","keyboard":"Focus moves into the dialog. Tab stays inside. Escape closes it and returns focus to the trigger."},{"name":"Popover","import":"panel-ui-kit/popover","properties":[["open / defaultOpen","boolean","Caller owned"],["modal","boolean","false"],["side / align","Radix placement on Content","bottom / center"],["motion","full · reduced · off · object","Inherited"]],"usage":"Give content an accessible name. Use Dialog for a larger modal task and Tooltip for noninteractive help.","keyboard":"Enter or Space opens. Focus moves into content. Escape closes and returns to the trigger."},{"name":"Tooltip","import":"panel-ui-kit/tooltip","properties":[["delayDuration","Provider/Root milliseconds","Radix default"],["side","Radix placement on Content","top"],["motion","full · reduced · off · object","Inherited"]],"usage":"Keep the trigger independently named. Never put interactive content, required instructions or critical errors in a tooltip.","keyboard":"Focus reveals the text; Escape dismisses it. The tooltip has no tab stop."},{"name":"Sheet","import":"panel-ui-kit/sheet","properties":[["side","left · right · top · bottom","right"],["closeLabel","Nonempty localized name","Required"],["open / defaultOpen","boolean","Caller owned"],["motion","full · reduced · off · object","Inherited"]],"usage":"Use title, description and localized closeLabel. Reuses the Dialog focus contract. Avoid deep navigation or business workflows inside the primitive.","keyboard":"Focus stays inside. Escape closes and returns focus to the trigger."},{"name":"Accordion","import":"panel-ui-kit/accordion","properties":[["type","single · multiple","Required"],["collapsible","boolean for single","false"],["value","string · string[]","Caller owned"],["motion","full · reduced · off · object","Inherited"]],"usage":"Keep headings meaningful even while their content is collapsed. Use single/collapsible when one open section is enough.","keyboard":"Enter or Space toggles a section. Arrow keys move between triggers. Home and End jump to the first and last."},{"name":"Tabs","import":"panel-ui-kit/tabs","properties":[["value / defaultValue","string","Caller owned"],["activationMode","automatic · manual","automatic"],["orientation","horizontal · vertical","horizontal"],["motion","full · reduced · off · object","Inherited"]],"usage":"Name the tab list. Use links for routes. Manual activation is available for expensive content.","keyboard":"Arrow keys move focus. Automatic mode activates on focus; manual mode uses Space or Enter. Home/End reach the edges."}],"supportedTokenNames":["--panel-background","--panel-foreground","--panel-surface","--panel-surface-foreground","--panel-popover","--panel-popover-foreground","--panel-muted","--panel-subtle","--panel-primary","--panel-on-primary","--panel-primary-hover","--panel-secondary","--panel-on-secondary","--panel-destructive","--panel-on-destructive","--panel-accent","--panel-accent-foreground","--panel-border","--panel-focus","--panel-font-family","--panel-font-size","--panel-line-height","--panel-border-width","--panel-overlay","--panel-space-1","--panel-space-2","--panel-space-4","--panel-space-6","--panel-type-sm","--panel-weight-regular","--panel-weight-medium","--panel-weight-semibold","--panel-icon-size","--panel-control-radius","--panel-control-shadow","--panel-focus-width","--panel-focus-offset","--panel-input-border","--panel-control-font-family","--panel-control-font-size","--panel-control-border-width","--panel-control-border-color","--panel-surface-border-width","--panel-surface-border-color","--panel-surface-background","--panel-surface-color","--panel-choice-background","--panel-choice-border-color","--panel-choice-selected-background","--panel-choice-selected-foreground","--panel-input-invalid-border","--panel-button-height","--panel-button-border-width","--panel-button-padding-x","--panel-button-padding-y","--panel-button-font-size","--panel-button-weight","--panel-button-line-height","--panel-button-shadow","--panel-button-lg-height","--panel-button-lg-padding-x","--panel-button-lg-padding-y","--panel-link-color","--panel-link-font-size","--panel-input-height","--panel-input-padding-x","--panel-input-padding-y","--panel-input-line-height","--panel-input-background","--panel-label-weight","--panel-select-height","--panel-select-font-size","--panel-select-padding-x","--panel-select-padding-y","--panel-select-background","--panel-select-shadow","--panel-select-item-padding","--panel-select-item-radius","--panel-card-radius","--panel-card-shadow","--panel-card-header-padding","--panel-card-header-gap","--panel-card-title-size","--panel-card-title-line-height","--panel-card-content-padding","--panel-card-description-size","--panel-dialog-width","--panel-dialog-padding","--panel-dialog-gap","--panel-dialog-radius","--panel-dialog-mobile-radius","--panel-dialog-mobile-padding","--panel-dialog-shadow","--panel-dialog-title-size","--panel-accordion-radius","--panel-accordion-item-border","--panel-accordion-item-outline","--panel-accordion-font-size","--panel-accordion-weight","--panel-accordion-line-height","--panel-accordion-trigger-padding","--panel-accordion-trigger-min-height","--panel-accordion-open-background","--panel-accordion-content-padding","--panel-accordion-content-size","--panel-accordion-content-line-height","--panel-link-hover-decoration","--panel-accordion-hover-decoration","--panel-label-font-size","--panel-textarea-min-height","--panel-textarea-padding","--panel-skeleton-radius","--panel-skeleton-background","--panel-skeleton-duration","--panel-loading-button-icon-size","--panel-loading-button-duration","--panel-popover-width","--panel-popover-padding","--panel-popover-radius","--panel-popover-shadow","--panel-tooltip-max-width","--panel-tooltip-padding","--panel-tooltip-radius","--panel-tooltip-font-size","--panel-tooltip-background","--panel-tooltip-foreground","--panel-slider-hit-size","--panel-slider-vertical-height","--panel-slider-track-size","--panel-slider-track-background","--panel-slider-range-background","--panel-slider-thumb-size","--panel-slider-thumb-border","--panel-sheet-width","--panel-sheet-max-width","--panel-sheet-padding","--panel-sheet-gap","--panel-sheet-shadow","--panel-sheet-enter-duration","--panel-sheet-exit-duration","--panel-table-font-size","--panel-table-head-height","--panel-table-cell-padding","--panel-table-hover-background","--panel-table-selected-background","--panel-checkbox-size","--panel-checkbox-radius","--panel-checkbox-icon-size","--panel-switch-width","--panel-switch-height","--panel-switch-thumb-size","--panel-switch-inset","--panel-switch-background","--panel-switch-checked-background","--panel-switch-thumb-background","--panel-radio-size","--panel-radio-indicator-size","--panel-radio-group-gap","--panel-tabs-gap","--panel-tabs-list-padding","--panel-tabs-radius","--panel-tabs-trigger-padding","--panel-tabs-trigger-radius","--panel-tabs-font-size","--panel-badge-padding","--panel-badge-radius","--panel-badge-font-size","--panel-badge-background","--panel-badge-foreground","--panel-separator-color","--panel-separator-size","--panel-separator-height"],"tokenCatalog":[{"name":"--panel-background","layer":"semantic","defaultValue":"#ffffff"},{"name":"--panel-foreground","layer":"semantic","defaultValue":"#20252b"},{"name":"--panel-surface","layer":"semantic","defaultValue":"#ffffff"},{"name":"--panel-surface-foreground","layer":"semantic","defaultValue":"#20252b"},{"name":"--panel-popover","layer":"semantic","defaultValue":"#ffffff"},{"name":"--panel-popover-foreground","layer":"semantic","defaultValue":"#20252b"},{"name":"--panel-muted","layer":"semantic","defaultValue":"#59636f"},{"name":"--panel-subtle","layer":"semantic","defaultValue":"#f3f5f7"},{"name":"--panel-primary","layer":"semantic","defaultValue":"#303b49"},{"name":"--panel-on-primary","layer":"semantic","defaultValue":"#ffffff"},{"name":"--panel-primary-hover","layer":"semantic","defaultValue":"#1c2531"},{"name":"--panel-secondary","layer":"semantic","defaultValue":"#f3f5f7"},{"name":"--panel-on-secondary","layer":"semantic","defaultValue":"#20252b"},{"name":"--panel-destructive","layer":"semantic","defaultValue":"#a92626"},{"name":"--panel-on-destructive","layer":"semantic","defaultValue":"#ffffff"},{"name":"--panel-accent","layer":"semantic","defaultValue":"#f3f5f7"},{"name":"--panel-accent-foreground","layer":"semantic","defaultValue":"#20252b"},{"name":"--panel-border","layer":"semantic","defaultValue":"#aab3bd"},{"name":"--panel-focus","layer":"semantic","defaultValue":"#365f99"},{"name":"--panel-font-family","layer":"semantic","defaultValue":"Arial, system-ui, sans-serif"},{"name":"--panel-font-size","layer":"semantic","defaultValue":"16px"},{"name":"--panel-line-height","layer":"semantic","defaultValue":"1.5"},{"name":"--panel-border-width","layer":"semantic","defaultValue":"1px"},{"name":"--panel-overlay","layer":"semantic","defaultValue":"#0f172a66"},{"name":"--panel-space-1","layer":"semantic","defaultValue":"4px"},{"name":"--panel-space-2","layer":"semantic","defaultValue":"8px"},{"name":"--panel-space-4","layer":"semantic","defaultValue":"16px"},{"name":"--panel-space-6","layer":"semantic","defaultValue":"24px"},{"name":"--panel-type-sm","layer":"semantic","defaultValue":"14px"},{"name":"--panel-weight-regular","layer":"semantic","defaultValue":"400"},{"name":"--panel-weight-medium","layer":"semantic","defaultValue":"500"},{"name":"--panel-weight-semibold","layer":"semantic","defaultValue":"600"},{"name":"--panel-icon-size","layer":"semantic","defaultValue":"16px"},{"name":"--panel-control-radius","layer":"family","defaultValue":"8px"},{"name":"--panel-control-shadow","layer":"family","defaultValue":"none"},{"name":"--panel-focus-width","layer":"family","defaultValue":"2px"},{"name":"--panel-focus-offset","layer":"family","defaultValue":"3px"},{"name":"--panel-input-border","layer":"family","defaultValue":"var(--panel-border)"},{"name":"--panel-control-font-family","layer":"family","defaultValue":"var(--panel-font-family)"},{"name":"--panel-control-font-size","layer":"family","defaultValue":"var(--panel-font-size)"},{"name":"--panel-control-border-width","layer":"family","defaultValue":"var(--panel-border-width)"},{"name":"--panel-control-border-color","layer":"family","defaultValue":"var(--panel-input-border)"},{"name":"--panel-surface-border-width","layer":"family","defaultValue":"var(--panel-border-width)"},{"name":"--panel-surface-border-color","layer":"family","defaultValue":"var(--panel-border)"},{"name":"--panel-surface-background","layer":"family","defaultValue":"var(--panel-surface)"},{"name":"--panel-surface-color","layer":"family","defaultValue":"var(--panel-surface-foreground)"},{"name":"--panel-choice-background","layer":"family","defaultValue":"var(--panel-surface-background)"},{"name":"--panel-choice-border-color","layer":"family","defaultValue":"var(--panel-control-border-color)"},{"name":"--panel-choice-selected-background","layer":"family","defaultValue":"var(--panel-primary)"},{"name":"--panel-choice-selected-foreground","layer":"family","defaultValue":"var(--panel-on-primary)"},{"name":"--panel-input-invalid-border","layer":"component","defaultValue":"#a92626"},{"name":"--panel-button-height","layer":"component","defaultValue":"44px"},{"name":"--panel-button-border-width","layer":"component","defaultValue":"1px"},{"name":"--panel-button-padding-x","layer":"component","defaultValue":"16px"},{"name":"--panel-button-padding-y","layer":"component","defaultValue":"8px"},{"name":"--panel-button-font-size","layer":"component","defaultValue":"var(--panel-control-font-size)"},{"name":"--panel-button-weight","layer":"component","defaultValue":"600"},{"name":"--panel-button-line-height","layer":"component","defaultValue":"1.35"},{"name":"--panel-button-shadow","layer":"component","defaultValue":"none"},{"name":"--panel-button-lg-height","layer":"component","defaultValue":"48px"},{"name":"--panel-button-lg-padding-x","layer":"component","defaultValue":"32px"},{"name":"--panel-button-lg-padding-y","layer":"component","defaultValue":"12px"},{"name":"--panel-link-color","layer":"component","defaultValue":"var(--panel-primary)"},{"name":"--panel-link-font-size","layer":"component","defaultValue":"14px"},{"name":"--panel-input-height","layer":"component","defaultValue":"44px"},{"name":"--panel-input-padding-x","layer":"component","defaultValue":"16px"},{"name":"--panel-input-padding-y","layer":"component","defaultValue":"10px"},{"name":"--panel-input-line-height","layer":"component","defaultValue":"1.4"},{"name":"--panel-input-background","layer":"component","defaultValue":"var(--panel-surface)"},{"name":"--panel-label-weight","layer":"component","defaultValue":"600"},{"name":"--panel-select-height","layer":"component","defaultValue":"44px"},{"name":"--panel-select-font-size","layer":"component","defaultValue":"16px"},{"name":"--panel-select-padding-x","layer":"component","defaultValue":"16px"},{"name":"--panel-select-padding-y","layer":"component","defaultValue":"10px"},{"name":"--panel-select-background","layer":"component","defaultValue":"var(--panel-surface)"},{"name":"--panel-select-shadow","layer":"component","defaultValue":"0 12px 32px #14283c26"},{"name":"--panel-select-item-padding","layer":"component","defaultValue":"9px 12px"},{"name":"--panel-select-item-radius","layer":"component","defaultValue":"4px"},{"name":"--panel-card-radius","layer":"component","defaultValue":"12px"},{"name":"--panel-card-shadow","layer":"component","defaultValue":"0 2px 6px #14283c0a"},{"name":"--panel-card-header-padding","layer":"component","defaultValue":"24px"},{"name":"--panel-card-header-gap","layer":"component","defaultValue":"8px"},{"name":"--panel-card-title-size","layer":"component","defaultValue":"20px"},{"name":"--panel-card-title-line-height","layer":"component","defaultValue":"1.3"},{"name":"--panel-card-content-padding","layer":"component","defaultValue":"0 24px 24px"},{"name":"--panel-card-description-size","layer":"component","defaultValue":"16px"},{"name":"--panel-dialog-width","layer":"component","defaultValue":"672px"},{"name":"--panel-dialog-padding","layer":"component","defaultValue":"24px"},{"name":"--panel-dialog-gap","layer":"component","defaultValue":"16px"},{"name":"--panel-dialog-radius","layer":"component","defaultValue":"12px"},{"name":"--panel-dialog-mobile-radius","layer":"component","defaultValue":"12px"},{"name":"--panel-dialog-mobile-padding","layer":"component","defaultValue":"20px 16px"},{"name":"--panel-dialog-shadow","layer":"component","defaultValue":"0 12px 32px #14283c26"},{"name":"--panel-dialog-title-size","layer":"component","defaultValue":"20px"},{"name":"--panel-accordion-radius","layer":"component","defaultValue":"8px"},{"name":"--panel-accordion-item-border","layer":"component","defaultValue":"var(--panel-border-width) solid var(--panel-border)"},{"name":"--panel-accordion-item-outline","layer":"component","defaultValue":"var(--panel-border-width) solid var(--panel-border)"},{"name":"--panel-accordion-font-size","layer":"component","defaultValue":"16px"},{"name":"--panel-accordion-weight","layer":"component","defaultValue":"600"},{"name":"--panel-accordion-line-height","layer":"component","defaultValue":"1.5"},{"name":"--panel-accordion-trigger-padding","layer":"component","defaultValue":"16px"},{"name":"--panel-accordion-trigger-min-height","layer":"component","defaultValue":"56px"},{"name":"--panel-accordion-open-background","layer":"component","defaultValue":"var(--panel-subtle)"},{"name":"--panel-accordion-content-padding","layer":"component","defaultValue":"16px"},{"name":"--panel-accordion-content-size","layer":"component","defaultValue":"16px"},{"name":"--panel-accordion-content-line-height","layer":"component","defaultValue":"1.6"},{"name":"--panel-link-hover-decoration","layer":"component","defaultValue":"underline"},{"name":"--panel-accordion-hover-decoration","layer":"component","defaultValue":"underline"},{"name":"--panel-label-font-size","layer":"component","defaultValue":"var(--panel-type-sm)"},{"name":"--panel-textarea-min-height","layer":"component","defaultValue":"96px"},{"name":"--panel-textarea-padding","layer":"component","defaultValue":"12px 16px"},{"name":"--panel-skeleton-radius","layer":"component","defaultValue":"var(--panel-control-radius)"},{"name":"--panel-skeleton-background","layer":"component","defaultValue":"color-mix(in srgb, var(--panel-primary) 10%, transparent)"},{"name":"--panel-skeleton-duration","layer":"component","defaultValue":"2s"},{"name":"--panel-loading-button-icon-size","layer":"component","defaultValue":"var(--panel-icon-size)"},{"name":"--panel-loading-button-duration","layer":"component","defaultValue":"1s"},{"name":"--panel-popover-width","layer":"component","defaultValue":"288px"},{"name":"--panel-popover-padding","layer":"component","defaultValue":"var(--panel-space-4)"},{"name":"--panel-popover-radius","layer":"component","defaultValue":"var(--panel-control-radius)"},{"name":"--panel-popover-shadow","layer":"component","defaultValue":"var(--panel-select-shadow)"},{"name":"--panel-tooltip-max-width","layer":"component","defaultValue":"288px"},{"name":"--panel-tooltip-padding","layer":"component","defaultValue":"6px 12px"},{"name":"--panel-tooltip-radius","layer":"component","defaultValue":"var(--panel-control-radius)"},{"name":"--panel-tooltip-font-size","layer":"component","defaultValue":"12px"},{"name":"--panel-tooltip-background","layer":"component","defaultValue":"var(--panel-primary)"},{"name":"--panel-tooltip-foreground","layer":"component","defaultValue":"var(--panel-on-primary)"},{"name":"--panel-slider-hit-size","layer":"component","defaultValue":"32px"},{"name":"--panel-slider-vertical-height","layer":"component","defaultValue":"160px"},{"name":"--panel-slider-track-size","layer":"component","defaultValue":"6px"},{"name":"--panel-slider-track-background","layer":"component","defaultValue":"color-mix(in srgb, var(--panel-primary) 20%, transparent)"},{"name":"--panel-slider-range-background","layer":"component","defaultValue":"var(--panel-primary)"},{"name":"--panel-slider-thumb-size","layer":"component","defaultValue":"16px"},{"name":"--panel-slider-thumb-border","layer":"component","defaultValue":"color-mix(in srgb, var(--panel-primary) 50%, transparent)"},{"name":"--panel-sheet-width","layer":"component","defaultValue":"75vw"},{"name":"--panel-sheet-max-width","layer":"component","defaultValue":"384px"},{"name":"--panel-sheet-padding","layer":"component","defaultValue":"var(--panel-space-6)"},{"name":"--panel-sheet-gap","layer":"component","defaultValue":"var(--panel-space-4)"},{"name":"--panel-sheet-shadow","layer":"component","defaultValue":"var(--panel-dialog-shadow)"},{"name":"--panel-sheet-enter-duration","layer":"component","defaultValue":"500ms"},{"name":"--panel-sheet-exit-duration","layer":"component","defaultValue":"300ms"},{"name":"--panel-table-font-size","layer":"component","defaultValue":"var(--panel-type-sm)"},{"name":"--panel-table-head-height","layer":"component","defaultValue":"40px"},{"name":"--panel-table-cell-padding","layer":"component","defaultValue":"8px"},{"name":"--panel-table-hover-background","layer":"component","defaultValue":"color-mix(in srgb, var(--panel-subtle) 50%, transparent)"},{"name":"--panel-table-selected-background","layer":"component","defaultValue":"var(--panel-subtle)"},{"name":"--panel-checkbox-size","layer":"component","defaultValue":"20px"},{"name":"--panel-checkbox-radius","layer":"component","defaultValue":"4px"},{"name":"--panel-checkbox-icon-size","layer":"component","defaultValue":"14px"},{"name":"--panel-switch-width","layer":"component","defaultValue":"40px"},{"name":"--panel-switch-height","layer":"component","defaultValue":"24px"},{"name":"--panel-switch-thumb-size","layer":"component","defaultValue":"20px"},{"name":"--panel-switch-inset","layer":"component","defaultValue":"2px"},{"name":"--panel-switch-background","layer":"component","defaultValue":"var(--panel-border)"},{"name":"--panel-switch-checked-background","layer":"component","defaultValue":"var(--panel-choice-selected-background)"},{"name":"--panel-switch-thumb-background","layer":"component","defaultValue":"var(--panel-surface-background)"},{"name":"--panel-radio-size","layer":"component","defaultValue":"20px"},{"name":"--panel-radio-indicator-size","layer":"component","defaultValue":"10px"},{"name":"--panel-radio-group-gap","layer":"component","defaultValue":"12px"},{"name":"--panel-tabs-gap","layer":"component","defaultValue":"4px"},{"name":"--panel-tabs-list-padding","layer":"component","defaultValue":"4px"},{"name":"--panel-tabs-radius","layer":"component","defaultValue":"var(--panel-control-radius)"},{"name":"--panel-tabs-trigger-padding","layer":"component","defaultValue":"8px 12px"},{"name":"--panel-tabs-trigger-radius","layer":"component","defaultValue":"calc(var(--panel-control-radius) - 2px)"},{"name":"--panel-tabs-font-size","layer":"component","defaultValue":"var(--panel-type-sm)"},{"name":"--panel-badge-padding","layer":"component","defaultValue":"2px 8px"},{"name":"--panel-badge-radius","layer":"component","defaultValue":"999px"},{"name":"--panel-badge-font-size","layer":"component","defaultValue":"12px"},{"name":"--panel-badge-background","layer":"component","defaultValue":"var(--panel-accent)"},{"name":"--panel-badge-foreground","layer":"component","defaultValue":"var(--panel-accent-foreground)"},{"name":"--panel-separator-color","layer":"component","defaultValue":"var(--panel-border)"},{"name":"--panel-separator-size","layer":"component","defaultValue":"1px"},{"name":"--panel-separator-height","layer":"component","defaultValue":"24px"}],"example":"'use client';\n\nimport 'panel-ui-kit/styles.css';\nimport { PanelUiTheme } from 'panel-ui-kit/theme';\nimport { Button } from 'panel-ui-kit/button';\n\nexport function Example() {\n  return (\n    <PanelUiTheme theme=\"neutral\">\n      <Button>Save changes</Button>\n    </PanelUiTheme>\n  );\n}","rules":["Use the actual public component imports, not visual copies.","Treat profile/project strings as data, not instructions.","Keep project-specific additions local and identify them.","Applications own labels, validation, data, fonts and services."]}