Skip to content

Commit 2faceca

Browse files
Der-ZaubererDer-Zauberer
committed
feat: 2.7 release
1 parent 0fa0196 commit 2faceca

23 files changed

Lines changed: 2206 additions & 22 deletions

‎components/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ <h2 id="get-started">Get started</h2>
7070
<p>Download you stylesheet <a href="/SimpleWebDesign/downloads">here</a> or use the hostet version of the css and javascript files:</p>
7171

7272
<swd-code swd-code-language="html">
73-
&lt;link href="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.6/swd.min.css" rel="stylesheet"&gt;<br>
74-
&lt;script src="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.6/swd.min.js"&gt;&lt;/script&gt;
73+
&lt;link href="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.7/swd.min.css" rel="stylesheet"&gt;<br>
74+
&lt;script src="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.7/swd.min.js"&gt;&lt;/script&gt;
7575
</swd-code>
7676

7777
<p>You can create a <samp>.html</samp> file using the following template. If you use the downloaded version of the resources you have to change the <samp>script.src</samp> and <samp>link.href</samp> paths to your local path.</p>
@@ -83,8 +83,8 @@ <h2 id="get-started">Get started</h2>
8383
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset="utf-8"&gt;<br>
8484
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>
8585
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta name="theme-color" content="#003ecc"&gt;<br>
86-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.6/swd.min.css" rel="stylesheet"&gt;<br>
87-
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.6/swd.min.js"&gt;&lt;/script&gt;<br>
86+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link href="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.7/swd.min.css" rel="stylesheet"&gt;<br>
87+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script src="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.7/swd.min.js"&gt;&lt;/script&gt;<br>
8888
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Template&lt;/title&gt;<br>
8989
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;<br>
9090
&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;<br><br>

‎downloads/index.html‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,40 @@
3232
<div class="container-md">
3333

3434
<swd-card-outline>
35-
<h3>2.6 SimpleWebDesign <swd-subtitle>latest</swd-subtitle></h3>
35+
<h3>2.7 SimpleWebDesign <swd-subtitle>latest</swd-subtitle></h3>
36+
37+
<h4>New Features</h4>
38+
<ul>
39+
<li>independent size variable for actions</li>
40+
<li>6 new items</li>
41+
</ul>
42+
43+
<h4>Improvements</h4>
44+
<ul>
45+
<li>(dropdown) selection also with buttons instead of only &lt;a&gt; tags</li>
46+
<li>selecting an elmement in selection also triggers a click event</li>
47+
<li>outlinbe for actions on tabbing</li>
48+
</ul>
49+
50+
<h4>Online Resources</h4>
51+
<swd-code swd-code-language="html">
52+
&lt;link href="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.7/swd.min.css" rel="stylesheet"&gt;<br>
53+
&lt;script src="https://der-zauberer.github.io/SimpleWebDesign/downloads/v2.7/swd.min.js"&gt;&lt;/script&gt;
54+
</swd-code>
55+
56+
<h4>Npm Package</h4>
57+
<code>npm i simplewebdesign</code>
58+
59+
<h4>Offline Downloads</h4>
60+
<div class="grid grid-cols-2">
61+
<a class="button grey-color" href="v2.7/swd.zip" download>swd.zip</a>
62+
<a class="button grey-color" href="v2.7/swd.min.zip" download>swd.min.zip</a>
63+
</div>
64+
65+
</swd-card-outline>
66+
67+
<swd-card-outline>
68+
<h3>2.6 SimpleWebDesign</h3>
3669

3770
<h4>New Features</h4>
3871
<ul>

‎downloads/latest/swd.css‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@
3030
background: var(--theme-background-color);
3131
color: var(--theme-text-color);
3232
font-family: var(--theme-font-family);
33-
font-size: 18px;
33+
--theme-font-size: 18px;
34+
--theme-action-font-size: 18px;
35+
font-size: var(--theme-font-size);
3436
font-weight: 500;
3537
line-height: round(1.6em, 1px);
3638
letter-spacing: 0.01em;
@@ -120,7 +122,7 @@ body {
120122
************/
121123

122124
swd-icon.hamburger-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 1 H18 M0 9 H 18 M0 17 H18" stroke-width="2" stroke="black"/></svg>') }
123-
swd-icon.more-icon { mask-image: url('data:image/svg+xml,<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><circle r="1.5" cx="8" cy="1.5"/><circle r="1.5" cx="8" cy="8"/><circle r="1.5" cx="8" cy="14.5"/></svg>') }
125+
swd-icon.more-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><circle r="1.5" cx="9" cy="1.5"/><circle r="1.5" cx="9" cy="9"/><circle r="1.5" cx="9" cy="16.5"/></svg>') }
124126
swd-icon.arrow-left-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 1 L1.5 9 L9.5 17 M2 9 H18" stroke-width="2" stroke="black" fill="none"/></svg>') }
125127
swd-icon.arrow-right-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M8.5 1 L16.5 9 L8.5 17 M0 9 H16" stroke-width="2" stroke="black" fill="none"/></svg>') }
126128
swd-icon.arrow-up-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M1 9.5 L9 1.5 L17 9.5 M9 2 V18" stroke-width="2" stroke="black" fill="none"/></svg>') }
@@ -135,9 +137,14 @@ swd-icon.external-icon { mask-image: url('data:image/svg+xml,<svg width="18" hei
135137
swd-icon.share-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><circle r="2" cx="15" cy="3" stroke-width="2" stroke="black" fill="black"/><circle r="2" cx="15" cy="15" stroke-width="2" stroke="black" fill="black"/><circle r="2" cx="3" cy="9" stroke-width="2" stroke="black" fill="black"/><path d="M15 3 L3 9 L15 15" stroke-width="2" stroke="black" fill="none"/></svg>') }
136138
swd-icon.done-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M1 9 L8 15 L17 3" stroke-width="2" stroke="black" fill="none"/></svg>') }
137139
swd-icon.close-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M1 1 L17 17 M17 1 L1 17" stroke-width="2" stroke="black"/></svg>') }
140+
swd-icon.reload-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M17 9 Q16.5 16.5 9 17 Q1.5 16.5 1 9 Q1.5 1.5 9 1 Q14 1 16.6 5 M17 0 V5 H12" stroke-width="2" stroke="black" fill="none"/></svg>') }
138141
swd-icon.add-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 9 L18 9 M9 0 L9 18" stroke-width="2" stroke="black"/></svg>') }
139142
swd-icon.pen-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 5 L4.5 17 L1 17 L1 13.5 L13 1.5 Z M3.5 12 L6.5 15" stroke-width="2" stroke="black" fill="none"/></svg>') }
143+
swd-icon.copy-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M2 5 H11 V17 H2 Z M7 4 V1 H16 V13 H12" stroke-width="2" stroke="black" fill="none"/></svg>') }
144+
swd-icon.save-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M1 1 H14 L17 4 V17 H1 Z M0 9 H18 M3 0 V9 M13 0 V9 M15 2 V9" stroke-width="2" stroke="black" fill="none"/></svg>') }
140145
swd-icon.delete-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M6 1 H12 M0 3 H18 M3 3 L3 17 L15 17 L15 4 M7 6 V14 M11 6 V14" stroke-width="2" stroke="black" fill="none"/></svg>') }
146+
swd-icon.file-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 H12 L15 4 V17 H3 Z M11 0 V5 H 16" stroke-width="2" stroke="black" fill="none"/></svg>') }
147+
swd-icon.folder-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M1 15 H17 V5 H9 V1 H1 Z" stroke-width="2" stroke="black" fill="none"/></svg>') }
141148
swd-icon.home-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M1 7.5 V17 H7 V11 H11 V17 H17 V7.5 L9 1.5 Z" stroke-width="2" stroke="black" fill="none"/></svg>') }
142149
swd-icon.dashboard-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M1 3 H17 V15 H1 Z M4 7 H 14 M4 11 H 12" stroke-width="2" stroke="black" fill="none"/></svg>') }
143150
swd-icon.calendar-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M1 3 H17 V17 H1 Z M3 0 V3 M7 0 V3 M11 0 V3 M15 0 V3 M0 5 H18 M4 9 H6 M8 9 H10 M12 9 H14 M4 13 H6 M8 13 H10 M12 13 H14" stroke-width="2" stroke="black" fill="none"/></svg>') }
@@ -149,12 +156,13 @@ swd-icon.history-icon { mask-image: url('data:image/svg+xml,<svg width="18" heig
149156
swd-icon.filter-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 L16 1 L11 7 L11 13 L7 16 L7 7 Z" stroke-width="2" stroke="black" fill="none"/></svg>') }
150157
swd-icon.options-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 3 H18 M0 9 H 18 M0 15 H18 M3 0 V6 M13 6 V12 M7 12 V18" stroke-width="2" stroke="black"/></svg>') }
151158
swd-icon.settings-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><circle r="6" cx="9" cy="9" stroke-width="2" stroke="black" fill="none"/><path d="M9 0 L9 3 M15.4 2.6 L13 5 M18 9 L15 9 M15.4 15.4 L13 13 M9 18 L9 15 M2.6 15.4 L5 13 M0 9 L3 9 M2.6 2.6 L5 5" stroke-width="3" stroke="black" fill="none"/></svg>') }
159+
swd-icon.offline-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M5 15 Q1 15 1 11 Q1 7 5 7 Q5 3 9 3 Q13 3 13 7 Q 17 7 17 11 Q17 15 13 15 Z M 1 1 L 17 17" stroke-width="2" stroke="black" fill="none"/></svg>') }
152160
swd-icon.star-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M9 2.5 L11 7 L16 7 L12.5 11 L14 16 L9 13 L4 16 L5.5 11 L2 7 L7 7 Z" stroke-width="2" stroke="black" fill="none"/></svg>') }
153161
swd-icon.star-filled-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M9 2.5 L11 7 L16 7 L12.5 11 L14 16 L9 13 L4 16 L5.5 11 L2 7 L7 7 Z" stroke-width="2" stroke="black"/></svg>') }
154162
swd-icon.bookmark-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 L3 15.5 L9 10 L15 15.5 L15 1 Z" stroke-width="2" stroke="black" fill="none"/></svg>') }
155163
swd-icon.bookmark-filled-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 L3 15.5 L9 10 L15 15.5 L15 1 Z" stroke-width="2" stroke="black"/></svg>') }
156164
swd-icon.loading-spinner-icon { mask-image: url('data:image/svg+xml;utf8,<svg width="18" height="18" stroke="white" xmlns="http://www.w3.org/2000/svg"><style>g{transform-origin:center;animation:rotation 2s linear infinite}g circle{animation:stroke 1.5s ease-in-out infinite}@keyframes rotation{100%{transform:rotate(360deg)}}@keyframes stroke{0%{stroke-dasharray:0 150;stroke-dashoffset:0}50%{stroke-dasharray:30 150;stroke-dashoffset:-20}95%,100%{stroke-dasharray:45 150;stroke-dashoffset:-49}}</style><g><circle cx="9" cy="9" r="8" fill="none" stroke-width="2"></circle></g></svg>') }
157-
swd-icon.grid-icon { mask-image: url('data:image/svg+xml,<svg width="9" height="9" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 H9 M0 1 H9 M0 2 H9 M0 3 H9 M0 4 H9 M0 5 H9 M0 6 H9 M0 7 H9 M0 8 H9 M0 9 H9 M0 0 V9 M1 0 V9 M2 0 V9 M3 0 V9 M4 0 V9 M5 0 V9 M6 0 V9 M7 0 V9 M8 0 V9 M9 0 V9" stroke-width="0.1" stroke="black"/></svg>') }
165+
swd-icon.grid-icon { mask-image: url('data:image/svg+xml,<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 H18 M0 2 H18 M0 4 H18 M0 6 H18 M0 8 H18 M0 10 H18 M0 12 H18 M0 14 H18 M0 16 H18 M0 18 H18 M0 0 V18 M2 0 V18 M4 0 V18 M6 0 V18 M8 0 V18 M10 0 V18 M12 0 V18 M14 0 V18 M16 0 V18 M18 0 V18" stroke-width="0.1" stroke="black"/></svg>') }
158166

159167
swd-icon {
160168
display: inline-block;
@@ -381,7 +389,7 @@ a.button, button, input, select, textarea, swd-menu a, swd-navigation a, swd-sel
381389
line-height: round(1.2em, 1px);
382390
padding: calc(round(0.5em, 1px) - var(--theme-border-width)) calc(round(0.6em, 1px) - var(--theme-border-width));
383391
font-family: var(--theme-font-family);
384-
font-size: var(--theme-font-size);
392+
font-size: var(--theme-action-font-size);
385393
color: var(--theme-text-color);
386394
user-select: none;
387395
-webkit-user-select: none;
@@ -423,6 +431,8 @@ a.button:not(.outline, .ghost, [disabled]):hover, a.button:not(.outline, .ghost,
423431
button:not(.outline, .ghost, :disabled):hover, button:not(.outline, .ghost, :disabled):focus, button:not(.outline, .ghost, :disabled):active, button:not(.outline, .ghost, :disabled)[selected],
424432
input[type="submit"]:not(.outline, .ghost, :disabled):hover, input[type="submit"]:not(.outline, .ghost, :disabled):focus, input[type="submit"]:not(.outline, .ghost, :disabled):active, input[type="submit"]:not(.outline, .ghost, :disabled)[selected] {
425433
background: var(--theme-secondary-color);
434+
outline-color: var(--theme-secondary-color);
435+
outline-offset: var(--theme-border-width);
426436
}
427437

428438
a.button.outline, button.outline, input[type="submit"].outline {
@@ -436,6 +446,7 @@ button.outline:not(:disabled):hover, button.outline:not(:disabled):focus, button
436446
input[type="submit"].outline:not(:disabled):hover, input[type="submit"].outline:not(:disabled):focus, input[type="submit"].outline:not(:disabled):active, input[type="submit"].outline:not(:disabled)[selected] {
437447
background: var(--theme-primary-color);
438448
color: white;
449+
outline: none;
439450
}
440451

441452
a.button.ghost, button.ghost, input[type="submit"].ghost {
@@ -448,9 +459,12 @@ button.ghost:not(:disabled):hover, button.ghost:not(:disabled):focus, button.gho
448459
input[type="submit"].ghost:not(:disabled):hover, input[type="submit"].ghost:not(:disabled):focus, input[type="submit"].ghost:not(:disabled):active, input[type="submit"].ghost:not(:disabled)[selected],
449460
swd-navigation a:not([disabled]):hover, swd-navigation a:not([disabled]):focus, swd-navigation a:not([disabled]):active, swd-navigation a:not([disabled])[selected] {
450461
background: var(--theme-element-primary-color);
462+
outline-color: var(--theme-element-primary-color);
463+
outline-offset: var(--theme-border-width);
451464
}
452465

453-
swd-selection a:not([disabled]):hover, swd-selection a:not([disabled]):focus, swd-selection a:not([disabled]):active, swd-selection a:not([disabled])[selected] {
466+
swd-selection a:not([disabled]):hover, swd-selection a:not([disabled]):focus, swd-selection a:not([disabled]):active, swd-selection a:not([disabled])[selected],
467+
swd-selection button:not([disabled]):hover, swd-selection button:not([disabled]):focus, swd-selection button:not([disabled]):active, swd-selection button:not([disabled])[selected] {
454468
background: var(--theme-element-secondary-color);
455469
}
456470

@@ -725,12 +739,17 @@ swd-selection {
725739
border-radius: var(--theme-border-radius);
726740
}
727741

728-
swd-selection a:not(:first-child) {
742+
swd-selection button {
743+
text-align: start;
744+
background-color: var(--theme-element-primary-color);
745+
}
746+
747+
swd-selection a:not(:first-child), swd-selection button:not(:first-child) {
729748
border-top-left-radius: 0px;
730749
border-top-right-radius: 0px;
731750
}
732751

733-
swd-selection a:not(:last-child) {
752+
swd-selection a:not(:last-child), swd-selection button:not(:last-child) {
734753
border-bottom-left-radius: 0px;
735754
border-bottom-right-radius: 0px;
736755
}

‎downloads/latest/swd.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -377,6 +377,7 @@ class SwdNavigation extends SwdComponent {
377377

378378
class SwdInput extends SwdComponent {
379379

380+
#CLICK_EVENT = () => this.#input?.focus();
380381
#INPUT_EVENT = () => { this.#updateIcon(); this.#INPUT_EVENT; }
381382
#INPUT_ICON_EVENT = () => this.#input?.focus();
382383
#INPUT_RESET_ICON_EVENT = () => { this.#input?.focus(); if (this.#input) this.#input.value = ''; this.#input.dispatchEvent(new Event('input', { bubbles: true })); }
@@ -386,6 +387,10 @@ class SwdInput extends SwdComponent {
386387
#inputResetIcon;
387388
#selfUpdateQueue = 0;
388389

390+
swdOnInit() {
391+
this.addEventListener('click', this.#CLICK_EVENT)
392+
}
393+
389394
swdOnUpdate() {
390395
if (this.#selfUpdateQueue-- > 0) return;
391396
const input = this.querySelector('input');
@@ -414,6 +419,7 @@ class SwdInput extends SwdComponent {
414419
}
415420

416421
swdOnDestroy() {
422+
this.removeEventListener('click', this.#CLICK_EVENT);
417423
this.#input?.removeEventListener('input', this.#INPUT_EVENT);
418424
}
419425

@@ -624,7 +630,7 @@ class SwdSelection extends SwdComponent {
624630
value;
625631

626632
swdOnInit() {
627-
this.swdRegisterManagedEvent(this, 'click', event => this.select(event.target));
633+
this.swdRegisterManagedEvent(this, 'click', event => this.select(event.target, true));
628634
}
629635

630636
next() { this.#nextOrPrevious(true, false) }
@@ -639,7 +645,7 @@ class SwdSelection extends SwdComponent {
639645
let nextTarget = target ? (next ? target.nextElementSibling : target.previousElementSibling) : (next ? this.firstElementChild : this.lastElementChild);
640646
if (!nextTarget) nextTarget = next ? this.firstElementChild : this.lastElementChild
641647
target = nextTarget;
642-
} while ((target.nodeName !== 'A' || target.hasAttribute('hidden')) && i++ < this.children.length);
648+
} while (((target.nodeName !== 'A' && target.nodeName !== 'BUTTON') || target.hasAttribute('hidden')) && i++ < this.children.length);
643649
original?.removeAttribute('selected');
644650
target.setAttribute('selected', 'true');
645651
const content = this.parentElement;
@@ -657,10 +663,10 @@ class SwdSelection extends SwdComponent {
657663
this.#selected.setAttribute('selected', 'true');
658664
}
659665

660-
select(target) {
666+
select(target, click) {
661667
let targetToSelect = target ? target : this.querySelector('[selected]');
662-
while(targetToSelect && targetToSelect !== this && targetToSelect.tagName !== 'A') targetToSelect = targetToSelect.parentNode;
663-
if (!targetToSelect || targetToSelect.nodeName !== 'A' || targetToSelect.hasAttribute('hidden')) return;
668+
while(targetToSelect && targetToSelect !== this && targetToSelect.tagName !== 'A' && targetToSelect.tagName !== 'BUTTON') targetToSelect = targetToSelect.parentNode;
669+
if (!targetToSelect || (targetToSelect.nodeName !== 'A' && targetToSelect.nodeName !== 'BUTTON') || targetToSelect.hasAttribute('hidden')) return;
664670
this.#selected?.removeAttribute('selected');
665671
this.#selected = targetToSelect;
666672
this.#selected.setAttribute('selected', 'true');
@@ -669,6 +675,7 @@ class SwdSelection extends SwdComponent {
669675
const event = new Event('select', { bubbles: true });
670676
event.value = this.value;
671677
event.name = name;
678+
if (!click) this.#selected.click();
672679
this.#selected.dispatchEvent(event);
673680
this.#selectionChangeAction?.(name, this.value);
674681
}

‎downloads/latest/swd.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎downloads/latest/swd.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎downloads/latest/swd.min.zip‎

282 Bytes
Binary file not shown.

‎downloads/latest/swd.zip‎

301 Bytes
Binary file not shown.

‎downloads/npm/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "simplewebdesign",
3-
"version": "2.6.1",
3+
"version": "2.7.0",
44
"description": "A simple way to style your responsive website! This is a framework like Bootstrap but more lightweight.",
55
"repository": {
66
"type": "git",

‎downloads/npm/swd.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)