lism-css 0.0.12 → 0.1.0

package/README.md

@@ -19,7 +19,7 @@ pnpm add lism-css
 Please import CSS as a global style.
 
 ```js
-import 'lism-css/all.css';
+import 'lism-css/main.css';
 ```
 
 (For example, if it is Next.js, load it with `_app.js` or `layout.js`.)
@@ -27,7 +27,7 @@ import 'lism-css/all.css';
 For HTML sites, you can also load CSS via CDN.
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css/dist/css/all.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/lism-css/dist/css/main.css" rel="stylesheet" />
 ```
 
 ### 3. Using Components

package/dist/components/Accordion/getProps.js

@@ -4,21 +4,21 @@ function c({ lismClass: a, ...o }) {
 }
 function d({ isTrigger: a, ...o }) {
   const n = {
-    lismClass: "d--accordion__icon",
+    lismClass: "d--accordion_icon",
     tag: "span",
     d: "inline-grid"
   };
   return a && (n.tag = "button", o["data-role"] = "trigger"), { ...n, ...o };
 }
 const r = {
-  header: { lismClass: "d--accordion__header", ai: "c" },
-  label: { lismClass: "d--accordion__label", tag: "span", fx: "1" },
+  header: { lismClass: "d--accordion_header", ai: "c" },
+  label: { lismClass: "d--accordion_label", tag: "span", fx: "1" },
   body: {
-    lismClass: "d--accordion__body"
+    lismClass: "d--accordion_body"
     // trs: true,
   },
   inner: {
-    lismClass: "d--accordion__inner",
+    lismClass: "d--accordion_inner",
     ov: "hidden"
   }
 };

package/dist/components/Accordion/setAccordion.js

@@ -1,7 +1,7 @@
 const r = (t) => Promise.all(t.getAnimations().map((e) => e.finished)), d = async (t, e = !1) => {
   if (t.dataset.animating && !e) return;
   t.dataset.animating = "1";
-  const n = t.querySelector(".d--accordion__body");
+  const n = t.querySelector(".d--accordion_body");
   t.open ? t.open && (t.classList.remove("_opened"), await r(n), delete t.dataset.animating, t.open = !1) : (t.open = !0, setTimeout(async () => {
     t.classList.add("_opened"), await r(n), delete t.dataset.animating;
   }, 5));

package/dist/components/Accordion/style.css

@@ -1 +1 @@
-.d--accordion{--trsdu:var(--trsdu--acc)}.d--accordion._opened{--_notOpened: }.d--accordion:not(._opened){--_isOpened: }.d--accordion__header{gap:.5em;outline-offset:-1px}.d--accordion__header::-webkit-details-marker{display:none}.d--accordion__body{grid-template-rows:1fr;transition-duration:var(--trsdu);transition-property:margin-block,padding-block,opacity,grid-template-rows}:where(.d--accordion:not(._opened))>.d--accordion__body{grid-template-rows:0fr;margin-block:0!important;padding-block:0!important}:where(.d--accordion__icon)>.l--icon{rotate:var(--_isOpened,-180deg);transition-duration:var(--trsdu)}
+.d--accordion{--trsdu:var(--acc--trsdu,0.4s)}.d--accordion._opened{--_notOpened: }.d--accordion:not(._opened){--_isOpened: }.d--accordion_header{gap:.5em;outline-offset:-1px}.d--accordion_header::-webkit-details-marker{display:none}.d--accordion_body{grid-template-rows:1fr;transition-duration:var(--trsdu);transition-property:margin-block,padding-block,opacity,grid-template-rows}:where(.d--accordion:not(._opened))>.d--accordion_body{grid-template-rows:0fr;margin-block:0!important;padding-block:0!important}:where(.d--accordion_icon)>.l--icon{rotate:var(--_isOpened,-180deg);transition-duration:var(--trsdu)}

package/dist/components/Columns/getProps.js

@@ -1,6 +1,6 @@
-function a({ colSize: n, colAuto: t, style: f = {}, ...u }) {
-  return n && (f["--col-size"] = n), t && (f["--col-auto"] = t), u.style = f, u;
+function e({ colSize: n, autoType: t, style: f = {}, ...u }) {
+  return n && (f["--colSize"] = n), t && (f["--autoType"] = t), u.style = f, u;
 }
 export {
-  a as default
+  e as default
 };

package/dist/components/Layer/getProps.js

@@ -1,9 +1,9 @@
 import e from "../getInsetProps.js";
 import o from "../getFilterProps.js";
-function s(t) {
+function f(t) {
   let r = e(t);
-  return r = o(r, "backdropFilter"), r;
+  return r = o(r, "bdfltr"), r;
 }
 export {
-  s as getLayerProps
+  f as getLayerProps
 };

package/dist/components/Modal/getProps.js

@@ -7,11 +7,11 @@ function r({ lismClass: a = "", duration: o, offset: l, style: s = {}, ...t }) {
   return o && (s["--duration"] = o), l && (s["--offset"] = l), { ...e, style: s, ...t };
 }
 const i = {
-  body: { lismClass: "d--modal__body", ov: "auto" },
-  inner: { lismClass: "d--modal__inner", pos: "r", maxH: "100%", bgc: "base" },
-  closeBtn: { lismClass: "d--modal__close", lismState: ["re--style"], tag: "button" },
-  header: { lismClass: "d--modal__header" },
-  footer: { lismClass: "d--modal__footer" }
+  body: { lismClass: "d--modal_body", ov: "auto" },
+  inner: { lismClass: "d--modal_inner", pos: "r", maxH: "100%", bgc: "base" },
+  closeBtn: { lismClass: "d--modal_close", lismState: ["re--style"], tag: "button" },
+  header: { lismClass: "d--modal_header" },
+  footer: { lismClass: "d--modal_footer" }
 };
 export {
   i as defaultProps,

package/dist/components/Modal/style.css

@@ -1 +1 @@
-.d--modal{--mbs:0;--offset:0 0;--backdrop:rgba(0,0,0,.6);transition-duration:var(--trsdu--modal)}.d--modal::backdrop{background:var(--backdrop);transition:opacity var(--trsdu--modal)}.d--modal__body{overscroll-behavior:contain}.d--modal:not([data-is-open]){translate:var(--offset)}.d--modal:not([data-is-open]),.d--modal:not([data-is-open])::backdrop{opacity:0}
+.d--modal{--maxIsz:100%;--mbs:0;--offset:0 0;--backdrop:rgba(0,0,0,.6);transition-duration:var(--modal--trsdu,.5s)}.d--modal::backdrop{background:var(--backdrop);transition:opacity var(--modal--trsdu,.5s)}.d--modal_body{overscroll-behavior:contain}.d--modal:not([data-is-open]){translate:var(--offset)}.d--modal:not([data-is-open]),.d--modal:not([data-is-open])::backdrop{opacity:0}

package/dist/components/Tabs/Tab.js

@@ -7,7 +7,7 @@ function b({ tabId: t = "tab", index: a = 0, isActive: r = !1, ...s }) {
     l,
     {
       tag: "button",
-      lismClass: "d--tabs__tab",
+      lismClass: "d--tabs_tab",
       className: "re--style",
       role: "tab",
       "aria-controls": e,

package/dist/components/Tabs/TabList.js

@@ -1,7 +1,7 @@
 import { jsx as s } from "react/jsx-runtime";
 import r from "../Flex/index.js";
 function o(t) {
-  return /* @__PURE__ */ s(r, { lismClass: "d--tabs__list", role: "tablist", ...t });
+  return /* @__PURE__ */ s(r, { lismClass: "d--tabs_list", role: "tablist", ...t });
 }
 export {
   o as default

package/dist/components/Tabs/TabPanel.js

@@ -3,16 +3,7 @@ import "react";
 import i from "../Grid/GridItem.js";
 function m({ tabId: a = "tab", isActive: t = !1, index: r = 0, ...e }) {
   const o = `${a}-${r}`;
-  return /* @__PURE__ */ l(
-    i,
-    {
-      id: o,
-      role: "tabpanel",
-      "aria-hidden": t ? "false" : "true",
-      lismClass: "d--tabs__panel",
-      ...e
-    }
-  );
+  return /* @__PURE__ */ l(i, { id: o, role: "tabpanel", "aria-hidden": t ? "false" : "true", lismClass: "d--tabs_panel", ...e });
 }
 export {
   m as default

package/dist/components/Tabs/style.css

@@ -1 +1 @@
-.d--tabs{display:grid;grid:"list" "panel"}.d--tabs__list{grid-area:list;overflow-x:auto}.d--tabs__tab[aria-selected=true]{--_notActive: }.d--tabs__tab[aria-selected=false]{--_isActive: }:where(.d--tabs__tab){color:var(--_notActive,var(--c--text-2))}.d--tabs__panel{grid-area:panel;overflow-x:auto;width:100%}.d--tabs__panel:where([aria-hidden=true]){display:none}
+.d--tabs{display:grid;grid:"list" "panel"}.d--tabs_list{grid-area:list;overflow-x:auto}.d--tabs_tab[aria-selected=true]{--_notActive: }.d--tabs_tab[aria-selected=false]{--_isActive: }:where(.d--tabs_tab){color:var(--_notActive,var(--c-text-2))}.d--tabs_panel{grid-area:panel;overflow-x:auto;width:100%}.d--tabs_panel:where([aria-hidden=true]){display:none}

package/dist/components/WithSide/getProps.js

@@ -1,7 +1,7 @@
 import n from "../../lib/helper/atts.js";
 import { mergeFlexContextProps as l } from "../Flex/getProps.js";
 function f({ lismClass: o, sideW: t, mainW: r, style: i = {}, ...e }) {
-  return t != null && (i["--side-w"] = t), r != null && (i["--main-w"] = r), Object.assign(
+  return t != null && (i["--sideW"] = t), r != null && (i["--mainW"] = r), Object.assign(
     {
       lismClass: n(o, "l--withSide"),
       style: i

package/dist/components/getFilterProps.js

@@ -9,15 +9,15 @@ const o = [
   "saturate",
   "sepia"
 ];
-function i({ css: a = {}, ...e }, r = "filter") {
+function u({ css: a = {}, ...t }, r = "fltr") {
   const n = [];
-  return a[r] == null && (o.forEach((t) => {
-    if (e[t]) {
-      const l = t.replace(/([A-Z])/g, "-$1").toLowerCase();
-      n.push(`${l}(${e[t]})`), delete e[t];
+  return a[r] == null && (o.forEach((e) => {
+    if (t[e]) {
+      const l = e.replace(/([A-Z])/g, "-$1").toLowerCase();
+      n.push(`${l}(${t[e]})`), delete t[e];
     }
-  }), n.length > 0 && (a[r] = n.join(" "))), e.css = a, e;
+  }), n.length > 0 && (a[r] = n.join(" "))), t.css = a, t;
 }
 export {
-  i as default
+  u as default
 };

package/dist/components/getInsetProps.js

@@ -1,7 +1,7 @@
-function n(e) {
-  return e.insets == null && (e.insets = {}), ["is", "ie", "bs", "be"].forEach((t) => {
-    e[t] != null && (e.insets[t] = e[t], delete e[t]);
-  }), e;
+function n({ i_: t = {}, ...i }) {
+  return ["iis", "iie", "ibs", "ibe"].forEach((e) => {
+    i[e] != null && (t[e] = i[e], delete i[e]);
+  }), i.i_ = t, i;
 }
 export {
   n as default

package/dist/components/getMediaProps.js

@@ -1,14 +1,7 @@
-import t from "./getFilterProps.js";
-import e from "../lib/helper/atts.js";
-function d({
-  className: r = "",
-  objectFit: f,
-  objectPosition: o,
-  style: n = {},
-  ...i
-}) {
-  return f && (f === "cover" || f === "cv" ? r = e(r, "-obf:cv") : f === "contain" || f === "cn" ? r = e(r, "-obf:cn") : n.objectFit = f), o && (n.objectPosition = o), i.className = r, i.style = n, t(i);
+import f from "./getFilterProps.js";
+function a({ obf: e, obp: r, css: t = {}, ...i }) {
+  return e && (t.obf = e), r && (t.obp = r), i.css = t, f(i);
 }
 export {
-  d as default
+  a as default
 };

package/dist/components/getTransformProps.js

@@ -1,8 +1,8 @@
-function n(t) {
-  return t.css == null && (t.css = {}), ["transform", "transformOrigin", "translate", "rotate", "scale", "clipPath"].forEach((a) => {
-    t[a] != null && (t.css[a] = t[a], delete t[a]);
+function f(t) {
+  return t.css == null && (t.css = {}), ["trf", "trfo", "trnslt", "rotate", "scale", "clipPath"].forEach((l) => {
+    t[l] != null && (t.css[l] = t[l], delete t[l]);
   }), t;
 }
 export {
-  n as default
+  f as default
 };

package/dist/config/prop_list.js

@@ -22,20 +22,14 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
   maxH: { style: "maxHeight", presets: ["100%"], converter: "size" },
   minW: { style: "minWidth", presets: ["100%"], converter: "size" },
   minH: { style: "minHeight", presets: ["100%", "100lvh", "100svh"], converter: "size" },
-  is: { style: "inline-size", converter: "size" },
-  bs: { style: "block-size", converter: "size" },
-  maxIs: { style: "maxInlineSize", converter: "size" },
-  maxBs: { style: "maxBlockSize", converter: "size" },
-  minIs: { style: "minInlineSize", converter: "size" },
-  minBs: { style: "minBlockSize", converter: "size" },
-  // is: inline-size, bs: block-size, maxI, maxB, minIs, minBs
+  // is: inline-size, bs: block-size, maxI, maxB, minIsz, minBsz
   c: {
     presets: [
       "inherit",
       "base",
       "text",
       "text-2",
-      // 'keycol',
+      // 'keycolor',
       "mix",
       "main",
       "accent"
@@ -53,14 +47,14 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
       "base-2",
       "base-3",
       "text",
-      // 'keycol',
+      // 'keycolor',
       "mix"
       // 'black',
       // 'white',
     ],
     converter: "color"
   },
-  keycol: { style: "--keycol", converter: "color" },
+  keycolor: { style: "--keycolor", converter: "color" },
   bd: {
     style: "border",
     utils: {
@@ -91,21 +85,13 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
       "accent",
       "mix",
       "divider",
-      // 'keycol',
+      // 'keycolor',
       "mix"
     ],
     converter: "color"
   },
-  // boxcolor: { _presets: TOKENS.palette, style: '--keycol', converter: 'color' },
+  // boxcolor: { _presets: TOKENS.palette, style: '--keycolor', converter: 'color' },
   bg: { utils: { none: "n" } },
-  bgi: { style: "backgroundImage" },
-  bgr: { style: "backgroundRepeat", utils: { n: "no-repeat" } },
-  bgp: { style: "backgroundPosition", utils: { center: "c" } },
-  bgsz: { style: "backgroundSize", utils: { cover: "cv", contain: "ct" } },
-  // bga: { style: 'backgroundAttachment' },
-  // bgo: { style: 'backgroundOrigin' },
-  // bcp: { style: 'backgroundClip' },
-  // bbm: { style: 'backgroundBlendMode' },
   // mask: { map: 1 },
   // Typography
   f: { style: "font", presets: ["inherit"] },
@@ -113,7 +99,7 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
   lh: { presets: ["1", ...s.lh], style: "lineHeight" },
   fw: {
     style: "fontWeight",
-    presets: s.fw
+    presets: [...s.fw, "100", "200", "300", "400", "500", "600", "700", "800", "900"]
   },
   ff: { style: "fontFamily", presets: ["base", "accent", "mono"], converter: 1 },
   fs: { style: "fontStyle", utils: { italic: "i" } },
@@ -126,7 +112,6 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
   // others
   bdrs: { presets: ["0", ...s.bdrs], converter: "bdrs" },
   bxsh: { presets: ["0", ...s.bxsh], converter: "bxsh" },
-  // shColor: { converter: 'color', style: '--sh-color' },
   // transition
   trs: { style: "transition" },
   // trsdu: { style: '--trsdu' },
@@ -199,7 +184,7 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
     //[...SPACE_PRESETS, ...TOKENS.p],
     converter: "space",
     // {x, y, t, b, l, r, is, bs } でも指定可能にする
-    objProcessor: (i) => `p${i}`
+    objProcessor: (i) => ({ prop: `p${i}`, context: null })
   },
   px: { presets: e, converter: "space" },
   py: { presets: e, converter: "space" },
@@ -220,7 +205,7 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
     presets: e,
     converter: "space",
     // {x, y, t, b, l, r, is, bs } でも指定可能にする
-    objProcessor: (i) => `m${i}`
+    objProcessor: (i) => ({ prop: `m${i}`, context: null })
   },
   mx: { utils: t, converter: "space" },
   my: { utils: t, converter: "space" },
@@ -238,8 +223,10 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
     presets: ["inherit", ...e],
     converter: "space"
   },
-  rowg: { converter: "space" },
-  colg: { converter: "space" },
+  gx: { converter: "space" },
+  // colg
+  gy: { converter: "space" },
+  // rowg
   cols: { style: "--cols" },
   rows: { style: "--rows" },
   pi: { style: "placeItems" },
@@ -257,6 +244,7 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
   fxg: { name: "fxg", presets: ["0", "1"] },
   fxsh: { name: "fxsh", presets: ["0", "1"] },
   fxb: { name: "fxb" }
+  // transform系
   // mask: { map: 1 },
   // flex: { map: 1 },
   // grid: { map: 1 },
@@ -280,22 +268,22 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
   },
   gridItem: {
     // item
-    ga: { presets: 1, utils: { "1/1": "1" } },
+    ga: { utils: { "1/1": "1", "1 / 1": "1" } },
     // grid-area
-    gc: { presets: 1 },
+    gc: { presets: ["1/-1"], utils: { "1 / -1": "1/-1" } },
     // grid-column
-    gcs: { presets: 1, style: "gridColumnStart" },
-    gce: { presets: 1, style: "gridColumnEnd" },
-    gr: { presets: 1 },
+    gr: { presets: ["1/-1"], utils: { "1 / -1": "1/-1" } },
     // grid-row
-    grs: { presets: 1, style: "gridRowStart" },
-    gre: { presets: 1, style: "gridRowEnd" }
+    gcs: { style: "gridColumnStart" },
+    gce: { style: "gridColumnEnd" },
+    grs: { style: "gridRowStart" },
+    gre: { style: "gridRowEnd" }
     // ...itemProps,
   },
   flex: {
     fxf: { style: "flex-flow" },
     // nowrap → Emmet は n だが、nw にしている. (whs と揃えている)
-    fxw: { utils: { wrap: "w", nowrap: "nw" } },
+    fxw: { utils: { wrap: "w", nowrap: "n" } },
     fxd: { utils: { column: "c", row: "r", "column-reverse": "cr", "row-reverse": "rr" } }
   },
   // fx: {
@@ -310,58 +298,48 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
   // transform: {
   // 	// transform
   // 	transformOrigin: { style: 1, utilKey: 'trfo', utils: 'origin' },
-  // 	translate: { style: 1, utils: 1, utilKey: 'trslt' },
+  // 	translate: { style: 1, utils: 1, utilKey: 'trnslt' },
   // 	rotate: { style: 1, utils: 1 },
   // 	scale: { style: 1 },
   // },
-  radii: {
-    tl: { style: "borderTopLeftRadius", utilKey: "bdtlrs", converter: "bdrs" },
-    tr: { style: "borderTopRightRadius", utilKey: "bdtrrs", converter: "bdrs" },
-    bl: { style: "borderBottomLeftRadius", utilKey: "bdblrs", converter: "bdrs" },
-    br: { style: "borderBottomRightRadius", utilKey: "bdbrrs", converter: "bdrs" },
-    ss: { style: "borderStartStartRadius", utilKey: "bdssrs", converter: "bdrs" },
-    se: { style: "borderStartEndRadius", utilKey: "bdsers", converter: "bdrs" },
-    es: { style: "borderEndStartRadius", utilKey: "bdesrs", converter: "bdrs" },
-    ee: { style: "borderEndEndRadius", utilKey: "bdeers", converter: "bdrs" }
+  bg_: {
+    bgi: {},
+    bgr: { style: "backgroundRepeat", utils: { n: "no-repeat" } },
+    bgp: { style: "backgroundPosition", utils: { center: "c" } },
+    bgsz: { style: "backgroundSize", utils: { cover: "cv", contain: "ct" } },
+    bga: { style: "backgroundAttachment" },
+    bgo: { style: "backgroundOrigin" },
+    bcp: { style: "backgroundClip" },
+    bbm: { style: "backgroundBlendMode" }
   },
-  // borders: {
-  // 	l: { style: 'borderLeft', utilKey: 'bdl' },
-  // 	r: { style: 'borderRight', utilKey: 'bdr' },
-  // 	t: { style: 'borderTop', utilKey: 'bdt' },
-  // 	b: { style: 'borderBottom', utilKey: 'bdb' },
-  // 	is: { style: 'borderInlineStart', utilKey: 'bdis' },
-  // 	bs: { style: 'borderBlockStart', utilKey: 'bdbs' },
-  // 	ie: { style: 'borderInlineEnd', utilKey: 'bdie' },
-  // 	be: { style: 'borderBlockEnd', utilKey: 'bdbe' },
-  // },
-  insets: {
-    is: {
-      style: "insetInlineStart",
-      utilKey: "iis",
-      converter: "space"
-    },
-    ie: {
-      style: "insetInlineEnd",
-      utilKey: "iie",
-      converter: "space"
-    },
-    bs: {
-      style: "insetBlockStart",
-      utilKey: "ibs",
-      converter: "space"
-    },
-    be: {
-      style: "insetBlockEnd",
-      utilKey: "ibe",
-      converter: "space"
-    }
+  bdrs_: {
+    bdtlrs: { style: "borderTopLeftRadius", converter: "bdrs" },
+    bdtrrs: { style: "borderTopRightRadius", converter: "bdrs" },
+    bdblrs: { style: "borderBottomLeftRadius", converter: "bdrs" },
+    bdbrrs: { style: "borderBottomRightRadius", converter: "bdrs" },
+    bdssrs: { style: "borderStartStartRadius", converter: "bdrs" },
+    bdsers: { style: "borderStartEndRadius", converter: "bdrs" },
+    bdesrs: { style: "borderEndStartRadius", converter: "bdrs" },
+    bdeers: { style: "borderEndEndRadius", converter: "bdrs" }
   },
-  mask: {},
+  i_: {
+    iis: { style: "insetInlineStart", converter: "space" },
+    iie: { style: "insetInlineEnd", converter: "space" },
+    ibs: { style: "insetBlockStart", converter: "space" },
+    ibe: { style: "insetBlockEnd", converter: "space" }
+  },
+  // mask: {},
   css: {
-    // transform系
-    translate: {
-      style: 1,
-      utilKey: "trslt",
+    isz: { style: "inline-size", converter: "size" },
+    bsz: { style: "block-size", converter: "size" },
+    maxIsz: { style: "maxInlineSize", converter: "size" },
+    maxBsz: { style: "maxBlockSize", converter: "size" },
+    minIsz: { style: "minInlineSize", converter: "size" },
+    minBsz: { style: "minBlockSize", converter: "size" },
+    trf: { style: "transform" },
+    trfo: { style: "transformOrigin" },
+    trnslt: {
+      style: "translate",
       utils: {
         "-50% -50%": "-50XY",
         "-50%": "-50X",
@@ -380,15 +358,19 @@ const e = ["0", "5", "10", "20", "30", "40", "50", "60", "70", "80"], t = { auto
         "1 -1": "-Y",
         "-1 -1": "-XY"
       }
-    }
+    },
+    fltr: { style: "filter" },
+    // fltr?
+    bdfltr: { style: "backdropFilter" },
+    // bdfltr?
+    fl: { style: "float", utils: { left: "l", right: "r" } },
+    cl: { style: "clear", utils: { left: "l", right: "r", both: "b" } },
+    obf: { style: "objectFit", utils: { cover: "cv", contain: "cn" } },
+    obp: { style: "objectPosition" }
     // Memo: その他、コアの処理このcssに入り得るものは以下の通り.(将来的に何か処理を追加するかもしれないもの)
-    // transform,
-    // transformOrigin,
     // clipPath: { style: 1 }, // cpp ?
     // objectFit: { style: 1, utilKey: 'obf', utils: { cover: 'cv', contain: 'cn' } },
     // objectPosition: { style: 1 },
-    // filter: { style: 1 }, // fltr?
-    // backdropFilter: { style: 1, presets:[] },
   }
   // hov: { c, bgc, bdc, bxsh },
 };

package/dist/config/tokens.js

@@ -1,4 +1,4 @@
-const e = {
+const l = {
   // p: ['box', 'box:s', 'box:l'],
   fz: [
     "root",
@@ -21,13 +21,14 @@ const e = {
   lts: ["base", "2xs", "xs", "s", "l", "xl", "2xl"],
   //['-3', '-2', '-1', '0', '1', '2', '3', '4', '5', '6', '7'],
   ff: ["base", "accent", "mono"],
-  fw: ["thin", "light", "normal", "medium", "bold", "heavy"],
+  // fw: ['thin', 'light', 'normal', 'medium', 'bold', 'heavy'],
+  fw: ["light", "normal", "bold"],
   op: ["low", "mid", "high"],
-  bdrs: ["1", "2", "3", "4", "5", "6", "99"],
-  bxsh: ["-1", "-2", "-3", "-4", "-5", "1", "2", "3", "4", "5"],
+  bdrs: ["5", "10", "20", "30", "40", "50", "60", "70", "80", "99"],
+  bxsh: ["-10", "-20", "-30", "-40", "-50", "-5", "5", "10", "20", "30", "40", "50"],
   // size:['container', 'container:s', 'container:l'],
   contentSize: ["xs", "s", "m", "l", "xl"],
-  // --size--xxx トークン
+  // --size-xxx トークン
   flow: ["xs", "s", "m", "l", "xl"],
   // getFlowDataで使う
   size: [],
@@ -58,10 +59,10 @@ const e = {
     "gray",
     "white",
     "black",
-    "keycol"
+    "keycolor"
   ]
   // filter: ['blur', 'blur:s', 'blur:l', 'darken', 'lighten'],
 };
 export {
-  e as default
+  l as default
 };

package/dist/css/base.css

@@ -1 +1 @@
-@property --overwideSize{syntax:"<length-percentage>";initial-value:100%;inherits:true}@property --herfLeading{syntax:"*";inherits:false;initial-value:calc(.5lh - .5em)}@property --trimHL{syntax:"*";inherits:false;initial-value:calc(-.5lh - -.5em)}:root{--size--xl:1600px;--size--l:1280px;--size--m:960px;--size--s:640px;--size--xs:16rem;--s5:0.25rem;--s10:0.375rem;--s20:0.625rem;--s30:1rem;--s40:1.625rem;--s50:2.625rem;--s60:4.25rem;--s70:6.875rem;--s80:11.125rem;--flowM--s:var(--s20);--flowM--m:var(--s40);--flowM--h:1em;--gutter:var(--s40);--ff--base:-apple-system,"BlinkMacSystemFont","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif,"Segoe UI Emoji";--ff--accent:"Garamond","Baskerville","Times New Roman",serif;--ff--mono:Menlo,Consolas,monaco,monospace;--fz-mol:8;--fz--4xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 5));--fz--3xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 4));--fz--2xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 3));--fz--xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 2));--fz--l:calc(1em*var(--fz-mol)/(var(--fz-mol) - 1));--fz--m:1em;--fz--s:calc(1em*var(--fz-mol)/(var(--fz-mol) + 1));--fz--xs:calc(1em*var(--fz-mol)/(var(--fz-mol) + 2));--fz--2xs:calc(1em*var(--fz-mol)/(var(--fz-mol) + 3));--fw--light:300;--fw--normal:400;--fw--medium:500;--fw--bold:700;--lh--base:1.75;--lh--xs:calc(var(--lh--base) - 0.25);--lh--s:calc(var(--lh--base) - 0.125);--lh--l:calc(var(--lh--base) + 0.125);--lh--xl:calc(var(--lh--base) + 0.25);--lts--base:normal;--lts--s:-0.05em;--lts--l:0.05em;--lts--xl:0.125em;--black:#000;--white:#fff;--gray:#566676;--red:#db3024;--orange:#dc6d18;--yellow:#dcb518;--green:#1abc3a;--blue:#2192de;--purple:#6124db;--pink:#db249e;--c--main:#1e4e6b;--c--accent:#bc3453;--c--base:#fcfcfd;--c--base-2:#eeeff1;--c--text:#141415;--c--text-2:#62646a;--c--divider:#cfd0d3;--c--link:#0c61e4;--op--low:0.25;--op--mid:0.5;--op--high:0.75;--trsdu--default:0.4s;--trsdu--modal:0.5s;--trsdu--acc:0.4s;--bdrs--1:2px;--bdrs--2:4px;--bdrs--3:0.5rem;--bdrs--4:1rem;--bdrs--5:2rem;--bdrs--99:99rem;--sh-hsl:220 4% 8%;--sh-a:5%;--sh-sz--0:1px 2px 3px 0;--sh-sz--1:2px 4px 6px 0;--sh-sz--2:3px 6px 9px 0;--sh-sz--3:5px 10px 15px 0;--sh-sz--4:8px 16px 24px 0;--sh-sz--5:13px 26px 39px 0}html{font-size:var(--root-fz);-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body{background-color:var(--c--base);color:var(--c--text);font-family:var(--ff--base);font-size:1rem;letter-spacing:var(--lts--base);line-height:var(--lh--base);overflow-x:clip}h1,h2,h3,h4,h5,h6{font-family:var(--heading-ff,inherit);font-size:var(--fz,revert);font-weight:var(--heading-fw,bolder);line-height:var(--lh,inherit)}h1{--fz:var(--fz--3xl);--lh:var(--lh--xs)}h2{--fz:var(--fz--2xl);--lh:var(--lh--xs)}h3{--fz:var(--fz--xl);--lh:var(--lh--s)}h4{--fz:var(--fz--l);--lh:var(--lh--s)}h5{--fz:var(--fz--m)}h6{--fz:var(--fz--s)}ol,ul{list-style:none;padding:0;padding-inline-start:var(--list-pis,0)}:is(ul,ol):not([class]){--list-pis:1.5em;list-style:revert}a{color:var(--c--link);-webkit-text-decoration:var(--link-td,underline);text-decoration:var(--link-td,underline)}td,th{min-inline-size:var(--cell-minIs,unset);padding:var(--cell-p,.5em)}th{background-color:var(--th-bgc,transparent);color:var(--th-c,inherit)}td{background-color:var(--td-bgc,transparent);color:var(--td-c,inherit)}hr{block-size:0;border:none;border-block-start:1px solid}blockquote{border-inline-start:3px solid currentColor;padding:var(--s30)}pre{overflow-x:auto}body:has(:modal[open]){overflow:hidden}dialog:not([open]){pointer-events:none}:root{--root-fz:clamp(0.875rem,0.625rem + 1vw,1rem);--hov-trsdu:0.3s;--overwideSize:100vw}.re--sh,:root{--sh-color:hsl(var(--sh-hsl)/var(--sh-a));--bxsh--1:var(--sh-sz--0) var(--sh-color),var(--sh-sz--1) var(--sh-color);--bxsh--2:var(--sh-sz--1) var(--sh-color),var(--sh-sz--2) var(--sh-color);--bxsh--3:var(--sh-sz--2) var(--sh-color),var(--sh-sz--3) var(--sh-color);--bxsh--4:var(--sh-sz--3) var(--sh-color),var(--sh-sz--4) var(--sh-color);--bxsh--5:var(--sh-sz--4) var(--sh-color),var(--sh-sz--5) var(--sh-color);--bxsh--i1:inset var(--sh-sz--0) var(--sh-color),inset var(--sh-sz--1) var(--sh-color);--bxsh--i2:inset var(--sh-sz--1) var(--sh-color),inset var(--sh-sz--2) var(--sh-color)}.re--style{background:none;border:none;color:inherit;font:inherit;height:auto;margin:0;max-height:unset;max-width:unset;padding:0;width:auto}.re--list{--list-pis:1.5em;list-style:revert}
+@property --overwideSize{syntax:"<length-percentage>";initial-value:100%;inherits:true}@property --HL{syntax:"*";inherits:false;initial-value:calc(.5lh - .5em)}@property --trimHL{syntax:"*";inherits:false;initial-value:calc(-.5lh - -.5em)}:root{--s5:0.25rem;--s10:0.375rem;--s20:0.625rem;--s30:1rem;--s40:1.625rem;--s50:2.625rem;--s60:4.25rem;--s70:6.875rem;--s80:11.125rem;--size-xl:1600px;--size-l:1280px;--size-m:960px;--size-s:640px;--size-xs:16rem;--flowM-s:var(--s20);--flowM-m:var(--s40);--flowM-h:1em;--ff-base:-apple-system,"BlinkMacSystemFont","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif,"Segoe UI Emoji";--ff-accent:"Garamond","Baskerville","Times New Roman",serif;--ff-mono:Menlo,Consolas,monaco,monospace;--_fzmol:8;--fz-4xl:calc(1em*var(--_fzmol)/(var(--_fzmol) - 5));--fz-3xl:calc(1em*var(--_fzmol)/(var(--_fzmol) - 4));--fz-2xl:calc(1em*var(--_fzmol)/(var(--_fzmol) - 3));--fz-xl:calc(1em*var(--_fzmol)/(var(--_fzmol) - 2));--fz-l:calc(1em*var(--_fzmol)/(var(--_fzmol) - 1));--fz-m:1em;--fz-s:calc(1em*var(--_fzmol)/(var(--_fzmol) + 1));--fz-xs:calc(1em*var(--_fzmol)/(var(--_fzmol) + 2));--fz-2xs:calc(1em*var(--_fzmol)/(var(--_fzmol) + 3));--fw-light:300;--fw-normal:400;--fw-bold:700;--lh-base:1.75;--lh-xs:calc(var(--lh-base) - 0.25);--lh-s:calc(var(--lh-base) - 0.125);--lh-l:calc(var(--lh-base) + 0.125);--lh-xl:calc(var(--lh-base) + 0.25);--lts-base:normal;--lts-s:-0.05em;--lts-l:0.05em;--black:#000;--white:#fff;--gray:#566676;--red:#db3024;--orange:#dc6d18;--yellow:#dcb518;--green:#1abc3a;--blue:#2192de;--purple:#6124db;--pink:#db249e;--c-main:#1e4e6b;--c-accent:#bc3453;--c-base:#fcfcfd;--c-base-2:#eeeff1;--c-text:#141415;--c-text-2:#62646a;--c-divider:#cfd0d3;--c-link:#0c61e4;--op-low:0.25;--op-mid:0.5;--op-high:0.75;--bdrs-5:2px;--bdrs-10:0.25rem;--bdrs-20:0.5rem;--bdrs-30:1rem;--bdrs-40:1.5rem;--bdrs-50:2rem;--bdrs-99:99rem;--_shc-hsl:220 4% 8%;--_shc-a:5%;--_shsz-0:1px 2px 3px 0;--_shsz-1:2px 4px 6px 0;--_shsz-2:3px 6px 9px 0;--_shsz-3:5px 10px 15px 0;--_shsz-4:8px 16px 24px 0;--_shsz-5:13px 26px 39px 0;--trsdu-base:0.4s;--root--fz:clamp(0.875rem,0.625rem + 1vw,1rem);--gutter:var(--s40)}html{font-size:var(--root--fz);-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body{background-color:var(--c-base);color:var(--c-text);font-family:var(--ff-base);font-size:1rem;letter-spacing:var(--lts-base);line-height:var(--lh-base);overflow-x:clip}h1,h2,h3,h4,h5,h6{font-family:var(--h--ff,inherit);font-size:var(--fz,revert);font-weight:var(--h--fw,bolder);line-height:var(--lh,inherit)}h1{--fz:var(--fz-3xl);--lh:var(--lh-xs)}h2{--fz:var(--fz-2xl);--lh:var(--lh-xs)}h3{--fz:var(--fz-xl);--lh:var(--lh-s)}h4{--fz:var(--fz-l);--lh:var(--lh-s)}h5{--fz:var(--fz-m)}h6{--fz:var(--fz-s)}ol,ul{--pis:var(--list--pis,0);list-style:none;padding:0;padding-inline-start:var(--pis)}a{--c:var(--c-link);--td:var(--link--td,underline);color:var(--c);-webkit-text-decoration:var(--td);text-decoration:var(--td)}td,th{padding:.25em .375em}hr{block-size:0;border:none;border-block-start:1px solid}blockquote{border-inline-start:3px solid currentColor;padding:var(--s20) var(--s30)}pre{overflow-x:auto}body:has(:modal[open]){overflow:hidden}dialog:not([open]){pointer-events:none}.re--sh,:root{--_shc:hsl(var(--_shc-hsl)/var(--_shc-a));--bxsh-10:var(--_shsz-0) var(--_shc),var(--_shsz-1) var(--_shc);--bxsh-20:var(--_shsz-1) var(--_shc),var(--_shsz-2) var(--_shc);--bxsh-30:var(--_shsz-2) var(--_shc),var(--_shsz-3) var(--_shc);--bxsh-40:var(--_shsz-3) var(--_shc),var(--_shsz-4) var(--_shc);--bxsh-50:var(--_shsz-4) var(--_shc),var(--_shsz-5) var(--_shc);--bxsh-i10:inset var(--_shsz-0) var(--_shc),inset var(--_shsz-1) var(--_shc);--bxsh-i20:inset var(--_shsz-1) var(--_shc),inset var(--_shsz-2) var(--_shc)}.re--style{background:none;border:none;color:inherit;font:inherit;height:auto;padding:0;width:auto}.re--list,:is(ul,ol):where(:not([class])){--list--pis:1.5em;list-style:revert}

package/dist/css/dynamic.css

@@ -1 +1 @@
-.d--accordion{--trsdu:var(--trsdu--acc)}.d--accordion._opened{--_notOpened: }.d--accordion:not(._opened){--_isOpened: }.d--accordion__header{gap:.5em;outline-offset:-1px}.d--accordion__header::-webkit-details-marker{display:none}.d--accordion__body{grid-template-rows:1fr;transition-duration:var(--trsdu);transition-property:margin-block,padding-block,opacity,grid-template-rows}:where(.d--accordion:not(._opened))>.d--accordion__body{grid-template-rows:0fr;margin-block:0!important;padding-block:0!important}:where(.d--accordion__icon)>.l--icon{rotate:var(--_isOpened,-180deg);transition-duration:var(--trsdu)}.d--modal{--mbs:0;--offset:0 0;--backdrop:rgba(0,0,0,.6);transition-duration:var(--trsdu--modal)}.d--modal::backdrop{background:var(--backdrop);transition:opacity var(--trsdu--modal)}.d--modal__body{overscroll-behavior:contain}.d--modal:not([data-is-open]){translate:var(--offset)}.d--modal:not([data-is-open]),.d--modal:not([data-is-open])::backdrop{opacity:0}.d--tabs{display:grid;grid:"list" "panel"}.d--tabs__list{grid-area:list;overflow-x:auto}.d--tabs__tab[aria-selected=true]{--_notActive: }.d--tabs__tab[aria-selected=false]{--_isActive: }:where(.d--tabs__tab){color:var(--_notActive,var(--c--text-2))}.d--tabs__panel{grid-area:panel;overflow-x:auto;width:100%}.d--tabs__panel:where([aria-hidden=true]){display:none}
+.d--accordion{--trsdu:var(--acc--trsdu,0.4s)}.d--accordion._opened{--_notOpened: }.d--accordion:not(._opened){--_isOpened: }.d--accordion_header{gap:.5em;outline-offset:-1px}.d--accordion_header::-webkit-details-marker{display:none}.d--accordion_body{grid-template-rows:1fr;transition-duration:var(--trsdu);transition-property:margin-block,padding-block,opacity,grid-template-rows}:where(.d--accordion:not(._opened))>.d--accordion_body{grid-template-rows:0fr;margin-block:0!important;padding-block:0!important}:where(.d--accordion_icon)>.l--icon{rotate:var(--_isOpened,-180deg);transition-duration:var(--trsdu)}.d--modal{--maxIsz:100%;--mbs:0;--offset:0 0;--backdrop:rgba(0,0,0,.6);transition-duration:var(--modal--trsdu,.5s)}.d--modal::backdrop{background:var(--backdrop);transition:opacity var(--modal--trsdu,.5s)}.d--modal_body{overscroll-behavior:contain}.d--modal:not([data-is-open]){translate:var(--offset)}.d--modal:not([data-is-open]),.d--modal:not([data-is-open])::backdrop{opacity:0}.d--tabs{display:grid;grid:"list" "panel"}.d--tabs_list{grid-area:list;overflow-x:auto}.d--tabs_tab[aria-selected=true]{--_notActive: }.d--tabs_tab[aria-selected=false]{--_isActive: }:where(.d--tabs_tab){color:var(--_notActive,var(--c-text-2))}.d--tabs_panel{grid-area:panel;overflow-x:auto;width:100%}.d--tabs_panel:where([aria-hidden=true]){display:none}

package/dist/css/layout.css

@@ -1 +1 @@
-.l--frame{overflow:hidden}.l--frame>:where(img,video,picture,iframe){display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.l--flex{display:flex}.l--flex--cluster{align-items:center;flex-wrap:wrap}.l--grid{display:grid}.l--grid--repeat{--rows:1;--cols:1;grid-template:repeat(var(--rows),1fr)/repeat(var(--cols),1fr)}.l--stack{display:flex;flex-direction:column}.l--center{display:grid;place-content:center;place-items:center}.l--columns{--cols:2;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}.l--columns--liquid{--col-auto:auto-fill;--col-size:var(--size--xs);display:grid;grid-template-columns:repeat(var(--col-auto),minmax(min(var(--col-size),100%),1fr))}.l--withSide{--side-w:auto;--main-w:max(var(--size--xs),50%);display:flex;flex-wrap:wrap}.l--withSide>[data-is-side]{flex-basis:var(--side-w);flex-grow:1}.l--withSide>:not([data-is-side]){flex-basis:min(100%,var(--main-w));flex-grow:9999999}.l--icon{--scale:1;--offset:0;display:inline-flex;flex-shrink:0;scale:var(--scale);translate:var(--offset);vertical-align:middle}.l--icon:where(:not([fill])){fill:currentcolor}.l--icon:where(:not([width])){height:1em;width:1em}.l--divider{--bdc:var(--c--divider)}
+.l--frame{overflow:hidden}.l--frame>:where(img,video,picture,iframe){display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.l--flex{display:flex}.l--flex-cluster{align-items:center;flex-wrap:wrap}.l--grid{display:grid}.l--grid-repeat{--rows:1;--cols:1;grid-template:repeat(var(--rows),1fr)/repeat(var(--cols),1fr)}.l--stack{display:flex;flex-direction:column}.l--center{display:grid;place-content:center;place-items:center}.l--columns{--cols:2;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr))}.l--columns-liquid{--autoType:auto-fill;--colSize:var(--size-xs);display:grid;grid-template-columns:repeat(var(--autoType),minmax(min(var(--colSize),100%),1fr))}.l--withSide{--sideW:auto;--mainW:max(var(--size-xs),50%);display:flex;flex-wrap:wrap}.l--withSide>[data-is-side]{flex-basis:var(--sideW);flex-grow:1}.l--withSide>:not([data-is-side]){flex-basis:min(100%,var(--mainW));flex-grow:9999999}.l--icon{--scale:1;--offset:0;display:inline-flex;flex-shrink:0;scale:var(--scale);translate:var(--offset);vertical-align:middle}.l--icon:where(:not([fill])){fill:currentcolor}.l--icon:where(:not([width])){height:1em;width:1em}.l--divider{--bdc:var(--c-divider)}