@spinjs/components 0.1.0-preview.1 → 0.2.0-alpha.1

package/dist/editable/examples/with-controls.html

@@ -5,11 +5,11 @@
 </script>
 
 <div class="w-full max-w-md" {...machine.getRootProps()}>
-  <label class="block text-sm font-medium text-text" {...machine.getLabelProps()}>Release Tag</label>
+  <label class="block" {...machine.getLabelProps()}>Release Tag</label>
   <div class="flex items-center gap-2">
-    <div class="min-w-0 flex-1 rounded-md border border-solid border-border bg-surface-raised" {...machine.getAreaProps()}>
-      <span show={!machine.editing} class="block truncate cursor-text px-3 py-1 text-sm text-text" {...machine.getPreviewProps()}>{machine.valueText}</span>
-      <input show={machine.editing} class="w-full bg-transparent px-3 py-1 outline-none" {...machine.getInputProps()} />
+    <div class="min-w-0 flex-1 rounded-md border bg-surface-raised" {...machine.getAreaProps()}>
+      <span show={!machine.editing} class="block truncate cursor-text px-3 py-1 type-body" {...machine.getPreviewProps()}>{machine.valueText}</span>
+      <input show={machine.editing} class="bare w-full px-3 py-1" {...machine.getInputProps()} />
     </div>
     <div class="flex shrink-0 items-center gap-1" {...machine.getControlProps()}>
       <button class={["secondary s-sm", { "inline-flex": !machine.editing, "hidden": machine.editing }]} {...machine.getEditTriggerProps()}>Edit</button>

package/dist/editable/examples/with-controls.html.js

@@ -0,0 +1,5 @@
+// src/editable/examples/with-controls.html
+var with_controls_default = "<script lang=\"ts\">\n  import { editable } from \"../editable.presentation.ts\";\n\n  const machine = editable({ value: \"Release v0.1.0 candidate\" });\n<\/script>\n\n<div class=\"w-full max-w-md\" {...machine.getRootProps()}>\n  <label class=\"block\" {...machine.getLabelProps()}>Release Tag</label>\n  <div class=\"flex items-center gap-2\">\n    <div class=\"min-w-0 flex-1 rounded-md border bg-surface-raised\" {...machine.getAreaProps()}>\n      <span show={!machine.editing} class=\"block truncate cursor-text px-3 py-1 type-body\" {...machine.getPreviewProps()}>{machine.valueText}</span>\n      <input show={machine.editing} class=\"bare w-full px-3 py-1\" {...machine.getInputProps()} />\n    </div>\n    <div class=\"flex shrink-0 items-center gap-1\" {...machine.getControlProps()}>\n      <button class={[\"secondary s-sm\", { \"inline-flex\": !machine.editing, \"hidden\": machine.editing }]} {...machine.getEditTriggerProps()}>Edit</button>\n      <button class={[\"s-sm\", { \"inline-flex\": machine.editing, \"hidden\": !machine.editing }]} {...machine.getSubmitTriggerProps()}>Save</button>\n      <button class={[\"secondary s-sm\", { \"inline-flex\": machine.editing, \"hidden\": !machine.editing }]} {...machine.getCancelTriggerProps()}>Cancel</button>\n    </div>\n  </div>\n</div>\n";
+export { with_controls_default as default };
+
+//# sourceMappingURL=with-controls.html.js.map

package/dist/examples.d.ts

@@ -0,0 +1,22 @@
+/**
+ * The example gallery: every example recipe as text, by machine and stem,
+ * and every example registered as its own element.
+ *
+ * The gallery is what reference, docs, and studio all read when they show
+ * the machine components: a machine with examples to show is listed, named,
+ * and rendered, and one without them is not. One module, so the three apps
+ * never maintain three manifests. Importing it — for names or for its side
+ * effect — also registers every `<machine-stem>` element through the
+ * compiled twin below, so the mount tags upgrade in the importing window.
+ */
+/** One example recipe: its stem and its source text. */
+export interface ExampleSource {
+  readonly stem: string;
+  readonly html: string;
+}
+/** The machine-qualified mount tag for a machine and stem. */
+export declare function mountTag(machine: string, stem: string): string;
+/** Every example, grouped by machine directory name. */
+export declare function exampleSources(): Map<string, readonly ExampleSource[]>;
+/** The machine names that ship examples, sorted. */
+export declare function exampleMachines(): readonly string[];

package/dist/examples.js

@@ -0,0 +1,501 @@
+import basic_default from "./angle-slider/examples/basic.html.js";
+import knob_default from "./angle-slider/examples/knob.html.js";
+import labeled_default from "./angle-slider/examples/labeled.html.js";
+import marks_default from "./angle-slider/examples/marks.html.js";
+import basic_default$1 from "./async-list/examples/basic.html.js";
+import badge_default from "./avatar/examples/badge.html.js";
+import badgeminimal_default from "./avatar/examples/badgeminimal.html.js";
+import basic_default$2 from "./avatar/examples/basic.html.js";
+import count_default from "./avatar/examples/count.html.js";
+import fallback_default from "./avatar/examples/fallback.html.js";
+import group_default from "./avatar/examples/group.html.js";
+import icon_default from "./avatar/examples/icon.html.js";
+import multiples_default from "./avatar/examples/multiples.html.js";
+import pills_default from "./avatar/examples/pills.html.js";
+import pillsolid_default from "./avatar/examples/pillsolid.html.js";
+import rounded_default from "./avatar/examples/rounded.html.js";
+import status_default from "./avatar/examples/status.html.js";
+import statusminimal_default from "./avatar/examples/statusminimal.html.js";
+import trusted_default from "./avatar/examples/trusted.html.js";
+import verification_default from "./avatar/examples/verification.html.js";
+import autoplay_default from "./carousel/examples/autoplay.html.js";
+import basic_default$3 from "./carousel/examples/basic.html.js";
+import cards_default from "./carousel/examples/cards.html.js";
+import hero_default from "./carousel/examples/hero.html.js";
+import infinite_default from "./carousel/examples/infinite.html.js";
+import minimal_default from "./carousel/examples/minimal.html.js";
+import testimonials_default from "./carousel/examples/testimonials.html.js";
+import thumbnails_default from "./carousel/examples/thumbnails.html.js";
+import vertical_default from "./carousel/examples/vertical.html.js";
+import basic_default$4 from "./cascade-select/examples/basic.html.js";
+import basic_default$5 from "./color-picker/examples/basic.html.js";
+import hue_wheel_default from "./color-picker/examples/hue-wheel.html.js";
+import inline_default from "./color-picker/examples/inline.html.js";
+import with_presets_default from "./color-picker/examples/with-presets.html.js";
+import basic_default$6 from "./combobox/examples/basic.html.js";
+import directory_default from "./combobox/examples/directory.html.js";
+import grouping_default from "./combobox/examples/grouping.html.js";
+import multiple_default from "./combobox/examples/multiple.html.js";
+import basic_default$7 from "./date-input/examples/basic.html.js";
+import appointment_default from "./date-picker/examples/appointment.html.js";
+import basic_default$8 from "./date-picker/examples/basic.html.js";
+import multiple_default$1 from "./date-picker/examples/multiple.html.js";
+import pricing_default from "./date-picker/examples/pricing.html.js";
+import range_default from "./date-picker/examples/range.html.js";
+import unavailable_default from "./date-picker/examples/unavailable.html.js";
+import basic_default$9 from "./editable/examples/basic.html.js";
+import doubleclick_default from "./editable/examples/doubleclick.html.js";
+import inline_edit_default from "./editable/examples/inline-edit.html.js";
+import profile_field_default from "./editable/examples/profile-field.html.js";
+import resize_default from "./editable/examples/resize.html.js";
+import task_item_default from "./editable/examples/task-item.html.js";
+import title_editor_default from "./editable/examples/title-editor.html.js";
+import with_controls_default from "./editable/examples/with-controls.html.js";
+import avatar_default from "./file-upload/examples/avatar.html.js";
+import basic_default$10 from "./file-upload/examples/basic.html.js";
+import directory_default$1 from "./file-upload/examples/directory.html.js";
+import dragdrop_default from "./file-upload/examples/dragdrop.html.js";
+import files_default from "./file-upload/examples/files.html.js";
+import images_default from "./file-upload/examples/images.html.js";
+import paste_default from "./file-upload/examples/paste.html.js";
+import table_default from "./file-upload/examples/table.html.js";
+import basic_default$11 from "./floating-panel/examples/basic.html.js";
+import calculator_default from "./floating-panel/examples/calculator.html.js";
+import chat_default from "./floating-panel/examples/chat.html.js";
+import media_player_default from "./floating-panel/examples/media-player.html.js";
+import notes_default from "./floating-panel/examples/notes.html.js";
+import settings_default from "./floating-panel/examples/settings.html.js";
+import task_default from "./floating-panel/examples/task.html.js";
+import video_call_default from "./floating-panel/examples/video-call.html.js";
+import basic_default$12 from "./hover-card/examples/basic.html.js";
+import controlled_default from "./hover-card/examples/controlled.html.js";
+import custom_positioning_default from "./hover-card/examples/custom-positioning.html.js";
+import link_default from "./hover-card/examples/link.html.js";
+import product_default from "./hover-card/examples/product.html.js";
+import user_default from "./hover-card/examples/user.html.js";
+import with_arrow_default from "./hover-card/examples/with-arrow.html.js";
+import basic_default$13 from "./image-cropper/examples/basic.html.js";
+import circle_default from "./image-cropper/examples/circle.html.js";
+import basic_default$14 from "./listbox/examples/basic.html.js";
+import controlled_default$1 from "./listbox/examples/controlled.html.js";
+import countries_default from "./listbox/examples/countries.html.js";
+import grouped_default from "./listbox/examples/grouped.html.js";
+import icons_default from "./listbox/examples/icons.html.js";
+import multiple_default$2 from "./listbox/examples/multiple.html.js";
+import priority_default from "./listbox/examples/priority.html.js";
+import settings_default$1 from "./listbox/examples/settings.html.js";
+import basic_default$15 from "./menu/examples/basic.html.js";
+import context_default from "./menu/examples/context.html.js";
+import groups_default from "./menu/examples/groups.html.js";
+import icons_default$1 from "./menu/examples/icons.html.js";
+import nested_default from "./menu/examples/nested.html.js";
+import user_default$1 from "./menu/examples/user.html.js";
+import basic_default$16 from "./mode-picker/examples/basic.html.js";
+import minimal_default$1 from "./mode-picker/examples/minimal.html.js";
+import pill_default from "./mode-picker/examples/pill.html.js";
+import basic_default$17 from "./navigation-menu/examples/basic.html.js";
+import grouped_default$1 from "./navigation-menu/examples/grouped.html.js";
+import minimal_default$2 from "./navigation-menu/examples/minimal.html.js";
+import basic_default$18 from "./number-input/examples/basic.html.js";
+import currency_default from "./number-input/examples/currency.html.js";
+import decimal_default from "./number-input/examples/decimal.html.js";
+import limits_default from "./number-input/examples/limits.html.js";
+import percentage_default from "./number-input/examples/percentage.html.js";
+import quantity_default from "./number-input/examples/quantity.html.js";
+import scrubber_default from "./number-input/examples/scrubber.html.js";
+import wheel_default from "./number-input/examples/wheel.html.js";
+import basic_default$19 from "./pagination/examples/basic.html.js";
+import dropdown_default from "./pagination/examples/dropdown.html.js";
+import info_default from "./pagination/examples/info.html.js";
+import jump_default from "./pagination/examples/jump.html.js";
+import numbered_default from "./pagination/examples/numbered.html.js";
+import pagesize_default from "./pagination/examples/pagesize.html.js";
+import basic_default$20 from "./pin-input/examples/basic.html.js";
+import field_default from "./pin-input/examples/field.html.js";
+import masked_default from "./pin-input/examples/masked.html.js";
+import placeholder_default from "./pin-input/examples/placeholder.html.js";
+import twofactor_default from "./pin-input/examples/twofactor.html.js";
+import verification_default$1 from "./pin-input/examples/verification.html.js";
+import basic_default$21 from "./popover/examples/basic.html.js";
+import feedback_default from "./popover/examples/feedback.html.js";
+import notifications_default from "./popover/examples/notifications.html.js";
+import settings_default$2 from "./popover/examples/settings.html.js";
+import share_default from "./popover/examples/share.html.js";
+import user_default$2 from "./popover/examples/user.html.js";
+import basic_default$22 from "./rating-group/examples/basic.html.js";
+import movie_default from "./rating-group/examples/movie.html.js";
+import product_review_default from "./rating-group/examples/product-review.html.js";
+import service_evaluation_default from "./rating-group/examples/service-evaluation.html.js";
+import basic_default$23 from "./select/examples/basic.html.js";
+import category_default from "./select/examples/category.html.js";
+import country_default from "./select/examples/country.html.js";
+import language_default from "./select/examples/language.html.js";
+import multiple_default$3 from "./select/examples/multiple.html.js";
+import profile_default from "./select/examples/profile.html.js";
+import theme_default from "./select/examples/theme.html.js";
+import with_overlapping_label_default from "./select/examples/with-overlapping-label.html.js";
+import basic_default$24 from "./signature-pad/examples/basic.html.js";
+import contract_default from "./signature-pad/examples/contract.html.js";
+import receipt_default from "./signature-pad/examples/receipt.html.js";
+import with_preview_default from "./signature-pad/examples/with-preview.html.js";
+import basic_default$25 from "./slider/examples/basic.html.js";
+import equalizer_default from "./slider/examples/equalizer.html.js";
+import fractional_default from "./slider/examples/fractional.html.js";
+import marks_default$1 from "./slider/examples/marks.html.js";
+import range_default$1 from "./slider/examples/range.html.js";
+import stepped_default from "./slider/examples/stepped.html.js";
+import ticks_default from "./slider/examples/ticks.html.js";
+import vertical_default$1 from "./slider/examples/vertical.html.js";
+import basic_default$26 from "./splitter/examples/basic.html.js";
+import nested_default$1 from "./splitter/examples/nested.html.js";
+import threepanels_default from "./splitter/examples/threepanels.html.js";
+import vertical_default$2 from "./splitter/examples/vertical.html.js";
+import basic_default$27 from "./steps/examples/basic.html.js";
+import checkmarks_default from "./steps/examples/checkmarks.html.js";
+import content_default from "./steps/examples/content.html.js";
+import descriptions_default from "./steps/examples/descriptions.html.js";
+import icons_default$2 from "./steps/examples/icons.html.js";
+import lines_default from "./steps/examples/lines.html.js";
+import navigation_default from "./steps/examples/navigation.html.js";
+import onboarding_default from "./steps/examples/onboarding.html.js";
+import progress_default from "./steps/examples/progress.html.js";
+import segmented_default from "./steps/examples/segmented.html.js";
+import vertical_default$3 from "./steps/examples/vertical.html.js";
+import verticallabels_default from "./steps/examples/verticallabels.html.js";
+import verticalnavigation_default from "./steps/examples/verticalnavigation.html.js";
+import basic_default$28 from "./tabs/examples/basic.html.js";
+import dashboard_default from "./tabs/examples/dashboard.html.js";
+import ghost_default from "./tabs/examples/ghost.html.js";
+import icon_above_default from "./tabs/examples/icon-above.html.js";
+import icon_only_default from "./tabs/examples/icon-only.html.js";
+import outline_with_icons_default from "./tabs/examples/outline-with-icons.html.js";
+import outline_default from "./tabs/examples/outline.html.js";
+import pills_default$1 from "./tabs/examples/pills.html.js";
+import project_default from "./tabs/examples/project.html.js";
+import settings_default$3 from "./tabs/examples/settings.html.js";
+import stack_with_icons_default from "./tabs/examples/stack-with-icons.html.js";
+import stack_default from "./tabs/examples/stack.html.js";
+import underline_default from "./tabs/examples/underline.html.js";
+import vertical_ghost_default from "./tabs/examples/vertical-ghost.html.js";
+import vertical_icons_default from "./tabs/examples/vertical-icons.html.js";
+import vertical_underline_default from "./tabs/examples/vertical-underline.html.js";
+import vertical_with_icons_default from "./tabs/examples/vertical-with-icons.html.js";
+import vertical_default$4 from "./tabs/examples/vertical.html.js";
+import with_badges_default from "./tabs/examples/with-badges.html.js";
+import with_icons_default from "./tabs/examples/with-icons.html.js";
+import basic_default$29 from "./tags-input/examples/basic.html.js";
+import with_combobox_default from "./tags-input/examples/with-combobox.html.js";
+import basic_default$30 from "./theme-picker/examples/basic.html.js";
+import cards_default$1 from "./theme-picker/examples/cards.html.js";
+import compact_default from "./theme-picker/examples/compact.html.js";
+import swatches_default from "./theme-picker/examples/swatches.html.js";
+import basic_default$31 from "./timer/examples/basic.html.js";
+import card_default from "./timer/examples/card.html.js";
+import compact_default$1 from "./timer/examples/compact.html.js";
+import countdown_default from "./timer/examples/countdown.html.js";
+import labels_default from "./timer/examples/labels.html.js";
+import large_default from "./timer/examples/large.html.js";
+import minimal_default$3 from "./timer/examples/minimal.html.js";
+import pomodoro_default from "./timer/examples/pomodoro.html.js";
+import workout_default from "./timer/examples/workout.html.js";
+import action_default from "./toast/examples/action.html.js";
+import basic_default$32 from "./toast/examples/basic.html.js";
+import bottomcenter_default from "./toast/examples/bottomcenter.html.js";
+import bottomleft_default from "./toast/examples/bottomleft.html.js";
+import bottomright_default from "./toast/examples/bottomright.html.js";
+import duration_default from "./toast/examples/duration.html.js";
+import promise_default from "./toast/examples/promise.html.js";
+import topcenter_default from "./toast/examples/topcenter.html.js";
+import topleft_default from "./toast/examples/topleft.html.js";
+import topright_default from "./toast/examples/topright.html.js";
+import types_default from "./toast/examples/types.html.js";
+import updatable_default from "./toast/examples/updatable.html.js";
+import basic_default$33 from "./toc/examples/basic.html.js";
+import basic_default$34 from "./toggle-group/examples/basic.html.js";
+import ghost_default$1 from "./toggle-group/examples/ghost.html.js";
+import icons_default$3 from "./toggle-group/examples/icons.html.js";
+import multiple_default$4 from "./toggle-group/examples/multiple.html.js";
+import outline_default$1 from "./toggle-group/examples/outline.html.js";
+import toolbar_default from "./toggle-group/examples/toolbar.html.js";
+import basic_default$35 from "./tooltip/examples/basic.html.js";
+import metrics_default from "./tooltip/examples/metrics.html.js";
+import positioning_default from "./tooltip/examples/positioning.html.js";
+import status_default$1 from "./tooltip/examples/status.html.js";
+import video_default from "./tooltip/examples/video.html.js";
+import with_arrow_default$1 from "./tooltip/examples/with-arrow.html.js";
+import basic_default$36 from "./tour/examples/basic.html.js";
+import basic_default$37 from "./tree-view/examples/basic.html.js";
+import loading_default from "./tree-view/examples/loading.html.js";
+// src/examples.ts
+const sources = /* #__PURE__ */ Object.assign({
+	"./angle-slider/examples/basic.html": basic_default,
+	"./angle-slider/examples/knob.html": knob_default,
+	"./angle-slider/examples/labeled.html": labeled_default,
+	"./angle-slider/examples/marks.html": marks_default,
+	"./async-list/examples/basic.html": basic_default$1,
+	"./avatar/examples/badge.html": badge_default,
+	"./avatar/examples/badgeminimal.html": badgeminimal_default,
+	"./avatar/examples/basic.html": basic_default$2,
+	"./avatar/examples/count.html": count_default,
+	"./avatar/examples/fallback.html": fallback_default,
+	"./avatar/examples/group.html": group_default,
+	"./avatar/examples/icon.html": icon_default,
+	"./avatar/examples/multiples.html": multiples_default,
+	"./avatar/examples/pills.html": pills_default,
+	"./avatar/examples/pillsolid.html": pillsolid_default,
+	"./avatar/examples/rounded.html": rounded_default,
+	"./avatar/examples/status.html": status_default,
+	"./avatar/examples/statusminimal.html": statusminimal_default,
+	"./avatar/examples/trusted.html": trusted_default,
+	"./avatar/examples/verification.html": verification_default,
+	"./carousel/examples/autoplay.html": autoplay_default,
+	"./carousel/examples/basic.html": basic_default$3,
+	"./carousel/examples/cards.html": cards_default,
+	"./carousel/examples/hero.html": hero_default,
+	"./carousel/examples/infinite.html": infinite_default,
+	"./carousel/examples/minimal.html": minimal_default,
+	"./carousel/examples/testimonials.html": testimonials_default,
+	"./carousel/examples/thumbnails.html": thumbnails_default,
+	"./carousel/examples/vertical.html": vertical_default,
+	"./cascade-select/examples/basic.html": basic_default$4,
+	"./color-picker/examples/basic.html": basic_default$5,
+	"./color-picker/examples/hue-wheel.html": hue_wheel_default,
+	"./color-picker/examples/inline.html": inline_default,
+	"./color-picker/examples/with-presets.html": with_presets_default,
+	"./combobox/examples/basic.html": basic_default$6,
+	"./combobox/examples/directory.html": directory_default,
+	"./combobox/examples/grouping.html": grouping_default,
+	"./combobox/examples/multiple.html": multiple_default,
+	"./date-input/examples/basic.html": basic_default$7,
+	"./date-picker/examples/appointment.html": appointment_default,
+	"./date-picker/examples/basic.html": basic_default$8,
+	"./date-picker/examples/multiple.html": multiple_default$1,
+	"./date-picker/examples/pricing.html": pricing_default,
+	"./date-picker/examples/range.html": range_default,
+	"./date-picker/examples/unavailable.html": unavailable_default,
+	"./editable/examples/basic.html": basic_default$9,
+	"./editable/examples/doubleclick.html": doubleclick_default,
+	"./editable/examples/inline-edit.html": inline_edit_default,
+	"./editable/examples/profile-field.html": profile_field_default,
+	"./editable/examples/resize.html": resize_default,
+	"./editable/examples/task-item.html": task_item_default,
+	"./editable/examples/title-editor.html": title_editor_default,
+	"./editable/examples/with-controls.html": with_controls_default,
+	"./file-upload/examples/avatar.html": avatar_default,
+	"./file-upload/examples/basic.html": basic_default$10,
+	"./file-upload/examples/directory.html": directory_default$1,
+	"./file-upload/examples/dragdrop.html": dragdrop_default,
+	"./file-upload/examples/files.html": files_default,
+	"./file-upload/examples/images.html": images_default,
+	"./file-upload/examples/paste.html": paste_default,
+	"./file-upload/examples/table.html": table_default,
+	"./floating-panel/examples/basic.html": basic_default$11,
+	"./floating-panel/examples/calculator.html": calculator_default,
+	"./floating-panel/examples/chat.html": chat_default,
+	"./floating-panel/examples/media-player.html": media_player_default,
+	"./floating-panel/examples/notes.html": notes_default,
+	"./floating-panel/examples/settings.html": settings_default,
+	"./floating-panel/examples/task.html": task_default,
+	"./floating-panel/examples/video-call.html": video_call_default,
+	"./hover-card/examples/basic.html": basic_default$12,
+	"./hover-card/examples/controlled.html": controlled_default,
+	"./hover-card/examples/custom-positioning.html": custom_positioning_default,
+	"./hover-card/examples/link.html": link_default,
+	"./hover-card/examples/product.html": product_default,
+	"./hover-card/examples/user.html": user_default,
+	"./hover-card/examples/with-arrow.html": with_arrow_default,
+	"./image-cropper/examples/basic.html": basic_default$13,
+	"./image-cropper/examples/circle.html": circle_default,
+	"./listbox/examples/basic.html": basic_default$14,
+	"./listbox/examples/controlled.html": controlled_default$1,
+	"./listbox/examples/countries.html": countries_default,
+	"./listbox/examples/grouped.html": grouped_default,
+	"./listbox/examples/icons.html": icons_default,
+	"./listbox/examples/multiple.html": multiple_default$2,
+	"./listbox/examples/priority.html": priority_default,
+	"./listbox/examples/settings.html": settings_default$1,
+	"./menu/examples/basic.html": basic_default$15,
+	"./menu/examples/context.html": context_default,
+	"./menu/examples/groups.html": groups_default,
+	"./menu/examples/icons.html": icons_default$1,
+	"./menu/examples/nested.html": nested_default,
+	"./menu/examples/user.html": user_default$1,
+	"./mode-picker/examples/basic.html": basic_default$16,
+	"./mode-picker/examples/minimal.html": minimal_default$1,
+	"./mode-picker/examples/pill.html": pill_default,
+	"./navigation-menu/examples/basic.html": basic_default$17,
+	"./navigation-menu/examples/grouped.html": grouped_default$1,
+	"./navigation-menu/examples/minimal.html": minimal_default$2,
+	"./number-input/examples/basic.html": basic_default$18,
+	"./number-input/examples/currency.html": currency_default,
+	"./number-input/examples/decimal.html": decimal_default,
+	"./number-input/examples/limits.html": limits_default,
+	"./number-input/examples/percentage.html": percentage_default,
+	"./number-input/examples/quantity.html": quantity_default,
+	"./number-input/examples/scrubber.html": scrubber_default,
+	"./number-input/examples/wheel.html": wheel_default,
+	"./pagination/examples/basic.html": basic_default$19,
+	"./pagination/examples/dropdown.html": dropdown_default,
+	"./pagination/examples/info.html": info_default,
+	"./pagination/examples/jump.html": jump_default,
+	"./pagination/examples/numbered.html": numbered_default,
+	"./pagination/examples/pagesize.html": pagesize_default,
+	"./pin-input/examples/basic.html": basic_default$20,
+	"./pin-input/examples/field.html": field_default,
+	"./pin-input/examples/masked.html": masked_default,
+	"./pin-input/examples/placeholder.html": placeholder_default,
+	"./pin-input/examples/twofactor.html": twofactor_default,
+	"./pin-input/examples/verification.html": verification_default$1,
+	"./popover/examples/basic.html": basic_default$21,
+	"./popover/examples/feedback.html": feedback_default,
+	"./popover/examples/notifications.html": notifications_default,
+	"./popover/examples/settings.html": settings_default$2,
+	"./popover/examples/share.html": share_default,
+	"./popover/examples/user.html": user_default$2,
+	"./rating-group/examples/basic.html": basic_default$22,
+	"./rating-group/examples/movie.html": movie_default,
+	"./rating-group/examples/product-review.html": product_review_default,
+	"./rating-group/examples/service-evaluation.html": service_evaluation_default,
+	"./select/examples/basic.html": basic_default$23,
+	"./select/examples/category.html": category_default,
+	"./select/examples/country.html": country_default,
+	"./select/examples/language.html": language_default,
+	"./select/examples/multiple.html": multiple_default$3,
+	"./select/examples/profile.html": profile_default,
+	"./select/examples/theme.html": theme_default,
+	"./select/examples/with-overlapping-label.html": with_overlapping_label_default,
+	"./signature-pad/examples/basic.html": basic_default$24,
+	"./signature-pad/examples/contract.html": contract_default,
+	"./signature-pad/examples/receipt.html": receipt_default,
+	"./signature-pad/examples/with-preview.html": with_preview_default,
+	"./slider/examples/basic.html": basic_default$25,
+	"./slider/examples/equalizer.html": equalizer_default,
+	"./slider/examples/fractional.html": fractional_default,
+	"./slider/examples/marks.html": marks_default$1,
+	"./slider/examples/range.html": range_default$1,
+	"./slider/examples/stepped.html": stepped_default,
+	"./slider/examples/ticks.html": ticks_default,
+	"./slider/examples/vertical.html": vertical_default$1,
+	"./splitter/examples/basic.html": basic_default$26,
+	"./splitter/examples/nested.html": nested_default$1,
+	"./splitter/examples/threepanels.html": threepanels_default,
+	"./splitter/examples/vertical.html": vertical_default$2,
+	"./steps/examples/basic.html": basic_default$27,
+	"./steps/examples/checkmarks.html": checkmarks_default,
+	"./steps/examples/content.html": content_default,
+	"./steps/examples/descriptions.html": descriptions_default,
+	"./steps/examples/icons.html": icons_default$2,
+	"./steps/examples/lines.html": lines_default,
+	"./steps/examples/navigation.html": navigation_default,
+	"./steps/examples/onboarding.html": onboarding_default,
+	"./steps/examples/progress.html": progress_default,
+	"./steps/examples/segmented.html": segmented_default,
+	"./steps/examples/vertical.html": vertical_default$3,
+	"./steps/examples/verticallabels.html": verticallabels_default,
+	"./steps/examples/verticalnavigation.html": verticalnavigation_default,
+	"./tabs/examples/basic.html": basic_default$28,
+	"./tabs/examples/dashboard.html": dashboard_default,
+	"./tabs/examples/ghost.html": ghost_default,
+	"./tabs/examples/icon-above.html": icon_above_default,
+	"./tabs/examples/icon-only.html": icon_only_default,
+	"./tabs/examples/outline-with-icons.html": outline_with_icons_default,
+	"./tabs/examples/outline.html": outline_default,
+	"./tabs/examples/pills.html": pills_default$1,
+	"./tabs/examples/project.html": project_default,
+	"./tabs/examples/settings.html": settings_default$3,
+	"./tabs/examples/stack-with-icons.html": stack_with_icons_default,
+	"./tabs/examples/stack.html": stack_default,
+	"./tabs/examples/underline.html": underline_default,
+	"./tabs/examples/vertical-ghost.html": vertical_ghost_default,
+	"./tabs/examples/vertical-icons.html": vertical_icons_default,
+	"./tabs/examples/vertical-underline.html": vertical_underline_default,
+	"./tabs/examples/vertical-with-icons.html": vertical_with_icons_default,
+	"./tabs/examples/vertical.html": vertical_default$4,
+	"./tabs/examples/with-badges.html": with_badges_default,
+	"./tabs/examples/with-icons.html": with_icons_default,
+	"./tags-input/examples/basic.html": basic_default$29,
+	"./tags-input/examples/with-combobox.html": with_combobox_default,
+	"./theme-picker/examples/basic.html": basic_default$30,
+	"./theme-picker/examples/cards.html": cards_default$1,
+	"./theme-picker/examples/compact.html": compact_default,
+	"./theme-picker/examples/swatches.html": swatches_default,
+	"./timer/examples/basic.html": basic_default$31,
+	"./timer/examples/card.html": card_default,
+	"./timer/examples/compact.html": compact_default$1,
+	"./timer/examples/countdown.html": countdown_default,
+	"./timer/examples/labels.html": labels_default,
+	"./timer/examples/large.html": large_default,
+	"./timer/examples/minimal.html": minimal_default$3,
+	"./timer/examples/pomodoro.html": pomodoro_default,
+	"./timer/examples/workout.html": workout_default,
+	"./toast/examples/action.html": action_default,
+	"./toast/examples/basic.html": basic_default$32,
+	"./toast/examples/bottomcenter.html": bottomcenter_default,
+	"./toast/examples/bottomleft.html": bottomleft_default,
+	"./toast/examples/bottomright.html": bottomright_default,
+	"./toast/examples/duration.html": duration_default,
+	"./toast/examples/promise.html": promise_default,
+	"./toast/examples/topcenter.html": topcenter_default,
+	"./toast/examples/topleft.html": topleft_default,
+	"./toast/examples/topright.html": topright_default,
+	"./toast/examples/types.html": types_default,
+	"./toast/examples/updatable.html": updatable_default,
+	"./toc/examples/basic.html": basic_default$33,
+	"./toggle-group/examples/basic.html": basic_default$34,
+	"./toggle-group/examples/ghost.html": ghost_default$1,
+	"./toggle-group/examples/icons.html": icons_default$3,
+	"./toggle-group/examples/multiple.html": multiple_default$4,
+	"./toggle-group/examples/outline.html": outline_default$1,
+	"./toggle-group/examples/toolbar.html": toolbar_default,
+	"./tooltip/examples/basic.html": basic_default$35,
+	"./tooltip/examples/metrics.html": metrics_default,
+	"./tooltip/examples/positioning.html": positioning_default,
+	"./tooltip/examples/status.html": status_default$1,
+	"./tooltip/examples/video.html": video_default,
+	"./tooltip/examples/with-arrow.html": with_arrow_default$1,
+	"./tour/examples/basic.html": basic_default$36,
+	"./tree-view/examples/basic.html": basic_default$37,
+	"./tree-view/examples/loading.html": loading_default
+});
+/** The machine-qualified mount tag for a machine and stem. */
+function mountTag(machine, stem) {
+	return `${machine}-${stem}`;
+}
+/** Every example, grouped by machine directory name. */
+function exampleSources() {
+	const grouped = /* @__PURE__ */ new Map();
+	const byPath = new Map(Object.entries(sources));
+	const expand = (machine, html) => {
+		let out = html;
+		for (let pass = 0; pass < 8; pass += 1) {
+			const m = /<include\s+file="([^"]+)"\s*\/?>/.exec(out);
+			if (m === null) break;
+			const key = `./${machine}/examples/${m[1].replace(/^\.\//, "")}`;
+			const included = byPath.get(key);
+			if (included === void 0) break;
+			const body = included.replace(/<script(\s[^>]*)?>[\s\S]*?<\/script>\s*/, "");
+			out = out.replace(m[0], body);
+		}
+		return out;
+	};
+	for (const [path, html] of Object.entries(sources)) {
+		const machine = path.split("/").at(-3) ?? "";
+		const stem = path.split("/").at(-1)?.slice(0, -5) ?? path;
+		if (machine === "" || stem === "") continue;
+		const group = grouped.get(machine) ?? [];
+		group.push({
+			stem,
+			html: expand(machine, html)
+		});
+		grouped.set(machine, group);
+	}
+	for (const [machine, group] of grouped) grouped.set(machine, [...group].sort((a, b) => a.stem.localeCompare(b.stem)));
+	return grouped;
+}
+/** The machine names that ship examples, sorted. */
+function exampleMachines() {
+	return [...exampleSources().keys()].sort();
+}
+export { exampleMachines, exampleSources, mountTag };
+
+//# sourceMappingURL=examples.js.map

package/dist/file-upload/examples/avatar.html

@@ -6,23 +6,23 @@
 
 <div class="w-full" {...machine.getRootProps()}>
   <div
-    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
+    class={["flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate", { "border-primary bg-surface-raised": machine.dragging, "ring-2 ring-border-strong": machine.focused, "cursor-not-allowed opacity-50": machine.disabled }]}
     {...machine.getDropzoneProps()}
   >
-    <span class="i-lucide-upload text-lg text-text-muted" aria-hidden="true"></span>
-    <span class="text-sm text-text" {...machine.getLabelProps()}>Upload avatar</span>
-    <span class="text-xs text-text-muted">or click to browse</span>
+    <span class="i-lucide-upload text-muted" aria-hidden="true"></span>
+    <span class="type-label" {...machine.getLabelProps()}>Upload avatar</span>
+    <span class="type-caption text-muted">or click to browse</span>
   </div>
 
   <input {...machine.getHiddenInputProps()} />
 
   <div class="mt-2 flex flex-col gap-1" {...machine.getItemGroupProps()}>
     <template for={machine.getAcceptedRows()} as={row} key={row.value}>
-      <div class="flex items-center justify-between gap-2 rounded-md border border-solid border-border bg-surface-raised px-2 py-1" {...machine.getItemProps(row)}>
-        <span class="min-w-0 flex-1 truncate text-xs text-text" {...machine.getItemNameProps(row)}>{row.value}</span>
-        <span class="shrink-0 text-xs text-text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
+      <div class="flex items-center justify-between gap-2 rounded-md border bg-surface-raised px-2 py-1" {...machine.getItemProps(row)}>
+        <span class="min-w-0 flex-1 truncate type-body" {...machine.getItemNameProps(row)}>{row.value}</span>
+        <span class="shrink-0 type-caption text-muted tabular-nums">{machine.getItemSizeText(row)}</span>
         <button class="shrink-0 ghost icon s-sm" {...machine.getItemDeleteTriggerProps(row)}>
-          <span class="i-lucide-x text-xs" aria-hidden="true"></span>
+          <span class="i-lucide-x" aria-hidden="true"></span>
         </button>
       </div>
     </template>

package/dist/file-upload/examples/avatar.html.js

@@ -0,0 +1,5 @@
+// src/file-upload/examples/avatar.html
+var avatar_default = "<script lang=\"ts\">\n  import { fileUpload } from \"../file-upload.presentation.ts\";\n\n  const machine = fileUpload({maxFiles: 1});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div\n    class={[\"flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg border border-dashed bg-surface px-4 py-6 text-center transition-colors duration-fast ease-decelerate\", { \"border-primary bg-surface-raised\": machine.dragging, \"ring-2 ring-border-strong\": machine.focused, \"cursor-not-allowed opacity-50\": machine.disabled }]}\n    {...machine.getDropzoneProps()}\n  >\n    <span class=\"i-lucide-upload text-muted\" aria-hidden=\"true\"></span>\n    <span class=\"type-label\" {...machine.getLabelProps()}>Upload avatar</span>\n    <span class=\"type-caption text-muted\">or click to browse</span>\n  </div>\n\n  <input {...machine.getHiddenInputProps()} />\n\n  <div class=\"mt-2 flex flex-col gap-1\" {...machine.getItemGroupProps()}>\n    <template for={machine.getAcceptedRows()} as={row} key={row.value}>\n      <div class=\"flex items-center justify-between gap-2 rounded-md border bg-surface-raised px-2 py-1\" {...machine.getItemProps(row)}>\n        <span class=\"min-w-0 flex-1 truncate type-body\" {...machine.getItemNameProps(row)}>{row.value}</span>\n        <span class=\"shrink-0 type-caption text-muted tabular-nums\">{machine.getItemSizeText(row)}</span>\n        <button class=\"shrink-0 ghost icon s-sm\" {...machine.getItemDeleteTriggerProps(row)}>\n          <span class=\"i-lucide-x\" aria-hidden=\"true\"></span>\n        </button>\n      </div>\n    </template>\n  </div>\n\n  <div class=\"mt-1 flex justify-end\">\n    <button class=\"ghost s-sm\" {...machine.getClearTriggerProps()}>Clear</button>\n  </div>\n</div>\n";
+export { avatar_default as default };
+
+//# sourceMappingURL=avatar.html.js.map