@c2n/switch 0.0.10 → 0.0.12

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 (5) hide show
  1. package/dist/switch.js +3 -5
  2. package/package.json +3 -3
  3. package/react.d.ts +11 -1
  4. package/types/src/switch.d.ts +1 -2
  5. package/types/src/switch.d.ts.map +1 -1
package/dist/switch.js CHANGED
@@ -3,7 +3,7 @@ import { property, query, state } from "lit/decorators.js";
3
3
  import { customElement } from "@c2n/core/element-helper.js";
4
4
  import { classMap } from "lit/directives/class-map.js";
5
5
  import { ifDefined } from "lit/directives/if-defined.js";
6
- import { redispatchEvent } from "@c2n/core/dom-helper.js";
6
+ import { hasSlottedContent, redispatchEvent } from "@c2n/core/dom-helper.js";
7
7
  //#region src/switch.scss?inline
8
8
  var switch_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.c2-switch {\n display: inline-flex;\n align-items: center;\n flex: 1;\n min-width: 0;\n flex-direction: var(--c2-switch__container--flex-direction,row);\n justify-content: var(--c2-switch__container--justify-content,flex-start);\n gap: var(--c2-switch__container--gap,8px);\n cursor: pointer;\n}\n.c2-switch.has-description {\n align-items: flex-start;\n}\n.c2-switch:has(.c2-switch-input:disabled) {\n cursor: default;\n opacity: var(--c2-switch__container__disabled--opacity,0.38);\n}\n\n.c2-switch-control {\n position: relative;\n display: inline-flex;\n flex: none;\n line-height: 0;\n}\n\n.c2-switch-input {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n opacity: 0;\n cursor: inherit;\n z-index: 1;\n touch-action: pan-y;\n}\n\n.c2-switch-track {\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n width: var(--c2-switch__track--width,36px);\n height: var(--c2-switch__track--height,20px);\n padding: var(--c2-switch__thumb--offset,2px);\n border-radius: var(--c2-switch__track--border-radius,999px);\n border: var(--c2-switch__track--border,1px solid transparent);\n background-color: var(--c2-switch__track--color,#e4e4e7);\n transition: background-color var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1), border-color var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-switch-thumb {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: var(--c2-switch__thumb--size,16px);\n height: var(--c2-switch__thumb--size,16px);\n border-radius: var(--c2-switch__thumb--border-radius,999px);\n background-color: var(--c2-switch__thumb--color,#ffffff);\n box-shadow: var(--c2-switch__thumb--box-shadow,0 1px 2px rgba(0, 0, 0, 0.2));\n transform: translateX(0);\n transition: transform var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1), width var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1), background-color var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-switch-icon {\n position: absolute;\n inset: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n color: var(--c2-switch__icon--color,#71717a);\n opacity: 1;\n transition: opacity var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1);\n --c2-feather-icon--size: var(--c2-switch__icon--size,10px);\n --c2-mat-icon--font-size: var(--c2-switch__icon--size,10px);\n}\n.c2-switch-icon ::slotted(*) {\n width: var(--c2-switch__icon--size,10px);\n height: var(--c2-switch__icon--size,10px);\n}\n\n.c2-switch-icon--checked {\n color: var(--c2-switch__icon__checked--color,#0265dc);\n opacity: 0;\n}\n\n.c2-switch-input:checked ~ .c2-switch-track {\n background-color: var(--c2-switch__track__checked--color,#0265dc);\n border: var(--c2-switch__track__checked--border,var(--c2-switch__track--border,1px solid transparent));\n}\n.c2-switch-input:checked ~ .c2-switch-track .c2-switch-thumb {\n transform: translateX(calc(var(--c2-switch__track--width,36px) - var(--c2-switch__thumb--size,16px) - 2 * var(--c2-switch__thumb--offset,2px)));\n background-color: var(--c2-switch__thumb__checked--color,var(--c2-switch__thumb--color,#ffffff));\n}\n.c2-switch-input:checked ~ .c2-switch-track .c2-switch-icon--unchecked {\n opacity: 0;\n}\n.c2-switch-input:checked ~ .c2-switch-track .c2-switch-icon--checked {\n opacity: 1;\n}\n\n.c2-switch-input:enabled:hover ~ .c2-switch-track {\n background-color: var(--c2-switch__track__hover--color,var(--c2-switch__track--color,#d4d4d8));\n}\n\n.c2-switch-input:enabled:checked:hover ~ .c2-switch-track {\n background-color: var(--c2-switch__track__checked__hover--color,var(--c2-switch__track__checked--color,#0154b8));\n}\n\n.c2-switch:not(.is-dragging) .c2-switch-input:enabled:active ~ .c2-switch-track .c2-switch-thumb {\n width: calc(var(--c2-switch__thumb--size,16px) + var(--c2-switch__thumb__active--stretch,4px));\n}\n\n.c2-switch:not(.is-dragging) .c2-switch-input:enabled:active:checked ~ .c2-switch-track .c2-switch-thumb {\n transform: translateX(calc(calc(var(--c2-switch__track--width,36px) - var(--c2-switch__thumb--size,16px) - 2 * var(--c2-switch__thumb--offset,2px)) - var(--c2-switch__thumb__active--stretch,4px)));\n}\n\n.c2-switch.is-dragging .c2-switch-input ~ .c2-switch-track .c2-switch-thumb {\n transition: none;\n width: var(--c2-switch__thumb--size,16px);\n transform: translateX(var(--_drag, 0px));\n}\n\n.c2-switch-input:focus-visible ~ .c2-switch-track {\n outline: var(--c2-switch__track__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n outline-offset: var(--c2-switch__track__focus--outline-offset,2px);\n}\n\n.c2-switch-text {\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.c2-switch-label {\n color: var(--c2-switch__label--color,inherit);\n font-size: var(--c2-switch__label--font-size,inherit);\n font-weight: var(--c2-switch__label--font-weight,inherit);\n line-height: var(--c2-switch__label--line-height,inherit);\n}\n\n.has-description .c2-switch-label {\n display: flex;\n align-items: center;\n min-height: var(--c2-switch__track--height,20px);\n}\n\n.c2-switch-description {\n color: var(--c2-switch__description--color,#71717a);\n font-size: var(--c2-switch__description--font-size,12px);\n margin-top: var(--c2-switch__description--margin-top,2px);\n line-height: 1.4;\n}\n.c2-switch-description[hidden] {\n display: none;\n}\n\n:host(:dir(rtl)) .c2-switch-input:checked ~ .c2-switch-track .c2-switch-thumb {\n transform: translateX(calc(-1 * calc(var(--c2-switch__track--width,36px) - var(--c2-switch__thumb--size,16px) - 2 * var(--c2-switch__thumb--offset,2px))));\n}\n\n:host(:dir(rtl)) .c2-switch:not(.is-dragging) .c2-switch-input:enabled:active:checked ~ .c2-switch-track .c2-switch-thumb {\n transform: translateX(calc(-1 * (calc(var(--c2-switch__track--width,36px) - var(--c2-switch__thumb--size,16px) - 2 * var(--c2-switch__thumb--offset,2px)) - var(--c2-switch__thumb__active--stretch,4px))));\n}\n\n@media (prefers-reduced-motion: reduce) {\n .c2-switch-track,\n .c2-switch-thumb,\n .c2-switch-icon {\n transition: none;\n }\n}";
9
9
  //#endregion
@@ -97,10 +97,8 @@ var Switch = class Switch extends LitElement {
97
97
  composed: true
98
98
  }));
99
99
  }
100
- /** `slotchange` does not fire for server-rendered slots, so read the description once after the first render. */
101
- firstUpdated() {
102
- const slot = this.renderRoot.querySelector("slot[name=\"description\"]");
103
- if (slot) this.updateDescription(slot);
100
+ willUpdate(_changed) {
101
+ if (!this.hasUpdated) this.hasDescription = hasSlottedContent(this, "description");
104
102
  }
105
103
  update(changed) {
106
104
  if (changed.has("checked") && this.formElement) this.formElement.checked = this.checked;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c2n/switch",
3
- "version": "0.0.10",
3
+ "version": "0.0.12",
4
4
  "type": "module",
5
5
  "main": "dist/switch.js",
6
6
  "exports": {
@@ -62,12 +62,12 @@
62
62
  }
63
63
  },
64
64
  "dependencies": {
65
- "@c2n/core": "0.0.10",
65
+ "@c2n/core": "0.0.12",
66
66
  "lit": "3.3.3"
67
67
  },
68
68
  "devDependencies": {
69
69
  "@c2n/config": "*"
70
70
  },
71
71
  "customElements": "custom-elements.json",
72
- "gitHead": "8d57710b3345fcb01cdb4cb15d2d43ba8bf21642"
72
+ "gitHead": "43e38b42ac221ffeef99a773c42dd3356961d26a"
73
73
  }
package/react.d.ts CHANGED
@@ -6,17 +6,27 @@
6
6
  //
7
7
  // Register the elements at module scope before React renders, or React writes an object prop as an
8
8
  // attribute and it stringifies.
9
+ //
10
+ // On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
11
+ // name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
12
+ // set properties. Those names are listed next to the properties below.
9
13
 
10
14
  import type { DetailedHTMLProps, HTMLAttributes } from 'react'
11
15
  import type { Switch } from '@c2n/switch'
12
16
 
13
17
  /** Standard React host-element attributes plus the element's own public properties. */
14
18
  type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
19
+ /** What React writes to a custom element's attribute: true becomes the empty string, false removes it. */
20
+ type Attribute = string | number | boolean
15
21
 
16
22
  declare module 'react' {
17
23
  namespace JSX {
18
24
  interface IntrinsicElements {
19
- 'c2-switch': C2Props<Switch>
25
+ 'c2-switch': C2Props<Switch> & {
26
+ 'aria-label'?: Attribute
27
+ 'aria-labelledby'?: Attribute
28
+ 'aria-describedby'?: Attribute
29
+ }
20
30
  }
21
31
  }
22
32
  }
package/types/src/switch.d.ts CHANGED
@@ -114,8 +114,7 @@ export declare class Switch extends LitElement {
114
114
  focus(options?: FocusOptions): void;
115
115
  /** Flips the state (or forces it) and fires `change`, as a click would. */
116
116
  toggle(force?: boolean): void;
117
- /** `slotchange` does not fire for server-rendered slots, so read the description once after the first render. */
118
- firstUpdated(): void;
117
+ protected willUpdate(_changed: PropertyValues<this>): void;
119
118
  protected update(changed: PropertyValues<this>): void;
120
119
  protected updated(_changed: PropertyValues<this>): void;
121
120
  private get effectiveDisabled();
package/types/src/switch.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAGtE,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAMhG,oEAAoE;AACpE,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,KAAK,CAAA;CACd;AAED,MAAM,WAAW,MAAM;IACrB,gBAAgB,EAAE,qBAAqB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;IAC/D,mBAAmB,EAAE,wBAAwB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;CACtE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,cAAc,UAAO;IAE5B,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,qBAAqB,CAAK;IACzB,OAAO,CAAC,cAAc,CAAQ;IACvC,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,sBAAsB,CAAQ;IAEtB,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAC7B,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,YAAY,CAAc;IAE7D,gCAAgC;IACY,OAAO,UAAQ;IAE3D,yEAAyE;IAC7B,QAAQ,UAAQ;IAE5D,oDAAoD;IACxC,IAAI,SAAK;IAErB,+EAA+E;IACnE,KAAK,SAAO;IAExB,6DAA6D;IACjB,QAAQ,UAAQ;IAE5D,iDAAiD;IACrC,KAAK,SAAK;IAEtB,mEAAmE;IAE1D,SAAS,EAAG,MAAM,CAAA;IAE3B,gDAAgD;IAEhD,cAAc,EAAG,SAAS,GAAG,MAAM,CAAA;IAEnC,mDAAmD;IAEnD,eAAe,EAAG,SAAS,GAAG,MAAM,CAAA;IAE3B,OAAO,CAAC,cAAc,CAAQ;IACvC,+EAA+E;IACtE,OAAO,CAAC,QAAQ,CAAQ;IAEjC,OAAO,CAAC,IAAI,CAAC,CAAgH;IAC7H,qEAAqE;IACrE,OAAO,CAAC,aAAa,CAAQ;IAEpB,iBAAiB;IAQ1B,qEAAqE;IACrE,IAAI,IAAI,2BAEP;IAED,gDAAgD;IAChD,IAAI,MAAM,aAET;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,iBAAiB;IAIjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAI/D,aAAa;IAIb,cAAc;IAId,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAKxB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAIrC,2EAA2E;IAC3E,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO;IAQtB,iHAAiH;IACxG,YAAY;cAKF,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;cAKpC,OAAO,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC;IAQzD,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,YAAY;IAKpB,OAAO,KAAK,GAAG,GAEd;IAED,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,WAAW;IAMV,MAAM;CAuChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF"}
1
+ {"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch.ts"],"names":[],"mappings":"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"}