lism-css 0.11.0 → 0.13.0

package/packages/astro/{SwitchCols → layout/SwitchCols}/SwitchCols.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { AstroLismFixedLayoutProps } from '../types';
+import type { AstroLismFixedLayoutProps } from '../../types';
 import type { SwitchColsProps } from 'lism-css/lib/types/LayoutProps';
-import { Lism } from '../Lism';
+import { Lism } from '../../Lism';
 
 type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps & Omit<SwitchColsProps, 'layout'>;
 

package/packages/astro/layout/TileGrid/TileGrid.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismFixedLayoutProps } from '../../types';
+import { Lism } from '../../Lism';
+
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismFixedLayoutProps;
+
+const props = Astro.props;
+---
+
+<Lism layout="tileGrid" {...props}><slot /></Lism>

package/packages/astro/layout/TileGrid/index.ts

@@ -0,0 +1 @@
+export { default as TileGrid } from './TileGrid.astro';

package/packages/astro/{LinkBox/LinkBox.astro → state/BoxLink/BoxLink.astro}

@@ -1,16 +1,16 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { AstroLismBaseProps } from '../types';
-import { Lism } from '../Lism';
+import type { AstroLismBaseProps } from '../../types';
+import { Lism } from '../../Lism';
 
 type Props<Tag extends HTMLTag = 'a'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 
 const { as, exProps, ...props } = Astro.props;
 
 const hasHref = !!props.href;
-// LinkBoxは基本的にリンク要素（aタグ）として機能するため、
+// BoxLinkは基本的にリンク要素（aタグ）として機能するため、
 // hrefがないかつ、aタグとしてレンダリングする場合はdivタグに置き換える
 const tag: HTMLTag = !hasHref && (as ?? 'a') === 'a' ? 'div' : (as ?? 'a');
 ---
 
-<Lism isLinkBox as={tag} {...props} {...exProps}><slot /></Lism>
+<Lism isBoxLink as={tag} {...props} {...exProps}><slot /></Lism>

package/packages/astro/state/BoxLink/index.ts

@@ -0,0 +1 @@
+export { default as BoxLink } from './BoxLink.astro';

package/packages/astro/state/Container/Container.astro

@@ -0,0 +1,11 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { AstroLismBaseProps } from '../../types';
+import { Lism } from '../../Lism';
+
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
+
+const props = Astro.props;
+---
+
+<Lism isContainer {...props}><slot /></Lism>

package/packages/astro/{Layer → state/Layer}/Layer.astro

@@ -1,7 +1,7 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { AstroLismBaseProps } from '../types';
-import { Lism } from '../Lism';
+import type { AstroLismBaseProps } from '../../types';
+import { Lism } from '../../Lism';
 
 type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 

package/packages/astro/{Wrapper → state/Wrapper}/Wrapper.astro

@@ -1,8 +1,8 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { AstroLismBaseProps } from '../types';
+import type { AstroLismBaseProps } from '../../types';
 import type { LismProps } from 'lism-css/lib/getLismProps';
-import { Lism } from '../Lism';
+import { Lism } from '../../Lism';
 
 type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> &
   AstroLismBaseProps & {

package/src/scss/_auto_output.scss

@@ -14,7 +14,7 @@ base_type:
 	    常に変数で管理されるようになるので、他の処理と絡ませることがしやすい。
 	    デメリット: *= は処理負荷が高い。また、途中のBPから使えるようにするにはCSS記述増える）
 
-	3 → BPクラスには変数使わないが、文字数省略のため baseのProp classだけ変数化して *= セレクタ使う
+	3 → BPクラスには変数使わないが、文字数省略のため baseのProperty Classだけ変数化して *= セレクタ使う
 */
 
 // マップから値を取得し、nullの場合はデフォルト値を返す

package/src/scss/_prop-config.scss

@@ -101,7 +101,12 @@ $props: (
     utilities: (
       'none': 'none',
       'block': 'block',
-      'in-flex': 'inline-flex',
+      'flex': 'flex',
+      'inline-flex': 'inline-flex',
+      'grid': 'grid',
+      'inline-grid': 'inline-grid',
+      'inline': 'inline',
+      'inline-block': 'inline-block',
     ),
     bp: 1,
   ),
@@ -290,7 +295,7 @@ $props: (
       'divider': 'var(--divider)',
       'inherit': 'inherit',
       'transparent': 'transparent',
-      'cc': 'currentColor',
+      'current': 'currentColor',
     ),
     isVar: 1,
   ),
@@ -332,8 +337,8 @@ $props: (
       'static': 'static',
       'fixed': 'fixed',
       'sticky': 'sticky',
-      'rel': 'relative',
-      'abs': 'absolute',
+      'relative': 'relative',
+      'absolute': 'absolute',
     ),
   ),
   'z': (
@@ -607,11 +612,11 @@ $props: (
     alwaysVar: 1,
     overwriteBaseVar: 1,
   ),
-  'g-x': (
+  'cg': (
     prop: 'column-gap',
     bp: 1,
   ),
-  'g-y': (
+  'rg': (
     prop: 'row-gap',
     bp: 1,
   ),
@@ -635,9 +640,9 @@ $props: (
   'fxd': (
     prop: 'flex-direction',
     utilities: (
-      'col': 'column',
-      'col-r': 'column-reverse',
-      'row-r': 'row-reverse',
+      'column': 'column',
+      'column-reverse': 'column-reverse',
+      'row-reverse': 'row-reverse',
     ),
     bp: 1,
   ),
@@ -666,13 +671,6 @@ $props: (
   ),
   'gt': (
     prop: 'grid-template',
-    utilities: (
-    ),
-    exUtility: (
-      'repeat': (
-        'grid-template': 'repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)',
-      ),
-    ),
     bp: 1,
   ),
   'gta': (
@@ -697,7 +695,7 @@ $props: (
     prop: 'grid-auto-flow',
     utilities: (
       'row': 'row',
-      'col': 'column',
+      'column': 'column',
     ),
     bp: 1,
   ),
@@ -729,8 +727,8 @@ $props: (
       'center': 'center',
       'end': 'end',
       'stretch': 'stretch',
-      'flex-s': 'flex-start',
-      'flex-e': 'flex-end',
+      'flex-start': 'flex-start',
+      'flex-end': 'flex-end',
     ),
     bp: 1,
   ),
@@ -740,8 +738,8 @@ $props: (
       'start': 'start',
       'center': 'center',
       'end': 'end',
-      'flex-s': 'flex-start',
-      'flex-e': 'flex-end',
+      'flex-start': 'flex-start',
+      'flex-end': 'flex-end',
       'between': 'space-between',
     ),
     bp: 1,
@@ -753,8 +751,8 @@ $props: (
       'center': 'center',
       'end': 'end',
       'stretch': 'stretch',
-      'flex-s': 'flex-start',
-      'flex-e': 'flex-end',
+      'flex-start': 'flex-start',
+      'flex-end': 'flex-end',
     ),
     bp: 1,
   ),
@@ -764,8 +762,8 @@ $props: (
       'start': 'start',
       'center': 'center',
       'end': 'end',
-      'flex-s': 'flex-start',
-      'flex-e': 'flex-end',
+      'flex-start': 'flex-start',
+      'flex-end': 'flex-end',
       'between': 'space-between',
     ),
     bp: 1,
@@ -823,7 +821,7 @@ $props: (
   'ovwrap': (
     prop: 'overflow-wrap',
     utilities: (
-      'any': 'anywhere',
+      'anywhere': 'anywhere',
     ),
   ),
   'whspace': (

package/src/scss/_with_layer.scss

@@ -3,6 +3,9 @@
 */
 @use 'sass:meta';
 
+// レイヤー順序を明示的に宣言（詳細度: 上ほど弱い）
+@layer lism-base, lism-primitive, lism-component, lism-custom, lism-utility;
+
 @layer lism-base {
   // resetは中でも layer定義済み。 lism-base.reset となる
   @include meta.load-css('reset');
@@ -10,22 +13,26 @@
   @include meta.load-css('base');
 }
 
-@layer lism-modules {
-  @layer state {
-    @include meta.load-css('modules/state');
+@layer lism-primitive {
+  @layer trait {
+    @include meta.load-css('primitives/trait');
   }
   @layer layout {
-    @include meta.load-css('modules/layout');
+    @include meta.load-css('primitives/layout');
   }
   @layer atomic {
-    @include meta.load-css('modules/atomic');
+    @include meta.load-css('primitives/atomic');
   }
 }
 
-@layer lism-utility {
-  @include meta.load-css('utility');
+/* stylelint-disable-next-line block-no-empty -- BEM 構造を持つ UI コンポーネント（c--）用レイヤー。コアでは空、@lism-css/ui やユーザー定義クラスがここに配置される。 */
+@layer lism-component {
 }
 
-/* stylelint-disable-next-line block-no-empty -- ユーザーカスタム用レイヤー */
+/* stylelint-disable-next-line block-no-empty -- ユーザーの独自分類クラス用レイヤー */
 @layer lism-custom {
 }
+
+@layer lism-utility {
+  @include meta.load-css('utility');
+}

package/src/scss/base/_html.scss

@@ -68,12 +68,6 @@ sub {
   font-size: 80%;
 }
 
-legend,
-caption,
-figcaption {
-  font-size: var(--fz--s);
-}
-
 code,
 kbd,
 var,
@@ -86,6 +80,12 @@ blockquote {
   padding: var(--s30);
 }
 
+legend,
+caption,
+figcaption {
+  font-size: var(--fz--s);
+}
+
 hr {
   border: none;
   block-size: 0;
@@ -95,11 +95,11 @@ hr {
 /* --------------------------------------------------
   list
 -------------------------------------------------- */
-// classを持たない、もしくは Prop Classしかない(≒ Prop Class で始まる) リスト要素はブラウザ標準のスタイルを復活させる。
+// classを持たない、もしくは Property Classしかない(≒ Property Class で始まる) リスト要素はブラウザ標準のスタイルを復活させる。
 :is(ul, ol):where(:not([class])),
 :is(ul, ol):where([class^='-']) {
   list-style: revert;
-  padding-inline-start: var(--s30);
+  padding-inline-start: var(--list-px-s, var(--s30));
 }
 
 dt {

package/src/scss/base/tokens/_tokens.scss

@@ -72,12 +72,10 @@
   /** 
    * border-radius
    */
-  --bdrs--5: 2px;
   --bdrs--10: 0.25rem; // ≒ 4px
   --bdrs--20: 0.5rem; // ≒ 8px
   --bdrs--30: 1rem; // ≒ 16px
   --bdrs--40: 1.5rem; // ≒ 24px
-  // --bdrs--50: 2rem; // ≒ 32px
   --bdrs--99: 99rem;
 
   /** 
@@ -97,7 +95,7 @@
   --ar--og: 1.91/1;
 
   /** 
-   * State Module用の初期値
+   * Trait Primitive用の初期値
    */
   --gutter-size: var(--s30); // サイトコンテンツの左右につける余白
   --vertical-mode: vertical-rl; // 縦書きモード

package/src/scss/main_no_layer.scss

@@ -11,10 +11,10 @@
 // base
 @use './base/index' as base;
 
-// Modules
-@use './modules/state/index' as state;
-@use './modules/layout/index' as layout;
-@use './modules/atomic/index' as atomic;
+// Primitives
+@use './primitives/trait/index' as trait;
+@use './primitives/layout/index' as layout;
+@use './primitives/atomic/index' as atomic;
 
 // @use './component/index' as component;
 

package/src/scss/primitives/layout/_grid.scss

@@ -0,0 +1,7 @@
+.l--grid {
+  display: grid;
+
+  > * {
+    min-width: 0;
+  }
+}

package/src/scss/primitives/layout/_tileGrid.scss

@@ -0,0 +1,4 @@
+.l--tileGrid {
+  display: grid;
+  grid-template: repeat(var(--rows, 1), minmax(0, 1fr)) / repeat(var(--cols, 1), minmax(0, 1fr));
+}

package/src/scss/{modules → primitives}/layout/index.scss

@@ -1,4 +1,4 @@
-// modules
+// layout primitives
 @forward './flow';
 @forward './flex';
 @forward './cluster';
@@ -9,4 +9,5 @@
 @forward './columns';
 @forward './sideMain';
 @forward './switchCols';
+@forward './tileGrid';
 @forward './frame';

package/src/scss/{modules/state/_linkbox.scss → primitives/trait/_boxLink.scss}

@@ -1,6 +1,6 @@
 @use '../../_mixin' as mixin;
 
-.is--linkBox {
+.is--boxLink {
   position: relative;
   display: block;
   color: inherit;
@@ -11,12 +11,12 @@
 }
 
 // リンクをクリック可能にするためにz-indexあげる
-.is--linkBox a {
+.is--boxLink a {
   position: relative;
-  z-index: 2; // .u-linkExpand::before + 1
+  z-index: 2; // .is--coverLink::before + 1
 }
 
 /* これをしてしまうと z-index 関係がややこしくなる。リンク以外のz-indexはデフォのままにする。 */
-// .is--linkBox > * {
+// .is--boxLink > * {
 // 	z-index: 0;
 // }

package/src/scss/{utility/_linkExpand.scss → primitives/trait/_coverLink.scss}

@@ -1,4 +1,4 @@
-.u--expandedLink {
+.is--coverLink {
   position: static;
   text-decoration: none;
   color: inherit;

package/src/scss/primitives/trait/index.scss

@@ -0,0 +1,7 @@
+// trait
+@forward './container';
+@forward './wrapper';
+@forward './boxLink';
+@forward './coverLink'; // Note: position の関係で、boxLink より後で読み込む
+@forward './layer';
+@forward './vertical';

package/src/scss/props/index.scss

@@ -9,5 +9,5 @@
 // 自動生成
 @forward '../auto_output';
 
-// Prop Classの最後で読み込む
+// Property Classの最後で読み込む
 @forward './hover';

package/src/scss/utility/_cbox.scss

@@ -1,5 +1,5 @@
 /*
-  Note: Prop Class より優先度が下で定義すること
+  Note: Property Class より優先度が下で定義すること
   Memo: bgcの mix は transparent ではなく --base と混ぜている → 背景メディアがあるときも可読性が落ちないように + chat のように同じ背景色の装飾が一部重なっていても大丈夫なように。
 */
 .u--cbox {

package/src/scss/utility/_clipText.scss

@@ -1,5 +1,5 @@
 .u--clipText {
-  // Memo: Prop Class(s.-bg:`, `.-c:`) に負けないように important つけている
+  // Memo: Property Class(s.-bg:`, `.-c:`) に負けないように important つけている
   background-clip: text !important;
   color: transparent !important;
 }

package/src/scss/utility/index.scss

@@ -1,7 +1,6 @@
 @forward './trimHL';
 @forward './cbox';
 @forward './itemDivider';
-@forward './linkExpand';
 @forward './hidden';
 @forward './snap';
 @forward './clipText';

package/config/defaults/states.ts

@@ -1,43 +0,0 @@
-import getSvgUrl from '../helper/getSvgUrl.js';
-// import minifyHtml from '../helper/minifyHtml.js';
-
-export default {
-  isContainer: 'is--container',
-  isWrapper: {
-    className: 'is--wrapper',
-    preset: ['s', 'l'],
-    presetClass: '-contentSize',
-    customVar: '--contentSize',
-    tokenKey: 'sz',
-  },
-  isLayer: 'is--layer',
-  isLinkBox: 'is--linkBox',
-  isSide: 'is--side',
-  isSkipFlow: 'is--skipFlow',
-  isVertical: 'is--vertical',
-  setGutter: 'set--gutter',
-
-  // set class
-  setShadow: 'set--shadow',
-  setHov: 'set--hov',
-  setTransition: 'set--transition',
-  setMask: {
-    // 'set--mask',
-    className: 'set--mask',
-    setStyles: (propVal: string) => {
-      // minify化
-      // propVal = minifyHtml(propVal);
-      let imgUrl = propVal;
-      if (imgUrl.startsWith('<svg')) {
-        imgUrl = getSvgUrl(propVal, 'base64');
-      }
-      return {
-        '--maskImg': imgUrl,
-      };
-    },
-  },
-  setPlain: 'set--plain',
-  // setRevert: 'set--revert',
-  setInnerRs: 'set--innerRs',
-  setBp: 'set--bp',
-} as const;

package/config/helper/getSvgUrl.ts

@@ -1,26 +0,0 @@
-/**
- * svgをcssの image url に変換
- */
-const getSvgUrl = (svg: string, encode = '') => {
-  if (!svg) return '';
-
-  // minify化
-  // svg = minifyHtml(svg);
-
-  if ('base64' === encode) {
-    // memo: btoa() だけだとマルチバイト文字が入った時にエラーになる。
-    // encodeURIComponent() でそれを回避できるがそれだとSVGとして描画できず、 unescape() と組み合わせることで期待する動作になった。 see: https://www.softel.co.jp/blogs/tech/archives/4133
-    // svg = window.btoa(unescape(encodeURIComponent(svg)));
-
-    // memo: Buffer 使えば非推奨な関数を使わなくてもいい see: https://hackersheet.com/naopoyo/sheets/bvtrkwt
-    svg = Buffer.from(svg).toString('base64');
-    return `url(data:image/svg+xml;base64,${svg})`;
-  }
-
-  // シングルクォートをダブルクォートに変換
-  svg = svg.replace(/'/g, '"');
-  // カラーコードの先頭の # → %23 に置換
-  svg = svg.replace(/="#/g, '="%23');
-  return `url('data:image/svg+xml,${svg}')`;
-};
-export default getSvgUrl;

package/dist/components/Container/Container.d.ts

@@ -1,6 +0,0 @@
-import { LismComponentProps } from '../Lism';
-type ContainerProps = LismComponentProps & {
-    size?: LismComponentProps['isWrapper'];
-};
-export default function Container({ size, ...props }: ContainerProps): import("react").JSX.Element;
-export {};

package/dist/components/Container/index.js

@@ -1,8 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import o from "../Lism/index.js";
-function a({ size: r, ...t }) {
-  return /* @__PURE__ */ i(o, { isContainer: !0, isWrapper: r, ...t });
-}
-export {
-  a as default
-};

package/dist/components/HTML/HTML.d.ts

@@ -1,26 +0,0 @@
-import { LismComponentProps } from '../Lism';
-/** @deprecated Group を使用してください */
-export declare function div(props: LismComponentProps<'div'>): import("react").JSX.Element;
-/** @deprecated Text を使用してください */
-export declare function p(props: LismComponentProps<'p'>): import("react").JSX.Element;
-/** @deprecated Inline を使用してください */
-export declare function span(props: LismComponentProps<'span'>): import("react").JSX.Element;
-/** @deprecated Link を使用してください */
-export declare function a(props: LismComponentProps<'a'>): import("react").JSX.Element;
-type HeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
-type HeadingProps = LismComponentProps<'h1'> & {
-    lv?: HeadingLevel;
-};
-/** @deprecated Heading を使用してください */
-export declare function h({ lv, ...props }: HeadingProps): import("react").JSX.Element;
-/** @deprecated Media を使用してください */
-export declare function img(props: LismComponentProps<'img'>): import("react").JSX.Element;
-/** @deprecated List を使用してください */
-export declare function ul(props: LismComponentProps<'ul'>): import("react").JSX.Element;
-/** @deprecated List as="ol" を使用してください */
-export declare function ol(props: LismComponentProps<'ol'>): import("react").JSX.Element;
-/** @deprecated ListItem を使用してください */
-export declare function li(props: LismComponentProps<'li'>): import("react").JSX.Element;
-/** @deprecated Lism as="button" を使用してください */
-export declare function button(props: LismComponentProps<'button'>): import("react").JSX.Element;
-export {};

package/dist/components/HTML/index.d.ts

@@ -1,14 +0,0 @@
-import { div, p, span, img, a, h, ul, ol, li, button } from './HTML';
-declare const HTML: {
-    div: typeof div;
-    p: typeof p;
-    span: typeof span;
-    img: typeof img;
-    a: typeof a;
-    h: typeof h;
-    ul: typeof ul;
-    ol: typeof ol;
-    li: typeof li;
-    button: typeof button;
-};
-export default HTML;

package/dist/components/HTML/index.js

@@ -1,5 +0,0 @@
-import { button as o, li as t, ol as a, ul as i, h as l, a as p, img as m, span as n, p as r, div as s } from "./index2.js";
-const d = { div: s, p: r, span: n, img: m, a: p, h: l, ul: i, ol: a, li: t, button: o };
-export {
-  d as default
-};

package/dist/components/HTML/index2.js

@@ -1,45 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import r from "../Lism/index.js";
-function s(n) {
-  return /* @__PURE__ */ t(r, { as: "div", ...n });
-}
-function f(n) {
-  return /* @__PURE__ */ t(r, { as: "p", ...n });
-}
-function c(n) {
-  return /* @__PURE__ */ t(r, { as: "span", ...n });
-}
-function e(n) {
-  return /* @__PURE__ */ t(r, { as: "a", ...n });
-}
-function m({ lv: n = "1", ...u }) {
-  const o = `h${n}`;
-  return /* @__PURE__ */ t(r, { as: o, ...u });
-}
-function p(n) {
-  return /* @__PURE__ */ t(r, { as: "img", ...n });
-}
-function l(n) {
-  return /* @__PURE__ */ t(r, { as: "ul", ...n });
-}
-function g(n) {
-  return /* @__PURE__ */ t(r, { as: "ol", ...n });
-}
-function b(n) {
-  return /* @__PURE__ */ t(r, { as: "li", ...n });
-}
-function d(n) {
-  return /* @__PURE__ */ t(r, { as: "button", ...n });
-}
-export {
-  e as a,
-  d as button,
-  s as div,
-  m as h,
-  p as img,
-  b as li,
-  g as ol,
-  f as p,
-  c as span,
-  l as ul
-};

package/dist/components/LinkBox/LinkBox.d.ts

@@ -1,5 +0,0 @@
-import { ElementType } from 'react';
-import { LismComponentProps } from '../Lism';
-type LinkBoxProps<T extends ElementType = 'a'> = LismComponentProps<T>;
-export default function LinkBox<T extends ElementType = 'a'>({ as, children, ...props }: LinkBoxProps<T>): import("react").JSX.Element;
-export {};

package/dist/components/LinkBox/index.d.ts

@@ -1 +0,0 @@
-export { default as LinkBox } from './LinkBox';