Skip to content

Commit ed80442

Browse files
jellydeckJarvisInvestInsight
jellydeck
and
JarvisInvestInsight
committed
fix: outline clip
as per dicussion from #650 by @JarvisInvestInsight Co-Authored-By: J.A.R.V.I.S. <258503261+JarvisInvestInsight@users.noreply.github.com>
1 parent 7cbfa0f commit ed80442

12 files changed

Lines changed: 50 additions & 41 deletions

‎app/components/CollapsibleSection.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ useHead({
7575

7676
<template>
7777
<section class="scroll-mt-20" :data-anchor-id="id">
78-
<div class="flex items-center justify-between mb-3">
78+
<div class="flex items-center justify-between mb-3 px-1">
7979
<component
8080
:is="headingLevel"
8181
:id="headingId"

‎app/components/Modal.client.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ defineExpose({
2525
<dialog
2626
ref="dialogRef"
2727
closedby="any"
28-
class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white"
28+
class="w-full bg-bg border border-border rounded-lg shadow-xl max-h-[90vh] overflow-y-auto overscroll-contain m-0 m-auto p-6 text-white focus-visible:outline focus-visible:outline-accent/70"
2929
:aria-labelledby="modalTitleId"
3030
v-bind="$attrs"
3131
>
@@ -36,11 +36,11 @@ defineExpose({
3636
</h2>
3737
<button
3838
type="button"
39-
class="text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
39+
class="text-fg-subtle w-5 h-5 hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
4040
:aria-label="$t('common.close')"
4141
@click="handleModalClose"
4242
>
43-
<span class="i-carbon-close w-5 h-5" aria-hidden="true" />
43+
<span class="i-carbon-close" aria-hidden="true" />
4444
</button>
4545
</div>
4646
<!-- Modal body content -->

‎app/components/Package/Dependencies.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,10 @@ const sortedOptionalDependencies = computed(() => {
7575
id="dependencies"
7676
:title="$t('package.dependencies.title', { count: sortedDependencies.length })"
7777
>
78-
<ul class="space-y-1 list-none m-0 p-0" :aria-label="$t('package.dependencies.list_label')">
78+
<ul
79+
class="space-y-1 list-none m-0 p-0 px-1"
80+
:aria-label="$t('package.dependencies.list_label')"
81+
>
7982
<li
8083
v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
8184
:key="dep"
@@ -145,7 +148,7 @@ const sortedOptionalDependencies = computed(() => {
145148
<button
146149
v-if="sortedDependencies.length > 10 && !depsExpanded"
147150
type="button"
148-
class="mt-2 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
151+
class="my-2 ms-1 font-mono text-xs text-fg-muted hover:text-fg transition-colors duration-200 rounded"
149152
@click="depsExpanded = true"
150153
>
151154
{{

‎app/components/Package/DownloadAnalytics.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -638,7 +638,7 @@ const config = computed(() => {
638638
</label>
639639

640640
<div
641-
class="flex items-center px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
641+
class="flex items-center px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
642642
>
643643
<select
644644
id="granularity"
@@ -663,7 +663,7 @@ const config = computed(() => {
663663
{{ $t('package.downloads.start_date') }}
664664
</label>
665665
<div
666-
class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
666+
class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
667667
>
668668
<span class="i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
669669
<input
@@ -683,7 +683,7 @@ const config = computed(() => {
683683
{{ $t('package.downloads.end_date') }}
684684
</label>
685685
<div
686-
class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/30)"
686+
class="flex items-center gap-2 px-2.5 py-1.75 bg-bg-subtle border border-border rounded-md focus-within:(border-border-hover ring-2 ring-accent/70)"
687687
>
688688
<span class="i-carbon:calendar w-4 h-4 text-fg-subtle shrink-0" aria-hidden="true" />
689689
<input

‎app/components/Package/Maintainers.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,11 +168,11 @@ watch(
168168
</script>
169169

170170
<template>
171-
<section id="maintainers" v-if="maintainers?.length" class="scroll-mt-20">
171+
<section id="maintainers" v-if="maintainers?.length" class="scroll-mt-20 px-1">
172172
<h2 id="maintainers-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
173173
<a
174174
href="#maintainers"
175-
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline"
175+
class="inline-flex items-center gap-1.5 text-fg-subtle hover:text-fg-muted transition-colors duration-200 no-underline mt-1"
176176
>
177177
{{ $t('package.maintainers.title') }}
178178
<span

‎app/components/Package/Versions.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -310,14 +310,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
310310
<!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
311311
<div v-for="row in visibleTagRows" :key="row.id">
312312
<div
313-
class="flex items-center gap-2 pe-2"
313+
class="flex items-center gap-2 pe-2 px-1"
314314
:class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
315315
>
316316
<!-- Expand button (only if there are more versions to show) -->
317317
<button
318318
v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
319319
type="button"
320-
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
320+
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm"
321321
:aria-expanded="expandedTags.has(row.tag)"
322322
:aria-label="
323323
expandedTags.has(row.tag)
@@ -350,7 +350,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
350350
<div>
351351
<NuxtLink
352352
:to="versionRoute(row.primaryVersion.version)"
353-
class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
353+
class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent"
354354
:class="
355355
row.primaryVersion.deprecated
356356
? 'text-red-400 hover:text-red-300'
@@ -465,10 +465,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
465465
</div>
466466

467467
<!-- Other versions section -->
468-
<div class="pt-1">
468+
<div class="p-1">
469469
<button
470470
type="button"
471-
class="flex items-center gap-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
471+
class="flex items-center gap-2 text-start rounded-sm"
472472
:aria-expanded="otherVersionsExpanded"
473473
:aria-label="
474474
otherVersionsExpanded
@@ -567,7 +567,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
567567
<div class="flex items-center gap-2 min-w-0">
568568
<button
569569
type="button"
570-
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg-muted focus-visible:ring-offset-1 focus-visible:ring-offset-bg rounded-sm"
570+
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 focus-visible:ring-offset-bg rounded-sm"
571571
:aria-expanded="expandedMajorGroups.has(group.groupKey)"
572572
:aria-label="
573573
expandedMajorGroups.has(group.groupKey)

‎app/components/Package/WeeklyDownloadStats.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ const config = computed(() => {
200200
<button
201201
type="button"
202202
@click="openChartModal"
203-
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70 rounded"
203+
class="link-subtle font-mono text-sm inline-flex items-center gap-1.5 ms-auto shrink-0 self-center focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded"
204204
:title="$t('package.downloads.analyze')"
205205
>
206206
<span class="i-carbon:data-analytics w-4 h-4" aria-hidden="true" />

‎app/components/Readme.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const handleCopy = async (e: MouseEvent) => {
3535

3636
<template>
3737
<article
38-
class="readme prose prose-invert max-w-[70ch] lg:max-w-none"
38+
class="readme prose prose-invert max-w-[70ch] lg:max-w-none px-1"
3939
v-html="html"
4040
@click="handleCopy"
4141
/>

‎app/components/compare/FacetSelector.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function isCategoryNoneSelected(category: string): boolean {
4444
</span>
4545
<button
4646
type="button"
47-
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
47+
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
4848
:class="
4949
isCategoryAllSelected(category)
5050
? 'text-fg-muted'
@@ -63,7 +63,7 @@ function isCategoryNoneSelected(category: string): boolean {
6363
<span class="text-[10px] text-fg-muted/40">/</span>
6464
<button
6565
type="button"
66-
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline"
66+
class="text-[10px] transition-colors focus-visible:outline-none focus-visible:underline focus-visible:underline-accent"
6767
:class="
6868
isCategoryNoneSelected(category)
6969
? 'text-fg-muted'

‎app/components/compare/PackageSelector.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,16 +82,18 @@ function handleBlur() {
8282

8383
<!-- Add package input -->
8484
<div v-if="packages.length < maxPackages" class="relative">
85-
<div class="relative">
85+
<div class="relative group">
8686
<label for="package-search" class="sr-only">
8787
{{ $t('compare.selector.search_label') }}
8888
</label>
89+
8990
<span
90-
class="absolute inset-is-3 top-1/2 -translate-y-1/2 text-fg-subtle flex"
91+
class="absolute inset-y-0 start-3 flex items-center text-fg-subtle pointer-events-none group-focus-within:text-accent"
9192
aria-hidden="true"
9293
>
9394
<span class="i-carbon:search w-4 h-4" />
9495
</span>
96+
9597
<input
9698
id="package-search"
9799
v-model="inputValue"
@@ -101,7 +103,7 @@ function handleBlur() {
101103
? $t('compare.selector.search_first')
102104
: $t('compare.selector.search_add')
103105
"
104-
class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:outline-none"
106+
class="w-full bg-bg-subtle border border-border rounded-lg ps-10 pe-4 py-2.5 font-mono text-sm text-fg placeholder:text-fg-subtle motion-reduce:transition-none duration-200 focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/70"
105107
aria-autocomplete="list"
106108
@focus="isInputFocused = true"
107109
@blur="handleBlur"

0 commit comments

Comments
 (0)