Token

# Brok UI: Order Token (`order-token`)

Documents a single z-index / stacking-order design token — a stacked-layers glyph plus the token name, with the integer value revealed in a tooltip on hover and click-to-copy.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add order-token
```

## Usage

```blade
<div class="flex flex-wrap items-center gap-3">
    <x-ui.order-token name="z-dropdown" value="1000" />
    <x-ui.order-token name="z-overlay" value="1200" />
    <x-ui.order-token name="z-modal" value="1300" />
    <x-ui.order-token name="z-toast" value="1500" />
    <x-ui.order-token name="z-tooltip" value="1600" />
</div>
```

## Props

- `name` (string, default ``) — Token name shown as the chip label and tooltip trigger.
- `value` (string, default ``) — Token integer stacking-order value, shown in the tooltip and copied to the clipboard.
- `copyable` (bool, default `true`) — Shows the copy button when true.
- `side` (string, default `top`) — Tooltip placement side.

## Use when

- Use to document, inspect, and apply design-system decisions consistently across teams and AI tooling.
- Documenting a z-index / stacking-order token so it reads clearly alongside the layer it controls.
- Listing an app's stacking scale in a style guide.

## Avoid when

- Do not present token-level controls to end users who only need product functionality.
- Documenting a non-order numeric token, such as an opacity or scale factor; use number-token instead.

## Anti-patterns

- Exposing implementation tokens as product settings

## Rules

- Use the `<brok:order-token>` tag (or `<x-ui.order-token>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/order-token
- Registry JSON (files, props, contract): https://brokui.dev/r/open/order-token.json

@props([
    'name' => '',
    'value' => '',
    'copyable' => true,
    'side' => 'top',
])

{{--
    Order Token (tokenui.dev-inspired) — documents a single z-index / stacking-order
    design token. A stacked-layers glyph plus the token name; the integer value is
    revealed in a tooltip on hover/focus and copied with one click. Implements a
    `number`-typed stacking order from the W3C Design Tokens spec. Composes the
    base `token` chip and supplies the glyph through its `indicator` slot.
--}}

<x-ui.token
    data-slot="order-token"
    :name="$name"
    :value="$value"
    :copyable="$copyable"
    :side="$side"
    {{ $attributes }}
>
    <x-slot:indicator>
        <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-muted-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z"/><path d="m22 12.18-9.17 4.16a2 2 0 0 1-1.66 0L2 12.18"/><path d="m22 17.18-9.17 4.16a2 2 0 0 1-1.66 0L2 17.18"/></svg>
    </x-slot:indicator>
</x-ui.token>