create-flowmo 1.0.0 → 1.1.0

package/skills/outsystems-ui/references/widgets.md

@@ -1,270 +0,0 @@
-# OutSystems UI — Core Widgets (16)
-
-The fundamental input and display widgets used in every OutSystems screen.
-
-## Button
-
-Primary interaction element. See the Buttons section in SKILL.md for the full type/size/shape matrix.
-
-```html
-<button class="btn btn-primary">{{label}}</button>
-```
-
-**Types**: `.btn` (secondary), `.btn-primary`, `.btn-cancel`, `.btn-success`, `.btn-error`
-**Sizes**: `.btn-small`, default, `.btn-large`
-
-## Button Group
-
-Groups related buttons together with connected borders.
-
-```html
-<div class="btn-group">
-  <button class="btn active">{{option-1}}</button>
-  <button class="btn">{{option-2}}</button>
-  <button class="btn">{{option-3}}</button>
-</div>
-```
-
-**Mandatory classes**: `.btn-group`
-**Active state**: `.active` on the selected button.
-
-## Checkbox
-
-Boolean toggle input.
-
-```html
-<div class="checkbox">
-  <input type="checkbox" id="cb-1" />
-  <label for="cb-1">{{label}}</label>
-</div>
-```
-
-**Mandatory classes**: `.checkbox`
-**Disabled**: Add `disabled` attribute to input.
-
-## Dropdown
-
-Selection input with expandable option list.
-
-```html
-<div class="dropdown">
-  <select class="dropdown-select">
-    <option value="">{{placeholder}}</option>
-    <option value="1">{{option-1}}</option>
-    <option value="2">{{option-2}}</option>
-  </select>
-</div>
-```
-
-**Mandatory classes**: `.dropdown`
-
-## Feedback Message
-
-Inline validation or status message, typically shown below form inputs.
-
-```html
-<div class="feedback-message feedback-message--{type}">
-  {{message}}
-</div>
-```
-
-**Types**: `info`, `success`, `warning`, `error`
-**Mandatory classes**: `.feedback-message`, `.feedback-message--{type}`
-
-## Form
-
-Container for form inputs with consistent spacing and validation patterns.
-
-```html
-<form class="form">
-  <div class="form-group">
-    <label class="form-label">{{label}}</label>
-    <input type="text" class="form-control" placeholder="{{placeholder}}" />
-    <span class="form-error">{{error-message}}</span>
-  </div>
-  <div class="form-group">
-    <label class="form-label">{{label-2}}</label>
-    <textarea class="form-control"></textarea>
-  </div>
-  <div class="form-actions">
-    <button class="btn">Cancel</button>
-    <button class="btn btn-primary">Submit</button>
-  </div>
-</form>
-```
-
-**Mandatory classes**: `.form`, `.form-group`, `.form-label`, `.form-control`
-**Validation**: `.form-error` for error messages, add `.error` to `.form-group` to highlight the field.
-**Actions**: `.form-actions` for the button row (typically right-aligned).
-
-## Input
-
-Text input field. Always wrap in a `.form-group`.
-
-```html
-<div class="form-group">
-  <label class="form-label">{{label}}</label>
-  <input type="text" class="form-control" placeholder="{{placeholder}}" />
-</div>
-```
-
-**Mandatory classes**: `.form-control`
-**Input types**: `text`, `email`, `password`, `number`, `tel`, `url`, `search`, `date`
-**Disabled**: Add `disabled` attribute.
-**Read-only**: Add `readonly` attribute.
-
-## Link
-
-Styled hyperlink.
-
-```html
-<a class="link" href="{{url}}">{{label}}</a>
-```
-
-**Mandatory classes**: `.link`
-**Variants**: `.link--underline` for always-underlined style.
-
-## List
-
-Vertical list container for items.
-
-```html
-<div class="list">
-  <div class="list-item">{{item-1}}</div>
-  <div class="list-item">{{item-2}}</div>
-  <div class="list-item">{{item-3}}</div>
-</div>
-```
-
-**Mandatory classes**: `.list`, `.list-item`
-**Dividers**: Add `.list--dividers` to the list container for border separators between items.
-
-## Popover
-
-Small overlay content that appears near a trigger element.
-
-```html
-<div class="osui-popover">
-  <div class="osui-popover__trigger">{{trigger}}</div>
-  <div class="osui-popover__content">
-    <div class="osui-popover__header">{{title}}</div>
-    <div class="osui-popover__body">{{content}}</div>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.osui-popover`
-**Position**: `.osui-popover--top`, `.osui-popover--bottom`, `.osui-popover--left`, `.osui-popover--right`
-
-## Popup
-
-Modal dialog overlay.
-
-```html
-<div class="osui-popup">
-  <div class="osui-popup__overlay"></div>
-  <div class="osui-popup__container">
-    <div class="osui-popup__header">
-      <h4>{{title}}</h4>
-      <span class="osui-popup__close"></span>
-    </div>
-    <div class="osui-popup__content">{{content}}</div>
-    <div class="osui-popup__footer">
-      <button class="btn">Cancel</button>
-      <button class="btn btn-primary">Confirm</button>
-    </div>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.osui-popup`, `.osui-popup__container`
-
-## Radio Group
-
-Single-selection from a group of options.
-
-```html
-<div class="radio-group">
-  <div class="radio">
-    <input type="radio" name="group-1" id="r-1" />
-    <label for="r-1">{{option-1}}</label>
-  </div>
-  <div class="radio">
-    <input type="radio" name="group-1" id="r-2" />
-    <label for="r-2">{{option-2}}</label>
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.radio-group`, `.radio`
-**Note**: All radio inputs in a group must share the same `name` attribute.
-
-## Switch
-
-Toggle switch (on/off).
-
-```html
-<div class="switch">
-  <input type="checkbox" id="sw-1" />
-  <label for="sw-1">{{label}}</label>
-</div>
-```
-
-**Mandatory classes**: `.switch`
-**Note**: Structurally similar to checkbox but styled as a sliding toggle.
-
-## Table
-
-Data table for displaying records.
-
-```html
-<table class="table">
-  <thead>
-    <tr>
-      <th>{{header-1}}</th>
-      <th>{{header-2}}</th>
-      <th>{{header-3}}</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{cell-1}}</td>
-      <td>{{cell-2}}</td>
-      <td>{{cell-3}}</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-**Mandatory classes**: `.table`
-**Variants**: `.table--striped` (alternating row colors), `.table--hover` (row highlight on hover), `.table--compact` (reduced padding)
-
-## TextArea
-
-Multi-line text input.
-
-```html
-<div class="form-group">
-  <label class="form-label">{{label}}</label>
-  <textarea class="form-control" rows="4" placeholder="{{placeholder}}"></textarea>
-</div>
-```
-
-**Mandatory classes**: `.form-control`
-**Note**: Uses the same `.form-control` class as Input.
-
-## Upload
-
-File upload input.
-
-```html
-<div class="upload">
-  <div class="upload-area">
-    <span class="upload-icon">{{icon}}</span>
-    <span class="upload-text">Drag and drop or click to upload</span>
-    <input type="file" class="upload-input" />
-  </div>
-</div>
-```
-
-**Mandatory classes**: `.upload`, `.upload-area`, `.upload-input`