@markout-lang/bootstrap-kit 0.2.2 → 0.3.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.
Files changed (31) hide show
  1. package/README.md +19 -19
  2. package/package.json +4 -1
  3. package/parts/accordion.htm +8 -8
  4. package/parts/alert.htm +6 -6
  5. package/parts/badge.htm +4 -4
  6. package/parts/base.htm +15 -15
  7. package/parts/breadcrumb.htm +3 -3
  8. package/parts/button.htm +33 -33
  9. package/parts/card.htm +17 -17
  10. package/parts/carousel.htm +9 -9
  11. package/parts/check.htm +26 -26
  12. package/parts/collapse.htm +6 -6
  13. package/parts/dropdown.htm +10 -10
  14. package/parts/image.htm +11 -11
  15. package/parts/input.htm +34 -34
  16. package/parts/list-group.htm +6 -6
  17. package/parts/modal.htm +13 -13
  18. package/parts/nav.htm +11 -11
  19. package/parts/navbar.htm +9 -9
  20. package/parts/offcanvas.htm +11 -11
  21. package/parts/pagination.htm +10 -10
  22. package/parts/placeholder.htm +5 -5
  23. package/parts/popover.htm +6 -6
  24. package/parts/progress.htm +10 -10
  25. package/parts/scrollspy.htm +7 -7
  26. package/parts/select.htm +13 -13
  27. package/parts/spinner.htm +5 -5
  28. package/parts/table.htm +13 -13
  29. package/parts/theme.htm +4 -4
  30. package/parts/toast.htm +14 -14
  31. package/parts/tooltip.htm +5 -5
package/README.md CHANGED
@@ -65,24 +65,24 @@ all of them.
65
65
  **Parameters for the chrome, the slot for the content.** What a card *has* —
66
66
  a title, a footer, an image — is a parameter. What it *contains* is slotted.
67
67
 
68
- **`:extra` adds classes.** A `class` written at a usage site *replaces* the
68
+ **`::extra` adds classes.** A `class` written at a usage site *replaces* the
69
69
  one a definition sets, which is the language's rule and not something this
70
- kit overrides. So every component takes `:extra` for the utility classes a
70
+ kit overrides. So every component takes `::extra` for the utility classes a
71
71
  caller wants on top:
72
72
 
73
73
  ```html
74
- <bs-alert :variant="warning" :extra="mb-0">Careful</bs-alert>
74
+ <bs-alert ::variant="warning" ::extra="mb-0">Careful</bs-alert>
75
75
  ```
76
76
 
77
77
  **Comments in a tag: `//` for one line, `/* … */` for more.** Both are
78
78
  stripped at parse time. A run of `//` lines reads as a stack of fragments;
79
79
  one block says it once.
80
80
 
81
- **Lists are arrays.** `:items`, `:options`, `:columns`, `:rows`, `:slides`.
81
+ **Lists are arrays.** `::items`, `::options`, `::columns`, `::rows`, `::slides`.
82
82
  The default value of each is the shape it expects — read the definition to
83
83
  see it.
84
84
 
85
- **Callbacks are values, not events.** `:select`, `:check` and `:link` are
85
+ **Callbacks are values, not events.** `::select`, `::check` and `::link` are
86
86
  functions the component calls. `:on-click` and friends stay what they are in
87
87
  the language: DOM events.
88
88
 
@@ -95,13 +95,13 @@ and a plugin left holding a removed element leaves its backdrop, its popper
95
95
  and the page's scroll lock behind.
96
96
 
97
97
  **Values are read and written.** `bs-input`, `bs-select`, `bs-check`,
98
- `bs-range`, `bs-modal`, `bs-offcanvas` and `bs-toast` keep `:value` or
99
- `:open` in step with what is on screen. Name the instance and read it from
98
+ `bs-range`, `bs-modal`, `bs-offcanvas` and `bs-toast` keep `::value` or
99
+ `::open` in step with what is on screen. Name the instance and read it from
100
100
  anywhere:
101
101
 
102
102
  ```html
103
- <bs-input :aka="email" :label="Email" :type="email" />
104
- <bs-button :disabled=${!email.value}>Send</bs-button>
103
+ <bs-input :aka="email" ::label="Email" ::type="email" />
104
+ <bs-button ::disabled=${!email.value}>Send</bs-button>
105
105
  ```
106
106
 
107
107
  That holds however deeply the component sits: a `bs-toast :aka="saved"`
@@ -112,8 +112,8 @@ written inside a `bs-toast-container` is still named where you wrote it, so
112
112
  and does it pass `check`? -- which is what a submit button needs:
113
113
 
114
114
  ```html
115
- <bs-input :aka="email" :label="Email" :check=${v => v.includes('@')} />
116
- <bs-button :disabled=${!email.valid}>Send</bs-button>
115
+ <bs-input :aka="email" ::label="Email" ::check=${v => v.includes('@')} />
116
+ <bs-button ::disabled=${!email.valid}>Send</bs-button>
117
117
  ```
118
118
 
119
119
  It is not the negation of the error state. An empty field is not marked
@@ -155,7 +155,7 @@ it binds the item as `data`. The kit has no use for it: every optional region
155
155
  here renders a parameter it already has a name for.
156
156
 
157
157
  Optional parts of a component are parameters, and a named slot where markup
158
- belongs — `bs-card`'s header is both: `:header` sets the text, and a
158
+ belongs — `bs-card`'s header is both: `::header` sets the text, and a
159
159
  `:slot="header"` replaces it with markup. A `<:slot>` may sit inside a
160
160
  `:for-data` but not inside a `:for-each`, which is what makes that possible.
161
161
 
@@ -165,10 +165,10 @@ The CDN URLs and their hashes are tokens like any other, so a page points the
165
165
  kit at its own copy without forking `base.htm`:
166
166
 
167
167
  ```html
168
- <head ::bsCssUrl="/vendor/bootstrap.min.css"
169
- ::bsJsUrl="/vendor/bootstrap.bundle.min.js"
170
- ::bsCssIntegrity=${null}
171
- ::bsJsIntegrity=${null}>
168
+ <head :const-bsCssUrl="/vendor/bootstrap.min.css"
169
+ :const-bsJsUrl="/vendor/bootstrap.bundle.min.js"
170
+ :const-bsCssIntegrity=${null}
171
+ :const-bsJsIntegrity=${null}>
172
172
  <:import src="/bootstrap-kit/all.htm" />
173
173
  </head>
174
174
  ```
@@ -201,7 +201,7 @@ Four reasons this is worth having rather than a convenience:
201
201
  variables, so restyling everything is setting one value at the import site:
202
202
 
203
203
  ```html
204
- <head ::bsRadius="1rem" ::bsLinkDecoration="none">
204
+ <head :const-bsRadius="1rem" :const-bsLinkDecoration="none">
205
205
  <:import src="/bootstrap-kit/all.htm" />
206
206
  </head>
207
207
  ```
@@ -220,7 +220,7 @@ flashes the wrong mode, and `<bs-theme-toggle />` to switch it.
220
220
 
221
221
  ## Components
222
222
 
223
- Every tag also takes `:extra`. Defaults are in the definitions, which are
223
+ Every tag also takes `::extra`. Defaults are in the definitions, which are
224
224
  commented.
225
225
 
226
226
  ### Content
@@ -293,7 +293,7 @@ Bootstrap, and each says so in its own file:
293
293
  cannot reach it by name. `$host` is the instance it was slotted *into* —
294
294
  the one place the kit needs the structural relationship rather than the
295
295
  lexical one. No id is written by anyone.
296
- - **`bs-pagination` says `:current`, not `:page`.** `page` is already the
296
+ - **`bs-pagination` says `::current`, not `::page`.** `page` is already the
297
297
  name of `<html>`'s own scope, so a parameter of that name would resolve to
298
298
  the scope rather than to the number.
299
299
  - **`bs-tooltip` and `bs-popover` construct their plugin from a
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@markout-lang/bootstrap-kit",
3
- "version": "0.2.2",
3
+ "version": "0.3.0",
4
4
  "description": "Bootstrap 5.3 as Markout components: one part per component, with the id wiring, the ARIA attributes and the repetition written once",
5
5
  "repository": {
6
6
  "type": "git",
@@ -11,6 +11,9 @@
11
11
  "url": "https://github.com/fcapolini/markout/issues"
12
12
  },
13
13
  "homepage": "https://markout.dev",
14
+ "peerDependencies": {
15
+ "@markout-lang/core": "^0.5.0"
16
+ },
14
17
  "markout": {
15
18
  "root": "/bootstrap-kit"
16
19
  },
package/parts/accordion.htm CHANGED
@@ -6,8 +6,8 @@
6
6
  markup belongs in a slot rather than in an array.
7
7
 
8
8
  <bs-accordion>
9
- <bs-accordion-item :title="First" :open>…</bs-accordion-item>
10
- <bs-accordion-item :title="Second">…</bs-accordion-item>
9
+ <bs-accordion-item ::title="First" ::open>…</bs-accordion-item>
10
+ <bs-accordion-item ::title="Second">…</bs-accordion-item>
11
11
  </bs-accordion>
12
12
 
13
13
  The item needs one thing from the accordion — the id Bootstrap closes the
@@ -28,9 +28,9 @@
28
28
  class="accordion ${extra ?? ''}"
29
29
 
30
30
  // parameters
31
- :extra=${null} // extra classes for this instance
32
- :exclusive=${true} // one open panel at a time
33
- :flush=${false}
31
+ ::extra=${null} // extra classes for this instance
32
+ ::exclusive=${true} // one open panel at a time
33
+ ::flush=${false}
34
34
 
35
35
  /*
36
36
  private: the id the items point at. Owned here rather than
@@ -48,9 +48,9 @@
48
48
  class="accordion-item ${extra ?? ''}"
49
49
 
50
50
  // parameters
51
- :extra=${null} // extra classes for this instance
52
- :title=${''}
53
- :open=${false}
51
+ ::extra=${null} // extra classes for this instance
52
+ ::title=${''}
53
+ ::open=${false}
54
54
 
55
55
  // private: the accordion this item was slotted into, if any
56
56
  :_parent=${$host && $host.exclusive ? $host._id : null}
package/parts/alert.htm CHANGED
@@ -22,10 +22,10 @@
22
22
  role="alert"
23
23
 
24
24
  // parameters
25
- :extra=${null} // extra classes for this instance
26
- :variant=${'primary'}
27
- :heading=${null}
28
- :dismissible=${false}
25
+ ::extra=${null} // extra classes for this instance
26
+ ::variant=${'primary'}
27
+ ::heading=${null}
28
+ ::dismissible=${false}
29
29
 
30
30
  // private
31
31
  :_class=${['alert', `alert-${variant}`, extra].filter(s => s).join(' ')}
@@ -40,8 +40,8 @@
40
40
 
41
41
  <:slot />
42
42
 
43
- <bs-close :dismiss="alert"
44
- :label="Close alert"
43
+ <bs-close ::dismiss="alert"
44
+ ::label="Close alert"
45
45
  :if=${dismissible} />
46
46
  </:define>
47
47
 
package/parts/badge.htm CHANGED
@@ -9,10 +9,10 @@
9
9
  <:define tag="bs-badge:span"
10
10
 
11
11
  // parameters
12
- :extra=${null} // extra classes for this instance
13
- :variant=${'primary'}
14
- :pill=${false}
15
- :position=${null} // 'top-end' | 'bottom-end' — for a badge on a button
12
+ ::extra=${null} // extra classes for this instance
13
+ ::variant=${'primary'}
14
+ ::pill=${false}
15
+ ::position=${null} // 'top-end' | 'bottom-end' — for a badge on a button
16
16
 
17
17
  // private
18
18
  :_class=${[
package/parts/base.htm CHANGED
@@ -6,7 +6,7 @@
6
6
  once into Bootstrap's own CSS variables below, so restyling the kit means
7
7
  setting one value at the import site instead of patching each component:
8
8
 
9
- <head ::bsRadius="1rem">
9
+ <head :const-bsRadius="1rem">
10
10
  <:import src="/bootstrap-kit/all.htm" />
11
11
  </head>
12
12
 
@@ -16,25 +16,25 @@
16
16
  forking this file — and so does a page serving its own Sass build, which is
17
17
  how a design system gets past what the tokens below can reach:
18
18
 
19
- <head ::bsCssUrl="/vendor/bootstrap.min.css"
20
- ::bsJsUrl="/vendor/bootstrap.bundle.min.js"
21
- ::bsCssIntegrity=${null}
22
- ::bsJsIntegrity=${null}>
19
+ <head :const-bsCssUrl="/vendor/bootstrap.min.css"
20
+ :const-bsJsUrl="/vendor/bootstrap.bundle.min.js"
21
+ :const-bsCssIntegrity=${null}
22
+ :const-bsJsIntegrity=${null}>
23
23
  -->
24
24
  <lib
25
25
  // where Bootstrap comes from
26
- ::bsCssUrl=${'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css'}
27
- ::bsCssIntegrity=${'sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB'}
28
- ::bsJsUrl=${'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js'}
29
- ::bsJsIntegrity=${'sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI'}
26
+ :const-bsCssUrl=${'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css'}
27
+ :const-bsCssIntegrity=${'sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB'}
28
+ :const-bsJsUrl=${'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js'}
29
+ :const-bsJsIntegrity=${'sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI'}
30
30
 
31
31
  // tokens
32
- ::bsRadius=${'0.375rem'}
33
- ::bsRadiusSm=${'0.25rem'}
34
- ::bsRadiusLg=${'0.5rem'}
35
- ::bsRadiusPill=${'50rem'}
36
- ::bsFontSans=${'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'}
37
- ::bsLinkDecoration=${'underline'}
32
+ :const-bsRadius=${'0.375rem'}
33
+ :const-bsRadiusSm=${'0.25rem'}
34
+ :const-bsRadiusLg=${'0.5rem'}
35
+ :const-bsRadiusPill=${'50rem'}
36
+ :const-bsFontSans=${'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'}
37
+ :const-bsLinkDecoration=${'underline'}
38
38
  >
39
39
  <meta charset="utf-8">
40
40
  <meta name="viewport"
package/parts/breadcrumb.htm CHANGED
@@ -15,13 +15,13 @@
15
15
  class=${extra}
16
16
 
17
17
  // parameters
18
- :extra=${null} // extra classes for this instance
19
- :items=${[
18
+ ::extra=${null} // extra classes for this instance
19
+ ::items=${[
20
20
  { name: 'Home', link: '#' },
21
21
  { name: 'Library', link: '#' },
22
22
  { name: 'Data' },
23
23
  ]}
24
- :divider=${null}
24
+ ::divider=${null}
25
25
 
26
26
  /*
27
27
  Bootstrap reads the separator from a CSS custom property, and
package/parts/button.htm CHANGED
@@ -9,8 +9,8 @@
9
9
  a modal, an offcanvas or a collapse is this same tag rather than a
10
10
  component of its own:
11
11
 
12
- <bs-button :toggle="modal" :target="#signup">Sign up</bs-button>
13
- <bs-button :dismiss="modal" :variant="secondary">Close</bs-button>
12
+ <bs-button ::toggle="modal" ::target="#signup">Sign up</bs-button>
13
+ <bs-button ::dismiss="modal" ::variant="secondary">Close</bs-button>
14
14
 
15
15
  Note the two spellings of "conditional attribute" used throughout the kit:
16
16
  a plain `name=${expr}` sets a VALUE and removes the attribute when the
@@ -20,16 +20,16 @@
20
20
  <:define tag="bs-button:button"
21
21
 
22
22
  // parameters
23
- :extra=${null} // extra classes for this instance
24
- :variant=${'primary'}
25
- :outline=${false}
26
- :size=${null}
27
- :active=${false}
28
- :disabled=${false}
29
- :type=${'button'}
30
- :toggle=${null}
31
- :target=${null}
32
- :dismiss=${null}
23
+ ::extra=${null} // extra classes for this instance
24
+ ::variant=${'primary'}
25
+ ::outline=${false}
26
+ ::size=${null}
27
+ ::active=${false}
28
+ ::disabled=${false}
29
+ ::type=${'button'}
30
+ ::toggle=${null}
31
+ ::target=${null}
32
+ ::dismiss=${null}
33
33
 
34
34
  // private
35
35
  :_class=${[
@@ -59,16 +59,16 @@
59
59
  <:define tag="bs-link:a"
60
60
 
61
61
  // parameters
62
- :extra=${null} // extra classes for this instance
63
- :href=${'#'}
64
- :variant=${null}
65
- :outline=${false}
66
- :size=${null}
67
- :active=${false}
68
- :disabled=${false}
69
- :button=${false}
70
- :toggle=${null}
71
- :target=${null}
62
+ ::extra=${null} // extra classes for this instance
63
+ ::href=${'#'}
64
+ ::variant=${null}
65
+ ::outline=${false}
66
+ ::size=${null}
67
+ ::active=${false}
68
+ ::disabled=${false}
69
+ ::button=${false}
70
+ ::toggle=${null}
71
+ ::target=${null}
72
72
 
73
73
  // private
74
74
  :_class=${[
@@ -99,10 +99,10 @@
99
99
  <:define tag="bs-button-group:div"
100
100
 
101
101
  // parameters
102
- :extra=${null} // extra classes for this instance
103
- :label=${'Button group'}
104
- :size=${null}
105
- :vertical=${false}
102
+ ::extra=${null} // extra classes for this instance
103
+ ::label=${'Button group'}
104
+ ::size=${null}
105
+ ::vertical=${false}
106
106
 
107
107
  // private
108
108
  :_class=${[
@@ -127,9 +127,9 @@
127
127
  role="toolbar"
128
128
 
129
129
  // parameters
130
- :extra=${null} // extra classes for this instance
131
- :label=${'Toolbar'}
132
- :gap=${2}
130
+ ::extra=${null} // extra classes for this instance
131
+ ::label=${'Toolbar'}
132
+ ::gap=${2}
133
133
 
134
134
  aria-label=${label}
135
135
  :class-gap-1=${gap === 1}
@@ -149,10 +149,10 @@
149
149
  class="btn-close ${extra ?? ''}"
150
150
 
151
151
  // parameters
152
- :extra=${null} // extra classes for this instance
153
- :label=${'Close'}
154
- :dismiss=${null}
155
- :disabled=${false}
152
+ ::extra=${null} // extra classes for this instance
153
+ ::label=${'Close'}
154
+ ::dismiss=${null}
155
+ ::disabled=${false}
156
156
 
157
157
  aria-label=${label}
158
158
  :attr-disabled=${disabled}
package/parts/card.htm CHANGED
@@ -7,7 +7,7 @@
7
7
  given, which is the kit's general shape — a caller writes what the card
8
8
  HAS, not the markup that produces it.
9
9
 
10
- <bs-card :title="Card title" :footer="2 days ago">
10
+ <bs-card ::title="Card title" ::footer="2 days ago">
11
11
  <p class="card-text">Some quick example text.</p>
12
12
  </bs-card>
13
13
 
@@ -19,18 +19,18 @@
19
19
  <:define tag="bs-card:div"
20
20
 
21
21
  // parameters
22
- :extra=${null} // extra classes for this instance
23
- :bodyExtra=${null} // extra classes for the body: `p-0`, `p-4`, `d-flex`
24
- :title=${null}
25
- :subtitle=${null}
26
- :header=${null}
27
- :footer=${null}
28
- :image=${null}
29
- :imageAlt=${''}
30
- :imageBottom=${false}
31
- :variant=${null} // colours the whole card, e.g. 'primary'
32
- :border=${null} // colours only the border
33
- :align=${null} // 'center' | 'end'
22
+ ::extra=${null} // extra classes for this instance
23
+ ::bodyExtra=${null} // extra classes for the body: `p-0`, `p-4`, `d-flex`
24
+ ::title=${null}
25
+ ::subtitle=${null}
26
+ ::header=${null}
27
+ ::footer=${null}
28
+ ::image=${null}
29
+ ::imageAlt=${''}
30
+ ::imageBottom=${false}
31
+ ::variant=${null} // colours the whole card, e.g. 'primary'
32
+ ::border=${null} // colours only the border
33
+ ::align=${null} // 'center' | 'end'
34
34
 
35
35
  // private
36
36
  :_class=${[
@@ -84,10 +84,10 @@
84
84
  <:define tag="bs-card-group:div"
85
85
 
86
86
  // parameters
87
- :extra=${null} // extra classes for this instance
88
- :cols=${3}
89
- :gap=${4}
90
- :attached=${false} // a seamless strip instead of separate cards
87
+ ::extra=${null} // extra classes for this instance
88
+ ::cols=${3}
89
+ ::gap=${4}
90
+ ::attached=${false} // a seamless strip instead of separate cards
91
91
 
92
92
  // private
93
93
  :_class=${attached
package/parts/carousel.htm CHANGED
@@ -13,15 +13,15 @@
13
13
  class="carousel slide ${extra ?? ''}"
14
14
 
15
15
  // parameters
16
- :extra=${null} // extra classes for this instance
17
- :slides=${[]}
18
- :controls=${true}
19
- :indicators=${true}
20
- :captions=${true}
21
- :fade=${false}
22
- :ride=${true}
23
- :interval=${5000}
24
- :dark=${false}
16
+ ::extra=${null} // extra classes for this instance
17
+ ::slides=${[]}
18
+ ::controls=${true}
19
+ ::indicators=${true}
20
+ ::captions=${true}
21
+ ::fade=${false}
22
+ ::ride=${true}
23
+ ::interval=${5000}
24
+ ::dark=${false}
25
25
 
26
26
  // private
27
27
  :_id=${`bs-carousel-${$id}`}
package/parts/check.htm CHANGED
@@ -12,16 +12,16 @@
12
12
  <:define tag="bs-check:div"
13
13
 
14
14
  // parameters
15
- :extra=${null} // extra classes for this instance
16
- :label=${null}
17
- :type=${'checkbox'} // 'checkbox' | 'radio' | 'switch'
18
- :name=${null}
19
- :value=${null}
20
- :checked=${false}
21
- :inline=${false}
22
- :reverse=${false}
23
- :disabled=${false}
24
- :help=${null}
15
+ ::extra=${null} // extra classes for this instance
16
+ ::label=${null}
17
+ ::type=${'checkbox'} // 'checkbox' | 'radio' | 'switch'
18
+ ::name=${null}
19
+ ::value=${null}
20
+ ::checked=${false}
21
+ ::inline=${false}
22
+ ::reverse=${false}
23
+ ::disabled=${false}
24
+ ::help=${null}
25
25
 
26
26
  // private
27
27
  :_id=${`bs-check-${$id}`}
@@ -62,13 +62,13 @@
62
62
  role="group"
63
63
 
64
64
  // parameters
65
- :extra=${null} // extra classes for this instance
66
- :legend=${null}
67
- :type=${'radio'}
68
- :options=${[]}
69
- :value=${null}
70
- :inline=${false}
71
- :disabled=${false}
65
+ ::extra=${null} // extra classes for this instance
66
+ ::legend=${null}
67
+ ::type=${'radio'}
68
+ ::options=${[]}
69
+ ::value=${null}
70
+ ::inline=${false}
71
+ ::disabled=${false}
72
72
 
73
73
  // private
74
74
  :_name=${`bs-check-group-${$id}`}
@@ -113,15 +113,15 @@
113
113
  class="mb-3 ${extra ?? ''}"
114
114
 
115
115
  // parameters
116
- :extra=${null} // extra classes for this instance
117
- :label=${null}
118
- :name=${null}
119
- :min=${0}
120
- :max=${100}
121
- :step=${1}
122
- :value=${50}
123
- :disabled=${false}
124
- :showValue=${false}
116
+ ::extra=${null} // extra classes for this instance
117
+ ::label=${null}
118
+ ::name=${null}
119
+ ::min=${0}
120
+ ::max=${100}
121
+ ::step=${1}
122
+ ::value=${50}
123
+ ::disabled=${false}
124
+ ::showValue=${false}
125
125
 
126
126
  // private
127
127
  :_id=${`bs-range-${$id}`}
package/parts/collapse.htm CHANGED
@@ -6,8 +6,8 @@
6
6
  anything can open a collapse, and often several things do — so the region
7
7
  takes a `:name` and a `bs-button` points at it:
8
8
 
9
- <bs-button :toggle="collapse" :target="#details">Details</bs-button>
10
- <bs-collapse :name="details">…</bs-collapse>
9
+ <bs-button ::toggle="collapse" ::target="#details">Details</bs-button>
10
+ <bs-collapse ::name="details">…</bs-collapse>
11
11
 
12
12
  `:horizontal` collapses width instead of height, in which case Bootstrap
13
13
  needs the content to have a width of its own.
@@ -16,10 +16,10 @@
16
16
  class="collapse ${extra ?? ''}"
17
17
 
18
18
  // parameters
19
- :extra=${null} // extra classes for this instance
20
- :name=${null}
21
- :open=${false}
22
- :horizontal=${false}
19
+ ::extra=${null} // extra classes for this instance
20
+ ::name=${null}
21
+ ::open=${false}
22
+ ::horizontal=${false}
23
23
 
24
24
  id=${name}
25
25
  :class-show=${open}
package/parts/dropdown.htm CHANGED
@@ -15,21 +15,21 @@
15
15
  <:define tag="bs-dropdown:div"
16
16
 
17
17
  // parameters
18
- :extra=${null} // extra classes for this instance
19
- :label=${'Dropdown'}
20
- :items=${[
18
+ ::extra=${null} // extra classes for this instance
19
+ ::label=${'Dropdown'}
20
+ ::items=${[
21
21
  { name: 'Action', link: '#' },
22
22
  { name: 'Another action', link: '#' },
23
23
  { divider: true },
24
24
  { name: 'Something else here', link: '#' },
25
25
  ]}
26
- :variant=${'primary'}
27
- :outline=${false}
28
- :size=${null}
29
- :split=${false}
30
- :direction=${'down'} // 'down' | 'up' | 'start' | 'end'
31
- :align=${'start'} // 'start' | 'end'
32
- :dark=${false}
26
+ ::variant=${'primary'}
27
+ ::outline=${false}
28
+ ::size=${null}
29
+ ::split=${false}
30
+ ::direction=${'down'} // 'down' | 'up' | 'start' | 'end'
31
+ ::align=${'start'} // 'start' | 'end'
32
+ ::dark=${false}
33
33
 
34
34
  // private
35
35
  :_id=${`bs-dropdown-${$id}`}
package/parts/image.htm CHANGED
@@ -8,12 +8,12 @@
8
8
  <:define tag="bs-image:img"
9
9
 
10
10
  // parameters
11
- :extra=${null} // extra classes for this instance
12
- :src=${null}
13
- :alt=${''}
14
- :fluid=${true}
15
- :thumbnail=${false}
16
- :rounded=${false}
11
+ ::extra=${null} // extra classes for this instance
12
+ ::src=${null}
13
+ ::alt=${''}
14
+ ::fluid=${true}
15
+ ::thumbnail=${false}
16
+ ::rounded=${false}
17
17
 
18
18
  class=${extra}
19
19
  src=${src}
@@ -28,11 +28,11 @@
28
28
  class="figure ${extra ?? ''}"
29
29
 
30
30
  // parameters
31
- :extra=${null} // extra classes for this instance
32
- :src=${null}
33
- :alt=${''}
34
- :caption=${null}
35
- :align=${null} // 'center' | 'end'
31
+ ::extra=${null} // extra classes for this instance
32
+ ::src=${null}
33
+ ::alt=${''}
34
+ ::caption=${null}
35
+ ::align=${null} // 'center' | 'end'
36
36
  >
37
37
  <img class="figure-img img-fluid rounded"
38
38
  src=${src}
package/parts/input.htm CHANGED
@@ -9,8 +9,8 @@
9
9
  typed, so a page can name the instance and read it from anywhere else on
10
10
  the page —
11
11
 
12
- <bs-input :aka="email" :label="Email" :type="email" />
13
- <bs-button :disabled=${!email.value}>Send</bs-button>
12
+ <bs-input :aka="email" ::label="Email" ::type="email" />
13
+ <bs-button ::disabled=${!email.value}>Send</bs-button>
14
14
 
15
15
  — which is `:aka` doing what it does everywhere else, not a mechanism
16
16
  special to forms.
@@ -21,8 +21,8 @@
21
21
 
22
22
  `:valid` is the other side of that, and what a form's own controls read —
23
23
 
24
- <bs-input :aka="email" :label="Email" :check=${v => v.includes('@')} />
25
- <bs-button :disabled=${!email.valid}>Send</bs-button>
24
+ <bs-input :aka="email" ::label="Email" ::check=${v => v.includes('@')} />
25
+ <bs-button ::disabled=${!email.valid}>Send</bs-button>
26
26
 
27
27
  It is deliberately NOT the negation of the error state, which is the one
28
28
  thing about it worth knowing. An untouched field is not wrong — that is
@@ -38,20 +38,20 @@
38
38
  class="mb-3 ${extra ?? ''}"
39
39
 
40
40
  // parameters
41
- :extra=${null} // extra classes for this instance
42
- :label=${null}
43
- :type=${'text'}
44
- :name=${null}
45
- :value=${''}
46
- :placeholder=${''}
47
- :help=${null}
48
- :size=${null} // 'sm' | 'lg'
49
- :disabled=${false}
50
- :readonly=${false}
51
- :required=${false}
52
- :floating=${false}
53
- :check=${(v) => true}
54
- :message=${'Please check this value.'}
41
+ ::extra=${null} // extra classes for this instance
42
+ ::label=${null}
43
+ ::type=${'text'}
44
+ ::name=${null}
45
+ ::value=${''}
46
+ ::placeholder=${''}
47
+ ::help=${null}
48
+ ::size=${null} // 'sm' | 'lg'
49
+ ::disabled=${false}
50
+ ::readonly=${false}
51
+ ::required=${false}
52
+ ::floating=${false}
53
+ ::check=${(v) => true}
54
+ ::message=${'Please check this value.'}
55
55
 
56
56
  // private
57
57
  :_id=${`bs-input-${$id}`}
@@ -119,18 +119,18 @@
119
119
  class="mb-3 ${extra ?? ''}"
120
120
 
121
121
  // parameters
122
- :extra=${null} // extra classes for this instance
123
- :label=${null}
124
- :name=${null}
125
- :value=${''}
126
- :placeholder=${''}
127
- :rows=${3}
128
- :help=${null}
129
- :disabled=${false}
130
- :readonly=${false}
131
- :required=${false}
132
- :check=${(v) => true}
133
- :message=${'Please check this value.'}
122
+ ::extra=${null} // extra classes for this instance
123
+ ::label=${null}
124
+ ::name=${null}
125
+ ::value=${''}
126
+ ::placeholder=${''}
127
+ ::rows=${3}
128
+ ::help=${null}
129
+ ::disabled=${false}
130
+ ::readonly=${false}
131
+ ::required=${false}
132
+ ::check=${(v) => true}
133
+ ::message=${'Please check this value.'}
134
134
 
135
135
  // private
136
136
  :_id=${`bs-textarea-${$id}`}
@@ -172,10 +172,10 @@
172
172
  <:define tag="bs-input-group:div"
173
173
 
174
174
  // parameters
175
- :extra=${null} // extra classes for this instance
176
- :prefix=${null}
177
- :suffix=${null}
178
- :size=${null}
175
+ ::extra=${null} // extra classes for this instance
176
+ ::prefix=${null}
177
+ ::suffix=${null}
178
+ ::size=${null}
179
179
 
180
180
  // private
181
181
  :_class=${['input-group', size ? `input-group-${size}` : '', extra]
package/parts/list-group.htm CHANGED
@@ -14,14 +14,14 @@
14
14
  <:define tag="bs-list-group:div"
15
15
 
16
16
  // parameters
17
- :extra=${null} // extra classes for this instance
18
- :items=${[
17
+ ::extra=${null} // extra classes for this instance
18
+ ::items=${[
19
19
  { name: 'An item', active: true },
20
20
  { name: 'A second item' },
21
21
  { name: 'A disabled item', disabled: true },
22
22
  ]}
23
- :flush=${false}
24
- :horizontal=${false}
23
+ ::flush=${false}
24
+ ::horizontal=${false}
25
25
 
26
26
  // private
27
27
  :_class=${[
@@ -49,8 +49,8 @@
49
49
  :if=${item.text}>${item.text}</span>
50
50
  </span>
51
51
 
52
- <bs-badge :variant=${item.badge?.variant ?? 'secondary'}
53
- :pill
52
+ <bs-badge ::variant=${item.badge?.variant ?? 'secondary'}
53
+ ::pill
54
54
  :if=${item.badge}>${item.badge?.name ?? item.badge}</bs-badge>
55
55
  </a>
56
56
  </:define>
package/parts/modal.htm CHANGED
@@ -5,8 +5,8 @@
5
5
  <!---
6
6
  A modal. Opened the Bootstrap way, by a trigger naming it:
7
7
 
8
- <bs-button :toggle="modal" :target="#signup">Sign up</bs-button>
9
- <bs-modal :name="signup" :title="Sign up">…</bs-modal>
8
+ <bs-button ::toggle="modal" ::target="#signup">Sign up</bs-button>
9
+ <bs-modal ::name="signup" ::title="Sign up">…</bs-modal>
10
10
 
11
11
  The footer is a named slot with a working default, so a modal that only
12
12
  needs a Close button doesn't have to say so. That is also why it isn't an
@@ -23,15 +23,15 @@
23
23
  tabindex="-1"
24
24
 
25
25
  // parameters
26
- :extra=${null} // extra classes for this instance
27
- :name=${null}
28
- :title=${''}
29
- :size=${null} // 'sm' | 'lg' | 'xl'
30
- :centered=${false}
31
- :scrollable=${false}
32
- :fullscreen=${null} // true | 'sm-down' | 'md-down' | ...
33
- :staticBackdrop=${false}
34
- :open=${false}
26
+ ::extra=${null} // extra classes for this instance
27
+ ::name=${null}
28
+ ::title=${''}
29
+ ::size=${null} // 'sm' | 'lg' | 'xl'
30
+ ::centered=${false}
31
+ ::scrollable=${false}
32
+ ::fullscreen=${null} // true | 'sm-down' | 'md-down' | ...
33
+ ::staticBackdrop=${false}
34
+ ::open=${false}
35
35
 
36
36
  // private
37
37
  :_labelId=${`bs-modal-title-${$id}`}
@@ -100,7 +100,7 @@
100
100
  <div class="modal-content">
101
101
  <div class="modal-header">
102
102
  <h1 class="modal-title fs-5" id=${_labelId}>${title}</h1>
103
- <bs-close :dismiss="modal" />
103
+ <bs-close ::dismiss="modal" />
104
104
  </div>
105
105
 
106
106
  <div class="modal-body">
@@ -109,7 +109,7 @@
109
109
 
110
110
  <div class="modal-footer">
111
111
  <:slot name="footer">
112
- <bs-button :variant="secondary" :dismiss="modal">Close</bs-button>
112
+ <bs-button ::variant="secondary" ::dismiss="modal">Close</bs-button>
113
113
  </:slot>
114
114
  </div>
115
115
  </div>
package/parts/nav.htm CHANGED
@@ -12,18 +12,18 @@
12
12
  <:define tag="bs-nav:ul"
13
13
 
14
14
  // parameters
15
- :extra=${null} // extra classes for this instance
16
- :items=${[
15
+ ::extra=${null} // extra classes for this instance
16
+ ::items=${[
17
17
  { name: 'Active', link: '#', active: true },
18
18
  { name: 'Link', link: '#' },
19
19
  { name: 'Disabled', link: '#', disabled: true },
20
20
  ]}
21
- :variant=${null} // 'tabs' | 'pills' | 'underline'
22
- :fill=${false}
23
- :justified=${false}
24
- :vertical=${false}
25
- :align=${'start'} // 'start' | 'center' | 'end'
26
- :toggle=${null} // 'tab' | 'pill' — for tabbed panes
21
+ ::variant=${null} // 'tabs' | 'pills' | 'underline'
22
+ ::fill=${false}
23
+ ::justified=${false}
24
+ ::vertical=${false}
25
+ ::align=${'start'} // 'start' | 'center' | 'end'
26
+ ::toggle=${null} // 'tab' | 'pill' — for tabbed panes
27
27
 
28
28
  // private
29
29
  :_class=${[
@@ -74,9 +74,9 @@
74
74
  role="tabpanel"
75
75
 
76
76
  // parameters
77
- :extra=${null} // extra classes for this instance
78
- :name=${null}
79
- :active=${false}
77
+ ::extra=${null} // extra classes for this instance
78
+ ::name=${null}
79
+ ::active=${false}
80
80
 
81
81
  id=${name}
82
82
  :class-show=${active}
package/parts/navbar.htm CHANGED
@@ -17,19 +17,19 @@
17
17
  <:define tag="bs-navbar:nav"
18
18
 
19
19
  // parameters
20
- :extra=${null} // extra classes for this instance
21
- :items=${[
20
+ ::extra=${null} // extra classes for this instance
21
+ ::items=${[
22
22
  { name: 'Home', link: '#', active: true },
23
23
  { name: 'Features', link: '#' },
24
24
  { name: 'Pricing', link: '#' },
25
25
  ]}
26
- :brand=${'#'}
27
- :expand=${'lg'}
28
- :container=${'container'} // 'container' | 'container-fluid' | ...
29
- :sticky=${false}
30
- :fixed=${false}
31
- :theme=${null} // 'light' | 'dark' — independent of the page
32
- :bg=${'body-tertiary'}
26
+ ::brand=${'#'}
27
+ ::expand=${'lg'}
28
+ ::container=${'container'} // 'container' | 'container-fluid' | ...
29
+ ::sticky=${false}
30
+ ::fixed=${false}
31
+ ::theme=${null} // 'light' | 'dark' — independent of the page
32
+ ::bg=${'body-tertiary'}
33
33
 
34
34
  // private
35
35
  :_id=${`bs-navbar-${$id}`}
package/parts/offcanvas.htm CHANGED
@@ -6,22 +6,22 @@
6
6
  An offcanvas panel: the same shape as `bs-modal`, opened by a trigger
7
7
  naming it or by the `:open` value.
8
8
 
9
- <bs-button :toggle="offcanvas" :target="#menu">Menu</bs-button>
10
- <bs-offcanvas :name="menu" :title="Menu">…</bs-offcanvas>
9
+ <bs-button ::toggle="offcanvas" ::target="#menu">Menu</bs-button>
10
+ <bs-offcanvas ::name="menu" ::title="Menu">…</bs-offcanvas>
11
11
  -->
12
12
  <:define tag="bs-offcanvas:div"
13
13
  class="offcanvas"
14
14
  tabindex="-1"
15
15
 
16
16
  // parameters
17
- :extra=${null} // extra classes for this instance
18
- :name=${null}
19
- :title=${''}
20
- :placement=${'start'} // 'start' | 'end' | 'top' | 'bottom'
21
- :backdrop=${true}
22
- :scroll=${false}
23
- :responsive=${null} // 'lg' — an offcanvas below this breakpoint only
24
- :open=${false}
17
+ ::extra=${null} // extra classes for this instance
18
+ ::name=${null}
19
+ ::title=${''}
20
+ ::placement=${'start'} // 'start' | 'end' | 'top' | 'bottom'
21
+ ::backdrop=${true}
22
+ ::scroll=${false}
23
+ ::responsive=${null} // 'lg' — an offcanvas below this breakpoint only
24
+ ::open=${false}
25
25
 
26
26
  // private
27
27
  :_labelId=${`bs-offcanvas-title-${$id}`}
@@ -79,7 +79,7 @@
79
79
  >
80
80
  <div class="offcanvas-header">
81
81
  <h5 class="offcanvas-title" id=${_labelId}>${title}</h5>
82
- <bs-close :dismiss="offcanvas" />
82
+ <bs-close ::dismiss="offcanvas" />
83
83
  </div>
84
84
 
85
85
  <div class="offcanvas-body">
package/parts/pagination.htm CHANGED
@@ -19,16 +19,16 @@
19
19
  <:define tag="bs-pagination:nav"
20
20
 
21
21
  // parameters
22
- :extra=${null} // extra classes for this instance
23
- :current=${1}
24
- :pages=${5}
25
- :size=${null} // 'sm' | 'lg'
26
- :align=${'start'} // 'start' | 'center' | 'end'
27
- :prev=${'«'}
28
- :next=${'»'}
29
- :link=${(n) => null}
30
- :select=${(n) => {}}
31
- :label=${'Page navigation'}
22
+ ::extra=${null} // extra classes for this instance
23
+ ::current=${1}
24
+ ::pages=${5}
25
+ ::size=${null} // 'sm' | 'lg'
26
+ ::align=${'start'} // 'start' | 'center' | 'end'
27
+ ::prev=${'«'}
28
+ ::next=${'»'}
29
+ ::link=${(n) => null}
30
+ ::select=${(n) => {}}
31
+ ::label=${'Page navigation'}
32
32
 
33
33
  // private
34
34
  :_class=${[
package/parts/placeholder.htm CHANGED
@@ -9,11 +9,11 @@
9
9
  <:define tag="bs-placeholder:span"
10
10
 
11
11
  // parameters
12
- :extra=${null} // extra classes for this instance
13
- :cols=${6}
14
- :size=${null} // 'xs' | 'sm' | 'lg'
15
- :variant=${null}
16
- :animation=${'glow'} // 'glow' | 'wave' | null
12
+ ::extra=${null} // extra classes for this instance
13
+ ::cols=${6}
14
+ ::size=${null} // 'xs' | 'sm' | 'lg'
15
+ ::variant=${null}
16
+ ::animation=${'glow'} // 'glow' | 'wave' | null
17
17
 
18
18
  // private
19
19
  :_class=${[animation ? `placeholder-${animation}` : '', extra]
package/parts/popover.htm CHANGED
@@ -13,12 +13,12 @@
13
13
  class="d-inline-block ${extra ?? ''}"
14
14
 
15
15
  // parameters
16
- :extra=${null} // extra classes for this instance
17
- :title=${''}
18
- :content=${''}
19
- :placement=${'right'}
20
- :trigger=${'click'}
21
- :html=${false}
16
+ ::extra=${null} // extra classes for this instance
17
+ ::title=${''}
18
+ ::content=${''}
19
+ ::placement=${'right'}
20
+ ::trigger=${'click'}
21
+ ::html=${false}
22
22
 
23
23
  // private
24
24
  :_build=${() => {
package/parts/progress.htm CHANGED
@@ -12,16 +12,16 @@
12
12
  class="progress ${extra ?? ''}"
13
13
 
14
14
  // parameters
15
- :extra=${null} // extra classes for this instance
16
- :value=${0}
17
- :min=${0}
18
- :max=${100}
19
- :label=${null}
20
- :variant=${null}
21
- :striped=${false}
22
- :animated=${false}
23
- :height=${null}
24
- :name=${'Progress'}
15
+ ::extra=${null} // extra classes for this instance
16
+ ::value=${0}
17
+ ::min=${0}
18
+ ::max=${100}
19
+ ::label=${null}
20
+ ::variant=${null}
21
+ ::striped=${false}
22
+ ::animated=${false}
23
+ ::height=${null}
24
+ ::name=${'Progress'}
25
25
 
26
26
  // private
27
27
  :_percent=${Math.max(0, Math.min(100, ((value - min) / (max - min || 1)) * 100))}
package/parts/scrollspy.htm CHANGED
@@ -6,17 +6,17 @@
6
6
  nav that matches what is currently on screen. `:target` is the selector
7
7
  of that nav, and the element this sits on is the thing being scrolled.
8
8
 
9
- <bs-nav :vertical id="toc" :items=${sections} />
10
- <bs-scrollspy :target="#toc" :height="300">…</bs-scrollspy>
9
+ <bs-nav ::vertical id="toc" ::items=${sections} />
10
+ <bs-scrollspy ::target="#toc" ::height="300">…</bs-scrollspy>
11
11
  -->
12
12
  <:define tag="bs-scrollspy:div"
13
13
 
14
14
  // parameters
15
- :extra=${null} // extra classes for this instance
16
- :target=${null}
17
- :offset=${0}
18
- :smooth=${false}
19
- :height=${null}
15
+ ::extra=${null} // extra classes for this instance
16
+ ::target=${null}
17
+ ::offset=${0}
18
+ ::smooth=${false}
19
+ ::height=${null}
20
20
 
21
21
  class=${extra}
22
22
  data-bs-spy="scroll"
package/parts/select.htm CHANGED
@@ -5,24 +5,24 @@
5
5
  A select whose options come from an array. An entry is either a string or
6
6
  `{ name, value, disabled }`, so the quick case stays quick:
7
7
 
8
- <bs-select :label="Size" :options=${['S', 'M', 'L']} />
8
+ <bs-select ::label="Size" ::options=${['S', 'M', 'L']} />
9
9
  -->
10
10
  <:define tag="bs-select:div"
11
11
  class="mb-3 ${extra ?? ''}"
12
12
 
13
13
  // parameters
14
- :extra=${null} // extra classes for this instance
15
- :label=${null}
16
- :name=${null}
17
- :options=${[]}
18
- :value=${null}
19
- :placeholder=${null}
20
- :help=${null}
21
- :size=${null} // 'sm' | 'lg'
22
- :multiple=${false}
23
- :disabled=${false}
24
- :required=${false}
25
- :floating=${false}
14
+ ::extra=${null} // extra classes for this instance
15
+ ::label=${null}
16
+ ::name=${null}
17
+ ::options=${[]}
18
+ ::value=${null}
19
+ ::placeholder=${null}
20
+ ::help=${null}
21
+ ::size=${null} // 'sm' | 'lg'
22
+ ::multiple=${false}
23
+ ::disabled=${false}
24
+ ::required=${false}
25
+ ::floating=${false}
26
26
 
27
27
  // private
28
28
  :_id=${`bs-select-${$id}`}
package/parts/spinner.htm CHANGED
@@ -10,11 +10,11 @@
10
10
  role="status"
11
11
 
12
12
  // parameters
13
- :extra=${null} // extra classes for this instance
14
- :variant=${null}
15
- :type=${'border'} // 'border' | 'grow'
16
- :small=${false}
17
- :label=${'Loading…'}
13
+ ::extra=${null} // extra classes for this instance
14
+ ::variant=${null}
15
+ ::type=${'border'} // 'border' | 'grow'
16
+ ::small=${false}
17
+ ::label=${'Loading…'}
18
18
 
19
19
  // private
20
20
  :_class=${[
package/parts/table.htm CHANGED
@@ -16,19 +16,19 @@
16
16
  <:define tag="bs-table:div"
17
17
 
18
18
  // parameters
19
- :extra=${null} // extra classes for this instance
20
- :columns=${[]}
21
- :rows=${[]}
22
- :caption=${null}
23
- :striped=${false}
24
- :hover=${false}
25
- :bordered=${false}
26
- :borderless=${false}
27
- :small=${false}
28
- :variant=${null}
29
- :headVariant=${null}
30
- :align=${null} // 'middle' | 'bottom'
31
- :responsive=${false}
19
+ ::extra=${null} // extra classes for this instance
20
+ ::columns=${[]}
21
+ ::rows=${[]}
22
+ ::caption=${null}
23
+ ::striped=${false}
24
+ ::hover=${false}
25
+ ::bordered=${false}
26
+ ::borderless=${false}
27
+ ::small=${false}
28
+ ::variant=${null}
29
+ ::headVariant=${null}
30
+ ::align=${null} // 'middle' | 'bottom'
31
+ ::responsive=${false}
32
32
 
33
33
  // private
34
34
  :_class=${[
package/parts/theme.htm CHANGED
@@ -41,10 +41,10 @@
41
41
  type="button"
42
42
 
43
43
  // parameters
44
- :extra=${null} // extra classes for this instance
45
- :variant=${'secondary'}
46
- :outline=${true}
47
- :size=${null}
44
+ ::extra=${null} // extra classes for this instance
45
+ ::variant=${'secondary'}
46
+ ::outline=${true}
47
+ ::size=${null}
48
48
 
49
49
  // private
50
50
  :_theme=${globalThis.document?.documentElement.getAttribute('data-bs-theme') ?? 'light'}
package/parts/toast.htm CHANGED
@@ -5,7 +5,7 @@
5
5
  <!---
6
6
  A toast, shown by setting a value rather than by calling anything:
7
7
 
8
- <bs-toast :aka="saved" :title="Saved">Your changes are safe.</bs-toast>
8
+ <bs-toast :aka="saved" ::title="Saved">Your changes are safe.</bs-toast>
9
9
  <bs-button :on-click=${() => saved.open = true}>Save</bs-button>
10
10
 
11
11
  `:handle-open` turns that value into the `show()` / `hide()` the plugin
@@ -20,13 +20,13 @@
20
20
  aria-atomic="true"
21
21
 
22
22
  // parameters
23
- :extra=${null} // extra classes for this instance
24
- :title=${null}
25
- :time=${null}
26
- :variant=${null}
27
- :open=${false}
28
- :autohide=${true}
29
- :delay=${5000}
23
+ ::extra=${null} // extra classes for this instance
24
+ ::title=${null}
25
+ ::time=${null}
26
+ ::variant=${null}
27
+ ::open=${false}
28
+ ::autohide=${true}
29
+ ::delay=${5000}
30
30
 
31
31
  // private
32
32
  :_class=${['toast', variant ? `text-bg-${variant} border-0` : '', extra]
@@ -60,7 +60,7 @@
60
60
  <strong class="me-auto">${title}</strong>
61
61
  <small class="text-body-secondary"
62
62
  :if=${time}>${time}</small>
63
- <bs-close :dismiss="toast" :label="Close notification" />
63
+ <bs-close ::dismiss="toast" ::label="Close notification" />
64
64
  </div>
65
65
 
66
66
  <!---
@@ -79,9 +79,9 @@
79
79
  <:slot />
80
80
  </div>
81
81
 
82
- <bs-close :dismiss="toast"
83
- :label="Close notification"
84
- :extra="me-2 m-auto"
82
+ <bs-close ::dismiss="toast"
83
+ ::label="Close notification"
84
+ ::extra="me-2 m-auto"
85
85
  :if=${!title} />
86
86
  </div>
87
87
  </:define>
@@ -93,8 +93,8 @@
93
93
  <:define tag="bs-toast-container:div"
94
94
 
95
95
  // parameters
96
- :extra=${null} // extra classes for this instance
97
- :placement=${'bottom-end'} // 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top-center'
96
+ ::extra=${null} // extra classes for this instance
97
+ ::placement=${'bottom-end'} // 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top-center'
98
98
 
99
99
  // private
100
100
  :_class=${[
package/parts/tooltip.htm CHANGED
@@ -29,11 +29,11 @@
29
29
  class="d-inline-block ${extra ?? ''}"
30
30
 
31
31
  // parameters
32
- :extra=${null} // extra classes for this instance
33
- :title=${''}
34
- :placement=${'top'}
35
- :html=${false}
36
- :trigger=${'hover focus'}
32
+ ::extra=${null} // extra classes for this instance
33
+ ::title=${''}
34
+ ::placement=${'top'}
35
+ ::html=${false}
36
+ ::trigger=${'hover focus'}
37
37
 
38
38
  // private
39
39
  :_build=${() => {