diff --git a/libs/design/src/core/text-alignable/README.md b/libs/design/src/core/text-alignable/README.md
new file mode 100644
index 0000000000..6aaeb0d648
--- /dev/null
+++ b/libs/design/src/core/text-alignable/README.md
@@ -0,0 +1,68 @@
+# Text Alignable
+
+Text alignable enforces consistent use of text alignment across components.
+
+## Overview
+
+`DaffTextAlignableDirective` applies alignment-specific CSS classes and validates the alignment in dev mode. When an alignment is set, the corresponding `daff-[alignment]` class is added.
+
+## Supported alignments
+
+| Alignment | CSS Class |
+|---|---|
+| `left` | `.daff-left` |
+| `center` | `.daff-center` |
+| `right` | `.daff-right` |
+
+## Usage
+
+Use `daffTextAlignable` as an attribute selector:
+
+```html
+
Aligned text
+```
+
+Or as an Angular host directive:
+
+```ts
+import { DaffTextAlignableDirective } from '@daffodil/design';
+
+@Component({
+ selector: 'custom-component',
+ template: 'custom-component.html',
+ hostDirectives: [
+ {
+ directive: DaffTextAlignableDirective,
+ inputs: ['textAlignment'],
+ },
+ ],
+})
+export class CustomComponent { }
+```
+
+### Default alignment
+
+Set `defaultAlignment` to apply an alignment when `textAlignment` is not explicitly provided:
+
+```ts
+constructor(private textAlignable: DaffTextAlignableDirective) {
+ this.textAlignable.defaultAlignment = 'left';
+}
+```
+
+## Styles
+
+Use the applied CSS class to style each alignment variant:
+
+```scss
+.custom-component {
+ &.daff-center {
+ text-align: center;
+ margin: 0 auto;
+ }
+}
+```
+
+## Warnings
+
+A console warning is shown in dev mode if a value is not part of the supported alignments.
diff --git a/libs/design/src/core/text-alignable/text-alignable.directive.ts b/libs/design/src/core/text-alignable/text-alignable.directive.ts
index c98db4c3f6..b073673af4 100644
--- a/libs/design/src/core/text-alignable/text-alignable.directive.ts
+++ b/libs/design/src/core/text-alignable/text-alignable.directive.ts
@@ -24,49 +24,7 @@ const validateTextAlignment = (textAlignment: string) => {
};
/**
- * `DaffTextAlignableDirective` allows for dynamic text alignment of a component by
- * setting CSS classes based on the specified text alignment. This directive is
- * useful when text alignment needs to be managed dynamically in an Angular component.
- *
- * ## Why not just use CSS?
- *
- * While the native CSS `text-align` property can be used for static text alignment,
- * the `DaffTextAlignableDirective` provides a structured and consistent way to handle
- * dynamic text alignment within Angular components in more complex use cases where the
- * application of `text-align: center;` would cause unexpected side effects.
- *
- * @example Implementing it as an attribute directive
- *
- * ```html
- * Aligned text
- * ```
- *
- * In this example, the `daff-center` class is added to the `div` element, allowing
- * you to style the `div` as you wish using the class.
- *
- * @example Implementing it as an Angular host directive
- *
- * ```ts
- * @Component({
- * selector: 'custom-component',
- * template: 'custom-component.html',
- * hostDirectives: [
- * {
- * directive: DaffTextAlignableDirective,
- * inputs: ['textAlignment'],
- * },
- * ],
- * })
- * export class CustomComponent { }
- * ```
- *
- * ```scss
- * .custom-component {
- * &.daff-left {
- * text-align: left;
- * }
- * }
- * ```
+ * `DaffTextAlignableDirective` enforces consistent use of text alignment across components.
*/
@Directive({
selector: '[daffTextAlignable]',
@@ -84,14 +42,7 @@ export class DaffTextAlignableDirective implements DaffTextAlignable, OnChanges,
@Input() textAlignment: DaffTextAlignment;
/**
- * Sets a default alignment.
- *
- * @example
- * ```ts
- * constructor(private textAligmentDirective: DaffTextAlignableDirective) {
- * this.textAligmentDirective.defaultAlignent = 'left';
- * }
- * ```
+ * The default used when no text alignment is set.
*/
public defaultAlignment: DaffTextAlignment;
diff --git a/libs/design/src/core/text-alignable/text-alignable.ts b/libs/design/src/core/text-alignable/text-alignable.ts
index 0c318c0393..94e54ed3aa 100644
--- a/libs/design/src/core/text-alignable/text-alignable.ts
+++ b/libs/design/src/core/text-alignable/text-alignable.ts
@@ -1,14 +1,18 @@
/**
- * Interface for giving a component the ability to customize text alignment for component-specific UI.
+ * @deprecated Deprecated in version 0.92.1. Will be removed in version 1.0.0.
*/
export interface DaffTextAlignable {
textAlignment: DaffTextAlignment;
}
/**
- * The possible types that can be passed to a DaffTextAlignable component
+ * * The available text alignment options.
*/
export type DaffTextAlignment = 'left' | 'center' | 'right';
+
+/**
+ * This enum will be removed from the public api in v1.0.0.
+ */
export enum DaffTextAlignmentEnum {
Left = 'left',
Center = 'center',