@toybreaker/fiko 0.6.0 → 0.6.1

package/omg/5components.css

@@ -155,20 +155,13 @@ svg:not(:root) {
  */
 
 details.accordion {
-  border: var(--borderpx) solid var(--border_color);
-  border-radius: var(--radius);
-  overflow: hidden;
-}
-
-details.accordion + details.accordion {
-  margin-top: calc(var(--spaceV) * 0.5);
+  border-bottom: var(--borderpx) solid var(--border_color);
 }
 
 details.accordion > summary {
   display: flex;
   flex-direction: row;
   align-items: center;
-  gap: 1rem;
   padding: var(--spaceV) var(--spaceH);
   cursor: pointer;
   list-style: none;
@@ -189,38 +182,61 @@ details.accordion > summary a {
   text-decoration: none;
 }
 
+/* chevron — down arrow in currentColor, rotates 180° when open */
 details.accordion > summary::after {
-  content: var(--accordion_icon_closed, '+');
-  font-size: 1.4em;
-  font-weight: 300;
-  color: var(--cta);
+  content: '';
+  display: block;
+  width: 1.25em;
+  height: 1.25em;
   flex-shrink: 0;
-  line-height: 1;
-  transition: color var(--transition);
-}
-
-details.accordion[open] > summary {
-  border-bottom: var(--borderpx) solid var(--border_color);
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  transform: rotate(0deg);
+  transition: transform var(--transition);
+  order: 2;
+  margin-left: auto;
 }
 
 details.accordion[open] > summary::after {
-  content: var(--accordion_icon_open, '×');
+  transform: rotate(180deg);
 }
 
 details.accordion > summary:hover {
-  background: color-mix(in oklch, var(--cta), transparent 90%);
+  background: color-mix(in oklch, currentColor, transparent 94%);
 }
 
 details.accordion > :not(summary) {
   padding: var(--spaceV) var(--spaceH);
 }
 
+/* ── ACCORDION DOTTED — dot-leader modifier ─────── */
+/* Usage: <details class="accordion dotted">
+ * Adds a dotted leader between the label and the chevron.
+ */
+
+details.accordion.dotted > summary::before {
+  content: '';
+  flex: 1;
+  border-bottom: var(--borderpx) dotted currentColor;
+  margin-inline: 0.5rem;
+  align-self: center;
+  opacity: 0.3;
+  order: 1;
+}
+
 /* ── ACCORDION CHEVRON — SVG arrow marker ────────── */
 /* Modifier: <details class="accordion accordion_chevron">
- * Replaces +/× text with an animated SVG chevron via mask-image.
+ * Overrides default down-chevron with a right-pointing SVG arrow.
  * Closed: → pointing right. Open: rotated 90° pointing down.
  * Composable: stack with other modifiers for full editorial style.
- * Color inherits --cta; override with: style="--cta: var(--brand)"
+ * Color: currentColor by default; override with CSS custom property.
  */
 
 details.accordion.accordion_chevron > summary::after,
@@ -230,7 +246,7 @@ details.accordion.accordion_chevron[open] > summary::after {
   width: 1.25em;
   height: 1.25em;
   flex-shrink: 0;
-  background-color: var(--cta);
+  background-color: currentColor;
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18'/%3E%3C/svg%3E");
   -webkit-mask-size: contain;
   -webkit-mask-repeat: no-repeat;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toybreaker/fiko",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "LOOK GOOD OR DIE! — cascade layers, OKLCH colors, design tokens. Zero specificity wars. Smiling DX.",
   "license": "MIT",
   "author": "Toybreaker <hello@junglestar.co>",