@readme/markdown 15.10.0 → 15.10.1

package/dist/render-fixture.css

@@ -1,5 +1,5 @@
 .Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:rgba(var(--color-bg-page-rgb, white), 1);border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.Accordion>.Accordion-title{display:flex}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-title::marker{content:""}.Accordion-title::-webkit-details-marker{display:none}.Accordion-toggleIcon,.Accordion-toggleIcon_opened{color:var(--color-text-minimum, #637288);font-size:14px;margin-left:5px;margin-right:10px;transition:transform .1s}.Accordion-toggleIcon_opened,.Accordion-toggleIcon_opened_opened{transform:rotate(90deg)}.Accordion-icon{color:var(--project-color-primary, inherit);margin-right:10px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:5px 15px 0 15px}.Accordion-content>*{margin-bottom:var(--markdown-spacing, 15px)}
-.CardsGrid{--CardsGrid-gap: 1.5em;--CardsGrid-columns: auto-fit;--CardsGrid-cardWidth: auto;display:grid;gap:var(--CardsGrid-gap);grid-template-columns:repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr))}.Card{--Card-badge-bg-color: var(--yellow);--Card-badge-color: var(--yellow10);--Card-content-color: var(--color-text-minimum);--Card-gap: 0.25em;--Card-href-arrow-opacity: 0;--Card-href-arrow-transform: translateX(-5px);--Card-icon-color: var(--color-text-default);--Card-icon-opacity: 0.65;--Card-icon-opacity-hover: 0.75;--Card-line-height: 1.4;--Card-shadow: none;--Card-title-color: var(--color-text-default);background:var(--Card-bg-color);border:1px solid var(--Card-border-color);border-radius:var(--border-radius-lg);box-shadow:var(--Card-shadow);display:flex;flex-direction:var(--Card-layout);gap:var(--Card-gap);line-height:var(--Card-line-height);padding:var(--Card-padding);text-decoration:none}.Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-border-color: var(--color-border-default);--Card-layout: column;--Card-padding: 1.5em}.rm-ReadMe[data-color-mode=dark] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}@media(prefers-color-scheme: dark){.rm-ReadMe[data-color-mode=system] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}}.Card_tile{--Card-gap: 1em;--Card-icon-opacity: 0.5;--Card-layout: row}.Card_tile .Card-content{--Card-gap: 0}.Card[href]:not([href=""]){color:inherit;text-decoration:none}.Card[href]:not([href=""]):hover,.Card[href]:not([href=""]):active,.Card[href]:not([href=""]):focus{--Card-icon-opacity: var(--Card-icon-opacity-hover);--Card-href-arrow-opacity: 0.75;--Card-href-arrow-transform: none;background:var(--Card-bg-color-hover)}.Card-icon{color:var(--Card-icon-color);font-size:1.4em;margin-bottom:.5em;opacity:var(--Card-icon-opacity);transition:opacity var(--transition-timing) var(--transition-fast)}.Card-title{align-items:flex-start;color:var(--Card-title-color);display:flex;gap:.5em;font-weight:var(--font-weight-bold)}.Card-badge{align-items:center;background:var(--Card-badge-bg-color);border-radius:1em;color:var(--Card-badge-color);font-size:.6em;padding:0 .5em;display:inline-flex;position:relative;top:.5em}.Card-arrow{font-size:.8em;opacity:var(--Card-href-arrow-opacity);position:relative;top:.375em;transition:opacity var(--transition-timing) var(--transition-fast),transform var(--transition-timing) var(--transition-fast);transform:var(--Card-href-arrow-transform)}.Card-content{color:var(--Card-content-color);display:flex;flex-direction:column;font-size:1em;gap:var(--Card-gap)}.Card-content p:last-child{margin-bottom:0}
+.CardsGrid{--CardsGrid-gap: 1.5em;--CardsGrid-columns: auto-fit;--CardsGrid-cardWidth: auto;display:grid;gap:var(--CardsGrid-gap);grid-template-columns:repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr))}.CardsGrid_wrap{grid-template-columns:repeat(auto-fill, minmax(max(min(var(--CardsGrid-cardWidth), 100%), (100% - (var(--CardsGrid-columns) - 1) * var(--CardsGrid-gap)) / var(--CardsGrid-columns)), 1fr))}.Card{--Card-badge-bg-color: var(--yellow);--Card-badge-color: var(--yellow10);--Card-content-color: var(--color-text-minimum);--Card-gap: 0.25em;--Card-href-arrow-opacity: 0;--Card-href-arrow-transform: translateX(-5px);--Card-icon-color: var(--color-text-default);--Card-icon-opacity: 0.65;--Card-icon-opacity-hover: 0.75;--Card-line-height: 1.4;--Card-shadow: none;--Card-title-color: var(--color-text-default);background:var(--Card-bg-color);border:1px solid var(--Card-border-color);border-radius:var(--border-radius-lg);box-shadow:var(--Card-shadow);display:flex;flex-direction:var(--Card-layout);gap:var(--Card-gap);line-height:var(--Card-line-height);padding:var(--Card-padding);text-decoration:none}.Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-border-color: var(--color-border-default);--Card-layout: column;--Card-padding: 1.5em}.rm-ReadMe[data-color-mode=dark] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}@media(prefers-color-scheme: dark){.rm-ReadMe[data-color-mode=system] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}}.Card_tile{--Card-gap: 1em;--Card-icon-opacity: 0.5;--Card-layout: row}.Card_tile .Card-content{--Card-gap: 0}.Card[href]:not([href=""]){color:inherit;text-decoration:none}.Card[href]:not([href=""]):hover,.Card[href]:not([href=""]):active,.Card[href]:not([href=""]):focus{--Card-icon-opacity: var(--Card-icon-opacity-hover);--Card-href-arrow-opacity: 0.75;--Card-href-arrow-transform: none;background:var(--Card-bg-color-hover)}.Card-icon{color:var(--Card-icon-color);font-size:1.4em;margin-bottom:.5em;opacity:var(--Card-icon-opacity);transition:opacity var(--transition-timing) var(--transition-fast)}.Card-title{align-items:flex-start;color:var(--Card-title-color);display:flex;gap:.5em;font-weight:var(--font-weight-bold)}.Card-badge{align-items:center;background:var(--Card-badge-bg-color);border-radius:1em;color:var(--Card-badge-color);font-size:.6em;padding:0 .5em;display:inline-flex;position:relative;top:.5em}.Card-arrow{font-size:.8em;opacity:var(--Card-href-arrow-opacity);position:relative;top:.375em;transition:opacity var(--transition-timing) var(--transition-fast),transform var(--transition-timing) var(--transition-fast);transform:var(--Card-href-arrow-transform)}.Card-content{color:var(--Card-content-color);display:flex;flex-direction:column;font-size:1em;gap:var(--Card-gap)}.Card-content p:last-child{margin-bottom:0}
 .Columns{display:grid;gap:var(--md, 20px)}@media(max-width: 414px){.Columns{grid-template-columns:1fr !important}}
 .TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-size:15px;font-weight:600;margin-right:15px;padding:0;padding-bottom:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--color-tab-active, currentcolor);color:var(--color-tab-active, currentcolor);font-size:15px;font-weight:600;margin-right:15px;margin-bottom:-2px;padding:0;padding-bottom:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}.TabGroup-icon{color:var(--project-color-primary, inherit);margin-right:10px}.TabGroup .TabContent{color:var(--color-text-muted, #4f5a66)}:where(.TabGroup .TabContent>*:not(:last-child)){margin-bottom:var(--markdown-spacing, 15px)}
 

package/dist/render-fixture.css.map

@@ -1 +1 @@
-{"version":3,"file":"render-fixture.css","mappings":"AAAA,WACE,oDACA,iEACA,kBAEA,iBACE,mBACA,oDACA,SACA,kBACA,yCACA,eACA,eACA,gBACA,aACA,kBACA,gBACA,WAEA,4BACE,aAGF,uBACE,sDAGF,kCACE,4BACA,6BAGF,yBACE,WAGF,yCACE,aAIJ,mDAEE,yCACA,eACA,gBACA,kBACA,yBAEA,iEACE,wBAIJ,gBACE,4CACA,kBAGF,mBACE,uCACA,wBAEA,qBACE,4C;AC5DN,WACE,uBACA,8BACA,4BAEA,aACA,yBACA,gGAGF,MAGE,qCACA,oCACA,gDACA,mBACA,6BACA,8CACA,6CACA,0BACA,gCACA,wBACA,oBACA,8CAEA,gCACA,0CACA,sCACA,8BACA,aACA,kCACA,oBACA,oCACA,4BACA,qBAEA,WACE,2DACA,iEACA,iDACA,sBACA,sBCTA,4CDYE,8DACA,mECRA,mCADF,8CDQE,8DACA,oEAIJ,WACE,gBACA,yBACA,mBAEA,yBACE,cAKJ,2BACE,cACA,qBAEA,oGAGE,oDACA,gCACA,kCAEA,sCAIJ,WACE,6BACA,gBACA,mBACA,iCACA,mEAGF,YACE,uBACA,8BACA,aACA,SACA,oCAGF,YACE,mBACA,sCACA,kBACA,8BACA,eACA,eACA,oBACA,kBACA,SAGF,YACE,eACA,uCACA,kBACA,WACA,4HACE,CAEF,2CAGF,cACE,gCACA,aACA,sBACA,cACA,oBAEA,2BACE,gB;AE7HN,SACE,aACA,oBAEA,yBAJF,SAKI,sC;ACNF,cACE,oEACA,mBAGF,cACE,gBACA,SACA,yCACA,eACA,eACA,gBACA,kBACA,UACA,oBAEA,qBACE,gBACA,SACA,0DACA,4CACA,eACA,gBACA,kBACA,mBACA,UACA,oBAGF,oBACE,uCAIJ,eACE,4CACA,kBAGF,sBACE,uCAIJ,iDACE,4C","sources":["webpack://@readme/markdown/./components/Accordion/style.scss","webpack://@readme/markdown/./components/Cards/style.scss","webpack://@readme/markdown/./styles/mixins/when-color-mode-dark.scss","webpack://@readme/markdown/./components/Columns/style.scss","webpack://@readme/markdown/./components/Tabs/style.scss"],"sourcesContent":[".Accordion {\n  background: rgba(var(--color-bg-page-rgb, white), 1);\n  border: 1px solid var(--color-border-default, rgba(black, 0.1));\n  border-radius: 5px;\n\n  &-title {\n    align-items: center;\n    background: rgba(var(--color-bg-page-rgb, white), 1);\n    border: 0;\n    border-radius: 5px;\n    color: var(--color-text-default, #384248);\n    cursor: pointer;\n    font-size: 16px;\n    font-weight: 500;\n    padding: 10px;\n    position: relative;\n    text-align: left;\n    width: 100%;\n    \n    .Accordion > & {\n      display: flex;\n    }\n\n    &:hover {\n      background: var(--color-bg-hover, rgba(black, 0.05));\n    }\n\n    .Accordion[open] & {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n\n    &::marker {\n      content: \"\";\n    }\n\n    &::-webkit-details-marker {\n      display: none;\n    } \n  }\n\n  &-toggleIcon,\n  &-toggleIcon_opened {\n    color: var(--color-text-minimum, #637288);\n    font-size: 14px;\n    margin-left: 5px;\n    margin-right: 10px;\n    transition: transform 0.1s;\n\n    &_opened {\n      transform: rotate(90deg);\n    }\n  }\n\n  &-icon {\n    color: var(--project-color-primary, inherit);\n    margin-right: 10px;\n  }\n\n  &-content {\n    color: var(--color-text-muted, #4f5a66);\n    padding: 5px 15px 0 15px;\n\n    > * {\n      margin-bottom: var(--markdown-spacing, 15px);\n    }\n  }\n}\n","@import '../../styles/mixins/when-color-mode-dark.scss';\n\n$iphone-plus: 414px;\n\n.CardsGrid {\n  --CardsGrid-gap: 1.5em;\n  --CardsGrid-columns: auto-fit;\n  --CardsGrid-cardWidth: auto;\n\n  display: grid;\n  gap: var(--CardsGrid-gap);\n  grid-template-columns: repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr));\n}\n\n.Card {\n  $card: &;\n\n  --Card-badge-bg-color: var(--yellow);\n  --Card-badge-color: var(--yellow10);\n  --Card-content-color: var(--color-text-minimum);\n  --Card-gap: 0.25em;\n  --Card-href-arrow-opacity: 0;\n  --Card-href-arrow-transform: translateX(-5px);\n  --Card-icon-color: var(--color-text-default);\n  --Card-icon-opacity: 0.65;\n  --Card-icon-opacity-hover: 0.75;\n  --Card-line-height: 1.4;\n  --Card-shadow: none;\n  --Card-title-color: var(--color-text-default);\n\n  background: var(--Card-bg-color);\n  border: 1px solid var(--Card-border-color);\n  border-radius: var(--border-radius-lg);\n  box-shadow: var(--Card-shadow);\n  display: flex;\n  flex-direction: var(--Card-layout);\n  gap: var(--Card-gap);\n  line-height: var(--Card-line-height);\n  padding: var(--Card-padding);\n  text-decoration: none;\n\n  &_card {\n    --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);\n    --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);\n    --Card-border-color: var(--color-border-default);\n    --Card-layout: column;\n    --Card-padding: 1.5em;\n\n    @include when-color-mode-dark('.rm-ReadMe') {\n      --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);\n      --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1);\n    }\n  }\n\n  &_tile {\n    --Card-gap: 1em;\n    --Card-icon-opacity: 0.5;\n    --Card-layout: row;\n\n    #{$card}-content {\n      --Card-gap: 0;\n    }\n  }\n\n  // needs specificity to override the default link styles; while preserving logic for empty hrefs\n  &[href]:not([href='']) {\n    color: inherit;\n    text-decoration: none;\n\n    &:hover,\n    &:active,\n    &:focus {\n      --Card-icon-opacity: var(--Card-icon-opacity-hover);\n      --Card-href-arrow-opacity: 0.75;\n      --Card-href-arrow-transform: none;\n\n      background: var(--Card-bg-color-hover);\n    }\n  }\n\n  &-icon {\n    color: var(--Card-icon-color);\n    font-size: 1.4em;\n    margin-bottom: 0.5em;\n    opacity: var(--Card-icon-opacity);\n    transition: opacity var(--transition-timing) var(--transition-fast);\n  }\n\n  &-title {\n    align-items: flex-start;\n    color: var(--Card-title-color);\n    display: flex;\n    gap: 0.5em;\n    font-weight: var(--font-weight-bold);\n  }\n\n  &-badge {\n    align-items: center;\n    background: var(--Card-badge-bg-color);\n    border-radius: 1em;\n    color: var(--Card-badge-color);\n    font-size: 0.6em;\n    padding: 0 0.5em;\n    display: inline-flex;\n    position: relative;\n    top: 0.5em;\n  }\n\n  &-arrow {\n    font-size: 0.8em;\n    opacity: var(--Card-href-arrow-opacity);\n    position: relative;\n    top: 0.375em;\n    transition:\n      opacity var(--transition-timing) var(--transition-fast),\n      transform var(--transition-timing) var(--transition-fast);\n    transform: var(--Card-href-arrow-transform);\n  }\n\n  &-content {\n    color: var(--Card-content-color);\n    display: flex;\n    flex-direction: column;\n    font-size: 1em;\n    gap: var(--Card-gap);\n\n    p:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n","/**\n * Dark styles keyed off `$root`'s own `data-color-mode`, not any ancestor.\n * Unlike `dark-mode` (which matches ANY ancestor carrying the attribute —\n * see the warning on that mixin), this only fires when `$root` itself\n * declares the dark/system mode. None of this package's components carry\n * `data-color-mode` on their own root, so callers must pass the selector\n * for whichever wrapper actually carries it in their consuming app — there\n * is no default.\n *\n * IMPORTANT: this package ships one precompiled `dist/main.css` — there is\n * no build step where a consumer can supply their own value for `$root`.\n * Whatever gets passed at each `@include` call site below is permanent for\n * every installer of this package. Call sites currently hardcode\n * `'.rm-ReadMe'`, readme's hub color-mode wrapper, because readme is this\n * package's only real consumer today. If that ever changes, this becomes\n * silently wrong (not an error — dark mode just never activates) for any\n * consumer without that exact class in their DOM, and `$root` should be\n * dropped in favor of each component resolving its own nearest\n * `[data-color-mode]` ancestor at mount via `Element.closest()` and\n * stamping it onto its own root, so the CSS can self-anchor with no\n * hardcoded selector at all.\n *\n * $global: wrap the root-anchor selector in :global(), for use when this\n * file is imported into a CSS-module context (mirrors `dark-mode`'s param).\n */\n@mixin when-color-mode-dark($root, $global: false) {\n  @if $global {\n    :global(#{$root}[data-color-mode='dark']) & {\n      @content;\n    }\n\n    :global(#{$root}[data-color-mode='system']) & {\n      @media (prefers-color-scheme: dark) {\n        @content;\n      }\n    }\n  } @else {\n    #{$root}[data-color-mode='dark'] & {\n      @content;\n    }\n\n    #{$root}[data-color-mode='system'] & {\n      @media (prefers-color-scheme: dark) {\n        @content;\n      }\n    }\n  }\n}\n","$iphone-plus: 414px;\n\n.Columns {\n  display: grid;\n  gap: var(--md, 20px);\n\n  @media (max-width: $iphone-plus) {\n    grid-template-columns: 1fr !important;\n  }\n}\n",".TabGroup {\n  &-nav {\n    border-bottom: solid var(--color-border-default, #{rgba(black, 0.1)});\n    margin-bottom: 15px;\n  }\n\n  &-tab {\n    background: none;\n    border: 0;\n    color: var(--color-text-minimum, #637288);\n    cursor: pointer;\n    font-size: 15px;\n    font-weight: 600;\n    margin-right: 15px;\n    padding: 0;\n    padding-bottom: 10px;\n\n    &_active {\n      background: none;\n      border: 0;\n      border-bottom: solid var(--color-tab-active, currentcolor);\n      color: var(--color-tab-active, currentcolor);\n      font-size: 15px;\n      font-weight: 600;\n      margin-right: 15px;\n      margin-bottom: -2px;\n      padding: 0;\n      padding-bottom: 10px;\n    }\n\n    &:hover {\n      color: var(--color-text-muted, #4f5a66);\n    }\n  }\n\n  &-icon {\n    color: var(--project-color-primary, inherit);\n    margin-right: 10px;\n  }\n\n  .TabContent {\n    color: var(--color-text-muted, #4f5a66);\n  }\n}\n\n:where(.TabGroup .TabContent > *:not(:last-child)) {\n  margin-bottom: var(--markdown-spacing, 15px);\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"render-fixture.css","mappings":"AAAA,WACE,oDACA,iEACA,kBAEA,iBACE,mBACA,oDACA,SACA,kBACA,yCACA,eACA,eACA,gBACA,aACA,kBACA,gBACA,WAEA,4BACE,aAGF,uBACE,sDAGF,kCACE,4BACA,6BAGF,yBACE,WAGF,yCACE,aAIJ,mDAEE,yCACA,eACA,gBACA,kBACA,yBAEA,iEACE,wBAIJ,gBACE,4CACA,kBAGF,mBACE,uCACA,wBAEA,qBACE,4C;AC5DN,WACE,uBACA,8BACA,4BAEA,aACA,yBACA,gGAIA,gBACE,4LAaJ,MAGE,qCACA,oCACA,gDACA,mBACA,6BACA,8CACA,6CACA,0BACA,gCACA,wBACA,oBACA,8CAEA,gCACA,0CACA,sCACA,8BACA,aACA,kCACA,oBACA,oCACA,4BACA,qBAEA,WACE,2DACA,iEACA,iDACA,sBACA,sBCxBA,4CD2BE,8DACA,mECvBA,mCADF,8CDuBE,8DACA,oEAIJ,WACE,gBACA,yBACA,mBAEA,yBACE,cAKJ,2BACE,cACA,qBAEA,oGAGE,oDACA,gCACA,kCAEA,sCAIJ,WACE,6BACA,gBACA,mBACA,iCACA,mEAGF,YACE,uBACA,8BACA,aACA,SACA,oCAGF,YACE,mBACA,sCACA,kBACA,8BACA,eACA,eACA,oBACA,kBACA,SAGF,YACE,eACA,uCACA,kBACA,WACA,4HACE,CAEF,2CAGF,cACE,gCACA,aACA,sBACA,cACA,oBAEA,2BACE,gB;AE5IN,SACE,aACA,oBAEA,yBAJF,SAKI,sC;ACNF,cACE,oEACA,mBAGF,cACE,gBACA,SACA,yCACA,eACA,eACA,gBACA,kBACA,UACA,oBAEA,qBACE,gBACA,SACA,0DACA,4CACA,eACA,gBACA,kBACA,mBACA,UACA,oBAGF,oBACE,uCAIJ,eACE,4CACA,kBAGF,sBACE,uCAIJ,iDACE,4C","sources":["webpack://@readme/markdown/./components/Accordion/style.scss","webpack://@readme/markdown/./components/Cards/style.scss","webpack://@readme/markdown/./styles/mixins/when-color-mode-dark.scss","webpack://@readme/markdown/./components/Columns/style.scss","webpack://@readme/markdown/./components/Tabs/style.scss"],"sourcesContent":[".Accordion {\n  background: rgba(var(--color-bg-page-rgb, white), 1);\n  border: 1px solid var(--color-border-default, rgba(black, 0.1));\n  border-radius: 5px;\n\n  &-title {\n    align-items: center;\n    background: rgba(var(--color-bg-page-rgb, white), 1);\n    border: 0;\n    border-radius: 5px;\n    color: var(--color-text-default, #384248);\n    cursor: pointer;\n    font-size: 16px;\n    font-weight: 500;\n    padding: 10px;\n    position: relative;\n    text-align: left;\n    width: 100%;\n    \n    .Accordion > & {\n      display: flex;\n    }\n\n    &:hover {\n      background: var(--color-bg-hover, rgba(black, 0.05));\n    }\n\n    .Accordion[open] & {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n\n    &::marker {\n      content: \"\";\n    }\n\n    &::-webkit-details-marker {\n      display: none;\n    } \n  }\n\n  &-toggleIcon,\n  &-toggleIcon_opened {\n    color: var(--color-text-minimum, #637288);\n    font-size: 14px;\n    margin-left: 5px;\n    margin-right: 10px;\n    transition: transform 0.1s;\n\n    &_opened {\n      transform: rotate(90deg);\n    }\n  }\n\n  &-icon {\n    color: var(--project-color-primary, inherit);\n    margin-right: 10px;\n  }\n\n  &-content {\n    color: var(--color-text-muted, #4f5a66);\n    padding: 5px 15px 0 15px;\n\n    > * {\n      margin-bottom: var(--markdown-spacing, 15px);\n    }\n  }\n}\n","@import '../../styles/mixins/when-color-mode-dark.scss';\n\n$iphone-plus: 414px;\n\n.CardsGrid {\n  --CardsGrid-gap: 1.5em;\n  --CardsGrid-columns: auto-fit;\n  --CardsGrid-cardWidth: auto;\n\n  display: grid;\n  gap: var(--CardsGrid-gap);\n  grid-template-columns: repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr));\n\n  // Treat a fixed column count as a maximum: each track is at least an Nth of the row (auto-fill keeps\n  // empty tracks so short rows stay N wide), and narrow rows drop columns instead of widening the page\n  &_wrap {\n    grid-template-columns: repeat(\n      auto-fill,\n      minmax(\n        max(\n          min(var(--CardsGrid-cardWidth), 100%),\n          calc((100% - (var(--CardsGrid-columns) - 1) * var(--CardsGrid-gap)) / var(--CardsGrid-columns))\n        ),\n        1fr\n      )\n    );\n  }\n}\n\n.Card {\n  $card: &;\n\n  --Card-badge-bg-color: var(--yellow);\n  --Card-badge-color: var(--yellow10);\n  --Card-content-color: var(--color-text-minimum);\n  --Card-gap: 0.25em;\n  --Card-href-arrow-opacity: 0;\n  --Card-href-arrow-transform: translateX(-5px);\n  --Card-icon-color: var(--color-text-default);\n  --Card-icon-opacity: 0.65;\n  --Card-icon-opacity-hover: 0.75;\n  --Card-line-height: 1.4;\n  --Card-shadow: none;\n  --Card-title-color: var(--color-text-default);\n\n  background: var(--Card-bg-color);\n  border: 1px solid var(--Card-border-color);\n  border-radius: var(--border-radius-lg);\n  box-shadow: var(--Card-shadow);\n  display: flex;\n  flex-direction: var(--Card-layout);\n  gap: var(--Card-gap);\n  line-height: var(--Card-line-height);\n  padding: var(--Card-padding);\n  text-decoration: none;\n\n  &_card {\n    --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);\n    --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);\n    --Card-border-color: var(--color-border-default);\n    --Card-layout: column;\n    --Card-padding: 1.5em;\n\n    @include when-color-mode-dark('.rm-ReadMe') {\n      --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);\n      --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1);\n    }\n  }\n\n  &_tile {\n    --Card-gap: 1em;\n    --Card-icon-opacity: 0.5;\n    --Card-layout: row;\n\n    #{$card}-content {\n      --Card-gap: 0;\n    }\n  }\n\n  // needs specificity to override the default link styles; while preserving logic for empty hrefs\n  &[href]:not([href='']) {\n    color: inherit;\n    text-decoration: none;\n\n    &:hover,\n    &:active,\n    &:focus {\n      --Card-icon-opacity: var(--Card-icon-opacity-hover);\n      --Card-href-arrow-opacity: 0.75;\n      --Card-href-arrow-transform: none;\n\n      background: var(--Card-bg-color-hover);\n    }\n  }\n\n  &-icon {\n    color: var(--Card-icon-color);\n    font-size: 1.4em;\n    margin-bottom: 0.5em;\n    opacity: var(--Card-icon-opacity);\n    transition: opacity var(--transition-timing) var(--transition-fast);\n  }\n\n  &-title {\n    align-items: flex-start;\n    color: var(--Card-title-color);\n    display: flex;\n    gap: 0.5em;\n    font-weight: var(--font-weight-bold);\n  }\n\n  &-badge {\n    align-items: center;\n    background: var(--Card-badge-bg-color);\n    border-radius: 1em;\n    color: var(--Card-badge-color);\n    font-size: 0.6em;\n    padding: 0 0.5em;\n    display: inline-flex;\n    position: relative;\n    top: 0.5em;\n  }\n\n  &-arrow {\n    font-size: 0.8em;\n    opacity: var(--Card-href-arrow-opacity);\n    position: relative;\n    top: 0.375em;\n    transition:\n      opacity var(--transition-timing) var(--transition-fast),\n      transform var(--transition-timing) var(--transition-fast);\n    transform: var(--Card-href-arrow-transform);\n  }\n\n  &-content {\n    color: var(--Card-content-color);\n    display: flex;\n    flex-direction: column;\n    font-size: 1em;\n    gap: var(--Card-gap);\n\n    p:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n","/**\n * Dark styles keyed off `$root`'s own `data-color-mode`, not any ancestor.\n * Unlike `dark-mode` (which matches ANY ancestor carrying the attribute —\n * see the warning on that mixin), this only fires when `$root` itself\n * declares the dark/system mode. None of this package's components carry\n * `data-color-mode` on their own root, so callers must pass the selector\n * for whichever wrapper actually carries it in their consuming app — there\n * is no default.\n *\n * IMPORTANT: this package ships one precompiled `dist/main.css` — there is\n * no build step where a consumer can supply their own value for `$root`.\n * Whatever gets passed at each `@include` call site below is permanent for\n * every installer of this package. Call sites currently hardcode\n * `'.rm-ReadMe'`, readme's hub color-mode wrapper, because readme is this\n * package's only real consumer today. If that ever changes, this becomes\n * silently wrong (not an error — dark mode just never activates) for any\n * consumer without that exact class in their DOM, and `$root` should be\n * dropped in favor of each component resolving its own nearest\n * `[data-color-mode]` ancestor at mount via `Element.closest()` and\n * stamping it onto its own root, so the CSS can self-anchor with no\n * hardcoded selector at all.\n *\n * $global: wrap the root-anchor selector in :global(), for use when this\n * file is imported into a CSS-module context (mirrors `dark-mode`'s param).\n */\n@mixin when-color-mode-dark($root, $global: false) {\n  @if $global {\n    :global(#{$root}[data-color-mode='dark']) & {\n      @content;\n    }\n\n    :global(#{$root}[data-color-mode='system']) & {\n      @media (prefers-color-scheme: dark) {\n        @content;\n      }\n    }\n  } @else {\n    #{$root}[data-color-mode='dark'] & {\n      @content;\n    }\n\n    #{$root}[data-color-mode='system'] & {\n      @media (prefers-color-scheme: dark) {\n        @content;\n      }\n    }\n  }\n}\n","$iphone-plus: 414px;\n\n.Columns {\n  display: grid;\n  gap: var(--md, 20px);\n\n  @media (max-width: $iphone-plus) {\n    grid-template-columns: 1fr !important;\n  }\n}\n",".TabGroup {\n  &-nav {\n    border-bottom: solid var(--color-border-default, #{rgba(black, 0.1)});\n    margin-bottom: 15px;\n  }\n\n  &-tab {\n    background: none;\n    border: 0;\n    color: var(--color-text-minimum, #637288);\n    cursor: pointer;\n    font-size: 15px;\n    font-weight: 600;\n    margin-right: 15px;\n    padding: 0;\n    padding-bottom: 10px;\n\n    &_active {\n      background: none;\n      border: 0;\n      border-bottom: solid var(--color-tab-active, currentcolor);\n      color: var(--color-tab-active, currentcolor);\n      font-size: 15px;\n      font-weight: 600;\n      margin-right: 15px;\n      margin-bottom: -2px;\n      padding: 0;\n      padding-bottom: 10px;\n    }\n\n    &:hover {\n      color: var(--color-text-muted, #4f5a66);\n    }\n  }\n\n  &-icon {\n    color: var(--project-color-primary, inherit);\n    margin-right: 10px;\n  }\n\n  .TabContent {\n    color: var(--color-text-muted, #4f5a66);\n  }\n}\n\n:where(.TabGroup .TabContent > *:not(:last-child)) {\n  margin-bottom: var(--markdown-spacing, 15px);\n}\n"],"names":[],"sourceRoot":""}

package/dist/render-fixture.node.js

@@ -87207,8 +87207,11 @@ const Card = ({ badge, children, href, kind = 'card', icon, iconColor, LinkCompo
                 href && external_react_default().createElement("i", { "aria-hidden": "true", className: "Card-arrow fa-regular fa-arrow-right" }))),
             children)));
 };
+// max() can't take keyword widths like auto or min-content, so only wrap a length or a math expression
+const canWrapColumns = (columns, cardWidth) => Number(columns) > 0 && /^(\.?\d|(calc|min|max|clamp)\()/.test(cardWidth);
 const CardsGrid = ({ cardWidth = '200px', columns = 'auto-fit', children }) => {
-    return (external_react_default().createElement("div", { className: "CardsGrid", style: { '--CardsGrid-cardWidth': cardWidth, '--CardsGrid-columns': columns } }, children));
+    const className = canWrapColumns(columns, cardWidth) ? 'CardsGrid CardsGrid_wrap' : 'CardsGrid';
+    return (external_react_default().createElement("div", { className: className, style: { '--CardsGrid-cardWidth': cardWidth, '--CardsGrid-columns': columns } }, children));
 };
 /* harmony default export */ const Cards = (CardsGrid);
 
@@ -122641,6 +122644,7 @@ const rehypeMdxishComponents = ({ components, processMarkdown }) => {
 ;// ./processor/plugin/mdxish-handlers.ts
 
 
+
 // If hChildren is populated, it means the node holds a renderable value (e.g. React)
 // See evaluate-expressions.ts for more details
 // Otherwise, it's a simple value and we fall back to text
@@ -122706,8 +122710,30 @@ const embedHandler = (state, node) => {
         children: isMagicBlockEmbed ? [] : state.all(node),
     };
 };
+/**
+ * Renders a list item whose marker sits alone on its line with that line kept empty.
+ *
+ * `-` over an indented block (a sublist, a code block) parses to the same mdast as the
+ * block written on the marker's line, since CommonMark has no empty paragraph, so both
+ * would render as `- - B`. Positions still tell the spellings apart. A `<br>` holds the
+ * line open, which an empty `<p>` wouldn't.
+ */
+const listItemHandler = (state, node, parent) => {
+    const item = node;
+    const result = handlers_handlers.listItem(state, item, parent);
+    const first = item.children[0];
+    if (!first || first.type === 'paragraph')
+        return result;
+    const itemLine = item.position?.start.line;
+    const blockLine = first.position?.start.line;
+    if (itemLine === undefined || blockLine === undefined || blockLine <= itemLine)
+        return result;
+    result.children.unshift({ type: 'element', tagName: 'br', properties: {}, children: [] });
+    return result;
+};
 const mdxComponentHandlers = {
     embed: embedHandler,
+    listItem: listItemHandler,
     mdxFlowExpression: mdxExpressionHandler,
     mdxJsxFlowElement: mdxJsxElementHandler,
     mdxJsxTextElement: mdxJsxElementHandler,