@fringeworks/style-layouts 0.8.0 → 0.8.1

package/README.ja.md

@@ -33,12 +33,12 @@ const { className, style } = stack({
   gap: 16,
 });
 
-// className: "lx-layout-stack lx-layout-direction-x ..."
-// style: { "--lx-layout-gapX": "16px", ... }
+// className: "frg-layout-stack frg-layout-direction-x ..."
+// style: { "--frg-layout-gapX": "16px", ... }
 ```
 
 ```html
-<div class="lx-layout-stack ..." style="--lx-layout-gapX: 16px; ...">
+<div class="frg-layout-stack ..." style="--frg-layout-gapX: 16px; ...">
   <div>Item 1</div>
   <div>Item 2</div>
 </div>

package/README.md

@@ -33,12 +33,12 @@ const { className, style } = stack({
   gap: 16,
 });
 
-// className: "lx-layout-stack lx-layout-direction-x ..."
-// style: { "--lx-layout-gapX": "16px", ... }
+// className: "frg-layout-stack frg-layout-direction-x ..."
+// style: { "--frg-layout-gapX": "16px", ... }
 ```
 
 ```html
-<div class="lx-layout-stack ..." style="--lx-layout-gapX: 16px; ...">
+<div class="frg-layout-stack ..." style="--frg-layout-gapX: 16px; ...">
   <div>Item 1</div>
   <div>Item 2</div>
 </div>

package/_constants.cjs

@@ -4,208 +4,208 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 /**
 * レイアウト種別: stack
 */
-const clsLayoutStack = "lx-layout-stack";
+const clsLayoutStack = "frg-layout-stack";
 /**
 * レイアウト種別: flow
 */
-const clsLayoutFlow = "lx-layout-flow";
+const clsLayoutFlow = "frg-layout-flow";
 /**
 * レイアウト種別: tile
 */
-const clsLayoutTile = "lx-layout-tile";
+const clsLayoutTile = "frg-layout-tile";
 /**
 * レイアウト種別: matrix
 */
-const clsLayoutMatrix = "lx-layout-matrix";
+const clsLayoutMatrix = "frg-layout-matrix";
 /**
 * レイアウト種別: center
 */
-const clsLayoutCenter = "lx-layout-center";
+const clsLayoutCenter = "frg-layout-center";
 /**
 * レイアウト種別: pack
 */
-const clsLayoutPack = "lx-layout-pack";
+const clsLayoutPack = "frg-layout-pack";
 /**
 * レイアウト種別: balance
 */
-const clsLayoutBalance = "lx-layout-balance";
+const clsLayoutBalance = "frg-layout-balance";
 /**
 * レイアウト種別: layer
 */
-const clsLayoutLayer = "lx-layout-layer";
+const clsLayoutLayer = "frg-layout-layer";
 /**
 * レイアウト種別: pin
 */
-const clsLayoutPin = "lx-layout-pin";
+const clsLayoutPin = "frg-layout-pin";
 /**
 * 整列: 横方向
 */
-const clsLayoutDirectionX = "lx-layout-direction-x";
+const clsLayoutDirectionX = "frg-layout-direction-x";
 /**
 * 整列: 縦方向
 */
-const clsLayoutDirectionY = "lx-layout-direction-y";
+const clsLayoutDirectionY = "frg-layout-direction-y";
 /**
 * 横位置: 左
 */
-const clsLayoutAlignXLeft = "lx-layout-alignX-left";
+const clsLayoutAlignXLeft = "frg-layout-alignX-left";
 /**
 * 横位置: 中央
 */
-const clsLayoutAlignXCenter = "lx-layout-alignX-center";
+const clsLayoutAlignXCenter = "frg-layout-alignX-center";
 /**
 * 横位置: 右
 */
-const clsLayoutAlignXRight = "lx-layout-alignX-right";
+const clsLayoutAlignXRight = "frg-layout-alignX-right";
 /**
 * 横位置: 両端揃え
 */
-const clsLayoutAlignXSpaceBetween = "lx-layout-alignX-spaceBetween";
+const clsLayoutAlignXSpaceBetween = "frg-layout-alignX-spaceBetween";
 /**
 * 横位置: 両端余白あり均等
 */
-const clsLayoutAlignXSpaceAround = "lx-layout-alignX-spaceAround";
+const clsLayoutAlignXSpaceAround = "frg-layout-alignX-spaceAround";
 /**
 * 横位置: 完全均等
 */
-const clsLayoutAlignXSpaceEvenly = "lx-layout-alignX-spaceEvenly";
+const clsLayoutAlignXSpaceEvenly = "frg-layout-alignX-spaceEvenly";
 /**
 * 縦位置: 上
 */
-const clsLayoutAlignYTop = "lx-layout-alignY-top";
+const clsLayoutAlignYTop = "frg-layout-alignY-top";
 /**
 * 縦位置: 中央
 */
-const clsLayoutAlignYMiddle = "lx-layout-alignY-middle";
+const clsLayoutAlignYMiddle = "frg-layout-alignY-middle";
 /**
 * 縦位置: 下
 */
-const clsLayoutAlignYBottom = "lx-layout-alignY-bottom";
+const clsLayoutAlignYBottom = "frg-layout-alignY-bottom";
 /**
 * 縦位置: 両端揃え
 */
-const clsLayoutAlignYSpaceBetween = "lx-layout-alignY-spaceBetween";
+const clsLayoutAlignYSpaceBetween = "frg-layout-alignY-spaceBetween";
 /**
 * 縦位置: 両端余白あり均等
 */
-const clsLayoutAlignYSpaceAround = "lx-layout-alignY-spaceAround";
+const clsLayoutAlignYSpaceAround = "frg-layout-alignY-spaceAround";
 /**
 * 縦位置: 完全均等
 */
-const clsLayoutAlignYSpaceEvenly = "lx-layout-alignY-spaceEvenly";
+const clsLayoutAlignYSpaceEvenly = "frg-layout-alignY-spaceEvenly";
 /**
 * 子要素の幅調整: なし
 */
-const clsLayoutAdjustXNone = "lx-layout-adjustX-none";
+const clsLayoutAdjustXNone = "frg-layout-adjustX-none";
 /**
 * 子要素の幅調整: 伸ばす & 縮める
 */
-const clsLayoutAdjustXFit = "lx-layout-adjustX-fit";
+const clsLayoutAdjustXFit = "frg-layout-adjustX-fit";
 /**
 * 子要素の幅調整: 伸ばす
 */
-const clsLayoutAdjustXExpand = "lx-layout-adjustX-grow";
+const clsLayoutAdjustXExpand = "frg-layout-adjustX-grow";
 /**
 * 子要素の幅調整: 縮める
 */
-const clsLayoutAdjustXShrink = "lx-layout-adjustX-shrink";
+const clsLayoutAdjustXShrink = "frg-layout-adjustX-shrink";
 /**
 * 子要素の高さ調整: なし
 */
-const clsLayoutAdjustYNone = "lx-layout-adjustY-none";
+const clsLayoutAdjustYNone = "frg-layout-adjustY-none";
 /**
 * 子要素の高さ調整: 伸ばす & 縮める
 */
-const clsLayoutAdjustYFit = "lx-layout-adjustY-fit";
+const clsLayoutAdjustYFit = "frg-layout-adjustY-fit";
 /**
 * 子要素の高さ調整: 伸ばす
 */
-const clsLayoutAdjustYExpand = "lx-layout-adjustY-grow";
+const clsLayoutAdjustYExpand = "frg-layout-adjustY-grow";
 /**
 * 子要素の高さ調整: 縮める
 */
-const clsLayoutAdjustYShrink = "lx-layout-adjustY-shrink";
+const clsLayoutAdjustYShrink = "frg-layout-adjustY-shrink";
 /**
 * 間隔: 横方向
 */
-const clsLayoutGapX = "lx-layout-gapX";
+const clsLayoutGapX = "frg-layout-gapX";
 /**
 * 間隔: 縦方向
 */
-const clsLayoutGapY = "lx-layout-gapY";
+const clsLayoutGapY = "frg-layout-gapY";
 /**
 * 子要素の幅
 */
-const clsLayoutItemSizeX = "lx-layout-itemSizeX";
+const clsLayoutItemSizeX = "frg-layout-itemSizeX";
 /**
 * 子要素の高さ
 */
-const clsLayoutItemSizeY = "lx-layout-itemSizeY";
+const clsLayoutItemSizeY = "frg-layout-itemSizeY";
 /**
 * 子要素の縦横比
 */
-const clsLayoutItemRatio = "lx-layout-itemRatio";
+const clsLayoutItemRatio = "frg-layout-itemRatio";
 /**
 * 子要素の横方向の数
 */
-const clsLayoutItemCountX = "lx-layout-itemCountX";
+const clsLayoutItemCountX = "frg-layout-itemCountX";
 /**
 * 子要素の縦方向の数
 */
-const clsLayoutItemCountY = "lx-layout-itemCountY";
+const clsLayoutItemCountY = "frg-layout-itemCountY";
 /**
 * 横方向のテンプレート
 */
-const clsLayoutTemplateX = "lx-layout-templateX";
+const clsLayoutTemplateX = "frg-layout-templateX";
 /**
 * 縦方向のテンプレート
 */
-const clsLayoutTemplateY = "lx-layout-templateY";
+const clsLayoutTemplateY = "frg-layout-templateY";
 /**
 * 変数\
 * 間隔: 横方向
 */
-const varLayoutGapX = "--lx-layout-gapX";
+const varLayoutGapX = "--frg-layout-gapX";
 /**
 * 変数\
 * 間隔: 縦方向
 */
-const varLayoutGapY = "--lx-layout-gapY";
+const varLayoutGapY = "--frg-layout-gapY";
 /**
 * 変数\
 * 子要素の幅
 */
-const varLayoutItemSizeX = "--lx-layout-itemSizeX";
+const varLayoutItemSizeX = "--frg-layout-itemSizeX";
 /**
 * 変数\
 * 子要素の高さ
 */
-const varLayoutItemSizeY = "--lx-layout-itemSizeY";
+const varLayoutItemSizeY = "--frg-layout-itemSizeY";
 /**
 * 変数\
 * 子要素の縦横比
 */
-const varLayoutItemRatio = "--lx-layout-itemRatio";
+const varLayoutItemRatio = "--frg-layout-itemRatio";
 /**
 * 変数\
 * 子要素の横方向の数
 */
-const varLayoutItemCountX = "--lx-layout-itemCountX";
+const varLayoutItemCountX = "--frg-layout-itemCountX";
 /**
 * 変数\
 * 子要素の縦方向の数
 */
-const varLayoutItemCountY = "--lx-layout-itemCountY";
+const varLayoutItemCountY = "--frg-layout-itemCountY";
 /**
 * 変数\
 * 横方向のテンプレート
 */
-const varLayoutTemplateX = "--lx-layout-templateX";
+const varLayoutTemplateX = "--frg-layout-templateX";
 /**
 * 変数\
 * 縦方向のテンプレート
 */
-const varLayoutTemplateY = "--lx-layout-templateY";
+const varLayoutTemplateY = "--frg-layout-templateY";
 /**
 * axis毎のクラス
 */

package/_constants.d.cts

@@ -4,208 +4,208 @@ import { Adjust, AlignX, AlignY, Direction } from "./constants.cjs";
 /**
  * レイアウト種別: stack
  */
-declare const clsLayoutStack = "lx-layout-stack";
+declare const clsLayoutStack = "frg-layout-stack";
 /**
  * レイアウト種別: flow
  */
-declare const clsLayoutFlow = "lx-layout-flow";
+declare const clsLayoutFlow = "frg-layout-flow";
 /**
  * レイアウト種別: tile
  */
-declare const clsLayoutTile = "lx-layout-tile";
+declare const clsLayoutTile = "frg-layout-tile";
 /**
  * レイアウト種別: matrix
  */
-declare const clsLayoutMatrix = "lx-layout-matrix";
+declare const clsLayoutMatrix = "frg-layout-matrix";
 /**
  * レイアウト種別: center
  */
-declare const clsLayoutCenter = "lx-layout-center";
+declare const clsLayoutCenter = "frg-layout-center";
 /**
  * レイアウト種別: pack
  */
-declare const clsLayoutPack = "lx-layout-pack";
+declare const clsLayoutPack = "frg-layout-pack";
 /**
  * レイアウト種別: balance
  */
-declare const clsLayoutBalance = "lx-layout-balance";
+declare const clsLayoutBalance = "frg-layout-balance";
 /**
  * レイアウト種別: layer
  */
-declare const clsLayoutLayer = "lx-layout-layer";
+declare const clsLayoutLayer = "frg-layout-layer";
 /**
  * レイアウト種別: pin
  */
-declare const clsLayoutPin = "lx-layout-pin";
+declare const clsLayoutPin = "frg-layout-pin";
 /**
  * 整列: 横方向
  */
-declare const clsLayoutDirectionX = "lx-layout-direction-x";
+declare const clsLayoutDirectionX = "frg-layout-direction-x";
 /**
  * 整列: 縦方向
  */
-declare const clsLayoutDirectionY = "lx-layout-direction-y";
+declare const clsLayoutDirectionY = "frg-layout-direction-y";
 /**
  * 横位置: 左
  */
-declare const clsLayoutAlignXLeft = "lx-layout-alignX-left";
+declare const clsLayoutAlignXLeft = "frg-layout-alignX-left";
 /**
  * 横位置: 中央
  */
-declare const clsLayoutAlignXCenter = "lx-layout-alignX-center";
+declare const clsLayoutAlignXCenter = "frg-layout-alignX-center";
 /**
  * 横位置: 右
  */
-declare const clsLayoutAlignXRight = "lx-layout-alignX-right";
+declare const clsLayoutAlignXRight = "frg-layout-alignX-right";
 /**
  * 横位置: 両端揃え
  */
-declare const clsLayoutAlignXSpaceBetween = "lx-layout-alignX-spaceBetween";
+declare const clsLayoutAlignXSpaceBetween = "frg-layout-alignX-spaceBetween";
 /**
  * 横位置: 両端余白あり均等
  */
-declare const clsLayoutAlignXSpaceAround = "lx-layout-alignX-spaceAround";
+declare const clsLayoutAlignXSpaceAround = "frg-layout-alignX-spaceAround";
 /**
  * 横位置: 完全均等
  */
-declare const clsLayoutAlignXSpaceEvenly = "lx-layout-alignX-spaceEvenly";
+declare const clsLayoutAlignXSpaceEvenly = "frg-layout-alignX-spaceEvenly";
 /**
  * 縦位置: 上
  */
-declare const clsLayoutAlignYTop = "lx-layout-alignY-top";
+declare const clsLayoutAlignYTop = "frg-layout-alignY-top";
 /**
  * 縦位置: 中央
  */
-declare const clsLayoutAlignYMiddle = "lx-layout-alignY-middle";
+declare const clsLayoutAlignYMiddle = "frg-layout-alignY-middle";
 /**
  * 縦位置: 下
  */
-declare const clsLayoutAlignYBottom = "lx-layout-alignY-bottom";
+declare const clsLayoutAlignYBottom = "frg-layout-alignY-bottom";
 /**
  * 縦位置: 両端揃え
  */
-declare const clsLayoutAlignYSpaceBetween = "lx-layout-alignY-spaceBetween";
+declare const clsLayoutAlignYSpaceBetween = "frg-layout-alignY-spaceBetween";
 /**
  * 縦位置: 両端余白あり均等
  */
-declare const clsLayoutAlignYSpaceAround = "lx-layout-alignY-spaceAround";
+declare const clsLayoutAlignYSpaceAround = "frg-layout-alignY-spaceAround";
 /**
  * 縦位置: 完全均等
  */
-declare const clsLayoutAlignYSpaceEvenly = "lx-layout-alignY-spaceEvenly";
+declare const clsLayoutAlignYSpaceEvenly = "frg-layout-alignY-spaceEvenly";
 /**
  * 子要素の幅調整: なし
  */
-declare const clsLayoutAdjustXNone = "lx-layout-adjustX-none";
+declare const clsLayoutAdjustXNone = "frg-layout-adjustX-none";
 /**
  * 子要素の幅調整: 伸ばす & 縮める
  */
-declare const clsLayoutAdjustXFit = "lx-layout-adjustX-fit";
+declare const clsLayoutAdjustXFit = "frg-layout-adjustX-fit";
 /**
  * 子要素の幅調整: 伸ばす
  */
-declare const clsLayoutAdjustXExpand = "lx-layout-adjustX-grow";
+declare const clsLayoutAdjustXExpand = "frg-layout-adjustX-grow";
 /**
  * 子要素の幅調整: 縮める
  */
-declare const clsLayoutAdjustXShrink = "lx-layout-adjustX-shrink";
+declare const clsLayoutAdjustXShrink = "frg-layout-adjustX-shrink";
 /**
  * 子要素の高さ調整: なし
  */
-declare const clsLayoutAdjustYNone = "lx-layout-adjustY-none";
+declare const clsLayoutAdjustYNone = "frg-layout-adjustY-none";
 /**
  * 子要素の高さ調整: 伸ばす & 縮める
  */
-declare const clsLayoutAdjustYFit = "lx-layout-adjustY-fit";
+declare const clsLayoutAdjustYFit = "frg-layout-adjustY-fit";
 /**
  * 子要素の高さ調整: 伸ばす
  */
-declare const clsLayoutAdjustYExpand = "lx-layout-adjustY-grow";
+declare const clsLayoutAdjustYExpand = "frg-layout-adjustY-grow";
 /**
  * 子要素の高さ調整: 縮める
  */
-declare const clsLayoutAdjustYShrink = "lx-layout-adjustY-shrink";
+declare const clsLayoutAdjustYShrink = "frg-layout-adjustY-shrink";
 /**
  * 間隔: 横方向
  */
-declare const clsLayoutGapX = "lx-layout-gapX";
+declare const clsLayoutGapX = "frg-layout-gapX";
 /**
  * 間隔: 縦方向
  */
-declare const clsLayoutGapY = "lx-layout-gapY";
+declare const clsLayoutGapY = "frg-layout-gapY";
 /**
  * 子要素の幅
  */
-declare const clsLayoutItemSizeX = "lx-layout-itemSizeX";
+declare const clsLayoutItemSizeX = "frg-layout-itemSizeX";
 /**
  * 子要素の高さ
  */
-declare const clsLayoutItemSizeY = "lx-layout-itemSizeY";
+declare const clsLayoutItemSizeY = "frg-layout-itemSizeY";
 /**
  * 子要素の縦横比
  */
-declare const clsLayoutItemRatio = "lx-layout-itemRatio";
+declare const clsLayoutItemRatio = "frg-layout-itemRatio";
 /**
  * 子要素の横方向の数
  */
-declare const clsLayoutItemCountX = "lx-layout-itemCountX";
+declare const clsLayoutItemCountX = "frg-layout-itemCountX";
 /**
  * 子要素の縦方向の数
  */
-declare const clsLayoutItemCountY = "lx-layout-itemCountY";
+declare const clsLayoutItemCountY = "frg-layout-itemCountY";
 /**
  * 横方向のテンプレート
  */
-declare const clsLayoutTemplateX = "lx-layout-templateX";
+declare const clsLayoutTemplateX = "frg-layout-templateX";
 /**
  * 縦方向のテンプレート
  */
-declare const clsLayoutTemplateY = "lx-layout-templateY";
+declare const clsLayoutTemplateY = "frg-layout-templateY";
 /**
  * 変数\
  * 間隔: 横方向
  */
-declare const varLayoutGapX = "--lx-layout-gapX";
+declare const varLayoutGapX = "--frg-layout-gapX";
 /**
  * 変数\
  * 間隔: 縦方向
  */
-declare const varLayoutGapY = "--lx-layout-gapY";
+declare const varLayoutGapY = "--frg-layout-gapY";
 /**
  * 変数\
  * 子要素の幅
  */
-declare const varLayoutItemSizeX = "--lx-layout-itemSizeX";
+declare const varLayoutItemSizeX = "--frg-layout-itemSizeX";
 /**
  * 変数\
  * 子要素の高さ
  */
-declare const varLayoutItemSizeY = "--lx-layout-itemSizeY";
+declare const varLayoutItemSizeY = "--frg-layout-itemSizeY";
 /**
  * 変数\
  * 子要素の縦横比
  */
-declare const varLayoutItemRatio = "--lx-layout-itemRatio";
+declare const varLayoutItemRatio = "--frg-layout-itemRatio";
 /**
  * 変数\
  * 子要素の横方向の数
  */
-declare const varLayoutItemCountX = "--lx-layout-itemCountX";
+declare const varLayoutItemCountX = "--frg-layout-itemCountX";
 /**
  * 変数\
  * 子要素の縦方向の数
  */
-declare const varLayoutItemCountY = "--lx-layout-itemCountY";
+declare const varLayoutItemCountY = "--frg-layout-itemCountY";
 /**
  * 変数\
  * 横方向のテンプレート
  */
-declare const varLayoutTemplateX = "--lx-layout-templateX";
+declare const varLayoutTemplateX = "--frg-layout-templateX";
 /**
  * 変数\
  * 縦方向のテンプレート
  */
-declare const varLayoutTemplateY = "--lx-layout-templateY";
+declare const varLayoutTemplateY = "--frg-layout-templateY";
 /**
  * axis毎のクラス
  */
@@ -221,16 +221,16 @@ declare const clsLayout: {
  */
 declare const varLayout: {
   readonly itemSize: {
-    readonly x: "--lx-layout-itemSizeX";
-    readonly y: "--lx-layout-itemSizeY";
+    readonly x: "--frg-layout-itemSizeX";
+    readonly y: "--frg-layout-itemSizeY";
   };
   readonly template: {
-    readonly x: "--lx-layout-templateX";
-    readonly y: "--lx-layout-templateY";
+    readonly x: "--frg-layout-templateX";
+    readonly y: "--frg-layout-templateY";
   };
   readonly gap: {
-    readonly x: "--lx-layout-gapX";
-    readonly y: "--lx-layout-gapY";
+    readonly x: "--frg-layout-gapX";
+    readonly y: "--frg-layout-gapY";
   };
 };
 //#endregion