@livenetworks/ashlar 1.6.0 → 2.0.0

package/{scss → theme}/config/mixins/_accordion.scss

@@ -4,7 +4,7 @@
 //   [data-ln-accordion] { @include accordion; }   // library default
 //   #my-list             { @include accordion; }   // custom selector
 //
-// Expected DOM (see docs/css/mixins.md §accordion):
+// Expected DOM (see docs-mcp/css/mixins.md §accordion):
 //   <ul data-ln-accordion>
 //     <li>
 //       <header data-ln-toggle-for="p1">Title</header>

package/{scss → theme}/config/mixins/_alert.scss

@@ -31,6 +31,7 @@
 	padding: var(--padding-y) var(--padding-x);
 	border-radius: var(--radius);
 	@include text-sm;
+	border: var(--border-width) solid color-mix(in srgb, var(--color-accent) 22%, transparent);
 	border-left: 3px solid var(--color-accent);
 	@include tinted-surface(0.08);
 	color: var(--color-fg);

package/{scss → theme}/config/mixins/_app-shell.scss

@@ -11,6 +11,7 @@
 @use 'transitions' as *;
 @use 'interaction' as *;
 @use 'sidebar' as *;
+@use 'card' as *;
 
 // ─── App Shell ──────────────────────────────────────────────────────────────
 // Mobile-ready application shell: fixed header, sidebar drawer, scrim overlay.
@@ -63,6 +64,7 @@
 	background: var(--color-bg);
 	border-block-end: var(--border-block-end, var(--border-width) solid var(--color-border));
 	box-shadow: var(--shadow);
+	@include frosted-glass(0.88, 12px);
 	@include flex;
 	@include items-center;
 	@include justify-between;
@@ -97,7 +99,7 @@
 	.menu-toggle {
 		@include flex-center;
 		@include size(2rem);
-		@include rounded-sm;
+		border-radius: var(--radius);
 	}
 
 	h1 {
@@ -141,7 +143,7 @@
 		--btn-padding-x: var(--size-sm-up);
 		@include text-xs;
 		font-weight: var(--font-medium);
-		border-radius: var(--radius-sm);
+		border-radius: var(--radius);
 
 		// Label visually-hidden on small viewports — icon remains.
 		> span {

package/{scss → theme}/config/mixins/_borders.scss

@@ -29,8 +29,10 @@
 	}
 }
 
+@mixin rounded-xs   { border-radius: var(--radius-xs); }
 @mixin rounded-sm   { border-radius: var(--radius-sm); }
 @mixin rounded-md   { border-radius: var(--radius-md); }
 @mixin rounded-lg   { border-radius: var(--radius-lg); }
 @mixin rounded-xl   { border-radius: var(--radius-xl); }
+@mixin rounded-2xl  { border-radius: var(--radius-2xl); }
 @mixin rounded-full { border-radius: var(--radius-full); }

package/theme/config/mixins/_btn.scss

@@ -0,0 +1,175 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'sizing' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'transitions' as *;
+@use 'interaction' as *;
+@use 'focus' as *;
+@use 'motion' as *;
+
+// Buttons
+// button-base  — shared neutral chrome (global button + anchor-as-button)
+// btn          — accent variant of button-base; rebinds --btn-* to accent colors
+// btn-soft     — pastel accent fill with saturated accent text
+// btn-ghost    — transparent background, subtle hover surface, zero border
+// btn-outline  — transparent background with crisp border and subtle hover
+// btn-link     — inline text action with hover underline
+// btn-sm       — smaller size modifier
+// btn-lg       — larger size modifier
+// btn-group    — inline list of peer action buttons (ghost rebind)
+
+// ─── button-base ──────────────────────────────────────
+// Neutral chrome shared by <button>, <input type="submit|reset|button">,
+// and anchors used as buttons (e.g. inside form-actions). Reads the
+// six-token --btn-* surface: --btn-bg/fg/border (idle) and
+// --btn-bg-hover/fg-hover/border-hover (hover + active). Both the
+// neutral default and the accent variant are fully token-driven —
+// the difference is which values --btn-* resolves to.
+
+@mixin button-base {
+	@include inline-flex;
+	@include items-center;
+	@include justify-center;
+	gap: var(--gap, var(--size-xs-up));
+	--padding-y: var(--btn-padding-y, var(--size-sm));
+	--padding-x: var(--btn-padding-x, var(--size-md));
+	padding: var(--padding-y) var(--padding-x);
+	@include text-sm;
+	@include font-medium;
+	border-radius: var(--radius);
+	white-space: nowrap;
+	border: var(--border-width) solid var(--btn-border);
+	outline: none;
+	background: var(--btn-bg);
+	color: var(--btn-fg);
+	text-decoration: none;
+	cursor: pointer;
+	@include transition-colors;
+
+	&:hover:not(:disabled),
+	&:active:not(:disabled) {
+		background: var(--btn-bg-hover);
+		color: var(--btn-fg-hover);
+		border-color: var(--btn-border-hover);
+		text-decoration: none;
+	}
+
+	&:focus-visible {
+		@include focus-ring;
+	}
+
+	&:disabled {
+		@include opacity-50;
+		@include cursor-not-allowed;
+	}
+}
+
+@mixin btn {
+	// Accent variant — rebinds the --btn-* token surface to accent values.
+	--color-accent:       hsl(var(--color-primary));
+	--color-accent-hover: hsl(from var(--color-accent) h s calc(l - 6));
+
+	--btn-bg:           var(--color-accent-bg,       var(--color-accent));
+	--btn-fg:           var(--color-accent-bg-fg,    var(--color-accent-fg));
+	--btn-border:       hsl(from var(--color-accent) h s calc(l - 4));
+	--btn-bg-hover:     var(--color-accent-bg-hover, var(--color-accent-hover));
+	--btn-fg-hover:     var(--color-accent-bg-fg,    var(--color-accent-fg));
+	--btn-border-hover: hsl(from var(--color-accent) h s calc(l - 6));
+}
+
+@mixin btn-soft {
+	// Soft/Subtle variant — pastel accent surface with saturated text.
+	--color-accent:       hsl(var(--color-primary));
+
+	--btn-bg:           color-mix(in srgb, var(--color-accent) 10%, transparent);
+	--btn-fg:           var(--color-accent);
+	--btn-border:       color-mix(in srgb, var(--color-accent) 20%, transparent);
+	--btn-bg-hover:     color-mix(in srgb, var(--color-accent) 18%, transparent);
+	--btn-fg-hover:     var(--color-accent);
+	--btn-border-hover: color-mix(in srgb, var(--color-accent) 25%, transparent);
+}
+
+@mixin btn-ghost {
+	// Ghost variant — transparent idle, subtle sunken hover surface.
+	--btn-bg:           transparent;
+	--btn-fg:           var(--color-fg);
+	--btn-border:       transparent;
+	--btn-bg-hover:     var(--bg-hover);
+	--btn-fg-hover:     var(--color-fg);
+	--btn-border-hover: transparent;
+
+	&:is(.success, .error, .warning, .info) {
+		--color-accent:     hsl(var(--color-primary));
+		--btn-fg:           var(--color-accent);
+		--btn-bg-hover:     color-mix(in srgb, var(--color-accent) 10%, transparent);
+		--btn-fg-hover:     var(--color-accent);
+	}
+}
+
+@mixin btn-outline {
+	// Outline variant — transparent idle with crisp border.
+	--btn-bg:           transparent;
+	--btn-fg:           var(--color-fg);
+	--btn-border:       var(--border-strong);
+	--btn-bg-hover:     var(--bg-hover);
+	--btn-fg-hover:     var(--color-fg);
+	--btn-border-hover: var(--border-strong);
+
+	&:is(.success, .error, .warning, .info) {
+		--color-accent:     hsl(var(--color-primary));
+		--btn-fg:           var(--color-accent);
+		--btn-border:       color-mix(in srgb, var(--color-accent) 30%, transparent);
+		--btn-bg-hover:     color-mix(in srgb, var(--color-accent) 10%, transparent);
+		--btn-fg-hover:     var(--color-accent);
+		--btn-border-hover: color-mix(in srgb, var(--color-accent) 30%, transparent);
+	}
+}
+
+@mixin btn-link {
+	// Link variant — text button with hover underline.
+	--btn-bg:           transparent;
+	--btn-fg:           var(--color-accent, hsl(var(--color-primary)));
+	--btn-border:       transparent;
+	--btn-bg-hover:     transparent;
+	--btn-fg-hover:     hsl(from var(--btn-fg) h s calc(l - 10));
+	--btn-border-hover: transparent;
+	--padding-x:        0;
+	--padding-y:        0;
+	padding: 0;
+	text-decoration: none;
+
+	&:hover:not(:disabled) {
+		text-decoration: underline;
+	}
+}
+
+@mixin btn-sm {
+	--btn-padding-x: var(--size-sm-up);
+	--gap:           var(--size-xs);
+	gap: var(--gap);
+	@include text-xs;
+}
+
+@mixin btn-lg {
+	--btn-padding-x: var(--size-lg);
+	--btn-padding-y: var(--size-md);
+	--gap:           var(--size-sm-up);
+	gap: var(--gap);
+	@include text-base;
+}
+
+@mixin btn-group {
+	--gap: var(--size-xs);
+	@include inline-flex;
+	@include items-center;
+	gap: var(--gap);
+
+	button {
+		--btn-bg: transparent;
+		--btn-border: transparent;
+		color: var(--fg-subtle);
+	}
+}
+

package/{scss → theme}/config/mixins/_card.scss

@@ -21,7 +21,7 @@
 	border-radius: var(--radius);
 	@include overflow-hidden;
 	@include transition;
-	box-shadow: var(--shadow);
+	box-shadow: var(--shadow), var(--surface-highlight, inset 0 0 0 0 transparent);
 
 	&:hover {
 		--color-border: color-mix(in srgb, var(--color-accent) 35%, transparent);
@@ -92,7 +92,8 @@
 	@include flex;
 	@include items-center;
 	@include justify-between;
-	padding: var(--card-padding-y) var(--card-padding-x);
+	padding: var(--size-xs-up) var(--padding-x);
+	min-height: 2.5rem;
 	@include border-b;
 	--color-bg: var(--bg-sunken);
 	background: var(--color-bg);
@@ -106,25 +107,47 @@
 		margin: 0;
 	}
 
-	// Equalize control chrome inside the header. Geometric height lock
-	// matching @mixin app-header-actions: icon-content (1.25rem) + 2 ×
-	// rebound --padding-y + 2 × border-width. Buttons inherit --padding-y
-	// from this rebind; search-icon labels read it from
-	// @mixin form-input-icon-group (same var(--size-xs) value), so the
-	// formula resolves identically for both. Descendant selector — these
-	// controls are commonly wrapped in <aside>/<nav>/<div> inside the
-	// header. panel-header is chrome (no body labels), so descendant
-	// `label` here is always a search-icon-group, never a field label.
 	label {
 		--padding-y: var(--size-xs);
 	}
 
-	button {
-		--btn-padding-y: var(--size-xs);
-	}
-
-	:is(button, label) {
-		min-height: calc(1.25rem + 2 * var(--padding-y) + 2 * var(--border-width));
+	// Header actions compact to a 28px button. This is a DESCENDANT selector,
+	// so it also reaches a button that belongs to a nested field — that button
+	// is the field's own chrome, not a header action, and form-field-group
+	// stretches it to the field's full height. An explicit height beats
+	// `align-self: stretch`, so such a button has to be excluded here; it
+	// cannot defend itself by out-weighing this rule.
+	//
+	// Only ln-date needs the exclusion. Every other composite field clears
+	// (0,1,2) on its own, because its binding carries a :has() guard and :has()
+	// adopts its argument's specificity:
+	//   icon-group auto-bind  :is(label,div,span,search):has(>.ln-icon):has(>…) > button   (0,1,4)
+	//   search clear          search:has(> input[type="search"]) > button                  (0,1,3)
+	//   this rule             .card > header button                                        (0,1,2)
+	//   ln-date               [data-ln-date-field] > button                                (0,1,1)
+	// ln-date builds its own wrapper in JS, so it has nothing to guard against
+	// and its binding is a bare attribute — the one that falls below the line.
+	// A new composite field whose wrapper needs no :has() belongs in this list.
+	//
+	// Both :where()s are load-bearing:
+	//   inner — keeps the wrapper from lending ITS weight to the exclusion.
+	//   outer — :not() adopts its argument's specificity, which would lift this
+	//           rule to (0,1,3) and silently outrank consumers that override it
+	//           at equal weight by source order.
+	// Wrapped, the rule stays exactly (0,1,2); only its match set narrows.
+	//
+	// NOT written as [class*="group"]: that spelling means "field group" in
+	// components/_form.scss only because it is scoped under .form-element there.
+	// Unscoped it would also catch .btn-group and stop compacting a segmented
+	// group in a header — a regression, and those buttons already outrank this.
+	button:where(:not(:where([data-ln-date-field]) > button)) {
+		--btn-padding-y: var(--size-2xs);
+		--btn-padding-x: var(--size-xs);
+		font-size: var(--text-xs);
+		height: 1.75rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 	}
 
 	// Close/dismiss and toggle buttons inside the header should be tight and flat.
@@ -134,34 +157,13 @@
 		--btn-padding-y: var(--size-2xs);
 		--btn-padding-x: var(--size-2xs);
 		--shadow: none;
+		height: 1.75rem;
+		width: 1.75rem;
 	}
 }
 
 @mixin panel-body {
-	padding: var(--card-padding-y) var(--card-padding-x);
-
-	ul, ol {
-		padding-left: 1.5em;
-		margin-bottom: var(--size-md);
-
-		li {
-			margin-bottom: var(--size-xs);
-			line-height: 1.7;
-			list-style: inherit;
-
-			&:last-child {
-				margin-bottom: 0;
-			}
-		}
-	}
-
-	ul {
-		list-style-type: disc;
-	}
-
-	ol {
-		list-style-type: decimal;
-	}
+	padding: var(--padding-y) var(--padding-x);
 
 	&:has(> table),
 	&:has(> .table-container) {
@@ -206,7 +208,7 @@
 }
 
 @mixin panel-footer {
-	padding: var(--card-padding-y) var(--card-padding-x);
+	padding: var(--padding-y) var(--padding-x);
 	@include border-t;
 	--color-bg: var(--bg-sunken);
 	background: var(--color-bg);
@@ -248,13 +250,12 @@
 }
 
 // ─── Card accents (Tabler-inspired colored lines) ──────
-// Accent reads --color-accent (solid) for borders, --color-primary
-// (raw triplet) for alpha hover tints — see plan §0.3.
+// Accent reads --color-accent for borders and hover wash tint (--tint-hover).
 // Usage: #my-card { @include card; @include card-accent-top; }
 
 @mixin _card-accent-base {
 	&:hover {
-		background-color: color-mix(in srgb, var(--color-accent) 4%, transparent);
+		background-color: color-mix(in srgb, var(--color-accent) var(--tint-hover), transparent);
 	}
 }
 
@@ -334,6 +335,13 @@
 	> footer { @include panel-footer; }
 }
 
+// ─── Frosted Glass ──────────────────────────────────────
+@mixin frosted-glass($opacity: 0.85, $blur: 12px) {
+	background-color: color-mix(in srgb, var(--color-bg) calc(#{$opacity} * 100%), transparent);
+	-webkit-backdrop-filter: blur(#{$blur});
+	backdrop-filter: blur(#{$blur});
+}
+
 // ─── Floating panel ────────────────────────────────────
 // Chrome recipe for floating overlays (popover, dropdown menu, toast).
 // Rebinds --color-bg to elevated surface and --shadow to floating
@@ -349,7 +357,8 @@
 	border-inline-start: var(--border-inline-start, var(--border-width) solid var(--color-border));
 	border-inline-end:   var(--border-inline-end,   var(--border-width) solid var(--color-border));
 	border-radius: var(--radius);
-	box-shadow: var(--shadow);
+	box-shadow: var(--shadow), var(--surface-highlight, inset 0 0 0 0 transparent);
+	@include frosted-glass(0.92, 10px);
 	// z-index is the caller's responsibility: top-layer consumers (dropdown,
 	// popover, tooltip portal) don't need one; standalone consumers do —
 	// see [data-ln-table] .column-filter-dropdown in components/_filter.scss.

package/theme/config/mixins/_chart.scss

@@ -0,0 +1,82 @@
+// Responsive SVG dataset chart. Geometry belongs to ln-chart; every visual
+// decision is exposed as a re-bindable CSS custom property.
+//
+// Usage:
+//   .chart { @include chart; }
+
+@mixin chart {
+	--chart-height: 20rem;
+	--chart-gap: 0.75rem;
+	--chart-radius: var(--radius-md);
+	--chart-line-color: hsl(var(--color-primary));
+	--chart-line-width: 2px;
+	--chart-area-color: hsl(var(--color-primary) / 0.16);
+	--chart-grid-color: var(--border-subtle);
+	--chart-grid-column-size: 12.5%;
+	--chart-grid-row-size: 25%;
+	--chart-label-color: var(--fg-muted);
+
+	display: grid;
+	gap: var(--chart-gap);
+	min-inline-size: 0;
+
+	.chart__plot {
+		display: block;
+		inline-size: 100%;
+		block-size: var(--chart-height);
+		border-radius: var(--chart-radius);
+		background-image:
+			linear-gradient(to right, var(--chart-grid-color) 1px, transparent 1px),
+			linear-gradient(to bottom, var(--chart-grid-color) 1px, transparent 1px);
+		background-size: var(--chart-grid-column-size) 100%, 100% var(--chart-grid-row-size);
+		overflow: visible;
+	}
+
+	.chart__line {
+		fill: none;
+		stroke: var(--chart-line-color);
+		stroke-width: var(--chart-line-width);
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		vector-effect: non-scaling-stroke;
+	}
+
+	.chart__area {
+		fill: var(--chart-area-color);
+		stroke: none;
+	}
+
+	.chart__labels {
+		display: grid;
+		grid-auto-flow: column;
+		grid-auto-columns: minmax(4rem, 1fr);
+		gap: var(--chart-gap);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		color: var(--chart-label-color);
+		font-size: 0.75rem;
+		line-height: 1.25;
+		overflow-x: auto;
+		scrollbar-width: thin;
+	}
+
+	.chart__label {
+		min-inline-size: 0;
+		text-align: center;
+	}
+
+	.chart__summary {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--chart-gap);
+		color: var(--chart-label-color);
+		font-size: 0.875rem;
+	}
+
+	.chart__empty {
+		margin: 0;
+		color: var(--chart-label-color);
+		text-align: center;
+	}
+}

package/{scss → theme}/config/mixins/_collapsible.scss

@@ -14,7 +14,8 @@
 		transition: grid-template-rows var(--transition-base);
 	}
 
-	&.open {
+	&.open,
+	&[data-ln-toggle="open"] {
 		grid-template-rows: 1fr;
 	}
 }

package/{scss → theme}/config/mixins/_colors.scss

@@ -23,24 +23,18 @@
 // alert, badge, etc.) picks up the status color through inherited
 // custom-property values — no per-mixin redeclare required.
 @mixin semantic-color($family) {
-	// Re-bind the base color and the theme-controlled tint companions.
+	// Re-bind the base color.
 	// --color-primary-hover / -focus are NOT rebound — consumers derive
 	// hover/focus from --color-accent locally via CSS relative color
 	// syntax. See _btn.scss / _form.scss / _data-table.scss / _global.scss
-	// for the derivation pattern. --color-primary-light / -lighter ARE
-	// rebound because their values are theme-controlled (light themes
-	// use near-white tints, dark themes use subtle dark surfaces) and
-	// cannot be derived from the base.
-	--color-primary:         var(--color-#{$family});
-	--color-primary-light:   var(--color-#{$family}-light);
-	--color-primary-lighter: var(--color-#{$family}-lighter);
+	// for the derivation pattern.
+	--color-primary: var(--color-#{$family});
 
 	// Re-declare accent vocabulary at this scope so var() resolves
-	// here instead of staying frozen at :root. Without this, descendants
-	// reading --color-accent get :root's primary blue regardless of the
-	// semantic class. --color-accent-fg stays at :root (white) — text on
-	// any colored accent surface should stay white.
+	// here instead of staying frozen at an ancestor scope. Without this, descendants
+	// reading --color-accent get the ancestor's primary blue regardless of the
+	// semantic class. --color-accent-fg resolves to white from the derivation chain.
 	--color-accent:             hsl(var(--color-primary));
-	--color-accent-tint:        hsl(var(--color-primary-lighter));
-	--color-accent-tint-strong: hsl(var(--color-primary-light));
+	--color-accent-tint:        hsl(var(--color-#{$family}-lighter));
+	--color-accent-tint-strong: hsl(var(--color-#{$family}-light));
 }

package/{scss → theme}/config/mixins/_diagnostics.scss

@@ -1,48 +1,48 @@
-@use 'colors' as *;
-@use 'spacing' as *;
-@use 'position' as *;
-
-// ─── DOM Diagnostics & Linter Mixins ───────────────────────────
-// These mixins are for developer-only diagnostic overlays and validations.
-// They should be completely isolated from production bundles.
-
-// Generic block element DOM diagnostic error
-// Applies a red dashed border and a prominent warning banner at the top.
-@mixin dev-dom-error($message) {
-	outline: 2px dashed hsl(var(--color-error));
-	@include relative;
-
-	&::before {
-		content: " ⚠ #{$message}";
-		display: block;
-		background: color-mix(in srgb, hsl(var(--color-error)) 15%, transparent);
-		color: hsl(var(--color-error));
-		padding: var(--size-xs) var(--size-sm);
-		font-size: var(--text-xs, 0.75rem);
-		font-weight: bold;
-		border-bottom: 1px solid hsl(var(--color-strong));
-	}
-}
-
-// Generic inline/element-level DOM diagnostic warning
-// Appends a red inline text warning adjacent to the targeted element.
-@mixin dev-inline-error($message) {
-	&::after {
-		content: " ⚠ #{$message}";
-		color: hsl(var(--color-error));
-		font-weight: normal;
-		white-space: nowrap;
-		margin-inline-start: var(--size-xs, 0.5rem);
-	}
-}
-
-// Replaced-element DOM diagnostic error (img, video, iframe, etc.)
-// Replaced elements do NOT render ::before/::after generated content, so this
-// mixin uses a visible outline + translucent wash instead of a text label.
-// The human-readable reason is carried by surrounding copy (e.g. a demo
-// section header), not by a pseudo-element.
-@mixin dev-replaced-error {
-	outline: 2px dashed hsl(var(--color-error));
-	outline-offset: var(--size-xs);
-	background: color-mix(in srgb, hsl(var(--color-error)) 15%, transparent);
-}
+@use 'colors' as *;
+@use 'spacing' as *;
+@use 'position' as *;
+
+// ─── DOM Diagnostics & Linter Mixins ───────────────────────────
+// These mixins are for developer-only diagnostic overlays and validations.
+// They should be completely isolated from production bundles.
+
+// Generic block element DOM diagnostic error
+// Applies a red dashed border and a prominent warning banner at the top.
+@mixin dev-dom-error($message) {
+	outline: 2px dashed hsl(var(--color-error));
+	@include relative;
+
+	&::before {
+		content: " ⚠ #{$message}";
+		display: block;
+		background: color-mix(in srgb, hsl(var(--color-error)) 15%, transparent);
+		color: hsl(var(--color-error));
+		padding: var(--size-xs) var(--size-sm);
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: bold;
+		border-bottom: 1px solid hsl(var(--color-strong));
+	}
+}
+
+// Generic inline/element-level DOM diagnostic warning
+// Appends a red inline text warning adjacent to the targeted element.
+@mixin dev-inline-error($message) {
+	&::after {
+		content: " ⚠ #{$message}";
+		color: hsl(var(--color-error));
+		font-weight: normal;
+		white-space: nowrap;
+		margin-inline-start: var(--size-xs, 0.5rem);
+	}
+}
+
+// Replaced-element DOM diagnostic error (img, video, iframe, etc.)
+// Replaced elements do NOT render ::before/::after generated content, so this
+// mixin uses a visible outline + translucent wash instead of a text label.
+// The human-readable reason is carried by surrounding copy (e.g. a demo
+// section header), not by a pseudo-element.
+@mixin dev-replaced-error {
+	outline: 2px dashed hsl(var(--color-error));
+	outline-offset: var(--size-xs);
+	background: color-mix(in srgb, hsl(var(--color-error)) 15%, transparent);
+}