ClintchizandClaude Opus 5
7a2b58652a
Bumps all 47 packages, the root manifest and the VS Code extension to 0.8.6, and rebuilds the editor compiler, language server and extension bundles that embed the version. The release carries the output delivery fix: camelCase outputs now reach parent bindings, and 18 components emit through output.* instead of hand-built CustomEvents. See the 0.8.6 migration entry for what changes for consumers. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
123 lines
3.5 KiB
Plaintext
123 lines
3.5 KiB
Plaintext
// CustomScrollbar -- a scrolling region with a themed scrollbar.
|
|
//
|
|
// <CustomScrollbar maxHeight="20rem">...long content...</CustomScrollbar>
|
|
//
|
|
// Scrollbar appearance is CSS, not script: scrollbar-width and scrollbar-color
|
|
// are the standard properties, and the ::-webkit-scrollbar rules cover the
|
|
// browsers that still need them.
|
|
//
|
|
// This component used to declare a scroll output it never emitted, and its
|
|
// props were columns, gap and maxWidth copied from a grid scaffold. The output
|
|
// is removed rather than left unimplemented -- a caller can listen for a plain
|
|
// scroll event on the element, which is what it would have been anyway.
|
|
//
|
|
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
|
|
// and silently swallows the rule that follows it.
|
|
component CustomScrollbar {
|
|
props {
|
|
color: string = "primary"
|
|
size: string = "default"
|
|
axis: string = "vertical"
|
|
// Track thickness in pixels. Clamped, because it arrives as an attribute
|
|
// and a scrollbar wider than the content is not useful to anyone.
|
|
thickness: number = 8
|
|
maxHeight: string = "20rem"
|
|
radius: string = "999px"
|
|
class: string = ""
|
|
}
|
|
|
|
functions {
|
|
shared function trackSize() {
|
|
var value = Number(thickness)
|
|
if (!value || value < 2) {
|
|
return 8
|
|
}
|
|
return Math.min(24, value)
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="CustomScrollbar"
|
|
class='wire-scrollbar {class}'
|
|
data-color='{color}'
|
|
data-size='{size}'
|
|
data-axis='{axis}'
|
|
style='--scrollbar-thickness:{trackSize()}px;--scrollbar-radius:{radius};max-height:{maxHeight};'
|
|
>
|
|
<slot />
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wire-scrollbar {
|
|
--scrollbar-accent: var(--wire-color-primary);
|
|
min-width: 0;
|
|
overflow: auto;
|
|
/*
|
|
* The standard properties. Firefox and current Chrome honour these; the
|
|
* webkit rules below are only for the engines that still ignore them.
|
|
*/
|
|
scrollbar-width: thin;
|
|
scrollbar-color: color-mix(in srgb, var(--scrollbar-accent) 55%, transparent) transparent;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.wire-scrollbar[data-color="secondary"] {
|
|
--scrollbar-accent: var(--wire-color-secondary);
|
|
}
|
|
|
|
.wire-scrollbar[data-color="success"] {
|
|
--scrollbar-accent: var(--wire-color-success);
|
|
}
|
|
|
|
.wire-scrollbar[data-color="danger"] {
|
|
--scrollbar-accent: var(--wire-color-danger);
|
|
}
|
|
|
|
.wire-scrollbar[data-color="info"] {
|
|
--scrollbar-accent: var(--wire-color-info);
|
|
}
|
|
|
|
.wire-scrollbar[data-axis="vertical"] {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.wire-scrollbar[data-axis="horizontal"] {
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.wire-scrollbar::-webkit-scrollbar {
|
|
width: var(--scrollbar-thickness, 8px);
|
|
height: var(--scrollbar-thickness, 8px);
|
|
}
|
|
|
|
.wire-scrollbar::-webkit-scrollbar-track {
|
|
background: var(--wire-color-surface-soft);
|
|
border-radius: var(--scrollbar-radius, 999px);
|
|
}
|
|
|
|
.wire-scrollbar::-webkit-scrollbar-thumb {
|
|
background: color-mix(in srgb, var(--scrollbar-accent) 45%, transparent);
|
|
border-radius: var(--scrollbar-radius, 999px);
|
|
}
|
|
|
|
.wire-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scrollbar-accent);
|
|
}
|
|
|
|
/*
|
|
* A pointer-less device paints its own overlay scrollbar and ignores the
|
|
* width above, so the region keeps its own padding instead.
|
|
*/
|
|
@media (hover: none) {
|
|
.wire-scrollbar {
|
|
scrollbar-width: auto;
|
|
}
|
|
}
|
|
}
|
|
}
|