lism-css 0.3.5 → 0.5.1

package/src/scss/utility/_cbox.scss

@@ -1,11 +1,12 @@
 /*
     Note: c,bgc,bdc Prop Class より前で読み込む(優先度を下げる）こと。
 */
-.u--cbox {
-	--c: color-mix(in srgb, var(--c-text), var(--keycolor) var(--cbox--pct-c, 40%));
-	--bgc: color-mix(in srgb, var(--c-base), var(--keycolor) var(--cbox--pct-bg, 5%));
+.u-cbox {
+	--c: color-mix(in srgb, var(--c--text), var(--keycolor) var(--cbox-cPct, 40%));
+	--bgc: color-mix(in srgb, var(--c--base), var(--keycolor) var(--cbox-bgPct, 5%));
 	--bdc: var(--keycolor);
-	--c-link: var(--c);
+	--c--link: var(--keycolor);
+	// --link-td: underline;
 	color: var(--c);
 	background-color: var(--bgc);
 }

package/src/scss/utility/_hidden.scss

@@ -0,0 +1,14 @@
+// For screen reader text
+
+// .u-hidden--focusable:not(:focus),
+.u-hidden.u-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}

package/src/scss/utility/_itemDivider.scss

@@ -0,0 +1,11 @@
+.u-itemDivider {
+	--bdw: 1px;
+	--bdc: currentColor;
+	gap: var(--bdw);
+	// padding: var(--bdw); → 外枠も見せるなら
+	overflow: clip;
+
+	& > * {
+		box-shadow: 0 0 0 var(--bdw) var(--bdc);
+	}
+}

package/src/scss/utility/_linkExpand.scss

@@ -0,0 +1,10 @@
+.u-expandedLink {
+	position: static;
+
+	&::before {
+		position: absolute;
+		inset: 0;
+		z-index: 0;
+		content: '';
+	}
+}

package/src/scss/utility/_trimHL.scss

@@ -1,18 +1,34 @@
-table,
-figure,
-img,
-video {
-	--trimHL: 0px;
-}
+// そのうち text-box-trim が使える
 
-.u--trimHL {
-	margin-block: var(--trimHL);
+.u-trim {
+	// 詰まりすぎにならないようにほんの少しだけ余裕を持たせる
+	margin-block: calc(0.5px + var(--HL) * -1);
 }
-.u--trimBox {
-	> :first-child {
-		margin-block-start: var(--trimHL);
+
+/*
+--HL とは別に --trimHL を定義しているのは、トリミング除外要素で 0px に上書きしても --HL 自体の値は無効にしないようにするため。
+	これにより、imgに対してmargin-block-start:var(--HL) を適用して余白を揃えたりできる。
+*/
+
+.u-trimItems {
+	> * {
+		--trimHL: calc(0.5px + var(--HL) * -1);
+		margin-block: var(--trimHL);
 	}
-	> :last-child {
-		margin-block-end: var(--trimHL);
+
+	> :where(figure, img, button) {
+		--trimHL: 0px;
 	}
 }
+
+// .u-trimBox {
+// 	:where(&) > * {
+// 		--trimHL: calc(0.5px + var(--HL) * -1);
+// 	}
+// 	> :first-child {
+// 		margin-block-start: var(--trimHL);
+// 	}
+// 	> :last-child {
+// 		margin-block-end: var(--trimHL);
+// 	}
+// }

package/src/scss/utility/index.scss

@@ -1,47 +1,5 @@
 @forward './trimHL';
 @forward './cbox';
-
-// for screen reader
-.u--hidden {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border-width: 0;
-}
-
-.u--overlayLink {
-	text-decoration: none;
-	position: static;
-	color: inherit;
-
-	&::before {
-		position: absolute;
-		inset: 0;
-		z-index: 0;
-		content: '';
-	}
-}
-
-// 次の要素の mbs を 0 にする。（hidden要素 や absoluteな要素が先頭に入り込んでいる時などに活用できる。）
-.u--skipFlow + * {
-	--mbs: 0;
-}
-
-// background-clip: text;は -webkit-
-.u--clipText {
-	color: transparent;
-	-webkit-background-clip: text !important;
-	background-clip: text !important;
-}
-
-.u--outerR {
-	--inner-bdrs: calc(var(--bdrs, 0px) - var(--p, 0px));
-}
-.u--innerR {
-	border-radius: var(--inner-bdrs);
-}
+@forward './itemDivider';
+@forward './linkExpand';
+@forward './hidden';

package/dist/components/Box/getProps.js

@@ -1,7 +0,0 @@
-import r from "../../lib/helper/atts.js";
-function a({ lismClass: o, ...t }) {
-  return t.lismClass = r(o, "l--box"), t;
-}
-export {
-  a as default
-};

package/dist/components/Columns/getProps.js

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

package/dist/components/Decorator/getProps.js

@@ -1,17 +0,0 @@
-import i from "../../lib/helper/atts.js";
-import m from "../getTransformProps.js";
-import a from "../getInsetProps.js";
-import s from "../getFilterProps.js";
-import { getGridItemProps as f } from "../Grid/getProps.js";
-function P({ lismClass: o, size: r, ...t }) {
-  t = f(s(m(a(t)))), r && (t.ar = "1/1", t.w = r);
-  const e = {
-    lismClass: i(o, "l--decorator"),
-    skipState: !0,
-    "aria-hidden": "true"
-  };
-  return Object.assign(e, t);
-}
-export {
-  P as default
-};

package/dist/components/Divider/getProps.js

@@ -1,11 +0,0 @@
-import e from "../../lib/helper/atts.js";
-function d({ lismClass: r, ...t }) {
-  return { ...{
-    lismClass: e(r, "l--divider"),
-    bd: "bs",
-    "aria-hidden": "true"
-  }, ...t };
-}
-export {
-  d as getDividerProps
-};

package/dist/components/Divider/index.js

@@ -1,9 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { getDividerProps as i } from "./getProps.js";
-import o from "../Lism/index.js";
-function f(r) {
-  return /* @__PURE__ */ t(o, { skipState: !0, ...i(r) });
-}
-export {
-  f as default
-};

package/dist/components/Flex/Cluster.js

@@ -1,8 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import e from "./index.js";
-function a(r) {
-  return /* @__PURE__ */ t(e, { variant: "cluster", ...r });
-}
-export {
-  a as default
-};

package/dist/components/Flex/FlexItem.js

@@ -1,8 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import e from "../Lism/index.js";
-function p({ children: o, layout: m, ...t }) {
-  return /* @__PURE__ */ n(m || e, { ...t, children: o });
-}
-export {
-  p as default
-};

package/dist/components/Flex/getProps.js

@@ -1,13 +0,0 @@
-import t from "../../lib/helper/atts.js";
-function x(f) {
-  return f.flex == null && (f.flex = {}), ["fxf", "fxd", "fxw"].forEach((l) => {
-    f[l] != null && (f.flex[l] = f[l], delete f[l]);
-  }), f;
-}
-function i({ _flex: f = "flex", lismClass: l, ...e }) {
-  return e.lismClass = t(l, `l--${f}`), x(e);
-}
-export {
-  i as getFlexProps,
-  x as mergeFlexContextProps
-};

package/dist/components/Frame/getProps.js

@@ -1,7 +0,0 @@
-import a from "../../lib/helper/atts.js";
-function o({ lismClass: r, ...t }) {
-  return t.lismClass = a(r, "l--frame"), t;
-}
-export {
-  o as default
-};

package/dist/components/Grid/GridItem.js

@@ -1,9 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { getGridItemProps as i } from "./getProps.js";
-import e from "../Lism/index.js";
-function d({ children: o, layout: m, ...t }) {
-  return /* @__PURE__ */ r(m || e, { ...i(t), children: o });
-}
-export {
-  d as default
-};

package/dist/components/Grid/getProps.js

@@ -1,28 +0,0 @@
-import e from "../../lib/helper/atts.js";
-function r(g) {
-  return g.grid == null && (g.grid = {}), ["gd", "gt", "gta", "gtc", "gtr", "gaf", "gar", "gac"].forEach((t) => {
-    g[t] != null && (g.grid[t] = g[t], delete g[t]);
-  }), g;
-}
-function d({ _grid: g = "grid", lismClass: t, ...i }) {
-  return i = r(i), i.lismClass = e(t, `l--${g}`), i;
-}
-function l(g) {
-  return g.gridItem == null && (g.gridItem = {}), [
-    "ga",
-    "gc",
-    "gr",
-    "gcs",
-    "gce",
-    "grs",
-    "gre"
-    //'aslf', 'jslf', 'pslf', 'ord'
-  ].forEach((t) => {
-    g[t] != null && (g.gridItem[t] = g[t], delete g[t]);
-  }), g;
-}
-export {
-  l as getGridItemProps,
-  d as getGridProps,
-  r as mergeGridContextProps
-};

package/dist/components/Icon/getProps.js

@@ -1,60 +0,0 @@
-import p from "./presets.js";
-import h from "../../lib/helper/atts.js";
-function b(c) {
-  const i = {}, l = c.match(/<svg([^>]*?)>([\s\S]*?)<\/svg>/i);
-  if (l) {
-    const [, g, v] = l, u = /([\w-]+)=["']([^"']*)["']/g;
-    let a;
-    for (; (a = u.exec(g)) !== null; ) {
-      const [, t, f] = a;
-      if (t === "style") {
-        const s = {};
-        f.split(";").forEach((r) => {
-          const [e, o] = r.split(":").map((n) => n.trim());
-          e && o && (s[e] = o);
-        }), i[t] = s;
-      } else
-        i[t] = f;
-    }
-    return { svgProps: i, svgContent: v };
-  }
-  return {};
-}
-function w({
-  lismClass: c,
-  className: i = "",
-  style: l = {},
-  // variant,
-  as: g,
-  tag: v,
-  scale: u,
-  offset: a,
-  icon: t,
-  label: f,
-  exProps: s = {},
-  ...r
-}) {
-  let e = v || "span", o = "";
-  if (r.viewBox)
-    e = "svg";
-  else if (t)
-    if (typeof t == "string")
-      if (t.startsWith("<svg")) {
-        e = "_SVG_";
-        const { svgProps: n = {}, svgContent: m = "" } = b(t), { class: S, style: C, ..._ } = n;
-        i = h(i, S), l = { ...l, ...C }, s = { ...s, ..._, fill: "currentColor" }, o = m;
-      } else {
-        const n = p[t] || null;
-        n != null && (e = "_SVG_", s = { ...s, ...n });
-      }
-    else if (typeof t == "object" && t.as) {
-      const { as: n, ...m } = t;
-      e = n, s = { ...s, ...m };
-    } else
-      e = t;
-  else g && (e = g);
-  return f ? (s["aria-label"] = f, s.role = "img") : s["aria-hidden"] = "true", u && (l["--scale"] = u), a && (l["--offset"] = a), r.lismClass = h(c, "l--icon", i), r.style = { ...l }, { Component: e, lismProps: r, exProps: s, content: o };
-}
-export {
-  w as default
-};

package/dist/components/Layer/getProps.js

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

package/dist/components/Lism/Media.js

@@ -1,9 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import e from "../../lib/getLismProps.js";
-import p from "../getMediaProps.js";
-function d({ as: o, exProps: r, tag: t, ...i }) {
-  return /* @__PURE__ */ m(o || t || "img", { ...e(p(i)), ...r });
-}
-export {
-  d as default
-};

package/dist/components/Modal/CloseIconBtn.js

@@ -1,19 +0,0 @@
-import { jsx as o, jsxs as l, Fragment as m } from "react/jsx-runtime";
-import { defaultProps as a } from "./getProps.js";
-import i from "../Lism/index.js";
-import c from "../Icon/index.js";
-function x({
-  children: r,
-  modalId: e = "",
-  icon: s,
-  srText: n = "Close",
-  ...t
-}) {
-  return /* @__PURE__ */ o(i, { "data-modal-close": e, ...a.closeBtn, ...t, children: r || /* @__PURE__ */ l(m, { children: [
-    /* @__PURE__ */ o(c, { icon: s || "x" }),
-    /* @__PURE__ */ o("span", { className: "u--hidden", children: n || "Close" })
-  ] }) });
-}
-export {
-  x as default
-};

package/dist/components/Modal/Footer.js

@@ -1,9 +0,0 @@
-import { jsx as f } from "react/jsx-runtime";
-import { defaultProps as m } from "./getProps.js";
-import a from "../Lism/index.js";
-function s({ layout: o, children: t, ...r }) {
-  return /* @__PURE__ */ f(o || a, { ...m.footer, ...r, children: t });
-}
-export {
-  s as default
-};

package/dist/components/Modal/Header.js

@@ -1,9 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { defaultProps as e } from "./getProps.js";
-import m from "../Lism/index.js";
-function p({ children: o, layout: r, ...t }) {
-  return /* @__PURE__ */ a(r || m, { ...e.header, ...t, children: o });
-}
-export {
-  p as default
-};

package/dist/components/Spacer/getProps.js

@@ -1,21 +0,0 @@
-import s from "../../lib/helper/atts.js";
-import l from "../../lib/getBpData.js";
-import u from "../../lib/getMaybeCssVar.js";
-function h({ lismClass: c, ...e }) {
-  const n = {
-    lismClass: s(c, "l--spacer"),
-    "aria-hidden": "true"
-  };
-  if (e.h != null) {
-    let t = l(e.h);
-    t = Object.entries(t).reduce((r, [a, i]) => (r[a] = u(i, "space"), r), {}), e.h = t;
-  }
-  if (e.w != null) {
-    let t = l(e.w);
-    t = Object.entries(t).reduce((r, [a, i]) => (r[a] = u(i, "space"), r), {}), e.w = t;
-  }
-  return { ...n, ...e };
-}
-export {
-  h as default
-};

package/dist/components/Spacer/index.js

@@ -1,9 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import o from "./getProps.js";
-import e from "../Lism/index.js";
-function a(r) {
-  return /* @__PURE__ */ t(e, { skipState: !0, ...o(r) });
-}
-export {
-  a as default
-};

package/dist/components/WithSide/getProps.js

@@ -1,14 +0,0 @@
-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["--sideW"] = t), r != null && (i["--mainW"] = r), Object.assign(
-    {
-      lismClass: n(o, "l--withSide"),
-      style: i
-    },
-    l(e)
-  );
-}
-export {
-  f as getWithSideProps
-};

package/dist/components/getInsetProps.js

@@ -1,8 +0,0 @@
-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,7 +0,0 @@
-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 {
-  a as default
-};

package/dist/components/getTransformProps.js

@@ -1,8 +0,0 @@
-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 {
-  f as default
-};