lism-css 0.21.0 → 0.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/bin/cli.mjs +2 -2
  2. package/dist/components/atomic/Icon/presets.d.ts +28 -12
  3. package/dist/components/atomic/Icon/presets.js +38 -33
  4. package/dist/components/layout/AutoColumns/AutoColumns.stories.d.ts +1 -1
  5. package/dist/css/base/set.css +1 -1
  6. package/dist/css/base.css +1 -1
  7. package/dist/css/main.css +1 -1
  8. package/dist/css/main_no_layer.css +1 -1
  9. package/dist/css/primitives/layout.css +1 -1
  10. package/dist/css/props.css +1 -1
  11. package/dist/css/reset.css +1 -1
  12. package/dist/css/trait.css +1 -1
  13. package/dist/css/utility.css +1 -1
  14. package/dist/lib/getLayoutProps.d.ts +1 -1
  15. package/dist/lib/getLayoutProps.js +2 -2
  16. package/dist/lib/getLismProps.js +21 -20
  17. package/dist/lib/types/LayoutProps.d.ts +1 -1
  18. package/dist/lib/types/TraitProps.d.ts +1 -1
  19. package/package.json +32 -6
  20. package/src/scss/base/_html.scss +6 -20
  21. package/src/scss/base/set/_bleed.scss +1 -1
  22. package/src/scss/base/tokens/_tokens.scss +3 -3
  23. package/src/scss/primitives/layout/_autoColumns.scss +1 -1
  24. package/src/scss/props/_size.scss +2 -2
  25. package/src/scss/reset.scss +0 -3
  26. package/src/scss/trait/has/_gutter.scss +2 -1
  27. package/src/scss/trait/is/_container.scss +1 -1
  28. package/src/scss/utility/_divide.scss +2 -2
  29. package/config/__prop_list.js +0 -44
  30. package/config/__props.scss +0 -25
  31. package/config/default-config.ts +0 -9
  32. package/config/defaults/__props-memo.js +0 -45
  33. package/config/defaults/props.ts +0 -361
  34. package/config/defaults/tokens.ts +0 -27
  35. package/config/defaults/traits.ts +0 -13
  36. package/config/helper/minifyHtml.ts +0 -22
  37. package/config/helper.test.ts +0 -238
  38. package/config/helper.ts +0 -73
  39. package/config/index.ts +0 -36
  40. package/config/tsconfig.json +0 -18
@@ -1 +1 @@
1
- .l--flow{display:flow-root}.l--flow>*+*{--flow:var(--flow--base);margin-block-start:var(--flow)}.l--flow>:where(img,video,iframe){display:block}.-flow\:s>*{--flow:var(--flow--s)}.-flow\:>*{--flow:inherit}.l--flow>:where(h1,h2,h3,h4,h5,h6){margin-block-start:calc(var(--flow)*2 + .5em)}.is--skipFlow+*,.l--flow>:first-child{--flow:0px}.l--flex{display:flex}.l--flex>*{min-width:0}.l--cluster{align-items:center;display:flex;flex-wrap:wrap}.l--stack{display:flex;flex-direction:column}.l--grid{display:grid}.l--grid>*{min-width:0}.l--center{display:grid;place-content:center;place-items:center}.l--autoColumns{--cols:20rem;--autoMode:auto-fit;display:grid;grid-template-columns:repeat(var(--autoMode),minmax(min(var(--cols),100%),1fr))}.l--columns{--cols:2;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}.l--withSide{--sideW:auto;--mainW:max(20rem,50%);display:flex;flex-wrap:wrap}.l--withSide>.is--side{flex-basis:var(--sideW);flex-grow:1;min-width:0}.l--withSide>:not(.is--side){flex-basis:min(100%,var(--mainW));flex-grow:9999999;min-width:0}.l--switchColumns{--breakSize:var(--sz--xs);display:flex;flex-wrap:wrap}.l--switchColumns>*{flex-basis:calc((var(--breakSize) - 100%)*9999);flex-grow:1}.l--tileGrid{display:grid;grid-template:repeat(var(--rows,1),minmax(0,1fr))/repeat(var(--cols,1),minmax(0,1fr))}.l--frame{overflow:hidden}.l--frame>:where(img,video,iframe){display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}
1
+ .l--flow{display:flow-root}.l--flow>*+*{--flow:var(--flow--base);margin-block-start:var(--flow)}.l--flow>:where(img,video,iframe){display:block}.-flow\:s>*{--flow:var(--flow--s)}.-flow\:>*{--flow:inherit}.l--flow>:where(h1,h2,h3,h4,h5,h6){margin-block-start:calc(var(--flow)*2 + .5em)}.is--skipFlow+*,.l--flow>:first-child{--flow:0px}.l--flex{display:flex}.l--flex>*{min-width:0}.l--cluster{align-items:center;display:flex;flex-wrap:wrap}.l--stack{display:flex;flex-direction:column}.l--grid{display:grid}.l--grid>*{min-width:0}.l--center{display:grid;place-content:center;place-items:center}.l--autoColumns{--cols:20rem;--autoMode:auto-fill;display:grid;grid-template-columns:repeat(var(--autoMode),minmax(min(var(--cols),100%),1fr))}.l--columns{--cols:2;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}.l--withSide{--sideW:auto;--mainW:max(20rem,50%);display:flex;flex-wrap:wrap}.l--withSide>.is--side{flex-basis:var(--sideW);flex-grow:1;min-width:0}.l--withSide>:not(.is--side){flex-basis:min(100%,var(--mainW));flex-grow:9999999;min-width:0}.l--switchColumns{--breakSize:var(--sz--xs);display:flex;flex-wrap:wrap}.l--switchColumns>*{flex-basis:calc((var(--breakSize) - 100%)*9999);flex-grow:1}.l--tileGrid{display:grid;grid-template:repeat(var(--rows,1),minmax(0,1fr))/repeat(var(--cols,1),minmax(0,1fr))}.l--frame{overflow:hidden}.l--frame>:where(img,video,iframe){display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}
@@ -1 +1 @@
1
- .-lh\:1{--hl:0px}.-lh\:base{--hl:var(--hl--base)}.-lh\:xs{--hl:var(--hl--xs)}.-lh\:s{--hl:var(--hl--s)}.-lh\:l{--hl:var(--hl--l)}@layer lism-base{.-bd,[class*=" -bd-"],[class^=-bd-]{--bds:solid;--bdw:1px;--bdc:var(--divider);border-color:var(--bdc);border-width:var(--bdw)}}.-bd{border-style:var(--bds)}.-bd-x{border-inline-style:var(--bds)}.-bd-y{border-block-style:var(--bds)}.-bd-s{border-inline-start-style:var(--bds)}.-bd-e{border-inline-end-style:var(--bds)}.-bd-t{border-top-style:var(--bds)}.-bd-b{border-bottom-style:var(--bds)}.-bd-l{border-left-style:var(--bds)}.-bd-r{border-right-style:var(--bds)}.-bd-bs{border-block-start-style:var(--bds)}.-bd-be{border-block-end-style:var(--bds)}.-max-sz\:full{max-inline-size:100%}:where(.has--gutter)>.-max-sz\:full{inline-size:auto;margin-inline:calc(var(--gutter-size)*-1);max-inline-size:calc(100% + var(--gutter-size)*2)}.-max-sz\:bleed{inline-size:auto;margin-inline:calc(50% - var(--sz--bleed, 100svi)/2);max-inline-size:var(--sz--bleed,100svi)}.-f\:inherit{font:inherit}.-fz{font-size:var(--fz)}.-fz\:root{font-size:var(--fz--root)}.-fz\:base{font-size:var(--fz--base)}.-fz\:5xl{font-size:var(--fz--5xl)}.-fz\:4xl{font-size:var(--fz--4xl)}.-fz\:3xl{font-size:var(--fz--3xl)}.-fz\:2xl{font-size:var(--fz--2xl)}.-fz\:xl{font-size:var(--fz--xl)}.-fz\:l{font-size:var(--fz--l)}.-fz\:m{font-size:var(--fz--m)}.-fz\:s{font-size:var(--fz--s)}.-fz\:xs{font-size:var(--fz--xs)}.-fz\:2xs{font-size:var(--fz--2xs)}.-fw\:100{font-weight:100}.-fw\:200{font-weight:200}.-fw\:300{font-weight:300}.-fw\:400{font-weight:400}.-fw\:500{font-weight:500}.-fw\:600{font-weight:600}.-fw\:700{font-weight:700}.-fw\:800{font-weight:800}.-fw\:900{font-weight:900}.-fw\:light{font-weight:var(--fw--light)}.-fw\:normal{font-weight:var(--fw--normal)}.-fw\:bold{font-weight:var(--fw--bold)}.-ff\:base{font-family:var(--ff--base)}.-ff\:accent{font-family:var(--ff--accent)}.-ff\:mono{font-family:var(--ff--mono)}.-fs\:italic{font-style:italic}.-lts\:base{letter-spacing:var(--lts--base)}.-lts\:s{letter-spacing:var(--lts--s)}.-lts\:l{letter-spacing:var(--lts--l)}.-lts\:xl{letter-spacing:var(--lts--xl)}.-ta\:center{text-align:center}.-ta\:left{text-align:left}.-ta\:right{text-align:right}.-td\:none{text-decoration:none}.-tt\:upper{text-transform:uppercase}.-tt\:lower{text-transform:lowercase}.-d{display:var(--d)}.-d\:none{display:none}.-d\:block{display:block}.-d\:flex{display:flex}.-d\:inline-flex{display:inline-flex}.-d\:grid{display:grid}.-d\:inline-grid{display:inline-grid}.-d\:inline{display:inline}.-d\:inline-block{display:inline-block}.-o\:0{opacity:0}.-o\:mp{opacity:var(--o--mp)}.-o\:p{opacity:var(--o--p)}.-o\:pp{opacity:var(--o--pp)}.-o\:ppp{opacity:var(--o--ppp)}.-v\:hidden{visibility:hidden}.-ov\:hidden{overflow:hidden}.-ov\:auto{overflow:auto}.-ov\:clip{overflow:clip}.-ov-x\:clip{overflow-x:clip}.-ov-x\:auto{overflow-x:auto}.-ov-x\:scroll{overflow-x:scroll}.-ov-y\:clip{overflow-y:clip}.-ov-y\:auto{overflow-y:auto}.-ov-y\:scroll{overflow-y:scroll}.-ar{aspect-ratio:var(--ar)}.-ar\:21\/9{aspect-ratio:21/9}.-ar\:16\/9{aspect-ratio:16/9}.-ar\:3\/2{aspect-ratio:3/2}.-ar\:1\/1{aspect-ratio:1/1}.-ar\:og{aspect-ratio:var(--ar--og)}.-w{width:var(--w)}.-w\:100\%{width:100%}.-w\:fit{width:-moz-fit-content;width:fit-content}.-h{height:var(--h)}.-h\:100\%{height:100%}.-h\:fit{height:-moz-fit-content;height:fit-content}.-min-w{min-width:var(--min-w)}.-min-w\:100\%{min-width:100%}.-max-w{max-width:var(--max-w)}.-max-w\:100\%{max-width:100%}.-min-h{min-height:var(--min-h)}.-min-h\:100\%{min-height:100%}.-max-h{max-height:var(--max-h)}.-max-h\:100\%{max-height:100%}.-contentSize\:s{--contentSize:var(--sz--s)}.-contentSize\:m{--contentSize:var(--sz--m)}.-contentSize\:l{--contentSize:var(--sz--l)}.-contentSize\:xl{--contentSize:var(--sz--xl)}.-max-sz\:xs{max-inline-size:var(--sz--xs)}.-max-sz\:s{max-inline-size:var(--sz--s)}.-max-sz\:m{max-inline-size:var(--sz--m)}.-max-sz\:l{max-inline-size:var(--sz--l)}.-max-sz\:xl{max-inline-size:var(--sz--xl)}.-bgr\:no-repeat{background-repeat:no-repeat}.-bgp\:center{background-position:50%}.-bgsz\:cover{background-size:cover}.-bgsz\:contain{background-size:contain}.-bgc,[class*="-bgc:"]{background-color:var(--bgc)}.-bgc\:base{--bgc:var(--base)}.-bgc\:base-2{--bgc:var(--base-2)}.-bgc\:text{--bgc:var(--text)}.-bgc\:brand{--bgc:var(--brand)}.-bgc\:accent{--bgc:var(--accent)}.-bgc\:transparent{--bgc:transparent}.-bgc\:inherit{background-color:inherit}.-c,[class*="-c:"]{color:var(--c)}.-c\:base{--c:var(--base)}.-c\:text{--c:var(--text)}.-c\:text-2{--c:var(--text-2)}.-c\:brand{--c:var(--brand)}.-c\:accent{--c:var(--accent)}.-c\:inherit{color:inherit}.-bd\:none{border:none}.-bds\:dashed{--bds:dashed}.-bds\:dotted{--bds:dotted}.-bds\:double{--bds:double}.-bdc\:brand{--bdc:var(--brand)}.-bdc\:accent{--bdc:var(--accent)}.-bdc\:divider{--bdc:var(--divider)}.-bdc\:inherit{--bdc:inherit}.-bdc\:transparent{--bdc:transparent}.-bdc\:current{--bdc:currentColor}.-bdrs,[class*="-bdrs:"]{border-radius:var(--bdrs)}.-bdrs\:0{--bdrs:0}.-bdrs\:10{--bdrs:var(--bdrs--10)}.-bdrs\:20{--bdrs:var(--bdrs--20)}.-bdrs\:30{--bdrs:var(--bdrs--30)}.-bdrs\:40{--bdrs:var(--bdrs--40)}.-bdrs\:99{--bdrs:var(--bdrs--99)}.-bdrs\:inner{--bdrs:var(--bdrs--inner)}.-bxsh{box-shadow:var(--bxsh)}.-bxsh\:0{box-shadow:none}.-bxsh\:10{box-shadow:var(--bxsh--10)}.-bxsh\:20{box-shadow:var(--bxsh--20)}.-bxsh\:30{box-shadow:var(--bxsh--30)}.-bxsh\:40{box-shadow:var(--bxsh--40)}.-bxsh\:50{box-shadow:var(--bxsh--50)}.-pos{position:var(--pos)}.-pos\:static{position:static}.-pos\:fixed{position:fixed}.-pos\:sticky{position:sticky}.-pos\:relative{position:relative}.-pos\:absolute{position:absolute}.-z\:0{z-index:0}.-z\:1{z-index:1}.-z\:99{z-index:99}.-z\:-1{z-index:-1}.-t\:0{top:0}.-t\:50\%{top:50%}.-t\:100\%{top:100%}.-l\:0{left:0}.-l\:50\%{left:50%}.-l\:100\%{left:100%}.-r\:0{right:0}.-r\:50\%{right:50%}.-r\:100\%{right:100%}.-b\:0{bottom:0}.-b\:50\%{bottom:50%}.-b\:100\%{bottom:100%}.-i\:0{inset:0}.-p,[class*="-p:"]{padding:var(--p)}.-p\:0{--p:0}.-p\:5{--p:var(--s5)}.-p\:10{--p:var(--s10)}.-p\:15{--p:var(--s15)}.-p\:20{--p:var(--s20)}.-p\:25{--p:var(--s25)}.-p\:30{--p:var(--s30)}.-p\:35{--p:var(--s35)}.-p\:40{--p:var(--s40)}.-p\:50{--p:var(--s50)}.-p\:60{--p:var(--s60)}.-p\:70{--p:var(--s70)}.-p\:80{--p:var(--s80)}.-px{padding-inline:var(--px)}.-px\:0{padding-inline:0}.-px\:5{padding-inline:var(--s5)}.-px\:10{padding-inline:var(--s10)}.-px\:15{padding-inline:var(--s15)}.-px\:20{padding-inline:var(--s20)}.-px\:25{padding-inline:var(--s25)}.-px\:30{padding-inline:var(--s30)}.-px\:35{padding-inline:var(--s35)}.-px\:40{padding-inline:var(--s40)}.-px\:50{padding-inline:var(--s50)}.-px\:60{padding-inline:var(--s60)}.-px\:70{padding-inline:var(--s70)}.-px\:80{padding-inline:var(--s80)}.-py{padding-block:var(--py)}.-py\:0{padding-block:0}.-py\:5{padding-block:var(--s5)}.-py\:10{padding-block:var(--s10)}.-py\:15{padding-block:var(--s15)}.-py\:20{padding-block:var(--s20)}.-py\:25{padding-block:var(--s25)}.-py\:30{padding-block:var(--s30)}.-py\:35{padding-block:var(--s35)}.-py\:40{padding-block:var(--s40)}.-py\:50{padding-block:var(--s50)}.-py\:60{padding-block:var(--s60)}.-py\:70{padding-block:var(--s70)}.-py\:80{padding-block:var(--s80)}.-ps{padding-inline-start:var(--ps)}.-pe{padding-inline-end:var(--pe)}.-pbs{padding-block-start:var(--pbs)}.-pbe{padding-block-end:var(--pbe)}.-m,[class*="-m:"]{margin:var(--m)}.-m\:0{--m:0}.-m\:5{--m:var(--s5)}.-m\:10{--m:var(--s10)}.-m\:15{--m:var(--s15)}.-m\:20{--m:var(--s20)}.-m\:25{--m:var(--s25)}.-m\:30{--m:var(--s30)}.-m\:35{--m:var(--s35)}.-m\:40{--m:var(--s40)}.-m\:50{--m:var(--s50)}.-m\:60{--m:var(--s60)}.-m\:70{--m:var(--s70)}.-m\:80{--m:var(--s80)}.-m\:auto{--m:auto}.-mx{margin-inline:var(--mx)}.-mx\:0{margin-inline:0}.-mx\:5{margin-inline:var(--s5)}.-mx\:10{margin-inline:var(--s10)}.-mx\:15{margin-inline:var(--s15)}.-mx\:20{margin-inline:var(--s20)}.-mx\:25{margin-inline:var(--s25)}.-mx\:30{margin-inline:var(--s30)}.-mx\:35{margin-inline:var(--s35)}.-mx\:40{margin-inline:var(--s40)}.-mx\:50{margin-inline:var(--s50)}.-mx\:60{margin-inline:var(--s60)}.-mx\:70{margin-inline:var(--s70)}.-mx\:80{margin-inline:var(--s80)}.-mx\:auto{margin-inline:auto}.-my{margin-block:var(--my)}.-my\:0{margin-block:0}.-my\:5{margin-block:var(--s5)}.-my\:10{margin-block:var(--s10)}.-my\:15{margin-block:var(--s15)}.-my\:20{margin-block:var(--s20)}.-my\:25{margin-block:var(--s25)}.-my\:30{margin-block:var(--s30)}.-my\:35{margin-block:var(--s35)}.-my\:40{margin-block:var(--s40)}.-my\:50{margin-block:var(--s50)}.-my\:60{margin-block:var(--s60)}.-my\:70{margin-block:var(--s70)}.-my\:80{margin-block:var(--s80)}.-my\:auto{margin-block:auto}.-ms{margin-inline-start:var(--ms)}.-ms\:auto{margin-inline-start:auto}.-me{margin-inline-end:var(--me)}.-me\:auto{margin-inline-end:auto}.-mbs{margin-block-start:var(--mbs)}.-mbs\:0{margin-block-start:0}.-mbs\:5{margin-block-start:var(--s5)}.-mbs\:10{margin-block-start:var(--s10)}.-mbs\:15{margin-block-start:var(--s15)}.-mbs\:20{margin-block-start:var(--s20)}.-mbs\:25{margin-block-start:var(--s25)}.-mbs\:30{margin-block-start:var(--s30)}.-mbs\:35{margin-block-start:var(--s35)}.-mbs\:40{margin-block-start:var(--s40)}.-mbs\:50{margin-block-start:var(--s50)}.-mbs\:60{margin-block-start:var(--s60)}.-mbs\:70{margin-block-start:var(--s70)}.-mbs\:80{margin-block-start:var(--s80)}.-mbs\:auto{margin-block-start:auto}.-mbe{margin-block-end:var(--mbe)}.-mbe\:auto{margin-block-end:auto}.-g{gap:var(--g)}.-g\:0{gap:0}.-g\:5{gap:var(--s5)}.-g\:10{gap:var(--s10)}.-g\:15{gap:var(--s15)}.-g\:20{gap:var(--s20)}.-g\:25{gap:var(--s25)}.-g\:30{gap:var(--s30)}.-g\:35{gap:var(--s35)}.-g\:40{gap:var(--s40)}.-g\:50{gap:var(--s50)}.-g\:60{gap:var(--s60)}.-g\:70{gap:var(--s70)}.-g\:80{gap:var(--s80)}.-g\:inherit{gap:inherit}.-fxw{flex-wrap:var(--fxw)}.-fxw\:wrap{flex-wrap:wrap}.-fxd{flex-direction:var(--fxd)}.-fxd\:column{flex-direction:column}.-fxd\:column-reverse{flex-direction:column-reverse}.-fxd\:row-reverse{flex-direction:row-reverse}.-fx{flex:var(--fx)}.-fx\:1{flex:1}.-fxg\:1{flex-grow:1}.-fxsh\:0{flex-shrink:0}.-fxb{flex-basis:var(--fxb)}.-gt{grid-template:var(--gt)}.-gta{grid-template-areas:var(--gta)}.-gtc{grid-template-columns:var(--gtc)}.-gtc\:subgrid{grid-template-columns:subgrid}.-gtr{grid-template-rows:var(--gtr)}.-gtr\:subgrid{grid-template-rows:subgrid}.-gaf{grid-auto-flow:var(--gaf)}.-gaf\:row{grid-auto-flow:row}.-gaf\:column{grid-auto-flow:column}.-ga{grid-area:var(--ga)}.-ga\:1\/1{grid-area:1/1}.-gc{grid-column:var(--gc)}.-gc\:1\/-1{grid-column:1/-1}.-gr{grid-row:var(--gr)}.-gr\:1\/-1{grid-row:1/-1}.-ai{align-items:var(--ai)}.-ai\:start{align-items:start}.-ai\:center{align-items:center}.-ai\:end{align-items:end}.-ai\:stretch{align-items:stretch}.-ai\:flex-start{align-items:flex-start}.-ai\:flex-end{align-items:flex-end}.-ac{align-content:var(--ac)}.-ac\:start{align-content:start}.-ac\:center{align-content:center}.-ac\:end{align-content:end}.-ac\:flex-start{align-content:flex-start}.-ac\:flex-end{align-content:flex-end}.-ac\:between{align-content:space-between}.-ji{justify-items:var(--ji)}.-ji\:start{justify-items:start}.-ji\:center{justify-items:center}.-ji\:end{justify-items:end}.-ji\:stretch{justify-items:stretch}.-ji\:flex-start{justify-items:flex-start}.-ji\:flex-end{justify-items:flex-end}.-jc{justify-content:var(--jc)}.-jc\:start{justify-content:start}.-jc\:center{justify-content:center}.-jc\:end{justify-content:end}.-jc\:flex-start{justify-content:flex-start}.-jc\:flex-end{justify-content:flex-end}.-jc\:between{justify-content:space-between}.-pi\:start{place-items:start}.-pi\:center{place-items:center}.-pi\:end{place-items:end}.-pc\:start{place-content:start}.-pc\:center{place-content:center}.-pc\:end{place-content:end}.-aslf\:start{align-self:start}.-aslf\:center{align-self:center}.-aslf\:end{align-self:end}.-aslf\:stretch{align-self:stretch}.-jslf\:start{justify-self:start}.-jslf\:center{justify-self:center}.-jslf\:end{justify-self:end}.-jslf\:stretch{justify-self:stretch}.-pslf\:start{place-self:start}.-pslf\:center{place-self:center}.-pslf\:end{place-self:end}.-order{order:var(--order)}.-order\:0{order:0}.-order\:1{order:1}.-order\:-1{order:-1}.-ovw\:anywhere{overflow-wrap:anywhere}.-whs\:nowrap{white-space:nowrap}.-float\:left{float:left}.-float\:right{float:right}.-clear\:both{clear:both}.-iso\:isolate{isolation:isolate}.-wm{writing-mode:var(--wm)}.-wm\:vertical-rl{writing-mode:vertical-rl}@container (min-width: 480px){.-fz_sm{font-size:var(--fz_sm)}.-d_sm{display:var(--d_sm)}.-ar_sm{aspect-ratio:var(--ar_sm)}.-w_sm{width:var(--w_sm)}.-h_sm{height:var(--h_sm)}.-min-w_sm{min-width:var(--min-w_sm)}.-max-w_sm{max-width:var(--max-w_sm)}.-min-h_sm{min-height:var(--min-h_sm)}.-max-h_sm{max-height:var(--max-h_sm)}.-bdw_sm{--bdw:var(--bdw_sm)!important}.-bdrs_sm{border-radius:var(--bdrs);--bdrs:var(--bdrs_sm)!important}.-bxsh_sm{box-shadow:var(--bxsh_sm)}.-pos_sm{position:var(--pos_sm)}.-p_sm{padding:var(--p);--p:var(--p_sm)!important}.-px_sm{padding-inline:var(--px_sm)}.-py_sm{padding-block:var(--py_sm)}.-ps_sm{padding-inline-start:var(--ps_sm)}.-pe_sm{padding-inline-end:var(--pe_sm)}.-pbs_sm{padding-block-start:var(--pbs_sm)}.-pbe_sm{padding-block-end:var(--pbe_sm)}.-m_sm{margin:var(--m);--m:var(--m_sm)!important}.-mx_sm{margin-inline:var(--mx_sm)}.-my_sm{margin-block:var(--my_sm)}.-ms_sm{margin-inline-start:var(--ms_sm)}.-me_sm{margin-inline-end:var(--me_sm)}.-mbs_sm{margin-block-start:var(--mbs_sm)}.-mbe_sm{margin-block-end:var(--mbe_sm)}.-g_sm{gap:var(--g_sm)}.-cols_sm{--cols:var(--cols_sm)!important}.-rows_sm{--rows:var(--rows_sm)!important}.-fxw_sm{flex-wrap:var(--fxw_sm)}.-fxd_sm{flex-direction:var(--fxd_sm)}.-fx_sm{flex:var(--fx_sm)}.-fxb_sm{flex-basis:var(--fxb_sm)}.-gt_sm{grid-template:var(--gt_sm)}.-gta_sm{grid-template-areas:var(--gta_sm)}.-gtc_sm{grid-template-columns:var(--gtc_sm)}.-gtr_sm{grid-template-rows:var(--gtr_sm)}.-gaf_sm{grid-auto-flow:var(--gaf_sm)}.-ga_sm{grid-area:var(--ga_sm)}.-gc_sm{grid-column:var(--gc_sm)}.-gr_sm{grid-row:var(--gr_sm)}.-ai_sm{align-items:var(--ai_sm)}.-ac_sm{align-content:var(--ac_sm)}.-ji_sm{justify-items:var(--ji_sm)}.-jc_sm{justify-content:var(--jc_sm)}.-order_sm{order:var(--order_sm)}.-wm_sm{writing-mode:var(--wm_sm)}}@container (min-width: 800px){.-fz_md{font-size:var(--fz_md)}.-d_md{display:var(--d_md)}.-ar_md{aspect-ratio:var(--ar_md)}.-w_md{width:var(--w_md)}.-h_md{height:var(--h_md)}.-min-w_md{min-width:var(--min-w_md)}.-max-w_md{max-width:var(--max-w_md)}.-min-h_md{min-height:var(--min-h_md)}.-max-h_md{max-height:var(--max-h_md)}.-bdw_md{--bdw:var(--bdw_md)!important}.-bdrs_md{border-radius:var(--bdrs);--bdrs:var(--bdrs_md)!important}.-bxsh_md{box-shadow:var(--bxsh_md)}.-pos_md{position:var(--pos_md)}.-p_md{padding:var(--p);--p:var(--p_md)!important}.-px_md{padding-inline:var(--px_md)}.-py_md{padding-block:var(--py_md)}.-ps_md{padding-inline-start:var(--ps_md)}.-pe_md{padding-inline-end:var(--pe_md)}.-pbs_md{padding-block-start:var(--pbs_md)}.-pbe_md{padding-block-end:var(--pbe_md)}.-m_md{margin:var(--m);--m:var(--m_md)!important}.-mx_md{margin-inline:var(--mx_md)}.-my_md{margin-block:var(--my_md)}.-ms_md{margin-inline-start:var(--ms_md)}.-me_md{margin-inline-end:var(--me_md)}.-mbs_md{margin-block-start:var(--mbs_md)}.-mbe_md{margin-block-end:var(--mbe_md)}.-g_md{gap:var(--g_md)}.-cols_md{--cols:var(--cols_md)!important}.-rows_md{--rows:var(--rows_md)!important}.-fxw_md{flex-wrap:var(--fxw_md)}.-fxd_md{flex-direction:var(--fxd_md)}.-fx_md{flex:var(--fx_md)}.-fxb_md{flex-basis:var(--fxb_md)}.-gt_md{grid-template:var(--gt_md)}.-gta_md{grid-template-areas:var(--gta_md)}.-gtc_md{grid-template-columns:var(--gtc_md)}.-gtr_md{grid-template-rows:var(--gtr_md)}.-gaf_md{grid-auto-flow:var(--gaf_md)}.-ga_md{grid-area:var(--ga_md)}.-gc_md{grid-column:var(--gc_md)}.-gr_md{grid-row:var(--gr_md)}.-ai_md{align-items:var(--ai_md)}.-ac_md{align-content:var(--ac_md)}.-ji_md{justify-items:var(--ji_md)}.-jc_md{justify-content:var(--jc_md)}.-order_md{order:var(--order_md)}.-wm_md{writing-mode:var(--wm_md)}}@container (min-width: 1120px){.-d_lg{display:var(--d_lg)}.-g_lg{gap:var(--g_lg)}.-cols_lg{--cols:var(--cols_lg)!important}.-gta_lg{grid-template-areas:var(--gta_lg)}.-gtc_lg{grid-template-columns:var(--gtc_lg)}.-gtr_lg{grid-template-rows:var(--gtr_lg)}.-ga_lg{grid-area:var(--ga_lg)}.-gc_lg{grid-column:var(--gc_lg)}.-gr_lg{grid-row:var(--gr_lg)}}@media (any-hover:hover){.-hov\:-c:hover{color:var(--hov-c,var(--link))}.-hov\:-bdc:hover{border-color:var(--hov-bdc,currentColor)}.-hov\:-bgc:hover{background-color:var(--hov-bgc,var(--hov-bgc--default,color-mix(in srgb,var(--bgc,var(--base)),var(--neutral) 25%)))}.-hov\:-o:hover{opacity:var(--hov-o,var(--o--p))}.-hov\:-bxsh:hover{box-shadow:var(--hov-bxsh,var(--bxsh--50))}.-hov\:underline:hover{text-decoration:underline}}.-hov\:in\:hide{--transitionProps:opacity;opacity:var(--_isHov,0)}.-hov\:in\:show{--transitionProps:opacity,visibility;opacity:var(--_notHov,0);visibility:var(--_notHov,hidden)}.-hov\:in\:zoom{--transitionProps:scale;scale:var(--_isHov,1.1)}
1
+ .-lh\:1{--hl:0px}.-lh\:base{--hl:var(--hl--base)}.-lh\:xs{--hl:var(--hl--xs)}.-lh\:s{--hl:var(--hl--s)}.-lh\:l{--hl:var(--hl--l)}@layer lism-base{.-bd,[class*=" -bd-"],[class^=-bd-]{--bds:solid;--bdw:1px;--bdc:var(--divider);border-color:var(--bdc);border-width:var(--bdw)}}.-bd{border-style:var(--bds)}.-bd-x{border-inline-style:var(--bds)}.-bd-y{border-block-style:var(--bds)}.-bd-s{border-inline-start-style:var(--bds)}.-bd-e{border-inline-end-style:var(--bds)}.-bd-t{border-top-style:var(--bds)}.-bd-b{border-bottom-style:var(--bds)}.-bd-l{border-left-style:var(--bds)}.-bd-r{border-right-style:var(--bds)}.-bd-bs{border-block-start-style:var(--bds)}.-bd-be{border-block-end-style:var(--bds)}.-max-sz\:full{max-inline-size:100%}:where(.has--gutter)>.-max-sz\:full{inline-size:auto;margin-inline:calc(var(--gutter)*-1);max-inline-size:calc(100% + var(--gutter)*2)}.-max-sz\:bleed{inline-size:auto;margin-inline:calc(50% - var(--sz--bleed, 100svi)/2);max-inline-size:var(--sz--bleed,100svi)}.-f\:inherit{font:inherit}.-fz{font-size:var(--fz)}.-fz\:root{font-size:var(--fz--root)}.-fz\:base{font-size:var(--fz--base)}.-fz\:5xl{font-size:var(--fz--5xl)}.-fz\:4xl{font-size:var(--fz--4xl)}.-fz\:3xl{font-size:var(--fz--3xl)}.-fz\:2xl{font-size:var(--fz--2xl)}.-fz\:xl{font-size:var(--fz--xl)}.-fz\:l{font-size:var(--fz--l)}.-fz\:m{font-size:var(--fz--m)}.-fz\:s{font-size:var(--fz--s)}.-fz\:xs{font-size:var(--fz--xs)}.-fz\:2xs{font-size:var(--fz--2xs)}.-fw\:100{font-weight:100}.-fw\:200{font-weight:200}.-fw\:300{font-weight:300}.-fw\:400{font-weight:400}.-fw\:500{font-weight:500}.-fw\:600{font-weight:600}.-fw\:700{font-weight:700}.-fw\:800{font-weight:800}.-fw\:900{font-weight:900}.-fw\:light{font-weight:var(--fw--light)}.-fw\:normal{font-weight:var(--fw--normal)}.-fw\:bold{font-weight:var(--fw--bold)}.-ff\:base{font-family:var(--ff--base)}.-ff\:accent{font-family:var(--ff--accent)}.-ff\:mono{font-family:var(--ff--mono)}.-fs\:italic{font-style:italic}.-lts\:base{letter-spacing:var(--lts--base)}.-lts\:s{letter-spacing:var(--lts--s)}.-lts\:l{letter-spacing:var(--lts--l)}.-lts\:xl{letter-spacing:var(--lts--xl)}.-ta\:center{text-align:center}.-ta\:left{text-align:left}.-ta\:right{text-align:right}.-td\:none{text-decoration:none}.-tt\:upper{text-transform:uppercase}.-tt\:lower{text-transform:lowercase}.-d{display:var(--d)}.-d\:none{display:none}.-d\:block{display:block}.-d\:flex{display:flex}.-d\:inline-flex{display:inline-flex}.-d\:grid{display:grid}.-d\:inline-grid{display:inline-grid}.-d\:inline{display:inline}.-d\:inline-block{display:inline-block}.-o\:0{opacity:0}.-o\:mp{opacity:var(--o--mp)}.-o\:p{opacity:var(--o--p)}.-o\:pp{opacity:var(--o--pp)}.-o\:ppp{opacity:var(--o--ppp)}.-v\:hidden{visibility:hidden}.-ov\:hidden{overflow:hidden}.-ov\:auto{overflow:auto}.-ov\:clip{overflow:clip}.-ov-x\:clip{overflow-x:clip}.-ov-x\:auto{overflow-x:auto}.-ov-x\:scroll{overflow-x:scroll}.-ov-y\:clip{overflow-y:clip}.-ov-y\:auto{overflow-y:auto}.-ov-y\:scroll{overflow-y:scroll}.-ar{aspect-ratio:var(--ar)}.-ar\:21\/9{aspect-ratio:21/9}.-ar\:16\/9{aspect-ratio:16/9}.-ar\:3\/2{aspect-ratio:3/2}.-ar\:1\/1{aspect-ratio:1/1}.-ar\:og{aspect-ratio:var(--ar--og)}.-w{width:var(--w)}.-w\:100\%{width:100%}.-w\:fit{width:-moz-fit-content;width:fit-content}.-h{height:var(--h)}.-h\:100\%{height:100%}.-h\:fit{height:-moz-fit-content;height:fit-content}.-min-w{min-width:var(--min-w)}.-min-w\:100\%{min-width:100%}.-max-w{max-width:var(--max-w)}.-max-w\:100\%{max-width:100%}.-min-h{min-height:var(--min-h)}.-min-h\:100\%{min-height:100%}.-max-h{max-height:var(--max-h)}.-max-h\:100\%{max-height:100%}.-contentSize\:s{--contentSize:var(--sz--s)}.-contentSize\:m{--contentSize:var(--sz--m)}.-contentSize\:l{--contentSize:var(--sz--l)}.-contentSize\:xl{--contentSize:var(--sz--xl)}.-max-sz\:xs{max-inline-size:var(--sz--xs)}.-max-sz\:s{max-inline-size:var(--sz--s)}.-max-sz\:m{max-inline-size:var(--sz--m)}.-max-sz\:l{max-inline-size:var(--sz--l)}.-max-sz\:xl{max-inline-size:var(--sz--xl)}.-bgr\:no-repeat{background-repeat:no-repeat}.-bgp\:center{background-position:50%}.-bgsz\:cover{background-size:cover}.-bgsz\:contain{background-size:contain}.-bgc,[class*="-bgc:"]{background-color:var(--bgc)}.-bgc\:base{--bgc:var(--base)}.-bgc\:base-2{--bgc:var(--base-2)}.-bgc\:text{--bgc:var(--text)}.-bgc\:brand{--bgc:var(--brand)}.-bgc\:accent{--bgc:var(--accent)}.-bgc\:transparent{--bgc:transparent}.-bgc\:inherit{background-color:inherit}.-c,[class*="-c:"]{color:var(--c)}.-c\:base{--c:var(--base)}.-c\:text{--c:var(--text)}.-c\:text-2{--c:var(--text-2)}.-c\:brand{--c:var(--brand)}.-c\:accent{--c:var(--accent)}.-c\:inherit{color:inherit}.-bd\:none{border:none}.-bds\:dashed{--bds:dashed}.-bds\:dotted{--bds:dotted}.-bds\:double{--bds:double}.-bdc\:brand{--bdc:var(--brand)}.-bdc\:accent{--bdc:var(--accent)}.-bdc\:divider{--bdc:var(--divider)}.-bdc\:inherit{--bdc:inherit}.-bdc\:transparent{--bdc:transparent}.-bdc\:current{--bdc:currentColor}.-bdrs,[class*="-bdrs:"]{border-radius:var(--bdrs)}.-bdrs\:0{--bdrs:0}.-bdrs\:10{--bdrs:var(--bdrs--10)}.-bdrs\:20{--bdrs:var(--bdrs--20)}.-bdrs\:30{--bdrs:var(--bdrs--30)}.-bdrs\:40{--bdrs:var(--bdrs--40)}.-bdrs\:99{--bdrs:var(--bdrs--99)}.-bdrs\:inner{--bdrs:var(--bdrs--inner)}.-bxsh{box-shadow:var(--bxsh)}.-bxsh\:0{box-shadow:none}.-bxsh\:10{box-shadow:var(--bxsh--10)}.-bxsh\:20{box-shadow:var(--bxsh--20)}.-bxsh\:30{box-shadow:var(--bxsh--30)}.-bxsh\:40{box-shadow:var(--bxsh--40)}.-bxsh\:50{box-shadow:var(--bxsh--50)}.-pos{position:var(--pos)}.-pos\:static{position:static}.-pos\:fixed{position:fixed}.-pos\:sticky{position:sticky}.-pos\:relative{position:relative}.-pos\:absolute{position:absolute}.-z\:0{z-index:0}.-z\:1{z-index:1}.-z\:99{z-index:99}.-z\:-1{z-index:-1}.-t\:0{top:0}.-t\:50\%{top:50%}.-t\:100\%{top:100%}.-l\:0{left:0}.-l\:50\%{left:50%}.-l\:100\%{left:100%}.-r\:0{right:0}.-r\:50\%{right:50%}.-r\:100\%{right:100%}.-b\:0{bottom:0}.-b\:50\%{bottom:50%}.-b\:100\%{bottom:100%}.-i\:0{inset:0}.-p,[class*="-p:"]{padding:var(--p)}.-p\:0{--p:0}.-p\:5{--p:var(--s5)}.-p\:10{--p:var(--s10)}.-p\:15{--p:var(--s15)}.-p\:20{--p:var(--s20)}.-p\:25{--p:var(--s25)}.-p\:30{--p:var(--s30)}.-p\:35{--p:var(--s35)}.-p\:40{--p:var(--s40)}.-p\:50{--p:var(--s50)}.-p\:60{--p:var(--s60)}.-p\:70{--p:var(--s70)}.-p\:80{--p:var(--s80)}.-px{padding-inline:var(--px)}.-px\:0{padding-inline:0}.-px\:5{padding-inline:var(--s5)}.-px\:10{padding-inline:var(--s10)}.-px\:15{padding-inline:var(--s15)}.-px\:20{padding-inline:var(--s20)}.-px\:25{padding-inline:var(--s25)}.-px\:30{padding-inline:var(--s30)}.-px\:35{padding-inline:var(--s35)}.-px\:40{padding-inline:var(--s40)}.-px\:50{padding-inline:var(--s50)}.-px\:60{padding-inline:var(--s60)}.-px\:70{padding-inline:var(--s70)}.-px\:80{padding-inline:var(--s80)}.-py{padding-block:var(--py)}.-py\:0{padding-block:0}.-py\:5{padding-block:var(--s5)}.-py\:10{padding-block:var(--s10)}.-py\:15{padding-block:var(--s15)}.-py\:20{padding-block:var(--s20)}.-py\:25{padding-block:var(--s25)}.-py\:30{padding-block:var(--s30)}.-py\:35{padding-block:var(--s35)}.-py\:40{padding-block:var(--s40)}.-py\:50{padding-block:var(--s50)}.-py\:60{padding-block:var(--s60)}.-py\:70{padding-block:var(--s70)}.-py\:80{padding-block:var(--s80)}.-ps{padding-inline-start:var(--ps)}.-pe{padding-inline-end:var(--pe)}.-pbs{padding-block-start:var(--pbs)}.-pbe{padding-block-end:var(--pbe)}.-m,[class*="-m:"]{margin:var(--m)}.-m\:0{--m:0}.-m\:5{--m:var(--s5)}.-m\:10{--m:var(--s10)}.-m\:15{--m:var(--s15)}.-m\:20{--m:var(--s20)}.-m\:25{--m:var(--s25)}.-m\:30{--m:var(--s30)}.-m\:35{--m:var(--s35)}.-m\:40{--m:var(--s40)}.-m\:50{--m:var(--s50)}.-m\:60{--m:var(--s60)}.-m\:70{--m:var(--s70)}.-m\:80{--m:var(--s80)}.-m\:auto{--m:auto}.-mx{margin-inline:var(--mx)}.-mx\:0{margin-inline:0}.-mx\:5{margin-inline:var(--s5)}.-mx\:10{margin-inline:var(--s10)}.-mx\:15{margin-inline:var(--s15)}.-mx\:20{margin-inline:var(--s20)}.-mx\:25{margin-inline:var(--s25)}.-mx\:30{margin-inline:var(--s30)}.-mx\:35{margin-inline:var(--s35)}.-mx\:40{margin-inline:var(--s40)}.-mx\:50{margin-inline:var(--s50)}.-mx\:60{margin-inline:var(--s60)}.-mx\:70{margin-inline:var(--s70)}.-mx\:80{margin-inline:var(--s80)}.-mx\:auto{margin-inline:auto}.-my{margin-block:var(--my)}.-my\:0{margin-block:0}.-my\:5{margin-block:var(--s5)}.-my\:10{margin-block:var(--s10)}.-my\:15{margin-block:var(--s15)}.-my\:20{margin-block:var(--s20)}.-my\:25{margin-block:var(--s25)}.-my\:30{margin-block:var(--s30)}.-my\:35{margin-block:var(--s35)}.-my\:40{margin-block:var(--s40)}.-my\:50{margin-block:var(--s50)}.-my\:60{margin-block:var(--s60)}.-my\:70{margin-block:var(--s70)}.-my\:80{margin-block:var(--s80)}.-my\:auto{margin-block:auto}.-ms{margin-inline-start:var(--ms)}.-ms\:auto{margin-inline-start:auto}.-me{margin-inline-end:var(--me)}.-me\:auto{margin-inline-end:auto}.-mbs{margin-block-start:var(--mbs)}.-mbs\:0{margin-block-start:0}.-mbs\:5{margin-block-start:var(--s5)}.-mbs\:10{margin-block-start:var(--s10)}.-mbs\:15{margin-block-start:var(--s15)}.-mbs\:20{margin-block-start:var(--s20)}.-mbs\:25{margin-block-start:var(--s25)}.-mbs\:30{margin-block-start:var(--s30)}.-mbs\:35{margin-block-start:var(--s35)}.-mbs\:40{margin-block-start:var(--s40)}.-mbs\:50{margin-block-start:var(--s50)}.-mbs\:60{margin-block-start:var(--s60)}.-mbs\:70{margin-block-start:var(--s70)}.-mbs\:80{margin-block-start:var(--s80)}.-mbs\:auto{margin-block-start:auto}.-mbe{margin-block-end:var(--mbe)}.-mbe\:auto{margin-block-end:auto}.-g{gap:var(--g)}.-g\:0{gap:0}.-g\:5{gap:var(--s5)}.-g\:10{gap:var(--s10)}.-g\:15{gap:var(--s15)}.-g\:20{gap:var(--s20)}.-g\:25{gap:var(--s25)}.-g\:30{gap:var(--s30)}.-g\:35{gap:var(--s35)}.-g\:40{gap:var(--s40)}.-g\:50{gap:var(--s50)}.-g\:60{gap:var(--s60)}.-g\:70{gap:var(--s70)}.-g\:80{gap:var(--s80)}.-g\:inherit{gap:inherit}.-fxw{flex-wrap:var(--fxw)}.-fxw\:wrap{flex-wrap:wrap}.-fxd{flex-direction:var(--fxd)}.-fxd\:column{flex-direction:column}.-fxd\:column-reverse{flex-direction:column-reverse}.-fxd\:row-reverse{flex-direction:row-reverse}.-fx{flex:var(--fx)}.-fx\:1{flex:1}.-fxg\:1{flex-grow:1}.-fxsh\:0{flex-shrink:0}.-fxb{flex-basis:var(--fxb)}.-gt{grid-template:var(--gt)}.-gta{grid-template-areas:var(--gta)}.-gtc{grid-template-columns:var(--gtc)}.-gtc\:subgrid{grid-template-columns:subgrid}.-gtr{grid-template-rows:var(--gtr)}.-gtr\:subgrid{grid-template-rows:subgrid}.-gaf{grid-auto-flow:var(--gaf)}.-gaf\:row{grid-auto-flow:row}.-gaf\:column{grid-auto-flow:column}.-ga{grid-area:var(--ga)}.-ga\:1\/1{grid-area:1/1}.-gc{grid-column:var(--gc)}.-gc\:1\/-1{grid-column:1/-1}.-gr{grid-row:var(--gr)}.-gr\:1\/-1{grid-row:1/-1}.-ai{align-items:var(--ai)}.-ai\:start{align-items:start}.-ai\:center{align-items:center}.-ai\:end{align-items:end}.-ai\:stretch{align-items:stretch}.-ai\:flex-start{align-items:flex-start}.-ai\:flex-end{align-items:flex-end}.-ac{align-content:var(--ac)}.-ac\:start{align-content:start}.-ac\:center{align-content:center}.-ac\:end{align-content:end}.-ac\:flex-start{align-content:flex-start}.-ac\:flex-end{align-content:flex-end}.-ac\:between{align-content:space-between}.-ji{justify-items:var(--ji)}.-ji\:start{justify-items:start}.-ji\:center{justify-items:center}.-ji\:end{justify-items:end}.-ji\:stretch{justify-items:stretch}.-ji\:flex-start{justify-items:flex-start}.-ji\:flex-end{justify-items:flex-end}.-jc{justify-content:var(--jc)}.-jc\:start{justify-content:start}.-jc\:center{justify-content:center}.-jc\:end{justify-content:end}.-jc\:flex-start{justify-content:flex-start}.-jc\:flex-end{justify-content:flex-end}.-jc\:between{justify-content:space-between}.-pi\:start{place-items:start}.-pi\:center{place-items:center}.-pi\:end{place-items:end}.-pc\:start{place-content:start}.-pc\:center{place-content:center}.-pc\:end{place-content:end}.-aslf\:start{align-self:start}.-aslf\:center{align-self:center}.-aslf\:end{align-self:end}.-aslf\:stretch{align-self:stretch}.-jslf\:start{justify-self:start}.-jslf\:center{justify-self:center}.-jslf\:end{justify-self:end}.-jslf\:stretch{justify-self:stretch}.-pslf\:start{place-self:start}.-pslf\:center{place-self:center}.-pslf\:end{place-self:end}.-order{order:var(--order)}.-order\:0{order:0}.-order\:1{order:1}.-order\:-1{order:-1}.-ovw\:anywhere{overflow-wrap:anywhere}.-whs\:nowrap{white-space:nowrap}.-float\:left{float:left}.-float\:right{float:right}.-clear\:both{clear:both}.-iso\:isolate{isolation:isolate}.-wm{writing-mode:var(--wm)}.-wm\:vertical-rl{writing-mode:vertical-rl}@container (min-width: 480px){.-fz_sm{font-size:var(--fz_sm)}.-d_sm{display:var(--d_sm)}.-ar_sm{aspect-ratio:var(--ar_sm)}.-w_sm{width:var(--w_sm)}.-h_sm{height:var(--h_sm)}.-min-w_sm{min-width:var(--min-w_sm)}.-max-w_sm{max-width:var(--max-w_sm)}.-min-h_sm{min-height:var(--min-h_sm)}.-max-h_sm{max-height:var(--max-h_sm)}.-bdw_sm{--bdw:var(--bdw_sm)!important}.-bdrs_sm{border-radius:var(--bdrs);--bdrs:var(--bdrs_sm)!important}.-bxsh_sm{box-shadow:var(--bxsh_sm)}.-pos_sm{position:var(--pos_sm)}.-p_sm{padding:var(--p);--p:var(--p_sm)!important}.-px_sm{padding-inline:var(--px_sm)}.-py_sm{padding-block:var(--py_sm)}.-ps_sm{padding-inline-start:var(--ps_sm)}.-pe_sm{padding-inline-end:var(--pe_sm)}.-pbs_sm{padding-block-start:var(--pbs_sm)}.-pbe_sm{padding-block-end:var(--pbe_sm)}.-m_sm{margin:var(--m);--m:var(--m_sm)!important}.-mx_sm{margin-inline:var(--mx_sm)}.-my_sm{margin-block:var(--my_sm)}.-ms_sm{margin-inline-start:var(--ms_sm)}.-me_sm{margin-inline-end:var(--me_sm)}.-mbs_sm{margin-block-start:var(--mbs_sm)}.-mbe_sm{margin-block-end:var(--mbe_sm)}.-g_sm{gap:var(--g_sm)}.-cols_sm{--cols:var(--cols_sm)!important}.-rows_sm{--rows:var(--rows_sm)!important}.-fxw_sm{flex-wrap:var(--fxw_sm)}.-fxd_sm{flex-direction:var(--fxd_sm)}.-fx_sm{flex:var(--fx_sm)}.-fxb_sm{flex-basis:var(--fxb_sm)}.-gt_sm{grid-template:var(--gt_sm)}.-gta_sm{grid-template-areas:var(--gta_sm)}.-gtc_sm{grid-template-columns:var(--gtc_sm)}.-gtr_sm{grid-template-rows:var(--gtr_sm)}.-gaf_sm{grid-auto-flow:var(--gaf_sm)}.-ga_sm{grid-area:var(--ga_sm)}.-gc_sm{grid-column:var(--gc_sm)}.-gr_sm{grid-row:var(--gr_sm)}.-ai_sm{align-items:var(--ai_sm)}.-ac_sm{align-content:var(--ac_sm)}.-ji_sm{justify-items:var(--ji_sm)}.-jc_sm{justify-content:var(--jc_sm)}.-order_sm{order:var(--order_sm)}.-wm_sm{writing-mode:var(--wm_sm)}}@container (min-width: 800px){.-fz_md{font-size:var(--fz_md)}.-d_md{display:var(--d_md)}.-ar_md{aspect-ratio:var(--ar_md)}.-w_md{width:var(--w_md)}.-h_md{height:var(--h_md)}.-min-w_md{min-width:var(--min-w_md)}.-max-w_md{max-width:var(--max-w_md)}.-min-h_md{min-height:var(--min-h_md)}.-max-h_md{max-height:var(--max-h_md)}.-bdw_md{--bdw:var(--bdw_md)!important}.-bdrs_md{border-radius:var(--bdrs);--bdrs:var(--bdrs_md)!important}.-bxsh_md{box-shadow:var(--bxsh_md)}.-pos_md{position:var(--pos_md)}.-p_md{padding:var(--p);--p:var(--p_md)!important}.-px_md{padding-inline:var(--px_md)}.-py_md{padding-block:var(--py_md)}.-ps_md{padding-inline-start:var(--ps_md)}.-pe_md{padding-inline-end:var(--pe_md)}.-pbs_md{padding-block-start:var(--pbs_md)}.-pbe_md{padding-block-end:var(--pbe_md)}.-m_md{margin:var(--m);--m:var(--m_md)!important}.-mx_md{margin-inline:var(--mx_md)}.-my_md{margin-block:var(--my_md)}.-ms_md{margin-inline-start:var(--ms_md)}.-me_md{margin-inline-end:var(--me_md)}.-mbs_md{margin-block-start:var(--mbs_md)}.-mbe_md{margin-block-end:var(--mbe_md)}.-g_md{gap:var(--g_md)}.-cols_md{--cols:var(--cols_md)!important}.-rows_md{--rows:var(--rows_md)!important}.-fxw_md{flex-wrap:var(--fxw_md)}.-fxd_md{flex-direction:var(--fxd_md)}.-fx_md{flex:var(--fx_md)}.-fxb_md{flex-basis:var(--fxb_md)}.-gt_md{grid-template:var(--gt_md)}.-gta_md{grid-template-areas:var(--gta_md)}.-gtc_md{grid-template-columns:var(--gtc_md)}.-gtr_md{grid-template-rows:var(--gtr_md)}.-gaf_md{grid-auto-flow:var(--gaf_md)}.-ga_md{grid-area:var(--ga_md)}.-gc_md{grid-column:var(--gc_md)}.-gr_md{grid-row:var(--gr_md)}.-ai_md{align-items:var(--ai_md)}.-ac_md{align-content:var(--ac_md)}.-ji_md{justify-items:var(--ji_md)}.-jc_md{justify-content:var(--jc_md)}.-order_md{order:var(--order_md)}.-wm_md{writing-mode:var(--wm_md)}}@container (min-width: 1120px){.-d_lg{display:var(--d_lg)}.-g_lg{gap:var(--g_lg)}.-cols_lg{--cols:var(--cols_lg)!important}.-gta_lg{grid-template-areas:var(--gta_lg)}.-gtc_lg{grid-template-columns:var(--gtc_lg)}.-gtr_lg{grid-template-rows:var(--gtr_lg)}.-ga_lg{grid-area:var(--ga_lg)}.-gc_lg{grid-column:var(--gc_lg)}.-gr_lg{grid-row:var(--gr_lg)}}@media (any-hover:hover){.-hov\:-c:hover{color:var(--hov-c,var(--link))}.-hov\:-bdc:hover{border-color:var(--hov-bdc,currentColor)}.-hov\:-bgc:hover{background-color:var(--hov-bgc,var(--hov-bgc--default,color-mix(in srgb,var(--bgc,var(--base)),var(--neutral) 25%)))}.-hov\:-o:hover{opacity:var(--hov-o,var(--o--p))}.-hov\:-bxsh:hover{box-shadow:var(--hov-bxsh,var(--bxsh--50))}.-hov\:underline:hover{text-decoration:underline}}.-hov\:in\:hide{--transitionProps:opacity;opacity:var(--_isHov,0)}.-hov\:in\:show{--transitionProps:opacity,visibility;opacity:var(--_notHov,0);visibility:var(--_notHov,hidden)}.-hov\:in\:zoom{--transitionProps:scale;scale:var(--_isHov,1.1)}
@@ -1 +1 @@
1
- @layer reset{*,:after,:before{box-sizing:border-box}:not(dialog){margin:0}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;line-break:strict;overflow-wrap:anywhere;overflow-x:clip;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:normal}html:has(:modal[open]){overflow:clip}body{min-height:100dvh;overflow:inherit}abbr[title]{text-decoration:underline;text-decoration-style:dotted}pre{overflow-x:auto}:is(ul,ol)[class],menu{list-style:none;padding:0}audio,canvas,iframe,img,object,svg,video{max-inline-size:100%;vertical-align:middle}img,video{block-size:auto}iframe{border:none}::file-selector-button,button,input,select,textarea{color:inherit;font:inherit;font-size:max(16px,1em)}fieldset{min-inline-size:0}textarea{max-inline-size:100%;resize:block}[type=checkbox],[type=radio],label[for],select,summary{cursor:pointer}::file-selector-button,[role=button],[role=option],[role=tab],[type=button],[type=reset],[type=submit],button{cursor:pointer;touch-action:manipulation}:disabled{cursor:not-allowed}[hidden=until-found]{z-index:-1}}
1
+ @layer reset{*,:after,:before{box-sizing:border-box}:not(dialog){margin:0}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;line-break:strict;overflow-wrap:anywhere;overflow-x:clip;word-break:normal}html:has(:modal[open]){overflow:clip}body{min-height:100dvh;overflow:inherit}abbr[title]{text-decoration:underline;text-decoration-style:dotted}pre{overflow-x:auto}:is(ul,ol)[class],menu{list-style:none;padding:0}audio,canvas,iframe,img,object,svg,video{max-inline-size:100%;vertical-align:middle}img,video{block-size:auto}iframe{border:none}::file-selector-button,button,input,select,textarea{color:inherit;font:inherit;font-size:max(16px,1em)}fieldset{min-inline-size:0}textarea{max-inline-size:100%;resize:block}[type=checkbox],[type=radio],label[for],select,summary{cursor:pointer}::file-selector-button,[role=button],[role=option],[role=tab],[type=button],[type=reset],[type=submit],button{cursor:pointer;touch-action:manipulation}:disabled{cursor:not-allowed}[hidden=until-found]{z-index:-1}}
@@ -1 +1 @@
1
- .is--container{container-type:inline-size}.is--container>*{--sz--bleed:100cqi}.is--container.has--gutter>*{--sz--bleed:calc(100cqi + var(--gutter-size)*2)}.is--container .is--container>*{--sz--bleed:inherit}.is--wrapper{--contentSize:var(--sz--m,100%)}.is--wrapper>*{inline-size:100%;margin-inline:auto;max-inline-size:min(100%,var(--contentSize))}.is--boxLink{color:inherit;cursor:pointer;display:block;isolation:isolate;pointer-events:auto;position:relative;text-decoration:none}.is--boxLink a{position:relative;z-index:2}.is--coverLink{color:inherit;position:static;text-decoration:none}.is--coverLink:before{content:"";inset:0;position:absolute;z-index:1}.is--layer{inset:0;overflow:hidden;position:absolute}.has--transition{--duration:var(--transition-duration,0.25s);--ease:ease;--delay:0s;--transitionProps:all;transition:var(--duration) var(--ease) var(--delay);transition-property:var(--transitionProps)}.has--gutter{padding-inline:var(--gutter-size)}.has--snap{--snapType:both mandatory;--snapAlign:start;--snapStop:normal;scroll-snap-type:var(--snapType)}.has--snap>*{scroll-snap-align:var(--snapAlign);scroll-snap-stop:var(--snapStop)}.has--mask{--maskPos:50%;--maskSize:contain;--maskRepeat:no-repeat;-webkit-mask:var(--maskImg) var(--maskRepeat) var(--maskPos)/var(--maskSize);mask:var(--maskImg) var(--maskRepeat) var(--maskPos)/var(--maskSize)}
1
+ .is--container{container-type:inline-size}.is--container>*{--sz--bleed:100cqi}.is--container.has--gutter>*{--sz--bleed:calc(100cqi + var(--gutter)*2)}.is--container .is--container>*{--sz--bleed:inherit}.is--wrapper{--contentSize:var(--sz--m,100%)}.is--wrapper>*{inline-size:100%;margin-inline:auto;max-inline-size:min(100%,var(--contentSize))}.is--boxLink{color:inherit;cursor:pointer;display:block;isolation:isolate;pointer-events:auto;position:relative;text-decoration:none}.is--boxLink a{position:relative;z-index:2}.is--coverLink{color:inherit;position:static;text-decoration:none}.is--coverLink:before{content:"";inset:0;position:absolute;z-index:1}.is--layer{inset:0;overflow:hidden;position:absolute}.has--transition{--duration:var(--transition-duration,0.25s);--ease:ease;--delay:0s;--transitionProps:all;transition:var(--duration) var(--ease) var(--delay);transition-property:var(--transitionProps)}.has--gutter{--gutter:var(--gutter--base);padding-inline:var(--gutter)}.has--snap{--snapType:both mandatory;--snapAlign:start;--snapStop:normal;scroll-snap-type:var(--snapType)}.has--snap>*{scroll-snap-align:var(--snapAlign);scroll-snap-stop:var(--snapStop)}.has--mask{--maskPos:50%;--maskSize:contain;--maskRepeat:no-repeat;-webkit-mask:var(--maskImg) var(--maskRepeat) var(--maskPos)/var(--maskSize);mask:var(--maskImg) var(--maskRepeat) var(--maskPos)/var(--maskSize)}
@@ -1 +1 @@
1
- .u--trim,.u--trimAll>:not(:empty,figure,picture,video,button,textarea,table){margin-block:calc(var(--hl)*-1)}.u--cbox{--mutedKeycolor:var(--keycolor);--c:color-mix(in srgb,var(--text),var(--keycolor) var(--cbox-cPct,25%));--bgc:color-mix(in srgb,var(--base),var(--mutedKeycolor) var(--cbox-bgPct,4%));--bdc:color-mix(in srgb,var(--divider),var(--keycolor) var(--cbox-bdPct,50%));--link-c:var(--keycolor);background-color:var(--bgc);color:var(--c)}@supports (color:oklch(from red l c h)){.u--cbox{--mutedKeycolor:oklch(from var(--keycolor) l calc(c * 0.75) h)}}.u--cells,.u--divide{--bdw:1px;--bdc:var(--divider);gap:var(--bdw)}.u--cells>*,.u--divide>*{box-shadow:0 0 0 var(--bdw) var(--bdc)}.u--divide{overflow:clip}.u--cells{padding:var(--bdw)}.u--srOnly:not(#_){border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.u--clipText{-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
1
+ .u--trim,.u--trimAll>:not(:empty,figure,picture,video,button,textarea,table){margin-block:calc(var(--hl)*-1)}.u--cbox{--mutedKeycolor:var(--keycolor);--c:color-mix(in srgb,var(--text),var(--keycolor) var(--cbox-cPct,25%));--bgc:color-mix(in srgb,var(--base),var(--mutedKeycolor) var(--cbox-bgPct,4%));--bdc:color-mix(in srgb,var(--divider),var(--keycolor) var(--cbox-bdPct,50%));--link-c:var(--keycolor);background-color:var(--bgc);color:var(--c)}@supports (color:oklch(from red l c h)){.u--cbox{--mutedKeycolor:oklch(from var(--keycolor) l calc(c * 0.75) h)}}.u--divide,.u--enclose{--bdw:1px;--bdc:var(--divider);gap:var(--bdw)}.u--divide>*,.u--enclose>*{box-shadow:0 0 0 var(--bdw) var(--bdc)}.u--divide{overflow:clip}.u--enclose{padding:var(--bdw)}.u--srOnly:not(#_){border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.u--clipText{-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
@@ -7,7 +7,7 @@ interface PropConfig {
7
7
  }
8
8
  interface LayoutOwnProps {
9
9
  flow?: CssValue;
10
- autoFill?: boolean;
10
+ autoFit?: boolean;
11
11
  sideW?: CssValue;
12
12
  mainW?: CssValue;
13
13
  breakSize?: CssValue;
@@ -15,8 +15,8 @@ function o({ sideW: e, mainW: t, style: r, ...n }) {
15
15
  const u = { ...r };
16
16
  return e != null && (u["--sideW"] = i(e, "sz")), t != null && (u["--mainW"] = i(t, "sz")), { ...n, style: u };
17
17
  }
18
- function l({ autoFill: e, style: t, ...r }) {
19
- return e ? { ...r, style: { ...t, "--autoMode": "auto-fill" } } : { ...r, style: t };
18
+ function l({ autoFit: e, style: t, ...r }) {
19
+ return e ? { ...r, style: { ...t, "--autoMode": "auto-fit" } } : { ...r, style: t };
20
20
  }
21
21
  function c({ flow: e, style: t, primitiveClass: r, ...n }) {
22
22
  return f("flow", e) ? {
@@ -2,10 +2,10 @@ import { TRAITS as P, PROPS as d } from "../config/index.js";
2
2
  import j from "./getLayoutProps.js";
3
3
  import k from "./getAtomicProps.js";
4
4
  import E from "./isPresetValue.js";
5
- import w from "./isTokenValue.js";
5
+ import x from "./isTokenValue.js";
6
6
  import g from "./getUtilKey.js";
7
7
  import C from "./getMaybeCssVar.js";
8
- import x from "./getBpData.js";
8
+ import w from "./getBpData.js";
9
9
  import z from "./warnUnsupportedBp.js";
10
10
  import _ from "./helper/atts.js";
11
11
  import A from "./helper/isEmptyObj.js";
@@ -28,8 +28,8 @@ class L {
28
28
  attrs = {};
29
29
  _propConfig;
30
30
  constructor(t) {
31
- const { forwardedRef: s, class: i, className: e, primitiveClass: o, style: r = {}, _propConfig: u = {}, ...h } = t;
32
- this.styles = { ...r }, this._propConfig = { ...u }, o && o.length && (this.primitiveClass = [...o]), A(h) || (this.attrs = { ...h }, this.analyzeProps()), s && (this.attrs.ref = s), this.className = this.buildClassName(e, i);
31
+ const { forwardedRef: s, class: i, className: e, primitiveClass: o, style: r = {}, _propConfig: c = {}, ...u } = t;
32
+ this.styles = { ...r }, this._propConfig = { ...c }, o && o.length && (this.primitiveClass = [...o]), A(u) || (this.attrs = { ...u }, this.analyzeProps()), s && (this.attrs.ref = s), this.className = this.buildClassName(e, i);
33
33
  }
34
34
  // 最終クラス文字列の組み立て(出力順の唯一の確定地点)
35
35
  // 出力順: [className&class] [primitiveClass] [setClasses] [traitClasses] [uClasses] [propClasses]
@@ -68,7 +68,7 @@ class L {
68
68
  let i = d[t] || null;
69
69
  if (i === null) return;
70
70
  this._propConfig?.[t] && (i = Object.assign({}, i, this._propConfig[t]));
71
- const { base: e, ...o } = x(s);
71
+ const { base: e, ...o } = w(s);
72
72
  process.env.NODE_ENV !== "production" && !i.bp && Object.keys(o).length > 0 && z(t), this.setAttrs(t, e, i), Object.keys(o).forEach((r) => {
73
73
  i && this.setAttrs(t, o[r], i, r);
74
74
  });
@@ -110,24 +110,25 @@ class L {
110
110
  if (s == null || s === "" || s === !1) return;
111
111
  let o = `--${t}`, r = `-${String(i.utilKey || t)}`;
112
112
  if (e && (o = `--${t}_${e}`, r += `_${e}`), typeof s == "string" && s.startsWith(":")) {
113
- this.addProp(`${r}:${s.replace(":", "")}`);
113
+ const l = s.slice(1);
114
+ this.addProp(l ? `${r}:${l}` : r);
114
115
  return;
115
116
  }
116
117
  if (!e) {
117
- const { presets: p, tokenClass: V, utils: y, shorthands: m } = i;
118
- if (p && E(p, s)) {
119
- const f = typeof s == "string" || typeof s == "number" ? String(s) : "";
120
- f && this.addProp(`${r}:${f}`);
118
+ const { presets: l, tokenClass: V, utils: y, shorthands: m } = i;
119
+ if (l && E(l, s)) {
120
+ const h = typeof s == "string" || typeof s == "number" ? String(s) : "";
121
+ h && this.addProp(`${r}:${h}`);
121
122
  return;
122
123
  }
123
- if (V && i.token && w(i.token, s)) {
124
- const f = typeof s == "string" || typeof s == "number" ? String(s) : "";
125
- f && this.addProp(`${r}:${f}`);
124
+ if (V && i.token && x(i.token, s)) {
125
+ const h = typeof s == "string" || typeof s == "number" ? String(s) : "";
126
+ h && this.addProp(`${r}:${h}`);
126
127
  return;
127
128
  }
128
- let l = "";
129
- if (y && typeof s == "string" && (l = g(y, s)), !l && m && typeof s == "string" && (l = g(m, s, !0)), l) {
130
- this.addProp(`${r}:${l}`);
129
+ let f = "";
130
+ if (y && typeof s == "string" && (f = g(y, s)), !f && m && typeof s == "string" && (f = g(m, s, !0)), f) {
131
+ this.addProp(`${r}:${f}`);
131
132
  return;
132
133
  }
133
134
  }
@@ -135,14 +136,14 @@ class L {
135
136
  this.addProp(r);
136
137
  return;
137
138
  }
138
- const { prop: u, isVar: h, alwaysVar: $, token: c, bp: O } = i;
139
+ const { prop: c, isVar: u, alwaysVar: $, token: p, bp: O } = i;
139
140
  let a;
140
- if (c && (typeof s == "string" || typeof s == "number") ? a = C(s, c) : typeof s == "string" || typeof s == "number" ? a = s : a = JSON.stringify(s), !e) {
141
- if (h) {
141
+ if (p && (typeof s == "string" || typeof s == "number") ? a = C(s, p) : typeof s == "string" || typeof s == "number" ? a = s : a = JSON.stringify(s), !e) {
142
+ if (u) {
142
143
  this.addStyle(`--${t}`, a);
143
144
  return;
144
145
  } else if (!O && !$) {
145
- this.addStyle(u, a);
146
+ this.addStyle(c, a);
146
147
  return;
147
148
  }
148
149
  }
@@ -35,7 +35,7 @@ export interface FlowLayoutProps {
35
35
  }
36
36
  export interface AutoColumnsProps {
37
37
  layout: 'autoColumns';
38
- autoFill?: boolean;
38
+ autoFit?: boolean;
39
39
  }
40
40
  export interface WithSideProps {
41
41
  layout: 'withSide';
@@ -33,7 +33,7 @@ type SetPreset = 'plain' | 'revert' | 'hov' | 'bxsh' | 'bdrsInner' | 'bleed' | '
33
33
  */
34
34
  export type SetPropValue = WithArbitraryString<SetPreset> | WithArbitraryString<SetPreset>[];
35
35
  /** util prop で使われるプリセット値(既知の `u--` クラス名・エディタ補完用) */
36
- type UtilPreset = 'cbox' | 'trim' | 'trimAll' | 'srOnly' | 'clipText' | 'divide' | 'cells';
36
+ type UtilPreset = 'cbox' | 'trim' | 'trimAll' | 'srOnly' | 'clipText' | 'divide' | 'enclose';
37
37
  /**
38
38
  * util prop の値の型。既知の `u--` クラス名がサジェストされつつ、任意の文字列も受け付ける。
39
39
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lism-css",
3
- "version": "0.21.0",
3
+ "version": "0.22.1",
4
4
  "description": "Lism CSS is a layout-first CSS framework for websites.",
5
5
  "author": {
6
6
  "name": "ddryo",
@@ -17,7 +17,6 @@
17
17
  },
18
18
  "files": [
19
19
  "dist",
20
- "config",
21
20
  "config.js",
22
21
  "config.d.ts",
23
22
  "vite-plugin.js",
@@ -31,11 +30,11 @@
31
30
  ".": "./dist/index.js",
32
31
  "./config.js": "./config.js",
33
32
  "./config": {
34
- "import": "./config/index.js",
33
+ "import": "./dist/config/index.js",
35
34
  "types": "./dist/config/index.d.ts"
36
35
  },
37
36
  "./default-config": {
38
- "import": "./config/default-config.js",
37
+ "import": "./dist/config/default-config.js",
39
38
  "types": "./dist/config/default-config.d.ts"
40
39
  },
41
40
  "./vite-plugin": "./vite-plugin.mjs",
@@ -52,7 +51,6 @@
52
51
  "import": "./dist/components/*.js",
53
52
  "types": "./dist/components/*.d.ts"
54
53
  },
55
- "./next-js/*": "./packages/next-js/*",
56
54
  "./astro": {
57
55
  "import": "./packages/astro/index.ts"
58
56
  },
@@ -98,8 +96,36 @@
98
96
  "peerDependencies": {
99
97
  "@types/react": "*",
100
98
  "@types/react-dom": "*",
99
+ "autoprefixer": "^10.4.0",
100
+ "cssnano": "^7.0.0",
101
+ "glob": "^11.0.0 || ^13.0.0",
102
+ "postcss": "^8.4.0",
101
103
  "react": "^18 || ^19",
102
- "react-dom": "^18 || ^19"
104
+ "react-dom": "^18 || ^19",
105
+ "sass": "^1.70.0"
106
+ },
107
+ "peerDependenciesMeta": {
108
+ "@types/react": {
109
+ "optional": true
110
+ },
111
+ "@types/react-dom": {
112
+ "optional": true
113
+ },
114
+ "autoprefixer": {
115
+ "optional": true
116
+ },
117
+ "cssnano": {
118
+ "optional": true
119
+ },
120
+ "glob": {
121
+ "optional": true
122
+ },
123
+ "postcss": {
124
+ "optional": true
125
+ },
126
+ "sass": {
127
+ "optional": true
128
+ }
103
129
  },
104
130
  "sideEffects": false,
105
131
  "scripts": {
@@ -8,7 +8,9 @@ body {
8
8
  letter-spacing: var(--lts--base);
9
9
  background-color: var(--base);
10
10
  color: var(--text);
11
- text-underline-offset: var(--under-offset, 0.25em);
11
+
12
+ text-underline-offset: 0.125em;
13
+ tab-size: 4;
12
14
  }
13
15
 
14
16
  /* --------------------------------------------------
@@ -120,24 +122,9 @@ dd + dt {
120
122
  /* --------------------------------------------------
121
123
  table
122
124
  -------------------------------------------------- */
123
- table {
124
- --td-c: inherit;
125
- --td-bgc: transparent;
126
- --td-p: var(--s10) var(--s15);
127
- --td-min-sz: initial;
128
- }
129
- td {
130
- color: var(--td-c);
131
- background-color: var(--td-bgc);
132
- padding: var(--td-p);
133
- min-inline-size: var(--td-min-sz);
134
- }
125
+ td,
135
126
  th {
136
- // デフォルト: tdと同じスタイル
137
- color: var(--th-c, var(--td-c));
138
- background-color: var(--th-bgc, var(--td-bgc));
139
- padding: var(--th-p, var(--td-p));
140
- min-inline-size: var(--th-min-sz, var(--td-min-sz));
127
+ padding: var(--cells-p, 0.625em 0.875em);
141
128
  }
142
129
 
143
130
  /* --------------------------------------------------
@@ -151,8 +138,7 @@ select,
151
138
  // フォーム系コントロールの最低限の見た目(テーマ差し替えは --controls-*)
152
139
  background-color: var(--controls-bgc, var(--base-2));
153
140
  border: solid 1px var(--controls-bdc, var(--divider));
154
- padding: var(--controls-p, var(--s5) var(--s10));
155
- border-radius: var(--controls-bdrs, var(--bdrs--10));
141
+ padding: var(--controls-p, 0.25em 0.5em);
156
142
  }
157
143
 
158
144
  :disabled {
@@ -1,3 +1,3 @@
1
1
  .set--bleed {
2
- --bleed: max(var(--gutter-size), calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2));
2
+ --bleed: max(var(--gutter, var(--gutter--base)), calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2));
3
3
  }
@@ -93,11 +93,11 @@
93
93
  */
94
94
  --ar--og: 1.91/1;
95
95
 
96
- /**
97
- * サイトコンテンツの左右につける余白量
96
+ /**
97
+ * サイトコンテンツの左右につける余白量の基準値
98
98
  * Memo: -max-sz\:full などからも参照されるのでrootで定義している
99
99
  */
100
- --gutter-size: var(--s30);
100
+ --gutter--base: var(--s30);
101
101
 
102
102
  /**
103
103
  * コンテンツ間の余白バリエーションを定義
@@ -3,7 +3,7 @@
3
3
  */
4
4
  .l--autoColumns {
5
5
  --cols: 20rem;
6
- --autoMode: auto-fit;
6
+ --autoMode: auto-fill;
7
7
  display: grid;
8
8
  grid-template-columns: repeat(var(--autoMode), minmax(min(var(--cols), 100%), 1fr));
9
9
  }
@@ -3,8 +3,8 @@
3
3
 
4
4
  :where(.has--gutter) > & {
5
5
  inline-size: auto; // is--wrapper > * の inline-size: 100% を打ち消し、負 margin による hang を効かせる
6
- max-inline-size: calc(100% + var(--gutter-size) * 2);
7
- margin-inline: calc(var(--gutter-size) * -1);
6
+ max-inline-size: calc(100% + var(--gutter) * 2);
7
+ margin-inline: calc(var(--gutter) * -1);
8
8
  }
9
9
  }
10
10
 
@@ -38,9 +38,6 @@
38
38
  line-break: strict; /* 禁則処理を厳格に適用 */
39
39
  overflow-wrap: anywhere; /* 収まらない場合に折り返す */
40
40
 
41
- /* デフォルトの 8 はでかすぎる */
42
- tab-size: 4;
43
-
44
41
  /* 要素はみ出しによる横スクロールの発生を防止. (overflow は 継承プロパティではないので両方記述) */
45
42
  overflow-x: clip;
46
43
 
@@ -1,3 +1,4 @@
1
1
  .has--gutter {
2
- padding-inline: var(--gutter-size);
2
+ --gutter: var(--gutter--base);
3
+ padding-inline: var(--gutter);
3
4
  }
@@ -10,7 +10,7 @@
10
10
  }
11
11
  .is--container.has--gutter > * {
12
12
  // has--gutterがある場合はその分を加算
13
- --sz--bleed: calc(100cqi + var(--gutter-size) * 2);
13
+ --sz--bleed: calc(100cqi + var(--gutter) * 2);
14
14
  }
15
15
  .is--container .is--container > * {
16
16
  // --sz--bleed は一番先祖(最外側) の is--container で値をセットしたらあとは引き継ぐだけ
@@ -1,5 +1,5 @@
1
1
  .u--divide,
2
- .u--cells {
2
+ .u--enclose {
3
3
  --bdw: 1px;
4
4
  --bdc: var(--divider);
5
5
  gap: var(--bdw);
@@ -13,6 +13,6 @@
13
13
  overflow: clip;
14
14
  }
15
15
  /* 各セルを囲む */
16
- .u--cells {
16
+ .u--enclose {
17
17
  padding: var(--bdw);
18
18
  }
@@ -1,44 +0,0 @@
1
- const _PROPS = {
2
- // size
3
- // mask
4
- // mski: { style: 'maskImage' },
5
- // mskbd: { style: 'maskBorder' },
6
- // msktyp: { style: 'maskType' },
7
- // mskclp: { style: 'maskClip' },
8
- // mskcmp: { style: 'maskComposite' },
9
- // mskmd: { style: 'maskMode' },
10
- // msko: { style: 'maskOrigin' },
11
- // mskp: { style: 'maskPosition' },
12
- // mskr: { style: 'maskRepeat' },
13
- // msksz: { style: 'maskSize' },
14
- // bdtlrs: { style: 'borderTopLeftRadius', token: 'bdrs' },
15
- // bdtrrs: { style: 'borderTopRightRadius', token: 'bdrs' },
16
- // bdblrs: { style: 'borderBottomLeftRadius', token: 'bdrs' },
17
- // bdbrrs: { style: 'borderBottomRightRadius', token: 'bdrs' },
18
- // bdssrs: { style: 'borderStartStartRadius', token: 'bdrs' },
19
- // bdsers: { style: 'borderStartEndRadius', token: 'bdrs' },
20
- // bdesrs: { style: 'borderEndStartRadius', token: 'bdrs' },
21
- // bdeers: { style: 'borderEndEndRadius', token: 'bdrs' },
22
- // transition
23
- //display
24
- // iis: { style: 'insetInlineStart', token: 'space' },
25
- // iie: { style: 'insetInlineEnd', token: 'space' },
26
- // ibs: { style: 'insetBlockStart', token: 'space' },
27
- // ibe: { style: 'insetBlockEnd', token: 'space' },
28
- // isolation
29
- // flip: {},
30
- // Spacing
31
- // grid
32
- // transform系
33
- // trf: { style: 'transform' },
34
- // trfo: { style: 'transformOrigin' },
35
- // float
36
- // fl: { style: 'float', utils: { left: 'l', right: 'r' } },
37
- // cl: { style: 'clear', utils: { left: 'l', right: 'r', both: 'b' } },
38
- // object-fit
39
- // objf: { style: 'objectFit', utils: { cover: 'cv', contain: 'cn' } },
40
- // objp: { style: 'objectPosition' },
41
- // filter
42
- // fltr: { style: 'filter' }, // fltr?
43
- // bdfltr: { style: 'backdropFilter' }, // bdfltr?
44
- };
@@ -1,25 +0,0 @@
1
- @use 'sass:map';
2
- @use 'sass:string';
3
-
4
- $props: (
5
- // 'objf': (
6
- // prop: 'object-fit',
7
- // utilities: (
8
- // 'cn': 'contain',
9
- // 'cv': 'cover',
10
- // ),
11
- // ),
12
- // 'bxsz': (
13
- // prop: 'box-sizing',
14
- // utilities: (
15
- // 'cb': 'content-box',
16
- // 'bb': 'border-box',
17
- // ),
18
- // ),
19
- // 'iso': (
20
- // prop: 'isolation',
21
- // utilities: (
22
- // 'i': 'isolate',
23
- // ),
24
- // ),
25
- );
@@ -1,9 +0,0 @@
1
- import TOKENS from './defaults/tokens';
2
- import PROPS from './defaults/props';
3
- import TRAITS from './defaults/traits';
4
-
5
- export default {
6
- tokens: TOKENS,
7
- props: PROPS,
8
- traits: TRAITS,
9
- } as const;
@@ -1,45 +0,0 @@
1
- /**
2
- --size- → --szー
3
- トークンはハイフン二つ
4
-
5
- globalトークン、 --target-- → --target- かな
6
- → --(\w)+?-- で検索。
7
-
8
-
9
- ・flow, container → l--、 frame→is--では?
10
- ・普通のクラス設計、BEMにもどす
11
-
12
- */
13
-
14
- // tier 1 layout・フォントは超短縮系に省略. 覚えてもらう必要があるもの。
15
- // p m g flex grid ai ac ji jc lh lts
16
-
17
- // 方向指定、一文字のもの(p,m,g) はそのまま繋げる。 start/endのみハイフン。
18
- // 2文字以上のものは、すべてハイフンで繋ぐ
19
-
20
- // tier 2 わかる程度に省略/名称変換
21
- // ovwrap wbreak
22
-
23
- // tier 3 非省略
24
- // whitespace translate rotate scale order
25
- // -whitespace:nowrap (-whspace?)
26
-
27
- // wrap-anywhere と break-keep, break-all,
28
- // -ovwrap:anywhere, -wordbreak:keep -wordbreak:all
29
-
30
- // 値のキーワード単体で容易に対応するプロパティが想像できるものは、ユーティリティクラスで {-prop} 部分が省略可能とします。
31
- // .underline .italic .uppercase, .-lowercase, .emphasis
32
- // .relative .absolute .fixed, ...
33
- // .block flex block in-block in-flex, ...
34
-
35
- // -txd:none
36
-
37
- // -d:none
38
- // -v:visible, -v:hidden isolate
39
-
40
- // prop省略系?→utility
41
- // .u--colorBox .u--trimLeading u--srOnly
42
-
43
- // .underline
44
- // --under-offset, --under-c, --under-thickness
45
- //