@toife/vue 3.0.0 → 3.0.2

package/src/components/cable/cable.md

@@ -0,0 +1,57 @@
+# `<t-cable>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Layout region for dock-style UI; provides `placement` to descendants (e.g. `Toolbar`) via inject.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                |
+| ----- | ---------------------------------------------------- |
+| Vue   | ^3.5                                                 |
+| Other | Toolbar is often placed inside to inherit placement. |
+
+## Basic usage
+
+```vue
+<t-cable placement="bottom">
+  <t-toolbar><t-button>Home</t-button></t-toolbar>
+</t-cable>
+```
+
+## Props
+
+| Prop        | Type      | Default    | Description                             |
+| ----------- | --------- | ---------- | --------------------------------------- |
+| `keyboard`  | `boolean` | `false`    | Reserved for keyboard-related behavior. |
+| `placement` | `string`  | `"bottom"` | Cable placement (class on root).        |
+
+**Type source:** `src/components/cable/cable.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description                    |
+| --------- | ------------------------------ |
+| `default` | Content (toolbar, buttons, …). |
+
+## Provide / inject
+
+`provide(CABLE_PROVIDER_STATE_KEY)`: `{ placement }` — `Toolbar` injects it for placement classes.
+
+## Expose
+
+Nothing.
+
+## Style / class notes
+
+Classes: `layer`, `base`, `cable`, plus placement.
+
+## See also
+
+- Source: `src/components/cable`

package/src/components/cable/cable.vue

@@ -21,7 +21,7 @@ const { placement } = toRefs(props);
 /// ------------------------------------------------------------
 const cableAttrs = computed(() => {
   return {
-    class: [withPrefix(["layer", "base"]), withPrefix("cable"), placement.value],
+    class: [withPrefix(["layer", "cable"]), withPrefix("cable"), placement.value],
   };
 });
 

package/src/components/card/card/card.md

@@ -0,0 +1,57 @@
+# `<t-card>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Card surface with optional divider; provides context for `CardHeader` / `CardBody` / `CardFooter`.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | `t-app` recommended. |
+
+## Basic usage
+
+```vue
+<t-card>
+  <t-card-header>Title</t-card-header>
+  <t-card-body>Content</t-card-body>
+  <t-card-footer>Footer</t-card-footer>
+</t-card>
+```
+
+## Props
+
+| Prop      | Type      | Default | Description                         |
+| --------- | --------- | ------- | ----------------------------------- |
+| `role`    | `string`  | —       | Default from app.                   |
+| `shape`   | `string`  | —       | Default from app.                   |
+| `divider` | `boolean` | —       | Section dividers; default from app. |
+
+**Type source:** `src/components/card/card/card.type.ts`
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description       |
+| --------- | ----------------- |
+| `default` | Entire card body. |
+
+## Provide / inject
+
+`provide(CARD_PROVIDER_STATE_KEY)`: `{ role, shape, divider }` for header/footer.
+
+## Expose
+
+Nothing.
+
+## See also
+
+- Source: `src/components/card/card`
+- [card-header.md](../card-header/card-header.md), [card-body.md](../card-body/card-body.md), [card-footer.md](../card-footer/card-footer.md)

package/src/components/card/card/card.scss

@@ -3,9 +3,9 @@
 // Class name
 $card: sass.fn-naming-prefix("card");
 
-// Property name - layer: surface
-$background-color: sass.fn-naming-var("surface", "background-color");
-$color: sass.fn-naming-var("surface", "color");
+// Property name - layer: card
+$background-color: sass.fn-naming-var("card", "background-color");
+$color: sass.fn-naming-var("card", "color");
 $border-radius: sass.fn-naming-var("border-radius");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 

package/src/components/card/card/card.vue

@@ -33,7 +33,7 @@ const role = computed(() => {
 const cardAttrs = computed(() => {
   return {
     class: [
-      withPrefix(["layer", "surface"]),
+      withPrefix(["layer", "card"]),
       withPrefix(["role", role.value]),
       withPrefix(["shape", shape.value]),
       withPrefix("card"),

package/src/components/card/card-body/card-body.md

@@ -0,0 +1,34 @@
+# `<t-card-body>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Main content region of a card.
+
+## Requirements / dependencies
+
+| Item  | Notes                    |
+| ----- | ------------------------ |
+| Vue   | ^3.5                     |
+| Other | Usually inside `t-card`. |
+
+## Basic usage
+
+```vue
+<t-card-body>Main content</t-card-body>
+```
+
+## Props
+
+_None._
+
+## Slots
+
+| Slot      | Description |
+| --------- | ----------- |
+| `default` | Content.    |
+
+## See also
+
+- Source: `src/components/card/card-body`

package/src/components/card/card-body/card-body.scss

@@ -3,9 +3,9 @@
 // Class name
 $card-body: sass.fn-naming-prefix("card-body");
 
-// Property name - layer: surface (card)
-$background-color: sass.fn-naming-var("surface", "background-color");
-$color: sass.fn-naming-var("surface", "color");
+// Property name - layer: card
+$background-color: sass.fn-naming-var("card", "background-color");
+$color: sass.fn-naming-var("card", "color");
 $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
 $transition-duration: sass.fn-naming-var("motion", "duration");

package/src/components/card/card-body/card-body.vue

@@ -1,14 +1,9 @@
 <style lang="scss" src="./card-body.scss"></style>
 <template src="./card-body.html"></template>
 <script lang="ts" setup>
-import { computed } from "vue";
 import { withPrefix } from "../../../utils";
 
-/// Computed
-/// ------------------------------------------------------------
-const cardBodyAttrs = computed(() => {
-  return {
-    class: [withPrefix("card-body")],
-  };
-});
+const cardBodyAttrs = {
+  class: [withPrefix("card-body")],
+} as const;
 </script>

package/src/components/card/card-footer/card-footer.md

@@ -0,0 +1,42 @@
+# `<t-card-footer>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Card footer region; divider follows `t-card` context.
+
+## Requirements / dependencies
+
+| Item  | Notes                                         |
+| ----- | --------------------------------------------- |
+| Vue   | ^3.5                                          |
+| Other | Should be inside `t-card` for correct inject. |
+
+## Basic usage
+
+```vue
+<t-card>
+  <t-card-footer>
+    <t-button>OK</t-button>
+  </t-card-footer>
+</t-card>
+```
+
+## Props
+
+_None._
+
+## Slots
+
+| Slot      | Description     |
+| --------- | --------------- |
+| `default` | Footer content. |
+
+## Provide / inject
+
+Injects `CardProviderState` from `t-card`.
+
+## See also
+
+- Source: `src/components/card/card-footer`

package/src/components/card/card-footer/card-footer.scss

@@ -3,12 +3,12 @@
 // Class name
 $card-footer: sass.fn-naming-prefix("card-footer");
 
-// Property name - layer: surface (card)
-$background-color: sass.fn-naming-var("surface", "background-color");
-$color: sass.fn-naming-var("surface", "color");
+// Property name - layer: card
+$background-color: sass.fn-naming-var("card", "background-color");
+$color: sass.fn-naming-var("card", "color");
 $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
-$border-color: sass.fn-naming-var("surface", "border-color");
+$border-color: sass.fn-naming-var("card", "border-color");
 $border-width: sass.fn-naming-var("stroke", "width");
 $border: #{$border-width} solid transparent;
 $transition-duration: sass.fn-naming-var("motion", "duration");

package/src/components/card/card-footer/card-footer.vue

@@ -11,16 +11,13 @@ const cardProviderState = inject<CardProviderState>(CARD_PROVIDER_STATE_KEY);
 
 /// Computed
 /// ------------------------------------------------------------
-const divider = computed(() => {
-  return cardProviderState?.divider.value ?? false;
-});
-
 const cardFooterAttrs = computed(() => {
+  const divider = cardProviderState?.divider.value ?? false;
   return {
     class: [
       withPrefix("card-footer"),
       {
-        divider: divider.value,
+        divider,
       },
     ],
   };

package/src/components/card/card-header/card-header.md

@@ -0,0 +1,44 @@
+# `<t-card-header>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Card header region; divider follows context from `t-card`.
+
+## Requirements / dependencies
+
+| Item  | Notes                                                        |
+| ----- | ------------------------------------------------------------ |
+| Vue   | ^3.5                                                         |
+| Other | Must be inside `t-card` (injects `CARD_PROVIDER_STATE_KEY`). |
+
+## Basic usage
+
+```vue
+<t-card>
+  <t-card-header>Title</t-card-header>
+</t-card>
+```
+
+## Props
+
+_No own props._
+
+## Events (emits)
+
+_None._
+
+## Slots
+
+| Slot      | Description     |
+| --------- | --------------- |
+| `default` | Header content. |
+
+## Provide / inject
+
+Injects `CardProviderState` from `t-card`.
+
+## See also
+
+- Source: `src/components/card/card-header`

package/src/components/card/card-header/card-header.scss

@@ -3,12 +3,12 @@
 // Class name
 $card-header: sass.fn-naming-prefix("card-header");
 
-// Property name - layer: surface (card)
-$background-color: sass.fn-naming-var("surface", "background-color");
-$color: sass.fn-naming-var("surface", "color");
+// Property name - layer: card
+$background-color: sass.fn-naming-var("card", "background-color");
+$color: sass.fn-naming-var("card", "color");
 $padding-y: sass.fn-naming-var("spacing", "y");
 $padding-x: sass.fn-naming-var("spacing", "x");
-$border-color: sass.fn-naming-var("surface", "border-color");
+$border-color: sass.fn-naming-var("card", "border-color");
 $border-width: sass.fn-naming-var("stroke", "width");
 $border: #{$border-width} solid transparent;
 $transition-duration: sass.fn-naming-var("motion", "duration");

package/src/components/card/card-header/card-header.vue

@@ -11,16 +11,13 @@ const cardProviderState = inject<CardProviderState>(CARD_PROVIDER_STATE_KEY);
 
 /// Computed
 /// ------------------------------------------------------------
-const divider = computed(() => {
-  return cardProviderState?.divider.value ?? false;
-});
-
 const cardHeaderAttrs = computed(() => {
+  const divider = cardProviderState?.divider.value ?? false;
   return {
     class: [
       withPrefix("card-header"),
       {
-        divider: divider.value,
+        divider,
       },
     ],
   };

package/src/components/checkbox/checkbox.md

@@ -0,0 +1,60 @@
+# `<t-checkbox>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Custom boolean checkbox (not a native `<input type="checkbox">`), with `v-model` and readonly/disabled states.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | `t-app` recommended. |
+
+## Basic usage
+
+```vue
+<t-checkbox v-model="checked">I agree</t-checkbox>
+```
+
+## Props
+
+| Prop         | Type                  | Default  | Description              |
+| ------------ | --------------------- | -------- | ------------------------ |
+| `modelValue` | `boolean`             | `false`  | Value (`v-model`).       |
+| `role`       | `string`              | —        | Theme; default from app. |
+| `shape`      | `string`              | —        | Shape; default from app. |
+| `variant`    | `"fill" \| "outline"` | `"fill"` | Visual variant.          |
+| `readonly`   | `boolean`             | `false`  | Read-only.               |
+| `disabled`   | `boolean`             | `false`  | Disabled.                |
+| `shadow`     | `boolean`             | —        | Default from app.        |
+
+**Type source:** `src/components/checkbox/checkbox.type.ts`
+
+## Events (emits)
+
+| Event               | Payload   | Description                           |
+| ------------------- | --------- | ------------------------------------- |
+| `update:modelValue` | `boolean` | Updates `v-model`.                    |
+| `focus`             | —         | When focused (not disabled/readonly). |
+| `blur`              | —         | When blurred.                         |
+
+## Slots
+
+| Slot      | Description             |
+| --------- | ----------------------- |
+| `default` | Label next to the icon. |
+
+## `v-model`
+
+`modelValue` / `update:modelValue`.
+
+## Accessibility (a11y)
+
+`role="checkbox"`, `aria-checked`, `tabindex` 0 or -1; Space/Enter toggles.
+
+## See also
+
+- Source: `src/components/checkbox`

package/src/components/checkbox/checkbox.scss

@@ -7,16 +7,16 @@ $shape-rounded: sass.fn-naming-prefix("shape-rounded");
 $shape-pill: sass.fn-naming-prefix("shape-pill");
 
 // Properties - layer: item
-$background-color: sass.fn-naming-var("item", "background-color");
-$background-color-hover: sass.fn-naming-var("item", "background-color", "soft");
-$background-color-inactive: sass.fn-naming-var("item", "background-color", "soft");
-$background-color-contrast: sass.fn-naming-var("item", "background-color", "contrast");
-$background-color-disabled: sass.fn-naming-var("item", "background-color", "subtle");
+$background-color: sass.fn-naming-var("checkbox", "background-color");
+$background-color-hover: sass.fn-naming-var("checkbox", "background-color", "soft");
+$background-color-inactive: sass.fn-naming-var("checkbox", "background-color", "soft");
+$background-color-contrast: sass.fn-naming-var("checkbox", "background-color", "contrast");
+$background-color-disabled: sass.fn-naming-var("checkbox", "background-color", "subtle");
 
-$color: sass.fn-naming-var("item", "color");
+$color: sass.fn-naming-var("checkbox", "color");
 
-$border-color: sass.fn-naming-var("item", "border-color");
-$border-color-inactive: sass.fn-naming-var("item", "border-color", "subtle");
+$border-color: sass.fn-naming-var("checkbox", "border-color");
+$border-color-inactive: sass.fn-naming-var("checkbox", "border-color", "subtle");
 
 $transition-duration: sass.fn-naming-var("motion", "duration");
 $border-radius: sass.fn-naming-var("border-radius");

package/src/components/checkbox/checkbox.vue

@@ -24,45 +24,32 @@ const isFocused = ref(false);
 
 /// Computed
 /// ------------------------------------------------------------
-const role = computed(() => {
-  return props.role || appState?.role.value || "";
-});
-
-const shape = computed(() => {
-  return props.shape || appState?.shape.value || "";
-});
-
-const shadow = computed(() => {
-  return (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
-});
-
 const checkboxAttrs = computed(() => {
+  const baseRole = appState?.role.value || "";
+  const role = props.role || baseRole;
+  const shape = props.shape || appState?.shape.value || "";
+  const shadow = (props?.shadow !== undefined ? props.shadow : appState?.shadow.value) ?? false;
   return {
     class: [
-      withPrefix(["layer", "item"]),
-      withPrefix([
-        "role",
-        props.modelValue && !props.disabled ? role.value : appState?.role.value || "",
-      ]),
-      withPrefix(["shape", shape.value]),
+      withPrefix(["layer", "checkbox"]),
+      withPrefix(["role", props.modelValue && !props.disabled ? role : baseRole]),
+      withPrefix(["shape", shape]),
       withPrefix("checkbox"),
       props.variant,
       {
         on: props.modelValue,
         disabled: props.disabled,
         readonly: props.readonly,
-        shadow: shadow.value,
+        shadow,
         focus: isFocused.value,
       },
     ],
   };
 });
 
-const checkboxIconAttrs = computed(() => {
-  return {
-    class: [withPrefix("checkbox-icon")],
-  };
-});
+const checkboxIconAttrs = {
+  class: [withPrefix("checkbox-icon")],
+} as const;
 
 /// Methods
 /// ------------------------------------------------------------

package/src/components/collapse/collapse.md

@@ -0,0 +1,59 @@
+# `<t-collapse>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Expand/collapse panel with height animation; separate slots for trigger and content.
+
+## Requirements / dependencies
+
+| Item  | Notes                |
+| ----- | -------------------- |
+| Vue   | ^3.5                 |
+| Other | `t-app` recommended. |
+
+## Basic usage
+
+```vue
+<t-collapse v-model="open">
+  <template #trigger>Expand</template>
+  <p>Hidden content</p>
+</t-collapse>
+```
+
+## Props
+
+| Prop         | Type      | Default | Description                                        |
+| ------------ | --------- | ------- | -------------------------------------------------- |
+| `modelValue` | `boolean` | `false` | Open (`true`) / closed.                            |
+| `duration`   | `number`  | —       | Transition duration (ms), mapped to CSS variables. |
+| `role`       | `string`  | —       | Theme role.                                        |
+| `disabled`   | `boolean` | `false` | Disables toggling.                                 |
+
+**Type source:** `src/components/collapse/collapse.type.ts`
+
+## Events (emits)
+
+| Event               | Payload   | Description   |
+| ------------------- | --------- | ------------- |
+| `update:modelValue` | `boolean` | After toggle. |
+
+## Slots
+
+| Slot      | Description                         |
+| --------- | ----------------------------------- |
+| `trigger` | Clickable header (`role="button"`). |
+| `default` | Collapsible content.                |
+
+## `v-model`
+
+`modelValue` / `update:modelValue`.
+
+## Accessibility (a11y)
+
+Trigger: `role="button"`, `aria-expanded`, `aria-disabled`; Enter/Space toggles.
+
+## See also
+
+- Source: `src/components/collapse`

package/src/components/collapse/collapse.scss

@@ -13,8 +13,8 @@ $collapse-duration: sass.fn-naming-dvar(
   sass.fn-naming-var("motion", "duration")
 );
 
-$background-color: sass.fn-naming-var("surface", "background-color");
-$color: sass.fn-naming-var("surface", "color");
+$background-color: sass.fn-naming-var("collapse", "background-color");
+$color: sass.fn-naming-var("collapse", "color");
 $transition-duration: sass.fn-naming-var("motion", "duration");
 
 // Collapse

package/src/components/collapse/collapse.vue

@@ -36,7 +36,7 @@ const durationCss = computed(() =>
 const wrapperAttrs = computed(() => {
   return {
     class: [
-      withPrefix(["layer", "surface"]),
+      withPrefix(["layer", "collapse"]),
       withPrefix(["role", role.value]),
       withPrefix("collapse"),
       {

package/src/components/container/container.md

@@ -0,0 +1,38 @@
+# `<t-container>`
+
+> Default prefix is `t-` — change via `createToife({ prefix: "..." })`.
+
+## Description
+
+Base layout block (`layer` + `container`) wrapping page content.
+
+## Requirements / dependencies
+
+| Item  | Notes |
+| ----- | ----- |
+| Vue   | ^3.5  |
+| Other | None. |
+
+## Basic usage
+
+```vue
+<t-page>
+  <t-container>
+    <p>Content</p>
+  </t-container>
+</t-page>
+```
+
+## Props
+
+_No props._
+
+## Slots
+
+| Slot      | Description |
+| --------- | ----------- |
+| `default` | Content.    |
+
+## See also
+
+- Source: `src/components/container`

package/src/components/container/container.vue

@@ -2,13 +2,8 @@
 <template src="./container.html"></template>
 <script lang="ts" setup>
 import { withPrefix } from "../../utils";
-import { computed } from "vue";
 
-/// Computed
-/// ------------------------------------------------------------
-const containerAttrs = computed(() => {
-  return {
-    class: [withPrefix(["layer", "base"]), withPrefix("container")],
-  };
-});
+const containerAttrs = {
+  class: [withPrefix("container")],
+} as const;
 </script>