@c2n/icon-button 0.0.13 → 0.0.15
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.
package/custom-elements.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/icon-button.ts","declarations":[{"kind":"class","description":"A round, hoverable button that wraps a slotted icon. Renders a real `<button>` (focus is delegated to\nit) so it is keyboard operable; set `aria-label` on the host to name it.","name":"IconButton","cssProperties":[{"type":{"text":"color"},"name":"--c2-icon-button--background-color"},{"type":{"text":"border-radius"},"name":"--c2-icon-button--border-radius","default":"999px"},{"type":{"text":"border"},"name":"--c2-icon-button--border","default":"none"},{"type":{"text":"color"},"name":"--c2-icon-button__hover--background-color","default":"rgb(230, 230, 230)"},{"type":{"text":"outline"},"name":"--c2-icon-button__focus--outline","default":"2px solid rgba(2, 101, 220, 0.4)"},{"type":{"text":"pixel"},"name":"--c2-icon-button__focus--outline-offset","default":"2px"},{"type":{"text":"opacity"},"name":"--c2-icon-button__disabled--opacity","default":"0.38"},{"type":{"text":"color"},"description":"Pressed state of a toggle button (see `selected`).","name":"--c2-icon-button__selected--background-color","default":"rgb(230, 230, 230)"},{"type":{"text":"pixel"},"name":"--c2-icon-button__icon--width","default":"24px"},{"type":{"text":"pixel"},"name":"--c2-icon-button__icon--height","default":"24px"},{"type":{"text":"color"},"name":"--c2-icon-button__icon--color"},{"type":{"text":"color"},"name":"--c2-icon-button__icon__hover--color"},{"type":{"text":"color"},"name":"--c2-icon-button__icon__selected--color"},{"type":{"text":"pixel"},"name":"--c2-icon-button__state-layer--size","default":"48px"}],"cssParts":[{"
|
|
1
|
+
{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/icon-button.ts","declarations":[{"kind":"class","description":"A round, hoverable button that wraps a slotted icon. Renders a real `<button>` (focus is delegated to\nit) so it is keyboard operable; set `aria-label` on the host to name it.","name":"IconButton","cssProperties":[{"type":{"text":"color"},"name":"--c2-icon-button--background-color"},{"type":{"text":"border-radius"},"name":"--c2-icon-button--border-radius","default":"999px"},{"type":{"text":"border"},"name":"--c2-icon-button--border","default":"none"},{"type":{"text":"color"},"name":"--c2-icon-button__hover--background-color","default":"rgb(230, 230, 230)"},{"type":{"text":"outline"},"name":"--c2-icon-button__focus--outline","default":"2px solid rgba(2, 101, 220, 0.4)"},{"type":{"text":"pixel"},"name":"--c2-icon-button__focus--outline-offset","default":"2px"},{"type":{"text":"opacity"},"name":"--c2-icon-button__disabled--opacity","default":"0.38"},{"type":{"text":"color"},"description":"Pressed state of a toggle button (see `selected`).","name":"--c2-icon-button__selected--background-color","default":"rgb(230, 230, 230)"},{"type":{"text":"pixel"},"name":"--c2-icon-button__icon--width","default":"24px"},{"type":{"text":"pixel"},"name":"--c2-icon-button__icon--height","default":"24px"},{"type":{"text":"color"},"name":"--c2-icon-button__icon--color"},{"type":{"text":"color"},"name":"--c2-icon-button__icon__hover--color"},{"type":{"text":"color"},"name":"--c2-icon-button__icon__selected--color"},{"type":{"text":"pixel"},"name":"--c2-icon-button__state-layer--size","default":"48px"}],"cssParts":[{"description":"The native button that provides the icon-only interactive surface.","name":"button"}],"slots":[{"description":"The icon (an inline `<svg>`, a `c2-feather-*` or a `c2-mat-icon` element).","name":""}],"members":[{"kind":"field","name":"shadowRootOptions","type":{"text":"object"},"static":true,"default":"{ ...LitElement.shadowRootOptions, delegatesFocus: true }"},{"kind":"field","name":"tooltip","type":{"text":"string | undefined"},"default":"undefined","description":"Tooltip text shown after a short delay; also used as the accessible name when `aria-label` is not set.","attribute":"tooltip"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the button: no pointer events, no focus, reduced opacity.","attribute":"disabled","reflects":true},{"kind":"field","name":"ariaLabel","type":{"text":"string | null"},"default":"null","description":"Accessible name forwarded to the inner `<button>`.","attribute":"aria-label"},{"kind":"field","name":"selected","type":{"text":"boolean"},"default":"false","description":"Pressed state of a toggle button (`aria-pressed=\"true\"`); styled with the `__selected--*` variables.","attribute":"selected","reflects":true},{"kind":"field","name":"toggle","type":{"text":"boolean"},"default":"false","description":"Declares a toggle button: `aria-pressed` is announced as `false` while not selected. Set by `c2-button-group` in selection modes.","attribute":"toggle","reflects":true}],"attributes":[{"name":"tooltip","type":{"text":"string | undefined"},"default":"undefined","description":"Tooltip text shown after a short delay; also used as the accessible name when `aria-label` is not set.","fieldName":"tooltip"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the button: no pointer events, no focus, reduced opacity.","fieldName":"disabled"},{"name":"aria-label","type":{"text":"string | null"},"default":"null","description":"Accessible name forwarded to the inner `<button>`.","fieldName":"ariaLabel"},{"name":"selected","type":{"text":"boolean"},"default":"false","description":"Pressed state of a toggle button (`aria-pressed=\"true\"`); styled with the `__selected--*` variables.","fieldName":"selected"},{"name":"toggle","type":{"text":"boolean"},"default":"false","description":"Declares a toggle button: `aria-pressed` is announced as `false` while not selected. Set by `c2-button-group` in selection modes.","fieldName":"toggle"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-icon-button","customElement":true}],"exports":[{"kind":"js","name":"IconButton","declaration":{"name":"IconButton","module":"src/icon-button.ts"}},{"kind":"custom-element-definition","name":"c2-icon-button","declaration":{"name":"IconButton","module":"src/icon-button.ts"}}]}]}
|
package/dist/icon-button.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement, html, nothing, unsafeCSS } from "lit";
|
|
2
|
-
import { property } from "lit
|
|
2
|
+
import { property } from "@c2n/core/lit-helper.js";
|
|
3
3
|
import { customElement } from "@c2n/core/element-helper.js";
|
|
4
4
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
5
5
|
import "@c2n/tooltip";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c2n/icon-button",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/icon-button.js",
|
|
6
6
|
"exports": {
|
|
@@ -62,13 +62,13 @@
|
|
|
62
62
|
}
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
|
-
"@c2n/core": "0.0.
|
|
66
|
-
"@c2n/tooltip": "0.0.
|
|
65
|
+
"@c2n/core": "0.0.15",
|
|
66
|
+
"@c2n/tooltip": "0.0.15",
|
|
67
67
|
"lit": "3.3.3"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@c2n/config": "*"
|
|
71
71
|
},
|
|
72
72
|
"customElements": "custom-elements.json",
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "129a6e537c68c04ed2a36508789bf42c9781e196"
|
|
74
74
|
}
|
package/react.d.ts
CHANGED
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
//
|
|
10
10
|
// On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
|
|
11
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.
|
|
12
|
+
// set properties. Those names are listed next to the properties below. Structured converter-backed values
|
|
13
|
+
// also accept their serialized string form, so server JSX can emit the same JSON/CSV attribute used by HTML.
|
|
13
14
|
|
|
14
15
|
import type { DetailedHTMLProps, HTMLAttributes } from 'react'
|
|
15
16
|
import type { IconButton } from '@c2n/icon-button'
|
|
@@ -8,6 +8,8 @@ import '@c2n/tooltip';
|
|
|
8
8
|
*
|
|
9
9
|
* @slot - The icon (an inline `<svg>`, a `c2-feather-*` or a `c2-mat-icon` element).
|
|
10
10
|
*
|
|
11
|
+
* @csspart button - The native button that provides the icon-only interactive surface.
|
|
12
|
+
*
|
|
11
13
|
* @cssproperty {color} --c2-icon-button--background-color
|
|
12
14
|
* @cssproperty {border-radius} [--c2-icon-button--border-radius=999px]
|
|
13
15
|
* @cssproperty {border} [--c2-icon-button--border=none]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAM1D,OAAO,cAAc,CAAA;AAErB
|
|
1
|
+
{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,KAAK,CAAA;AAM1D,OAAO,cAAc,CAAA;AAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,0BAAoB;IAE1C,OAAgB,iBAAiB;;;;;;;MAA4D;IAE7F,6GAA6G;IACjG,OAAO,EAAE,MAAM,GAAG,SAAS,CAAY;IAEnD,yEAAyE;IAC7B,QAAQ,UAAQ;IAE5D,yDAAyD;IACT,SAAS,EAAE,MAAM,GAAG,IAAI,CAAO;IAE/E,2GAA2G;IAC/D,QAAQ,UAAQ;IAE5D,wIAAwI;IAC5F,MAAM,UAAQ;IAEjD,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAA;KAC7B;CACF"}
|