smoothly 0.3.27 → 0.3.28

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 (9) hide show
  1. package/dist/cjs/smoothly-accordion_53.cjs.entry.js +3 -2
  2. package/dist/collection/components/item/index.js +2 -2
  3. package/dist/collection/components/selector/index.js +1 -0
  4. package/dist/collection/components/selector/style.css +2 -0
  5. package/dist/custom-elements/index.js +3 -2
  6. package/dist/esm/smoothly-accordion_53.entry.js +3 -2
  7. package/dist/smoothly/{p-cc6b8454.entry.js → p-23f90e06.entry.js} +1 -1
  8. package/dist/smoothly/smoothly.esm.js +1 -1
  9. package/package.json +1 -1
package/dist/cjs/smoothly-accordion_53.cjs.entry.js CHANGED
@@ -21703,7 +21703,7 @@ const Item = class {
21703
21703
  return result;
21704
21704
  }
21705
21705
  render() {
21706
- return index.h("slot", null);
21706
+ return (index.h(index.Host, { tabIndex: -1 }, index.h("slot", null)));
21707
21707
  }
21708
21708
  get element() { return index.getElement(this); }
21709
21709
  static get watchers() { return {
@@ -22357,7 +22357,7 @@ const SmoothlySelectDemo = class {
22357
22357
  };
22358
22358
  SmoothlySelectDemo.style = styleCss$f;
22359
22359
 
22360
- const styleCss$e = ".sc-smoothly-selector-h{position:relative;height:100%}.sc-smoothly-selector-h>main.sc-smoothly-selector,.sc-smoothly-selector-h>main.sc-smoothly-selector>*.sc-smoothly-selector{height:100%;display:flex;align-items:center}.sc-smoothly-selector-h>div.sc-smoothly-selector>nav.sc-smoothly-selector{display:flex;flex-direction:column;position:absolute;z-index:10}.sc-smoothly-selector-h>aside.sc-smoothly-selector{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-selector-h>aside.sc-smoothly-selector{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contast))}.hidden.sc-smoothly-selector{display:none}.sc-smoothly-selector-h>section.sc-smoothly-selector{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
22360
+ const styleCss$e = ".sc-smoothly-selector-h{position:relative;height:100%}.sc-smoothly-selector-h>main.sc-smoothly-selector,.sc-smoothly-selector-h>main.sc-smoothly-selector>*.sc-smoothly-selector{height:100%;display:flex;align-items:center}.sc-smoothly-selector-h>div.sc-smoothly-selector>nav.sc-smoothly-selector{display:flex;flex-direction:column;position:absolute;z-index:10;height:var(--menu-height, unset);overflow-y:scroll}.sc-smoothly-selector-h>aside.sc-smoothly-selector{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-selector-h>aside.sc-smoothly-selector{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contast))}.hidden.sc-smoothly-selector{display:none}.sc-smoothly-selector-h>section.sc-smoothly-selector{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
22361
22361
 
22362
22362
  const Selector = class {
22363
22363
  constructor(hostRef) {
@@ -22452,6 +22452,7 @@ const Selector = class {
22452
22452
  markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
22453
22453
  } while (this.items[markedIndex].hidden);
22454
22454
  this.items[markedIndex].marked = true;
22455
+ this.items[markedIndex].focus();
22455
22456
  }
22456
22457
  }
22457
22458
  render() {
package/dist/collection/components/item/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { h } from "@stencil/core";
1
+ import { h, Host } from "@stencil/core";
2
2
  export class Item {
3
3
  onSelectedChanged(value, old) {
4
4
  if (value && !old)
@@ -20,7 +20,7 @@ export class Item {
20
20
  return result;
21
21
  }
22
22
  render() {
23
- return h("slot", null);
23
+ return (h(Host, { tabIndex: -1 }, h("slot", null)));
24
24
  }
25
25
  static get is() { return "smoothly-item"; }
26
26
  static get encapsulation() { return "scoped"; }
package/dist/collection/components/selector/index.js CHANGED
@@ -90,6 +90,7 @@ export class Selector {
90
90
  markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
91
91
  } while (this.items[markedIndex].hidden);
92
92
  this.items[markedIndex].marked = true;
93
+ this.items[markedIndex].focus();
93
94
  }
94
95
  }
95
96
  render() {
package/dist/collection/components/selector/style.css CHANGED
@@ -13,6 +13,8 @@
13
13
  flex-direction: column;
14
14
  position: absolute;
15
15
  z-index: 10;
16
+ height: var(--menu-height, unset);
17
+ overflow-y: scroll;
16
18
  }
17
19
  :host > aside {
18
20
  position: absolute;
package/dist/custom-elements/index.js CHANGED
@@ -47263,7 +47263,7 @@ const Item = class extends HTMLElement {
47263
47263
  return result;
47264
47264
  }
47265
47265
  render() {
47266
- return h("slot", null);
47266
+ return (h(Host, { tabIndex: -1 }, h("slot", null)));
47267
47267
  }
47268
47268
  get element() { return this; }
47269
47269
  static get watchers() { return {
@@ -48044,7 +48044,7 @@ const SmoothlySelectDemo$1 = class extends HTMLElement {
48044
48044
  static get style() { return styleCss$h; }
48045
48045
  };
48046
48046
 
48047
- const styleCss$g = ".sc-smoothly-selector-h{position:relative;height:100%}.sc-smoothly-selector-h>main.sc-smoothly-selector,.sc-smoothly-selector-h>main.sc-smoothly-selector>*.sc-smoothly-selector{height:100%;display:flex;align-items:center}.sc-smoothly-selector-h>div.sc-smoothly-selector>nav.sc-smoothly-selector{display:flex;flex-direction:column;position:absolute;z-index:10}.sc-smoothly-selector-h>aside.sc-smoothly-selector{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-selector-h>aside.sc-smoothly-selector{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contast))}.hidden.sc-smoothly-selector{display:none}.sc-smoothly-selector-h>section.sc-smoothly-selector{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
48047
+ const styleCss$g = ".sc-smoothly-selector-h{position:relative;height:100%}.sc-smoothly-selector-h>main.sc-smoothly-selector,.sc-smoothly-selector-h>main.sc-smoothly-selector>*.sc-smoothly-selector{height:100%;display:flex;align-items:center}.sc-smoothly-selector-h>div.sc-smoothly-selector>nav.sc-smoothly-selector{display:flex;flex-direction:column;position:absolute;z-index:10;height:var(--menu-height, unset);overflow-y:scroll}.sc-smoothly-selector-h>aside.sc-smoothly-selector{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-selector-h>aside.sc-smoothly-selector{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contast))}.hidden.sc-smoothly-selector{display:none}.sc-smoothly-selector-h>section.sc-smoothly-selector{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
48048
48048
 
48049
48049
  const Selector = class extends HTMLElement {
48050
48050
  constructor() {
@@ -48140,6 +48140,7 @@ const Selector = class extends HTMLElement {
48140
48140
  markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
48141
48141
  } while (this.items[markedIndex].hidden);
48142
48142
  this.items[markedIndex].marked = true;
48143
+ this.items[markedIndex].focus();
48143
48144
  }
48144
48145
  }
48145
48146
  render() {
package/dist/esm/smoothly-accordion_53.entry.js CHANGED
@@ -21699,7 +21699,7 @@ const Item = class {
21699
21699
  return result;
21700
21700
  }
21701
21701
  render() {
21702
- return h("slot", null);
21702
+ return (h(Host, { tabIndex: -1 }, h("slot", null)));
21703
21703
  }
21704
21704
  get element() { return getElement(this); }
21705
21705
  static get watchers() { return {
@@ -22353,7 +22353,7 @@ const SmoothlySelectDemo = class {
22353
22353
  };
22354
22354
  SmoothlySelectDemo.style = styleCss$f;
22355
22355
 
22356
- const styleCss$e = ".sc-smoothly-selector-h{position:relative;height:100%}.sc-smoothly-selector-h>main.sc-smoothly-selector,.sc-smoothly-selector-h>main.sc-smoothly-selector>*.sc-smoothly-selector{height:100%;display:flex;align-items:center}.sc-smoothly-selector-h>div.sc-smoothly-selector>nav.sc-smoothly-selector{display:flex;flex-direction:column;position:absolute;z-index:10}.sc-smoothly-selector-h>aside.sc-smoothly-selector{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-selector-h>aside.sc-smoothly-selector{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contast))}.hidden.sc-smoothly-selector{display:none}.sc-smoothly-selector-h>section.sc-smoothly-selector{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
22356
+ const styleCss$e = ".sc-smoothly-selector-h{position:relative;height:100%}.sc-smoothly-selector-h>main.sc-smoothly-selector,.sc-smoothly-selector-h>main.sc-smoothly-selector>*.sc-smoothly-selector{height:100%;display:flex;align-items:center}.sc-smoothly-selector-h>div.sc-smoothly-selector>nav.sc-smoothly-selector{display:flex;flex-direction:column;position:absolute;z-index:10;height:var(--menu-height, unset);overflow-y:scroll}.sc-smoothly-selector-h>aside.sc-smoothly-selector{position:absolute;top:0;left:5em;z-index:10;background-color:rgb(var(--smoothly-tertiary-color));color:rgb(var(--smoothly-tertiary-contrast));height:1.25rem;border-radius:0.3rem;padding:0.3rem;display:flex;align-items:center}.missing.sc-smoothly-selector-h>aside.sc-smoothly-selector{background-color:rgb(var(--smoothly-warning-color));color:rgb(var(--smoothly-warning-contast))}.hidden.sc-smoothly-selector{display:none}.sc-smoothly-selector-h>section.sc-smoothly-selector{position:fixed;top:0px;left:0px;width:100vw;height:100vh;z-index:10}";
22357
22357
 
22358
22358
  const Selector = class {
22359
22359
  constructor(hostRef) {
@@ -22448,6 +22448,7 @@ const Selector = class {
22448
22448
  markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
22449
22449
  } while (this.items[markedIndex].hidden);
22450
22450
  this.items[markedIndex].marked = true;
22451
+ this.items[markedIndex].focus();
22451
22452
  }
22452
22453
  }
22453
22454
  render() {