@panphora/bevel 0.1.0
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.
- package/LICENSE +16 -0
- package/README.md +226 -0
- package/bevel-fonts.css +16 -0
- package/bevel.css +3075 -0
- package/bevel.js +2126 -0
- package/dist/react/components/activity-feed.d.ts +89 -0
- package/dist/react/components/activity-feed.js +54 -0
- package/dist/react/components/alert-dialog.d.ts +14 -0
- package/dist/react/components/alert-dialog.js +19 -0
- package/dist/react/components/app-shell.d.ts +98 -0
- package/dist/react/components/app-shell.js +86 -0
- package/dist/react/components/app-toolbar.d.ts +19 -0
- package/dist/react/components/app-toolbar.js +22 -0
- package/dist/react/components/avatar-group.d.ts +67 -0
- package/dist/react/components/avatar-group.js +49 -0
- package/dist/react/components/badge-and-pill.d.ts +34 -0
- package/dist/react/components/badge-and-pill.js +12 -0
- package/dist/react/components/breadcrumbs.d.ts +56 -0
- package/dist/react/components/breadcrumbs.js +44 -0
- package/dist/react/components/bulk-bar.d.ts +22 -0
- package/dist/react/components/bulk-bar.js +59 -0
- package/dist/react/components/button.d.ts +15 -0
- package/dist/react/components/button.js +20 -0
- package/dist/react/components/callout-and-hint.d.ts +17 -0
- package/dist/react/components/callout-and-hint.js +8 -0
- package/dist/react/components/checkbox.d.ts +5 -0
- package/dist/react/components/checkbox.js +13 -0
- package/dist/react/components/chip.d.ts +149 -0
- package/dist/react/components/chip.js +29 -0
- package/dist/react/components/code-block.d.ts +50 -0
- package/dist/react/components/code-block.js +77 -0
- package/dist/react/components/code-editor.d.ts +122 -0
- package/dist/react/components/code-editor.js +695 -0
- package/dist/react/components/column-manager.d.ts +28 -0
- package/dist/react/components/column-manager.js +85 -0
- package/dist/react/components/combobox.d.ts +32 -0
- package/dist/react/components/combobox.js +37 -0
- package/dist/react/components/data-grid.d.ts +108 -0
- package/dist/react/components/data-grid.js +159 -0
- package/dist/react/components/data-table.d.ts +2 -0
- package/dist/react/components/data-table.js +6 -0
- package/dist/react/components/date.d.ts +23 -0
- package/dist/react/components/date.js +11 -0
- package/dist/react/components/details.d.ts +13 -0
- package/dist/react/components/details.js +20 -0
- package/dist/react/components/dialog.d.ts +74 -0
- package/dist/react/components/dialog.js +31 -0
- package/dist/react/components/diff-view.d.ts +73 -0
- package/dist/react/components/diff-view.js +68 -0
- package/dist/react/components/documents.d.ts +70 -0
- package/dist/react/components/documents.js +10 -0
- package/dist/react/components/drawer.d.ts +45 -0
- package/dist/react/components/drawer.js +35 -0
- package/dist/react/components/editable-grid-cells.d.ts +32 -0
- package/dist/react/components/editable-grid-cells.js +116 -0
- package/dist/react/components/eyebrow-kicker-lede-pull-quote.d.ts +39 -0
- package/dist/react/components/eyebrow-kicker-lede-pull-quote.js +12 -0
- package/dist/react/components/field.d.ts +32 -0
- package/dist/react/components/field.js +27 -0
- package/dist/react/components/file-tree.d.ts +75 -0
- package/dist/react/components/file-tree.js +247 -0
- package/dist/react/components/file.d.ts +43 -0
- package/dist/react/components/file.js +73 -0
- package/dist/react/components/files-table.d.ts +174 -0
- package/dist/react/components/files-table.js +237 -0
- package/dist/react/components/filter-builder.d.ts +37 -0
- package/dist/react/components/filter-builder.js +109 -0
- package/dist/react/components/form-error-summary.d.ts +16 -0
- package/dist/react/components/form-error-summary.js +49 -0
- package/dist/react/components/icon-button.d.ts +8 -0
- package/dist/react/components/icon-button.js +14 -0
- package/dist/react/components/icon.d.ts +7 -0
- package/dist/react/components/icon.js +15 -0
- package/dist/react/components/image.d.ts +72 -0
- package/dist/react/components/image.js +24 -0
- package/dist/react/components/inline-edit.d.ts +70 -0
- package/dist/react/components/inline-edit.js +149 -0
- package/dist/react/components/input.d.ts +29 -0
- package/dist/react/components/input.js +20 -0
- package/dist/react/components/kanban-board.d.ts +140 -0
- package/dist/react/components/kanban-board.js +374 -0
- package/dist/react/components/layout.d.ts +51 -0
- package/dist/react/components/layout.js +28 -0
- package/dist/react/components/list.d.ts +28 -0
- package/dist/react/components/list.js +6 -0
- package/dist/react/components/masthead-and-verdict.d.ts +60 -0
- package/dist/react/components/masthead-and-verdict.js +8 -0
- package/dist/react/components/menu.d.ts +26 -0
- package/dist/react/components/menu.js +31 -0
- package/dist/react/components/multi-select-picker.d.ts +49 -0
- package/dist/react/components/multi-select-picker.js +20 -0
- package/dist/react/components/note.d.ts +33 -0
- package/dist/react/components/note.js +8 -0
- package/dist/react/components/number-field.d.ts +16 -0
- package/dist/react/components/number-field.js +17 -0
- package/dist/react/components/pagination.d.ts +45 -0
- package/dist/react/components/pagination.js +87 -0
- package/dist/react/components/persistent-action-banner.d.ts +71 -0
- package/dist/react/components/persistent-action-banner.js +39 -0
- package/dist/react/components/popconfirm.d.ts +42 -0
- package/dist/react/components/popconfirm.js +59 -0
- package/dist/react/components/popover.d.ts +16 -0
- package/dist/react/components/popover.js +21 -0
- package/dist/react/components/progress-and-gauge.d.ts +44 -0
- package/dist/react/components/progress-and-gauge.js +19 -0
- package/dist/react/components/radio.d.ts +7 -0
- package/dist/react/components/radio.js +13 -0
- package/dist/react/components/rich-text-toolbar.d.ts +26 -0
- package/dist/react/components/rich-text-toolbar.js +64 -0
- package/dist/react/components/rows-and-card.d.ts +88 -0
- package/dist/react/components/rows-and-card.js +10 -0
- package/dist/react/components/save-status-indicator.d.ts +11 -0
- package/dist/react/components/save-status-indicator.js +33 -0
- package/dist/react/components/segmented-control.d.ts +21 -0
- package/dist/react/components/segmented-control.js +15 -0
- package/dist/react/components/select.d.ts +29 -0
- package/dist/react/components/select.js +29 -0
- package/dist/react/components/selectable-cards.d.ts +30 -0
- package/dist/react/components/selectable-cards.js +29 -0
- package/dist/react/components/settings-rows.d.ts +51 -0
- package/dist/react/components/settings-rows.js +8 -0
- package/dist/react/components/sidebar-nav.d.ts +77 -0
- package/dist/react/components/sidebar-nav.js +41 -0
- package/dist/react/components/skeleton-and-empty.d.ts +51 -0
- package/dist/react/components/skeleton-and-empty.js +14 -0
- package/dist/react/components/slider.d.ts +19 -0
- package/dist/react/components/slider.js +17 -0
- package/dist/react/components/small-charts.d.ts +60 -0
- package/dist/react/components/small-charts.js +76 -0
- package/dist/react/components/sortable.d.ts +30 -0
- package/dist/react/components/sortable.js +85 -0
- package/dist/react/components/split-button.d.ts +38 -0
- package/dist/react/components/split-button.js +43 -0
- package/dist/react/components/split-panes.d.ts +35 -0
- package/dist/react/components/split-panes.js +102 -0
- package/dist/react/components/stat-tiles.d.ts +54 -0
- package/dist/react/components/stat-tiles.js +8 -0
- package/dist/react/components/steps.d.ts +11 -0
- package/dist/react/components/steps.js +13 -0
- package/dist/react/components/switch.d.ts +6 -0
- package/dist/react/components/switch.js +13 -0
- package/dist/react/components/table.d.ts +61 -0
- package/dist/react/components/table.js +6 -0
- package/dist/react/components/tabs.d.ts +7 -0
- package/dist/react/components/tabs.js +13 -0
- package/dist/react/components/tags.d.ts +33 -0
- package/dist/react/components/tags.js +83 -0
- package/dist/react/components/textarea.d.ts +10 -0
- package/dist/react/components/textarea.js +6 -0
- package/dist/react/components/toast.d.ts +35 -0
- package/dist/react/components/toast.js +90 -0
- package/dist/react/components/tooltip-and-key.d.ts +20 -0
- package/dist/react/components/tooltip-and-key.js +20 -0
- package/dist/react/components/tree-view.d.ts +34 -0
- package/dist/react/components/tree-view.js +118 -0
- package/dist/react/components/upload-dropzone.d.ts +92 -0
- package/dist/react/components/upload-dropzone.js +116 -0
- package/dist/react/components/wizard-shell.d.ts +78 -0
- package/dist/react/components/wizard-shell.js +176 -0
- package/dist/react/fonts.css.d.ts +1 -0
- package/dist/react/index.d.ts +76 -0
- package/dist/react/index.js +77 -0
- package/dist/react/integrations/quickcrop.d.ts +58 -0
- package/dist/react/integrations/quickcrop.js +137 -0
- package/dist/react/integrations/richclay.d.ts +43 -0
- package/dist/react/integrations/richclay.js +129 -0
- package/dist/react/internal/classes.d.ts +3 -0
- package/dist/react/internal/classes.js +10 -0
- package/dist/react/internal/close-mark.d.ts +1 -0
- package/dist/react/internal/close-mark.js +10 -0
- package/dist/react/internal/controllable-state.d.ts +9 -0
- package/dist/react/internal/controllable-state.js +22 -0
- package/dist/react/internal/drop-effect.d.ts +28 -0
- package/dist/react/internal/drop-effect.js +8 -0
- package/dist/react/internal/form-reset.d.ts +2 -0
- package/dist/react/internal/form-reset.js +22 -0
- package/dist/react/internal/format.d.ts +1 -0
- package/dist/react/internal/format.js +14 -0
- package/dist/react/internal/link.d.ts +2 -0
- package/dist/react/internal/link.js +8 -0
- package/dist/react/internal/part.d.ts +20 -0
- package/dist/react/internal/part.js +47 -0
- package/dist/react/internal/pointer-session.d.ts +8 -0
- package/dist/react/internal/pointer-session.js +60 -0
- package/dist/react/internal/refs.d.ts +2 -0
- package/dist/react/internal/refs.js +22 -0
- package/dist/react/internal/rich-text.d.ts +28 -0
- package/dist/react/internal/rich-text.js +4 -0
- package/dist/react/internal/table-context.d.ts +39 -0
- package/dist/react/internal/table-context.js +12 -0
- package/dist/react/internal/use-object-url.d.ts +1 -0
- package/dist/react/internal/use-object-url.js +15 -0
- package/dist/react/layout.css +274 -0
- package/dist/react/layout.css.d.ts +1 -0
- package/dist/react/models/filter.d.ts +31 -0
- package/dist/react/models/filter.js +79 -0
- package/dist/react/models/kanban.d.ts +51 -0
- package/dist/react/models/kanban.js +35 -0
- package/dist/react/models/reorder.d.ts +9 -0
- package/dist/react/models/reorder.js +23 -0
- package/dist/react/models/table.d.ts +85 -0
- package/dist/react/models/table.js +144 -0
- package/dist/react/models/tree.d.ts +16 -0
- package/dist/react/models/tree.js +26 -0
- package/dist/react/provider.d.ts +18 -0
- package/dist/react/provider.js +31 -0
- package/dist/react/recipes/context-hypercms.d.ts +17 -0
- package/dist/react/recipes/context-hypercms.js +71 -0
- package/dist/react/recipes/context-quickcrop.d.ts +8 -0
- package/dist/react/recipes/context-quickcrop.js +49 -0
- package/dist/react/theme.css +8004 -0
- package/dist/react/theme.css.d.ts +1 -0
- package/examples/README.md +34 -0
- package/examples/components/activity-feed.html +28 -0
- package/examples/components/app-shell.html +12 -0
- package/examples/components/app-toolbar.html +38 -0
- package/examples/components/avatar-group.html +27 -0
- package/examples/components/breadcrumbs.html +26 -0
- package/examples/components/bulk-bar.html +22 -0
- package/examples/components/code-block.html +12 -0
- package/examples/components/code-editor.html +25 -0
- package/examples/components/column-manager.html +9 -0
- package/examples/components/combobox.html +13 -0
- package/examples/components/context-hypercms.css +41 -0
- package/examples/components/context-hypercms.html +40 -0
- package/examples/components/context-hypercms.js +62 -0
- package/examples/components/context-quickcrop.html +137 -0
- package/examples/components/diff-view.html +9 -0
- package/examples/components/drawer.html +11 -0
- package/examples/components/editable-grid-cells.html +9 -0
- package/examples/components/file-browser.html +53 -0
- package/examples/components/file-tree.html +34 -0
- package/examples/components/files-table.html +80 -0
- package/examples/components/filter-builder.html +11 -0
- package/examples/components/form-error-summary.html +11 -0
- package/examples/components/index.html +51 -0
- package/examples/components/inline-edit.html +42 -0
- package/examples/components/kanban-board.html +42 -0
- package/examples/components/manifest.json +3279 -0
- package/examples/components/modal.html +11 -0
- package/examples/components/multi-select-picker.html +13 -0
- package/examples/components/pagination.html +32 -0
- package/examples/components/persistent-action-banner.html +23 -0
- package/examples/components/popconfirm.html +13 -0
- package/examples/components/popover-menu.html +13 -0
- package/examples/components/reference/baseline/DECISIONS.md +85 -0
- package/examples/components/reference/baseline/README.md +58 -0
- package/examples/components/reference/baseline/bevel-fonts.css +16 -0
- package/examples/components/reference/baseline/bevel.css +1339 -0
- package/examples/components/reference/baseline/bevel.js +496 -0
- package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-mono.txt +93 -0
- package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-sans.txt +93 -0
- package/examples/components/reference/baseline/fonts/LICENSE-newsreader.txt +93 -0
- package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
- package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
- package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
- package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-400-italic.woff2 +0 -0
- package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
- package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
- package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
- package/examples/components/reference/baseline/fonts/newsreader-latin-opsz-italic.woff2 +0 -0
- package/examples/components/reference/baseline/fonts/newsreader-latin-opsz-normal.woff2 +0 -0
- package/examples/components/reference/fable/IMPROVEMENTS.md +106 -0
- package/examples/components/reference/fable/PARENT-REPAIRS.md +17 -0
- package/examples/components/reference/fable/__pycache__/build_repairs.cpython-311.pyc +0 -0
- package/examples/components/reference/fable/__pycache__/kanban.cpython-311.pyc +0 -0
- package/examples/components/reference/fable/as-authored/IMPROVEMENTS-completed.md +106 -0
- package/examples/components/reference/fable/as-authored/base-astra.css +17 -0
- package/examples/components/reference/fable/as-authored/base-parent.css +416 -0
- package/examples/components/reference/fable/as-authored/build.py +858 -0
- package/examples/components/reference/fable/as-authored/fable.css +823 -0
- package/examples/components/reference/fable/as-authored/kanban-completed.css +235 -0
- package/examples/components/reference/fable/as-authored/kanban-completed.html +53 -0
- package/examples/components/reference/fable/as-authored/kanban-completed.py +212 -0
- package/examples/components/reference/fable/as-authored/kanban.py +207 -0
- package/examples/components/reference/fable/base-astra.css +17 -0
- package/examples/components/reference/fable/base-parent.css +416 -0
- package/examples/components/reference/fable/build.py +858 -0
- package/examples/components/reference/fable/build_repairs.py +25 -0
- package/examples/components/reference/fable/components/activity-feed.html +3 -0
- package/examples/components/reference/fable/components/app-toolbar.html +3 -0
- package/examples/components/reference/fable/components/avatar-group.html +4 -0
- package/examples/components/reference/fable/components/breadcrumbs.html +3 -0
- package/examples/components/reference/fable/components/code-block.html +9 -0
- package/examples/components/reference/fable/components/column-manager.html +3 -0
- package/examples/components/reference/fable/components/combobox.html +6 -0
- package/examples/components/reference/fable/components/context-hypercms.html +3 -0
- package/examples/components/reference/fable/components/context-quickcrop.html +4 -0
- package/examples/components/reference/fable/components/diff-view.html +13 -0
- package/examples/components/reference/fable/components/drawer.html +3 -0
- package/examples/components/reference/fable/components/editable-grid-cells.html +3 -0
- package/examples/components/reference/fable/components/filter-builder.html +3 -0
- package/examples/components/reference/fable/components/form-error-summary.html +4 -0
- package/examples/components/reference/fable/components/inline-edit.html +3 -0
- package/examples/components/reference/fable/components/kanban-board.html +53 -0
- package/examples/components/reference/fable/components/modal.html +3 -0
- package/examples/components/reference/fable/components/multi-select-picker.html +5 -0
- package/examples/components/reference/fable/components/pagination.html +3 -0
- package/examples/components/reference/fable/components/persistent-action-banner.html +4 -0
- package/examples/components/reference/fable/components/popconfirm.html +5 -0
- package/examples/components/reference/fable/components/popover-menu.html +3 -0
- package/examples/components/reference/fable/components/rich-text-toolbar.html +3 -0
- package/examples/components/reference/fable/components/save-status-indicator.html +2 -0
- package/examples/components/reference/fable/components/selectable-cards.html +3 -0
- package/examples/components/reference/fable/components/settings-rows.html +3 -0
- package/examples/components/reference/fable/components/sidebar-nav.html +4 -0
- package/examples/components/reference/fable/components/small-charts.html +5 -0
- package/examples/components/reference/fable/components/split-button.html +4 -0
- package/examples/components/reference/fable/components/split-panes.html +8 -0
- package/examples/components/reference/fable/components/stat-tiles.html +3 -0
- package/examples/components/reference/fable/components/toast-stack.html +5 -0
- package/examples/components/reference/fable/components/tree-view.html +4 -0
- package/examples/components/reference/fable/components/upload-dropzone.html +6 -0
- package/examples/components/reference/fable/components/wizard-shell.html +3 -0
- package/examples/components/reference/fable/coverage.json +414 -0
- package/examples/components/reference/fable/fable.css +823 -0
- package/examples/components/reference/fable/index.html +5 -0
- package/examples/components/reference/fable/kanban.css +237 -0
- package/examples/components/reference/fable/kanban.py +212 -0
- package/examples/components/reference/fable/parent-repairs.css +9 -0
- package/examples/components/reference/fixtures/data.json +102 -0
- package/examples/components/reference/fixtures/host.js +47 -0
- package/examples/components/reference/fixtures/static-host.js +39 -0
- package/examples/components/reference/fixtures/workspace.jpg +0 -0
- package/examples/components/reference/parent/CHANGES.md +179 -0
- package/examples/components/reference/parent/__pycache__/kanban.cpython-311.pyc +0 -0
- package/examples/components/reference/parent/base-astra.css +17 -0
- package/examples/components/reference/parent/base-parent.css +416 -0
- package/examples/components/reference/parent/build.py +148 -0
- package/examples/components/reference/parent/components/activity-feed.html +2 -0
- package/examples/components/reference/parent/components/app-toolbar.html +2 -0
- package/examples/components/reference/parent/components/avatar-group.html +4 -0
- package/examples/components/reference/parent/components/breadcrumbs.html +2 -0
- package/examples/components/reference/parent/components/code-block.html +8 -0
- package/examples/components/reference/parent/components/column-manager.html +2 -0
- package/examples/components/reference/parent/components/combobox.html +6 -0
- package/examples/components/reference/parent/components/context-hypercms.html +2 -0
- package/examples/components/reference/parent/components/context-quickcrop.html +4 -0
- package/examples/components/reference/parent/components/diff-view.html +4 -0
- package/examples/components/reference/parent/components/drawer.html +2 -0
- package/examples/components/reference/parent/components/editable-grid-cells.html +2 -0
- package/examples/components/reference/parent/components/filter-builder.html +2 -0
- package/examples/components/reference/parent/components/form-error-summary.html +2 -0
- package/examples/components/reference/parent/components/inline-edit.html +2 -0
- package/examples/components/reference/parent/components/kanban-board.html +84 -0
- package/examples/components/reference/parent/components/modal.html +2 -0
- package/examples/components/reference/parent/components/multi-select-picker.html +5 -0
- package/examples/components/reference/parent/components/pagination.html +2 -0
- package/examples/components/reference/parent/components/persistent-action-banner.html +4 -0
- package/examples/components/reference/parent/components/popconfirm.html +5 -0
- package/examples/components/reference/parent/components/popover-menu.html +2 -0
- package/examples/components/reference/parent/components/rich-text-toolbar.html +2 -0
- package/examples/components/reference/parent/components/save-status-indicator.html +2 -0
- package/examples/components/reference/parent/components/selectable-cards.html +2 -0
- package/examples/components/reference/parent/components/settings-rows.html +2 -0
- package/examples/components/reference/parent/components/sidebar-nav.html +4 -0
- package/examples/components/reference/parent/components/small-charts.html +2 -0
- package/examples/components/reference/parent/components/split-button.html +5 -0
- package/examples/components/reference/parent/components/split-panes.html +8 -0
- package/examples/components/reference/parent/components/stat-tiles.html +2 -0
- package/examples/components/reference/parent/components/toast-stack.html +5 -0
- package/examples/components/reference/parent/components/tree-view.html +4 -0
- package/examples/components/reference/parent/components/upload-dropzone.html +6 -0
- package/examples/components/reference/parent/components/wizard-shell.html +2 -0
- package/examples/components/reference/parent/coverage.json +414 -0
- package/examples/components/reference/parent/index.html +1 -0
- package/examples/components/reference/parent/kanban.css +114 -0
- package/examples/components/reference/parent/kanban.py +55 -0
- package/examples/components/reference/parent/refinement.css +53 -0
- package/examples/components/reference/selected/build.py +70 -0
- package/examples/components/reference/selected/components/activity-feed.html +3 -0
- package/examples/components/reference/selected/components/app-toolbar.html +3 -0
- package/examples/components/reference/selected/components/avatar-group.html +4 -0
- package/examples/components/reference/selected/components/breadcrumbs.html +3 -0
- package/examples/components/reference/selected/components/code-block.html +9 -0
- package/examples/components/reference/selected/components/column-manager.html +3 -0
- package/examples/components/reference/selected/components/combobox.html +6 -0
- package/examples/components/reference/selected/components/context-hypercms.html +3 -0
- package/examples/components/reference/selected/components/context-quickcrop.html +4 -0
- package/examples/components/reference/selected/components/diff-view.html +13 -0
- package/examples/components/reference/selected/components/drawer.html +3 -0
- package/examples/components/reference/selected/components/editable-grid-cells.html +3 -0
- package/examples/components/reference/selected/components/filter-builder.html +3 -0
- package/examples/components/reference/selected/components/form-error-summary.html +4 -0
- package/examples/components/reference/selected/components/inline-edit.html +3 -0
- package/examples/components/reference/selected/components/kanban-board.html +53 -0
- package/examples/components/reference/selected/components/modal.html +2 -0
- package/examples/components/reference/selected/components/multi-select-picker.html +5 -0
- package/examples/components/reference/selected/components/pagination.html +3 -0
- package/examples/components/reference/selected/components/persistent-action-banner.html +4 -0
- package/examples/components/reference/selected/components/popconfirm.html +5 -0
- package/examples/components/reference/selected/components/popover-menu.html +3 -0
- package/examples/components/reference/selected/components/rich-text-toolbar.html +3 -0
- package/examples/components/reference/selected/components/save-status-indicator.html +2 -0
- package/examples/components/reference/selected/components/selectable-cards.html +3 -0
- package/examples/components/reference/selected/components/settings-rows.html +3 -0
- package/examples/components/reference/selected/components/sidebar-nav.html +4 -0
- package/examples/components/reference/selected/components/small-charts.html +5 -0
- package/examples/components/reference/selected/components/split-button.html +4 -0
- package/examples/components/reference/selected/components/split-panes.html +8 -0
- package/examples/components/reference/selected/components/stat-tiles.html +3 -0
- package/examples/components/reference/selected/components/toast-stack.html +5 -0
- package/examples/components/reference/selected/components/tree-view.html +4 -0
- package/examples/components/reference/selected/components/upload-dropzone.html +6 -0
- package/examples/components/reference/selected/components/wizard-shell.html +3 -0
- package/examples/components/reference/selected/corrections.css +11 -0
- package/examples/components/reference/selected/coverage.json +413 -0
- package/examples/components/reference/selected/gallery-build.mjs +49 -0
- package/examples/components/reference/selected/gallery-spec.json +12 -0
- package/examples/components/reference/selected/index.html +1 -0
- package/examples/components/reference/selected/kanban-comparison.json +6 -0
- package/examples/components/reference/selected/manifest.json +476 -0
- package/examples/components/reference/sha256.json +142 -0
- package/examples/components/reference/sources/diagonal-close.svg +1 -0
- package/examples/components/reference/sources/hyperclay/public-assets/css/hyperclay-app-source.css +614 -0
- package/examples/components/reference/sources/hyperclay/public-assets/js/app.js +94 -0
- package/examples/components/reference/sources/hyperclayjs/src/ui/theModal.js +897 -0
- package/examples/components/reference/sources/hypercms/scripts/build-theme.js +203 -0
- package/examples/components/reference/sources/hypercms/src/anchor.js +24 -0
- package/examples/components/reference/sources/hypercms/src/apply-loop.js +167 -0
- package/examples/components/reference/sources/hypercms/src/diagnostics.js +44 -0
- package/examples/components/reference/sources/hypercms/src/enhance.js +173 -0
- package/examples/components/reference/sources/hypercms/src/events.js +955 -0
- package/examples/components/reference/sources/hypercms/src/form-builder.js +518 -0
- package/examples/components/reference/sources/hypercms/src/form-rules.js +208 -0
- package/examples/components/reference/sources/hypercms/src/hooks.js +100 -0
- package/examples/components/reference/sources/hypercms/src/hypercms-bundle.js +10 -0
- package/examples/components/reference/sources/hypercms/src/hypercms.js +347 -0
- package/examples/components/reference/sources/hypercms/src/morph.js +10 -0
- package/examples/components/reference/sources/hypercms/src/path.js +61 -0
- package/examples/components/reference/sources/hypercms/src/place.js +131 -0
- package/examples/components/reference/sources/hypercms/src/platform.js +131 -0
- package/examples/components/reference/sources/hypercms/src/refresh.js +87 -0
- package/examples/components/reference/sources/hypercms/src/richclay-bridge.js +140 -0
- package/examples/components/reference/sources/hypercms/src/row-identity.js +111 -0
- package/examples/components/reference/sources/hypercms/src/scaffold.js +10 -0
- package/examples/components/reference/sources/hypercms/src/session.js +303 -0
- package/examples/components/reference/sources/hypercms/src/shell.js +248 -0
- package/examples/components/reference/sources/hypercms/src/styles.css +298 -0
- package/examples/components/reference/sources/hypercms/src/targets.js +144 -0
- package/examples/components/reference/sources/hypercms/src/templates.js +656 -0
- package/examples/components/reference/sources/hypercms/src/theme/pixel-quiet.overrides.css +761 -0
- package/examples/components/reference/sources/hypercms/src/theme.generated.css +1772 -0
- package/examples/components/reference/sources/hypercms/src/toggle.js +666 -0
- package/examples/components/reference/sources/hypercms/src/unresolved.js +211 -0
- package/examples/components/reference/sources/hypercms/src/vendor/mirk.vendor.js +212 -0
- package/examples/components/reference/sources/hypercms/src/views/inline-layer.js +421 -0
- package/examples/components/reference/sources/hypercms/src/views/inline.js +1072 -0
- package/examples/components/reference/sources/hypercms/src/views/sidebar.js +97 -0
- package/examples/components/reference/sources/modal-reference.html +301 -0
- package/examples/components/reference/sources/quickcrop/quickcrop.css +124 -0
- package/examples/components/reference/sources/quickcrop/quickcrop.js +400 -0
- package/examples/components/reference/sources/richclay/richclay.css +416 -0
- package/examples/components/reference/sources/richclay/richclay.js +2962 -0
- package/examples/components/reference/sources/richclay/src/a11y.js +67 -0
- package/examples/components/reference/sources/richclay/src/browser-global.js +7 -0
- package/examples/components/reference/sources/richclay/src/buttons.js +254 -0
- package/examples/components/reference/sources/richclay/src/hyperclay.js +470 -0
- package/examples/components/reference/sources/richclay/src/normalize.js +380 -0
- package/examples/components/reference/sources/richclay/src/richclay.js +1356 -0
- package/examples/components/reference/sources/richclay/src/sanitize.js +189 -0
- package/examples/components/reference/sources/richclay/src/styles.js +23 -0
- package/examples/components/reference/sources/richclay/src/toolbar-float.js +175 -0
- package/examples/components/reference/sources/richclay/src/toolbar.js +394 -0
- package/examples/components/reference/sources/richclay/src/vendor-bundle.js +15 -0
- package/examples/components/reference/sources/richclay/vendor/DOMPURIFY-LICENSE +202 -0
- package/examples/components/reference/sources/richclay/vendor/DOMPURIFY-LICENSE-MPL +373 -0
- package/examples/components/reference/sources/richclay/vendor/SQUIRE-LICENSE +21 -0
- package/examples/components/reference/sources/richclay/vendor/purify.es.mjs +2249 -0
- package/examples/components/reference/sources/richclay/vendor/purify.min.js +3 -0
- package/examples/components/reference/sources/richclay/vendor/squire.js +22 -0
- package/examples/components/reference/sources/richclay/vendor/squire.mjs +22 -0
- package/examples/components/reference/sources/richclay/vendor/squire.provenance.json +19 -0
- package/examples/components/rich-text-toolbar.html +43 -0
- package/examples/components/save-status-indicator.html +11 -0
- package/examples/components/selectable-cards.html +9 -0
- package/examples/components/settings-rows.html +10 -0
- package/examples/components/sidebar-nav.html +9 -0
- package/examples/components/small-charts.html +21 -0
- package/examples/components/split-button.html +13 -0
- package/examples/components/split-panes-editor.html +6 -0
- package/examples/components/split-panes.html +9 -0
- package/examples/components/stat-tiles.html +23 -0
- package/examples/components/toast-stack.html +21 -0
- package/examples/components/tree-view.html +9 -0
- package/examples/components/upload-dropzone.html +88 -0
- package/examples/components/wizard-shell.html +50 -0
- package/examples/datastar/index.html +38 -0
- package/examples/datastar/server.mjs +31 -0
- package/examples/fixtures/field-guide.pdf +14 -0
- package/examples/fixtures/workspace.jpg +0 -0
- package/examples/setup-peers.mjs +35 -0
- package/fonts/LICENSE-ibm-plex-mono.txt +93 -0
- package/fonts/LICENSE-ibm-plex-sans.txt +93 -0
- package/fonts/LICENSE-newsreader.txt +93 -0
- package/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
- package/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
- package/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
- package/fonts/ibm-plex-sans-latin-400-italic.woff2 +0 -0
- package/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
- package/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
- package/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
- package/fonts/newsreader-latin-opsz-italic.woff2 +0 -0
- package/fonts/newsreader-latin-opsz-normal.woff2 +0 -0
- package/icons/LICENSE +21 -0
- package/icons/house.json +71 -0
- package/icons/icons.d.ts +17 -0
- package/icons/icons.js +648 -0
- package/icons/icons.svg +126 -0
- package/icons/marks/build-tray.source.mjs +45 -0
- package/icons/marks/hyperclay-local.svg +11 -0
- package/icons/phosphor.json +53 -0
- package/icons/round.json +8 -0
- package/integrations/datastar.js +202 -0
- package/integrations/quickcrop.css +26 -0
- package/integrations/quickcrop.js +56 -0
- package/integrations/richclay.css +100 -0
- package/integrations/richclay.js +131 -0
- package/package.json +630 -0
- package/react/README.md +244 -0
- package/src/README.md +83 -0
- package/vendor/datastar/datastar-1.0.3.js +10 -0
- package/vendor/datastar/provenance.json +6 -0
- package/vendor/floating-ui/LICENSE-core +20 -0
- package/vendor/floating-ui/LICENSE-dom +20 -0
- package/vendor/floating-ui/floating-ui.core.umd.min.js +1 -0
- package/vendor/floating-ui/floating-ui.dom.umd.min.js +1 -0
- package/vendor/floating-ui/provenance.json +17 -0
- package/vendor/richclay/LICENSE +16 -0
- package/vendor/richclay/THIRD-PARTY-NOTICES.md +45 -0
- package/vendor/richclay/provenance.json +17 -0
- package/vendor/richclay/richclay.css +404 -0
- package/vendor/richclay/richclay.js +2940 -0
- package/vendor/richclay/vendor/DOMPURIFY-LICENSE +202 -0
- package/vendor/richclay/vendor/DOMPURIFY-LICENSE-MPL +373 -0
- package/vendor/richclay/vendor/SQUIRE-LICENSE +21 -0
- package/vendor/richclay/vendor/purify.min.js +3 -0
- package/vendor/richclay/vendor/squire.js +22 -0
- package/vendor/richclay/vendor/squire.provenance.json +30 -0
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html data-theme="light" lang="en">
|
|
3
|
+
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Files table · Bevel</title><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"></head>
|
|
4
|
+
<body>
|
|
5
|
+
<main class="bevel-example bevel-navigation-example">
|
|
6
|
+
<header class="bevel-example__header"><div class="bevel-eyebrow">Hyperclay / Files</div><h1>Every file in its folder.</h1><p>Sites, folders and uploads in one light table. Status pills appear only when set, and Share and Open wait beside the menu until the row is hovered.</p></header>
|
|
7
|
+
<section class="bevel-files-example__section" aria-labelledby="files-table-folder-title">
|
|
8
|
+
<h2 class="bevel-kicker" id="files-table-folder-title">Folder with editors</h2>
|
|
9
|
+
<div class="bevel-files" id="files-table-folder">
|
|
10
|
+
<div class="bevel-files__scroll"><table role="table" class="bevel-files__table">
|
|
11
|
+
<thead role="rowgroup"><tr role="row"><th role="columnheader" class="bevel-files__pick" scope="col"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select all files"><span class="bevel-checkbox__box"></span></label></th><th role="columnheader" class="bevel-files__name" scope="col" data-bevel-column="name" aria-sort="ascending"><button type="button" class="bevel-files__sort">Name<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__status" scope="col">Status</th><th role="columnheader" class="bevel-files__editor" scope="col">Edited by</th><th role="columnheader" class="bevel-files__updated" scope="col" data-bevel-column="updated" aria-sort="none"><button type="button" class="bevel-files__sort">Updated<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__size" scope="col" data-bevel-column="size" aria-sort="none"><button type="button" class="bevel-files__sort">Size<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__actions" scope="col"><span class="bevel-sr-only">Actions</span></th></tr></thead>
|
|
12
|
+
<tbody role="rowgroup">
|
|
13
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="archive"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select archive"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="archive">archive</button><span class="bevel-files__detail">32 items</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__editor"></td><td role="cell" class="bevel-files__updated">–</td><td role="cell" class="bevel-files__size"></td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open archive" data-bevel-action="open" data-bevel-key="archive"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for archive" data-bevel-action="actions" data-bevel-key="archive"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
14
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="assets"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select assets"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="assets">assets</button><span class="bevel-files__detail">1 item</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__editor"></td><td role="cell" class="bevel-files__updated">–</td><td role="cell" class="bevel-files__size"></td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open assets" data-bevel-action="open" data-bevel-key="assets"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for assets" data-bevel-action="actions" data-bevel-key="assets"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
15
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="core"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select core"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="core">core</button><span class="bevel-files__detail">9 items</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__editor"></td><td role="cell" class="bevel-files__updated">–</td><td role="cell" class="bevel-files__size"></td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open core" data-bevel-action="open" data-bevel-key="core"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for core" data-bevel-action="actions" data-bevel-key="core"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
16
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="planning-canvas"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select planning-canvas"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="planning-canvas">planning-canvas</button><span class="bevel-files__detail">4 items</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__editor"></td><td role="cell" class="bevel-files__updated">–</td><td role="cell" class="bevel-files__size"></td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open planning-canvas" data-bevel-action="open" data-bevel-key="planning-canvas"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for planning-canvas" data-bevel-action="actions" data-bevel-key="planning-canvas"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
17
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="qa-r2-livesync"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select qa-r2-livesync"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="qa-r2-livesync">qa-r2-livesync</button><span class="bevel-files__detail">6 items</span></span></span></td><td role="cell" class="bevel-files__status"><span class="bevel-files__pill bevel-files__pill--accent">Collection</span><span class="bevel-files__pill bevel-files__pill--alert">Paused</span></td><td role="cell" class="bevel-files__editor"></td><td role="cell" class="bevel-files__updated">–</td><td role="cell" class="bevel-files__size"></td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open qa-r2-livesync" data-bevel-action="open" data-bevel-key="qa-r2-livesync"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for qa-r2-livesync" data-bevel-action="actions" data-bevel-key="qa-r2-livesync"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
18
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="writing" data-bevel-drop-target><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select writing"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="writing">writing</button><span class="bevel-files__detail">12 items</span></span></span></td><td role="cell" class="bevel-files__status"><span class="bevel-files__drop-hint"><svg aria-hidden="true" height="12" width="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3ZM7 13.5h10m-3-3 3 3-3 3"/></svg>Move 2 items here</span></td><td role="cell" class="bevel-files__editor"></td><td role="cell" class="bevel-files__updated">–</td><td role="cell" class="bevel-files__size"></td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open writing" data-bevel-action="open" data-bevel-key="writing"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for writing" data-bevel-action="actions" data-bevel-key="writing"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
19
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="card-canvas.html"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select card-canvas.html"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="card-canvas.html">card-canvas.html</button><span class="bevel-files__detail" data-fold=" · 2h ago · 48 KB">card-canvas.hyperclay.com</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__editor"><span class="bevel-files__avatar bevel-files__avatar--accent" role="img" aria-label="Dana Mercer" title="Dana Mercer">DM</span></td><td role="cell" class="bevel-files__updated"><time datetime="2026-09-14T09:12" title="Sep 14, 2026, 9:12 AM">2h ago</time></td><td role="cell" class="bevel-files__size">48 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share card-canvas.html" data-bevel-action="share" data-bevel-key="card-canvas.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open card-canvas.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="card-canvas.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for card-canvas.html" data-bevel-action="actions" data-bevel-key="card-canvas.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
20
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="early-access.html"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select early-access.html" checked><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="early-access.html">early-access.html</button><span class="bevel-files__detail" data-fold=" · yesterday · 31 KB">early-access.hyperclay.com</span></span></span></td><td role="cell" class="bevel-files__status"><span class="bevel-files__pill">Private</span></td><td role="cell" class="bevel-files__editor"><span class="bevel-files__avatar bevel-files__avatar--accent" role="img" aria-label="Dana Mercer" title="Dana Mercer">DM</span></td><td role="cell" class="bevel-files__updated"><time datetime="2026-09-13T17:40" title="Sep 13, 2026, 5:40 PM">yesterday</time></td><td role="cell" class="bevel-files__size">31 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share early-access.html" data-bevel-action="share" data-bevel-key="early-access.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open early-access.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="early-access.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for early-access.html" data-bevel-action="actions" data-bevel-key="early-access.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
21
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="hi.html"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select hi.html" checked><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="hi.html">hi.html</button><span class="bevel-files__detail" data-fold=" · 3d ago · 2 KB">hi.hyperclay.com</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__editor"><span class="bevel-files__avatar bevel-files__avatar--good" role="img" aria-label="Sam Lin" title="Sam Lin">SL</span></td><td role="cell" class="bevel-files__updated"><time datetime="2026-09-11T11:05" title="Sep 11, 2026, 11:05 AM">3d ago</time></td><td role="cell" class="bevel-files__size">2 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share hi.html" data-bevel-action="share" data-bevel-key="hi.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open hi.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="hi.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for hi.html" data-bevel-action="actions" data-bevel-key="hi.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
22
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="how-i-got-hyperclay-com.html"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select how-i-got-hyperclay-com.html"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="how-i-got-hyperclay-com.html">how-i-got-hyperclay-com.html</button><span class="bevel-files__detail" data-fold=" · Aug 30 · 19 KB">howigothyperclay.com</span></span></span></td><td role="cell" class="bevel-files__status"><span class="bevel-files__pill bevel-files__pill--good">Discover</span><span class="bevel-files__pill" title="Has a share link"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg>Shared</span></td><td role="cell" class="bevel-files__editor"><span class="bevel-files__avatar bevel-files__avatar--accent" role="img" aria-label="Dana Mercer" title="Dana Mercer">DM</span></td><td role="cell" class="bevel-files__updated"><time datetime="2026-08-30T16:22" title="Aug 30, 2026, 4:22 PM">Aug 30</time></td><td role="cell" class="bevel-files__size">19 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share how-i-got-hyperclay-com.html" data-bevel-action="share" data-bevel-key="how-i-got-hyperclay-com.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open how-i-got-hyperclay-com.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="how-i-got-hyperclay-com.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for how-i-got-hyperclay-com.html" data-bevel-action="actions" data-bevel-key="how-i-got-hyperclay-com.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
23
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="just-launch.html"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select just-launch.html"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="just-launch.html">just-launch.html</button><span class="bevel-files__detail" data-fold=" · Aug 28 · 74 KB">just-launch.hyperclay.com</span></span></span></td><td role="cell" class="bevel-files__status"><span class="bevel-files__pill bevel-files__pill--good">Signups</span></td><td role="cell" class="bevel-files__editor"><span class="bevel-files__avatar bevel-files__avatar--accent" role="img" aria-label="Dana Mercer" title="Dana Mercer">DM</span></td><td role="cell" class="bevel-files__updated"><time datetime="2026-08-28T10:48" title="Aug 28, 2026, 10:48 AM">Aug 28</time></td><td role="cell" class="bevel-files__size">74 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share just-launch.html" data-bevel-action="share" data-bevel-key="just-launch.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open just-launch.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="just-launch.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for just-launch.html" data-bevel-action="actions" data-bevel-key="just-launch.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
24
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="landing-clayjs-check.html"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select landing-clayjs-check.html"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="landing-clayjs-check.html">landing-clayjs-check.html</button><span class="bevel-files__detail" data-fold=" · Aug 21 · 12 KB">landing-clayjs-check.hyperclay.com</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__editor"><span class="bevel-files__avatar bevel-files__avatar--good" role="img" aria-label="Sam Lin" title="Sam Lin">SL</span></td><td role="cell" class="bevel-files__updated"><time datetime="2026-08-21T14:30" title="Aug 21, 2026, 2:30 PM">Aug 21</time></td><td role="cell" class="bevel-files__size">12 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share landing-clayjs-check.html" data-bevel-action="share" data-bevel-key="landing-clayjs-check.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open landing-clayjs-check.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="landing-clayjs-check.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for landing-clayjs-check.html" data-bevel-action="actions" data-bevel-key="landing-clayjs-check.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
25
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="notes.html"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select notes.html"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="notes.html">notes.html</button><span class="bevel-files__detail" data-fold=" · Aug 14 · 9 KB">notes.hyperclay.com</span></span></span></td><td role="cell" class="bevel-files__status"><span class="bevel-files__pill" title="Has a share link"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg>Shared</span></td><td role="cell" class="bevel-files__editor"><span class="bevel-files__avatar bevel-files__avatar--accent" role="img" aria-label="Dana Mercer" title="Dana Mercer">DM</span></td><td role="cell" class="bevel-files__updated"><time datetime="2026-08-14T08:55" title="Aug 14, 2026, 8:55 AM">Aug 14</time></td><td role="cell" class="bevel-files__size">9 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share notes.html" data-bevel-action="share" data-bevel-key="notes.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open notes.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="notes.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for notes.html" data-bevel-action="actions" data-bevel-key="notes.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
26
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="hello.md"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select hello.md"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="hello.md">hello.md</button><span class="bevel-files__detail" data-fold=" · Jun 2 · 1 KB">panphora.hyperclay.com/hello.md</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__editor"></td><td role="cell" class="bevel-files__updated"><time datetime="2026-06-02T12:10" title="Jun 2, 2026, 12:10 PM">Jun 2</time></td><td role="cell" class="bevel-files__size">1 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share hello.md" data-bevel-action="share" data-bevel-key="hello.md"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open hello.md in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="hello.md"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for hello.md" data-bevel-action="actions" data-bevel-key="hello.md"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
27
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="logo.png"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select logo.png"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="logo.png">logo.png</button><span class="bevel-files__detail" data-fold=" · Jun 2 · 210 KB">panphora.hyperclay.com/logo.png</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__editor"></td><td role="cell" class="bevel-files__updated"><time datetime="2026-06-02T12:11" title="Jun 2, 2026, 12:11 PM">Jun 2</time></td><td role="cell" class="bevel-files__size">210 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share logo.png" data-bevel-action="share" data-bevel-key="logo.png"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open logo.png in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="logo.png"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for logo.png" data-bevel-action="actions" data-bevel-key="logo.png"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
28
|
+
</tbody>
|
|
29
|
+
</table></div>
|
|
30
|
+
<div class="bevel-files__foot"><span>15 items · 6 folders, 7 sites, 2 uploads</span><span>7 of 25 sites in use</span></div>
|
|
31
|
+
</div>
|
|
32
|
+
</section>
|
|
33
|
+
<section class="bevel-files-example__section" aria-labelledby="files-table-search-title">
|
|
34
|
+
<h2 class="bevel-kicker" id="files-table-search-title">Search results</h2>
|
|
35
|
+
<div class="bevel-files">
|
|
36
|
+
<div class="bevel-files__scroll"><table role="table" class="bevel-files__table">
|
|
37
|
+
<thead role="rowgroup"><tr role="row"><th role="columnheader" class="bevel-files__pick" scope="col"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select all results"><span class="bevel-checkbox__box"></span></label></th><th role="columnheader" class="bevel-files__name" scope="col" data-bevel-column="name" aria-sort="none"><button type="button" class="bevel-files__sort">Name<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__status" scope="col">Status</th><th role="columnheader" class="bevel-files__updated" scope="col" data-bevel-column="updated" aria-sort="none"><button type="button" class="bevel-files__sort">Updated<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__size" scope="col" data-bevel-column="size" aria-sort="none"><button type="button" class="bevel-files__sort">Size<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__actions" scope="col"><span class="bevel-sr-only">Actions</span></th></tr></thead>
|
|
38
|
+
<tbody role="rowgroup">
|
|
39
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="invoice-2026-08.html"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select invoice-2026-08.html"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="invoice-2026-08.html">invoice-2026-08.html</button><span class="bevel-files__detail bevel-files__detail--location" data-fold=" · 1h ago · 22 KB">In core / client-work</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__updated"><time datetime="2026-09-14T10:02" title="Sep 14, 2026, 10:02 AM">1h ago</time></td><td role="cell" class="bevel-files__size">22 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share invoice-2026-08.html" data-bevel-action="share" data-bevel-key="invoice-2026-08.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open invoice-2026-08.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="invoice-2026-08.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for invoice-2026-08.html" data-bevel-action="actions" data-bevel-key="invoice-2026-08.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
40
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="invoice-2026-07.html"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select invoice-2026-07.html"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="invoice-2026-07.html">invoice-2026-07.html</button><span class="bevel-files__detail bevel-files__detail--location" data-fold=" · Aug 2 · 21 KB">In core / client-work</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__updated"><time datetime="2026-08-02T15:41" title="Aug 2, 2026, 3:41 PM">Aug 2</time></td><td role="cell" class="bevel-files__size">21 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share invoice-2026-07.html" data-bevel-action="share" data-bevel-key="invoice-2026-07.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open invoice-2026-07.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="invoice-2026-07.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for invoice-2026-07.html" data-bevel-action="actions" data-bevel-key="invoice-2026-07.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
41
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="invoice-template.html"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select invoice-template.html"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="invoice-template.html">invoice-template.html</button><span class="bevel-files__detail bevel-files__detail--location" data-fold=" · Jul 19 · 14 KB">In core / client-work / drafts</span></span></span></td><td role="cell" class="bevel-files__status"><span class="bevel-files__pill">Private</span></td><td role="cell" class="bevel-files__updated"><time datetime="2026-07-19T09:27" title="Jul 19, 2026, 9:27 AM">Jul 19</time></td><td role="cell" class="bevel-files__size">14 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share invoice-template.html" data-bevel-action="share" data-bevel-key="invoice-template.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open invoice-template.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="invoice-template.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for invoice-template.html" data-bevel-action="actions" data-bevel-key="invoice-template.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
42
|
+
<tr role="row" class="bevel-files__row" data-bevel-key="invoices-q3.csv"><td role="cell" class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select invoices-q3.csv"><span class="bevel-checkbox__box"></span></label></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="invoices-q3.csv">invoices-q3.csv</button><span class="bevel-files__detail bevel-files__detail--location" data-fold=" · Jul 4 · 38 KB">In archive</span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__updated"><time datetime="2026-07-04T18:03" title="Jul 4, 2026, 6:03 PM">Jul 4</time></td><td role="cell" class="bevel-files__size">38 KB</td><td role="cell" class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share invoices-q3.csv" data-bevel-action="share" data-bevel-key="invoices-q3.csv"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open invoices-q3.csv in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="invoices-q3.csv"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for invoices-q3.csv" data-bevel-action="actions" data-bevel-key="invoices-q3.csv"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr>
|
|
43
|
+
</tbody>
|
|
44
|
+
</table></div>
|
|
45
|
+
<div class="bevel-files__foot"><button type="button" class="bevel-button bevel-button--small bevel-files__more"><span class="bevel-button__label">Load more results</span></button><span class="bevel-files__spacer"></span><span>4 results · searched every folder</span><span>7 of 25 sites in use</span></div>
|
|
46
|
+
</div>
|
|
47
|
+
</section>
|
|
48
|
+
<section class="bevel-files-example__section" aria-labelledby="files-table-empty-title">
|
|
49
|
+
<h2 class="bevel-kicker" id="files-table-empty-title">Empty folder</h2>
|
|
50
|
+
<div class="bevel-files">
|
|
51
|
+
<div class="bevel-files__scroll"><table role="table" class="bevel-files__table">
|
|
52
|
+
<thead role="rowgroup"><tr role="row"><th role="columnheader" class="bevel-files__pick" scope="col"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select all files in this folder" disabled><span class="bevel-checkbox__box"></span></label></th><th role="columnheader" class="bevel-files__name" scope="col" data-bevel-column="name" aria-sort="none"><button type="button" class="bevel-files__sort">Name<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__status" scope="col">Status</th><th role="columnheader" class="bevel-files__updated" scope="col" data-bevel-column="updated" aria-sort="none"><button type="button" class="bevel-files__sort">Updated<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__size" scope="col" data-bevel-column="size" aria-sort="none"><button type="button" class="bevel-files__sort">Size<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__actions" scope="col"><span class="bevel-sr-only">Actions</span></th></tr></thead>
|
|
53
|
+
<tbody role="rowgroup">
|
|
54
|
+
<tr role="row" class="bevel-files__empty"><td role="cell" colspan="6"><div class="bevel-files__blank"><span class="bevel-files__blank-tile"><svg aria-hidden="true" height="18" width="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><p class="bevel-files__blank-title">This folder is empty.</p><p class="bevel-files__blank-text">Create a site, add a folder, or upload files into it.</p><button type="button" class="bevel-button bevel-button--primary bevel-button--small" data-bevel-action="new"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 5v14M5 12h14"/></svg><span class="bevel-button__label">New</span><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg></button></div></td></tr>
|
|
55
|
+
</tbody>
|
|
56
|
+
</table></div>
|
|
57
|
+
</div>
|
|
58
|
+
</section>
|
|
59
|
+
<section class="bevel-files-example__section" aria-labelledby="files-table-loading-title">
|
|
60
|
+
<h2 class="bevel-kicker" id="files-table-loading-title">Loading</h2>
|
|
61
|
+
<div class="bevel-files">
|
|
62
|
+
<div class="bevel-files__scroll"><table role="table" class="bevel-files__table" aria-busy="true">
|
|
63
|
+
<thead role="rowgroup"><tr role="row"><th role="columnheader" class="bevel-files__pick" scope="col"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select all loading files" disabled><span class="bevel-checkbox__box"></span></label></th><th role="columnheader" class="bevel-files__name" scope="col" data-bevel-column="name" aria-sort="none"><button type="button" class="bevel-files__sort">Name<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__status" scope="col">Status</th><th role="columnheader" class="bevel-files__updated" scope="col" data-bevel-column="updated" aria-sort="none"><button type="button" class="bevel-files__sort">Updated<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__size" scope="col" data-bevel-column="size" aria-sort="none"><button type="button" class="bevel-files__sort">Size<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th role="columnheader" class="bevel-files__actions" scope="col"><span class="bevel-sr-only">Actions</span></th></tr></thead>
|
|
64
|
+
<tbody role="rowgroup">
|
|
65
|
+
<tr role="row" class="bevel-files__skeleton" aria-hidden="true"><td role="cell" class="bevel-files__pick"></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"></span><span class="bevel-files__lines"><span class="bevel-files__bar" style="width: 132px"></span><span class="bevel-files__bar bevel-files__bar--short" style="width: 196px"></span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__updated"></td><td role="cell" class="bevel-files__size"><span class="bevel-files__bar" style="width: 44px"></span></td><td role="cell" class="bevel-files__actions"></td></tr>
|
|
66
|
+
<tr role="row" class="bevel-files__skeleton" aria-hidden="true"><td role="cell" class="bevel-files__pick"></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"></span><span class="bevel-files__lines"><span class="bevel-files__bar" style="width: 104px"></span><span class="bevel-files__bar bevel-files__bar--short" style="width: 168px"></span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__updated"></td><td role="cell" class="bevel-files__size"><span class="bevel-files__bar" style="width: 38px"></span></td><td role="cell" class="bevel-files__actions"></td></tr>
|
|
67
|
+
<tr role="row" class="bevel-files__skeleton" aria-hidden="true"><td role="cell" class="bevel-files__pick"></td><td role="cell" class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"></span><span class="bevel-files__lines"><span class="bevel-files__bar" style="width: 148px"></span><span class="bevel-files__bar bevel-files__bar--short" style="width: 180px"></span></span></span></td><td role="cell" class="bevel-files__status"></td><td role="cell" class="bevel-files__updated"></td><td role="cell" class="bevel-files__size"><span class="bevel-files__bar" style="width: 50px"></span></td><td role="cell" class="bevel-files__actions"></td></tr>
|
|
68
|
+
<tr role="row" class="bevel-files__notice"><td role="cell" colspan="6"><span role="status">Loading files…</span></td></tr>
|
|
69
|
+
</tbody>
|
|
70
|
+
</table></div>
|
|
71
|
+
</div>
|
|
72
|
+
</section>
|
|
73
|
+
</main>
|
|
74
|
+
|
|
75
|
+
<script src="../../bevel.js"></script>
|
|
76
|
+
<script>((host, { ready } = {}) => {
|
|
77
|
+
ready(() => host.querySelector('.bevel-files__row[data-bevel-key="writing"]')?.setAttribute("data-bevel-drop-target", ""));
|
|
78
|
+
})(document.body, {standalone:true,assetRoot:"../../",ready:callback => { if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", callback, {once:true}); else callback(); }});</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html data-theme="light" lang="en">
|
|
3
|
+
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"><title>Filter builder · Bevel</title></head>
|
|
4
|
+
<body>
|
|
5
|
+
<main class="bevel-grid-example"><header class="bevel-grid-example__header"><div class="bevel-overlay__eyebrow">Northstar Studio / Field notes</div><h1>Find the work that matters.</h1><p>A few plain conditions bring the right records into view.</p></header><section class="bevel-filter bevel-filter-panel" data-bevel-grid="filter-grid" data-bevel-match="all"><script type="application/json" data-bevel-filter-fields>[{"id":"status","label":"Status","type":"enum","options":[{"id":"overdue","label":"Overdue"}]},{"id":"client","label":"Client","type":"text"},{"id":"amount","label":"Amount","type":"number"},{"id":"date","label":"Date","type":"date"}]</script><div class="bevel-filter__heading"><strong>Show invoices where</strong><span class="bevel-filter__mode">All rules</span></div><div class="bevel-filter__rules"><div class="bevel-filter__rule" data-bevel-key="status-rule" data-bevel-field="status" data-bevel-operator="is"><span>Where</span><span class="bevel-select"><select class="bevel-select__field" data-bevel-filter-field aria-label="Filter field"><option value="status" selected>Status</option><option value="client">Client</option><option value="amount">Amount</option><option value="date">Date</option></select></span><span class="bevel-select"><select class="bevel-select__field" data-bevel-filter-operator aria-label="Filter operator"><option value="equals">equals</option><option value="contains">contains</option><option value="starts-with">starts with</option><option value="is-empty">is empty</option><option value="eq">=</option><option value="ne">≠</option><option value="gt">></option><option value="gte">≥</option><option value="lt"><</option><option value="lte">≤</option><option value="before">before</option><option value="on">on</option><option value="after">after</option><option value="is" selected>is</option><option value="is-not">is not</option></select></span><input class="bevel-input bevel-input--small" data-bevel-filter-value value="overdue" aria-label="Filter value"><button type="button" data-bevel-filter-remove aria-label="Remove rule"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div><div class="bevel-filter__rule" data-bevel-key="client-rule" data-bevel-field="client" data-bevel-operator="contains"><span>And</span><span class="bevel-select"><select class="bevel-select__field" data-bevel-filter-field aria-label="Filter field"><option value="status">Status</option><option value="client" selected>Client</option><option value="amount">Amount</option><option value="date">Date</option></select></span><span class="bevel-select"><select class="bevel-select__field" data-bevel-filter-operator aria-label="Filter operator"><option value="equals">equals</option><option value="contains" selected>contains</option><option value="starts-with">starts with</option><option value="is-empty">is empty</option><option value="eq">=</option><option value="ne">≠</option><option value="gt">></option><option value="gte">≥</option><option value="lt"><</option><option value="lte">≤</option><option value="before">before</option><option value="on">on</option><option value="after">after</option><option value="is">is</option><option value="is-not">is not</option></select></span><input class="bevel-input bevel-input--small" data-bevel-filter-value value="Northstar" aria-label="Filter value"><button type="button" data-bevel-filter-remove aria-label="Remove rule"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></div><div class="bevel-filter__draft" hidden></div><template data-bevel-filter-rule><div class="bevel-filter__rule" data-bevel-key="template" data-bevel-field="client" data-bevel-operator="contains"><span>And</span><span class="bevel-select"><select class="bevel-select__field" data-bevel-filter-field aria-label="Filter field"><option value="status">Status</option><option value="client" selected>Client</option><option value="amount">Amount</option><option value="date">Date</option></select></span><span class="bevel-select"><select class="bevel-select__field" data-bevel-filter-operator aria-label="Filter operator"><option value="equals">equals</option><option value="contains" selected>contains</option><option value="starts-with">starts with</option><option value="is-empty">is empty</option><option value="eq">=</option><option value="ne">≠</option><option value="gt">></option><option value="gte">≥</option><option value="lt"><</option><option value="lte">≤</option><option value="before">before</option><option value="on">on</option><option value="after">after</option><option value="is">is</option><option value="is-not">is not</option></select></span><input class="bevel-input bevel-input--small" data-bevel-filter-value value="" aria-label="Filter value"><button type="button" data-bevel-filter-remove aria-label="Remove rule"><svg aria-hidden="true" width="14" height="14" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div></template><div class="bevel-filter__actions"><button type="button" class="bevel-button bevel-button--small" data-bevel-filter-add><svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 5v14M5 12h14"/></svg>Add rule</button><button type="button" class="bevel-button bevel-button--small" data-bevel-filter-edit>Edit filters</button><button type="button" class="bevel-button bevel-button--small" data-bevel-filter-cancel>Cancel</button><button type="button" class="bevel-button bevel-button--primary bevel-button--small" data-bevel-filter-apply>Apply filters</button></div></section><section class="bevel-grid-result"><span class="bevel-grid-result__label">Applied / matching records</span><div class="bevel-grid" id="filter-grid"><table class="bevel-grid__table"><thead><tr><th data-bevel-column="invoice">Invoice</th><th data-bevel-column="client">Client</th><th data-bevel-column="amount">Amount</th><th data-bevel-column="status">Status</th></tr></thead><tbody><tr class="bevel-grid__row" data-bevel-key="0431"><td data-bevel-column="invoice">INV-0431</td><td data-bevel-column="client" data-value="Juniper Health"><strong>Juniper Health</strong><small>INV-0431 · Paid</small></td><td data-bevel-column="amount" data-value="1240">$1,240.00</td><td data-bevel-column="status" data-value="paid">Paid</td></tr><tr class="bevel-grid__row" data-bevel-key="0432"><td data-bevel-column="invoice">INV-0432</td><td data-bevel-column="client" data-value="Northstar Studio"><strong>Northstar Studio</strong><small>INV-0432 · Overdue</small></td><td data-bevel-column="amount" data-value="3200">$3,200.00</td><td data-bevel-column="status" data-value="overdue">Overdue</td></tr><tr class="bevel-grid__row" data-bevel-key="0433"><td data-bevel-column="invoice">INV-0433</td><td data-bevel-column="client" data-value="Maple House"><strong>Maple House</strong><small>INV-0433 · Sent</small></td><td data-bevel-column="amount" data-value="860">$860.00</td><td data-bevel-column="status" data-value="sent">Sent</td></tr></tbody></table></div></section></main>
|
|
6
|
+
<script src="../../bevel.js"></script>
|
|
7
|
+
<script>((host, { standalone = true, assetRoot = "../../", ready } = {}) => {
|
|
8
|
+
ready(()=>host.querySelector("[data-bevel-filter-edit]").click())
|
|
9
|
+
})(document.body, {standalone:true,assetRoot:"../../",ready:callback => { if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", callback, {once:true}); else callback(); }});</script>
|
|
10
|
+
</body>
|
|
11
|
+
</html>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html data-theme="light" lang="en">
|
|
3
|
+
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"><title>Form error summary · Bevel</title></head>
|
|
4
|
+
<body>
|
|
5
|
+
<main class="bevel-anchor-example"><header class="bevel-anchor-example__header"><div class="bevel-overlay__eyebrow">Northstar Studio / Field notes</div><h1>A clear way forward.</h1><p>Create a project / Details</p></header><form id="project-form" class="bevel-validation-form" data-bevel-validate novalidate><section class="bevel-errors" role="alert" hidden><svg aria-hidden="true" width="18" height="18" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg><div><strong>Two things need your attention.</strong><ul class="bevel-errors__list"></ul></div></section><div class="bevel-validation-form__fields"><div class="bevel-validation-form__field"><label for="project-name">Project name</label><input class="bevel-input" id="project-name" name="name" required data-bevel-validation-message="A project name is required." placeholder="e.g. Field notes" aria-describedby="project-name-help"><small id="project-name-help" hidden>Use the name shown to collaborators.</small><small class="bevel-field-error" data-bevel-error-for="project-name" hidden><svg aria-hidden="true" width="13" height="13" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg><span data-bevel-error-message></span></small></div><div class="bevel-validation-form__field"><label for="project-email">Invite a collaborator</label><input class="bevel-input" id="project-email" name="email" type="email" required data-bevel-validation-message="Enter an address like mira@example.test." value="mira@"><small class="bevel-field-error" data-bevel-error-for="project-email" hidden><svg aria-hidden="true" width="13" height="13" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg><span data-bevel-error-message></span></small></div></div><input name="disabled" required disabled hidden><div class="bevel-validation-form__actions"><button class="bevel-button" type="button" data-bevel-action="cancel">Cancel</button><button class="bevel-button bevel-button--primary" type="submit">Create project</button></div><button type="reset" hidden>Reset</button><output id="submit-count" hidden>0</output></form></main>
|
|
6
|
+
<script src="../../bevel.js"></script>
|
|
7
|
+
<script>((host, { standalone = true, assetRoot = "../../", ready } = {}) => {
|
|
8
|
+
host.querySelector('#project-form').addEventListener('submit',e=>{if(e.defaultPrevented)return;e.preventDefault();const out=host.querySelector('#submit-count');out.value=String(Number(out.value)+1);out.textContent=out.value})
|
|
9
|
+
})(document.body, {standalone:true,assetRoot:"../../",ready:callback => { if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", callback, {once:true}); else callback(); }});</script>
|
|
10
|
+
</body>
|
|
11
|
+
</html>
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Bevel functional components</title>
|
|
7
|
+
<link rel="stylesheet" href="../../bevel-fonts.css">
|
|
8
|
+
<link rel="stylesheet" href="../../bevel.css">
|
|
9
|
+
<script src="../../vendor/floating-ui/floating-ui.core.umd.min.js" defer></script>
|
|
10
|
+
<script src="../../vendor/floating-ui/floating-ui.dom.umd.min.js" defer></script>
|
|
11
|
+
<script src="../../bevel.js" defer></script>
|
|
12
|
+
</head>
|
|
13
|
+
<body class="bevel-page">
|
|
14
|
+
<main>
|
|
15
|
+
<h1>Functional components</h1>
|
|
16
|
+
<section class="bevel-toolbar"><button class="bevel-button" type="button" data-bevel-open="example-modal"><span class="bevel-button__label">Open modal</span></button><button class="bevel-button" type="button" data-bevel-open="example-menu"><span class="bevel-button__label">Menu</span></button><nav class="bevel-breadcrumbs" aria-label="Breadcrumb"><ol><li><a href="#">Home</a></li><li aria-current="page">Components</li></ol></nav></section>
|
|
17
|
+
<dialog class="bevel-modal" id="example-modal" aria-labelledby="modal-title"><header class="bevel-modal__header"><h2 id="modal-title">Edit project</h2><button class="bevel-modal__close" type="button" data-bevel-close aria-label="Close">×</button></header><div class="bevel-modal__body"><label class="bevel-field">Name<input class="bevel-input" autofocus value="Field notes"></label></div><footer class="bevel-modal__footer"><button class="bevel-button" type="button" data-bevel-close><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" type="button" data-bevel-action="save"><span class="bevel-button__label">Save</span></button></footer></dialog>
|
|
18
|
+
<div class="bevel-menu" id="example-menu" popover="manual" role="menu"><button role="menuitem" tabindex="0" data-bevel-key="rename" data-bevel-action="rename">Rename</button><button role="menuitem" tabindex="-1" data-bevel-key="archive" data-bevel-action="archive">Archive</button></div>
|
|
19
|
+
<button class="bevel-button" type="button" data-bevel-open="example-drawer"><span class="bevel-button__label">Open drawer</span></button>
|
|
20
|
+
<dialog class="bevel-drawer" id="example-drawer" aria-labelledby="drawer-title"><header class="bevel-drawer__header"><h2 id="drawer-title">Details</h2><button class="bevel-drawer__close" type="button" data-bevel-close aria-label="Close">×</button></header><div class="bevel-drawer__body"><p>Scrollable record details.</p></div><footer class="bevel-drawer__footer"><button class="bevel-button" type="button" data-bevel-close><span class="bevel-button__label">Done</span></button></footer></dialog>
|
|
21
|
+
<button class="bevel-button" type="button" data-bevel-open="example-confirm"><span class="bevel-button__label">Archive</span></button>
|
|
22
|
+
<div class="bevel-popconfirm" id="example-confirm" popover="manual" role="dialog" aria-labelledby="confirm-title"><span data-bevel-arrow></span><h2 id="confirm-title">Archive this item?</h2><div class="bevel-popconfirm__actions"><button class="bevel-button" type="button" data-bevel-close>Cancel</button><button class="bevel-button bevel-button--danger" type="button" data-bevel-action="archive" data-bevel-key="item-1">Archive</button></div></div>
|
|
23
|
+
<section class="bevel-combobox" id="example-combo" data-bevel-value="mira"><label>Assignee<input class="bevel-input" role="combobox" aria-autocomplete="list" aria-controls="example-combo-list" aria-expanded="false" required value="Mira"></label><input type="hidden" name="assignee" value="mira"><div class="bevel-combobox__listbox" id="example-combo-list" role="listbox" popover="manual"><button role="option" data-bevel-key="mira" data-bevel-label="Mira">Mira</button><button role="option" data-bevel-key="sanford" data-bevel-label="Sanford">Sanford</button></div></section>
|
|
24
|
+
<section class="bevel-multiselect" data-bevel-name="labels[]"><button class="bevel-button bevel-multiselect__summary" type="button" data-bevel-open="example-multi">Choose options</button><div class="bevel-multiselect__tags"></div><div class="bevel-multiselect__panel" id="example-multi" popover="manual" role="group" aria-label="Labels"><label class="bevel-checkbox"><input type="checkbox" value="design" checked><span class="bevel-checkbox__box"></span>Design</label><label class="bevel-checkbox"><input type="checkbox" value="research"><span class="bevel-checkbox__box"></span>Research</label></div></section>
|
|
25
|
+
<label class="bevel-choice-card"><input type="radio" name="plan" value="pro" checked><span><strong>Pro</strong><br>For working teams</span></label>
|
|
26
|
+
<section class="bevel-dropzone" data-bevel-max-bytes="10485760"><h2>Drop files here</h2><input type="file" accept="image/*,.pdf" multiple></section>
|
|
27
|
+
<section class="bevel-inline-edit" data-bevel-key="title"><div class="bevel-inline-edit__display"><span class="bevel-inline-edit__value">Field notes</span> <button type="button" data-bevel-edit-start>Edit</button></div><div class="bevel-inline-edit__editor"><input class="bevel-input bevel-inline-edit__input" required><button type="button" data-bevel-edit-save>Save</button><button type="button" data-bevel-edit-cancel>Cancel</button></div></section>
|
|
28
|
+
<section class="bevel-settings"><div class="bevel-settings__row"><span>Email notifications</span><label class="bevel-toggle"><input type="checkbox"><span class="bevel-toggle__track"><span class="bevel-toggle__thumb"></span></span></label></div></section>
|
|
29
|
+
<section class="bevel-errors" aria-labelledby="error-title"><h2 id="error-title">Fix two fields</h2><ul class="bevel-errors__list"><li><a href="#name">Enter a name</a></li></ul></section>
|
|
30
|
+
<div class="bevel-split-button"><button class="bevel-button bevel-button--primary" type="button" data-bevel-action="publish">Publish</button><button class="bevel-button bevel-button--primary" type="button" data-bevel-open="example-menu" aria-label="More publish options">⌄</button></div>
|
|
31
|
+
<aside class="bevel-sidebar"><nav><a href="#" aria-current="page">Overview</a></nav></aside>
|
|
32
|
+
<nav class="bevel-pagination" data-bevel-page="2" data-bevel-page-size="10" data-bevel-total="43"><button type="button" data-bevel-page="prev">Previous</button><output class="bevel-pagination__range"></output><button type="button" data-bevel-page="next">Next</button></nav>
|
|
33
|
+
<section class="bevel-tree" data-bevel-selected="brief"><details open><summary>Projects</summary><button type="button" data-bevel-key="brief">Project brief</button><button type="button" data-bevel-key="notes">Notes</button></details></section>
|
|
34
|
+
<section class="bevel-wizard" data-bevel-step="0"><ol class="bevel-wizard__steps"><li class="bevel-wizard__step">Basics</li><li class="bevel-wizard__step">People</li></ol><div><section class="bevel-wizard__panel"><label>Email<input class="bevel-input" type="email" required></label><button type="button" data-bevel-step="next">Next</button></section><section class="bevel-wizard__panel" hidden inert><button type="button" data-bevel-step="prev">Back</button><p>Ready.</p></section></div></section>
|
|
35
|
+
<div class="bevel-toasts" aria-live="polite"><div class="bevel-toast" data-bevel-tone="info"><span>Local example</span><button class="bevel-toast__close" type="button">×</button></div></div>
|
|
36
|
+
<section class="bevel-action-banner"><span>You are offline.</span><button class="bevel-button" type="button" data-bevel-action="retry">Retry</button></section><div class="bevel-saved" role="status">Saved</div>
|
|
37
|
+
<section class="bevel-code"><header class="bevel-code__header"><span>example.js</span><button type="button" data-bevel-copy>Copy</button></header><pre><code>Bevel.saved()</code></pre></section>
|
|
38
|
+
<section class="bevel-diff" data-bevel-layout="unified"><button type="button" data-bevel-layout="unified">Unified</button><button type="button" data-bevel-layout="split">Split</button><div class="bevel-diff__body"><div class="bevel-diff__line" data-bevel-kind="remove">old</div><div class="bevel-diff__line" data-bevel-kind="add">new</div></div></section>
|
|
39
|
+
<ol class="bevel-activity"><li class="bevel-activity__item"><strong>Mira</strong> edited the brief <time datetime="2026-09-08">today</time></li></ol>
|
|
40
|
+
<section class="bevel-stats"><article class="bevel-stats__tile"><strong>42</strong><span>Tasks</span></article><article class="bevel-stats__tile"><strong>0</strong><span>Blocked</span></article></section>
|
|
41
|
+
<div class="bevel-avatars" aria-label="Mira and three others"><span class="bevel-avatars__avatar">MI<span class="bevel-avatars__status"></span></span><span class="bevel-avatars__avatar bevel-avatars__count">+3</span></div>
|
|
42
|
+
<svg class="bevel-chart" viewBox="0 0 200 80" role="img" aria-labelledby="chart-title"><title id="chart-title">Weekly work completed</title><path d="M5 70L45 48L85 55L125 20L195 8" fill="none" stroke="currentColor"></path><text x="5" y="78">Mon</text></svg>
|
|
43
|
+
<section class="bevel-filter"><div class="bevel-filter__rule"><select><option>Status</option></select><select><option>is</option></select><input value="Open"><button type="button">Remove</button></div><button type="button" data-bevel-action="apply-filter">Apply</button></section>
|
|
44
|
+
<section class="bevel-columns"><div class="bevel-columns__item"><span>↕</span><label><input type="checkbox" checked>Title</label><button type="button">Pin</button></div></section>
|
|
45
|
+
<table class="bevel-grid"><tbody><tr class="bevel-grid__row"><td class="bevel-grid__cell" data-bevel-edit data-bevel-column="title">Field notes<span class="bevel-grid__resize" role="separator" tabindex="0"></span></td></tr></tbody></table>
|
|
46
|
+
<section class="bevel-split" data-bevel-ratio="45"><div class="bevel-split__pane" style="flex-basis:45%">List</div><div class="bevel-split__divider" role="separator" tabindex="0"></div><div class="bevel-split__pane" style="flex-basis:55%">Detail</div></section>
|
|
47
|
+
<section class="bevel-richtext"><div class="bevel-richtext__toolbar"><button type="button">Bold</button></div><div data-bevel-richtext><p>Editable story.</p></div></section>
|
|
48
|
+
<section class="bevel-kanban" data-bevel-data-mode="local" data-bevel-selected="task-1"><header class="bevel-kanban__toolbar"><label>Search<input class="bevel-input bevel-kanban__search"></label><button type="button" data-bevel-action="create">New task</button></header><div class="bevel-kanban__columns"><section class="bevel-kanban__column" data-bevel-column-key="backlog"><header class="bevel-kanban__column-header">Backlog <span class="bevel-kanban__count">1</span></header><div class="bevel-kanban__list"><article class="bevel-kanban__card" data-bevel-key="task-1" data-bevel-priority="normal" aria-selected="true" tabindex="0"><h3 class="bevel-kanban__title">Draft brief</h3><p class="bevel-kanban__description">Shape the project.</p></article></div></section><section class="bevel-kanban__column" data-bevel-column-key="ready"><header class="bevel-kanban__column-header">Ready <span class="bevel-kanban__count">0</span></header><div class="bevel-kanban__list"></div></section><section class="bevel-kanban__column" data-bevel-column-key="doing"><header class="bevel-kanban__column-header">Doing <span class="bevel-kanban__count">0</span></header><div class="bevel-kanban__list"></div></section><section class="bevel-kanban__column" data-bevel-column-key="done"><header class="bevel-kanban__column-header">Done <span class="bevel-kanban__count">0</span></header><div class="bevel-kanban__list"></div></section></div></section>
|
|
49
|
+
</main>
|
|
50
|
+
</body>
|
|
51
|
+
</html>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" data-theme="light">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
|
5
|
+
<title>Inline edit · Bevel</title>
|
|
6
|
+
<link rel="stylesheet" href="../../bevel-fonts.css">
|
|
7
|
+
<link rel="stylesheet" href="../../bevel.css">
|
|
8
|
+
<link rel="stylesheet" href="../../integrations/richclay.css">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
<main class="bevel-anchor-example">
|
|
13
|
+
<header class="bevel-anchor-example__header"><div class="bevel-overlay__eyebrow">Northstar Studio / Field notes</div><h1>Small changes, in place.</h1><p>Keep the value and its editor close together.</p></header>
|
|
14
|
+
<section id="inline-project" class="bevel-inline-edit bevel-inline-edit--title" data-bevel-key="project-name" data-bevel-edit-kind="rich" data-bevel-single-line data-bevel-validation-message="Give this project a name before saving.">
|
|
15
|
+
<div class="bevel-inline-edit__display">
|
|
16
|
+
<div class="bevel-inline-edit__eyebrow">Project name</div>
|
|
17
|
+
<div class="bevel-inline-edit__row"><h2 class="bevel-inline-edit__value">Field notes</h2><button type="button" class="bevel-button bevel-button--quiet" data-bevel-edit-start>Edit</button></div>
|
|
18
|
+
<p class="bevel-inline-edit__note">The name appears on every document in the project.</p>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="bevel-inline-edit__editor">
|
|
21
|
+
<div class="bevel-inline-edit__hint"><span class="bevel-inline-edit__eyebrow">Project name</span><span class="bevel-inline-edit__keys"><kbd>↵</kbd> save <kbd>esc</kbd> cancel</span></div>
|
|
22
|
+
<div data-bevel-edit-slot></div>
|
|
23
|
+
<p id="inline-project-error" class="bevel-inline-edit__error" data-bevel-edit-error role="status" hidden><svg aria-hidden="true" width="13" height="13" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg><span data-bevel-error-message></span></p>
|
|
24
|
+
<div class="bevel-inline-edit__actions"><button type="button" class="bevel-button" data-bevel-edit-cancel>Cancel</button><button type="button" class="bevel-button bevel-button--primary" data-bevel-edit-save>Done</button></div>
|
|
25
|
+
</div>
|
|
26
|
+
<template data-bevel-edit-template><h2 class="bevel-inline-edit__input" required data-bevel-placeholder="Project name" aria-label="Project name" aria-describedby="inline-project-error"></h2></template>
|
|
27
|
+
</section>
|
|
28
|
+
</main>
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
<script src="../peers/richclay/vendor/squire.js"></script>
|
|
36
|
+
<script src="../peers/richclay/vendor/purify.min.js"></script>
|
|
37
|
+
<script src="../peers/richclay/richclay.js"></script>
|
|
38
|
+
<script src="../../bevel.js"></script>
|
|
39
|
+
<script src="../../integrations/richclay.js"></script>
|
|
40
|
+
|
|
41
|
+
</body>
|
|
42
|
+
</html>
|