@stoovles/gap-kit 1.0.0

package/guidelines/components/logo.md

@@ -0,0 +1,63 @@
+# GapLogo
+
+## When to use
+
+Use the `GapLogo` component to render the official Gap wordmark. Never recreate the logo with text, fonts, or custom SVGs. Always import from `@stoovles/gap-kit`.
+
+```tsx
+import { GapLogo } from '@stoovles/gap-kit'
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `color` | `"dark" \| "light"` | `"dark"` | Dark renders in `--color-type-primary` (#000), Light renders in `--color-type-inverse` (#fff) |
+| `height` | `number` | `60` | Height in pixels; width scales proportionally (aspect ratio 81:60) |
+| `className` | `string` | — | Additional CSS class |
+| `aria-label` | `string` | `"Gap"` | Accessible label |
+
+## Sizing
+
+The logo has a fixed aspect ratio of **81:60** (1.35:1). Only set `height` — width is calculated automatically.
+
+| Context | Recommended height |
+|---|---|
+| Global header (desktop) | `24` – `32` |
+| Global header (mobile) | `20` – `24` |
+| Footer | `20` – `24` |
+| Hero / splash | `48` – `60` |
+
+## Color decision tree
+
+```
+Which logo color should I use?
+
+├─ On a light background (white, gray, subtle)?
+│  └─ color="dark" (default)
+│
+└─ On a dark background (black, brand bar, dark overlay)?
+   └─ color="light"
+```
+
+## Examples
+
+```tsx
+{/* Default logo in header */}
+<GapLogo height={24} />
+
+{/* White logo on dark header bar */}
+<GapLogo height={24} color="light" />
+
+{/* Large logo for splash screen */}
+<GapLogo height={60} />
+```
+
+## Rules
+
+- Never distort the logo — only change `height`, width scales automatically
+- Never change the logo color to anything other than "dark" (black) or "light" (white)
+- Do not add borders, shadows, or effects to the logo
+- Always provide sufficient contrast — dark on light backgrounds, light on dark backgrounds
+- Do not place the logo inside colored containers that reduce contrast
+- Minimum recommended height is 20px for legibility

package/guidelines/components/mega-nav.md

@@ -0,0 +1,103 @@
+# Mega Navigation
+
+Desktop horizontal navigation bar with hover-triggered category dropdown panels. Contains utility links (top-right), a logo, department links, and an inline search input.
+
+## Usage
+
+```jsx
+import { MegaNav, SearchInput, GapLogo } from "@stoovles/gap-kit";
+
+<MegaNav
+  logo={<GapLogo width={60} />}
+  onLogoClick={() => navigate("/")}
+  utilityLinks={[
+    { label: "Find a Store", href: "/stores" },
+    { label: "Rewards", href: "/rewards" },
+    { label: "Gift Card", href: "/gift-cards" },
+  ]}
+  departments={[
+    {
+      label: "Women",
+      href: "/women",
+      categories: [
+        {
+          title: "Clothing",
+          links: [
+            { label: "Tops", href: "/women/tops" },
+            { label: "Dresses", href: "/women/dresses" },
+            { label: "Jeans", href: "/women/jeans" },
+          ],
+        },
+        {
+          title: "Accessories",
+          links: [
+            { label: "Bags", href: "/women/bags" },
+            { label: "Shoes", href: "/women/shoes" },
+          ],
+        },
+      ],
+      marketingImages: [
+        {
+          imageUrl: "/promo-women.jpg",
+          label: "Spring collection",
+          href: "/women/spring",
+        },
+      ],
+    },
+    { label: "Men", href: "/men" },
+    { label: "Today's Deals!", href: "/deals", sale: true },
+  ]}
+  searchSlot={<SearchInput onSubmit={(q) => search(q)} />}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `logo` | `ReactNode` | — | Logo element (e.g. `<GapLogo />`) |
+| `onLogoClick` | `() => void` | — | Callback when logo is clicked |
+| `departments` | `MegaNavDepartment[]` | **required** | Department links |
+| `utilityLinks` | `{ label, href }[]` | `[]` | Top-right utility links |
+| `searchSlot` | `ReactNode` | — | Search input slot |
+
+### MegaNavDepartment
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `label` | `string` | Display text |
+| `href` | `string` | Link URL |
+| `sale` | `boolean` | Renders in sale red |
+| `categories` | `MegaNavCategory[]` | Dropdown category columns |
+| `marketingImages` | `MegaNavMarketingImage[]` | Promo images in dropdown |
+
+### MegaNavCategory
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `title` | `string` | Category header |
+| `links` | `{ label, href }[]` | Sub-category links |
+
+### MegaNavMarketingImage
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `imageUrl` | `string` | Promotional image |
+| `label` | `string` | Link text below image |
+| `href` | `string` | Link destination |
+
+## Visual reference
+
+- **Utility links:** 14px accent color, slash-separated, aligned right
+- **Nav bar:** Logo left, department links centered (32px gap), search right
+- **Department links:** 16px, accent color; sale items in red
+- **Dropdown:** Full-width white panel with shadow; up to 5 category columns (208px max each) + 2 marketing image columns (208px)
+- **Category headers:** 16px primary; links: 12px secondary gray, 4px vertical padding
+- **Marketing images:** 87:122 aspect ratio with underlined link below
+
+## Rules
+
+- The dropdown appears on hover over a department link and dismisses on mouse-leave.
+- Departments without `categories` do not open a dropdown.
+- Use the `searchSlot` to pass an existing `SearchInput` component.
+- The `sale` flag should be reserved for one or two department links maximum.

package/guidelines/components/notification.md

@@ -0,0 +1,97 @@
+# Notification
+
+## When to use
+
+Use the `Notification` component to display contextual messages — informational updates, warnings, success confirmations, or error alerts. Available in three layout variants depending on prominence.
+
+```tsx
+import { Notification } from '@stoovles/gap-kit'
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `type` | `"info" \| "warning" \| "success" \| "error"` | `"info"` | Controls background color, icon, and semantics |
+| `variant` | `"banner" \| "inline" \| "bare"` | `"banner"` | Layout size — banner is full, inline is compact, bare is text-only |
+| `children` | `ReactNode` | — | Message content |
+| `showIcon` | `boolean` | `true` | Whether to render the type icon (not shown in `bare` variant) |
+| `onDismiss` | `() => void` | — | If provided, shows a close (X) button — only in `banner` variant |
+| `className` | `string` | — | Additional CSS class |
+
+## Visual reference
+
+### Type backgrounds
+
+| Type | Background | Icon color | Text color |
+|---|---|---|---|
+| `info` | Transparent | Primary (#000) | Primary |
+| `warning` | Light yellow (`--color-background-warning`) | Amber (`--color-type-warning`) | Primary |
+| `success` | Light green (`--color-background-success`) | Green (`--color-type-success`) | Primary |
+| `error` | Light red (`--color-background-error`) | Red (`--color-type-error`) | Primary |
+
+### Variant layouts
+
+| Variant | Padding | Gap | Close button | Icon |
+|---|---|---|---|---|
+| `banner` | 16px | 16px | Yes (if `onDismiss`) | Yes |
+| `inline` | 8px | 8px | No | Yes |
+| `bare` | 8px | 0 | No | No |
+
+### Bare text color overrides
+
+| Type | Text color |
+|---|---|
+| `error` | Red (`--color-type-error`) |
+| `success` | Green (`--color-type-success`) |
+| `info` / `warning` | Primary (#000) |
+
+## Sizing
+
+- Icon: 16 × 16px, inline SVG
+- Font: Gap Sans, 10px (`--text-caption-font-size`), weight 400, letter-spacing 0.2px
+- Close button: 16 × 16px
+
+## Examples
+
+```tsx
+{/* Info banner with dismiss */}
+<Notification type="info" onDismiss={() => setShow(false)}>
+  Your order has been updated. Check your email for details.
+</Notification>
+
+{/* Warning banner */}
+<Notification type="warning" onDismiss={() => {}}>
+  Please re-enter your credit card security code (CVV) to continue.
+</Notification>
+
+{/* Success banner */}
+<Notification type="success" onDismiss={() => {}}>
+  Your payment was processed successfully.
+</Notification>
+
+{/* Error banner */}
+<Notification type="error" onDismiss={() => {}}>
+  We couldn't process your request. Please try again.
+</Notification>
+
+{/* Inline compact notification */}
+<Notification type="success" variant="inline">
+  Item added to bag.
+</Notification>
+
+{/* Bare text-only (e.g. under a form field) */}
+<Notification type="error" variant="bare">
+  Please enter a valid email address.
+</Notification>
+```
+
+## Rules
+
+- Use `banner` for page-level or section-level messages that need attention
+- Use `inline` for compact contextual feedback within a flow (e.g. below a form section)
+- Use `bare` for minimal text-only messages (e.g. field-level validation summaries)
+- The `error` type renders with `role="alert"` for screen reader announcement; all others use `role="status"`
+- Provide `onDismiss` only when the user should be able to close the message
+- Do not use notifications for permanent content — they are transient messages
+- Keep message text concise and actionable

package/guidelines/components/pagination.md

@@ -0,0 +1,88 @@
+# Pagination
+
+## When to use
+
+Use the `Pagination` component for progressive loading on product listing pages. It shows the user how many items they've seen, offers a button to load more, and optionally provides a "Back to Top" shortcut.
+
+```tsx
+import { Pagination } from '@stoovles/gap-kit'
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `shown` | `number` | — | Number of items currently displayed |
+| `total` | `number` | — | Total number of items available |
+| `moreCount` | `number` | — | Items remaining to load — renders the "View N more" button |
+| `loading` | `boolean` | `false` | Shows a loading indicator inside the button |
+| `onLoadMore` | `() => void` | — | Callback when "View more" is clicked |
+| `showBackToTop` | `boolean` | `false` | Replaces the "View more" button with "Back to Top" |
+| `onBackToTop` | `() => void` | — | Callback when "Back to Top" is clicked |
+| `className` | `string` | — | Additional CSS class |
+
+## Visual reference
+
+| State | Count text | Button |
+|---|---|---|
+| View More | "48 of 120 items" | Outlined — "View 24 more" |
+| Loading | "48 of 120 items" | Solid black with dot loader |
+| Back to Top | "120 of 120 items" | Outlined — "Back to Top" |
+
+### Button states
+
+| State | Background | Border | Text |
+|---|---|---|---|
+| Default | White | 1px accent (#000) | Accent (#000) |
+| Hover | Brand blue (`--button-secondary-hover-fill`) | Brand blue | White, underlined |
+| Press | White | Accent (#000) | Accent (#000) |
+| Loading | Black (`--button-secondary-fill`) | Black | White dots |
+
+## Sizing
+
+- Vertical padding: 24px (`--spacing-utk-xl`)
+- Gap (count to button): 16px (`--spacing-utk-l`)
+- Button: min-height 44px, min-width 175px, horizontal padding 24px
+- Count font: Gap Sans, 16px, weight 400, 0.32px letter-spacing
+- Button font: Gap Sans, 16px (`--text-button-font-size`), weight 400
+- Loader dots: 3px / 4.5px / 6px white circles
+
+## Examples
+
+```tsx
+{/* Standard "View more" */}
+<Pagination
+  shown={48}
+  total={120}
+  moreCount={24}
+  onLoadMore={handleLoadMore}
+/>
+
+{/* Loading state */}
+<Pagination
+  shown={48}
+  total={120}
+  loading
+/>
+
+{/* All items loaded — show "Back to Top" */}
+<Pagination
+  shown={120}
+  total={120}
+  showBackToTop
+  onBackToTop={() => window.scrollTo({ top: 0, behavior: "smooth" })}
+/>
+
+{/* Count only (no button) */}
+<Pagination shown={120} total={120} />
+```
+
+## Rules
+
+- Always provide `shown` and `total` — the count text is always visible
+- Pass `moreCount` to show the "View more" button; omit it when all items are loaded
+- Set `loading` to `true` while fetching to swap the button content to the loader
+- Use `showBackToTop` after all items are loaded to offer scroll-to-top navigation
+- `showBackToTop` takes priority over `moreCount` — they should not both be active
+- Do not show both loading and "View more" buttons simultaneously
+- The component is full-width and centers its content

package/guidelines/components/popover.md

@@ -0,0 +1,77 @@
+# Popover
+
+## When to use
+
+Use the `Popover` component to overlay supplementary content near a trigger element — tooltips, contextual help, short descriptions, or inline guidance. It renders as a white card with a directional arrow pointing toward the trigger.
+
+```tsx
+import { Popover } from '@stoovles/gap-kit'
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"top"` | Which side of the trigger the popover appears on |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | Where the arrow sits along the popover edge |
+| `children` | `ReactNode` | — | Content inside the popover body |
+| `className` | `string` | — | Additional CSS class |
+
+## Visual reference
+
+| Element | Style |
+|---|---|
+| Background | White (`--color-background-default-white`) |
+| Shadow | 2px 4px 8px rgba(0,0,0,0.08) (`--drop-shadow-high-*`) |
+| Arrow | 18 × 9px CSS triangle matching the white background |
+| Text | Gap Sans, 12px, weight 400, 0.24px letter-spacing, secondary color (`--color-type-secondary`) |
+
+### Position + Align combinations
+
+| Position | Arrow direction | Align start | Align center | Align end |
+|---|---|---|---|---|
+| `top` | Points down | Left-aligned arrow | Centered arrow | Right-aligned arrow |
+| `bottom` | Points up | Left-aligned arrow | Centered arrow | Right-aligned arrow |
+| `left` | Points right | Arrow near top | Arrow centered | Arrow near bottom |
+| `right` | Points left | Arrow near top | Arrow centered | Arrow near bottom |
+
+## Sizing
+
+- Width: 280px
+- Padding: 12px vertical (`--spacing-utk-m`), 16px horizontal (`--spacing-utk-l`)
+- Arrow: 18px wide × 9px tall (CSS border triangle)
+- Font: Gap Sans, 12px (`--font-size--1`), weight 400, letter-spacing 0.24px
+- Text color: `--color-type-secondary` (#595959)
+
+## Examples
+
+```tsx
+{/* Tooltip above, centered arrow */}
+<Popover position="top" align="center">
+  Free shipping on orders over $50
+</Popover>
+
+{/* Below trigger, arrow aligned to start */}
+<Popover position="bottom" align="start">
+  Select your preferred size for accurate fit recommendations.
+</Popover>
+
+{/* Right of trigger, arrow centered */}
+<Popover position="right" align="center">
+  <p>This item is final sale and cannot be returned.</p>
+</Popover>
+
+{/* Left of trigger, arrow at end */}
+<Popover position="left" align="end">
+  Price shown includes member discount.
+</Popover>
+```
+
+## Rules
+
+- The `Popover` is a visual-only element — positioning relative to a trigger must be handled by layout or JavaScript
+- Use `position` to match where the popover sits relative to its trigger; the arrow automatically points toward the trigger
+- Keep content concise — the popover is 280px wide; long text will wrap
+- Do not nest interactive elements (buttons, links) inside unless absolutely necessary
+- For dismissible or complex overlays, consider a modal or dialog instead
+- The arrow is a pure CSS triangle — no images required

package/guidelines/components/price.md

@@ -0,0 +1,86 @@
+# Price
+
+## When to use
+
+Use the `Price` component to display product pricing consistently across the site — in product cards, product detail pages, cart, and checkout. It handles regular prices, sale prices with strikethrough, discount percentages, and price ranges.
+
+```tsx
+import { Price } from '@stoovles/gap-kit'
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `amount` | `string` | — | Current / sale price (e.g. `"$29.99"`) |
+| `originalAmount` | `string` | — | Original price before sale, shown with strikethrough. Omit for non-sale items. |
+| `discount` | `string` | — | Discount label (e.g. `"30% off"`). Only shown during sale. |
+| `rangeEnd` | `string` | — | Upper bound of a price range (e.g. `"$49.99"`) |
+| `layout` | `"inline" \| "stacked"` | `"inline"` | Inline places all elements in a row; stacked arranges vertically |
+| `className` | `string` | — | Additional CSS class |
+
+## Layout decision tree
+
+```
+Where is this price displayed?
+
+├─ Product card or compact listing?
+│  └─ layout="inline"
+│
+└─ Product detail page or area with more vertical space?
+   └─ layout="stacked"
+```
+
+## Visual reference
+
+| Scenario | Display |
+|---|---|
+| Regular price | `$29.99` in black |
+| Sale (inline) | ~~`$49.99`~~ gray strikethrough, `30% off` dark gray, `$29.99` red |
+| Sale (stacked) | ~~`$49.99`~~ on line 1, `30% off` on line 2, `$29.99` red on line 3 |
+| Sale + range | `$29.99` red ` - $39.99` black |
+
+## Color mapping
+
+| Element | Token | Gap value |
+|---|---|---|
+| Regular price | `--color-type-primary` | #000000 |
+| Original (strikethrough) | `--product-price-strikethrough` | #757575 |
+| Discount text | `--product-price-percent-off-font` | #595959 |
+| Sale price | `--color-type-sale` | #e10000 |
+
+## Examples
+
+```tsx
+{/* Regular price */}
+<Price amount="$39.95" />
+
+{/* Sale price */}
+<Price amount="$29.99" originalAmount="$49.99" discount="40% off" />
+
+{/* Stacked sale */}
+<Price
+  amount="$29.99"
+  originalAmount="$49.99"
+  discount="40% off"
+  layout="stacked"
+/>
+
+{/* Sale with range */}
+<Price
+  amount="$19.99"
+  originalAmount="$39.99"
+  discount="50% off"
+  rangeEnd="$29.99"
+  layout="stacked"
+/>
+```
+
+## Rules
+
+- Always format prices with a dollar sign and two decimal places (`$0.00`)
+- `originalAmount` must be higher than `amount` — never show a "sale" where the price went up
+- Only show `discount` when `originalAmount` is also provided
+- Use `rangeEnd` only with `layout="stacked"` for clarity
+- Do not add custom colors — sale red and strikethrough gray are controlled by tokens
+- Keep the same `layout` for all prices within a product card for consistency

package/guidelines/components/product-card.md

@@ -0,0 +1,82 @@
+# Product Card
+
+A product listing card used on PLP grids, search results, and recommendation carousels. Available in two variants: `default` (vertical) and `mini` (horizontal).
+
+## Usage
+
+```jsx
+import { ProductCard } from "@stoovles/gap-kit";
+
+<ProductCard
+  imageUrl="/images/denim-jacket.jpg"
+  name="Classic Denim Jacket"
+  originalPrice="$89.95"
+  salePrice="$59.99"
+  discount="33% off"
+  badge="New"
+  marketingFlag="Selling fast"
+  rating={4}
+  reviewCount={128}
+  swatches={[
+    { color: "#8BA3C7", label: "Light Wash" },
+    { color: "#2C3E50", label: "Dark Wash" },
+  ]}
+  moreSwatches={6}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `"default" \| "mini"` | `"default"` | Card layout |
+| `imageUrl` | `string` | — | Product image URL |
+| `imageAlt` | `string` | `""` | Image alt text |
+| `name` | `string` | **required** | Product name |
+| `badge` | `string` | — | Overlay badge text (default only) |
+| `originalPrice` | `string` | — | Strikethrough price |
+| `salePrice` | `string` | — | Sale price in red |
+| `discount` | `string` | — | Discount text (e.g. "30% off") |
+| `marketingFlag` | `string` | — | Marketing callout (default only) |
+| `rating` | `number` | — | Star rating 0–5 |
+| `reviewCount` | `number` | — | Number of reviews |
+| `swatches` | `ProductCardSwatch[]` | — | Color swatch array |
+| `moreSwatches` | `number` | — | Additional swatch count |
+| `onClick` | `() => void` | — | Card click handler |
+
+## Visual reference
+
+### Default variant (220px wide)
+- Image area: full width, 136:181 aspect ratio
+- Badge: bottom-left overlay on image
+- Swatches: 20px circles with 4px ring padding, first has active outline
+- Product name: 16px neutral gray
+- Price: stacked (original strikethrough → discount → sale)
+- Marketing flag: 16px gray
+- Star rating: 14px filled/outline stars + review count link
+
+### Mini variant (326px wide)
+- 60×80px rounded image thumbnail on the left
+- Product name + inline price on the right
+
+## Examples
+
+Mini card for recently viewed:
+
+```jsx
+<ProductCard
+  variant="mini"
+  imageUrl="/thumb.jpg"
+  name="Relaxed Fit Jeans"
+  originalPrice="$59.95"
+  salePrice="$39.99"
+  discount="33% off"
+/>
+```
+
+## Rules
+
+- Always provide `name` — it's the only required field.
+- Swatches only render in the default variant.
+- If no `imageUrl` is given, a gray placeholder is rendered.
+- The card width can be overridden via `className` for responsive grids.

package/guidelines/components/radio.md

@@ -0,0 +1,92 @@
+# Radio
+
+## When to use
+
+Use `Radio` when the user must select exactly one option from a list of mutually-exclusive choices. For multi-select, use `Checkbox` instead.
+
+```tsx
+import { Radio, RadioGroup } from '@stoovles/gap-kit'
+```
+
+## Radio Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `ReactNode` | — | Text label displayed next to the radio |
+| `error` | `boolean` | `false` | Renders the radio in the error state (red) |
+| `disabled` | `boolean` | `false` | Grays out the radio and prevents interaction |
+| `checked` | `boolean` | — | Controlled checked state |
+| `value` | `string` | — | Value submitted with the form |
+| `onChange` | `(e) => void` | — | Change handler |
+| `className` | `string` | — | Additional CSS class |
+
+All standard `<input>` HTML attributes are also supported.
+
+## RadioGroup Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | `Radio` components |
+| `name` | `string` | — | Shared `name` attribute automatically applied to all child radios |
+| `label` | `string` | — | Group legend (optional) |
+| `error` | `boolean` | `false` | Applies error styling to the group |
+| `className` | `string` | — | Additional CSS class |
+
+## Visual reference
+
+| State | Unselected | Selected |
+|---|---|---|
+| Default | White circle, black 1px border | White circle, black border, dark gray inner dot (#595959) |
+| Error | White circle, red border | White circle, red border, red inner dot (#d00000) |
+| Disabled | White circle, gray border (#ededed) | White circle, gray border, gray inner dot (#ededed) |
+
+## Sizing
+
+- Outer circle: 20px inside a 24px touch target
+- Inner dot (selected): 10px
+- Gap between radio and label: 4px
+- Group spacing between items: 24px
+- Group vertical padding: 16px
+- Font: Gap Sans, 16px, weight 400
+
+## Examples
+
+```tsx
+{/* RadioGroup with controlled value */}
+<RadioGroup name="shipping" label="Shipping method">
+  <Radio
+    label="Standard (5-7 days)"
+    value="standard"
+    checked={shipping === 'standard'}
+    onChange={() => setShipping('standard')}
+  />
+  <Radio
+    label="Express (2-3 days)"
+    value="express"
+    checked={shipping === 'express'}
+    onChange={() => setShipping('express')}
+  />
+  <Radio
+    label="Next day"
+    value="nextday"
+    checked={shipping === 'nextday'}
+    onChange={() => setShipping('nextday')}
+  />
+</RadioGroup>
+
+{/* Error state */}
+<RadioGroup name="size" label="Select a size" error>
+  <Radio label="S" value="s" error />
+  <Radio label="M" value="m" error />
+  <Radio label="L" value="l" error />
+</RadioGroup>
+```
+
+## Rules
+
+- Always wrap radios in a `RadioGroup` with a shared `name`
+- Provide a `label` on the group via `<legend>` for accessibility
+- Always provide a `label` on each radio — if no visible text, use `aria-label`
+- Pre-select a default option whenever possible
+- Never use a single radio — use a checkbox for boolean toggles
+- Do not mix error and disabled states in the same group