From 91db92f5df8ffef5fcbb1cc98445bbdd126d8fae Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Fri, 10 Jul 2026 22:34:33 -0400 Subject: [PATCH 01/25] docs(mobile/4): custom fonts + leading-* line height Text gets Custom fonts (font="Name" from resources/fonts/, bundled at build; iOS PostScript matching, Android assets) and Line height sections (leading-* multipliers + arbitrary [1.4]/[24px], with the iOS additive- spacing caveat). Button and the text inputs cross-reference the font attribute; the inputs note leading is Android-only for typed text. Co-Authored-By: Claude Fable 5 --- .../docs/mobile/4/edge-components/button.md | 2 + .../mobile/4/edge-components/text-input.md | 6 ++ .../docs/mobile/4/edge-components/text.md | 63 +++++++++++++++++++ 3 files changed, 71 insertions(+) diff --git a/resources/views/docs/mobile/4/edge-components/button.md b/resources/views/docs/mobile/4/edge-components/button.md index 5bf9adfa..7faadd83 100644 --- a/resources/views/docs/mobile/4/edge-components/button.md +++ b/resources/views/docs/mobile/4/edge-components/button.md @@ -26,6 +26,7 @@ The label can be passed as the `label` attribute or as slot content between the - `size` - `sm`, `md` (default), `lg` - `icon` - A leading [icon](icons) name (optional) - `icon-trailing` - A trailing [icon](icons) name (optional) +- `font` - Custom font for the label from `resources/fonts/`, by filename without extension (optional, string) — see [Text › Custom fonts](text#custom-fonts) - `disabled` - Disable the button (optional, boolean, default: `false`) - `loading` - Show a spinner in place of the leading icon and prevent presses (optional, boolean, default: `false`) - `a11y-label` - Accessibility label override (optional) @@ -120,6 +121,7 @@ Button::make('Save') - `make(string $label = '')` - Create a button with an optional label - `variant(string $value)` - `primary | secondary | destructive | ghost` - `size(string $value)` - `sm | md | lg` +- `font(string $name)` - Custom label font (filename without extension) - `icon(string $name)` - Leading icon - `iconTrailing(string $name)` - Trailing icon - `disabled(bool $value = true)` - Disable the button diff --git a/resources/views/docs/mobile/4/edge-components/text-input.md b/resources/views/docs/mobile/4/edge-components/text-input.md index 32c1662d..3bcaf8f6 100644 --- a/resources/views/docs/mobile/4/edge-components/text-input.md +++ b/resources/views/docs/mobile/4/edge-components/text-input.md @@ -63,6 +63,11 @@ Both variants accept identical props. - `leading-icon` - Icon name rendered at the start (optional, string) - `trailing-icon` - Icon name rendered at the end (optional, string) +### Typography + +- `font` - Custom font from `resources/fonts/`, by filename without extension (optional, string) — see [Text › Custom fonts](text#custom-fonts) +- `leading-*` classes set line height for the typed text (multi-line only). Applies on Android; **iOS inputs don't reflect it** — SwiftUI's editable field ignores line spacing (it works on [``](text#line-height)) + ### Sizing & accessibility - `size` - `sm | md (default) | lg` @@ -211,6 +216,7 @@ Both elements share the same fluent API (defined on `BaseTextInput`): - `multiline(bool $value = true)`, `maxLines(int $lines)`, `minLines(int $lines)` - `prefix(string $text)`, `suffix(string $text)`, `leadingIcon(string $name)`, `trailingIcon(string $name)` - `size(string $value)` - `sm | md | lg` +- `font(string $name)` - Custom font (filename without extension) - `a11yLabel(string $value)`, `a11yHint(string $value)` - `syncMode(string $mode)`, `debounceMs(int $ms)` - `onChange(string $method)`, `onSubmit(string $method)` diff --git a/resources/views/docs/mobile/4/edge-components/text.md b/resources/views/docs/mobile/4/edge-components/text.md index de099f67..34139479 100644 --- a/resources/views/docs/mobile/4/edge-components/text.md +++ b/resources/views/docs/mobile/4/edge-components/text.md @@ -31,6 +31,9 @@ All [shared layout and style attributes](layout) are supported, plus: - `color` - Text color as hex string (optional, default: `#000000`) - `text-align` - Alignment: `0`=start, `1`=center, `2`=end (optional, int, default: `0`) - `max-lines` - Maximum lines before truncating with ellipsis (optional, int) +- `font` - Custom font name — a font file from `resources/fonts/` without its extension (optional, string) — see [Custom fonts](#custom-fonts) + +Line height is set with `leading-*` classes — see [Line height](#line-height). +## Custom fonts + +Ship a font with your app and use it by name. Drop `.ttf`, `.otf`, or `.ttc` files +into your app's `resources/fonts/` directory, then reference one by its filename +(without the extension) with the `font` attribute: + +@verbatim +```blade + + Custom heading + +``` +@endverbatim + +So `resources/fonts/Inter-Bold.ttf` becomes `font="Inter-Bold"`. The build bundles +the files into the native project automatically — no configuration needed. On iOS +the font is registered and matched by its PostScript name; on Android it's loaded +from the app's assets. An unresolved name falls back to the system font. + +`font` also works on [``](button) and the [text inputs](text-input), +and is available fluently as `->font('Inter-Bold')`. + + + +## Line height + +Control the leading (line spacing) with Tailwind `leading-*` classes — unitless +multipliers of the font size: + +- `leading-none` (1) · `leading-tight` (1.25) · `leading-snug` (1.375) +- `leading-normal` (1.5) · `leading-relaxed` (1.625) · `leading-loose` (2) + +Arbitrary values are supported too: `leading-[1.4]` (multiplier) or `leading-[24px]` +(absolute). + +@verbatim +```blade + + A comfortably spaced paragraph that wraps across several lines with a little + extra breathing room between them. + +``` +@endverbatim + +Line height only affects multi-line text. + + + ## Inline runs Nest `` elements inside a `` to style spans within a single paragraph. The nested runs @@ -172,6 +234,7 @@ Text::make('Hello') - `make(string $text = '')` - Create text with content - `fontSize(float $size)` - Text size +- `font(string $name)` - Custom font from `resources/fonts/` (filename without extension) - `fontWeight(int $weight)` - 1-7 - `bold()` - Shortcut for `fontWeight(7)` - `color(string $hex)` - Text color From 4b4554ae8851664809c4262b2734798d9dada92a Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Sat, 11 Jul 2026 11:56:07 -0400 Subject: [PATCH 02/25] docs(mobile/v4): document --core-v4 plugin uninstall flag in the upgrade guide Co-Authored-By: Claude Fable 5 --- .../mobile/4/getting-started/upgrade-guide.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/resources/views/docs/mobile/4/getting-started/upgrade-guide.md b/resources/views/docs/mobile/4/getting-started/upgrade-guide.md index 8e493013..fedc056a 100644 --- a/resources/views/docs/mobile/4/getting-started/upgrade-guide.md +++ b/resources/views/docs/mobile/4/getting-started/upgrade-guide.md @@ -15,7 +15,20 @@ now core built-ins. registered by core. `nativephp/mobile` v4 declares a Composer **conflict** with the four standalone plugins, so `composer update` will refuse to resolve until you **remove them**. -Uninstall each one you have (this also unregisters it from your `NativeServiceProvider`): +The quickest way is the `--core-v4` flag, which finds whichever of the four you have installed, unregisters +each from your `NativeServiceProvider`, and removes them all in a single `composer remove`: + +```shell +php artisan native:plugin:uninstall --core-v4 +``` + +Add `--force` to skip the confirmation prompt — handy when sweeping across several apps: + +```shell +php artisan native:plugin:uninstall --core-v4 --force +``` + +Or uninstall them one at a time (this also unregisters each from your `NativeServiceProvider`): ```shell php artisan native:plugin:uninstall nativephp/mobile-device From 8206c4c9ff3524b3099228bffd391687515163d5 Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Sat, 11 Jul 2026 11:56:07 -0400 Subject: [PATCH 03/25] docs(mobile/v4): Floating overlay section in SuperNative layouts Co-Authored-By: Claude Fable 5 --- .../views/docs/mobile/4/the-basics/layouts.md | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/resources/views/docs/mobile/4/the-basics/layouts.md b/resources/views/docs/mobile/4/the-basics/layouts.md index 0f270a83..ac21663f 100644 --- a/resources/views/docs/mobile/4/the-basics/layouts.md +++ b/resources/views/docs/mobile/4/the-basics/layouts.md @@ -234,6 +234,44 @@ the content too far. +## Floating overlay + +For a pill or banner that **floats over** every screen — a "servers nearby" chip, a now-playing capsule, a +sync-status badge — mix the native-ui `HasFloatingOverlay` trait into your layout and return a `FloatingOverlay` +from `floatingOverlay()`. Unlike `bottomBar()`, it does **not** inset the content: it hovers on a top layer above +the content and the tab bar, so nothing is pushed up. Return `null` and nothing floats. + +The content is any element tree or Blade view, so you build the overlay's UI with normal EDGE components: + +```php +use Nativephp\NativeUi\Builders\FloatingOverlay; +use Nativephp\NativeUi\Concerns\HasFloatingOverlay; + +class AppLayout extends NativeLayout +{ + use HasFloatingOverlay; + + public function floatingOverlay(NativeComponent $screen): ?FloatingOverlay + { + if (NearbyServers::none()) { + return null; // nothing floats + } + + return FloatingOverlay::make(view('native.servers-pill')) + ->offset(88); // clearance above the tab bar; ->top() pins below the nav bar instead + } +} +``` + + + ## How chrome wraps the screen When a screen renders, the framework's `wrapWithChrome` flow: From 54868f9d2cb6b49c9fb6ca7607a5d6e43d58f410 Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Sat, 11 Jul 2026 12:05:10 -0400 Subject: [PATCH 04/25] =?UTF-8?q?docs(mobile/v4):=20text=20inputs=20?= =?UTF-8?q?=E2=80=94=20bare=20variant,=20keep-focus-on-submit,=20correctio?= =?UTF-8?q?ns?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Documents the previously-missing (chromeless variant with class-based styling pass-through and a color attribute), the keep-focus-on-submit prop for chat composers, password keyboard type, sync-mode/debounce-ms as direct props with the 300ms default, per-platform leadingIcon()/trailingIcon() signatures, and lineHeight attributes. Drops the stale 'no font overrides' claim. Co-Authored-By: Claude Fable 5 --- .../mobile/4/edge-components/text-input.md | 89 ++++++++++++++++--- 1 file changed, 77 insertions(+), 12 deletions(-) diff --git a/resources/views/docs/mobile/4/edge-components/text-input.md b/resources/views/docs/mobile/4/edge-components/text-input.md index 3bcaf8f6..f2a669c2 100644 --- a/resources/views/docs/mobile/4/edge-components/text-input.md +++ b/resources/views/docs/mobile/4/edge-components/text-input.md @@ -5,17 +5,20 @@ order: 430 ## Overview -Native text input fields come in two variants: +Native text input fields come in three variants: - `` — bordered field. Default, lower emphasis. - `` — surface-fill background + bottom indicator line. Higher emphasis. +- `` — chromeless field with no Material chrome, for chat pills, search bars, and inline + editors where the surrounding container supplies the visuals. See [Bare variant](#bare-variant). -Both share the same prop set and event API. Choose based on emphasis, not behavior. +All three share the same prop set and event API. Choose the outlined / filled pair based on emphasis, not behavior; +reach for bare when you want to style the input yourself. -On iOS they render as SwiftUI `TextField` / `SecureField` with Material3-style chrome; on Android they map to -`OutlinedTextField` / `TextField` (filled). Per Model 3 there are no per-instance color, font, or border overrides -— all chrome resolves from the theme. For fully custom input visuals drop to [``](pressable) -wrapping your own drawing. +On iOS the outlined and filled variants render as SwiftUI `TextField` / `SecureField` with Material3-style chrome; on +Android they map to `OutlinedTextField` / `TextField` (filled). Per Model 3 these two have no per-instance color or +border overrides — all chrome resolves from the theme. For fully custom input visuals reach for the bare variant, or +drop to [``](pressable) wrapping your own drawing. @verbatim ```blade @@ -31,7 +34,8 @@ wrapping your own drawing. ## Props -Both variants accept identical props. +All three variants accept the same shared prop set. The bare variant adds a `color` attribute on top — see +[Bare variant](#bare-variant). ### Content @@ -49,12 +53,18 @@ Both variants accept identical props. ### Behavior -- `keyboard` - Keyboard hint string: `text` (default), `number`, `email`, `phone`, `url`, `decimal`, `numberPassword` +- `keyboard` - Keyboard hint string: `text` (default), `number`, `email`, `phone`, `url`, `decimal`, `password`, + `numberPassword`. On iOS `password` uses the standard keyboard; `secure` is the masking mechanism - `secure` - Mask input for passwords (optional, boolean, default: `false`) - `multiline` - Allow multiple lines (optional, boolean, default: `false`) - `max-length` - Maximum character count (optional, int) - `max-lines` - Maximum visible lines when `multiline` (optional, int) - `min-lines` - Minimum visible lines when `multiline` (optional, int) +- `keep-focus-on-submit` - Keep the keyboard up after `@submit` instead of unfocusing the field on return — the chat + "send and keep typing" pattern (optional, boolean, default: `false`) +- `sync-mode` - How change events dispatch back to your component: `live` (default), `blur`, or `debounce`. Usually + set via the `native:model` modifiers below, but accepted directly too +- `debounce-ms` - Milliseconds of inactivity before a `debounce` sync fires (optional, int, default: `300`) ### Decorations @@ -67,6 +77,7 @@ Both variants accept identical props. - `font` - Custom font from `resources/fonts/`, by filename without extension (optional, string) — see [Text › Custom fonts](text#custom-fonts) - `leading-*` classes set line height for the typed text (multi-line only). Applies on Android; **iOS inputs don't reflect it** — SwiftUI's editable field ignores line spacing (it works on [``](text#line-height)) +- `lineHeight` / `lineHeightPx` attributes are an alternative to the `leading-*` classes: `lineHeight` is a multiplier of the font size, `lineHeightPx` an absolute override. Only the camelCase spellings are read for these two ### Sizing & accessibility @@ -81,7 +92,7 @@ Both variants accept identical props. @@ -110,7 +121,51 @@ Use the `native:model` directive for automatic two-way binding with a component - `live` (default) — every keystroke fires `@change` - `blur` — only fires on focus loss / submit -- `debounce` — fires after `debounce_ms` of inactivity, or immediately on blur / submit +- `debounce` — fires after `debounce-ms` of inactivity (300ms when unset), or immediately on blur / submit + +## Bare variant + +`` is a chromeless input — no outline, no fill, no label, no Material chrome, just the typing +affordance. It's built for chat input pills, search bars, and inline editors where the surrounding container provides +the visuals. On iOS it renders as a plain SwiftUI `TextField`; on Android as a Compose `BasicTextField`. + +It inherits the full shared prop set — `native:model`, `secure`, `multiline`, `keyboard`, `@submit`, +`keep-focus-on-submit`, `disabled`, `read-only`, and the rest — so it behaves exactly like the other variants. + +Two things set it apart: + +- **Class-based styling passes through.** Unlike the filled / outlined variants (which resolve all chrome from the + theme), the bare variant lets element-level styling flow to the input directly: `bg`, `rounded-*`, borders, `glass`, + opacity, elevation, and padding. So you can style the pill on the input itself, no wrapping row needed. +- **A `color` attribute** sets the text color — a hex value or a Tailwind token, with `dark:text-*` support for a + light/dark pair. Useful when your wrapper overrides the background and the theme's default text color would vanish. + +@verbatim +```blade + +``` +@endverbatim + +The `color` attribute can be set explicitly or picked up from a `text-*` class on the input: + +@verbatim +```blade + + +``` +@endverbatim + + ## Examples @@ -198,6 +253,7 @@ Use the `native:model` directive for automatic two-way binding with a component ```php use Nativephp\NativeUi\Elements\OutlinedTextInput; use Nativephp\NativeUi\Elements\FilledTextInput; +use Nativephp\NativeUi\Elements\BareTextInput; OutlinedTextInput::make() ->label('Email') @@ -208,15 +264,24 @@ OutlinedTextInput::make() ->onChange('updateEmail'); ``` -Both elements share the same fluent API (defined on `BaseTextInput`): +All three elements share the same fluent API (defined on `BaseTextInput`): - `value(string $text)`, `placeholder(string $text)`, `label(string $text)`, `supporting(string $text)` - `disabled(bool $value = true)`, `readOnly(bool $value = true)`, `error(bool $value = true)`, `loading(bool $value = true)` - `keyboard(string|int $type)`, `secure(bool $value = true)`, `maxLength(int $length)` - `multiline(bool $value = true)`, `maxLines(int $lines)`, `minLines(int $lines)` -- `prefix(string $text)`, `suffix(string $text)`, `leadingIcon(string $name)`, `trailingIcon(string $name)` +- `keepFocusOnSubmit(bool $value = true)` - Keep the keyboard up after `@submit` +- `prefix(string $text)`, `suffix(string $text)` +- `leadingIcon(?string $name = null, IosSymbol|string|null $ios = null, AndroidSymbol|string|null $android = null)` - + pass a shared `$name`, or per-platform `$ios` / `$android` symbols for a different icon on each platform +- `trailingIcon(?string $name = null, IosSymbol|string|null $ios = null, AndroidSymbol|string|null $android = null)` - + same per-platform form as `leadingIcon()` - `size(string $value)` - `sm | md | lg` - `font(string $name)` - Custom font (filename without extension) - `a11yLabel(string $value)`, `a11yHint(string $value)` - `syncMode(string $mode)`, `debounceMs(int $ms)` - `onChange(string $method)`, `onSubmit(string $method)` + +`BareTextInput` adds one method on top of the shared API: + +- `color(string $color)` - Text color as a hex value or Tailwind token (with `dark:text-*` support) From de4f42f09bf78a48a28f1576c02b636bb697a6cb Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Sat, 11 Jul 2026 12:05:11 -0400 Subject: [PATCH 05/25] =?UTF-8?q?docs(mobile/v4):=20selection=20controls?= =?UTF-8?q?=20=E2=80=94=20drop=20no-op=20slider=20size,=20sync=20props,=20?= =?UTF-8?q?a11y?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removes the slider size prop/method (never read by either renderer), documents sync-mode/debounce-ms on checkbox and the 300ms debounce default, adds a11y props to radio children, notes select options are flat display strings, and adds theme-styling asides matching toggle's. Co-Authored-By: Claude Fable 5 --- .../views/docs/mobile/4/edge-components/checkbox.md | 12 +++++++++++- .../docs/mobile/4/edge-components/radio-group.md | 3 +++ .../views/docs/mobile/4/edge-components/select.md | 10 ++++++++++ .../views/docs/mobile/4/edge-components/slider.md | 10 +++++++--- 4 files changed, 31 insertions(+), 4 deletions(-) diff --git a/resources/views/docs/mobile/4/edge-components/checkbox.md b/resources/views/docs/mobile/4/edge-components/checkbox.md index e5671fa2..e0a57516 100644 --- a/resources/views/docs/mobile/4/edge-components/checkbox.md +++ b/resources/views/docs/mobile/4/edge-components/checkbox.md @@ -22,6 +22,8 @@ Per Model 3, check/border/label colors come from the theme — no per-instance o - `value` - Current checked state (optional, boolean, default: `false`) - `label` - Inline label rendered to the right of the box (optional, string) - `disabled` - Disable the checkbox (optional, boolean, default: `false`) +- `sync-mode` - `live | blur | debounce` (optional, string; set by `native:model` modifiers) +- `debounce-ms` - Debounce interval when `sync-mode` is `debounce` (optional, int) - `a11y-label` - Accessibility label (optional) - `a11y-hint` - Accessibility hint (optional) @@ -29,9 +31,17 @@ Per Model 3, check/border/label colors come from the theme — no per-instance o - `@change` - Component method called when toggled. Receives the new boolean value as a parameter + + ## Two-way Binding -Use `native:model` for automatic two-way binding with a boolean property on your component. +Use `native:model` for automatic two-way binding with a boolean property on your component. The `live`, `blur`, +and `debounce` modifiers set `sync-mode` (and `debounce-ms`) for you, though for a discrete tap every toggle is a +single event. @verbatim ```blade diff --git a/resources/views/docs/mobile/4/edge-components/radio-group.md b/resources/views/docs/mobile/4/edge-components/radio-group.md index 16bc48a0..28c60984 100644 --- a/resources/views/docs/mobile/4/edge-components/radio-group.md +++ b/resources/views/docs/mobile/4/edge-components/radio-group.md @@ -52,6 +52,8 @@ Per Model 3, all colors come from theme tokens. - `value` - The option's value (required, string). Must be unique within the group - `label` - Inline label (optional, string) - `disabled` - Disable just this option (optional, boolean, default: `false`) +- `a11y-label` - Accessibility label (optional) +- `a11y-hint` - Accessibility hint (optional) ## Examples @@ -111,3 +113,4 @@ RadioGroup::make( - `make(string $value = '')` - Create a radio with a value - `label(string $label)` - Inline label - `disabled(bool $value = true)` - Disable the option +- `a11yLabel(string $value)`, `a11yHint(string $value)` - Accessibility diff --git a/resources/views/docs/mobile/4/edge-components/select.md b/resources/views/docs/mobile/4/edge-components/select.md index 2d9cc3a0..cff5942c 100644 --- a/resources/views/docs/mobile/4/edge-components/select.md +++ b/resources/views/docs/mobile/4/edge-components/select.md @@ -21,6 +21,10 @@ Per Model 3, colors and borders come from theme tokens. ``` @endverbatim +Options are a flat list of display strings — pass the strings you want shown, and the selected string is the +value bound back to your component. An associative `value => label` array is flattened to its labels, so the +displayed text is what you get. + ## Props - `options` - Array of option strings (required, array) @@ -35,6 +39,12 @@ Per Model 3, colors and borders come from theme tokens. - `@change` - Component method called when the selection changes. Receives the new option string + + ## Two-way Binding `native:model` binds the selected option to a string property on your component: diff --git a/resources/views/docs/mobile/4/edge-components/slider.md b/resources/views/docs/mobile/4/edge-components/slider.md index 1ba45ea0..74e59f40 100644 --- a/resources/views/docs/mobile/4/edge-components/slider.md +++ b/resources/views/docs/mobile/4/edge-components/slider.md @@ -24,7 +24,6 @@ under control while the user drags. - `max` - Maximum value (optional, float, default: `1`) - `step` - Snap increment (optional, float, default: `0` for continuous) - `disabled` - Disable the slider (optional, boolean, default: `false`) -- `size` - `sm | md (default) | lg` (optional, string) - `a11y-label` - Accessibility label (optional) - `a11y-hint` - Accessibility hint (optional) @@ -32,6 +31,12 @@ under control while the user drags. - `@change` - Component method called when the value changes. Receives the new float value + + ## Two-way Binding @verbatim @@ -48,7 +53,7 @@ under control while the user drags. @endverbatim `live` is the default and stress-tests the runtime's round-trip; `blur` is the most efficient for unsteady hands; -`debounce` is the middle ground. +`debounce` is the middle ground. Omit the interval (`native:model.debounce`) and it defaults to 300ms. ## Examples @@ -90,7 +95,6 @@ Slider::make() - `make()` - Create a slider - `value(float $val)`, `min(float $val)`, `max(float $val)`, `step(float $val)` - Range / current value - `disabled(bool $value = true)` - Disable the slider -- `size(string $value)` - `sm | md | lg` - `a11yLabel(string $value)`, `a11yHint(string $value)` - Accessibility - `syncMode(string $mode)`, `debounceMs(int $ms)` - Set by `native:model` modifiers - `onChange(string $method)` - Component method invoked on change From 7b1a01d6960a326bb13c626573e304cb19ce1747 Mon Sep 17 00:00:00 2001 From: Shane Rosenthal Date: Sat, 11 Jul 2026 12:05:11 -0400 Subject: [PATCH 06/25] =?UTF-8?q?docs(mobile/v4):=20buttons=20&=20indicato?= =?UTF-8?q?rs=20=E2=80=94=20icon=20element=20API,=20per-platform=20icons,?= =?UTF-8?q?=20a11y-hint?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Corrects icon.md to the registered core Element class and documents its full make()/name() signatures, enum-bound :ios/:android attrs, and dark-color. Documents per-platform icon() signatures on button, chip and tab items, the text-only button slot, lineHeight attrs, NavAction menus, badge/chip style overrides (bg-*/rounded-*), optional chip label, and a11y-hint across all seven pages. Co-Authored-By: Claude Fable 5 --- .../4/edge-components/activity-indicator.md | 2 ++ .../docs/mobile/4/edge-components/badge.md | 5 ++- .../mobile/4/edge-components/button-group.md | 3 ++ .../docs/mobile/4/edge-components/button.md | 13 +++++-- .../docs/mobile/4/edge-components/chip.md | 8 +++-- .../docs/mobile/4/edge-components/icon.md | 34 +++++++++++++++---- .../mobile/4/edge-components/progress-bar.md | 2 ++ 7 files changed, 53 insertions(+), 14 deletions(-) diff --git a/resources/views/docs/mobile/4/edge-components/activity-indicator.md b/resources/views/docs/mobile/4/edge-components/activity-indicator.md index 9051ae7c..3b418fd4 100644 --- a/resources/views/docs/mobile/4/edge-components/activity-indicator.md +++ b/resources/views/docs/mobile/4/edge-components/activity-indicator.md @@ -22,6 +22,7 @@ All [shared layout and style attributes](layout) are supported, plus: - `size` - `"sm"`, `"md"` (default), or `"lg"` (optional, string). Legacy ints `1`=large, `2`=small are also accepted - `color` - Spinner color as hex string (optional). Leave unset to use `theme.primary` - `a11y-label` - Accessibility label (optional) +- `a11y-hint` - Accessibility hint (optional)