@prioticket/design-system-web 1.0.0 → 1.0.1

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 (16) hide show
  1. package/COMPONENT-DOCUMENTATION.md +3 -1
  2. package/README.md +39 -27
  3. package/component-documentation.json +11 -1
  4. package/dist/components/pd-dialog.cjs.js +1 -1
  5. package/dist/components/pd-dialog.es.js +7 -7
  6. package/dist/components/pd-expandable-card.cjs.js +6 -0
  7. package/dist/components/pd-expandable-card.es.js +18 -12
  8. package/dist/components/pd-icon-button.cjs.js +77 -46
  9. package/dist/components/pd-icon-button.es.js +143 -110
  10. package/dist/components/pd-segmented-button.cjs.js +2 -2
  11. package/dist/components/pd-segmented-button.es.js +2 -2
  12. package/dist/components/pd-segmented-stepper.cjs.js +8 -8
  13. package/dist/components/pd-segmented-stepper.es.js +96 -64
  14. package/dist/types/components/pd-icon-button.d.ts +3 -2
  15. package/dist/types/components/pd-segmented-stepper.d.ts +12 -1
  16. package/package.json +1 -1
package/COMPONENT-DOCUMENTATION.md CHANGED
@@ -200,6 +200,7 @@ Component description not available
200
200
  - `size`: 'small' | 'medium' | 'large'
201
201
  - `disabled`: any
202
202
  - `allowStepNavigation`: any
203
+ - `linear`: any
203
204
  - `stepNumber`: any
204
205
  - `state`: 'pending' | 'active' | 'completed' | 'disabled'
205
206
  - `disabled`: any
@@ -207,7 +208,8 @@ Component description not available
207
208
  - `icon`: any
208
209
 
209
210
  #### Events
210
- - `stepchange`: Fired when the active step changes.
211
+ - `step`: change - Fired when the active step changes (consistent with pd-stepper).
212
+ - `stepchange`: Fired when the active step changes (backwards compatibility).
211
213
  - `stepcomplete`: Fired when a step is marked as completed.
212
214
 
213
215
  #### Example
package/README.md CHANGED
@@ -25,24 +25,27 @@ npm install @prioticket/design-system-web
25
25
  This is the fastest way to use the components on any web page.
26
26
 
27
27
  **Instructions:**
28
- Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDelivr CDN. Remember to replace `1.0.6` with the latest version number.
28
+ Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDelivr CDN. Remember to replace `1.0.1` with the latest version number.
29
29
 
30
30
  ```html
31
31
  <!DOCTYPE html>
32
32
  <html>
33
33
  <head>
34
34
  <title>My App</title>
35
- <!-- 1. Load the theme CSS from the CDN -->
36
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/theme-only.css">
35
+ <!-- 1. Load Material Icons font for icons -->
36
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
37
+
38
+ <!-- 2. Load the theme CSS from the CDN -->
39
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-only.css">
37
40
  </head>
38
41
  <body>
39
42
  <pd-button>Click Me</pd-button>
40
43
 
41
- <!-- 2. Load the required Lit dependency from a public CDN -->
44
+ <!-- 3. Load the required Lit dependency from a public CDN -->
42
45
  <script type="module" src="https://cdn.jsdelivr.net/npm/lit@3/index.js"></script>
43
46
 
44
- <!-- 3. Load the components you need from our CDN -->
45
- <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/components/pd-button.es.js"></script>
47
+ <!-- 4. Load the components you need from our CDN -->
48
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/components/pd-button.es.js"></script>
46
49
  </body>
47
50
  </html>
48
51
  ```
@@ -50,13 +53,13 @@ Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDel
50
53
  **CSS Options:**
51
54
  ```html
52
55
  <!-- Option 1: Theme only (recommended - use your existing fonts) -->
53
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/theme-only.css">
56
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-only.css">
54
57
 
55
58
  <!-- Option 2: Theme + Prioticket fonts -->
56
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/theme-with-fonts.css">
59
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-with-fonts.css">
57
60
 
58
61
  <!-- Option 3: Just Prioticket fonts (if you already have the theme) -->
59
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/fonts-only.css">
62
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/fonts-only.css">
60
63
  ```
61
64
 
62
65
  **PHP Example:**
@@ -65,7 +68,9 @@ Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDel
65
68
  <html>
66
69
  <head>
67
70
  <title><?= htmlspecialchars($pageTitle) ?></title>
68
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/theme-only.css">
71
+ <!-- Material Icons font for icons -->
72
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
73
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/theme-only.css">
69
74
  </head>
70
75
  <body>
71
76
  <pd-button variant="filled"><?= htmlspecialchars($buttonText) ?></pd-button>
@@ -78,11 +83,11 @@ Add the CSS to your `<head>` and the JavaScript to your `<body>` using the jsDel
78
83
  <script type="module" src="https://cdn.jsdelivr.net/npm/lit@3/index.js"></script>
79
84
 
80
85
  <?php if ($showButton): ?>
81
- <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/components/pd-button.es.js"></script>
86
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/components/pd-button.es.js"></script>
82
87
  <?php endif; ?>
83
88
 
84
89
  <?php if ($showCard): ?>
85
- <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.6/dist/components/pd-card.es.js"></script>
90
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@prioticket/design-system-web@1.0.1/dist/components/pd-card.es.js"></script>
86
91
  <?php endif; ?>
87
92
  </body>
88
93
  </html>
@@ -103,6 +108,17 @@ This tells the Angular CLI to include the theme styles in your application's glo
103
108
  ]
104
109
  ```
105
110
 
111
+ **Step 1.5: Add Material Icons to index.html**
112
+
113
+ Add the Material Icons font to your `src/index.html` file:
114
+
115
+ ```html
116
+ <head>
117
+ <!-- Other head content -->
118
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200">
119
+ </head>
120
+ ```
121
+
106
122
  **Step 2: Import Components and Add Schema**
107
123
 
108
124
  In your Angular component, import the components to register them and add `CUSTOM_ELEMENTS_SCHEMA`.
@@ -142,22 +158,26 @@ import '@prioticket/design-system-web/components/pd-button';
142
158
  |-----------|-------------|-----------------|
143
159
  | pd-button | Material Design buttons | `components/pd-button.es.js` |
144
160
  | pd-card | Cards for content grouping | `components/pd-card.es.js` |
145
- | pd-text-field | Text input fields | `components/pd-text-field.es.js` |
146
161
  | pd-checkbox | Checkboxes | `components/pd-checkbox.es.js` |
147
- | pd-switch | Toggle switches | `components/pd-switch.es.js` |
148
- | pd-tabs | Tab navigation | `components/pd-tabs.es.js` |
162
+ | pd-chip | Chips for tags/filters | `components/pd-chip.es.js` |
149
163
  | pd-dialog | Modal dialogs | `components/pd-dialog.es.js` |
164
+ | pd-expandable-card | Expandable cards with collapsible content | `components/pd-expandable-card.es.js` |
150
165
  | pd-fab | Floating action buttons | `components/pd-fab.es.js` |
151
- | pd-progress | Progress indicators | `components/pd-progress.es.js` |
152
- | pd-menu | Dropdown menus | `components/pd-menu.es.js` |
153
- | pd-chip | Chips for tags/filters | `components/pd-chip.es.js` |
154
- | pd-list | Lists with items | `components/pd-list.es.js` |
155
166
  | pd-icon | Material Design icons | `components/pd-icon.es.js` |
156
167
  | pd-icon-button | Icon buttons | `components/pd-icon-button.es.js` |
168
+ | pd-list | Lists with items | `components/pd-list.es.js` |
169
+ | pd-menu | Dropdown menus | `components/pd-menu.es.js` |
170
+ | pd-menu-item | Individual menu items | `components/pd-menu-item.es.js` |
171
+ | pd-progress | Progress indicators | `components/pd-progress.es.js` |
157
172
  | pd-radio | Radio buttons | `components/pd-radio.es.js` |
173
+ | pd-segmented-button | Segmented button controls | `components/pd-segmented-button.es.js` |
174
+ | pd-segmented-stepper | Segmented stepper navigation | `components/pd-segmented-stepper.es.js` |
158
175
  | pd-select | Select dropdowns | `components/pd-select.es.js` |
159
176
  | pd-slider | Range sliders | `components/pd-slider.es.js` |
160
177
  | pd-stepper | Step indicators | `components/pd-stepper.es.js` |
178
+ | pd-switch | Toggle switches | `components/pd-switch.es.js` |
179
+ | pd-tabs | Tab navigation | `components/pd-tabs.es.js` |
180
+ | pd-text-field | Text input fields | `components/pd-text-field.es.js` |
161
181
 
162
182
  ## Customizing Fonts
163
183
 
@@ -219,11 +239,3 @@ The source code for this library is proprietary and maintained in a private repo
219
239
  ## Support
220
240
 
221
241
  For questions or bug reports, please contact the Prioticket development team internally.
222
-
223
- ## License
224
-
225
- MIT License - see [LICENSE](LICENSE) file for details.
226
-
227
- ---
228
-
229
- Built with ❤️ by the Prioticket Team
package/component-documentation.json CHANGED
@@ -521,6 +521,12 @@
521
521
  "attribute": "allowstepnavigation",
522
522
  "description": "Property: allowStepNavigation"
523
523
  },
524
+ {
525
+ "name": "linear",
526
+ "type": "any",
527
+ "attribute": "linear",
528
+ "description": "Property: linear"
529
+ },
524
530
  {
525
531
  "name": "stepNumber",
526
532
  "type": "any",
@@ -553,9 +559,13 @@
553
559
  }
554
560
  ],
555
561
  "events": [
562
+ {
563
+ "name": "step",
564
+ "description": "change - Fired when the active step changes (consistent with pd-stepper)."
565
+ },
556
566
  {
557
567
  "name": "stepchange",
558
- "description": "Fired when the active step changes."
568
+ "description": "Fired when the active step changes (backwards compatibility)."
559
569
  },
560
570
  {
561
571
  "name": "stepcomplete",
package/dist/components/pd-dialog.cjs.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("lit"),e=require("lit/decorators.js");require("@material/web/dialog/dialog.js");require("@material/web/button/text-button.js");require("@material/web/button/filled-button.js");require("@material/web/icon/icon.js");var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(n,a,l,s)=>{for(var i=s>1?void 0:s?m(a,l):a,r=n.length-1,d;r>=0;r--)(d=n[r])&&(i=(s?d(a,l,i):d(i))||i);return s&&i&&c(a,l,i),i};exports.PdDialog=class extends t.LitElement{constructor(){super(...arguments),this.open=!1,this.size="medium",this.variant="custom",this.headline="",this.primaryAction="",this.secondaryAction="",this.closableByBackdrop=!0,this.showCloseButton=!1}openDialog(){this.open=!0,this.dialogElement?.show?.()}closeDialog(){this.open=!1,this.dialogElement?.close?.()}toggle(){this.open?this.closeDialog():this.openDialog()}handleDialogOpen(){this.open=!0,this.dispatchEvent(new CustomEvent("open",{detail:{dialog:this},bubbles:!0}))}handleDialogClose(){this.open=!1,this.dispatchEvent(new CustomEvent("closed",{detail:{dialog:this},bubbles:!0}))}handlePrimaryAction(){this.dispatchEvent(new CustomEvent("primary-action",{detail:{dialog:this},bubbles:!0}))}handleSecondaryAction(){this.dispatchEvent(new CustomEvent("secondary-action",{detail:{dialog:this},bubbles:!0})),this.closeDialog()}render(){return t.html`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("lit"),e=require("lit/decorators.js");require("@material/web/dialog/dialog.js");require("@material/web/button/text-button.js");require("@material/web/button/filled-button.js");require("@material/web/icon/icon.js");var c=Object.defineProperty,m=Object.getOwnPropertyDescriptor,o=(n,a,l,s)=>{for(var i=s>1?void 0:s?m(a,l):a,r=n.length-1,d;r>=0;r--)(d=n[r])&&(i=(s?d(a,l,i):d(i))||i);return s&&i&&c(a,l,i),i};exports.PdDialog=class extends t.LitElement{constructor(){super(...arguments),this.open=!1,this.size="medium",this.variant="custom",this.headline="",this.primaryAction="",this.secondaryAction="",this.closableByBackdrop=!0,this.showCloseButton=!1}openDialog(){this.open=!0,this.dialogElement?.show?.()}closeDialog(){this.open=!1,this.dialogElement?.close?.()}toggle(){this.open?this.closeDialog():this.openDialog()}handleDialogOpen(){this.open=!0,this.dispatchEvent(new CustomEvent("open",{detail:{dialog:this},bubbles:!0}))}handleDialogClose(){this.open=!1,this.dispatchEvent(new CustomEvent("closed",{detail:{dialog:this},bubbles:!0}))}handlePrimaryAction(){this.dispatchEvent(new CustomEvent("primary-action",{detail:{dialog:this},bubbles:!0})),this.closeDialog()}handleSecondaryAction(){this.dispatchEvent(new CustomEvent("secondary-action",{detail:{dialog:this},bubbles:!0})),this.closeDialog()}render(){return t.html`
2
2
  <md-dialog
3
3
  ?open=${this.open}
4
4
  ?no-focus-trap=${!this.closableByBackdrop}
package/dist/components/pd-dialog.es.js CHANGED
@@ -4,10 +4,10 @@ import "@material/web/dialog/dialog.js";
4
4
  import "@material/web/button/text-button.js";
5
5
  import "@material/web/button/filled-button.js";
6
6
  import "@material/web/icon/icon.js";
7
- var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, e = (n, s, d, l) => {
8
- for (var a = l > 1 ? void 0 : l ? u(s, d) : s, r = n.length - 1, c; r >= 0; r--)
9
- (c = n[r]) && (a = (l ? c(s, d, a) : c(a)) || a);
10
- return l && a && g(s, d, a), a;
7
+ var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, e = (s, n, d, l) => {
8
+ for (var a = l > 1 ? void 0 : l ? u(n, d) : n, r = s.length - 1, c; r >= 0; r--)
9
+ (c = s[r]) && (a = (l ? c(n, d, a) : c(a)) || a);
10
+ return l && a && g(n, d, a), a;
11
11
  };
12
12
  let t = class extends p {
13
13
  constructor() {
@@ -41,7 +41,7 @@ let t = class extends p {
41
41
  this.dispatchEvent(new CustomEvent("primary-action", {
42
42
  detail: { dialog: this },
43
43
  bubbles: !0
44
- }));
44
+ })), this.closeDialog();
45
45
  }
46
46
  handleSecondaryAction() {
47
47
  this.dispatchEvent(new CustomEvent("secondary-action", {
@@ -56,8 +56,8 @@ let t = class extends p {
56
56
  ?no-focus-trap=${!this.closableByBackdrop}
57
57
  @open=${this.handleDialogOpen}
58
58
  @closed=${this.handleDialogClose}
59
- @cancel=${(n) => {
60
- this.closableByBackdrop || n.preventDefault();
59
+ @cancel=${(s) => {
60
+ this.closableByBackdrop || s.preventDefault();
61
61
  }}
62
62
  >
63
63
  ${this.headline || this.showCloseButton ? i`
package/dist/components/pd-expandable-card.cjs.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),t=require("lit/decorators.js");require("@material/web/icon/icon.js");require("@material/web/iconbutton/icon-button.js");var c=Object.defineProperty,p=Object.getOwnPropertyDescriptor,d=(o,e,n,s)=>{for(var a=s>1?void 0:s?p(e,n):e,r=o.length-1,i;r>=0;r--)(i=o[r])&&(a=(s?i(e,n,a):i(a))||a);return s&&a&&c(e,n,a),a};exports.PdExpandableCard=class extends l.LitElement{constructor(){super(...arguments),this.variant="elevated",this.expanded=!1,this.expandIcon="keyboard_arrow_down",this.collapseIcon="keyboard_arrow_up",this.headerClickable=!1,this._expanded=!1}connectedCallback(){super.connectedCallback(),this._expanded=this.expanded}toggle(){this._expanded=!this._expanded,this._dispatchExpandEvent()}expand(){this._expanded||(this._expanded=!0,this._dispatchExpandEvent())}collapse(){this._expanded&&(this._expanded=!1,this._dispatchExpandEvent())}_dispatchExpandEvent(){const e=this._expanded?"expand":"collapse";this.dispatchEvent(new CustomEvent(e,{detail:{expanded:this._expanded},bubbles:!0,composed:!0}))}_handleToggle(){this.toggle()}_handleHeaderClick(e){this.headerClickable&&(e.target.closest("md-icon-button")||this.toggle())}render(){const e=`card ${this.variant}`;return l.html`
2
2
  <div class="${e}">
3
+
3
4
  <div
4
5
  class="header ${this.headerClickable?"clickable":""}"
5
6
  @click=${this._handleHeaderClick}
@@ -26,6 +27,7 @@
26
27
  :host {
27
28
  display: block;
28
29
  font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
30
+ font-weight: var(--md-sys-typescale-body-large-weight, 400);
29
31
  }
30
32
 
31
33
  .card {
@@ -77,6 +79,10 @@
77
79
  gap: var(--md-sys-spacing-300, 12px);
78
80
  }
79
81
 
82
+ ::slotted(*) {
83
+ font-family: "Proxima Nova", Arial, sans-serif !important;
84
+ }
85
+
80
86
  /* Expand button */
81
87
  .expand-button {
82
88
  flex-shrink: 0;
package/dist/components/pd-expandable-card.es.js CHANGED
@@ -1,11 +1,11 @@
1
- import { css as l, LitElement as p, html as m } from "lit";
2
- import { property as o, state as x, customElement as h } from "lit/decorators.js";
1
+ import { css as c, LitElement as p, html as m } from "lit";
2
+ import { property as n, state as x, customElement as h } from "lit/decorators.js";
3
3
  import "@material/web/icon/icon.js";
4
4
  import "@material/web/iconbutton/icon-button.js";
5
- var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (a, n, r, d) => {
6
- for (var t = d > 1 ? void 0 : d ? f(n, r) : n, i = a.length - 1, c; i >= 0; i--)
7
- (c = a[i]) && (t = (d ? c(n, r, t) : c(t)) || t);
8
- return d && t && v(n, r, t), t;
5
+ var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (a, o, i, d) => {
6
+ for (var t = d > 1 ? void 0 : d ? f(o, i) : o, r = a.length - 1, l; r >= 0; r--)
7
+ (l = a[r]) && (t = (d ? l(o, i, t) : l(t)) || t);
8
+ return d && t && v(o, i, t), t;
9
9
  };
10
10
  let e = class extends p {
11
11
  constructor() {
@@ -44,6 +44,7 @@ let e = class extends p {
44
44
  const a = `card ${this.variant}`;
45
45
  return m`
46
46
  <div class="${a}">
47
+
47
48
  <div
48
49
  class="header ${this.headerClickable ? "clickable" : ""}"
49
50
  @click=${this._handleHeaderClick}
@@ -69,10 +70,11 @@ let e = class extends p {
69
70
  `;
70
71
  }
71
72
  };
72
- e.styles = l`
73
+ e.styles = c`
73
74
  :host {
74
75
  display: block;
75
76
  font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
77
+ font-weight: var(--md-sys-typescale-body-large-weight, 400);
76
78
  }
77
79
 
78
80
  .card {
@@ -124,6 +126,10 @@ e.styles = l`
124
126
  gap: var(--md-sys-spacing-300, 12px);
125
127
  }
126
128
 
129
+ ::slotted(*) {
130
+ font-family: "Proxima Nova", Arial, sans-serif !important;
131
+ }
132
+
127
133
  /* Expand button */
128
134
  .expand-button {
129
135
  flex-shrink: 0;
@@ -180,19 +186,19 @@ e.styles = l`
180
186
  }
181
187
  `;
182
188
  s([
183
- o({ type: String })
189
+ n({ type: String })
184
190
  ], e.prototype, "variant", 2);
185
191
  s([
186
- o({ type: Boolean })
192
+ n({ type: Boolean })
187
193
  ], e.prototype, "expanded", 2);
188
194
  s([
189
- o({ type: String, attribute: "expand-icon" })
195
+ n({ type: String, attribute: "expand-icon" })
190
196
  ], e.prototype, "expandIcon", 2);
191
197
  s([
192
- o({ type: String, attribute: "collapse-icon" })
198
+ n({ type: String, attribute: "collapse-icon" })
193
199
  ], e.prototype, "collapseIcon", 2);
194
200
  s([
195
- o({ type: Boolean, attribute: "header-clickable" })
201
+ n({ type: Boolean, attribute: "header-clickable" })
196
202
  ], e.prototype, "headerClickable", 2);
197
203
  s([
198
204
  x()
package/dist/components/pd-icon-button.cjs.js CHANGED
@@ -1,68 +1,56 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("lit"),l=require("lit/decorators.js");require("@material/web/iconbutton/icon-button.js");require("@material/web/iconbutton/filled-icon-button.js");require("@material/web/iconbutton/filled-tonal-icon-button.js");require("@material/web/iconbutton/outlined-icon-button.js");require("@material/web/icon/icon.js");var d=Object.defineProperty,u=Object.getOwnPropertyDescriptor,r=(a,t,o,e)=>{for(var i=e>1?void 0:e?u(t,o):t,c=a.length-1,s;c>=0;c--)(s=a[c])&&(i=(e?s(t,o,i):s(i))||i);return e&&i&&d(t,o,i),i};exports.PdIconButton=class extends n.LitElement{constructor(){super(...arguments),this.variant="standard",this.icon="",this.selectedIcon="",this.disabled=!1,this.toggle=!1,this.selected=!1,this.href="",this.target="",this.ariaLabel="",this.ariaLabelSelected=""}getIconButtonTemplate(){const t=this.icon?n.html`<md-icon>${this.icon}</md-icon>`:n.html`<slot></slot>`,o=this.selectedIcon?n.html`<md-icon slot="selected">${this.selectedIcon}</md-icon>`:n.nothing,e={disabled:this.disabled,toggle:this.toggle,selected:this.selected,href:this.href||n.nothing,target:this.target||n.nothing,"aria-label":this.ariaLabel||n.nothing,"aria-label-selected":this.ariaLabelSelected||n.nothing};switch(this.variant){case"filled":return n.html`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("lit"),n=require("lit/decorators.js");require("@material/web/iconbutton/icon-button.js");require("@material/web/iconbutton/filled-icon-button.js");require("@material/web/iconbutton/filled-tonal-icon-button.js");require("@material/web/iconbutton/outlined-icon-button.js");require("@material/web/icon/icon.js");var d=Object.defineProperty,u=Object.getOwnPropertyDescriptor,i=(s,l,r,c)=>{for(var t=c>1?void 0:c?u(l,r):l,o=s.length-1,a;o>=0;o--)(a=s[o])&&(t=(c?a(l,r,t):a(t))||t);return c&&t&&d(l,r,t),t};exports.PdIconButton=class extends e.LitElement{constructor(){super(...arguments),this.variant="standard",this.icon="",this.selectedIcon="",this.disabled=!1,this.toggle=!1,this.selected=!1,this.href="",this.target="",this.ariaLabel="",this.ariaLabelSelected="",this._internalSelected=!1}connectedCallback(){super.connectedCallback(),this._internalSelected=this.selected}get isSelected(){return this.toggle?this._internalSelected:this.selected}getIconButtonTemplate(){const l=this.isSelected,r=l&&this.selectedIcon?this.selectedIcon:this.icon,c=l?"icon-selected":"icon-unselected",t=r?e.html`<md-icon class="${c}">${r}</md-icon>`:e.html`<slot></slot>`,o={disabled:this.disabled,toggle:this.toggle,selected:l,href:this.href||e.nothing,target:this.target||e.nothing,"aria-label":this.ariaLabel||e.nothing,"aria-label-selected":this.ariaLabelSelected||e.nothing};switch(this.variant){case"filled":return e.html`
2
2
  <md-filled-icon-button
3
- ?disabled=${e.disabled}
4
- ?toggle=${e.toggle}
5
- ?selected=${e.selected}
6
- .href=${e.href}
7
- .target=${e.target}
8
- aria-label=${e["aria-label"]}
9
- aria-label-selected=${e["aria-label-selected"]}
10
- @input=${this._handleInput}
11
- @change=${this._handleChange}
3
+ ?disabled=${o.disabled}
4
+ ?toggle=${o.toggle}
5
+ ?selected=${o.selected}
6
+ .href=${o.href}
7
+ .target=${o.target}
8
+ aria-label=${o["aria-label"]}
9
+ aria-label-selected=${o["aria-label-selected"]}
12
10
  @click=${this._handleClick}
13
11
  >
14
12
  ${t}
15
- ${o}
16
13
  </md-filled-icon-button>
17
- `;case"tonal":return n.html`
14
+ `;case"tonal":return e.html`
18
15
  <md-filled-tonal-icon-button
19
- ?disabled=${e.disabled}
20
- ?toggle=${e.toggle}
21
- ?selected=${e.selected}
22
- .href=${e.href}
23
- .target=${e.target}
24
- aria-label=${e["aria-label"]}
25
- aria-label-selected=${e["aria-label-selected"]}
26
- @input=${this._handleInput}
27
- @change=${this._handleChange}
16
+ ?disabled=${o.disabled}
17
+ ?toggle=${o.toggle}
18
+ ?selected=${o.selected}
19
+ .href=${o.href}
20
+ .target=${o.target}
21
+ aria-label=${o["aria-label"]}
22
+ aria-label-selected=${o["aria-label-selected"]}
28
23
  @click=${this._handleClick}
29
24
  >
30
25
  ${t}
31
- ${o}
32
26
  </md-filled-tonal-icon-button>
33
- `;case"outlined":return n.html`
27
+ `;case"outlined":return e.html`
34
28
  <md-outlined-icon-button
35
- ?disabled=${e.disabled}
36
- ?toggle=${e.toggle}
37
- ?selected=${e.selected}
38
- .href=${e.href}
39
- .target=${e.target}
40
- aria-label=${e["aria-label"]}
41
- aria-label-selected=${e["aria-label-selected"]}
42
- @input=${this._handleInput}
43
- @change=${this._handleChange}
29
+ ?disabled=${o.disabled}
30
+ ?toggle=${o.toggle}
31
+ ?selected=${o.selected}
32
+ .href=${o.href}
33
+ .target=${o.target}
34
+ aria-label=${o["aria-label"]}
35
+ aria-label-selected=${o["aria-label-selected"]}
44
36
  @click=${this._handleClick}
45
37
  >
46
38
  ${t}
47
- ${o}
48
39
  </md-outlined-icon-button>
49
- `;default:return n.html`
40
+ `;default:return e.html`
50
41
  <md-icon-button
51
- ?disabled=${e.disabled}
52
- ?toggle=${e.toggle}
53
- ?selected=${e.selected}
54
- .href=${e.href}
55
- .target=${e.target}
56
- aria-label=${e["aria-label"]}
57
- aria-label-selected=${e["aria-label-selected"]}
58
- @input=${this._handleInput}
59
- @change=${this._handleChange}
42
+ ?disabled=${o.disabled}
43
+ ?toggle=${o.toggle}
44
+ ?selected=${o.selected}
45
+ .href=${o.href}
46
+ .target=${o.target}
47
+ aria-label=${o["aria-label"]}
48
+ aria-label-selected=${o["aria-label-selected"]}
60
49
  @click=${this._handleClick}
61
50
  >
62
51
  ${t}
63
- ${o}
64
52
  </md-icon-button>
65
- `}}render(){return this.getIconButtonTemplate()}_handleClick(t){this.disabled||this.dispatchEvent(new CustomEvent("icon-button-click",{detail:{variant:this.variant,selected:this.selected,toggle:this.toggle},bubbles:!0}))}_handleInput(t){if(this.disabled)return;const o=t.target;this.selected=o.selected,this.dispatchEvent(new CustomEvent("input",{detail:{selected:o.selected,variant:this.variant},bubbles:!0}))}_handleChange(t){if(this.disabled)return;const o=t.target;this.selected=o.selected,this.dispatchEvent(new CustomEvent("change",{detail:{selected:o.selected,variant:this.variant},bubbles:!0}))}};exports.PdIconButton.styles=n.css`
53
+ `}}render(){return this.getIconButtonTemplate()}_handleClick(l){if(this.disabled)return;this.toggle&&(this._internalSelected=!this._internalSelected);const r=this.isSelected,c=l.target;c&&c.blur(),this.dispatchEvent(new CustomEvent("pd-icon-button-click",{detail:{variant:this.variant,selected:r,toggle:this.toggle,icon:this.icon,selectedIcon:this.selectedIcon},bubbles:!0,composed:!0})),this.toggle&&this.dispatchEvent(new CustomEvent("change",{detail:{selected:r,variant:this.variant},bubbles:!0,composed:!0}))}};exports.PdIconButton.styles=e.css`
66
54
  :host {
67
55
  display: inline-block;
68
56
  --md-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
@@ -71,6 +59,17 @@
71
59
  --md-outlined-icon-button-icon-size: var(--md-sys-icon-size, 1.5rem);
72
60
  }
73
61
 
62
+ /* Icon fill states - Industry standard approach */
63
+ .icon-unselected {
64
+ font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
65
+ transition: font-variation-settings var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
66
+ }
67
+
68
+ .icon-selected {
69
+ font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
70
+ transition: font-variation-settings var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
71
+ }
72
+
74
73
  :host([variant="standard"]) {
75
74
  --md-icon-button-icon-color: var(--md-sys-color-on-surface-variant);
76
75
  --md-icon-button-hover-icon-color: var(--md-sys-color-on-surface-variant-hover);
@@ -128,6 +127,7 @@
128
127
  --md-outlined-icon-button-container-shape: var(--md-sys-shape-corner-full);
129
128
  }
130
129
 
130
+ /* Enhanced visual feedback */
131
131
  md-icon-button:hover,
132
132
  md-filled-icon-button:hover,
133
133
  md-filled-tonal-icon-button:hover,
@@ -142,6 +142,31 @@
142
142
  transform: scale(0.95);
143
143
  }
144
144
 
145
+ /* Remove focus after click to prevent gray state */
146
+ md-icon-button,
147
+ md-filled-icon-button,
148
+ md-filled-tonal-icon-button,
149
+ md-outlined-icon-button {
150
+ outline: none;
151
+ }
152
+
153
+ md-icon-button:focus,
154
+ md-filled-icon-button:focus,
155
+ md-filled-tonal-icon-button:focus,
156
+ md-outlined-icon-button:focus {
157
+ outline: none;
158
+ }
159
+
160
+ /* Only show focus outline for keyboard navigation */
161
+ md-icon-button:focus-visible,
162
+ md-filled-icon-button:focus-visible,
163
+ md-filled-tonal-icon-button:focus-visible,
164
+ md-outlined-icon-button:focus-visible {
165
+ outline: 2px solid var(--md-sys-color-primary);
166
+ outline-offset: 2px;
167
+ }
168
+
169
+ /* Disabled state */
145
170
  :host([disabled]) md-icon-button,
146
171
  :host([disabled]) md-filled-icon-button,
147
172
  :host([disabled]) md-filled-tonal-icon-button,
@@ -156,4 +181,10 @@
156
181
  :host([disabled]) md-outlined-icon-button:hover {
157
182
  transform: none;
158
183
  }
159
- `;r([l.property({type:String})],exports.PdIconButton.prototype,"variant",2);r([l.property({type:String})],exports.PdIconButton.prototype,"icon",2);r([l.property({type:String,attribute:"selected-icon"})],exports.PdIconButton.prototype,"selectedIcon",2);r([l.property({type:Boolean})],exports.PdIconButton.prototype,"disabled",2);r([l.property({type:Boolean})],exports.PdIconButton.prototype,"toggle",2);r([l.property({type:Boolean})],exports.PdIconButton.prototype,"selected",2);r([l.property({type:String})],exports.PdIconButton.prototype,"href",2);r([l.property({type:String})],exports.PdIconButton.prototype,"target",2);r([l.property({type:String,attribute:"aria-label"})],exports.PdIconButton.prototype,"ariaLabel",2);r([l.property({type:String,attribute:"aria-label-selected"})],exports.PdIconButton.prototype,"ariaLabelSelected",2);exports.PdIconButton=r([l.customElement("pd-icon-button")],exports.PdIconButton);
184
+
185
+ /* Icon accessibility improvements */
186
+ md-icon {
187
+ user-select: none;
188
+ pointer-events: none;
189
+ }
190
+ `;i([n.property({type:String})],exports.PdIconButton.prototype,"variant",2);i([n.property({type:String})],exports.PdIconButton.prototype,"icon",2);i([n.property({type:String,attribute:"selected-icon"})],exports.PdIconButton.prototype,"selectedIcon",2);i([n.property({type:Boolean})],exports.PdIconButton.prototype,"disabled",2);i([n.property({type:Boolean})],exports.PdIconButton.prototype,"toggle",2);i([n.property({type:Boolean})],exports.PdIconButton.prototype,"selected",2);i([n.property({type:String})],exports.PdIconButton.prototype,"href",2);i([n.property({type:String})],exports.PdIconButton.prototype,"target",2);i([n.property({type:String,attribute:"aria-label"})],exports.PdIconButton.prototype,"ariaLabel",2);i([n.property({type:String,attribute:"aria-label-selected"})],exports.PdIconButton.prototype,"ariaLabelSelected",2);i([n.state()],exports.PdIconButton.prototype,"_internalSelected",2);exports.PdIconButton=i([n.customElement("pd-icon-button")],exports.PdIconButton);