@exstyle/css 1.0.0

package/README.en.md

@@ -0,0 +1,200 @@
+[日本語](README.md) | [English](README.en.md)
+
+This text was translated from Japanese by Google Gemini.
+
+---
+
+# ExStyle CSS (@exstyle/css)
+
+ExStyle CSS is a collection of CSS files intended to be loaded via the `link` element, featuring a curated subset of ExStyle properties.
+
+## Features
+
+* **Easy Implementation**: No complex build processes required; simply load the stylesheets and start styling.
+* **Lean Architecture**: Compared to the CSS generated by ExStyle JS or ExStyle PHP, the internal structure is highly optimized and efficient.
+* **Minimalist**: You can select and use only the specific modules you truly need.
+
+## File Descriptions
+
+* **exstyle.css**: A comprehensive bundle containing all the ExStyle CSS modules listed below.
+  ```html
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle.min.css" />
+  ```
+  * **exstyle-box-margin.css**: Enables properties for box external margins.
+    ```html
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-box-margin.min.css" />
+    ```
+    * `--(d-of-dd-dt-td-th_|c_)?margin(-block(-start|-end)?|-inline(-start|-end)?)?--`
+  * **exstyle-box-padding.css**: Enables properties for box internal padding.
+    ```html
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-box-padding.min.css" />
+    ```
+    * `--(d-of-dd-dt-td-th_|c_)?padding(-block(-start|-end)?|-inline(-start|-end)?)?--`
+  * **exstyle-color.css**: Enables various properties for setting colors and backgrounds.
+    ```html
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-color.min.css" />
+    ```
+    * `--(d-of-dd-dt-td-th_|d-of-dt-th_|d-of-dd-td_|c_|c-nth-even_|c-nth-odd_)?background--`
+    * `--background-attachment--: fixed;`
+    * `--background-color--`
+    * `--(d-of-dd-dt-td-th_|c_)?border(-block(-start|-end)?|-inline(-start|-end)?)?(-style|-width|-color)?--`
+    * `--(d-of-dd-dt-td-th_|c_)?border-radius--`
+    * `--(d-of-dd-dt-td-th_|c_)?box-shadow--`
+    * `--(d-of-dd-dt-td-th_|d-of-dt-th_|d-of-dd-td_|c_|c-nth-even_|c-nth-odd_)?color--`
+  * **exstyle-layout.css**: Enables properties related to layouts, including Flexbox, Grid, and Container Queries.
+    ```html
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-layout.min.css" />
+    ```
+    * `--columns--`
+    * `--column-fill--`
+    * `--column-rule--`
+    * `--column-span--`
+    * `--container-type--`
+    * `--display--`
+    * `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_|c_)?flex--`
+    * `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?flex-flow--`
+    * `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?(row-|column-)?gap--`
+    * `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?grid--`
+    * `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_|c_)?grid-area--`
+    * `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?order--`
+    * `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?place-content--`
+    * `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?place-items--`
+    * `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?place-self--`
+    * `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?z-index--`
+  * **exstyle-lists.css**: Enables properties for list styling.
+    ```html
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-lists.min.css" />
+    ```
+    * `--list-style(-type|-image|-position)?--`
+  * **exstyle-sizing.css**: Enables properties for controlling element dimensions and overflow.
+    ```html
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-sizing.min.css" />
+    ```
+    * `--aspect-ratio--`
+    * `--block-size--`
+    * `--min-block-size--`
+    * `--max-block-size--`
+    * `--inline-size--`
+    * `--min-inline-size--`
+    * `--max-inline-size--`
+    * `--object-fit--`
+    * `--object-position--`
+    * `--overflow--`
+  * **exstyle-table.css**: Enables properties for table layouts.
+    ```html
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-table.min.css" />
+    ```
+    * `--border-collapse--`
+    * `--border-spacing--`
+    * `--caption-side--`
+    * `--empty-cells--`
+    * `--table-layout--`
+  * **exstyle-text.css**: Enables properties for typography and text decoration.
+    ```html
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-text.min.css" />
+    ```
+    * `--font(-family|-size|-style|-weight)--`
+    * `--text-align--`
+    * `--text-decoration--`
+    * `--text-emphasis--`
+    * `--text-shadow--`
+    * `--text-stroke--`
+    * `--text-wrap--`
+    * `--vertical-align--`
+    * `--white-space--`
+    * `--x-text-marker--`
+* **exstyle-effects.css**: Enables effects using user-action pseudo-classes and transitions.
+  ```html
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-effects.min.css" />
+  ```
+  * `--transition--`
+  * `--(hover_|active_|focus-visible_)background--`
+  * `--(hover_|active_|focus-visible_)border-color--`
+  * `--(hover_|active_|focus-visible_)box-shadow--`
+  * `--(hover_|active_|focus-visible_)color--`
+  * `--(hover_|active_|focus-visible_)filter--`
+  * `--(hover_|active_|focus-visible_)transform--`
+  * `--(hover_|active_|focus-visible_)z-index--`
+
+---
+
+## Usage Examples
+
+If you are using build tools, you can install the package:
+
+```bash
+npm install @exstyle/css
+```
+
+Then import it into your CSS:
+
+```css
+/* Import all modules */
+@import "@exstyle/css";
+@import "@exstyle/css/effects";
+
+/* Import specific modules */
+@import "@exstyle/css/color";
+@import "@exstyle/css/text";
+
+/* Import specific modules by filename */
+@import "@exstyle/css/dist/exstyle-color.min.css";
+@import "@exstyle/css/dist/exstyle-text.min.css";
+```
+
+For environments where you import CSS via JavaScript:
+
+```js
+/* Import all modules */
+import "@exstyle/css";
+
+/* Import specific modules */
+import "@exstyle/css/color";
+import "@exstyle/css/text";
+
+/* Import specific modules by filename */
+import "@exstyle/css/dist/exstyle-color.min.css";
+import "@exstyle/css/dist/exstyle-text.min.css";
+```
+
+The following example uses the CDN alongside [Open Props](https://open-props.style/):
+
+```html
+<!-- Load the bundled ExStyle CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle.min.css" />
+
+<!-- Or load only the necessary modules individually -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-box-padding.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-color.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-sizing.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-table.min.css" />
+
+<link rel="stylesheet" href="https://unpkg.com/open-props" />
+…
+<table style="
+    --border--: solid var(--border-size-1) var(--gray-6);
+    --border-collapse--: collapse;
+    --inline-size--: 100%;
+    --table-layout--: fixed;
+    --d-of-dd-dt-td-th_border--: var(--border--);
+    --d-of-dd-dt-td-th_padding-block--: var(--size-2);
+    --d-of-dd-dt-td-th_padding-inline--: var(--size-3);
+    --x_background--: var(--gray-1);
+    ">
+  <thead>
+    <tr> … </tr>
+  </thead>
+  <tbody style="
+      --c-nth-odd_background--: var(--gray-2);
+      --c-nth-even_background--: var(--gray-0);
+      ">
+    <tr> … </tr>
+    <tr> … </tr>
+    …
+  </tbody>
+</table>
+```
+
+---
+
+The MIT License. Copyright 2026 Nobuo Nakayama (Shimotsuki/nov-jp).

package/README.md

@@ -0,0 +1,196 @@
+[日本語](README.md) | [English](README.en.md)
+
+---
+
+# ExStyle CSS (@exstyle/css)
+
+ExStyle CSS は、link要素 で読み込む、使用する ExStyleプロパティ を限定した CSSファイル群 です。
+
+## 特徴
+
+- **導入が簡単**: 複雑なビルドプロセスを介さず、スタイルを読み込ませるだけという手軽さです。
+- **無駄がない構成**: ExStyle JS や ExStyle PHP で生成される CSSコード に比べ、構成に無駄がありません。
+- **必要最小限**: 本当に必要なものだけを選択して使うことができます。
+
+## 各種ファイルの説明
+
+- **exstyle.css**: 以下の各種 ExStyle CSS を1つにまとめたものです。
+  ```
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle.min.css" />
+  ```
+  - **exstyle-box-margin.css**: ボックス外側の余白が設定できるようになります。
+    ```
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-box-margin.min.css" />
+    ```
+    - `--(d-of-dd-dt-td-th_|c_)?margin(-block(-start|-end)?|-inline(-start|-end)?)?--`
+  - **exstyle-box-padding.css**: ボックス内側の余白が設定できるようになります。
+    ```
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-box-padding.min.css" />
+    ```
+    - `--(d-of-dd-dt-td-th_|c_)?padding(-block(-start|-end)?|-inline(-start|-end)?)?--`
+  - **exstyle-color.css**: 色を設定する各種プロパティが使用できるようになります。
+    ```
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-color.min.css" />
+    ```
+    - `--(d-of-dd-dt-td-th_|d-of-dt-th_|d-of-dd-td_|c_|c-nth-even_|c-nth-odd_)?background--`
+    - `--background-attachment--: fixed;`
+    - `--background-color--`
+    - `--(d-of-dd-dt-td-th_|c_)?border(-block(-start|-end)?|-inline(-start|-end)?)?(-style|-width|-color)?--`
+    - `--(d-of-dd-dt-td-th_|c_)?border-radius--`
+    - `--(d-of-dd-dt-td-th_|c_)?box-shadow--`
+    - `--(d-of-dd-dt-td-th_|d-of-dt-th_|d-of-dd-td_|c_|c-nth-even_|c-nth-odd_)?color--`
+  - **exstyle-layout.css**: レイアウトに関する各種プロパティが使用できるようになります。
+    ```
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-layout.min.css" />
+    ```
+    - `--columns--`
+    - `--column-fill--`
+    - `--column-rule--`
+    - `--column-span--`
+    - `--container-type--`
+    - `--display--`
+    - `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_|c_)?flex--`
+    - `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?flex-flow--`
+    - `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?(row-|column-)?gap--`
+    - `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?grid--`
+    - `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_|c_)?grid-area--`
+    - `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?order--`
+    - `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?place-content--`
+    - `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?place-items--`
+    - `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?place-self--`
+    - `--(cq-i-s_|cq-i-m_|cq-i-l_|cq-i-xl_)?z-index--`
+  - **exstyle-lists.css**: リストに関する各種プロパティが使用できるようになります。
+    ```
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-lists.min.css" />
+    ```
+    - `--list-style(-type|-image|-position)?--`
+  - **exstyle-sizing.css**: 要素のサイズに関する各種プロパティが使用できるようになります。
+    ```
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-sizing.min.css" />
+    ```
+    - `--aspect-ratio--`
+    - `--block-size--`
+    - `--min-block-size--`
+    - `--max-block-size--`
+    - `--inline-size--`
+    - `--min-inline-size--`
+    - `--max-inline-size--`
+    - `--object-fit--`
+    - `--object-position--`
+    - `--overflow--`
+  - **exstyle-table.css**: テーブルに関する各種プロパティが使用できるようになります。
+    ```
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-table.min.css" />
+    ```
+    - `--border-collapse--`
+    - `--border-spacing--`
+    - `--caption-side--`
+    - `--empty-cells--`
+    - `--table-layout--`
+  - **exstyle-text.css**: 文字の装飾に関する各種プロパティが使用できるようになります。
+    ```
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-text.min.css" />
+    ```
+    - `--font(-family|-size|-style|-weight)--`
+    - `--text-align--`
+    - `--text-decoration--`
+    - `--text-emphasis--`
+    - `--text-shadow--`
+    - `--text-stroke--`
+    - `--text-wrap--`
+    - `--vertical-align--`
+    - `--white-space--`
+    - `--x-text-marker--`
+- **exstyle-effects.css**: ユーザー操作擬似クラスとトランジションによるエフェクトが使用できるようになります。
+  ```
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-effects.min.css" />
+  ```
+  - `--transition--`
+  - `--(hover_|active_|focus-visible_)background--`
+  - `--(hover_|active_|focus-visible_)border-color--`
+  - `--(hover_|active_|focus-visible_)box-shadow--`
+  - `--(hover_|active_|focus-visible_)color--`
+  - `--(hover_|active_|focus-visible_)filter--`
+  - `--(hover_|active_|focus-visible_)transform--`
+  - `--(hover_|active_|focus-visible_)z-index--`
+
+## 使用例
+
+ビルドツールなどを使用している場合はインストールと、
+
+```Bash
+npm install @exstyle/css
+```
+
+インポートができます。
+
+```CSS
+/* 全部 */
+@import "@exstyle/css";
+@import "@exstyle/css/effects";
+
+/* 任意のモジュール */
+@import "@exstyle/css/color";
+@import "@exstyle/css/text";
+
+/* 任意のモジュールをファイル名で指定 */
+@import "@exstyle/css/dist/exstyle-color.min.css";
+@import "@exstyle/css/dist/exstyle-text.min.css";
+```
+
+JavaScript で CSS を読み込む環境では次のようにインポートします。
+
+```JS
+/* 全部 */
+import "@exstyle/css";
+
+/* 任意のモジュール */
+import "@exstyle/css/color";
+import "@exstyle/css/text";
+
+/* 任意のモジュールをファイル名で指定 */
+import "@exstyle/css/dist/exstyle-color.min.css";
+import "@exstyle/css/dist/exstyle-text.min.css";
+```
+
+次の例では、[Open Props](https://open-props.style/) と共に CDN を利用しています。
+
+```HTML
+<!-- 1つにまとめられた ExStyle CSS を読み込む場合 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle.min.css" />
+
+<!-- 必要なファイルだけ選んで読み込む場合 -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-box-padding.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-color.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-sizing.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/exstyle@main/packages/css/dist/exstyle-table.min.css" />
+
+<link rel="stylesheet" href="https://unpkg.com/open-props" />
+…
+<table style="
+    --border--: solid var(--border-size-1) var(--gray-6);
+    --border-collapse--: collapse;
+    --inline-size--: 100%;
+    --table-layout--: fixed;
+    --d-of-dd-dt-td-th_border--: var(--border--);
+    --d-of-dd-dt-td-th_padding-block--: var(--size-2);
+    --d-of-dd-dt-td-th_padding-inline--: var(--size-3);
+    --x_background--: var(--gray-1);
+    ">
+  <thead>
+    <tr> … </tr>
+  </thead>
+  <tbody style="
+      --c-nth-odd_background--: var(--gray-2);
+      --c-nth-even_background--: var(--gray-0);
+      ">
+    <tr> … </tr>
+    <tr> … </tr>
+    …
+  </tbody>
+</table>
+```
+
+---
+
+The MIT License. Copyright 2026 Nobuo Nakayama (Shimotsuki/nov-jp).

package/dist/exstyle-box-margin.css

@@ -0,0 +1,72 @@
+/*! The MIT License. Copyright 2026 Nobuo Nakayama (Shimotsuki/nov-jp). */
+/**
+ * https://www.w3.org/TR/css-box-4/
+ * https://www.w3.org/TR/css-logical-1/
+ */
+:where(:nth-child(n of :is(dd, dt, td, th))) {
+	[style*="--d-of-dd-dt-td-th_margin--:"] & {
+		margin: var(--d-of-dd-dt-td-th_margin--);
+	}
+	[style*="--d-of-dd-dt-td-th_margin-block--:"] & {
+		margin-block: var(--d-of-dd-dt-td-th_margin-block--);
+	}
+	[style*="--d-of-dd-dt-td-th_margin-block-start--:"] & {
+		margin-block-start: var(--d-of-dd-dt-td-th_margin-block-start--);
+	}
+	[style*="--d-of-dd-dt-td-th_margin-block-end--:"] & {
+		margin-block-end: var(--d-of-dd-dt-td-th_margin-block-end--);
+	}
+	[style*="--d-of-dd-dt-td-th_margin-inline--:"] & {
+		margin-inline: var(--d-of-dd-dt-td-th_margin-inline--);
+	}
+	[style*="--d-of-dd-dt-td-th_margin-inline-start--:"] & {
+		margin-inline-start: var(--d-of-dd-dt-td-th_margin-inline-start--);
+	}
+	[style*="--d-of-dd-dt-td-th_margin-inline-end--:"] & {
+		margin-inline-end: var(--d-of-dd-dt-td-th_margin-inline-end--);
+	}
+}
+* {
+	[style*="--c_margin--:"] > & {
+		margin: var(--c_margin--);
+	}
+	[style*="--c_margin-block--:"] > & {
+		margin-block: var(--c_margin-block--);
+	}
+	[style*="--c_margin-block-start--:"] > & {
+		margin-block-start: var(--c_margin-block-start--);
+	}
+	[style*="--c_margin-block-end--:"] > & {
+		margin-block-end: var(--c_margin-block-end--);
+	}
+	[style*="--c_margin-inline--:"] > & {
+		margin-inline: var(--c_margin-inline--);
+	}
+	[style*="--c_margin-inline-start--:"] > & {
+		margin-inline-start: var(--c_margin-inline-start--);
+	}
+	[style*="--c_margin-inline-end--:"] > & {
+		margin-inline-end: var(--c_margin-inline-end--);
+	}
+}
+[style*="--margin--:"] {
+	margin: var(--margin--);
+}
+[style*="--margin-block--:"] {
+	margin-block: var(--margin-block--);
+}
+[style*="--margin-block-start--:"] {
+	margin-block-start: var(--margin-block-start--);
+}
+[style*="--margin-block-end--:"] {
+	margin-block-end: var(--margin-block-end--);
+}
+[style*="--margin-inline--:"] {
+	margin-inline: var(--margin-inline--);
+}
+[style*="--margin-inline-start--:"] {
+	margin-inline-start: var(--margin-inline-start--);
+}
+[style*="--margin-inline-end--:"] {
+	margin-inline-end: var(--margin-inline-end--);
+}

package/dist/exstyle-box-margin.min.css

@@ -0,0 +1,2 @@
+/*! The MIT License. Copyright 2026 Nobuo Nakayama (Shimotsuki/nov-jp). */
+:where(:nth-child(n of :is(dd,dt,td,th))){[style*=--d-of-dd-dt-td-th_margin--\:] &{margin:var(--d-of-dd-dt-td-th_margin--)}[style*=--d-of-dd-dt-td-th_margin-block--\:] &{margin-block:var(--d-of-dd-dt-td-th_margin-block--)}[style*=--d-of-dd-dt-td-th_margin-block-start--\:] &{margin-block-start:var(--d-of-dd-dt-td-th_margin-block-start--)}[style*=--d-of-dd-dt-td-th_margin-block-end--\:] &{margin-block-end:var(--d-of-dd-dt-td-th_margin-block-end--)}[style*=--d-of-dd-dt-td-th_margin-inline--\:] &{margin-inline:var(--d-of-dd-dt-td-th_margin-inline--)}[style*=--d-of-dd-dt-td-th_margin-inline-start--\:] &{margin-inline-start:var(--d-of-dd-dt-td-th_margin-inline-start--)}[style*=--d-of-dd-dt-td-th_margin-inline-end--\:] &{margin-inline-end:var(--d-of-dd-dt-td-th_margin-inline-end--)}}*{[style*=--c_margin--\:]>&{margin:var(--c_margin--)}[style*=--c_margin-block--\:]>&{margin-block:var(--c_margin-block--)}[style*=--c_margin-block-start--\:]>&{margin-block-start:var(--c_margin-block-start--)}[style*=--c_margin-block-end--\:]>&{margin-block-end:var(--c_margin-block-end--)}[style*=--c_margin-inline--\:]>&{margin-inline:var(--c_margin-inline--)}[style*=--c_margin-inline-start--\:]>&{margin-inline-start:var(--c_margin-inline-start--)}[style*=--c_margin-inline-end--\:]>&{margin-inline-end:var(--c_margin-inline-end--)}}[style*=--margin--\:]{margin:var(--margin--)}[style*=--margin-block--\:]{margin-block:var(--margin-block--)}[style*=--margin-block-start--\:]{margin-block-start:var(--margin-block-start--)}[style*=--margin-block-end--\:]{margin-block-end:var(--margin-block-end--)}[style*=--margin-inline--\:]{margin-inline:var(--margin-inline--)}[style*=--margin-inline-start--\:]{margin-inline-start:var(--margin-inline-start--)}[style*=--margin-inline-end--\:]{margin-inline-end:var(--margin-inline-end--)}

package/dist/exstyle-box-padding.css

@@ -0,0 +1,72 @@
+/*! The MIT License. Copyright 2026 Nobuo Nakayama (Shimotsuki/nov-jp). */
+/**
+ * https://www.w3.org/TR/css-box-4/
+ * https://www.w3.org/TR/css-logical-1/
+ */
+:where(:nth-child(n of :is(dd, dt, td, th))) {
+	[style*="--d-of-dd-dt-td-th_padding--:"] & {
+		padding: var(--d-of-dd-dt-td-th_padding--);
+	}
+	[style*="--d-of-dd-dt-td-th_padding-block--:"] & {
+		padding-block: var(--d-of-dd-dt-td-th_padding-block--);
+	}
+	[style*="--d-of-dd-dt-td-th_padding-block-start--:"] & {
+		padding-block-start: var(--d-of-dd-dt-td-th_padding-block-start--);
+	}
+	[style*="--d-of-dd-dt-td-th_padding-block-end--:"] & {
+		padding-block-end: var(--d-of-dd-dt-td-th_padding-block-end--);
+	}
+	[style*="--d-of-dd-dt-td-th_padding-inline--:"] & {
+		padding-inline: var(--d-of-dd-dt-td-th_padding-inline--);
+	}
+	[style*="--d-of-dd-dt-td-th_padding-inline-start--:"] & {
+		padding-inline-start: var(--d-of-dd-dt-td-th_padding-inline-start--);
+	}
+	[style*="--d-of-dd-dt-td-th_padding-inline-end--:"] & {
+		padding-inline-end: var(--d-of-dd-dt-td-th_padding-inline-end--);
+	}
+}
+* {
+	[style*="--c_padding--:"] > & {
+		padding: var(--c_padding--);
+	}
+	[style*="--c_padding-block--:"] > & {
+		padding-block: var(--c_padding-block--);
+	}
+	[style*="--c_padding-block-start--:"] > & {
+		padding-block-start: var(--c_padding-block-start--);
+	}
+	[style*="--c_padding-block-end--:"] > & {
+		padding-block-end: var(--c_padding-block-end--);
+	}
+	[style*="--c_padding-inline--:"] > & {
+		padding-inline: var(--c_padding-inline--);
+	}
+	[style*="--c_padding-inline-start--:"] > & {
+		padding-inline-start: var(--c_padding-inline-start--);
+	}
+	[style*="--c_padding-inline-end--:"] > & {
+		padding-inline-end: var(--c_padding-inline-end--);
+	}
+}
+[style*="--padding--:"] {
+	padding: var(--padding--);
+}
+[style*="--padding-block--:"] {
+	padding-block: var(--padding-block--);
+}
+[style*="--padding-block-start--:"] {
+	padding-block-start: var(--padding-block-start--);
+}
+[style*="--padding-block-end--:"] {
+	padding-block-end: var(--padding-block-end--);
+}
+[style*="--padding-inline--:"] {
+	padding-inline: var(--padding-inline--);
+}
+[style*="--padding-inline-start--:"] {
+	padding-inline-start: var(--padding-inline-start--);
+}
+[style*="--padding-inline-end--:"] {
+	padding-inline-end: var(--padding-inline-end--);
+}

package/dist/exstyle-box-padding.min.css

@@ -0,0 +1,2 @@
+/*! The MIT License. Copyright 2026 Nobuo Nakayama (Shimotsuki/nov-jp). */
+:where(:nth-child(n of :is(dd,dt,td,th))){[style*=--d-of-dd-dt-td-th_padding--\:] &{padding:var(--d-of-dd-dt-td-th_padding--)}[style*=--d-of-dd-dt-td-th_padding-block--\:] &{padding-block:var(--d-of-dd-dt-td-th_padding-block--)}[style*=--d-of-dd-dt-td-th_padding-block-start--\:] &{padding-block-start:var(--d-of-dd-dt-td-th_padding-block-start--)}[style*=--d-of-dd-dt-td-th_padding-block-end--\:] &{padding-block-end:var(--d-of-dd-dt-td-th_padding-block-end--)}[style*=--d-of-dd-dt-td-th_padding-inline--\:] &{padding-inline:var(--d-of-dd-dt-td-th_padding-inline--)}[style*=--d-of-dd-dt-td-th_padding-inline-start--\:] &{padding-inline-start:var(--d-of-dd-dt-td-th_padding-inline-start--)}[style*=--d-of-dd-dt-td-th_padding-inline-end--\:] &{padding-inline-end:var(--d-of-dd-dt-td-th_padding-inline-end--)}}*{[style*=--c_padding--\:]>&{padding:var(--c_padding--)}[style*=--c_padding-block--\:]>&{padding-block:var(--c_padding-block--)}[style*=--c_padding-block-start--\:]>&{padding-block-start:var(--c_padding-block-start--)}[style*=--c_padding-block-end--\:]>&{padding-block-end:var(--c_padding-block-end--)}[style*=--c_padding-inline--\:]>&{padding-inline:var(--c_padding-inline--)}[style*=--c_padding-inline-start--\:]>&{padding-inline-start:var(--c_padding-inline-start--)}[style*=--c_padding-inline-end--\:]>&{padding-inline-end:var(--c_padding-inline-end--)}}[style*=--padding--\:]{padding:var(--padding--)}[style*=--padding-block--\:]{padding-block:var(--padding-block--)}[style*=--padding-block-start--\:]{padding-block-start:var(--padding-block-start--)}[style*=--padding-block-end--\:]{padding-block-end:var(--padding-block-end--)}[style*=--padding-inline--\:]{padding-inline:var(--padding-inline--)}[style*=--padding-inline-start--\:]{padding-inline-start:var(--padding-inline-start--)}[style*=--padding-inline-end--\:]{padding-inline-end:var(--padding-inline-end--)}