button: allow text align config

Author: SharonStrats

src/v2/components/actions/button/Button.ts

@@ -15,6 +15,7 @@ export class Button extends LitElement {
     fullWidth: { type: Boolean, attribute: 'full-width', reflect: true },
     icon: { type: String, reflect: true },
     iconPosition: { type: String, attribute: 'icon-position', reflect: true },
+    contentAlign: { type: String, attribute: 'content-align', reflect: true },
     handleClick: { attribute: false },
     _hasSlottedIcon: { state: true }
   }
@@ -55,6 +56,8 @@ export class Button extends LitElement {
       --button-font-weight: var(--font-weight-bold, 600);
       --button-line-height: 1;
       --button-justify-content: center;
+      --button-content-justify-content: var(--button-justify-content);
+      --button-label-text-align: center;
       --button-box-shadow: none;
       --button-hover-box-shadow: var(--button-box-shadow);
       --button-active-box-shadow: var(--button-hover-box-shadow);
@@ -93,6 +96,18 @@ export class Button extends LitElement {
       width: 100%;
     }
 
+    :host([content-align='start']) {
+      --button-justify-content: flex-start;
+      --button-content-justify-content: flex-start;
+      --button-label-text-align: left;
+    }
+
+    :host([content-align='end']) {
+      --button-justify-content: flex-end;
+      --button-content-justify-content: flex-end;
+      --button-label-text-align: right;
+    }
+
     :host([selected]) {
       --button-background: var(--button-selected-background);
       --button-text: var(--button-selected-text);
@@ -160,7 +175,7 @@ export class Button extends LitElement {
     .button__content {
       display: inline-flex;
       align-items: center;
-      justify-content: center;
+      justify-content: var(--button-content-justify-content);
       gap: inherit;
       width: 100%;
     }
@@ -204,7 +219,10 @@ export class Button extends LitElement {
     .button__label {
       display: inline-flex;
       align-items: center;
+      justify-content: var(--button-content-justify-content);
       min-width: 0;
+      width: 100%;
+      text-align: var(--button-label-text-align);
     }
 
     :host([variant='icon']) .button__label {
@@ -230,6 +248,7 @@ export class Button extends LitElement {
   declare fullWidth: boolean
   declare icon: string
   declare iconPosition: 'start' | 'end'
+  declare contentAlign: 'start' | 'center' | 'end'
   declare handleClick?: (event: MouseEvent) => void
   declare _hasSlottedIcon: boolean
   private _iconSlotObserver?: MutationObserver
@@ -249,6 +268,7 @@ export class Button extends LitElement {
     this.fullWidth = false
     this.icon = ''
     this.iconPosition = 'start'
+    this.contentAlign = 'center'
     this.handleClick = undefined
     this._hasSlottedIcon = false
   }

src/v2/components/actions/button/README.md

@@ -20,6 +20,7 @@ The legacy flat import path `solid-ui/components/button` still works, but the gr
 <solid-ui-button label="Upload"></solid-ui-button>
 <solid-ui-button variant="primary" label="Save"></solid-ui-button>
 <solid-ui-button icon="data:image/svg+xml,..." label="Camera"></solid-ui-button>
+<solid-ui-button content-align="start" full-width label="Address Book"></solid-ui-button>
 ```
 
 ```html
@@ -49,6 +50,7 @@ The legacy flat import path `solid-ui/components/button` still works, but the gr
 | `fullWidth`    | `full-width`    | `boolean`                            | `false`       | Expands the host and inner button to the available width. Useful for stacked mobile actions, form footers, or full-row menu buttons.                                         |
 | `icon`         | `icon`          | `string`                             | `''`          | URL or data URL for a fallback `<img>` icon.                                                                                                                                 |
 | `iconPosition` | `icon-position` | `'start' \| 'end'`                   | `'start'`     | Places the icon before or after the label.                                                                                                                                   |
+| `contentAlign` | `content-align` | `'start' \| 'center' \| 'end'`      | `'center'`    | Aligns the inner button content and label text without requiring `::part(button)` overrides. Useful for full-width list or menu buttons.                                     |
 | `handleClick`  | n/a             | `(event: MouseEvent) => void`        | `undefined`   | Property-only callback invoked on click. Native `click` events still bubble normally.                                                                                        |
 
 ### Slots
@@ -87,6 +89,8 @@ The legacy flat import path `solid-ui/components/button` still works, but the gr
 | `--button-font-weight`          | `var(--font-weight-bold, 600)`                      | Font weight applied to the button label                       |
 | `--button-line-height`          | `1`                                                 | Line height applied to the inner native button                |
 | `--button-justify-content`      | `center`                                            | Horizontal alignment of the button content                    |
+| `--button-content-justify-content` | `var(--button-justify-content)`                  | Horizontal alignment used by the inner content wrapper        |
+| `--button-label-text-align`     | `center`                                            | Text alignment applied to the label region                    |
 | `--button-box-shadow`           | `none`                                              | Base box shadow for the button                                |
 | `--button-hover-box-shadow`     | `var(--button-box-shadow)`                          | Hover-state box shadow                                        |
 | `--button-active-box-shadow`    | `var(--button-hover-box-shadow)`                    | Active-state box shadow                                       |
@@ -134,6 +138,22 @@ The icon scale is intentionally flatter than the button-height scale:
 - `md`: `16px` icon, matching the common menu, header, and button-leading icon size
 - `lg`: `16px` icon by default, because the larger profile-pane buttons mostly keep the same leading-icon size rather than scaling the icon up
 
+## Content alignment
+
+By default, button content is centered.
+
+Set `content-align="start"` or `content-align="end"` when the button needs to behave more like a full-row list item or menu action:
+
+```html
+<solid-ui-button
+  full-width
+  content-align="start"
+  label="Personal Address Book"
+></solid-ui-button>
+```
+
+That attribute updates both the inner flex alignment and the label text alignment, so consumers should not usually need `::part(button)` just to left-align button text.
+
 ## Text size and text color
 
 The component inherits the app's font family through `font: inherit`, so typeface decisions stay with the consuming app.