@kubex/zinc 1.1.127 → 1.1.128

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kubex/zinc",
3
- "version": "1.1.127",
3
+ "version": "1.1.128",
4
4
  "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
5
5
  "keywords": [
6
6
  "web components",
@@ -191,6 +191,9 @@
191
191
  --zn-focus-ring-width: 3px;
192
192
  --zn-focus-ring: var(--zn-focus-ring-style) var(--zn-focus-ring-width) var(--zn-focus-ring-color);
193
193
  --zn-focus-ring-offset: 1px;
194
+ // Space a focus ring needs outside a control's box, for boxes that clip around
195
+ // one. Must stay a plain length: overflow-clip-margin rejects calc(), silently 0.
196
+ --zn-focus-ring-outset: 4px;
194
197
 
195
198
  /**************************************************************
196
199
  * Forms
@@ -114,7 +114,8 @@
114
114
 
115
115
  .button:focus-visible {
116
116
  outline: 2px solid rgb(var(--btn-color));
117
- outline-offset: 2px;
117
+ // the token is a total (width + offset), not the offset itself
118
+ outline-offset: calc(var(--zn-focus-ring-outset) - 2px);
118
119
  }
119
120
 
120
121
  [disabled] {
@@ -131,8 +131,7 @@
131
131
  flex-grow: 1;
132
132
  flex-shrink: 1;
133
133
  overflow-x: clip;
134
- // Enough slack for a focused control's ring to sit outside its box uncut
135
- overflow-clip-margin: var(--zn-focus-ring-width);
134
+ overflow-clip-margin: var(--zn-focus-ring-outset);
136
135
  overflow-y: visible;
137
136
  min-width: 20px;
138
137
  }