@orange-halo/components 2.0.0 → 2.1.0

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 (49) hide show
  1. package/custom-elements.json +3182 -73
  2. package/dist/index.d.ts +6 -0
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +4 -0
  5. package/dist/index.js.map +1 -1
  6. package/dist/oh-accordion.js +17 -17
  7. package/dist/oh-alert.js +12 -12
  8. package/dist/oh-breadcrumb.js +12 -12
  9. package/dist/oh-button.d.ts +1 -1
  10. package/dist/oh-button.js +34 -34
  11. package/dist/oh-card.d.ts.map +1 -1
  12. package/dist/oh-card.js +17 -45
  13. package/dist/oh-card.js.map +1 -1
  14. package/dist/oh-checkbox-group.figma.js +1 -1
  15. package/dist/oh-checkbox-group.figma.js.map +1 -1
  16. package/dist/oh-checkbox-group.js +13 -13
  17. package/dist/oh-checkbox.d.ts +2 -2
  18. package/dist/oh-checkbox.js +19 -19
  19. package/dist/oh-drawer.js +1 -1
  20. package/dist/oh-footer.d.ts +5 -0
  21. package/dist/oh-footer.d.ts.map +1 -1
  22. package/dist/oh-footer.js +5 -0
  23. package/dist/oh-footer.js.map +1 -1
  24. package/dist/oh-hero.d.ts +5 -0
  25. package/dist/oh-hero.d.ts.map +1 -1
  26. package/dist/oh-hero.js +5 -0
  27. package/dist/oh-hero.js.map +1 -1
  28. package/dist/oh-icon.js +3 -3
  29. package/dist/oh-input.d.ts +2 -2
  30. package/dist/oh-input.figma.js +2 -2
  31. package/dist/oh-input.figma.js.map +1 -1
  32. package/dist/oh-input.js +5 -5
  33. package/dist/oh-link.js +23 -23
  34. package/dist/oh-modal.d.ts +2 -2
  35. package/dist/oh-modal.js +10 -10
  36. package/dist/oh-navbar.js +1 -1
  37. package/dist/oh-progress.js +2 -2
  38. package/dist/oh-radio-group.js +13 -13
  39. package/dist/oh-radio.d.ts +1 -1
  40. package/dist/oh-radio.js +18 -18
  41. package/dist/oh-select.d.ts +2 -2
  42. package/dist/oh-select.d.ts.map +1 -1
  43. package/dist/oh-select.js +17 -12
  44. package/dist/oh-select.js.map +1 -1
  45. package/dist/oh-skip-link.js +3 -3
  46. package/dist/oh-tabs.js +9 -9
  47. package/dist/oh-toggle.js +11 -11
  48. package/dist/styles/typography.js +4 -4
  49. package/package.json +11 -4
package/dist/oh-toggle.js CHANGED
@@ -97,9 +97,9 @@ let OhToggle = class OhToggle extends OhElement {
97
97
  width: 26px;
98
98
  height: 26px;
99
99
  background-color: var(--oh-color-surface-base);
100
- border: var(--oh-input-base-border-width) solid var(--oh-color-border-emphasis);
100
+ border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
101
101
  border-radius: 50%;
102
- box-shadow: 3px 3px 0 0 var(--oh-shadow-secondary);
102
+ box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-secondary);
103
103
  transition:
104
104
  transform var(--oh-motion-snappy) var(--oh-motion-ease-gentle),
105
105
  box-shadow var(--oh-motion-snappy) ease;
@@ -108,31 +108,31 @@ let OhToggle = class OhToggle extends OhElement {
108
108
  /* Checked: thumb moves right, shadow flips to bottom-left */
109
109
  .toggle__track--checked .toggle__thumb {
110
110
  transform: translateX(30px);
111
- box-shadow: -3px 3px 0 0 var(--oh-shadow-primary);
111
+ box-shadow: calc(-1 * var(--oh-elevation-offset-md)) var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-primary);
112
112
  }
113
113
 
114
114
  /* Hover state - lift further up-left, shadow grows */
115
115
  .toggle__track:hover .toggle__thumb {
116
- transform: translate(-1px, -1px);
117
- box-shadow: 4px 4px 0 0 var(--oh-shadow-secondary);
116
+ transform: translate(var(--oh-lift-hover-sm), var(--oh-lift-hover-sm));
117
+ box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-secondary);
118
118
  }
119
119
 
120
120
  /* Checked hover - shadow flipped and grows */
121
121
  .toggle__track--checked:hover .toggle__thumb {
122
- transform: translateX(30px) translate(1px, -1px);
123
- box-shadow: -4px 4px 0 0 var(--oh-shadow-primary);
122
+ transform: translateX(30px) translate(var(--oh-lift-press-sm), var(--oh-lift-hover-sm));
123
+ box-shadow: calc(-1 * var(--oh-elevation-offset-lg)) var(--oh-elevation-offset-lg) 0 0 var(--oh-shadow-primary);
124
124
  }
125
125
 
126
126
  /* Active/pressed state - press down, shadow shrinks */
127
127
  .toggle__track:active .toggle__thumb {
128
- transform: translate(1px, 1px);
129
- box-shadow: 1px 1px 0 0 var(--oh-shadow-secondary);
128
+ transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
129
+ box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs) 0 0 var(--oh-shadow-secondary);
130
130
  }
131
131
 
132
132
  /* Checked active - shadow flipped and shrinks */
133
133
  .toggle__track--checked:active .toggle__thumb {
134
- transform: translateX(30px) translate(-1px, 1px);
135
- box-shadow: -1px 1px 0 0 var(--oh-shadow-primary);
134
+ transform: translateX(30px) translate(var(--oh-lift-hover-sm), var(--oh-lift-press-sm));
135
+ box-shadow: calc(-1 * var(--oh-elevation-offset-xs)) var(--oh-elevation-offset-xs) 0 0 var(--oh-shadow-primary);
136
136
  }
137
137
 
138
138
  /* ═══════════════════════════════════════════════════════════════
package/dist/styles/typography.js CHANGED
@@ -129,13 +129,13 @@ export const typographyStyles = css `
129
129
  left: 0;
130
130
  right: 0;
131
131
  bottom: 0;
132
- height: 2px;
132
+ height: var(--oh-decoration-underline-thickness);
133
133
  background: repeating-linear-gradient(
134
134
  to right,
135
135
  currentColor 0,
136
- currentColor 4px,
137
- transparent 4px,
138
- transparent 8px
136
+ currentColor var(--oh-decoration-underline-dash),
137
+ transparent var(--oh-decoration-underline-dash),
138
+ transparent var(--oh-decoration-underline-period)
139
139
  );
140
140
  transform-origin: right;
141
141
  transition: transform var(--oh-motion-slow) ease;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orange-halo/components",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "description": "Web Components for Orange Halo Design System",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -10,6 +10,7 @@
10
10
  "types": "./dist/index.d.ts",
11
11
  "import": "./dist/index.js"
12
12
  },
13
+ "./custom-elements.json": "./custom-elements.json",
13
14
  "./oh-accordion.js": {
14
15
  "types": "./dist/oh-accordion.d.ts",
15
16
  "import": "./dist/oh-accordion.js"
@@ -113,6 +114,10 @@
113
114
  "./oh-tabs.js": {
114
115
  "types": "./dist/oh-tabs.d.ts",
115
116
  "import": "./dist/oh-tabs.js"
117
+ },
118
+ "./oh-toggle.js": {
119
+ "types": "./dist/oh-toggle.d.ts",
120
+ "import": "./dist/oh-toggle.js"
116
121
  }
117
122
  },
118
123
  "files": [
@@ -124,18 +129,20 @@
124
129
  "lit": "^3.2.1"
125
130
  },
126
131
  "peerDependencies": {
127
- "@orange-halo/tokens": "^2.0.0",
132
+ "@orange-halo/tokens": "^2.1.0",
128
133
  "@orange-halo/utils": "^1.1.0"
129
134
  },
130
135
  "devDependencies": {
131
- "@orange-halo/tokens": "2.0.0",
136
+ "@custom-elements-manifest/analyzer": "^0.11.0",
137
+ "@orange-halo/tokens": "2.1.0",
132
138
  "@orange-halo/utils": "1.1.0"
133
139
  },
134
140
  "publishConfig": {
135
141
  "access": "public"
136
142
  },
137
143
  "scripts": {
138
- "build": "tsc",
144
+ "build": "tsc && cem analyze",
145
+ "analyze": "cem analyze",
139
146
  "dev": "tsc --watch",
140
147
  "clean": "rm -rf dist",
141
148
  "lint": "eslint src/",