npm - bareframe - Versions diffs - 0.1.0 → 0.1.2 - Mend

bareframe 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (154) hide show

package/README.md +179 -0
package/dist/bareframe.min.js +119 -0
package/dist/components/accordion.js +66 -0
package/dist/components/autocomplete.css +78 -15
package/dist/components/autocomplete.js +220 -10
package/dist/components/avatar.css +129 -17
package/dist/components/avatar.js +47 -10
package/dist/components/breadcrumb.css +63 -17
package/dist/components/breadcrumb.js +140 -5
package/dist/components/button.css +4 -0
package/dist/components/button.js +95 -15
package/dist/components/chart.css +163 -14
package/dist/components/chart.js +59 -4
package/dist/components/checkbox.css +43 -1
package/dist/components/checkbox.js +98 -5
package/dist/components/dialog.css +95 -0
package/dist/components/dialog.js +172 -4
package/dist/components/divider.css +18 -22
package/dist/components/divider.js +31 -3
package/dist/components/drawer.css +68 -18
package/dist/components/drawer.js +84 -4
package/dist/components/edge.css +54 -0
package/dist/components/edge.js +55 -0
package/dist/components/file-upload.css +72 -3
package/dist/components/file-upload.js +186 -4
package/dist/components/input.css +59 -0
package/dist/components/input.js +369 -4
package/dist/components/list.css +11 -0
package/dist/components/list.js +45 -0
package/dist/components/menu.css +20 -0
package/dist/components/menu.js +144 -0
package/dist/components/modal.css +30 -17
package/dist/components/modal.js +68 -4
package/dist/components/nav.css +39 -0
package/dist/components/progress.css +196 -0
package/dist/components/progress.js +304 -0
package/dist/components/radio.css +35 -1
package/dist/components/radio.js +86 -5
package/dist/components/range.css +91 -0
package/dist/components/range.js +250 -0
package/dist/components/select.css +35 -1
package/dist/components/select.js +255 -4
package/dist/components/skeleton.css +108 -21
package/dist/components/skeleton.js +57 -4
package/dist/components/tab.css +9 -1
package/dist/components/tab.js +66 -1
package/dist/components/tag.css +36 -3
package/dist/components/tag.js +32 -0
package/dist/components/toast.css +113 -0
package/dist/components/toast.js +265 -4
package/dist/components/toggle.css +53 -0
package/dist/components/toggle.js +73 -5
package/dist/components/wizard.css +79 -14
package/dist/components/wizard.js +141 -4
package/dist/index.js +5147 -110
package/dist/manifest.json +5 -42
package/dist/themes/aurora.css +47 -0
package/dist/themes/dark.css +12 -2
package/dist/themes/desert.css +37 -0
package/dist/themes/future.css +47 -0
package/dist/themes/layout.css +191 -0
package/dist/themes/light.css +12 -0
package/dist/themes/matrix.css +37 -0
package/dist/themes/modern.css +64 -0
package/dist/themes/nature.css +47 -0
package/dist/themes/nebula.css +37 -0
package/dist/themes/noir.css +37 -0
package/dist/themes/oceanic.css +37 -0
package/dist/themes/retro.css +47 -0
package/dist/themes/simple.css +47 -0
package/dist/themes/sprint.css +12 -0
package/dist/themes/sunrise.css +37 -0
package/dist/themes/system.css +13 -0
package/package.json +9 -2
package/dist/components/alert.css +0 -30
package/dist/components/alert.js +0 -31
package/dist/components/badge.css +0 -30
package/dist/components/badge.js +0 -31
package/dist/components/banner.css +0 -30
package/dist/components/banner.js +0 -31
package/dist/components/bar-chart.css +0 -30
package/dist/components/bar-chart.js +0 -31
package/dist/components/bottom-sheet.css +0 -30
package/dist/components/bottom-sheet.js +0 -31
package/dist/components/button-group.css +0 -30
package/dist/components/button-group.js +0 -31
package/dist/components/chip.css +0 -30
package/dist/components/chip.js +0 -31
package/dist/components/color-picker.css +0 -30
package/dist/components/color-picker.js +0 -31
package/dist/components/context-menu.css +0 -30
package/dist/components/context-menu.js +0 -31
package/dist/components/donut-chart.css +0 -30
package/dist/components/donut-chart.js +0 -31
package/dist/components/expanded-panel.css +0 -30
package/dist/components/expanded-panel.js +0 -31
package/dist/components/footer.css +0 -30
package/dist/components/footer.js +0 -31
package/dist/components/gantt-chart.css +0 -30
package/dist/components/gantt-chart.js +0 -31
package/dist/components/gauge.css +0 -30
package/dist/components/gauge.js +0 -31
package/dist/components/graph.css +0 -30
package/dist/components/graph.js +0 -31
package/dist/components/header.css +0 -30
package/dist/components/header.js +0 -31
package/dist/components/heatmap.css +0 -30
package/dist/components/heatmap.js +0 -31
package/dist/components/line-chart.css +0 -30
package/dist/components/line-chart.js +0 -31
package/dist/components/list-item.css +0 -30
package/dist/components/list-item.js +0 -31
package/dist/components/menu-item.css +0 -30
package/dist/components/menu-item.js +0 -31
package/dist/components/multi-select.css +0 -30
package/dist/components/multi-select.js +0 -31
package/dist/components/notification.css +0 -30
package/dist/components/notification.js +0 -31
package/dist/components/pie-chart.css +0 -30
package/dist/components/pie-chart.js +0 -31
package/dist/components/popover.css +0 -30
package/dist/components/popover.js +0 -31
package/dist/components/progress-bar.css +0 -30
package/dist/components/progress-bar.js +0 -31
package/dist/components/progress-circle.css +0 -30
package/dist/components/progress-circle.js +0 -31
package/dist/components/radio-group.css +0 -30
package/dist/components/radio-group.js +0 -31
package/dist/components/range-slider.css +0 -30
package/dist/components/range-slider.js +0 -31
package/dist/components/rating.css +0 -30
package/dist/components/rating.js +0 -31
package/dist/components/sheet.css +0 -30
package/dist/components/sheet.js +0 -31
package/dist/components/slider.css +0 -30
package/dist/components/slider.js +0 -31
package/dist/components/snackbar.css +0 -30
package/dist/components/snackbar.js +0 -31
package/dist/components/sparkline.css +0 -30
package/dist/components/sparkline.js +0 -31
package/dist/components/stepper.css +0 -30
package/dist/components/stepper.js +0 -31
package/dist/components/switch.css +0 -30
package/dist/components/switch.js +0 -31
package/dist/components/tab-group.css +0 -30
package/dist/components/tab-group.js +0 -31
package/dist/components/textfield.css +0 -30
package/dist/components/textfield.js +0 -31
package/dist/components/tooltip.css +0 -30
package/dist/components/tooltip.js +0 -31
package/dist/components/treemap.css +0 -30
package/dist/components/treemap.js +0 -31
package/dist/components/upload-dropzone.css +0 -30
package/dist/components/upload-dropzone.js +0 -31

package/README.md CHANGED Viewed

@@ -8,6 +8,12 @@ Lightweight, dependency-free Web Components for building reusable UI across appl
 npm install bareframe
 ```
+Links:
+- npm: https://www.npmjs.com/package/bareframe
+- GitHub Pages examples: https://samueldbines.github.io/bareframe/
+- Chart demo: https://samueldbines.github.io/bareframe/chart-test.html
 ## Package Usage
 Register everything:
@@ -16,6 +22,12 @@ Register everything:
 import 'bareframe';
 ```
+Single-file production bundle:
+```js
+import 'bareframe/min';
+```
 Or import one component:
 ```js
@@ -30,6 +42,124 @@ import 'bareframe/themes/system.css';
 `system` is the default/recommended theme for bareframe.
+Optional layout utilities:
+```js
+import 'bareframe/themes/layout.css';
+```
+Grid-style column spans are supported with a 12-column model:
+```html
+<div row>
+	<div col="3">Sidebar</div>
+	<div col="9">Main</div>
+</div>
+```
+If `col` has no value, it auto-shares available width with siblings.
+Alignment utilities:
+```html
+<div row="left">...</div>
+<div row="center">...</div>
+<div row="right">...</div>
+<div col="top">...</div>
+<div col="center">...</div>
+<div col="bottom">...</div>
+```
+Table/data-grid utilities:
+```html
+<div table dense>
+  <div thead>
+    <div tr><div th>ID</div><div th>Name</div></div>
+  </div>
+  <div tbody>
+    <div tr><div td>1</div><div td>Alpha</div></div>
+  </div>
+</div>
+```
+Skeleton can be used as a utility on any target element:
+```html
+<bf-card skeleton="1500">...</bf-card>
+<div skeleton="2s">...</div>
+```
+Typography utilities follow the same attribute pattern:
+```html
+<h1 typography="display">Dashboard</h1>
+<p typography="body">Body copy text.</p>
+<small typography="caption">Updated 2m ago</small>
+```
+Short boolean attributes are also supported:
+```html
+<small h1>Heading-sized small text</small> <span caption>Caption text</span>
+```
+Bareframe runtime defaults for all `bf-*` elements:
+- auto id assignment (and duplicate id collision repair)
+- `data-qa="test-<id>"` when missing
+- `data-translate="<html lang>"` when missing (defaults to `en` if `<html lang>` is not set)
+ID-driven controls for interactive components:
+```html
+<bf-button bf-open="account-modal">Open</bf-button>
+<bf-button bf-close="account-modal">Close</bf-button>
+<bf-button bf-toggle="account-modal">Toggle</bf-button>
+<bf-modal id="account-modal">...</bf-modal>
+```
+Accordion section control by id:
+```html
+<bf-button bf-open="docs:intro">Open intro</bf-button>
+<bf-accordion id="docs">
+	<section id="intro" title="Intro">...</section>
+</bf-accordion>
+```
+Group primitives (utility-first authoring):
+```html
+<bf-radio group="plan">Free</bf-radio>
+<bf-radio group="plan">Pro</bf-radio>
+<bf-button group="filters" multiple="2">A</bf-button>
+<bf-button group="filters" multiple="2">B</bf-button>
+<bf-button group="filters" multiple="2">C</bf-button>
+<bf-checkbox group="features" multiple="3">Logs</bf-checkbox>
+<bf-checkbox group="features" multiple="3">Alerts</bf-checkbox>
+```
+Menu/list item pattern:
+```html
+<bf-menu>
+	<div item>Profile</div>
+	<div item>Settings</div>
+</bf-menu>
+```
+Header/footer edge positioning (same API on both):
+```html
+<bf-edge sticky header>...</bf-edge> <bf-edge fixed footer>...</bf-edge>
+```
+You can also force placement with `position="top"` or `position="bottom"`.
 ## Why bareframe
 `bareframe` is built for one purpose: create components once and reuse them everywhere.
@@ -102,7 +232,20 @@ Theme files live in `themes/`:
 - `themes/light.css`
 - `themes/dark.css`
 - `themes/sprint.css`
+- `themes/retro.css`
+- `themes/modern.css`
+- `themes/simple.css`
+- `themes/nature.css`
+- `themes/future.css`
+- `themes/aurora.css`
+- `themes/nebula.css`
+- `themes/desert.css`
+- `themes/matrix.css`
+- `themes/noir.css`
+- `themes/sunrise.css`
+- `themes/oceanic.css`
 - `themes/system.css` (follows OS preference with `prefers-color-scheme`)
+- `themes/layout.css` (`[row]` and `[col]` utility attributes)
 Use `system` as the default theme for apps:
@@ -181,13 +324,49 @@ All generated component demos are listed at:
 `http://localhost:8080/examples/index.html`
+Hosted examples:
+`https://samueldbines.github.io/bareframe/`
+## npm Publish Checklist
+1. Update version:
+```bash
+npm version patch
+```
+2. Build and verify package contents:
+```bash
+npm run build
+npm run pack:preview
+```
+3. Publish to npm:
+```bash
+npm publish
+```
+4. Push version tags:
+```bash
+git push origin main --follow-tags
+```
 ## Build Package
 ```bash
 npm run build
+npm run watch
 npm run pack:preview
 ```
+Production bundle output:
+- `dist/bareframe.min.js` (single minified JS file with inlined component CSS)
 ## Status
 Early development. API and component patterns may evolve as the system grows.